@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&display=swap";:root{font-family:Space Grotesk,system-ui,sans-serif;color:#e8efff;background-color:#05070c}*{box-sizing:border-box}html,body{height:100%}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 20% 20%,#121a2f,#05070c 45%,#030407);overflow:hidden}#root{height:100dvh}.app{position:relative;height:100%;width:100%}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.canvas-wrap canvas{display:block;width:100%;height:100%}.overlay{position:relative;z-index:2;width:min(560px,90vw);margin:clamp(32px,6vw,72px);padding:clamp(20px,4vw,40px);border-radius:28px;background:linear-gradient(140deg,#09101eeb,#080c14a6);border:1px solid rgba(122,166,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px #00000073;pointer-events:auto}.brand{letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;color:#aec4ffbf}h1{font-size:clamp(2.4rem,4vw,3.4rem);margin:12px 0 16px;line-height:1.05}p{margin:0 0 22px;color:#dce6ffcc;font-size:1.02rem}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.cta{border:none;padding:12px 22px;border-radius:999px;font-weight:600;font-size:.95rem;background:linear-gradient(120deg,#6b9bff,#5ee7ff);color:#061021;cursor:default;pointer-events:none}.cta.ghost{background:transparent;border:1px solid rgba(148,186,255,.6);color:#e8efff}.hint{margin-top:22px;font-size:.9rem;color:#aec4ffb3}.intro{position:absolute;left:clamp(16px,4vw,40px);top:clamp(16px,4vw,32px);width:min(320px,70vw);padding:14px 16px;border-radius:18px;background:#080c14b3;border:1px solid rgba(122,166,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:3;pointer-events:auto}.intro-title{font-weight:600;font-size:1rem;margin-bottom:6px}.intro-text{font-size:.88rem;color:#dce6ffbf;margin-bottom:10px}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}.stat{display:grid;gap:2px}.stat .label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#aec4ff99}.stat .value{font-size:1rem;font-weight:600}.scramble{width:100%;border:1px solid rgba(148,186,255,.6);background:#0a101cb3;color:#e8efff;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.actions .scramble{width:100%}.reset{width:100%;border:1px solid rgba(122,166,255,.35);background:transparent;color:#e6f0ffe6;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600}.status{margin-top:8px;font-size:.82rem;color:#aec4ffbf}.close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(122,166,255,.3);background:#0a101cb3;color:#e8efff;font-size:1.2rem;line-height:1;cursor:pointer}.controls{position:absolute;right:clamp(16px,4vw,40px);top:clamp(16px,4vw,32px);display:grid;gap:12px;padding:14px 16px;border-radius:18px;background:#080c14b3;border:1px solid rgba(122,166,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:3;pointer-events:auto}.control{display:grid;gap:6px;font-size:.85rem;color:#aec4ffbf}.zoom-row{display:grid;grid-template-columns:repeat(2,36px);gap:8px;margin-bottom:8px}.zoom-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(122,166,255,.35);background:#0c121ee6;color:#e8efff;font-size:1.1rem;cursor:pointer}.size-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0c121ee6;border:1px solid rgba(122,166,255,.3);color:#e8efff;padding:8px 12px;border-radius:12px;font-size:.95rem;cursor:pointer}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#03050a8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:4}.modal{width:min(360px,86vw);padding:16px;border-radius:18px;background:#080c14e6;border:1px solid rgba(122,166,255,.25)}.modal-title{font-weight:600;margin-bottom:12px}.modal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.modal-option{border:1px solid rgba(122,166,255,.3);background:#0c121ee6;color:#e8efff;padding:10px 0;border-radius:12px;cursor:pointer;font-weight:600}.modal-option.active{background:linear-gradient(120deg,#6b9bff,#5ee7ff);color:#061021;border-color:transparent}@media (max-width: 720px){.overlay{margin:20px;width:calc(100% - 40px)}.cta-row{flex-direction:column}.intro{width:calc(100% - 40px);top:auto;bottom:20px}.intro-text{display:none}.controls{left:auto;right:16px;top:16px;padding:10px 12px}}