:root{color-scheme:dark;--bg:#0b111b;--panel:#101a27;--canvas:#0e1a2b;--line:#243242;--text:#edf2f7;--muted:#93a4b7;--gold:#f0cc83;--cyan:#87dded}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:absolute;top:0;left:0;right:0;height:520px;pointer-events:none;background:radial-gradient(ellipse at 80% 0,rgba(83,145,154,.09),transparent 58%)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cyan)}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled,input:disabled{opacity:.45;cursor:wait}
:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.site-shell{max-width:1440px;margin:auto;padding:0 48px}
.topbar{height:92px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:relative}
.brand{font-size:16px;letter-spacing:.08em;font-weight:750}
.brand span{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.18em;margin-left:14px}
.quiet-link{font-size:12px;color:var(--muted)}
.quiet-link span{margin-left:14px;color:var(--gold)}
.intro{padding:62px 0 45px;position:relative}
.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:650;margin:0 0 18px}
.signal{display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:var(--gold);box-shadow:0 0 14px #f0cc8340}
h1{font-size:clamp(32px,3.6vw,49px);font-weight:650;line-height:1.25;letter-spacing:-.055em;margin:0 0 23px}
.lead{color:#acbbcc;font-size:15px;line-height:1.9;margin:0}
.intro-meta{display:flex;gap:22px;color:#70849b;font-size:11px;letter-spacing:.02em;margin-top:24px}
.intro-meta span+span::before{content:"/";margin-right:22px;color:#3e5169}
.comparison{border-top:1px solid var(--line)}
.selection-row{display:flex;align-items:center;justify-content:space-between;padding:20px 0 21px;gap:20px}
.effect-tabs{display:flex;gap:6px;flex-wrap:wrap}
.effect-tab{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:6px;padding:9px 15px;font-size:13px;white-space:nowrap;transition:background .2s,color .2s}
.effect-tab:hover{background:#152130;color:var(--text)}
.effect-tab[aria-selected="true"]{color:var(--gold);background:#f0cc8310;border-color:#f0cc8338}
.tab-number{font-size:9px;opacity:.6;margin-right:8px;font-variant-numeric:tabular-nums}
.lab-label{font:10px ui-monospace,monospace;color:#5e748c;letter-spacing:.09em;white-space:nowrap}
.load-status{font-size:13px;color:var(--muted);margin-bottom:18px}
.load-status:empty{display:none}
.load-status.is-error{color:#ffb1a9;padding:15px;border:1px solid #a65c584d;border-radius:6px;background:#a65c5810}
.effect-heading{display:flex;gap:18px;align-items:baseline;padding:3px 0 19px}
.effect-heading h2{font-size:18px;font-weight:600;letter-spacing:-.03em;margin:0;flex-shrink:0}
.effect-heading p{font-size:12px;color:var(--muted);margin:0}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lane{min-width:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.lane-codex{border-color:#87dded55;box-shadow:0 0 28px #87dded06}
.lane-heading{height:82px;padding:16px 17px;display:flex;align-items:center;gap:11px}
.lane-index{font:10px ui-monospace,monospace;color:#5e748c;align-self:flex-start;margin-top:5px}
.lane-heading h3{font-size:14px;font-weight:650;margin:0;letter-spacing:-.02em}
.lane-heading p{font-size:10px;color:var(--muted);margin:1px 0 0}
.lane-heading sup{color:var(--muted);font-size:9px;margin-left:2px}
.tag{margin-left:auto;font:8px ui-monospace,monospace;letter-spacing:.06em;color:#71859c;border:1px solid #2c3d51;border-radius:3px;padding:3px 5px}
.lane-codex .tag{color:var(--cyan);border-color:#87dded40;background:#87dded07}
.lane-codex .lane-index{color:var(--cyan)}
.lane-fps{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--muted);font:9px ui-monospace,monospace;flex-shrink:0}
.lane-fps select{font-size:11px;padding:5px 4px;cursor:pointer}
.canvas-wrap{position:relative;aspect-ratio:1;background:var(--canvas);border-top:1px solid #24324280;border-bottom:1px solid #24324280}
canvas{display:block;width:100%;height:100%;object-fit:contain}
.asset-error{position:absolute;inset:0;margin:0;padding:25px;display:flex;align-items:center;justify-content:center;text-align:center;color:#f3bcb2;font-size:12px;background:#0e1a2bee}
.asset-error[hidden]{display:none}
.lane-footer{padding:10px 15px;display:flex;justify-content:space-between;gap:8px;color:#8195ac;font:10px ui-monospace,monospace;font-variant-numeric:tabular-nums;min-height:37px}
.lane-codex .lane-footer{color:#90b6c2}
.transport{margin-top:18px;border:1px solid var(--line);border-radius:9px;padding:20px 24px 16px;background:#101925}
.transport-row{display:flex;align-items:center;gap:22px}
.play-controls{display:flex;align-items:center;gap:7px}
.primary-button{border:1px solid #f0cc8340;border-radius:5px;background:var(--gold);color:#192332;font-size:12px;font-weight:650;padding:8px 17px;min-width:80px}
.primary-button:hover{background:#f9d99d}
.icon-button{background:transparent;color:#a1b0c2;border:1px solid #2b3a4d;border-radius:5px;width:34px;height:35px;font-size:21px;line-height:1}
.icon-button:hover{background:#1b293b}
#clock{font:12px ui-monospace,monospace;color:#c4d0de;font-variant-numeric:tabular-nums}
.playback-options{margin-left:auto;display:flex;align-items:center;gap:20px}
.repeat-option,.select-control{font-size:11px;color:var(--muted);display:flex;gap:7px;align-items:center}
.repeat-option input{accent-color:var(--gold);width:13px;height:13px}
select{border:1px solid #2b3a4d;border-radius:4px;background:#111e2d;color:#cbd8e6;padding:5px 8px;font-size:11px}
#timeline{display:block;width:100%;height:5px;margin:24px 0 12px;accent-color:var(--gold);cursor:pointer}
.timeline-labels{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#71869f}
.alignment-row{display:flex;align-items:center;gap:18px;margin-top:18px;padding-top:15px;border-top:1px solid #24324280}
.mode-control{display:flex;border:1px solid #2b3a4d;border-radius:5px;padding:2px;margin:0;flex-shrink:0}
.mode-control label{position:relative;cursor:pointer}
.mode-control input{position:absolute;opacity:0;width:1px;height:1px}
.mode-control span{display:block;font-size:10px;color:var(--muted);padding:5px 12px;border-radius:3px;white-space:nowrap}
.mode-control input:checked+span{background:#293646;color:#e7edf4}
.mode-control input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}
.alignment-row p{font-size:11px;color:#8093a9;margin:0}
.viewer-note{display:flex;gap:9px;align-items:baseline;padding:15px 2px 0;color:#7e93ab;font-size:10px}
.note-dot{width:4px;height:4px;border-radius:50%;background:#6c849d;flex-shrink:0;align-self:flex-start;margin-top:7px}
.viewer-note p{margin:0;flex:1}
.viewer-note a{color:var(--cyan);white-space:nowrap}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin:60px 0 64px;padding-top:33px;border-top:1px solid var(--line)}
.note-card .eyebrow{font-size:9px;margin-bottom:13px;color:#7991a9}
.note-card h2{font-size:18px;letter-spacing:-.04em;font-weight:600;margin:0 0 17px}
.note-card p{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 13px}
.note-card strong{color:#c5d1de;font-weight:500}
.note-card .provenance{font-size:10px;color:#70869e;margin-top:20px}
.resource-links{display:flex;gap:21px;flex-wrap:wrap;margin-top:21px;font-size:11px;color:var(--cyan)}
.resource-links a{border-bottom:1px solid #87dded30;padding-bottom:3px}
.site-footer{border-top:1px solid var(--line);padding:24px 0 33px;display:flex;justify-content:space-between;gap:20px;color:#617890;font-size:10px;letter-spacing:.08em}
.footer-divider{margin:0 10px;color:#3b516b}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(min-width:1300px){.lane-heading{padding:18px 22px}.lane-heading h3{font-size:16px}.lane-heading p{font-size:11px}.tag{font-size:9px}}
@media(max-width:1050px){.site-shell{padding:0 26px}.lane-heading{padding:13px 11px;gap:7px}.tag{display:none}.lane-index{font-size:9px}.lane-heading h3{font-size:13px}.lanes{gap:11px}.notes-grid{gap:32px}.lab-label{display:none}}
@media(max-width:760px){.site-shell{padding:0 20px}.topbar{height:72px}.brand span{font-size:9px;margin-left:9px}.quiet-link{font-size:10px}.intro{padding:39px 0 30px}.lead{font-size:13px}.intro-meta{gap:12px;font-size:10px}.intro-meta span+span::before{margin-right:12px}.effect-tab{padding:8px 10px;font-size:12px}.tab-number{display:none}.effect-heading{display:block}.effect-heading p{margin-top:6px}.lanes{grid-template-columns:1fr;gap:16px;max-width:460px;margin:auto}.lane-heading{padding:15px 19px;height:72px}.lane-heading h3{font-size:16px}.lane-heading p{font-size:11px}.tag{display:block;font-size:9px}.lane-index{font-size:10px}.transport{padding:17px 15px}.transport-row{gap:12px;flex-wrap:wrap}.playback-options{gap:10px}.primary-button{padding:7px 12px;min-width:75px}#clock{font-size:10px}.alignment-row{align-items:flex-start;flex-direction:column;gap:10px}.viewer-note{font-size:10px;flex-wrap:wrap}.viewer-note a{margin-left:13px}.notes-grid{grid-template-columns:1fr;gap:31px;margin:40px 0}.site-footer{font-size:9px;flex-wrap:wrap}.repeat-option{font-size:10px}.select-control{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}