:root{--ink: #061417;--deep: #092327;--paper: #f0ead8;--muted: #9baea8;--acid: #d9ff7f;--coral: #ff8068;--gold: #e8b85c;--line: rgba(220, 239, 221, .17);--glass: rgba(5, 22, 24, .86);font-family:Avenir Next,Gill Sans,PingFang SC,sans-serif;color:var(--paper);background:var(--ink);font-synthesis:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--acid);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.35}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene canvas:active{cursor:grabbing}.atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 53% 42%,transparent 20%,rgba(2,11,14,.15) 58%,rgba(2,9,11,.82) 115%),linear-gradient(180deg,rgba(3,15,18,.1),transparent 55%,rgba(3,12,14,.72))}.grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.topbar{position:absolute;z-index:5;top:0;left:0;right:0;height:94px;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);pointer-events:none}.brand{pointer-events:auto;display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;font-size:16px;font-weight:700;letter-spacing:.2em;line-height:1}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--acid);border-radius:50%;color:var(--acid);font-family:"Bodoni 72",Didot,serif;font-size:29px;font-style:italic;letter-spacing:0}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.29em;margin-top:7px}.topbar-center{display:flex;align-items:center;gap:15px;color:#a5b5af;font-size:9px;letter-spacing:.25em}.topbar-center span{display:block;width:30px;height:1px;background:var(--line)}.live-status{display:flex;align-items:baseline;gap:8px;font-size:10px;letter-spacing:.13em}.live-status i{align-self:center;width:6px;height:6px;border-radius:50%;background:#80918a;box-shadow:0 0 0 4px #80918a14}.live-status i.playing{background:var(--acid);box-shadow:0 0 12px var(--acid);animation:breathe 1.2s ease-in-out infinite}.live-status b{color:var(--acid);font-family:"Bodoni 72",Didot,serif;font-size:25px;font-weight:400;margin-left:12px;letter-spacing:0}.live-status small{color:var(--muted);font-size:8px}.intro{position:absolute;z-index:2;left:5.2vw;top:18.5%;pointer-events:none}.eyebrow{margin:0 0 17px;color:var(--acid);font-size:9px;font-weight:600;letter-spacing:.25em;text-transform:uppercase}h1{margin:0;font-family:"Bodoni 72",Didot,Songti SC,serif;font-size:clamp(42px,5.25vw,82px);font-weight:400;line-height:.91;letter-spacing:-.045em;text-shadow:0 3px 30px rgba(3,12,14,.45)}h1 em{color:var(--coral);font-weight:400}.intro-cn{margin:24px 0 0;color:#bdc7bd;font-family:Songti SC,STSong,serif;font-size:13px;line-height:1.9;letter-spacing:.13em}.micro-stats{display:flex;gap:25px;margin-top:28px;color:#d6ddcf;font-family:"Bodoni 72",Didot,serif;font-size:23px;line-height:.8}.micro-stats span+span{border-left:1px solid var(--line);padding-left:25px}.micro-stats small{color:#7e958e;font-family:Avenir Next,sans-serif;font-size:7px;letter-spacing:.2em}.scene-actions{position:absolute;z-index:6;right:28px;top:118px;display:grid;gap:10px}.icon-button{width:54px;height:56px;border:1px solid var(--line);background:#0517198c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:3px;transition:border-color .2s,background .2s,transform .2s}.icon-button:hover{border-color:var(--acid);background:#0c2a2acc;transform:translateY(-2px)}.icon-button span{display:block;font-size:22px;color:var(--acid);line-height:1}.icon-button small{display:block;color:var(--muted);font-size:9px;margin-top:7px;letter-spacing:.12em}.scene-hint{position:absolute;z-index:3;right:4vw;bottom:228px;display:flex;align-items:center;gap:11px;pointer-events:none;color:#9fb0a8;font-size:9px;letter-spacing:.08em;line-height:1.8;text-align:right}.scene-hint b{color:var(--acid);font-weight:500}.mouse-glyph{width:18px;height:26px;border:1px solid #879b93;border-radius:10px;position:relative}.mouse-glyph:after{content:"";position:absolute;width:2px;height:5px;background:var(--acid);left:7px;top:4px;border-radius:2px}.console{position:absolute;z-index:10;bottom:18px;left:22px;right:22px;min-height:174px;display:grid;grid-template-columns:210px minmax(400px,1fr) 225px;gap:22px;padding:20px 22px;background:linear-gradient(120deg,#092022f0,#041215ed);border:1px solid rgba(192,217,195,.22);border-radius:5px;box-shadow:0 20px 70px #00000073,inset 0 1px #ffffff08;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.console:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--acid)}.transport{display:grid;grid-template-columns:57px 1fr;align-content:center;gap:16px 14px;padding-right:20px;border-right:1px solid var(--line)}.play-button{grid-row:span 2;align-self:center;width:57px;height:57px;border-radius:50%;border:1px solid var(--acid);color:var(--ink);background:var(--acid);font-size:20px;box-shadow:0 0 28px #d9ff7f1a;transition:transform .2s,box-shadow .2s}.play-button:hover{transform:scale(1.05);box-shadow:0 0 32px #d9ff7f40}.tempo-control label{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;letter-spacing:.16em}.tempo-control output{color:var(--paper);font-size:11px}input[type=range]{appearance:none;width:100%;height:16px;margin:6px 0 0;background:transparent;cursor:ew-resize}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--acid),#38534e)}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;border-radius:50%;background:var(--acid);border:2px solid var(--deep);box-shadow:0 0 0 1px var(--acid)}.utility-buttons{display:flex;gap:7px;grid-column:2}.text-button{flex:1;min-height:31px;padding:5px 7px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--muted);font-size:9px;white-space:nowrap}.text-button:hover{border-color:#77938a;color:var(--paper)}.text-button span{color:var(--acid);margin-left:3px}.text-button[aria-pressed=true] span{color:var(--coral)}.section-label{height:28px;display:flex;justify-content:space-between;align-items:start;gap:10px}.section-label>span{font-size:8px;letter-spacing:.18em;color:#b9c7bb}.section-label small{color:#718b82;font-size:8px;letter-spacing:.05em}.manual-section{min-width:0}.pads{display:grid;grid-template-columns:repeat(8,minmax(42px,1fr));gap:7px}.pad{position:relative;height:93px;padding:10px 5px 8px;border:1px solid var(--line);border-radius:3px;background:#9fbba806;overflow:hidden;transition:background .15s,border-color .15s,transform .1s}.pad:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;background:var(--pad-color, var(--acid));opacity:.55}.pad:hover{border-color:var(--pad-color, var(--acid));background:#9fbba814}.pad.active,.pad:active{transform:translateY(2px);background:color-mix(in srgb,var(--pad-color, var(--acid)) 16%,transparent);border-color:var(--pad-color, var(--acid))}.pad .key{display:block;margin:0 auto 8px;width:17px;height:17px;border:1px solid #577169;border-radius:2px;color:#8fa39a;font-size:8px;line-height:15px}.pad .pad-icon{display:block;height:27px;color:var(--pad-color, var(--acid));font-family:"Bodoni 72",Didot,serif;font-size:25px;line-height:24px}.pad .pad-name{display:block;margin-top:7px;color:#b9c6ba;font-size:8px;letter-spacing:.04em;white-space:nowrap}.take-section{padding-left:20px;border-left:1px solid var(--line)}.takeTime,#takeTime{font-variant-numeric:tabular-nums}.take-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.record-button,.replay-button{min-height:48px;border:1px solid var(--line);background:transparent;border-radius:3px;font-size:11px}.record-button i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--coral)}.record-button[aria-pressed=true]{border-color:var(--coral);background:#ff806814}.record-button[aria-pressed=true] i{animation:breathe .8s infinite;box-shadow:0 0 10px var(--coral)}.replay-button span{color:var(--acid);margin-right:4px;font-size:16px}.replay-button:not(:disabled):hover{border-color:var(--acid)}#takeStatus{margin:12px 0 0;color:#6f8980;font-size:8px;line-height:1.5;letter-spacing:.03em}.editor{position:absolute;z-index:20;top:108px;right:96px;width:min(610px,calc(100vw - 140px));padding:25px;background:#051719f5;border:1px solid rgba(217,255,127,.25);border-radius:5px;box-shadow:0 25px 90px #0009;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);transform:translate(30px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}.editor.open{transform:translate(0);opacity:1;pointer-events:auto}.editor-head{display:flex;align-items:start;justify-content:space-between}.editor-head .eyebrow{margin-bottom:8px}.editor h2{margin:0;font-family:Songti SC,STSong,serif;font-size:25px;font-weight:400;letter-spacing:.06em}.close-button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:22px}.preset-row{display:flex;gap:7px;margin:22px 0 19px}.preset-row button,.editor-foot button{min-height:30px;padding:6px 10px;border:1px solid var(--line);background:transparent;border-radius:2px;color:#8fa69b;font-size:8px;letter-spacing:.08em}.preset-row button.active{border-color:var(--acid);color:var(--acid);background:#d9ff7f0d}.step-numbers,.seq-row{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center}.step-numbers{margin-bottom:5px}#stepNumbers,.step-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}#stepNumbers span{text-align:center;color:#5f7b70;font-size:7px}#stepNumbers span.bar{color:var(--acid)}.sequencer{display:grid;gap:5px}.seq-label{display:flex;align-items:center;gap:7px;font-size:9px;color:#adbbb0}.seq-label i{width:5px;height:5px;border-radius:50%;background:var(--row-color)}.step{aspect-ratio:1;min-width:0;padding:0;border:1px solid #28453f;border-radius:2px;background:#6f92800d;transition:background .1s,transform .1s}.step:nth-child(4n+1){border-left-color:#62776a}.step:hover{border-color:var(--row-color);transform:scale(1.08)}.step.on{background:var(--row-color);border-color:var(--row-color);box-shadow:0 0 9px color-mix(in srgb,var(--row-color) 30%,transparent)}.step.current{outline:1px solid var(--paper);outline-offset:2px}.editor-foot{display:flex;align-items:center;justify-content:space-between;margin-top:19px;padding-top:14px;border-top:1px solid var(--line)}.editor-foot span{color:#789187;font-size:8px}.editor-foot span i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acid);margin-right:5px}.toast{position:absolute;z-index:40;left:50%;top:108px;max-width:min(480px,80vw);padding:10px 17px;border:1px solid rgba(217,255,127,.25);border-radius:30px;background:#051618e6;color:#d7e3d4;font-size:11px;letter-spacing:.04em;text-align:center;transform:translate(-50%,-12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%)}.drag-label{position:absolute;z-index:4;pointer-events:none;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:2px;background:var(--acid);color:var(--ink);font-size:7px;font-weight:700;letter-spacing:.12em;box-shadow:0 0 20px #d9ff7f33;transform:translate(-50%,-130%);transition:opacity .2s}.drag-label:after{content:"";position:absolute;bottom:-4px;left:calc(50% - 4px);width:8px;height:8px;background:var(--acid);transform:rotate(45deg)}.drag-label.dragging{background:var(--coral)}.drag-label.dragging:after{background:var(--coral)}.start-gate{position:absolute;z-index:100;inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,#061b1d59,#020b0de0);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .6s ease,visibility .6s}.start-gate.hidden{opacity:0;visibility:hidden;pointer-events:none}.gate-card{position:relative;width:min(410px,calc(100vw - 38px));padding:36px 40px 31px;border:1px solid rgba(217,255,127,.35);background:linear-gradient(145deg,#092526f5,#041214fa);box-shadow:0 35px 100px #000;text-align:center;overflow:hidden}.gate-card:before,.gate-card:after{content:"";position:absolute;width:45px;height:45px;border-color:var(--acid);opacity:.4}.gate-card:before{left:8px;top:8px;border-left:1px solid;border-top:1px solid}.gate-card:after{right:8px;bottom:8px;border-right:1px solid;border-bottom:1px solid}.gate-card .eyebrow{margin-bottom:12px;font-size:8px}.gate-number{position:absolute;right:-8px;top:-26px;font-family:"Bodoni 72",Didot,serif;font-size:150px;font-style:italic;color:#d9ff7f09;line-height:1}.gate-card h2{position:relative;margin:9px 0 14px;font-family:Songti SC,STSong,serif;font-size:38px;font-weight:400;letter-spacing:.08em}.gate-card>p:not(.eyebrow){color:#9db1a7;font-family:Songti SC,serif;font-size:12px;line-height:1.9}#startButton{width:100%;min-height:50px;margin:17px 0 14px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border:0;background:var(--acid);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.14em;transition:background .2s,transform .2s}#startButton:hover{background:#e6ffa7;transform:translateY(-2px)}#startButton i{font-size:20px;font-style:normal}.gate-card>small{color:#5f7b71;font-size:8px;letter-spacing:.08em}@keyframes breathe{50%{opacity:.4}}@media(max-width:1100px){.console{grid-template-columns:175px 1fr;gap:16px}.take-section{grid-column:1 / -1;display:grid;grid-template-columns:130px 180px 1fr;align-items:center;padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}.take-section .section-label{height:auto;display:block}.take-section .section-label small{display:block;margin-top:5px}#takeStatus{margin:0 0 0 15px}.console{min-height:218px}.scene-hint{bottom:265px}.intro{left:4vw;top:17%}.intro-cn,.micro-stats{display:none}.editor{bottom:250px;overflow-y:auto}}@media(max-width:720px){.topbar{height:72px;padding:15px 17px}.brand{font-size:12px;gap:8px}.brand-mark{width:34px;height:34px;font-size:24px}.brand small{font-size:6px}.topbar-center,.live-status>span,.live-status small{display:none}.live-status b{font-size:22px}.intro{top:90px;left:19px}.intro .eyebrow{font-size:7px;margin-bottom:9px}h1{font-size:clamp(31px,10vw,48px);line-height:.94}.scene-actions{right:13px;top:88px}.icon-button{width:43px;height:45px}.icon-button span{font-size:18px}.icon-button small{font-size:7px;margin-top:4px}.scene-hint{right:14px;bottom:275px;font-size:7px}.mouse-glyph{display:none}.console{left:8px;right:8px;bottom:8px;min-height:238px;padding:12px;grid-template-columns:126px 1fr;gap:11px}.transport{grid-template-columns:40px 1fr;gap:10px 8px;padding-right:10px}.play-button{width:40px;height:40px;font-size:15px}.tempo-control label{font-size:6px}.utility-buttons{flex-direction:column;gap:4px}.text-button{min-height:23px;font-size:7px;padding:2px 4px}.section-label{height:22px}.section-label>span{font-size:6px;letter-spacing:.1em}.section-label small{display:none}.pads{grid-template-columns:repeat(4,1fr);gap:4px}.pad{height:54px;padding:4px 2px;display:grid;grid-template-columns:15px 1fr;grid-template-rows:1fr 1fr;align-items:center}.pad .key{grid-row:1 / 3;margin:0;width:13px;height:15px;font-size:7px;line-height:13px}.pad .pad-icon{height:auto;font-size:18px;line-height:17px}.pad .pad-name{margin:0;font-size:6px}.take-section{grid-template-columns:75px 150px 1fr;padding-top:8px}.take-buttons{gap:5px}.record-button,.replay-button{min-height:34px;font-size:9px}#takeStatus{font-size:6px;margin-left:8px}.editor{top:80px;right:8px;bottom:254px;width:calc(100vw - 16px);padding:17px 13px}.editor h2{font-size:20px}.preset-row{margin:15px 0;gap:4px}.preset-row button{padding:5px 6px;font-size:6px}.step-numbers,.seq-row{grid-template-columns:57px 1fr;gap:6px}#stepNumbers,.step-grid{gap:2px}.seq-label{font-size:7px;gap:4px}.step{border-radius:1px}.editor-foot{margin-top:12px;padding-top:9px}.editor-foot span{font-size:6px}.toast{top:80px;font-size:9px}.drag-label{font-size:6px}}@media(max-height:690px)and (min-width:721px){.topbar{height:72px;padding-top:14px;padding-bottom:14px}.intro{top:16%}.intro-cn,.micro-stats{display:none}.console{min-height:142px;padding-top:12px;padding-bottom:12px}.pad{height:80px}.scene-hint{bottom:188px}.editor{top:80px;bottom:174px;overflow-y:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}