:root{color-scheme:dark;--bg:#0b0c13;--panel:#17131e;--ink:#e8e2ed;--muted:#a69bb2;--quiet:#95869f;--line:#30283c;--accent:#dab3c4;--violet:#bba6db;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#39213d38,transparent 48%),var(--bg);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}
.shell{width:min(1184px,100%);padding:0 36px;margin:auto}.masthead{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}.brand{text-decoration:none;color:var(--ink);font-size:12px;font-weight:650;letter-spacing:1.7px;display:flex;align-items:center;gap:10px;white-space:nowrap}.brand-symbol{font-size:25px;font-weight:400;color:var(--accent)}.brand-sub{color:var(--quiet);font-weight:400;letter-spacing:1px}.header-status{font:10px var(--mono);letter-spacing:1.4px;color:#b8a9bf;display:flex;align-items:center;gap:8px;white-space:nowrap}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px #dab3c455}
.hero{display:flex;justify-content:space-between;align-items:center;margin:48px 0 34px;gap:25px}.hero-copy{min-width:0}.eyebrow{margin:0;font:10px var(--mono);letter-spacing:1.6px;color:var(--quiet);display:flex;gap:12px;align-items:center}.eyebrow-line{width:35px;height:1px;background:var(--line)}h1{font-size:clamp(56px,7.7vw,92px);letter-spacing:-5px;line-height:1;white-space:nowrap;font-weight:500;margin:18px 0;text-transform:uppercase}h1>span{color:var(--accent)}h1 .title-period{font-size:.7em;margin-left:2px;color:#75516f}.tagline{font-size:19px;letter-spacing:-.3px;font-weight:400;margin:0 0 11px}.intro{font-size:13px;line-height:1.85;color:var(--muted);margin:0}.hero-mark{position:relative;width:170px;height:170px;margin-right:12px;flex:none;opacity:.7}.mark-ring{position:absolute;border:1px solid #58405f;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.ring-one{width:145px;height:145px;border-style:dashed}.ring-two{width:105px;height:105px}.ring-three{width:55px;height:55px}.hero-mark:before,.hero-mark:after{content:"";position:absolute;background:#58405f}.hero-mark:before{height:1px;width:170px;top:50%}.hero-mark:after{height:170px;width:1px;left:50%}.mark-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:16px var(--mono);color:var(--accent);background:var(--bg);padding:6px;z-index:1}.mark-text{position:absolute;font:8px var(--mono);letter-spacing:1.2px;bottom:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--quiet)}
.receiver{border:1px solid #50394f;border-radius:11px;background:linear-gradient(120deg,#211b2c,#15121e);padding:18px 22px 0;box-shadow:0 8px 45px #0002,inset 0 1px 0 #dbc5e810}.receiver-top{display:flex;align-items:center;gap:24px;padding-bottom:15px;font-family:var(--mono)}.frequency{display:flex;align-items:baseline;gap:16px}.frequency-label{font-size:9px;color:var(--quiet);letter-spacing:1.3px}.frequency strong{font-size:19px;font-weight:400;letter-spacing:.4px;color:#d9c5df}.frequency strong span{font-size:11px;letter-spacing:.4px;color:#a48fad;margin-left:5px}.receiver-mode{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1.5px;color:#ac98b5;margin-left:auto}.live-light{width:5px;height:5px;background:#66516f;border-radius:50%}.live-light.active{background:var(--accent);box-shadow:0 0 8px #dab3c477}#clock{font-size:12px;letter-spacing:1px;color:#c7b4cf;min-width:76px;font-variant-numeric:tabular-nums}
.scene{height:clamp(235px,28vw,330px);position:relative;overflow:hidden;border:1px solid #4b3554;border-radius:5px;background:#171421;isolation:isolate}.city-art{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 53%;filter:saturate(.88)}.city-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 64% 58%,#ac83c819,transparent 45%),linear-gradient(177deg,transparent 30%,#cda1cf0a 66%,transparent 75%);opacity:.6;pointer-events:none}.rain-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.playing .city-haze{animation:mist-drift 38s ease-in-out infinite alternate}.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0d0b1805 55%,#100c1adc 100%);pointer-events:none}.scene-label{position:absolute;bottom:16px;left:19px;right:19px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;font:10px var(--mono);letter-spacing:.7px;text-transform:uppercase;color:#cbb7d8}.scene-label #scene-name{color:#f0dae7;font-size:11px}.scene-label #weather{text-align:right;color:#c1a8d0}
.scope-wrap{position:relative;height:54px;margin-top:9px;background:#0e0c16;border:1px solid #35263f;border-radius:4px;overflow:hidden}#waveform{height:52px;width:100%;display:block}.scope-label{position:absolute;top:7px;left:10px;font:8px var(--mono);color:#93809d;letter-spacing:1px}.meter-strip{display:flex;align-items:center;gap:21px;min-height:37px;font:9px var(--mono);letter-spacing:.3px;color:#c5afce;flex-wrap:wrap}.data-label{color:#9f86ad;margin-right:7px}.meter-strip output{font-variant-numeric:tabular-nums}.activity{color:#a78fb5;margin-left:auto;font-size:9px;max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport{display:flex;align-items:center;border-top:1px solid #3c2a45;margin:0 -22px;padding:20px 22px;gap:22px;background:#18122066;border-radius:0 0 11px 11px}.transport-copy{flex:1;min-width:180px}.transport-copy p{margin:0 0 6px;font-size:13px;color:#e3d3e8;line-height:1.5}.playback-detail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:11px;color:#ac92b8}.mix-version{font:9px var(--mono);letter-spacing:.4px;color:#c1a7bd;border:1px solid #594260;border-radius:4px;padding:2px 5px}.transport-buttons{display:flex;align-items:center;gap:8px}.primary-button,.secondary-button{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;padding:11px 15px;white-space:nowrap;transition:background .15s,border-color .15s}.primary-button{background:var(--accent);border-color:var(--accent);color:#271827;display:flex;gap:12px;align-items:center;font-size:12px;font-weight:650;min-width:149px;justify-content:center}.primary-button:hover{background:#f0c9d9}.secondary-button{font-size:11px}.secondary-button:hover{color:var(--ink);background:#dab3c408;border-color:#826087}.secondary-button>span{font-size:10px;margin-right:3px}.primary-button:disabled,.secondary-button:disabled,.text-button:disabled{cursor:default;opacity:.4}.play-symbol{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}.master-control{width:180px;border-left:1px solid #3c2a45;padding-left:22px;flex:none}.master-control label{font:9px var(--mono);color:#bba5c4;letter-spacing:.6px;display:flex;justify-content:space-between;gap:6px}.master-control output{color:#e2c7df}
input[type=range]{appearance:none;-webkit-appearance:none;display:block;height:4px;background:linear-gradient(90deg,#bc92b7 var(--fill,35%),#3a2a44 var(--fill,35%));border:0;border-radius:4px;cursor:pointer;width:100%;margin:17px 0 5px;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--accent);border:2px solid #281c30;border-radius:50%;box-shadow:0 0 0 1px #dab3c466}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--accent);border:2px solid #281c30;border-radius:50%}input:disabled{cursor:default;opacity:.5}input[type=number],input[type=text]{min-width:0;background:#100d18;border:1px solid #49334f;color:var(--ink);border-radius:5px;padding:11px 12px;font-size:12px}
.message{margin:16px 0;padding:12px 16px;background:#211728;border:1px solid #66466d;border-radius:5px;color:var(--accent);font-size:12px;line-height:1.65}.message.error{color:#edc8b4;background:#2c1d21;border-color:#855767}.workspace{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:44px;margin-top:40px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.small-label{font:9px var(--mono);color:var(--quiet);letter-spacing:.6px}h2{font-size:19px;letter-spacing:-.4px;font-weight:450;line-height:1.4;margin:9px 0 0}.mixer>.section-heading{min-height:49px;align-items:flex-end}.mixer h2{margin:0}.layer{display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 12px;align-items:center;padding:23px 0;border-top:1px solid var(--line)}.layer-code{font:10px var(--mono);color:#c3a2ce;border:1px solid #493350;width:29px;height:29px;display:grid;place-items:center;border-radius:5px;grid-row:1/3;align-self:start;margin-top:1px;background:#1b1424}.layer-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.layer-heading label{font-size:13px;color:#e0d3e6;line-height:1.5}.layer-heading output{font:11px var(--mono);color:#bca3c6;white-space:nowrap}.layer-slider{grid-column:2;display:flex;align-items:center;margin-top:10px}.layer-slider input{margin:7px 0;width:100%}.layers{border-bottom:1px solid var(--line)}.right-column{border-left:1px solid var(--line);padding-left:31px;min-width:0}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{padding:13px 12px;background:#15101d;border:1px solid #3c2b45;border-radius:5px;text-align:left;color:var(--muted);min-height:125px;display:flex;flex-direction:column;gap:7px;transition:background .15s,border-color .15s;min-width:0}.preset:hover{border-color:#8c658f;background:#24172c}.preset[aria-pressed=true]{background:#2c1d33;border-color:#c293b1;box-shadow:inset 0 0 0 1px #c293b11c}.preset-top{font:8px var(--mono);color:#b293c0;letter-spacing:.7px;display:flex;justify-content:space-between;align-items:center;width:100%}.preset-indicator{width:6px;height:6px;border:1px solid #87668d;border-radius:50%}.preset[aria-pressed=true] .preset-indicator{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px #dab3c455}.preset-name{font-size:12px;font-weight:500;color:#e6d4e9;line-height:1.4;overflow-wrap:anywhere}.preset-description{font-size:10px;line-height:1.65;color:#b29dbb;flex:1}.preset-bars{display:flex;height:13px;align-items:flex-end;gap:3px;margin-top:3px}.preset-bars span{width:5px;min-height:2px;background:#976d9d;border-radius:1px}.preset[aria-pressed=true] .preset-bars span{background:#d1a2c2}.more-presets{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px}.more-presets span{font:10px var(--mono);color:var(--accent)}.selected-preset{font:10px var(--mono);color:#b6a0c1;margin:14px 0 0;line-height:1.6;overflow-wrap:anywhere}.character{border-top:1px solid var(--line);margin-top:29px;padding-top:24px}.character-control{margin-top:23px}.character-control label{font-size:12px;color:#d3c1dd;display:flex;justify-content:space-between;gap:10px}.character-control output{font:11px var(--mono);color:#bba1c7}.range-labels{display:flex;justify-content:space-between;font:9px var(--mono);color:#a38baf;margin-top:10px}
.session{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:45px;padding:29px 0 25px}.session-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.session-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px}.seed-control{max-width:410px;min-width:0}.seed-control>label{display:block;font:9px var(--mono);letter-spacing:1px;color:var(--quiet);margin-bottom:9px}.seed-input-row{display:flex;gap:8px}.seed-input-row input{width:150px;font-family:var(--mono)}.seed-control p{font-size:11px;color:var(--quiet);line-height:1.6;margin:10px 0 0}.file-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.session-controls button{font-family:var(--mono);font-size:10px}.session #save-status{text-align:right;line-height:1.6}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:31px 0 35px}footer strong{font-size:16px;font-weight:600;letter-spacing:2px;color:#b5a4c0}footer strong span{color:var(--accent)}footer p{font:8px var(--mono);letter-spacing:1px;color:var(--quiet);margin:8px 0 0}.footer-note{font:10px/1.7 var(--mono);letter-spacing:0;color:#a38dab;margin:0;text-align:center}.footer-mark{font:10px var(--mono);color:#b59ac2;letter-spacing:1px}
.preset-library,.save-preset-dialog{color:var(--ink);background:#15111e;border:1px solid #6e4e77;border-radius:10px;box-shadow:0 24px 100px #0009;padding:27px;width:min(780px,calc(100% - 40px));max-height:85vh;overflow-y:auto}.preset-library::backdrop,.save-preset-dialog::backdrop{background:#07060dcc;backdrop-filter:blur(6px)}.library-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.library-intro{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 22px}.extra-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.extra-presets .preset{min-height:145px;width:100%}.saved-scenes{border-top:1px solid var(--line);margin-top:26px;padding-top:20px}.saved-scenes h3{font-size:15px;font-weight:500;margin:0 0 18px}.saved-scene-card{display:flex;flex-direction:column;gap:5px;min-width:0}.delete-preset{align-self:flex-end;border:0;background:none;color:#b299bc;font:10px var(--mono);padding:7px 2px}.delete-preset:hover{color:#edbfda}.save-preset-dialog{width:min(440px,calc(100% - 32px))}.save-preset-dialog label{display:block;font-size:12px;color:var(--muted);margin:25px 0 10px}.save-preset-dialog input{width:100%}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.form-error{font-size:12px;line-height:1.6;color:#edc8b4;min-height:20px;margin:10px 0}
@keyframes mist-drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@media(min-width:1200px){.layer{padding:27px 0}}
@media(max-width:1000px){.hero-mark{width:140px;height:140px;margin-right:0}.hero-mark:before{width:140px}.hero-mark:after{height:140px}.ring-one{width:125px;height:125px}.ring-two{width:90px;height:90px}.ring-three{width:45px;height:45px}.transport{flex-wrap:wrap;gap:17px}.transport-copy{min-width:200px;flex-basis:40%}.master-control{width:100%;padding:14px 0 0;border-left:0;border-top:1px solid #3c2a45}.master-control label{justify-content:flex-start;gap:15px}.master-control input{margin:15px 0 4px}.workspace{gap:27px}.right-column{padding-left:25px}.preset{padding:12px 10px}.session-controls{align-items:flex-start}.file-controls{padding-top:20px}}
@media(max-width:760px){.shell{padding:0 24px}.masthead{height:76px}.hero{margin:36px 0 30px}.hero-mark{display:none}h1{font-size:74px;letter-spacing:-4px}.workspace{grid-template-columns:1fr;gap:32px;margin-top:30px}.right-column{border-left:0;padding-left:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:25px}.character{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--line);padding-left:25px}.mixer>.section-heading{min-height:0}.layer{padding:19px 0}.scene{height:270px}.frequency{gap:10px}.frequency-label{font-size:8px}.frequency strong{font-size:16px}.frequency strong span{font-size:10px}.receiver-top{gap:15px}.receiver{padding:16px 18px 0}.transport{margin:0 -18px;padding:18px}.session-heading{align-items:flex-start}.session-controls{flex-wrap:wrap}.file-controls{padding-top:0;justify-content:flex-start}.activity{display:none}.footer-mark{display:none}.footer-note{text-align:right}.extra-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.preset{min-height:132px}}
@media(max-width:520px){.brand-sub{display:none}.header-status{font-size:8px;letter-spacing:.9px}.brand{font-size:11px}.hero{margin-top:30px}h1{font-size:clamp(43px,13vw,68px);letter-spacing:-2.5px;margin:18px 0}.eyebrow{font-size:8px;letter-spacing:1.1px;gap:8px}.eyebrow-line{width:20px}.tagline{font-size:17px}.intro{font-size:12px;line-height:1.8}.desktop-break{display:none}.receiver{padding:12px 12px 0}.receiver-top{flex-wrap:wrap;gap:10px 12px;padding-bottom:12px}.frequency{flex-basis:100%}.receiver-mode{margin-left:0}#clock{margin-left:auto;font-size:11px}.scene{height:240px}.city-art{object-position:57% center}.scene-label{left:12px;right:12px;bottom:13px;font-size:8px;gap:10px}.scene-label #scene-name{font-size:9px;max-width:47%;overflow-wrap:anywhere}.scene-label #weather{max-width:48%}.meter-strip{gap:11px;font-size:8px;min-height:35px}.data-label{margin-right:4px}.transport{margin:0 -12px;padding:16px 12px}.transport-copy{flex-basis:100%}.transport-buttons{width:100%}.transport-buttons .primary-button{flex:1}.master-control{padding-top:16px}.right-column{grid-template-columns:1fr}.character{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:25px;margin-top:3px}.presets{gap:9px}.preset{min-height:128px;padding:13px}.preset-description{font-size:11px}.section-heading{margin-bottom:18px}.session{margin-top:32px}.session-heading{display:block}.session #save-status{display:block;text-align:left;margin-top:15px}.seed-control{width:100%}.seed-input-row input{flex:1;width:100px}.session-controls{gap:17px}.session-controls button{padding:12px}.file-controls{width:100%}.file-controls button{flex:1}.footer-note{font-size:9px}.library-heading{align-items:flex-start;gap:12px}.library-heading h2{font-size:18px}.library-heading .secondary-button{padding:9px 10px}.preset-library{padding:20px;width:calc(100% - 24px);max-height:88vh}.extra-presets{gap:8px}.extra-presets .preset{padding:11px;min-height:155px}}
@media(max-width:360px){.shell{padding:0 16px}.hero-copy h1{letter-spacing:-2px}.preset-description{font-size:10px}.extra-presets{grid-template-columns:1fr}.extra-presets .preset{min-height:120px}.footer-note{max-width:140px}.layer-heading output{font-size:10px}.dialog-actions .primary-button{min-width:125px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}