:root{font-family:Inter,"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;color:#e4edf2;background:#0b1117;font-synthesis:none;font-weight:400;color-scheme:dark;--line:#26323d;--muted:#8a9aa7;--red:#ff746d;--cyan:#63e7eb}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,select,input{font:inherit}button,select{background:#18212a;border:1px solid #34414d;color:#dce6ed;border-radius:5px}button{cursor:pointer;transition:background .15s,border-color .15s}button:hover,select:hover{border-color:#778b9a;background:#25323e}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button.active{border-color:#669399;background:#233e46;color:#e0fdff}button:disabled{opacity:.4;cursor:default}button,select,input,label,summary{-webkit-tap-highlight-color:transparent}
.workspace{height:100dvh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:80px 60px minmax(0,1fr) 64px 42px;padding:0 24px;overflow:hidden}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}.identity{display:flex;align-items:center;gap:16px;min-width:0}.brand-symbol{font-family:serif;font-size:35px;font-weight:200;color:#99d8df;letter-spacing:-12px;margin-right:10px;transform:rotate(-8deg)}h1{font-size:14px;letter-spacing:.13em;margin:0;font-weight:700}h1 span{font-size:11px;font-weight:400;color:#8da5b4;padding-left:12px}.identity p{color:var(--muted);font-size:10px;letter-spacing:.06em;margin:7px 0 0}.experiment-label{display:flex;align-items:center;gap:8px;font-size:9px;color:#94a8b8;letter-spacing:.09em;white-space:nowrap}.status-dot{height:5px;width:5px;flex:0 0 5px;display:inline-block;border-radius:50%;background:#88d8c1;box-shadow:0 0 8px #88d8c133}.experiment{color:#647888;font-size:9px;letter-spacing:.11em;border-left:1px solid var(--line);margin-left:8px;padding-left:16px}
.toolbar{display:flex;align-items:center;gap:21px;border-top:1px solid var(--line);min-width:0}.clip-picker{display:flex;align-items:center;gap:10px;min-width:0}.clip-picker label,.control-label{color:var(--muted);font-size:9px;letter-spacing:.08em;white-space:nowrap}.clip-picker select{width:191px;height:32px;padding:0 9px;font-size:10px;min-width:0}.camera-controls{display:flex;align-items:center;gap:4px}.camera-controls .control-label{margin-right:7px}.camera-controls button{padding:7px 11px;font-size:10px;line-height:16px;white-space:nowrap}.view-options{margin-left:auto;display:flex;align-items:center;gap:14px}.view-options label{display:flex;align-items:center;gap:5px;font-size:10px;color:#b3c1cc;white-space:nowrap;cursor:pointer}input[type=checkbox]{accent-color:var(--cyan);width:12px;height:12px;margin:0}.workspace-actions{display:flex;align-items:center;gap:6px}.workspace-actions button{height:32px;padding:0 10px;font-size:10px;white-space:nowrap}#fx-toggle span{color:var(--cyan);font-size:15px;margin-right:4px}
.studio-body{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:14px;position:relative}.monitors{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.source-panel{display:none!important}.compare-visible .monitors{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}.compare-visible .source-panel{display:grid!important}.fx-closed .studio-body{grid-template-columns:minmax(0,1fr)}.fx-closed .fx-panel{display:none}.monitor{min-width:0;min-height:0;display:grid;grid-template-rows:41px minmax(0,1fr) 34px;border:1px solid var(--line);background:#101820;border-radius:8px;overflow:hidden}.monitor-title{font-size:9px;letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center;padding:0 15px;border-bottom:1px solid var(--line);font-weight:600;gap:10px;min-width:0}.monitor-title>span:first-child{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}.monitor-title small{font-size:9px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:5px}.tiny-square{height:5px;width:5px;flex:0 0 5px;display:inline-block;background:#7c8b99}.tiny-square.accent{background:var(--cyan)}.muted{color:#8ba0af;font-size:8px;white-space:nowrap;font-weight:400;letter-spacing:.1em}.look-label{font-size:8px;font-weight:500;color:#9acbd0;border:1px solid #355057;border-radius:3px;line-height:18px;padding:0 6px;letter-spacing:.09em;margin-left:6px}.source-stage{position:relative;min-height:0;background:#06090d;display:flex;align-items:center;justify-content:center;overflow:hidden}.source-stage video{display:block;width:100%;height:100%;object-fit:contain}.corner-label{position:absolute;bottom:13px;left:13px;padding:4px 6px;font-size:8px;color:#b0becb;background:#0b1119bb;border:1px solid #cadbe21c;border-radius:3px}.monitor-footer{font-size:9px;color:#92a5b4;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 14px;border-top:1px solid var(--line);background:#101921;min-width:0}.monitor-footer>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-legend{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:8px}.red-dot,.cyan-dot{height:5px;width:5px;border-radius:50%;display:inline-block;margin-left:6px}.red-dot{background:var(--red)}.cyan-dot{background:var(--cyan)}#viewport{position:relative;min-height:0;overflow:hidden;background:#101923}#cg{display:block;width:100%;height:100%;touch-action:none;outline:0}#loading{position:absolute;inset:0;background:#131c26ed;display:flex;justify-content:center;align-items:center;padding:25px;text-align:center;line-height:1.8;font-size:12px;color:#b2c0cc}#loading[hidden]{display:none}.camera-hint{position:absolute;left:14px;bottom:13px;pointer-events:none;font-size:9px;color:#a4b6c5;opacity:.72;letter-spacing:.025em}#fullscreen{position:absolute;right:10px;bottom:10px;width:29px;height:27px;font-size:19px;line-height:20px;background:#17232dbb;border-color:#55636e66;color:#b8c8d5;padding:0}
.fx-panel{min-height:0;min-width:0;display:grid;grid-template-rows:69px minmax(0,1fr) 32px;background:#111b24;border:1px solid var(--line);border-radius:8px;overflow:hidden}.fx-heading{display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line)}.eyebrow{color:#8ab2bc;font-size:8px;letter-spacing:.17em}.fx-heading h2{font-size:12px;font-weight:500;letter-spacing:.07em;margin:7px 0 0}#fx-close{width:24px;height:24px;padding:0;background:transparent;border-color:transparent;font-size:20px;font-weight:300;color:#8d9dab;line-height:20px}#fx-close:hover{background:#24323e;color:#fff}.fx-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3c505d #111b24;padding:0 16px 3px;scrollbar-gutter:stable}.fx-scroll::-webkit-scrollbar{width:5px}.fx-scroll::-webkit-scrollbar-thumb{background:#3c505d;border-radius:4px}.fx-section{border-bottom:1px solid var(--line);padding:17px 0 15px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.section-label h3{font-size:8px;letter-spacing:.13em;color:#a8bcc9;font-weight:500;margin:0}.section-label>span{font-size:8px;color:#7c929f;white-space:nowrap}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.preset-card{position:relative;overflow:hidden;background:#17222d;min-width:0;text-align:left;height:62px;padding:24px 10px 8px;border-color:#31404d;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;font-size:10px;line-height:1.2}.preset-card::before{content:"";position:absolute;height:3px;width:84%;top:15px;left:8%;transform:rotate(-11deg);border-radius:100%;background:linear-gradient(90deg,transparent,var(--preset-a),var(--preset-b),transparent);box-shadow:0 0 11px var(--preset-a);opacity:.8}.preset-card[data-preset=ember]::before{transform:rotate(8deg);height:2px}.preset-card[data-preset=prism]::before{height:9px;top:11px;clip-path:polygon(0 80%,26% 0,49% 66%,67% 10%,100% 80%);border-radius:0}.preset-card[data-preset=hologram]::before{height:8px;top:11px;background:repeating-linear-gradient(0deg,transparent 0 2px,var(--preset-a) 2px 3px);border-radius:0;transform:rotate(-4deg)}.preset-card[data-preset=analysis]{grid-column:1/-1;height:36px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 10px}.preset-card[data-preset=analysis]::before{display:none}.preset-card strong{display:block;font-size:10px;line-height:12px;letter-spacing:.035em;font-weight:500}.preset-card small{color:#94a5b2;font-size:8px;line-height:10px;display:block;margin-top:0;flex-shrink:0}.preset-card[data-preset=analysis] small{margin:0}.preset-card.active{background:#23353f;border-color:#87c0c8;box-shadow:inset 0 0 0 1px #87c0c815}.preset-card.active::after{content:"";position:absolute;width:4px;height:4px;background:#bdf8f5;border-radius:50%;right:8px;top:8px}.preset-card[data-preset=analysis].active::after{top:15px;right:7px}.preset-description{margin:11px 0 0;color:#8fa6b4;font-size:9px;line-height:1.6;min-height:29px}
.select-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;min-width:0}.select-row>span,.range-row>span,.palette-row>span{font-size:10px;color:#b2c2cd}.select-row select{height:29px;min-width:0;width:143px;padding:0 5px;font-size:9px;background:#192630}.range-row{display:block;margin-top:13px;cursor:pointer}.range-row>span{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.range-row output{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:9px;font-variant-numeric:tabular-nums;color:#c1dce0}.range-row input{width:100%;display:block;height:13px;margin:0;cursor:pointer;accent-color:#89cdd4}.palette-row{display:flex;align-items:center;gap:13px;margin-top:14px}.palette-row>span{margin-right:auto}.palette-row label{display:flex;align-items:center;gap:5px;font-size:9px;color:#91a4b0;cursor:pointer}input[type=color]{width:23px;height:23px;border:1px solid #4a606c;border-radius:50%;padding:3px;background:#182630;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.fine-section{padding:15px 0}.fine-section summary{font-size:8px;letter-spacing:.11em;color:#a6bcc9;cursor:pointer}.fine-section summary span{font-size:9px;letter-spacing:0;margin-left:8px;color:#7e96a5}.fine-content{padding-top:1px}.fx-actions{display:flex;align-items:center;gap:6px;margin-top:15px}.fx-actions button{font-size:9px;height:28px;padding:0 9px;white-space:nowrap}.fx-actions button:first-child{margin-right:auto}.fx-message{color:#7f98a7;font-size:8px;line-height:1.6;margin:10px 0 13px;min-height:26px}.fx-status{display:flex;align-items:center;gap:7px;padding:0 13px;background:#101923;border-top:1px solid var(--line);min-width:0}#fx-stat{font-size:8px;color:#9db4c2;white-space:nowrap}.fx-status-label{font-size:7px;letter-spacing:.08em;color:#657e8d;margin-left:auto;white-space:nowrap}
.transport{display:flex;align-items:center;gap:16px;min-width:0}.transport button{width:33px;height:33px;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.transport #play{background:#c9e6e8;border-color:#c9e6e8;color:#14232d}.transport #play:hover{background:#e0fdff}.transport svg{width:20px;height:20px;fill:currentColor}.mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-variant-numeric:tabular-nums}#time{font-size:10px;color:#adbecb;min-width:108px}.transport input[type=range]{flex:1;min-width:30px;height:16px;accent-color:#a4d7db;cursor:pointer}.transport select{font-size:11px;height:30px;padding:0 8px}.transport #loop{font-size:20px;width:30px;height:30px}.transport-hint{font-size:8px;color:#6d8493;letter-spacing:.1em;margin-left:5px}.notes{display:flex;justify-content:space-between;align-items:flex-start;gap:25px;border-top:1px solid var(--line);padding-top:11px;min-width:0}.notes p{font-size:9px;color:#7f94a2;margin:0;line-height:1.6}.notes>span{font-size:8px;color:#718b9a;white-space:nowrap;margin-top:2px}.error{color:#ffadb0!important}.loading-dot{animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}:fullscreen #cg{width:100%;height:100%}:fullscreen#viewport{width:100vw;height:100vh}
@media(min-width:1700px){.workspace{padding:0 36px;grid-template-rows:91px 64px minmax(0,1fr) 72px 44px}.studio-body{grid-template-columns:minmax(0,1fr) 308px;gap:20px}.fx-closed .studio-body{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1190px){.workspace{padding:0 18px;grid-template-rows:74px 58px minmax(0,1fr) 60px 40px}.toolbar{gap:12px}.clip-picker select{width:174px}.clip-picker label,.control-label,.experiment{display:none}.camera-controls button{padding:7px 8px}.view-options{gap:9px}.studio-body{grid-template-columns:minmax(0,1fr) 278px;gap:12px}.fx-closed .studio-body{grid-template-columns:minmax(0,1fr)}.fx-scroll{padding-left:14px;padding-right:12px}.monitor-title{padding:0 11px}.compare-visible .monitor-title small,.compare-visible .look-label{display:none}.source-panel .monitor-footer>span:first-child{display:none}.notes>span,.transport-hint{display:none}}
@media(max-width:900px){.workspace{padding:0 14px;grid-template-rows:70px 88px minmax(0,1fr) 58px 42px}.toolbar{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:7px 12px;padding:10px 0}.clip-picker{grid-column:1;grid-row:1}.camera-controls{grid-column:2/4;grid-row:1;justify-content:flex-end}.view-options{grid-column:1/3;grid-row:2;margin-left:0;gap:14px}.workspace-actions{grid-column:3;grid-row:2;justify-content:flex-end}.workspace-actions button{height:27px}.studio-body,.fx-closed .studio-body{grid-template-columns:minmax(0,1fr)}.fx-panel,.fx-closed .fx-panel{display:none;position:absolute;right:0;bottom:0;width:310px;height:78%;max-height:640px;z-index:10;box-shadow:0 -8px 45px #030a1266;grid-template-rows:57px minmax(0,1fr) 30px;border-color:#4a6e7a}.fx-open .fx-panel{display:grid}.fx-open .monitor-footer{visibility:hidden}.monitor-title small{display:inline}.compare-visible .monitors{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}.camera-hint{font-size:8px}}
@media(max-width:540px){.workspace{padding:0 11px;grid-template-rows:68px 89px minmax(0,1fr) 58px 45px}.masthead{gap:8px}.identity{gap:10px}.brand-symbol{font-size:29px}h1{font-size:12px;letter-spacing:.08em}h1 span{display:block;font-size:8px;padding:4px 0 0;letter-spacing:.12em}.identity p{display:none}.experiment-label{font-size:7px;gap:6px;letter-spacing:.03em}.toolbar{column-gap:6px}.clip-picker select{width:157px;height:29px;font-size:9px;padding-left:7px}.camera-controls{gap:3px}.camera-controls button{font-size:9px;padding:5px 7px}.view-options{gap:11px}.view-options label{font-size:9px;gap:4px}.view-options input{width:11px;height:11px}.workspace-actions{gap:5px}.workspace-actions button{font-size:8px;padding:0 7px}#fx-toggle span{font-size:12px;margin-right:2px}.monitor{grid-template-rows:34px minmax(0,1fr) 30px;border-radius:7px}.monitor-title{font-size:8px;padding:0 10px}.monitor-title small{display:none}.look-label{font-size:7px;margin-left:2px;line-height:16px}.muted{font-size:7px}.monitor-footer{font-size:8px;padding:0 10px}.camera-hint{left:10px;bottom:12px;font-size:7px;width:calc(100% - 60px);line-height:1.6}.compare-visible .monitors{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.55fr) minmax(0,1fr);gap:9px}.compare-visible .source-panel{grid-template-rows:29px minmax(0,1fr)}.compare-visible .source-panel .monitor-footer{display:none}.compare-visible .look-label{display:inline}.corner-label{font-size:7px;bottom:7px;left:8px;padding:3px 5px}.fx-panel,.fx-closed .fx-panel{width:100%;height:68%;max-height:none;grid-template-rows:54px minmax(0,1fr) 29px}.fx-heading{padding:0 15px}.fx-heading h2{font-size:11px;margin-top:5px}.fx-scroll{padding:0 15px 3px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.preset-card{height:60px}.preset-card[data-preset=analysis]{height:32px}.transport{gap:9px}.transport button{width:30px;height:30px}#time{font-size:9px;min-width:92px}.transport select{padding:0 3px;font-size:10px;width:51px}.transport #loop{width:27px}.notes{padding-top:8px}.notes p{font-size:8px;line-height:1.6}}
@media(max-height:760px) and (min-width:901px){.workspace{grid-template-rows:64px 52px minmax(0,1fr) 52px 35px}.identity p{margin-top:5px}.fx-panel{grid-template-rows:58px minmax(0,1fr) 30px}.fx-heading h2{margin-top:5px}.monitor{grid-template-rows:35px minmax(0,1fr) 30px}.notes{padding-top:8px}}
@media(max-height:530px) and (max-width:900px){.workspace{grid-template-rows:44px 72px minmax(0,1fr) 43px 28px}.toolbar{padding:5px 0;gap:4px 8px}.identity p{display:none}.notes{padding-top:5px}.notes p{font-size:7px}.monitor{grid-template-rows:27px minmax(0,1fr) 24px}.fx-panel,.fx-closed .fx-panel{height:95%}}
/* Opening controls always leaves a separate, correctly resized preview. */
@media (max-width: 900px) {
  .fx-open .studio-body { grid-template-columns: minmax(0, 1fr) 278px; grid-template-rows: minmax(0, 1fr); }
  .fx-open .fx-panel { position: static; width: auto; height: auto; max-height: none; box-shadow: none; }
  .fx-open .monitor-footer { visibility: visible; }
}
@media (max-width: 540px) {
  .fx-open .studio-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .fx-open.compare-visible .monitors { grid-template-rows: minmax(0, .35fr) minmax(0, 1fr); }
  .fx-open .monitor { grid-template-rows: 29px minmax(0, 1fr) 25px; }
}