:root{--bg: #050807;--surface: #0b120e;--surface-raised: #101a14;--text: #c8ffd4;--text-dim: #6fae84;--accent: #39ff88;--accent-dim: #1d7a48;--danger: #ff4d4d;--glass: rgb(8 13 11 / .5);--glass-blur: 8px;--glass-line: rgb(214 236 222 / .14);--glass-line-strong: rgb(214 236 222 / .32);--ink: #06100b;--font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", "Courier New", monospace;--text-base: clamp(.95rem, .9rem + .3vw, 1.05rem);--target: 64px;--target-small: 44px;--rec: 76px;--radius: 16px;--duration-fast: .12s;--duration: .22s;--ease-out: cubic-bezier(.16, 1, .3, 1)}body[data-tint=amber]{--text: #ffd9a0;--text-dim: #b48a4a;--accent: #ffb347;--accent-dim: #8a5a1c}body[data-tint=white]{--text: #eef2f0;--text-dim: #8f9a95;--accent: #ffffff;--accent-dim: #6b7772}body[data-tint=blue]{--text: #c6e4ff;--text-dim: #6f95b8;--accent: #5fb8ff;--accent-dim: #1d5a8a}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:var(--text-base);overscroll-behavior:none}button,select,input,label{touch-action:manipulation;font-family:inherit}button{-webkit-user-select:none;user-select:none}#app{min-height:100dvh;display:flex;flex-direction:column}#landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center}.eyebrow{margin:0;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)}#landing-title{margin:0;font-size:clamp(2rem,1rem + 6vw,4rem);font-weight:700;letter-spacing:.18em;color:var(--accent);text-shadow:0 0 28px color-mix(in oklab,var(--accent) 45%,transparent)}.tagline{margin:0;color:var(--text-dim)}.landing-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem}#start-btn,.ghost{min-height:52px;padding:.7em 1.8em;font-size:1rem;border-radius:999px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}#start-btn{background:var(--accent);color:var(--ink);border:1px solid var(--accent);font-weight:700}#start-btn:hover{box-shadow:0 0 24px color-mix(in oklab,var(--accent) 45%,transparent)}#start-btn:active{transform:translateY(1px)}.ghost{background:transparent;color:var(--text);border:1px solid var(--glass-line-strong)}.ghost:hover{border-color:var(--accent);color:var(--accent)}.ghost:active{background:var(--surface-raised)}#start-btn:focus-visible,.ghost:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.privacy-note{max-width:40ch;margin:.25rem 0 0;color:var(--text-dim);font-size:.8rem;line-height:1.5}#viewer{flex:1;display:grid;place-items:center;overflow:hidden;background:var(--bg);cursor:default}#ascii-output{margin:0;font-family:var(--font-mono);font-size:8px;line-height:.8;letter-spacing:0;white-space:pre;user-select:text;color:var(--text)}#ascii-output.mirrored{transform:scaleX(-1)}#scan-me{display:none}@media(min-width:900px)and (pointer:fine){#app[data-state=landing] #scan-me{display:grid;justify-items:center;gap:.4rem;position:fixed;right:1rem;bottom:1rem;margin:0;padding:.5rem;border:1px solid var(--glass-line);border-radius:10px;background:var(--glass)}#scan-me figcaption{font-size:.7rem;color:var(--text-dim)}}#error-banner{position:fixed;z-index:70;top:calc(4.2rem + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);max-width:min(520px,calc(100vw - 2rem));padding:.8rem 1.1rem;background:var(--glass);border:1px solid var(--danger);border-radius:12px;color:var(--text);font-size:.85rem;line-height:1.45;backdrop-filter:blur(10px)}#controls{position:fixed;inset:0;z-index:40;pointer-events:none}#controls>*{pointer-events:auto}#controls[data-drop=true]:after{content:"Drop the video to convert it";position:absolute;inset:16px;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:24px;background:#050807b3;color:var(--accent);font-size:1.2rem;letter-spacing:.08em;pointer-events:none}#ascii-hand-cursor{position:fixed;z-index:100;pointer-events:none;width:12px;height:12px;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;background:#f2fff6;box-shadow:0 0 0 1px #06100bb3,0 0 14px #ffffff80}#ascii-hand-cursor:after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--accent) calc(var(--progress, 0) * 360deg),rgb(255 255 255 / .18) 0);mask:radial-gradient(transparent 13px,#000 14px);transition:width var(--duration-fast),height var(--duration-fast)}#ascii-hand-cursor[data-pose=thumbs]:after{background:conic-gradient(var(--danger) calc(var(--progress, 0) * 360deg),rgb(255 255 255 / .18) 0)}#ascii-hand-cursor[data-pinch=true]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px #06100bb3,0 0 18px var(--accent)}#ascii-hand-cursor[data-pinch=true]:after{width:24px;height:24px;background:var(--accent);mask:radial-gradient(transparent 8px,#000 9px)}#gesture-hint{position:fixed;top:calc(.9rem + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);display:flex;gap:1.4rem;margin:0;padding:.55rem 1.1rem;max-width:calc(100vw - 2rem);background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;color:var(--text-dim);font-size:.78rem;white-space:nowrap;backdrop-filter:blur(var(--glass-blur));animation:rise var(--duration) var(--ease-out)}#gesture-hint b{color:var(--accent);font-weight:700;margin-right:.4em;letter-spacing:.06em;text-transform:uppercase}#rec-pill{position:fixed;z-index:60;top:calc(.9rem + env(safe-area-inset-top,0px));left:calc(.9rem + env(safe-area-inset-left,0px));display:inline-flex;align-items:center;gap:.6rem;min-height:var(--target-small);padding:0 1rem 0 .8rem;background:var(--glass);border:1px solid var(--danger);border-radius:999px;color:#fff;font-size:.85rem;font-variant-numeric:tabular-nums;cursor:pointer;backdrop-filter:blur(var(--glass-blur));box-shadow:0 0 22px #ff4d4d40}#rec-pill small{color:var(--text-dim);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}#rec-pill:hover,#rec-pill[data-hover=true]{border-color:#fff}#rec-pill:active{transform:translateY(1px)}#rec-pill[data-state=paused] .rec-dot,#rec-pill[data-state=finishing] .rec-dot{animation:none;opacity:.5}.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);animation:pulse 1.1s ease-in-out infinite}#tracker-status{position:fixed;z-index:55;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));left:calc(.9rem + env(safe-area-inset-left,0px));max-width:min(360px,calc(100vw - 2rem));padding:.5rem .85rem;background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;color:var(--text-dim);font-size:.75rem;line-height:1.4;pointer-events:none}#toast{position:fixed;z-index:65;left:50%;bottom:calc(7.4rem + env(safe-area-inset-bottom,0px));transform:translate(-50%);padding:.6rem 1rem;background:var(--accent);color:var(--ink);border-radius:999px;font-size:.85rem;font-weight:700;pointer-events:none;animation:rise var(--duration) var(--ease-out)}#snap-flash{position:fixed;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none}#snap-flash.on{animation:flash .42s ease-out}#countdown{position:fixed;inset:0;z-index:80;display:grid;place-content:center;justify-items:center;gap:1rem;background:#05080759}.count-dial{position:relative;display:grid;place-items:center;width:min(60vw,300px);aspect-ratio:1}#countdown .count-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--danger) var(--sweep, 0%),rgb(255 255 255 / .1) 0);mask:radial-gradient(transparent calc(50% - 8px),#000 calc(50% - 7px));animation:sweep 1s linear}#countdown[data-count="2"] .count-ring{animation-name:sweep2}#countdown[data-count="1"] .count-ring{animation-name:sweep3}#count-num{font-size:min(34vw,170px);font-weight:700;line-height:1;color:#fff;text-shadow:0 0 40px rgb(255 77 77 / .6);font-variant-numeric:tabular-nums}#countdown p{margin:0;color:var(--text);font-size:.95rem;letter-spacing:.06em}#dock-group{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}#dock-group>*{pointer-events:auto}#dock{display:flex;align-items:center;gap:6px;padding:8px;background:var(--glass);border:1px solid var(--glass-line);border-radius:24px;backdrop-filter:blur(var(--glass-blur));box-shadow:0 18px 50px #0000008c;animation:rise var(--duration) var(--ease-out)}.dock-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:var(--target);height:var(--target);padding:0;background:transparent;color:var(--text);border:1px solid transparent;border-radius:18px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.dock-btn svg{width:24px;height:24px;fill:currentColor}.dock-btn span{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.dock-btn:hover,.dock-btn[data-hover=true],.dock-btn:focus-visible{border-color:var(--glass-line-strong);background:#ffffff0f;color:var(--accent);outline:none}.dock-btn:hover span,.dock-btn[data-hover=true] span{color:var(--text)}.dock-btn:active{transform:scale(.96);background:#ffffff1a}.dock-btn[aria-expanded=true],.dock-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.dock-btn:disabled{opacity:.4;cursor:default}.dock-btn.dock-small{width:var(--target-small);height:var(--target);border-radius:14px}.dock-btn.dock-small svg{width:20px;height:20px}.dock-rec{position:relative;width:var(--rec);height:var(--rec);margin:0 6px;padding:0;background:transparent;border:4px solid rgb(255 255 255 / .85);border-radius:50%;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.dock-rec .rec-core{position:absolute;inset:6px;border-radius:50%;background:var(--danger);transition:inset var(--duration) var(--ease-out),border-radius var(--duration) var(--ease-out),background var(--duration-fast) var(--ease-out)}.dock-rec:hover,.dock-rec[data-hover=true],.dock-rec:focus-visible{border-color:#fff;box-shadow:0 0 0 4px #ff4d4d40,0 0 26px #ff4d4d59;outline:none}.dock-rec:active{transform:scale(.95)}.dock-rec[data-state=countdown] .rec-core{background:#fff;inset:12px}.dock-rec[data-state=recording] .rec-core,.dock-rec[data-state=paused] .rec-core,.dock-rec[data-state=finishing] .rec-core{inset:20px;border-radius:6px}.dock-rec[data-state=recording]{border-color:var(--danger);animation:pulse-ring 1.1s ease-in-out infinite}.dock-rec[data-state=finishing]{opacity:.6}.sheet{display:flex;flex-direction:column;width:min(660px,100%);max-height:calc(100dvh - 200px - env(safe-area-inset-bottom,0px));background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);backdrop-filter:blur(var(--glass-blur));box-shadow:0 18px 50px #0000008c;animation:rise var(--duration) var(--ease-out)}.sheet header{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--glass-line)}.sheet{text-shadow:0 1px 6px rgb(0 0 0 / .7)}.sheet h2{margin:0 auto 0 0;font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}#look-stats{font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px;display:grid;gap:14px;scrollbar-width:thin}#sheet-look{width:min(960px,100%)}.sheet[data-overflow=true] .sheet-body{mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}#controls:not([data-sheet=""]) #tracker-status{display:none}#controls:not([data-recording=idle]) #gesture-hint,#controls:not([data-recording=idle]) #tracker-status{display:none}.col{display:grid;gap:14px;align-content:start}@media(min-width:900px){#look-body{grid-template-columns:1fr 1fr;gap:24px}}.sheet footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--glass-line)}.footer-note{margin:0;font-size:.72rem;color:var(--text-dim)}.sheet footer .footer-note{margin-left:auto}.icon-btn{display:inline-grid;place-items:center;width:var(--target-small);height:var(--target-small);padding:0;background:transparent;color:var(--text-dim);border:1px solid transparent;border-radius:12px;cursor:pointer}.icon-btn svg{width:22px;height:22px;fill:currentColor}.icon-btn:hover,.icon-btn[data-hover=true],.icon-btn:focus-visible{color:var(--accent);border-color:var(--glass-line-strong);outline:none}.icon-btn:active{background:#ffffff14}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile,.look{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:72px;padding:12px 14px;text-align:left;background:#ffffff08;color:var(--text);border:1px solid var(--glass-line);border-radius:14px;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.tile strong,.look strong{font-size:.95rem;font-weight:700}.tile small,.look small{font-size:.72rem;color:var(--text-dim);line-height:1.35}.tile:hover,.tile[data-hover=true],.look:hover,.look[data-hover=true],.tile:focus-visible,.look:focus-visible{border-color:var(--accent);background:#ffffff0f;outline:none}.tile:active,.look:active{transform:scale(.98)}.tile[aria-pressed=true],.look[aria-pressed=true]{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}.tile:disabled{opacity:.4;cursor:default}.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.look{min-height:64px;padding:10px 12px}.ranges{display:grid;gap:4px}.range{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;padding:2px 0}.range-label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.range output{font-size:.8rem;color:var(--accent);font-variant-numeric:tabular-nums}.range input[type=range]{grid-column:1 / -1;-webkit-appearance:none;appearance:none;width:100%;height:var(--target-small);margin:0;background:transparent;cursor:pointer}.range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--glass-line-strong)}.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);box-shadow:0 0 10px color-mix(in oklab,var(--accent) 60%,transparent)}.range input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--glass-line-strong)}.range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);box-shadow:0 0 10px color-mix(in oklab,var(--accent) 60%,transparent)}.range input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}.range input[type=range][data-hover=true]::-webkit-slider-thumb{transform:scale(1.15)}.row{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:10px}.row-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target-small);padding:0 14px;background:#ffffff08;color:var(--text);border:1px solid var(--glass-line);border-radius:999px;font-size:.85rem;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.chip:hover,.chip[data-hover=true],.chip:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}.chip:active{transform:scale(.97)}.chip[aria-pressed=true]{background:color-mix(in oklab,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent)}.chip:disabled{opacity:.4;cursor:default}.chip.solid{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700}.chip.solid:hover,.chip.solid[data-hover=true]{box-shadow:0 0 18px color-mix(in oklab,var(--accent) 50%,transparent);color:var(--ink)}.chip.danger{background:var(--danger);border-color:var(--danger);color:#fff}.tints .chip{text-transform:capitalize;padding-left:12px}.tints .chip:before{content:"";width:12px;height:12px;margin-right:8px;border-radius:50%;background:var(--swatch);box-shadow:0 0 8px var(--swatch)}.chip[data-tint=green]{--swatch: #39ff88}.chip[data-tint=amber]{--swatch: #ffb347}.chip[data-tint=white]{--swatch: #ffffff}.chip[data-tint=blue]{--swatch: #5fb8ff}#custom-editor{display:grid;gap:8px;padding:12px;border:1px solid var(--glass-line);border-radius:14px;background:#ffffff05}#custom-input{min-height:var(--target-small);padding:0 12px;font-size:1.05rem;letter-spacing:.08em;color:var(--text);background:var(--surface);border:1px solid var(--glass-line-strong);border-radius:10px}#custom-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#custom-input[aria-invalid=true]{border-color:var(--danger)}.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}.key{min-height:var(--target-small);padding:0;background:#ffffff0a;color:var(--text);border:1px solid var(--glass-line);border-radius:8px;font-size:1rem;cursor:pointer}.key:hover,.key[data-hover=true],.key:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}.key:active{background:#ffffff1a}#dock-stack{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(660px,100%)}#dock-stack:empty{display:none}#clip-bar,#save-card{width:100%;display:grid;gap:10px;padding:12px 16px;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);backdrop-filter:blur(var(--glass-blur));box-shadow:0 18px 50px #00000080;animation:rise var(--duration) var(--ease-out)}.clip-meta,.save-meta{display:flex;align-items:baseline;gap:12px;min-width:0}.clip-meta strong,.save-meta strong{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip-meta span,.save-meta span{margin-left:auto;font-size:.78rem;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}.clip-controls,.save-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.clip-controls .solid,.save-actions .solid{margin-left:auto}.clip-progress{position:relative;height:24px;cursor:pointer}.clip-progress:before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--glass-line-strong)}#clip-progress-fill{position:absolute;left:0;top:10px;height:4px;width:0;border-radius:2px;background:var(--accent);box-shadow:0 0 10px color-mix(in oklab,var(--accent) 60%,transparent)}.clip-progress[data-hover=true]:before,.clip-progress:hover:before{background:#ffffff4d}.clip-progress:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}#save-card{border-color:var(--accent);box-shadow:0 18px 50px #00000080,0 0 24px color-mix(in oklab,var(--accent) 22%,transparent)}#save-card{grid-template-columns:1fr auto;align-items:center}#save-card .save-actions{justify-content:flex-end}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes pulse-ring{0%,to{box-shadow:0 0 #ff4d4d80}50%{box-shadow:0 0 0 10px #ff4d4d00}}@keyframes flash{0%{opacity:.9}to{opacity:0}}@keyframes sweep{0%{--sweep: 0%}to{--sweep: 100%}}@keyframes sweep2{0%{--sweep: 0%}to{--sweep: 100%}}@keyframes sweep3{0%{--sweep: 0%}to{--sweep: 100%}}@property --sweep{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-width:640px){:root{--target: 56px;--rec: 68px}#dock-group{padding:0 8px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}#dock{gap:4px;padding:6px;border-radius:22px}.dock-btn span{font-size:.6rem}.sheet{max-height:calc(100dvh - 150px - env(safe-area-inset-bottom,0px))}.sheet header,.sheet footer{padding:10px 12px}.sheet-body{padding:12px;gap:12px}.looks{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.look{min-height:58px;padding:8px 10px}.look small{display:none}.row{grid-template-columns:1fr;gap:6px}.chip{padding:0 12px;font-size:.8rem}#gesture-hint{gap:.8rem;font-size:.68rem;padding:.45rem .8rem}#toast{bottom:calc(6.6rem + env(safe-area-inset-bottom,0px))}#tracker-status{bottom:auto;top:calc(3.6rem + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);text-align:center}#save-card{grid-template-columns:1fr}}@media(max-width:420px){.dock-btn[data-act=help]{display:none}.dock-rec{margin:0 2px}}