:root{--fg: #ffffff;--fg-dim: rgba(255, 255, 255, .62);--fg-faint: rgba(255, 255, 255, .42);--hairline: rgba(255, 255, 255, .14);--plate: rgba(18, 18, 20, .58);--glass: rgba(30, 30, 34, .62);--soft: rgba(255, 255, 255, .08);--accent: #ffffff;--accent-fg: #000000;--danger: #ff6b6b;--radius: 24px;--dur: .22s;--ease: cubic-bezier(.2, .8, .2, 1);--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#000;color:var(--fg);font-family:var(--font);overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}[hidden]{display:none!important}#app{position:fixed;top:0;right:0;bottom:0;left:0}.plate{background:var(--plate);border:1px solid var(--hairline)}.glass{background:var(--glass);border:1px solid var(--hairline);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%)}.soft{background:var(--soft);border:1px solid var(--hairline)}#video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;background:#000}#video.mirrored{transform:scaleX(-1)}#tap-layer{position:absolute;top:0;right:0;bottom:0;left:0}#reticle{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid rgba(255,255,255,.9);pointer-events:none}#reticle:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#ffffffe6}#live{position:absolute;left:50%;top:calc(50% + 48px);transform:translate(-50%) scale(1);transition:transform var(--dur) var(--ease);display:flex;align-items:center;gap:12px;padding-block:10px;padding-inline:10px 18px;border-radius:var(--radius);max-width:calc(100vw - 32px);pointer-events:none}#live.pulse{transform:translate(-50%) scale(1.1)}@media(max-height:700px){#live{top:auto;bottom:calc(50% + 48px)}}.live-text,.detail-text{display:flex;flex-direction:column;min-width:0}#live-name{font-size:24px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#live-hex{direction:ltr;unicode-bidi:isolate;font-size:14px;color:var(--fg-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em}[dir=rtl] #live-hex{text-align:right}.swatch{flex:none;width:40px;height:40px;border-radius:50%;background:#444;border:1px solid var(--hairline)}.swatch.big{width:48px;height:48px}#bottom{position:absolute;left:0;right:0;bottom:0;padding:0 0 calc(10px + var(--safe-b));display:flex;flex-direction:column;gap:10px;pointer-events:none}#bottom>*{pointer-events:auto}#utility{display:flex;align-items:center;gap:8px;padding:0 16px}.grow{flex:1}.pill{min-height:48px;padding:0 20px;border-radius:999px;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;gap:8px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}.pill:active{transform:scale(.96)}.pill.accent{background:var(--accent);color:var(--accent-fg);border:1px solid transparent}.pill.compact{min-height:38px;padding:0 14px;font-size:14px}.pill.wide{flex:1}.pill.danger{color:var(--danger)}.pill.danger-fill{background:var(--danger);color:#000}.pill:disabled{opacity:.35;pointer-events:none}.icon-btn{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}.icon-btn.small{width:40px;height:40px}.icon-btn:active{transform:scale(.92)}.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}.icon-btn.small svg{width:19px;height:19px}#ribbon{display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding:12px 16px 2px;margin-top:-12px;scrollbar-width:none}#ribbon::-webkit-scrollbar{display:none}#ribbon:empty{display:none}.chip{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline);touch-action:pan-x;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}.chip.dragging{transition:none}.chip.selected{outline:2px solid #fff;outline-offset:3px}.chip.new{animation:drop var(--dur) var(--ease)}@keyframes drop{0%{transform:translateY(-24px) scale(.5);opacity:0}}#hint{margin:0;text-align:center;font-size:13px;color:var(--fg-dim);pointer-events:none}#shutter-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px}#library-btn{justify-self:start}#flip-btn{justify-self:end}.shutter-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}#shutter{width:72px;height:72px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center}#shutter span{width:56px;height:56px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease)}#shutter:active span{transform:scale(.86)}#shutter.snap span{animation:snap var(--dur) var(--ease)}@keyframes snap{40%{transform:scale(.82);opacity:.75}}#mode-btn{min-height:24px;padding:2px 10px;font-size:12px;font-weight:500;color:var(--fg-dim);letter-spacing:.02em}#mode-btn.sheet{color:#fff}.thumb{width:52px;height:52px;border-radius:16px;padding:4px;transition:transform var(--dur) var(--ease)}.thumb:active{transform:scale(.92)}#library-thumb{display:block;width:100%;height:100%;border-radius:11px;background:transparent;border:1px dashed var(--hairline)}#library-thumb.filled{border:0}#detail{margin:0 16px;display:flex;align-items:center;gap:14px;padding-block:10px;padding-inline:10px 16px;border-radius:var(--radius)}#detail-name{font-size:19px;font-weight:700}#detail-meta{font-size:14px;color:var(--fg-dim);font-variant-numeric:tabular-nums}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(24px + var(--safe-t)) 16px calc(16px + var(--safe-b));gap:12px}.overlay.solid{background:#0b0b0b}.overlay.dim{background:#00000073}.overlay-title{position:absolute;top:calc(18% + var(--safe-t));left:16px;right:16px;margin:0;text-align:center;font-size:22px;font-weight:700;line-height:1.3;white-space:pre-line;z-index:1}.overlay-actions{display:flex;gap:10px;width:100%;justify-content:center}.overlay-actions .pill{flex:1;padding:0 12px}.sheet-host{opacity:0;transition:opacity var(--dur) var(--ease)}.sheet-host.open{opacity:1}.sheet-host .sheet{transform:translateY(40px);transition:transform var(--dur) var(--ease)}.sheet-host.open .sheet{transform:none}.sheet{width:100%;max-width:520px;max-height:72vh;border-radius:var(--radius);padding:20px 16px 16px;display:flex;flex-direction:column;gap:12px}#library.overlay{padding-bottom:0}.sheet.full{height:100%;max-height:none;padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}.sheet-host .sheet.full{transform:translateY(100%)}.sheet-host.open .sheet.full{transform:none}.sheet-title{margin:0;font-size:21px;font-weight:700;text-align:center}.sheet-text{margin:0;font-size:16px;line-height:1.45;text-align:center;color:var(--fg-dim)}.dim-text{font-size:14px}.donate-heart{width:44px;height:44px;margin:4px auto 0;fill:#ff6b7a}a.pill{text-decoration:none}#lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;min-height:0}.lang-item{min-height:46px;padding:0 14px;border-radius:14px;font-size:16px;text-align:start;background:var(--soft);border:1px solid transparent}.lang-item.active{background:#fff;color:#000;font-weight:600}.lib-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.lib-head h2{margin:0;font-size:26px;font-weight:700}#library-count{font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums}.lib-actions{display:flex;gap:8px;flex-wrap:wrap}.lib-actions .pill{padding:0 12px}#library-list{flex:1;min-height:0;overflow-y:auto;margin:0 -16px;padding:0 8px calc(16px + var(--safe-b));-webkit-overflow-scrolling:touch}#library-empty{flex:1;margin:0;display:grid;place-items:center;text-align:center;color:var(--fg-dim);font-size:16px}.lib-date{margin:18px 8px 6px;font-size:13px;font-weight:600;color:var(--fg-faint);letter-spacing:.02em}.lib-date:first-child{margin-top:4px}.lib-row{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:8px;border-radius:16px;text-align:start;transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}.lib-row:active,.lib-row.pressed{background:var(--soft)}.lib-row.pressed{transform:scale(.98)}.lib-square{width:44px;height:44px;border-radius:12px;border:1px solid var(--hairline)}.lib-text{display:flex;flex-direction:column;min-width:0}.lib-name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-hex,.lib-time{font-size:13px;color:var(--fg-dim);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}[dir=rtl] .lib-hex{text-align:right}#row-menu{position:absolute;z-index:5;border-radius:16px;padding:4px;min-width:160px;animation:pop var(--dur) var(--ease)}#row-menu button{width:100%;min-height:44px;padding:0 16px;border-radius:12px;text-align:start;font-size:16px;font-weight:600;color:var(--danger)}#row-menu button:active{background:var(--soft)}@keyframes pop{0%{opacity:0;transform:scale(.94)}}.dialog-host{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:grid;place-items:center;padding:24px;background:#0006}.dialog{width:100%;max-width:340px;border-radius:var(--radius);padding:20px 16px 16px;animation:pop var(--dur) var(--ease)}.dialog p{margin:0 0 16px;font-size:17px;line-height:1.4;text-align:center}#toast{position:absolute;z-index:20;left:50%;top:calc(16px + var(--safe-t));max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:#121214db;border:1px solid var(--hairline);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}#toast.show{opacity:1;transform:translate(-50%)}#calib-frame{position:absolute;left:50%;top:50%;width:min(60vw,280px);height:min(60vw,280px);transform:translate(-50%,-50%);border-radius:var(--radius);border:2px solid #fff;box-shadow:0 0 0 200vmax #0000009e}#palette-img{flex:1;min-height:0;max-width:100%;object-fit:contain;border-radius:16px}.error-box{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;max-width:340px}.error-icon{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;border:3px solid rgba(255,255,255,.35);position:relative}.error-icon:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:3px;height:88px;background:#ffffff59;transform:rotate(45deg)}.error-box h1{font-size:26px;margin:0 0 12px}.error-box p{font-size:17px;line-height:1.45;color:var(--fg-dim);margin:0;white-space:pre-line}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}#live.pulse{transform:translate(-50%)}}