:root{--bg:#0d0d12;--acc:hsl(0 90% 60%);--glass:rgba(255,255,255,.08);--line:rgba(255,255,255,.12);--txt:#f1eee8}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(ellipse at 20% -10%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 60%),var(--bg);color:var(--txt);font-family:'Bricolage Grotesque',sans-serif;min-height:100vh;display:grid;grid-template-columns:1fr 380px;grid-template-rows:auto 1fr;gap:14px;padding:14px;transition:background .3s}
header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px}
h1{font-weight:800;font-size:2rem;letter-spacing:-.04em;line-height:1}
h1 span{font-weight:200;color:var(--acc)}
h1 em{font-family:'JetBrains Mono';font-style:normal;font-size:.7rem;letter-spacing:0;font-weight:400;opacity:.6;margin-left:8px;vertical-align:middle}
#tagline{font-family:'JetBrains Mono';font-size:.72rem;opacity:.6;transition:opacity .4s}
.mono{font-family:'JetBrains Mono'}.small{font-size:.74rem;opacity:.85}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{font-family:'JetBrains Mono';font-size:.72rem;padding:5px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--line);white-space:nowrap}
.pill.good{background:#1f8f4a;border-color:#2dff6a}.pill.meh{background:#8a7400;border-color:#ffe600}.pill.bad{background:#8f1f1f;border-color:#ff2d2d}
.hidden{display:none!important}
#stage{display:flex;flex-direction:column;gap:10px;min-width:0}
#tabs button{font-size:.8rem;padding:9px 4px}
#srcPanel .srcrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;min-height:54px}
.drop{border:2px dashed var(--line);border-radius:14px;padding:12px 18px;cursor:pointer;font-size:.85rem;transition:.2s}
.drop.over,.drop:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent)}
.txt{flex:1;min-width:200px;background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:10px 14px;color:var(--txt);font:inherit;font-family:'JetBrains Mono';font-size:.8rem;outline:none}
.txt:focus{border-color:var(--acc)}
#viewport{position:relative;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 2px var(--acc),0 0 50px -6px var(--acc);aspect-ratio:16/9;max-height:calc(100vh - 330px);min-height:220px;margin:auto;width:100%;transition:box-shadow .3s}
#canvas{width:100%;height:100%;display:block;object-fit:contain}
#cssHost{position:absolute;inset:0}#cssHost video{width:100%;height:100%;object-fit:contain}
#ytWrap{position:absolute;inset:0}#ytWrap iframe,#yt{width:100%;height:100%;border:0}
#tintOver{position:absolute;inset:0;pointer-events:none}
#graph{position:absolute;top:10px;left:10px;border-radius:8px;width:240px;height:70px}
#notice{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);padding:7px 14px;border-radius:99px;font-family:'JetBrains Mono';font-size:.72rem;max-width:92%;text-align:center;pointer-events:none}
#frozen{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.7);border:1px solid var(--acc);padding:5px 10px;border-radius:99px;font-family:'JetBrains Mono';font-size:.7rem}
#divider{position:absolute;top:0;bottom:0;width:3px;background:#fff;left:50%;cursor:ew-resize;touch-action:none}
#divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#000;border-radius:99px;padding:6px 9px;font-weight:800}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .35s ease-out}
@keyframes fl{from{opacity:.9}to{opacity:0}}
#shy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:repeating-linear-gradient(45deg,#15151d 0 14px,#101016 14px 28px)}
#shy h2{font-size:2rem;font-weight:800}
#player{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(14px)}
#timeline{position:relative}
#ticks{position:absolute;inset:0;pointer-events:none}
#ticks i{position:absolute;top:-4px;width:2px;height:16px;background:#ffe600;border-radius:2px}
.prow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.prow select{padding:5px 8px;font-size:.75rem}
#camRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
button,select{font:inherit;color:var(--txt);cursor:pointer}
button:disabled{opacity:.35;cursor:not-allowed}
.chip,select,#retry{background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:.85rem;backdrop-filter:blur(10px)}
select option{background:#1a1a22}
.chip.sm{padding:5px 10px;font-size:.74rem;font-family:'JetBrains Mono'}
.chip.on{background:var(--acc);color:#000;border-color:transparent;font-weight:800}
.chip.ghost{opacity:.75}
.round{width:54px;height:54px;border-radius:50%;border:2px solid var(--acc);background:var(--glass);font-size:1.5rem;transition:transform .5s}
.round.spin{transform:rotate(360deg)}
.shutter{width:66px;height:66px;background:#fff;border:5px solid var(--acc);box-shadow:inset 0 0 0 3px #000}
.shutter:active{transform:scale(.9)}
#controls{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:16px;backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:calc(100vh - 90px)}
.card{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.2)}
#stats b{float:none;font-size:.78rem}
#bench table{width:100%;border-collapse:collapse}#bench td,#bench th{padding:3px;text-align:left;border-bottom:1px solid var(--line)}
.row{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.row.inline{flex-direction:row;gap:8px;flex-wrap:wrap;align-items:center}
.row.two{flex-direction:row;gap:12px}.row.two label{flex:1;display:flex;flex-direction:column;gap:6px}
.grow{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.75rem;min-width:120px}
b{font-family:'JetBrains Mono';font-weight:700;color:var(--acc);float:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:rgba(255,255,255,.15);outline:none}
input[type=range].rainbow{height:14px;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--acc);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--acc)}
#swatches{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.sw{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s}
.sw.on{border-color:#fff;transform:scale(1.15);box-shadow:0 0 14px 2px currentColor,0 0 0 3px rgba(255,255,255,.25)}
input[type=color]{width:36px;height:36px;border:none;background:none;cursor:pointer}
.seg{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.seg button{flex:1;background:none;border:none;padding:8px 4px;font-size:.78rem}
.seg button.on{background:var(--acc);color:#000;font-weight:800}
#presets{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
#presets .chip{white-space:nowrap;flex-shrink:0}
#presets .chip.user{border-style:dashed}
#gallery{display:flex;gap:6px;flex-wrap:wrap}
.th{position:relative;width:70px;height:52px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.th img{width:100%;height:100%;object-fit:cover}
.th div{position:absolute;inset:0;display:flex;opacity:0;background:rgba(0,0,0,.6);transition:.2s}
.th:hover div,.th:focus-within div{opacity:1}
.th button{flex:1;background:none;border:none;font-size:.9rem}
footer{display:flex;flex-direction:column;gap:3px;font-family:'JetBrains Mono';font-size:.68rem;opacity:.65;margin-top:auto}
footer a{color:var(--acc)}
.keys{opacity:.7}
@media(max-width:860px){
 body{display:block;padding:10px}
 header{margin-bottom:8px}h1{font-size:1.4rem}
 #tabs button{font-size:.7rem}
 #viewport{max-height:58vh;margin-top:6px}
 #controls{margin-top:10px;max-height:none}
}