@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#070608;--surface:#0c0b0e;--surface2:#111014;--border:#28242b;--ink:#eae7e9;--dim:#817a82;--accent:#ff6a14;--mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;--sans:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100svh;-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:8;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=".8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" opacity=".17" filter="url(%23n)"/%3E%3C/svg%3E')}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:3px}a{color:inherit}
.ambient{position:fixed;inset:-20% -20% 0;pointer-events:none;opacity:.3;background:radial-gradient(ellipse 45% 36% at 40% 12%,color-mix(in srgb,var(--accent),transparent 90%),transparent 100%)}
.shell{max-width:1720px;margin:0 auto;padding:0 clamp(17px,3vw,55px);position:relative}.mast{height:79px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.wordmark{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.035em}.wordmark b{font-weight:400;color:var(--accent)}.sigil{font-size:25px;color:var(--accent);margin-right:8px}.slash{margin:0 4px;color:#4b434b}.dim{color:#837b81}.mast-end{display:flex;align-items:center;gap:28px;font-family:var(--mono);font-size:10px}.tag{color:#756a73}.live{color:#a99ea6}.live i,.live-spot{background:#c7ee86;width:6px;height:6px;display:inline-block;border-radius:50%;box-shadow:0 0 9px #d6ffae;margin-right:9px}
.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.83fr);gap:clamp(30px,4vw,72px);padding:46px 0 36px}.visual-area{min-width:0}.eyebrow{font:700 10px var(--mono);letter-spacing:.22em;color:var(--accent)}.visual-heading h1{font-size:clamp(32px,3.15vw,56px);line-height:1.12;letter-spacing:-.045em;font-weight:600;margin:17px 0 15px}.visual-heading h1 em{font-weight:400;font-style:normal;color:#9f959a}.visual-heading p{font-size:13px;color:#999097;max-width:490px;line-height:1.65;margin:0 0 26px}.stage{position:relative;width:100%;aspect-ratio:1.40;max-height:700px;min-height:390px;overflow:hidden;background:#020203;border:1px solid #30282e;isolation:isolate;box-shadow:0 4px 48px #0005,0 0 75px color-mix(in srgb,var(--accent),transparent 97%);cursor:crosshair}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 74% 61% at 50% 54%,transparent 58%,rgba(1,1,2,.12) 83%,rgba(1,1,2,.40) 125%)}.corner{width:20px;height:20px;position:absolute;pointer-events:none;opacity:.6}.corner.tl{top:11px;left:11px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}.corner.tr{top:11px;right:11px;border-top:1px solid var(--accent);border-right:1px solid var(--accent)}.corner.bl{bottom:11px;left:11px;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent)}.corner.br{bottom:11px;right:11px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}.stage-label,.stage-counter{position:absolute;z-index:4;top:20px;font:700 9px var(--mono);letter-spacing:.11em;text-shadow:0 2px 4px #000}.stage-label{left:25px;color:#d1b8b4}.stage-counter{right:25px;color:#958e91}.stage-focus{position:absolute;top:50%;left:50%;font:11px var(--mono);color:#fff2;transform:translate(-50%,-50%);pointer-events:none}.screamer{position:absolute;z-index:7;bottom:28px;left:50%;transform:translateX(-50%);color:#f6eee1;font:700 10px var(--mono);letter-spacing:.2em;text-shadow:0 0 24px var(--accent);pointer-events:none;white-space:nowrap;transition:opacity .3s;opacity:0}.screamer.show{opacity:1}
.transport{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px}.transport-actions{display:flex;flex-wrap:wrap;gap:8px}.action{font:700 10px var(--mono);letter-spacing:.065em;color:#a9a1a5;background:#151216;border:1px solid #312a30;padding:11px 12px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}.action span{margin-right:7px;color:var(--accent);font-size:14px}.action.primary{border-color:color-mix(in srgb,var(--accent),#1f171a 36%);color:#f8e7df;background:color-mix(in srgb,var(--accent),#100e10 84%)}.action:hover{border-color:var(--accent);color:#fff;background:#23171b}.transport-caption{font-size:11px;color:#756e74;text-align:right}
.panel{background:linear-gradient(160deg,#100e11,#0c0b0e 52%);border:1px solid var(--border);padding:25px 23px 18px;align-self:start;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:17px}.panel-head h2{font-size:19px;margin:8px 0 0;font-weight:500;letter-spacing:-.035em}.count{font:11px var(--mono);color:#615760}.presets{display:grid;gap:7px}.preset{width:100%;display:flex;align-items:center;text-align:left;gap:14px;padding:12px;background:#121014;border:1px solid #292329;color:#ded7d8;transition:background .2s,border-color .2s}.preset:hover{border-color:#6e5150;background:#181317}.preset.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent),#0c0a0d 94%);box-shadow:inset 2px 0 0 var(--accent)}.color-orb{width:29px;height:29px;flex:0 0 29px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff7,var(--orb) 35%,color-mix(in srgb,var(--orb),black 65%) 80%);box-shadow:0 0 15px color-mix(in srgb,var(--orb),transparent 68%),inset -2px -3px 7px #000c}.preset-txt{min-width:0;display:block;flex:1}.preset-txt strong{display:block;font:700 10px var(--mono);letter-spacing:.08em}.preset-txt small{font-size:10.5px;display:block;color:#877d84;margin-top:4px;line-height:1.4}.arrow{color:#6d5e66;font-size:15px}.selected .arrow{color:var(--accent)}.mod-head{margin:28px 0 23px;border-top:1px solid var(--border);padding-top:24px}.reset{background:transparent;border:none;color:#8c8588;font:700 10px var(--mono);letter-spacing:.08em}.reset:hover{color:var(--accent)}.controls{display:grid;gap:7px}.controls label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#bfb7bb;margin:8px 0 0}.controls output{font:700 10px var(--mono);color:var(--accent)}.controls input[type=range]{width:100%;height:24px;margin:0 0 6px;appearance:none;background:transparent;accent-color:var(--accent);touch-action:pan-y}.controls input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--accent),#393139)}.controls input[type=range]::-moz-range-track{height:2px;background:#55404b}.controls input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:0;background:var(--accent);margin-top:-4.5px;box-shadow:0 0 7px color-mix(in srgb,var(--accent),transparent 30%)}.controls input[type=range]::-moz-range-thumb{border:none;width:11px;height:11px;border-radius:0;background:var(--accent)}.panel-bottom{margin-top:18px}.share{width:100%;background:#22171b;color:#e5d5d2;border:1px solid #423039;padding:14px;text-align:center;font:700 10px var(--mono);letter-spacing:.09em}.share span{color:var(--accent);font-size:14px;margin-right:12px}.share:hover{border-color:var(--accent)}.panel-bottom p{font-size:10px;color:#73696e;text-align:center;margin:14px 0 0}.panel-bottom strong{font-weight:500;color:#afa3a9}footer{height:62px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;color:#6d646c;font:700 9px var(--mono);letter-spacing:.12em}
@media (max-width:1050px){.layout{grid-template-columns:1fr}.visual-heading h1{font-size:clamp(32px,6vw,58px)}.stage{max-height:680px}.panel{display:block}.presets{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{grid-template-columns:1fr}.transport-caption{display:none}}
@media (max-width:620px){.shell{padding:0 15px}.mast{height:66px}.wordmark{gap:7px;font-size:10px}.sigil{font-size:20px;margin-right:5px}.wordmark .dim{font-size:9px}.mast-end{gap:0}.mast-end .tag{display:none}.mast-end .live{font-size:8px}.layout{padding:29px 0 36px;gap:22px}.visual-heading h1{font-size:clamp(33px,9vw,43px)}.visual-heading p{font-size:12px;margin-bottom:22px}.stage{aspect-ratio: .79;min-height:450px;max-height:69svh}.transport{display:block}.transport-actions{display:grid;grid-template-columns:1fr 1fr}.action{text-align:center;padding:12px 5px;font-size:10px}.panel{padding:22px 14px}.presets{grid-template-columns:1fr}.preset{padding:14px}.panel-head h2{font-size:20px}footer{font-size:8px;gap:15px}footer span:last-child{text-align:right}.stage-label{font-size:8px;left:22px}.stage-counter{font-size:8px;right:22px}}
@media(prefers-reduced-motion:reduce){.preset,.action{transition:none}}