:root{--bg: oklch(.965 .004 265);--panel: oklch(.995 .002 265);--line: oklch(.86 .012 265);--ink: oklch(.26 .02 265);--muted: oklch(.48 .02 265);--faint: oklch(.6 .02 265);--accent: oklch(.52 .15 245);--field: oklch(.93 .006 265);--btn: oklch(.91 .008 265);--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--sans: system-ui, -apple-system, "Segoe UI", sans-serif}html.dark{--bg: oklch(.15 .012 265);--panel: oklch(.2 .014 265);--line: oklch(.31 .016 265);--ink: oklch(.93 .01 265);--muted: oklch(.66 .013 265);--faint: oklch(.52 .015 265);--accent: oklch(.7 .16 245);--field: oklch(.16 .01 265);--btn: oklch(.26 .012 265)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:12px;-webkit-font-smoothing:antialiased}#app{display:block}button{font-family:var(--mono);cursor:pointer}:root{--fa-nav-h: 64px}.studio-root{font-family:var(--sans)}.studio-head{padding:calc(var(--fa-nav-h) + 44px) 28px clamp(24px,4vw,40px)}.studio-title{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(44px,7vw,104px);line-height:.94;letter-spacing:-.035em;color:var(--ink)}.studio-intro{margin:clamp(18px,2.5vh,26px) 0 0;max-width:60ch;font-size:clamp(14px,1.6vw,17px);line-height:1.6;color:var(--muted)}.studio-wrap{padding:0 28px 110px}.studio-selectbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px)}.studio-selectbar label{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}.studio-selectbar select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 20px;font:500 14px var(--sans);cursor:pointer;min-width:min(460px,84vw)}.studio-selectbar select:hover{border-color:var(--accent)}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,2.4vw,36px);align-items:start}.studio-visual{position:relative;width:100%;height:min(80vh,960px);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000}.studio-visual .stage{position:absolute;top:0;right:0;bottom:0;left:0}.studio-visual .prism-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;max-width:none;max-height:none;display:block;object-fit:cover;object-position:center;box-shadow:none}.studio-visual:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 88% 88% at 50% 50%,transparent 60%,rgba(0,0,0,.42) 100%);z-index:1}.studio-presetbar{position:absolute;top:12px;left:12px;z-index:11;display:flex;align-items:center;gap:8px;background:#08080899;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 24px)}.studio-presetbar label{color:#fff9;font:700 9px var(--mono);letter-spacing:.16em;text-transform:uppercase}.studio-presetbar select{background:#00000073;color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:4px 9px;font:11px var(--mono);cursor:pointer;max-width:52vw}.studio-presetbar select:hover{border-color:#fff9}.studio-topctl{position:absolute;top:12px;right:12px;z-index:13;display:flex;gap:8px}.studio-topctl button{background:#08080899;color:#ededed;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 15px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s ease,background-color .2s ease}.studio-topctl button:hover{border-color:#fff9;background:#080808d1}.studio-topctl button.is-accent{border-color:color-mix(in oklch,var(--accent) 75%,white 25%);color:#fff}.studio-topctl button.is-accent:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.studio-fps{position:absolute;left:14px;bottom:12px;z-index:11;color:#ffffff8c;font:11px var(--mono);pointer-events:none}.studio-side{position:sticky;top:calc(var(--fa-nav-h) + 16px)}.studio-controls,.studio-controls .tp-dfwv{width:100%}.studio-controls{--tp-base-background-color: rgba(18, 20, 26, .96);--tp-base-shadow-color: rgba(0, 0, 0, .35);--tp-blade-value-width: 34%;--tp-button-background-color: rgba(255, 255, 255, .12);--tp-button-background-color-active: rgba(255, 255, 255, .22);--tp-button-background-color-focus: rgba(255, 255, 255, .18);--tp-button-background-color-hover: rgba(255, 255, 255, .16);--tp-button-foreground-color: #e9e9ee;--tp-container-background-color: rgba(255, 255, 255, .05);--tp-container-background-color-active: rgba(255, 255, 255, .12);--tp-container-background-color-focus: rgba(255, 255, 255, .1);--tp-container-background-color-hover: rgba(255, 255, 255, .08);--tp-container-foreground-color: #c7c7d0;--tp-input-background-color: rgba(255, 255, 255, .08);--tp-input-background-color-active: rgba(255, 255, 255, .16);--tp-input-background-color-focus: rgba(255, 255, 255, .14);--tp-input-background-color-hover: rgba(255, 255, 255, .12);--tp-input-foreground-color: #e9e9ee;--tp-label-foreground-color: #a7a7b2;--tp-monitor-background-color: rgba(0, 0, 0, .3);--tp-monitor-foreground-color: #b9b9c4}.studio-controls .tp-rotv_b,.studio-controls .tp-fldv_b{border-radius:8px}.studio-about{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,40px)}.studio-about-title{margin:0 0 clamp(14px,2vw,22px);font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}.studio-about-body{color:var(--muted);font-size:clamp(13px,1vw,15px);line-height:1.65;max-width:78ch}.studio-about-body p{margin:0}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%) translateY(20px);background:var(--accent);color:#04121a;font-weight:600;padding:8px 16px;border-radius:6px;opacity:0;pointer-events:none;transition:all .2s ease;z-index:200}.toast.on{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:900px){.studio-grid{grid-template-columns:1fr;gap:16px}.studio-visual{height:min(64vh,620px)}.studio-side{position:static;top:auto}}@media(max-width:680px){.studio-head,.studio-wrap{padding-left:16px;padding-right:16px}}@media(pointer:coarse){input,select,textarea{font-size:16px!important}}