:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ground:#121315;--chrome:#1a1b1e;--chrome-raised:#1a1b1eeb;--veil:#121315e6;--line:#383c42;--line-strong:#50555c;--ink:#eeede8;--ink-2:#b5b7b9;--ink-3:#868a8f;--hazard:#ffc21a;--hazard-hover:#ffcf45;--hazard-ink:#17150e;--share:#f5f5f2;--share-ink:#0f0f10;--focus:#8ccbff;--stage:#45484b;--f-display:"Gasoek One", "Black Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--f-brand:var(--f-brand-face,"Gasoek One"), var(--f-display);--f-ui:"IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;--f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--control:40px;--control-compact:32px;--control-large:56px;--divider:#2c2f34;--radius-control:8px;--radius-panel:12px;--radius-pill:999px;--gap:10px;--gutter:16px;--tile-width:76px;--rack-gap:6px;--rack-arrow:14px;--chip-width:92px;--icon:18px;--tile-icon:28px;--tape-tile:28.28px;--shadow-panel:0 10px 30px #00000059;--blur-panel:blur(6px);--blur-veil:blur(2px);--ad-space:0px}.app[data-blur=false]{--blur-panel:none;--blur-veil:none}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--ground);color:var(--ink);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-size:14px;line-height:1.5;overflow:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-user-select:none;user-select:none}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{height:calc(100% - var(--ad-space));max-width:1600px;padding:10px var(--gutter) 12px;gap:var(--gap);flex-direction:column;margin-inline:auto;display:flex}.top{justify-content:space-between;align-items:center;gap:var(--gutter);display:flex}.wordmark{font-family:var(--f-brand);margin:0;font-size:30px;font-weight:400;line-height:1}.stage-controls{align-items:center;gap:8px;display:flex;position:absolute;top:12px;right:12px}.stage-controls>button{background:var(--veil);-webkit-backdrop-filter:var(--blur-panel)}.btn{height:var(--control);border-radius:var(--radius-control);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding-inline:16px;font-weight:600;transition:background-color .15s,border-color .15s,color .15s,transform 80ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn svg{width:var(--icon);height:var(--icon);flex:none}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn-accent{background:var(--hazard);color:var(--hazard-ink)}.btn-accent:hover:not([disabled]){background:var(--hazard-hover)}.btn-ghost{border-color:var(--line);color:var(--ink-2);background:0 0}.btn-ghost:hover:not([disabled]){border-color:var(--line-strong);color:var(--ink)}.btn-share{background:var(--share);color:var(--share-ink)}.btn-share:hover:not([disabled]){background:#fff}.btn-compact{height:var(--control-compact);padding-inline:12px;font-size:13px}.btn-large{height:var(--control-large);padding-inline:22px;font-size:17px}.btn-block{width:100%}.icon-btn{width:var(--control);height:var(--control);border-radius:var(--radius-control);border:1px solid var(--line);color:var(--ink-2);background:0 0;place-items:center;display:grid}.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}.icon-btn svg{width:20px;height:20px}.icon-btn[aria-pressed=false] .sound-on,.icon-btn[aria-pressed=true] .sound-off,.app:not([data-phase=setup]) #fidelityButton{display:none}.label{letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;font-size:12px}.status{min-height:var(--control);background:var(--chrome);border:1px solid var(--line);border-radius:var(--radius-panel);align-items:center;gap:14px;padding:6px 8px 6px 14px;display:flex}.target{flex:0 250px;align-items:center;gap:10px;min-width:0;display:flex}.target input{background:0 0;border:0;border-bottom:1px dashed #555a61;width:100%;min-width:0;padding:2px;font-size:15px;font-weight:600}.target input:focus{border-bottom-color:var(--hazard);outline:none}.tag{border-radius:var(--radius-pill);border:1px solid var(--line-strong);color:var(--ink-2);flex:none;padding:2px 10px;font-size:12px;font-weight:600}.meter{background:#0e0f10;border:1px solid #2c2f33;border-radius:3px;flex:auto;min-width:80px;height:14px;position:relative;overflow:hidden}.meter-fill{width:0;transition:width .25s ease-out;position:absolute;inset:0 auto 0 0;overflow:hidden}.meter-fill:before{content:"";inset:0 0 0 calc(-1 * var(--tape-tile));background:repeating-linear-gradient(-45deg, var(--hazard) 0 10px, #15140f 10px 20px);background-size:var(--tape-tile) var(--tape-tile);animation:1.2s linear infinite tape;position:absolute}@keyframes tape{to{transform:translateX(var(--tape-tile))}}.percent,.timer{font-family:var(--f-mono);font-variant-numeric:tabular-nums}.percent{text-align:right;min-width:4.2ch;color:var(--hazard);font-size:15px;font-weight:600}.timer{min-width:7ch;color:var(--ink-2);font-size:13px}.work{grid-template-columns:calc(var(--tile-width) + 18px) minmax(0, 1fr);flex:1;gap:12px;min-height:0;display:grid}.rack{align-items:center;gap:var(--rack-gap);border-radius:var(--radius-panel);border:1px solid var(--line);background-color:var(--chrome);background-image:radial-gradient(circle,#0b0c0d 0 2.2px,#0000 2.6px);background-position:4px 4px;background-size:16px 16px;flex-direction:column;padding:10px 8px;display:flex;overflow:hidden auto}.rack,.rack-tiles{scrollbar-width:none}.rack::-webkit-scrollbar{display:none}.rack-tiles::-webkit-scrollbar{display:none}.rack-tiles{gap:var(--rack-gap);display:grid}.rack-arrow{min-width:var(--rack-arrow);color:var(--ink-3);background:0 0;border:0;flex:1 1 0;align-self:stretch;padding:0;transition:color .15s;display:none}.rack-arrow:hover{color:var(--ink)}.rack-arrow[disabled]{visibility:hidden}.rack-arrow svg{width:var(--rack-arrow);margin-inline:auto;display:block}.choice{border:1px solid var(--line);background:var(--chrome-raised);color:var(--ink-2);border-radius:9px;transition:background-color .12s,color .12s,border-color .12s}.choice:hover{color:var(--ink);border-color:var(--line-strong)}.choice[aria-pressed=true]{background:var(--hazard);border-color:var(--hazard);color:var(--hazard-ink)}.tile{width:var(--tile-width);flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;display:flex;position:relative}.tile svg{width:var(--tile-icon);height:var(--tile-icon)}.tile-name{white-space:nowrap;font-size:12.5px;font-weight:600}.tile kbd{font-family:var(--f-mono);color:var(--ink-3);font-size:10px;position:absolute;top:5px;right:6px}.tile[aria-pressed=true] kbd{color:#17150e99}.chip-row{grid-auto-flow:column;grid-auto-columns:var(--chip-width);gap:8px;display:grid}.tile-row{flex-wrap:wrap;gap:8px;display:flex}.stage-wrap{border-radius:var(--radius-panel);background:var(--stage);border:1px solid var(--line);min-height:0;position:relative;overflow:hidden}#stage{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:absolute;inset:0}#stage:focus{outline:none}#stage:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}#stage[data-armed]{cursor:crosshair}.setup{left:50%;bottom:var(--gutter);width:min(880px, calc(100% - 2 * var(--gutter)));border-radius:var(--radius-panel);background:var(--veil);box-shadow:var(--shadow-panel);-webkit-backdrop-filter:var(--blur-panel);border:1px solid #3a3e44;grid-template-columns:minmax(0,1fr) auto;display:grid;position:absolute;transform:translate(-50%)}.setup-side{flex-direction:column;gap:10px;min-width:0;padding:16px 18px;display:flex}.setup-side+.setup-side{border-left:1px solid var(--divider)}.setup-source{align-items:center;gap:16px;display:flex}.setup-thumb{object-fit:cover;border-radius:var(--radius-control);border:1px solid var(--line);flex:none;width:112px;height:112px}.setup-picks{flex-direction:column;gap:8px;min-width:0;display:flex}.chip{height:var(--control-compact);border-radius:var(--radius-control);white-space:nowrap;background:0 0;border:1px solid #4a4f56;padding-inline:8px;font-size:13px;font-weight:500}.chip:hover,.chip[aria-pressed=true]{border-color:var(--hazard);color:var(--hazard)}.dock{display:none}.drop-veil{border:2px dashed var(--hazard);color:var(--hazard);pointer-events:none;background:#121315b8;border-radius:10px;place-items:center;font-size:18px;font-weight:700;display:grid;position:absolute;inset:10px}.toast{max-width:calc(100% - 2 * var(--gutter));border-radius:var(--radius-control);text-align:center;opacity:0;pointer-events:none;background:#0f1011;border:1px solid #3a3e44;padding:8px 14px;font-size:13px;transition:opacity .2s,transform .2s;position:absolute;top:14px;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.spill{z-index:10;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.overlay{inset:0 0 var(--ad-space);z-index:20;padding:var(--gutter);-webkit-backdrop-filter:var(--blur-veil);background:#08090ab8;grid-template-columns:minmax(0,1fr);place-items:center;display:grid;position:fixed;overflow:auto}.ad-bar{z-index:20;height:var(--ad-space);padding-bottom:env(safe-area-inset-bottom);background:var(--ground);justify-content:center;display:none;position:fixed;inset:auto 0 0}.result-inner{grid-template-columns:minmax(0, min(620px, calc((100vh - 2 * var(--gutter)) * 640 / 820))) minmax(0, 480px);align-items:center;gap:40px;max-width:100%;margin:auto;display:grid}.report-frame{cursor:default;background:0 0;border:0;width:100%;padding:0;display:block}.report-stage{display:block}.report-hint{display:none}.report{aspect-ratio:640/820;width:100%;display:block}.share{flex-direction:column;gap:14px;display:flex}.preview{aspect-ratio:16/10;background:#0c0d0e;border:1px solid #33373c;border-radius:10px;width:100%;max-height:min(56vh,540px);position:relative;overflow:hidden}.preview img,.preview video{object-fit:contain;background:#0c0d0e;width:100%;height:100%;position:absolute;inset:0}.progress{background:#0a0a0bcc;border-radius:6px;align-items:center;gap:10px;padding:6px 10px;display:flex}.render{position:absolute;bottom:10px;left:10px;right:10px}.loader{width:min(360px, calc(100% - 2 * var(--gutter)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.preview-frame,.share-controls{display:contents}.share-actions{flex-direction:column;gap:10px;display:flex}.share-next{border-top:1px solid var(--divider);padding-top:14px}.menu{border-radius:var(--radius-panel);background:var(--chrome);border:1px solid var(--line);width:min(360px,100%);box-shadow:var(--shadow-panel);flex-direction:column;gap:10px;padding:24px;display:flex}.menu-title{font-family:var(--f-display);text-align:center;margin:0 0 8px;font-size:30px;font-weight:400;line-height:1}.knobs{grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:center;gap:8px;margin-bottom:8px;display:grid}.knob{display:contents}.knob .label{grid-column:1;padding-right:6px}.knob-rule{border:0;border-top:1px solid var(--divider);grid-column:1/-1;width:100%;margin:4px 0}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}@keyframes hint-in{0%{opacity:0}}@keyframes breathe{50%{opacity:.35}}@media (width<=900px){:root:has(.ad-bar:not([hidden])){--ad-space:calc(var(--ad-height) + env(safe-area-inset-bottom))}.ad-bar{display:flex}.app[data-phase=setup] .hud{display:none}.work{display:flex}.rack,.dock{flex:none}.stage-wrap{flex:1;min-width:0}.setup{display:none}.dock{--step-shift:24px;--step-time:.22s;border-radius:var(--radius-panel);border:1px solid var(--line);background:var(--chrome);grid-template-columns:minmax(0,max-content);justify-content:center;align-self:flex-start;display:grid;overflow:hidden}.dock-step{min-width:0;transition:opacity var(--step-time), transform var(--step-time);flex-direction:column;grid-area:1/1;gap:12px;padding:16px 18px 18px;display:flex}.dock-step[inert]{opacity:0;visibility:hidden;transform:translateX(var(--step-shift));transition:opacity var(--step-time), transform var(--step-time), visibility 0s var(--step-time)}.dock-step[inert]:has(~.dock-step:not([inert])){transform:translateX(calc(-1 * var(--step-shift)))}.dock-actions{gap:8px;margin-top:auto;display:flex}.dock-actions .btn-ghost{width:var(--tile-width);padding-inline:0}.dock-actions .btn-accent{flex:1}.option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.option{height:var(--control);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding-inline:10px;font-weight:600;display:inline-flex}.option svg{width:var(--icon);height:var(--icon);flex:none}.tile kbd{display:none}.result-inner{width:min(100%,960px);height:calc(100dvh - var(--ad-space) - 2 * var(--gutter));flex-direction:column;align-items:stretch;display:flex}#result[data-stage=report] .share,#result[data-stage=share] .report-frame{display:none}.report-frame{--hint-line:20px;--hint-gap:6px;justify-content:center;align-items:center;gap:var(--hint-gap);flex-direction:column;flex:1 1 0;min-height:0;display:flex;container-type:size}.report-frame:enabled{cursor:pointer}.report-stage{display:contents}.preview-frame{flex:1 1 0;align-self:stretch;place-items:center;min-height:0;display:grid;container-type:size}.report{width:min(100cqw, (100cqh - var(--hint-line) - var(--hint-gap)) * 640 / 820)}.report-hint{line-height:var(--hint-line);letter-spacing:.08em;color:var(--ink-3);opacity:0;font-size:13px;display:block}.report-frame:enabled .report-hint{opacity:1;animation:.4s ease-out hint-in,2.4s ease-in-out .4s infinite breathe}.share{flex:1 1 0;min-height:0;animation:.3s ease-out rise}.preview{--preview-aspect:1;width:min(100cqw, 100cqh * var(--preview-aspect));aspect-ratio:var(--preview-aspect);max-height:none}.share-controls{flex-direction:column;align-self:center;gap:10px;width:min(100%,520px);display:flex}.share-actions{flex-direction:row}.share-actions .btn{flex:1;min-width:0}}@media (width<=900px) and (orientation:portrait){.work{flex-direction:column;gap:8px}.rack,.dock{order:2}.dock{align-self:stretch}.rack{flex-direction:row;justify-content:center;padding:6px;overflow:visible}.rack-tiles{width:calc(var(--rack-slots) * (var(--tile-width) + var(--rack-gap)) - var(--rack-gap));grid-template-columns:repeat(var(--rack-columns), var(--tile-width));touch-action:pan-y;scroll-behavior:smooth;flex:none;overflow-x:hidden}.rack-arrow{display:block}}@media (width<=640px){:root{--tile-width:64px;--tile-icon:24px}.app{gap:8px;padding-block:8px 10px}.wordmark{font-size:26px}.status{flex-wrap:wrap;gap:8px 10px;padding:8px 10px}.target{flex:150px}.status .meter{flex:1 0 100%;order:3;height:10px}.timer{display:none}}@media (prefers-reduced-motion:reduce){.meter-fill{transition:none}.meter-fill:before{animation:none}.toast{transition:none}.dock{--step-time:0s}.share,.report-frame:enabled .report-hint{animation:none}.rack-tiles{scroll-behavior:auto}}
