:root{
  --bg:#030b0d;--bar:#071519;--line:#0f2a30;--fg:#e8f3f1;--muted:#8fb0ad;--accent:#00c896;
  --bar-h:52px;--bottom-h:48px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 Ubuntu,"Segoe UI",system-ui,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.viewer{height:100%;height:100dvh;display:grid;grid-template-rows:var(--bar-h) 1fr var(--bottom-h);outline:none}
.viewer[dir=rtl] .tabs{direction:rtl}

/* top bar */
.top{display:flex;align-items:center;gap:16px;padding:0 14px;background:var(--bar);border-bottom:1px solid var(--line);min-width:0}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;white-space:nowrap;font-weight:500}
.brand img{height:28px;width:auto}
.tabs{flex:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;justify-content:center;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:7px 12px;border-radius:999px;color:var(--muted);white-space:nowrap;border:1px solid transparent}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-current=true]{color:var(--accent);border-color:#00c89655;background:#00c8961a}
.right{display:flex;align-items:center;gap:10px}
.select{background:#061017;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}
.langs{display:flex;gap:2px}
.langs button{padding:6px 8px;border-radius:6px;color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.langs button[aria-current=true]{color:var(--accent);background:#00c8961a}

/* stage */
.stage{position:relative;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:0;padding:10px 0}
.canvasWrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
canvas{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px #000c;background:#000}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .2s .3s}
.loading.on{opacity:1}
.edge{height:100%;font-size:40px;color:#ffffff55;transition:color .15s}
.edge:hover{color:var(--accent)}

/* bottom */
.bottom{display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--bar);border-top:1px solid var(--line)}
.counter{color:var(--muted);min-width:64px;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
input[type=range]{flex:1;accent-color:var(--accent)}
.icon{font-size:20px;color:var(--muted);padding:4px 8px;border-radius:6px}
.icon:hover{color:var(--accent)}

/* thumbnails drawer */
.drawer{position:fixed;inset:var(--bar-h) 0 var(--bottom-h) 0;background:#030b0df2;overflow:auto;padding:16px;z-index:5}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-width:1400px;margin:0 auto}
.thumbs button{position:relative;aspect-ratio:16/9;background:#0a1a1f;border:2px solid transparent;border-radius:6px;overflow:hidden;padding:0}
.thumbs button[aria-current=true]{border-color:var(--accent)}
.thumbs canvas{width:100%;height:100%;display:block;border-radius:0;box-shadow:none}
.thumbs span{position:absolute;left:6px;bottom:4px;font-size:12px;color:#fff;background:#0009;padding:1px 6px;border-radius:4px}

.error{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg);color:var(--muted);text-align:center;z-index:9}

/* fullscreen */
.viewer:fullscreen{background:var(--bg)}

@media (max-width:760px){
  :root{--bar-h:auto}
  .viewer{grid-template-rows:auto 1fr var(--bottom-h)}
  .top{flex-wrap:wrap;padding:8px 10px;gap:8px}
  .tabs{order:3;flex-basis:100%;justify-content:flex-start}
  .brand span{display:none}
  .stage{grid-template-columns:28px 1fr 28px}
  .edge{font-size:30px}
}