:root{--bg: #08080a;--panel: #101014;--panel-2: #16161c;--line: #26262e;--text: #e9e9ef;--muted: #8b8b99;--accent: #7fd4ff;--accent-ink: #04121a;--danger: #ff6b6b;--ok: #6bd68a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}#app{height:100%}.app{display:flex;flex-direction:column;height:100dvh}.app-header{display:flex;align-items:baseline;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}.app-header h1{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}.app-header p{margin:0;color:var(--muted);font-size:12px}.app-main{display:flex;flex:1;min-height:0}.stage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px;gap:12px}.stage-frame{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.stage-canvas-zoomed{cursor:grab}.stage-canvas-zoomed:active{cursor:grabbing}.stage-zoom{position:absolute;right:12px;bottom:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#0000009e;color:var(--muted);font-size:11px;cursor:pointer}.stage-zoom:hover{color:#fff}.stage-canvas{display:block;border-radius:14px;background:#000;box-shadow:0 18px 50px #0009}.transport{display:flex;align-items:center;gap:12px;flex:0 0 auto}.transport-play{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;font-size:12px}.transport-play:hover{border-color:var(--accent)}.transport-scrub{flex:1;min-width:60px}.transport-time,.transport-fps{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}.panel{flex:0 0 400px;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel);min-height:0}.tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px;border-bottom:1px solid var(--line);flex:0 0 auto}.tab{border:0;background:transparent;color:var(--muted);padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12.5px}.tab:hover{color:var(--text)}.tab-active{background:var(--panel-2);color:var(--text)}.panel-body{overflow-y:auto;padding:4px 16px 32px;flex:1}.section{padding:14px 0;border-bottom:1px solid var(--line)}.section:last-child{border-bottom:0}.section-title{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.hint{margin:0 0 10px;color:var(--muted);font-size:12.5px;line-height:1.5}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.field-inline{flex-direction:row;align-items:center;gap:8px}.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.field-label{font-size:12.5px;color:var(--text)}.field-value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:12px}.field-help{color:var(--muted);font-size:11.5px;line-height:1.45}input[type=range]{width:100%;accent-color:var(--accent)}input[type=text],input[type=number],textarea,select{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 9px;font:inherit;font-size:12.5px}textarea{resize:vertical}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}.marks{display:flex;flex-wrap:wrap;gap:5px}.mark{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:2px 9px;font-size:11.5px;cursor:pointer}.mark:hover{color:var(--text);border-color:var(--accent)}.mark-ramp{color:var(--accent)}.param-ramp{border:1px solid var(--line);border-radius:10px;padding:10px 10px 2px;margin-bottom:14px;background:var(--panel-2)}.param-ramp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.link{background:none;border:0;color:var(--accent);cursor:pointer;font-size:11.5px;padding:0}.link:disabled{color:var(--line);cursor:default}.preset-grid{display:grid;grid-template-columns:1fr;gap:6px}.preset{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--text)}.preset:hover,.preset-active{border-color:var(--accent)}.preset-name{font-size:13px;font-weight:550}.preset-meta{font-size:11.5px;color:var(--muted);line-height:1.4}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}.chip:hover{border-color:var(--accent)}.chip-active{border-color:var(--accent);background:var(--accent);color:#06121c;font-weight:600}.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.keys{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:11.5px}.keys th{text-align:left;color:var(--muted);font-weight:500;padding-bottom:4px}.keys td{padding:2px 3px 2px 0}.keys input{padding:4px 6px}.button{width:100%;border-radius:10px;padding:11px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--text)}.button-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.button-ghost{margin-top:8px}.progress{height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin-bottom:8px}.progress-bar{height:100%;background:var(--accent);transition:width .15s linear}.ok{color:var(--ok);font-size:12.5px;line-height:1.5;margin:10px 0 0}.error{color:var(--danger);font-size:12.5px;line-height:1.5;margin:10px 0 0}.verdict{font-size:12.5px;line-height:1.5;border-radius:9px;padding:9px 11px;margin:0}.verdict-open{background:#7fd4ff1a;color:var(--accent)}.verdict-closes{background:#ffb45a1a;color:#ffb45a}@media(max-width:900px){.app-main{flex-direction:column;overflow-y:auto}.stage{flex:0 0 auto;height:58dvh;padding:12px}.panel{flex:1 0 auto;border-left:0;border-top:1px solid var(--line)}.panel-body{overflow:visible}}.lang-switch{margin-left:auto;display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:2px}.lang-button{border:0;background:transparent;color:var(--muted);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;letter-spacing:.03em;cursor:pointer}.lang-button:hover{color:var(--text)}.lang-button-active{background:var(--accent);color:var(--accent-ink)}.lang-row{display:flex;gap:7px;align-items:flex-start}.lang-row+.lang-row{margin-top:5px}.lang-tag{flex:0 0 26px;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-align:center;border:1px solid var(--line);border-radius:5px;padding:2px 0}.lang-tag-active{color:var(--accent);border-color:var(--accent)}.lang-input{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.field-warn{color:#ffb45a;font-size:11px}.beat{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--panel-2)}.beat-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.beat-index{flex:0 0 20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--line);color:var(--text);font-size:11px;font-weight:600}.beat-time{flex:1;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}.beat-timing{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.beat-timing .field{margin-bottom:0}.beat-number{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}.beat-number input{width:68px;padding:4px 6px}.home{height:100dvh;overflow-y:auto;scroll-behavior:smooth}.hero{position:relative;height:100dvh;min-height:520px;display:flex;align-items:flex-end;overflow:hidden}.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hero-veil{position:absolute;inset:0;background:linear-gradient(to top,#08080af7,#08080ae6 30%,#08080a85 48%,#08080a00 74%),radial-gradient(120% 80% at 50% 0%,#08080a73,#08080a00 60%);pointer-events:none}.hero-body{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 32px 56px}.hero-brand{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.hero-claim{margin:10px 0 26px;font-size:clamp(34px,6.2vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:650;max-width:16ch}.hero-figure{border-left:2px solid var(--accent);padding-left:16px;margin-bottom:26px}.hero-name{margin:0 0 6px;font-size:15px;font-weight:600}.hand{font-family:Segoe Script,Bradley Hand,Ink Free,Segoe Print,Comic Sans MS,cursive;display:flex;flex-direction:column;gap:2px}.hand-line{position:relative;white-space:pre;animation-name:write;animation-timing-function:linear;animation-fill-mode:both}.hand-still .hand-line{animation:none}@keyframes write{0%{clip-path:inset(0 100% -18% 0)}to{clip-path:inset(0 -6% -18% 0)}}.hero-formula{margin:0;min-height:2.6em;font-size:clamp(15px,1.9vw,25px);line-height:1.5;color:#dfe9f2;text-shadow:0 0 22px rgba(127,212,255,.35)}.whispers{position:absolute;inset:0;overflow:hidden;pointer-events:none}.whisper{position:absolute;color:#7fd4ff29;white-space:nowrap;animation:drift 46s linear infinite}.whisper-1{top:13%;left:7%;font-size:20px}.whisper-2{top:27%;right:9%;font-size:26px;animation-duration:61s;animation-delay:-12s}.whisper-3{top:46%;left:16%;font-size:17px;animation-duration:54s;animation-delay:-30s}.whisper-4{top:62%;right:18%;font-size:22px;animation-duration:68s;animation-delay:-21s}@keyframes drift{0%{transform:translateZ(0)}50%{transform:translate3d(-22px,-16px,0)}to{transform:translateZ(0)}}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.hero-actions .button{width:auto;margin-top:0;padding:12px 22px}.hero-dots{display:flex;gap:7px}.hero-dot{width:22px;height:3px;padding:0;border:0;border-radius:2px;background:#e9e9ef3d;cursor:pointer;transition:background .25s ease}.hero-dot:hover{background:#e9e9ef80}.hero-dot-active{background:var(--accent)}.gallery{max-width:1180px;margin:0 auto;padding:76px 32px 96px}.gallery-head h2{margin:0 0 8px;font-size:26px;letter-spacing:-.02em}.gallery-head p{margin:0 0 30px;max-width:62ch;color:var(--muted);line-height:1.6}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card{display:flex;flex-direction:column;gap:4px;padding:0 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;overflow:hidden;cursor:pointer;transition:border-color .2s ease,transform .2s ease}.card:hover,.card:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}.card-canvas{width:100%;aspect-ratio:16 / 9;display:block;background:#000;margin-bottom:10px}.card-name{padding:0 14px;font-size:14px;font-weight:600}.card-hook{padding:0 14px;font-size:12px;color:var(--muted);line-height:1.45}.card-formula{padding:6px 14px 0;font-size:12px;color:#6f7a86;overflow:hidden}.card-formula .hand-line{overflow:hidden;text-overflow:ellipsis}.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#040406d1;backdrop-filter:blur(6px)}.sheet-body{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);width:min(1020px,100%);max-height:88dvh;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}.sheet-canvas{width:100%;height:100%;min-height:300px;display:block;background:#000}.sheet-text{padding:26px 28px;overflow-y:auto}.sheet-text h2{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}.sheet-text h3{margin:22px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.sheet-text p{margin:0;line-height:1.65;color:var(--muted)}.sheet-hook{font-size:15px;color:var(--text)!important}.sheet-formula{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:16px;line-height:1.8;color:#dfe9f2;overflow-x:auto}.sheet-symbols{margin:14px 0 0;display:grid;gap:8px}.sheet-symbols div{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline}.sheet-symbols dt{font-family:Iosevka,JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--text)}.sheet-symbols dd{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}.sheet-text .button{margin-top:26px}.sheet-close{position:absolute;top:12px;right:12px;z-index:1;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:#08080ac7;color:var(--text);cursor:pointer}.sheet-close:hover{border-color:var(--accent)}.app-home{border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.app-home:hover{border-color:var(--accent);color:var(--text)}@media(max-width:820px){.sheet-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.sheet-canvas{min-height:200px;aspect-ratio:16 / 9;height:auto}}.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right,rgba(127,212,255,.055) 0 1px,transparent 1px 96px),repeating-linear-gradient(to bottom,rgba(127,212,255,.055) 0 1px,transparent 1px 96px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,transparent 58%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9) 0%,transparent 58%)}.sound{position:absolute;top:20px;right:24px;z-index:3;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 7px;border:1px solid var(--line);border-radius:999px;background:#08080a99;backdrop-filter:blur(8px)}.sound-on{border-color:#7fd4ff73;box-shadow:0 0 26px #7fd4ff29}.sound-scope{width:34px;height:34px;border-radius:50%;display:block;background:#06080c;border:1px solid var(--line)}.sound-button{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;padding:0 8px 0 0;cursor:pointer}.sound-button:hover{color:var(--text)}.sound-on .sound-button{color:var(--accent)}.sound-icon{font-size:13px;line-height:1}.sound-on .sound-icon{animation:sound-pulse 2.4s ease-in-out infinite}@keyframes sound-pulse{0%,to{opacity:1}50%{opacity:.35}}.ribbon{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(to bottom,rgba(127,212,255,.04),transparent);padding:13px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}.ribbon-track{display:flex;width:max-content;animation:ribbon 120s linear infinite}@keyframes ribbon{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}.ribbon-item{display:flex;align-items:baseline;gap:10px;padding:0 30px;border-right:1px solid var(--line);white-space:nowrap}.ribbon-symbol{color:var(--accent);font-size:17px;font-weight:600}.ribbon-value{font-family:Iosevka,JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}.ribbon-note{font-size:12px;color:var(--muted)}.wonders{max-width:1180px;margin:0 auto;padding:20px 32px 110px}.wonder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}.wonder{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0 0 20px;overflow:hidden}.wonder h3{margin:16px 20px 8px;font-size:17px;letter-spacing:-.015em;line-height:1.3}.wonder-body{margin:0 20px;font-size:13.5px;line-height:1.65;color:var(--muted)}.wonder-note{margin:12px 20px 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:#6f7a86}.wonder-figure{position:relative;background:#000;border-bottom:1px solid var(--line);padding:20px;display:flex;justify-content:center}.wonder-figure .diagram{width:min(100%,210px)}.wonder-index{position:absolute;top:12px;left:14px;font-family:Iosevka,JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.1em;color:#4a5560}.wonder-quote{margin:42px 0 0;padding:26px 0 0;border-top:1px solid var(--line);max-width:74ch}.wonder-quote p{margin:0;font-size:17px;line-height:1.7;color:var(--text)}.wonder-quote cite{display:block;margin-top:12px;font-size:12px;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.diagram{display:block;width:100%;height:auto;color:var(--accent);mix-blend-mode:screen}.diagram-faint{stroke:currentColor;stroke-width:.45;opacity:.3}.diagram-web{stroke:currentColor;stroke-width:.3;opacity:.45}.diagram-line{stroke:currentColor;stroke-width:.75;opacity:.9}.diagram-axis{stroke:currentColor;stroke-width:.35;opacity:.2}.diagram-dot{fill:currentColor;opacity:.8}.diagram-text{fill:currentColor;font-family:Iosevka,JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:7px;opacity:.55}@media(max-width:720px){.sound{top:14px;right:14px}.sound-label{display:none}.wonders{padding:12px 20px 80px}.gallery{padding:48px 20px 60px}.hero-body{padding:0 20px 44px}}@media(prefers-reduced-motion:reduce){.ribbon-track,.sound-on .sound-icon,.whisper{animation:none}}