:root{--cyan:#2ef2ff;--magenta:#ff3fd8;--red:#ff4d6a;--amber:#ffb547;--bg:#06060c;--surface:#0e0e1a;--surface-glass:#0e0e1ae6;--line:#a0aaff24;--text:#e6e9ff;--text-dim:#9097bd;--cyan-soft:#2ef2ff24;--magenta-soft:#ff3fd829;--glow-cyan:0 0 18px #2ef2ff59;--glow-magenta:0 0 22px #ff3fd873;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;--radius:12px;font-family:var(--font-ui);color:var(--text);background:var(--bg);color-scheme:dark;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(ellipse 80% 50% at 50% 0%, #2ef2ff12, transparent), radial-gradient(ellipse 80% 50% at 50% 100%, #ff3fd814, transparent), var(--bg)}button,input,select,a{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}:disabled{opacity:.4;cursor:not-allowed}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}svg{fill:currentColor}#app{flex-direction:column;display:flex;position:fixed;inset:0}header{padding:max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));border-bottom:1px solid var(--line);align-items:center;gap:10px;display:flex}h1{min-width:0;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;flex:1;align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}h1 span{text-overflow:ellipsis;overflow:hidden}h1 svg{filter:drop-shadow(0 0 6px #2ef2ff99);flex:none;width:26px;height:26px}.family-trigger,.detection-button,.menu-button{background-color:var(--surface);border:1px solid var(--line);border-radius:10px;height:40px;transition:border-color .15s,box-shadow .15s}.family-trigger:not(:disabled):hover,.family-trigger[aria-expanded=true],.detection-button:not(:disabled):hover,.detection-button:has(+:popover-open),.menu-button:hover,.menu-button:has(+:popover-open){box-shadow:var(--glow-cyan);border-color:#2ef2ff80}.detection{min-width:0;display:flex}.detection .family-trigger{border-radius:10px 0 0 10px}.detection-button{width:40px;color:var(--cyan);border-radius:0 10px 10px 0;flex:none;justify-content:center;align-items:center;margin-left:-1px;display:flex}.detection>button{position:relative}.detection>:hover,.detection>[aria-expanded=true],.detection-button:has(+:popover-open){z-index:1}.detection-button svg{width:20px;height:20px}.warning-badge{width:17px;height:17px;color:var(--bg);background:var(--amber);border:2px solid var(--bg);border-radius:50%;place-items:center;font-size:12px;font-weight:800;line-height:1;display:grid;position:absolute;top:-6px;right:-6px;box-shadow:0 0 10px #ffb547b3}.family-trigger{min-width:0;font-family:var(--font-mono);white-space:nowrap;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ef2ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:16px;align-items:center;gap:8px;padding:0 34px 0 8px;font-size:13px;display:flex}.family-trigger .name{text-overflow:ellipsis;overflow:hidden}.family-trigger .count{color:var(--text-dim)}.tag-glyph{flex:none;width:24px;height:24px}.tag-glyph .dark{fill:#000}.tag-glyph .light{fill:#eef0ff}#family-list{color:var(--text);background:var(--surface-glass);backdrop-filter:blur(16px)saturate(140%);border:1px solid var(--line);border-radius:var(--radius);margin:0;padding:6px;position:fixed;inset:auto;overflow-y:auto;box-shadow:0 12px 40px #0009,0 0 0 1px #2ef2ff14}[role=option]{font-family:var(--font-mono);cursor:pointer;border-radius:8px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:8px 12px 8px 8px;font-size:14px;display:grid}[role=option] .tag-glyph{background:#ffffff0a;border-radius:6px;width:40px;height:40px;padding:3px}[role=option] .count{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px}[role=option].active{background:var(--cyan-soft)}[role=option][aria-selected=true] .name{color:var(--cyan);font-weight:600}[role=option][aria-selected=true] .tag-glyph{box-shadow:inset 0 0 0 1px #2ef2ff99}[role=option][aria-selected=true] .tag-glyph .light{fill:var(--cyan)}.menu-button{width:40px;color:var(--cyan);flex:none;justify-content:center;align-items:center;display:flex}.menu-button svg{width:20px;height:20px}#menu{position-area:bottom span-left;min-width:220px;color:var(--text);background:var(--surface-glass);backdrop-filter:blur(16px)saturate(140%);border:1px solid var(--line);border-radius:var(--radius);margin:6px 0 0;padding:6px;inset:auto;box-shadow:0 12px 40px #0009,0 0 0 1px #2ef2ff14}@supports not (position-area:bottom){#menu{top:calc(max(10px, env(safe-area-inset-top)) + 46px);right:12px}}#menu>*{text-align:left;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:11px 12px;font-size:15px;text-decoration:none;display:flex}#menu>[role=separator]{background:var(--line);width:auto;height:1px;margin:4px 12px;padding:0}#menu>:not(:disabled):hover{background:var(--cyan-soft)}#menu kbd{font-family:var(--font-mono);color:var(--text-dim);border:1px solid var(--line);border-radius:4px;margin-left:auto;padding:1px 6px;font-size:12px}@media (hover:none),(pointer:coarse){#menu kbd{display:none}}a[target=_blank]:after{content:"↗";content:"↗" / "(opens in a new tab)";color:var(--text-dim)}#about a[target=_blank]:after{margin-left:2px;font-size:.85em;display:inline-block}input[role=switch]{background:radial-gradient(circle at 10px 50%, var(--text-dim) 6px, transparent 7px), #ffffff1a;border-radius:10px;flex:none;width:36px;height:20px;transition:background .2s,box-shadow .2s}input[role=switch]:checked{background:radial-gradient(circle at 26px 50%, #fff 6px, transparent 7px), var(--magenta);box-shadow:var(--glow-magenta)}main{margin:0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);background:#000;flex:1;position:relative;overflow:hidden}main:after{content:"";pointer-events:none;--c:#2ef2ffb3;--l:22px;--w:2px;background:linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l), linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l), linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l), linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);filter:drop-shadow(0 0 4px #2ef2ffcc);background-repeat:no-repeat;position:absolute;inset:10px}main:has(.results):after{display:none}video,canvas{width:100%;height:100%;position:absolute}video{object-fit:contain}main.cover video{object-fit:cover}canvas{touch-action:none}canvas.zoomed{cursor:grab}canvas.zoomed:active{cursor:grabbing}.zoom-controls{background:var(--surface);border:1px solid var(--line);border-radius:999px;flex-direction:column;display:flex;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.zoom-controls button{width:40px;height:40px;font-family:var(--font-mono);border-radius:999px;place-items:center;font-size:12px;font-weight:600;display:grid}.zoom-controls button:not(:disabled):hover{color:var(--cyan)}.zoom-controls [aria-pressed=true]{color:var(--amber);filter:drop-shadow(0 0 6px #ffb547cc)}.zoom-controls button:disabled{opacity:1;color:var(--text-dim)}.zoom-controls svg{width:18px;height:18px}canvas.still{background:#000}.notices{justify-items:center;gap:8px;display:grid;position:absolute;top:16px;left:16px;right:16px}.find{background:var(--surface-glass);backdrop-filter:blur(12px);width:min(34rem,100%);box-shadow:var(--glow-cyan);border:1px solid #2ef2ff73;border-radius:999px;align-items:center;gap:4px;padding:4px 4px 4px 14px;display:flex}.find:has([aria-invalid=true]){box-shadow:none;border-color:#ff4d6a99}.find input{min-width:0;font-family:var(--font-mono);background:0 0;border:none;outline:none;flex:1;padding:6px 0;font-size:16px}.find input::placeholder{color:var(--text-dim)}.find button{color:var(--text-dim);border-radius:50%;padding:8px;display:flex}.find button:hover{color:var(--text);background:var(--cyan-soft)}.find svg{width:18px;height:18px}.notices p{background:var(--surface-glass);backdrop-filter:blur(12px);border:1px solid;border-radius:10px;align-items:center;gap:10px;max-width:34rem;padding:10px 16px;font-size:14px;font-weight:500;line-height:1.4;display:flex}.notices p:before{content:"";background:currentColor;border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 10px}[role=status]{color:var(--amber);border-color:#ffb54773}[role=status]:empty{display:none}[role=alert]{color:var(--red);border-color:#ff4d6a8c;box-shadow:0 0 24px #ff4d6a4d}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.results{text-align:center;background:radial-gradient(ellipse 60% 35% at 50% 45%, #2ef2ff1a, transparent), var(--surface);flex-direction:column;justify-content:safe center;align-items:center;gap:6px;padding:32px 20px 24px;display:flex;position:absolute;inset:0;overflow-y:auto}.results h2{font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;font-size:13px;font-weight:600}.results .count{font-family:var(--font-mono);color:var(--cyan);text-shadow:0 0 24px #2ef2ff8c;font-size:64px;font-weight:700;line-height:1.1;display:block}.results p{color:var(--text-dim)}.results ul{flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin-top:20px;list-style:none;display:flex}.results li{min-width:44px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--cyan);background:var(--cyan-soft);border:1px solid #2ef2ff59;border-radius:8px;padding:8px 14px;font-size:15px;font-weight:600}.results .actions{margin-top:32px}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.actions button{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:600;transition:border-color .15s,box-shadow .15s;display:flex}.actions button:hover{box-shadow:var(--glow-cyan);border-color:#2ef2ff80}.actions .primary{color:var(--bg);background:var(--cyan);border-color:var(--cyan)}.actions svg{width:18px;height:18px}.empty{text-align:center;background:var(--surface);flex-direction:column;justify-content:safe center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.empty>svg{width:48px;height:48px;color:var(--text-dim)}.empty h2{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:15px}.empty p{max-width:26rem;color:var(--text-dim);font-size:15px;line-height:1.5}.empty .actions{margin-top:12px}.starting{flex-direction:column;align-items:center;gap:16px;display:flex}.starting:before{content:"";border:2px solid var(--cyan-soft);border-top-color:var(--cyan);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}footer{padding:10px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.modes{grid-column:1/-1;justify-self:center;gap:4px;margin-bottom:12px;display:flex}.modes label{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;padding:4px 12px 8px;font-size:12px;font-weight:600;transition:color .15s;position:relative}.modes input{opacity:0;cursor:inherit;margin:0;position:absolute;inset:0}.modes label:has(:checked){color:var(--cyan);text-shadow:0 0 10px #2ef2ff99}.modes label:has(:checked):after{content:"";background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.modes label:has(:disabled){cursor:not-allowed}.modes label:has(:disabled:not(:checked)){opacity:.4}.modes label:has(:focus-visible){outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}.readout{color:var(--text-dim);grid-area:2/1;justify-self:start;font-size:14px;line-height:1.3}.readout b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);margin-right:2px;font-size:22px;font-weight:600}.readout small{font-size:12px;display:block}.capture{width:72px;height:72px;color:var(--bg);border:2px solid var(--magenta);box-shadow:var(--glow-magenta);border-radius:50%;grid-area:2/2;justify-content:center;align-items:center;padding:5px;transition:transform .1s,box-shadow .2s;display:flex;position:relative}.capture:before{content:"";background:radial-gradient(circle at 35% 30%, #ff8eea, var(--magenta) 70%);border-radius:50%;width:58px;height:58px;transition:background .2s,border-radius .2s;position:absolute}.capture:not(:disabled):active{transform:scale(.94)}.capture:disabled{box-shadow:none}.capture svg{width:26px;height:26px;position:relative}.capture[data-collect]{border-color:var(--red);box-shadow:0 0 22px #ff4d6a80}.capture[data-collect]:before{background:radial-gradient(circle at 35% 30%, #ff94a6, var(--red) 70%)}.capture[data-collect] svg{display:none}.capture[data-state=collecting]{border-color:var(--red);animation:1.6s ease-in-out infinite collecting}.capture[data-state=collecting]:before{background:var(--red);border-radius:6px;width:28px;height:28px}.capture[data-state=collecting] svg{display:none}.capture:has(span){border-radius:999px;gap:8px;width:auto;padding:0 26px 0 22px;font-weight:700}.capture:has(span):before{border-radius:999px;width:auto;height:auto;inset:5px}.capture span{white-space:nowrap;position:relative}.capture:has(span) svg{width:20px;height:20px}@keyframes collecting{50%{box-shadow:0 0 34px #ff4d6acc}}.view-button{width:44px;height:44px;color:var(--text-dim);border:1px solid var(--line);border-radius:50%;grid-area:2/3;justify-content:center;justify-self:end;align-items:center;transition:color .15s,border-color .15s,box-shadow .15s;display:flex}.view-button:hover,.view-button:has(+:popover-open){color:var(--cyan);box-shadow:var(--glow-cyan);border-color:#2ef2ff80}.view-button svg{width:22px;height:22px}.panel{width:min(320px,100vw - 24px);color:var(--text);background:var(--surface-glass);backdrop-filter:blur(16px)saturate(140%);border:1px solid var(--line);border-radius:var(--radius);padding:18px;inset:auto;box-shadow:0 12px 40px #0009,0 0 0 1px #2ef2ff14}.panel:popover-open{gap:18px;display:grid}#view-options{position-area:top span-left;margin:0 0 10px}#detection-settings{position-area:bottom span-left;margin:6px 0 0}@supports not (position-area:top){#view-options{right:12px;bottom:calc(max(16px, env(safe-area-inset-bottom)) + 84px)}#detection-settings{top:calc(max(10px, env(safe-area-inset-top)) + 46px);right:12px}}.panel h2{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-size:12px;font-weight:600}.option{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;font-size:15px;display:flex}.option small,.panel .hint{color:var(--text-dim);margin-top:2px;font-size:12px;display:block}input[role=switch]{appearance:none;cursor:pointer;margin:0}.panel fieldset{border:none}.panel legend{margin-bottom:8px;font-size:15px}.segmented{background:#ffffff0f;border-radius:10px;grid-template-columns:repeat(4,1fr);padding:3px;display:grid}.segmented label{text-align:center;color:var(--text-dim);cursor:pointer;border-radius:7px;padding:7px 0;font-size:13px;transition:color .15s,background .15s;position:relative}.segmented label:hover{color:var(--text)}.segmented input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.segmented label:has(:checked){color:var(--bg);background:var(--cyan);box-shadow:var(--glow-cyan);font-weight:600}.segmented label:has(:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}.panel .hint{margin:-4px 0 0}.panel .warning{color:var(--amber);background:#ffb5471a;border:1px solid #ffb54759;border-radius:8px;margin:-8px 0 0;padding:8px 10px;font-size:12px;line-height:1.4}.hint .tap{display:none}@media (hover:none){.hint .hover{display:none}.hint .tap{display:inline}}@media (width<=480px){header{gap:8px}h1{flex:none}h1 span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}h1 svg{width:22px;height:22px}.detection{flex:1}.family-trigger{flex:1;font-size:12px}.family-trigger .count{display:none}}@media (orientation:landscape) and (height<=540px){#app{grid-template:"header footer""main footer"1fr/1fr auto;display:grid}header{padding-top:max(6px, env(safe-area-inset-top));grid-area:header;padding-bottom:6px;padding-right:8px}main{margin:0 0 max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));grid-area:main}footer{padding:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) 12px;grid-template:auto 1fr auto auto 1fr auto/auto;grid-area:footer;justify-items:center}.view-button{grid-area:1/1;justify-self:center}.modes{flex-direction:column;grid-area:3/1;align-items:center;gap:2px}.modes label{padding:6px 14px}.modes label:has(:checked):after{bottom:50%;left:2px;transform:translateY(50%)}.capture{grid-area:4/1}.capture:has(span){border-radius:50%;width:72px;padding:5px}.capture:has(span):before{border-radius:50%;width:58px;height:58px;inset:auto}.capture span{color:var(--text);font-size:12px;font-weight:600;position:absolute;top:calc(100% + 8px)}.readout{text-align:center;grid-area:6/1;justify-self:center}#view-options{position-area:left span-bottom;margin:0 10px 0 0}.results .count{font-size:48px}}@supports not (position-area:left){@media (orientation:landscape) and (height<=540px){#view-options{top:12px;bottom:auto;right:110px}}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}#about{width:min(34rem,100% - 32px);max-height:calc(100% - 32px);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:auto;padding:28px;line-height:1.6;position:fixed;inset:0;overflow-y:auto;box-shadow:0 24px 80px #000000b3,0 0 0 1px #2ef2ff1a,0 -1px #2ef2ff80}#about::backdrop{backdrop-filter:blur(6px);background:#0009}#about h2{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 14px #2ef2ff80;margin:0 40px 16px 0;font-size:15px}#about :is(p,ul){color:var(--text-dim);margin-bottom:14px;font-size:15px}#about>:last-child{margin-bottom:0}#about ul{padding-left:20px}#about li::marker{color:var(--magenta)}#about li+li{margin-top:4px}#about a{color:var(--cyan);text-underline-offset:3px;text-decoration-color:#2ef2ff66}#about a:hover{text-decoration-color:currentColor}#about .close{width:36px;height:36px;color:var(--text-dim);border-radius:50%;font-size:22px;line-height:1;position:absolute;top:18px;right:18px}#about .close:hover{color:var(--text);background:#ffffff14}