:root{--bg:#0e0f11;--surface:#1a1b22;--surface-hover:#22242e;--border:#2a2c38;--text:#e2e4ec;--muted:#8b8fa8;--accent:#2d7dff}*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(1100px 460px at 50% -8%,rgba(45,125,255,.08),transparent 70%),var(--bg)}.wrap{max-width:1100px;margin:0 auto;padding:20px;text-align:center}.head{margin:0 0 18px}h1{font-size:20px;letter-spacing:.02em;margin:0 0 4px}.lead{color:var(--muted);font-size:14px;margin:0}.ver{font:600 12px/1 ui-monospace,monospace;color:var(--accent);letter-spacing:.02em;background:#2d7dff1a;border:1px solid rgba(45,125,255,.32);border-radius:999px;padding:3px 8px;vertical-align:middle;position:relative;top:-2px}.toolbar{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center;margin:0 0 16px;padding:6px;border-radius:12px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(180deg,rgba(45,125,255,.35),var(--border) 40%) border-box;border:1px solid transparent;box-shadow:inset 0 1px #ffffff0a,0 10px 30px #00000073}.tb-sep{width:1px;align-self:stretch;margin:4px;background:var(--border)}.tb-cell{display:inline-flex}.tb-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.tb-btn svg{color:var(--muted);transition:color .12s,transform .2s}.tb-btn:hover{background:var(--surface-hover);border-color:var(--border)}.tb-btn:hover svg{color:var(--accent);transform:translateY(-1px)}.dd{position:relative;display:inline-block;text-align:left}.dd-trigger{display:flex;align-items:center;gap:10px;min-width:240px;max-width:340px;background:transparent;color:var(--text);border:1px solid transparent;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;transition:border-color .12s,background .12s}.dd-trigger:hover{background:var(--surface-hover);border-color:var(--border)}.dd.open .dd-trigger{border-color:var(--accent);background:var(--surface-hover)}.dd-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dd-chevron{flex:0 0 auto;color:var(--muted);transition:transform .18s ease}.dd.open .dd-chevron{transform:rotate(180deg);color:var(--accent)}.dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;margin:0;padding:4px;list-style:none;max-height:0;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 14px 34px #0000008c;opacity:0;transform:scaleY(.96);transform-origin:top;transition:opacity .14s ease,transform .14s ease,max-height .16s ease;pointer-events:none}.dd.open .dd-menu{max-height:336px;overflow-y:auto;opacity:1;transform:scaleY(1);pointer-events:auto}.dd-menu::-webkit-scrollbar{width:8px}.dd-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.dd-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;cursor:pointer;color:var(--muted);transition:background .1s,color .1s}.dd-option:hover{background:var(--surface-hover);color:var(--text)}.dd-option.current{color:var(--text);background:#2d7dff1f}.dd-num{flex:0 0 auto;font:700 11px ui-monospace,monospace;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:1px 5px}.dd-option.current .dd-num{color:#6ea8ff;border-color:#2d7dff66}.dd-text{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tb-switch{display:inline-flex;align-items:center;gap:9px;padding:0 8px;font-size:13px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.tb-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.tb-track{position:relative;width:36px;height:20px;flex:0 0 auto;border-radius:999px;background:var(--bg);border:1px solid var(--border);transition:background .2s,border-color .2s}.tb-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .2s cubic-bezier(.4,1.4,.5,1),background .2s,box-shadow .2s}.tb-switch input:checked+.tb-track{background:#2d7dff38;border-color:var(--accent)}.tb-switch input:checked+.tb-track .tb-knob{transform:translate(16px);background:var(--accent);box-shadow:0 0 9px #2d7dffa6}.tb-switch input:focus-visible+.tb-track{outline:2px solid var(--accent);outline-offset:2px}.tb-switch-label{color:var(--muted);transition:color .2s}.tb-switch input:checked~.tb-switch-label{color:var(--text)}.tb-count{display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 10px;min-width:96px;font:600 12px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.01em}.tb-count:before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--border);transition:background .25s,box-shadow .25s}.tb-count.active{color:var(--text)}.tb-count.active:before{background:var(--accent);box-shadow:0 0 0 3px #2d7dff29;animation:count-pulse 2.4s ease-in-out infinite}.tb-count.loading:before{background:var(--muted);animation:count-blink 1s ease-in-out infinite}@keyframes count-pulse{50%{box-shadow:0 0 0 6px #2d7dff00}}@keyframes count-blink{50%{opacity:.25}}.viewer{display:flex;align-items:center;justify-content:center;gap:12px}.nav{flex:0 0 auto;width:42px;height:64px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:24px;line-height:1;cursor:pointer;transition:background .12s,border-color .12s}.nav:hover{background:var(--accent);border-color:var(--accent);color:#fff}.stage{position:relative;display:inline-block;line-height:0;border:1px solid var(--border)}.stage img{display:block;max-width:100%;max-height:78vh}.stage.drop{outline:2px dashed var(--accent);outline-offset:-2px}.clear-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;border:none;border-radius:50%;background:#0e0f11d1;color:#fff;font-size:15px;line-height:30px;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.clear-btn:hover{background:#ff2d55}.panel-box{position:absolute;border:3px solid;pointer-events:none}.panel-badge{position:absolute;top:3px;left:4px;font:700 12px ui-monospace,monospace;color:#fff;padding:1px 5px;border-radius:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.attribution{margin:12px auto 0;max-width:680px;padding:8px 12px;font-size:13px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;color:var(--text)}.attribution a{color:#6ea8ff;text-decoration:underline}.attribution strong{color:#39ff14;font-weight:600}.hint{color:var(--muted);font-size:13px;margin:12px auto 0;max-width:680px;line-height:1.5}