*{box-sizing:border-box}body{margin:0;color:#12486c;font-family:Arial,sans-serif;background:radial-gradient(ellipse at 90% 15%,#efffff 0,transparent 42%),linear-gradient(145deg,#d6faff,#b1e8f5 65%,#cdeba9);min-height:100vh}header{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#ffffff68;border-bottom:1px solid #fff}a{color:inherit;text-decoration:none}.brand{font-size:25px;font-weight:800;letter-spacing:4px}.brand small{font-size:10px;letter-spacing:2px;display:block;margin:4px 0 0 33px}#connection{font-size:10px;letter-spacing:2px;margin-right:15px}main{max-width:1600px;padding:40px 5%;margin:auto;display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px}aside{padding:12px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#258daa}h1{font-size:40px;line-height:1.08;letter-spacing:-1.5px;margin:20px 0}h2{font-size:20px;margin-top:28px}.intro,#description,.small{line-height:1.6;color:#427287}.intro{margin-bottom:32px}.small{font-size:12px}label{font-size:13px}select{width:100%;margin-top:9px;padding:14px;border:1px solid #fff;border-radius:12px;background:#ffffffa8;color:#12486c}button,.upload{border:1px solid #fff;border-radius:12px;background:linear-gradient(#ffffffed,#e3f6ffb8);padding:11px 14px;box-shadow:0 3px 10px #147a9b16;color:#165779;cursor:pointer;font-weight:600}button:hover,.upload:hover{background:white}button[aria-pressed=true]{background:linear-gradient(#76d5e8,#1c9bbf);color:white}button:focus-visible,select:focus-visible,.upload:focus-visible{outline:3px solid #168cb0;outline-offset:3px}.divider{height:1px;background:#fff;margin:24px 0}.upload{display:inline-block}#upload{display:block;max-width:100%;font-size:11px;margin:12px 0}.studio{min-width:0;border:1px solid #fff;border-radius:28px;padding:12px;background:#ffffff55;box-shadow:0 22px 60px #147da12a;overflow:hidden}#canvas{position:relative;height:520px;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fff 0,#daf4f8 60%,#9dd4e8);touch-action:none}canvas{display:block;width:100%;height:100%}.badge{position:absolute;top:18px;left:18px;background:#ffffffbd;padding:9px 13px;border:1px solid white;border-radius:20px;font-size:11px;max-width:90%;z-index:1}.hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:11px;pointer-events:none}nav{display:flex;flex-wrap:wrap;gap:8px;padding:16px 4px}nav label{display:flex;align-items:center;gap:9px}input[type=range]{width:100px;accent-color:#148cb3}footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;padding:8px 10px;color:#487c8f}.studio:fullscreen{background:#bce9f4;border-radius:0;display:flex;flex-direction:column}.studio:fullscreen #canvas{flex:1;height:auto}@media(max-width:800px){main{grid-template-columns:1fr;padding:20px;gap:16px}h1{font-size:30px;margin:12px 0}aside{padding:0}.intro{margin-bottom:12px}#canvas{height:420px}.small{max-width:500px}header{height:70px}#connection{display:none}h2{margin-top:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
:root{--mx:75vw;--my:10vh;--ink:#12486c;--muted:#427287;--glass:#ffffff70;--line:#ffffffb8;--surface:#d6faff}body{color:var(--ink);background:radial-gradient(650px circle at var(--mx) var(--my),#62cddd40,transparent 75%),linear-gradient(145deg,var(--surface),#8cb4be33);background-color:var(--surface)}header{background:var(--glass);border-color:var(--line)}.studio{background:var(--glass);border-color:var(--line);backdrop-filter:blur(20px)}.intro,#description,.small,footer{color:var(--muted)}#cover{width:100%;max-height:180px;object-fit:cover;border-radius:18px;margin-top:20px}#cover[hidden]{display:none}nav select{width:auto;margin:0;padding:10px}nav label{gap:8px}#trail{position:fixed;inset:0;pointer-events:none;z-index:90}#pen{position:fixed;top:0;left:0;pointer-events:none;z-index:91;font-size:32px;color:#47a4c9;text-shadow:1px 2px #0b354d,3px 5px 8px #16374b60}#pen[hidden]{display:none}[data-theme=dark]{--ink:#e5f5ff;--muted:#a1bbc9;--glass:#142838ba;--line:#6db4d32b;--surface:#07121d}[data-theme=dark] #canvas{background:radial-gradient(ellipse at 50% 35%,#274354,#142735 60%,#0c1a28)}[data-theme=dark] button,[data-theme=dark] select,[data-theme=dark] .upload{background:linear-gradient(#274658,#182f41);color:#d8f7ff;border-color:#558da947}[data-theme=dark] button[aria-pressed=true]{background:#197a96}[data-theme=dark] .badge{background:#132b3ee6;border-color:#558da947}[data-theme=dark] .divider{background:#558da947}[data-theme=dark] .studio:fullscreen{background:#07121d}@media(max-width:800px){nav select{max-width:160px}#pen,#trail{display:none}}@media(prefers-reduced-motion:reduce){#pen,#trail{display:none}}
.textures{margin-top:22px;padding:14px;border:1px solid var(--line);border-radius:16px}.textures summary{cursor:pointer;font-size:13px}.textures label{display:block;margin-top:12px}.textures input{max-width:100%;margin-top:14px;font-size:11px}#image-stage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:55px 16px}#image-stage[hidden],#canvas canvas[hidden]{display:none}
#pen{width:9px;height:35px;border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#12364e,#87def4 40%,#287ca0 75%,#133a52);border:1px solid #9ee5fc;box-shadow:3px 4px 8px #001d3960}#pen:after{content:'';position:absolute;left:0;bottom:-8px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:8px solid #85d9f0}#pen:before{content:'';position:absolute;inset:4px 1px auto;height:3px;background:#dcfaff;border-radius:2px}