*{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:#fff}button[aria-pressed=true]{background:linear-gradient(#76d5e8,#1c9bbf);color:#fff}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:#fff5;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}}