:root{--bg:#666;--ink:#fff;--tray-h:150px;--chip-h:42px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;left:0;right:0;top:0;bottom:var(--tray-h);overflow:hidden;touch-action:none;background:var(--bg);transition:background .25s ease;user-select:none;-webkit-user-select:none}
#head{position:absolute;left:0;right:0;top:10px;bottom:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:1;overflow:hidden;}
#head img{height:100%; max-width:none; width:auto; opacity:0;transition:opacity .35s ease;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;pointer-events:none}
#head img.in{opacity:1}
.feature{position:absolute;z-index:10;transform-origin:center center;will-change:transform;touch-action:none;cursor:grab}
.feature video{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.feature.lifted{cursor:grabbing}
.feature.selected .frame{opacity:1}
.feature.selected{outline:none}
.feature.selected video{outline:2px solid rgba(120,180,255,0.9);outline-offset:2px}
#marquee{position:absolute;z-index:30;pointer-events:none;border:1px solid rgba(120,180,255,0.9);background:rgba(120,180,255,0.12)}
.hud{position:absolute;inset:-1px;opacity:0;pointer-events:none;transition:opacity .12s ease}
.feature:hover .hud{opacity:1;pointer-events:auto}
.hud .frame{position:absolute;inset:0;border:1px dashed rgba(255,255,255,0.45)}
.handle{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(0,0,0,0.72);border:1px solid rgba(255,255,255,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
.handle svg{width:14px;height:14px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.handle:hover{background:#000;border-color:var(--ink)}
.h-clone{left:0;top:0;cursor:pointer}
.h-del{left:100%;top:0;cursor:pointer}
.h-rot{left:0;top:100%;cursor:grab}
.h-rot:active{cursor:grabbing}
.h-scale{left:100%;top:100%;cursor:nwse-resize}
.h-sx{left:100%;top:50%;cursor:ew-resize}
.h-sy{left:50%;top:100%;cursor:ns-resize}
.fade{position:absolute;left:0;top:50%;height:80%;width:14px;transform:translate(-26px,-50%);transform-origin:right center;border:1px solid rgba(255,255,255,0.7);pointer-events:auto;cursor:ns-resize;background:linear-gradient(to bottom,var(--ink) 0%,rgba(255,255,255,0.04) 100%)}
#tray{position:fixed;left:0;right:0;bottom:0;max-height:60vh;background:#000;z-index:40;padding:6px 44px;overflow:hidden}
#strip{display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center}
.chip{margin:2px; flex:0 0 auto;height:var(--chip-h);aspect-ratio:1.32;position:relative;cursor:pointer;background:#0a0a0a;overflow:hidden}
.chip canvas{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;background:#0a0a0a}
.chip img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.chip:hover{border:2px solid #f00;}
#hue{position:fixed;left:0;top:0;bottom:var(--tray-h);width:22px;z-index:41;display:flex;flex-direction:column}
#hue .swatch{flex:0 0 34px;cursor:pointer}
#hue .hue-grad{flex:1 1 auto;cursor:crosshair}
#sl{position:fixed;right:0;top:0;bottom:var(--tray-h);width:22px;z-index:41;cursor:crosshair}
.chip.head{background:var(--ink);aspect-ratio:1}
.chip.head img{object-fit:contain;padding:2px}
.chip.head.on{border:2px solid #f00;}
.chip.blank{background:#000;border:1px solid rgba(255,255,255,0.55)}
#clear-btn{position:fixed;top:8px;left:30px;z-index:50;background:rgba(0,0,0,0.6);color:var(--ink);border:2px solid var(--ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;cursor:pointer;transition:background .2s,color .2s}
#clear-btn:hover{background:var(--ink);color:#000}
#loader{position:fixed;inset:0 0 var(--tray-h) 0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .4s ease}
#loader.gone{opacity:0}
#loader-text{color:#aaa;font-size:14px;letter-spacing:.18em;text-transform:uppercase}
#hue,#sl{opacity:0;transition:opacity .4s ease}
body.ready #hue,body.ready #sl{opacity:1}
#bottombar{position:fixed;right:0;bottom:0;z-index:50;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 8px;pointer-events:none}
#info-btn{pointer-events:auto;width:28px;height:28px;border:2px solid var(--ink);color:var(--ink);background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:Georgia,serif;font-size:15px;line-height:1;transition:background .2s,color .2s}
#info-btn:hover{background:var(--ink);color:#000}
#info-modal{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,0.88);align-items:center;justify-content:center}
#info-box{position:relative;max-width:min(92vw,540px);width:100%;border:2px solid var(--ink);background:#0a0a0a;padding:30px;border-radius:12px}
#info-close{position:absolute;top:14px;right:16px;width:26px;height:26px;cursor:pointer;opacity:0.55;transition:opacity .15s}
#info-close:hover{opacity:1}
#info-close::before,#info-close::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:1px;background:var(--ink)}
#info-close::before{transform:translate(-50%,-50%) rotate(45deg)}
#info-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
#info-box h2{font-size:24px;font-weight:normal;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
#info-box p{font-size:14px;line-height:1.6;color:rgba(255,255,255,0.8);margin-top:14px}
#info-box a{color:#8ab4e8;text-decoration:none}
#info-box a:hover{text-decoration:underline}
@media (max-width:860px){#info-box{padding:30px}.handle{width:32px;height:32px;margin:-16px 0 0 -16px}}
@media (max-width:767px){:root{--chip-h:32px}}
@media (max-width:480px){:root{--chip-h:26px}}
@media (prefers-reduced-motion:reduce){#head img{transition:none}}

body.dark-bg #head img{filter:invert(1)}