:root{color-scheme:dark;--fg: #eee;--dim: #888;--accent: #ff8c1a;--flash: #ffffff;--paper: #f3e6c8;--paper-2: #e8d9b6;--ink: #2b1d12;--ink-soft: rgba(43, 29, 18, .65);--ink-faint: rgba(43, 29, 18, .12);--pumpkin: #f0863a;--moss: #9fbf7a;--sky: #b7c9dd;--danger: #c8442e;--warn: #b8741a;--shadow: rgba(0, 0, 0, .5);--font-head: "Fredoka", "Nunito", "Avenir Next Rounded", system-ui, sans-serif;--font-hand: "Patrick Hand", "Comic Sans MS", "Marker Felt", system-ui, sans-serif;--cut: 14px 10px 16px 8px / 10px 16px 8px 14px;--cut-2: 10px 6px 12px 8px / 8px 12px 6px 10px}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;background:#000;-webkit-tap-highlight-color:transparent;color:var(--fg);font:15px/1.35 var(--font-hand);overflow:hidden}button,select,input[type=file]{font:inherit}button{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--cut-2);padding:5px 12px;cursor:pointer;font-family:var(--font-head);font-weight:500;box-shadow:2px 3px 0 var(--shadow)}button:hover{background:#fff3d6}button:active{translate:1px 1px;box-shadow:1px 2px 0 var(--shadow)}button.active{background:var(--pumpkin)}#video{position:fixed;inset:0;width:100%;height:100%;display:block;background:#000}#flash{position:fixed;inset:0;background:var(--flash);opacity:0;pointer-events:none;will-change:opacity}#hud{position:fixed;left:24px;top:24px;pointer-events:none;text-shadow:0 0 6px #000;font-family:var(--font-head)}#bpm{font-size:96px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}#status{color:var(--dim);font-size:16px;margin-top:6px;white-space:pre;font-family:var(--font-hand)}#meter{width:200px;height:6px;background:#222;margin-top:10px;border-radius:3px;overflow:hidden}#meter-fill{height:100%;width:0;background:#4c4}#bar{display:flex;gap:6px;margin-top:6px}#bar i{display:block;width:13px;height:13px;border-radius:50%;background:transparent;border:2px solid var(--ink);transition:background .12s ease}#bar i:first-child{border-color:var(--pumpkin)}#bar i.on{background:var(--ink);transition:none}#bar i.on:first-child{background:var(--pumpkin)}#phase{position:fixed;left:0;right:0;bottom:0;height:10px;background:#111}#phase-fill{height:100%;width:0;background:var(--accent)}#phase-tick{position:absolute;left:0;top:-6px;width:2px;height:22px;background:#fff;opacity:.6}#debug{position:fixed;right:16px;bottom:76px;width:520px;height:300px;background:#0009;border:1px solid #333;border-radius:6px}#controls{color:var(--ink)}#controls h2{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px}.row{display:flex;gap:8px;align-items:center;margin:4px 0;flex-wrap:wrap}.row label{min-width:150px}.row input[type=range]{flex:1;min-width:120px;accent-color:var(--pumpkin)}input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}.small{color:var(--ink-soft);font-size:13px;white-space:pre-wrap;font-variant-numeric:tabular-nums}#clip-info{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;min-height:5.5em;white-space:pre;overflow-x:auto}#status{min-height:1.4em}label.file{display:inline-block;padding:6px 12px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--cut-2);cursor:pointer;font-family:var(--font-head)}label.file input{display:none}select{background:#fff3d6;color:var(--ink);border:2px solid var(--ink);border-radius:var(--cut-2);padding:4px 6px;max-width:100%;font-family:var(--font-head)}#welcome{position:fixed;left:50%;top:50%;translate:-50% -50%;width:470px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--cut);padding:24px 28px 20px;box-shadow:6px 8px 0 var(--shadow);rotate:-.6deg;text-align:center;font-size:16px}#welcome h1{margin:0;font:700 44px/1 var(--font-head);color:var(--pumpkin);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}#welcome .lede{margin:6px 0 12px;font:700 19px/1.2 var(--font-head)}#welcome p{margin:0 0 12px}#welcome .steps{text-align:left;margin:0 0 6px;padding:0 0 0 28px}#welcome .steps li{margin:7px 0;padding-left:4px}#welcome .steps li::marker{font:700 17px var(--font-head);color:var(--pumpkin)}#welcome .steps b{font-family:var(--font-head);font-weight:700}#welcome .fine{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}#welcome .fine b{font-family:var(--font-head);color:var(--ink)}#paused-note{color:var(--warn);font:700 16px/1.3 var(--font-head)}#start{display:block;margin:8px auto 0;width:150px;height:150px;border-radius:48% 52% 50% 50%/52% 48%;font:700 34px/1 var(--font-head);background:var(--pumpkin);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--shadow);rotate:-3deg}#start:hover{background:#ff9a52}#start:disabled{opacity:.7}#stop{position:fixed;right:20px;bottom:24px;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;font:700 16px/1 var(--font-head);border-radius:var(--cut-2);rotate:1.2deg;box-shadow:4px 5px 0 var(--shadow)}#stop .ic{width:18px;height:18px;fill:var(--danger);stroke:var(--ink);stroke-width:2}[hidden]{display:none!important}.chrome{transition:opacity .6s ease}body.idle .chrome,body.chrome-off .chrome{opacity:0!important;pointer-events:none;transition-duration:1.2s}body.idle{cursor:none}#cells{position:fixed;right:20px;top:18px;width:340px;max-width:calc(100vw - 40px);display:flex;flex-direction:column;gap:12px}.cell{display:flex;align-items:center;gap:12px;text-align:left;width:100%;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:var(--cut);padding:12px 14px;box-shadow:5px 6px 0 var(--shadow);font-family:var(--font-hand)}.cell:hover{background:#fff3d6}.cell:active{translate:1px 1px;box-shadow:4px 5px 0 var(--shadow)}#source{rotate:-.8deg}#look-cell{rotate:.9deg;background:var(--pumpkin)}#look-cell:hover{background:#ff9a52}#debug-cell{rotate:-.3deg;background:var(--moss)}#debug-cell:hover{background:#b0cf8a}.cell-icon{flex:none;width:46px;height:46px;display:grid;place-items:center;color:var(--paper);background:var(--ink);border-radius:45% 55% 50% 50%/50% 45% 55% 50%}.cell-icon .ic{width:24px;height:24px;fill:currentColor;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.cell-icon .ic[class*=ic-]{display:none}.cell-icon .disco{width:40px;height:40px;overflow:visible}.cell-icon .disco .ball,.cell-icon .disco .spark{fill:var(--paper)}.cell-icon .disco g path{stroke:var(--ink);fill:var(--ink)}.cell-icon[data-kind=none]{background:var(--danger)}.cell-icon[data-kind=pending]{background:var(--warn)}.cell-icon[data-kind=none] .ic-none,.cell-icon[data-kind=mic] .ic-mic,.cell-icon[data-kind=pending] .ic-mic,.cell-icon[data-kind=file] .ic-file,.cell-icon[data-kind=click] .ic-click{display:block}.cell-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.cell-label{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.cell-value{font-family:var(--font-head);font-weight:700;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell-value.none{color:var(--danger)}.cell-value.warn{color:var(--warn)}.cell-sub{font-size:14px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}#source-hint{white-space:normal}.cell-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}.tag{font-size:13px;padding:0 8px;border-radius:99px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);white-space:nowrap}#source-level{display:block;width:100%;height:14px;margin-top:4px}.cell-chevron{flex:none;color:var(--ink);font-size:24px;line-height:1;font-family:var(--font-head)}.cell-cta{flex:none;font-family:var(--font-head);font-weight:700;font-size:14px;white-space:nowrap;background:var(--ink);color:var(--paper);padding:5px 12px;border-radius:99px;rotate:3deg;box-shadow:2px 3px 0 var(--shadow)}.popover{position:fixed;right:20px;top:18px;width:340px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);overflow:auto;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--cut);padding:14px 16px;box-shadow:6px 8px 0 var(--shadow);rotate:.4deg}#look{width:440px}.picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.picker-head h3{margin:0;font:700 26px/1 var(--font-head);color:var(--pumpkin);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}.popover-close{background:none;border:none;box-shadow:none;color:var(--ink);font-size:20px;padding:4px 8px}.popover-close:hover{background:var(--ink-faint)}.picker-list{border:2px solid var(--ink);border-radius:var(--cut-2);overflow:hidden;background:#fff3d6}.picker-row{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;border-top:2px solid var(--ink)}.picker-row:first-child{border-top:none}.picker-row:hover{background:var(--paper)}.picker-row.active{background:var(--pumpkin)}.picker-row .cell-icon{width:40px;height:40px}.picker-row .cell-icon .ic{width:20px;height:20px}.picker-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.picker-title{font-family:var(--font-head);font-weight:700;font-size:16px}.picker-sub{font-size:14px;color:var(--ink-soft)}.picker-opt{font-size:14px;color:var(--ink-soft);margin-top:4px}.picker-row select{margin-top:6px;font-size:13px}.picker-row input[type=file]{display:none}#mic-info:empty{display:none}#mic-info{margin-top:4px;font-size:11px}#look h4{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 8px}#look h4:first-of-type{margin-top:4px}.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 10px 8px;margin:0 -6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.carousel::-webkit-scrollbar{display:none}.char{flex:none;width:128px;scroll-snap-align:center;background:none;border:none;padding:0;color:var(--ink);box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font:500 16px/1.2 var(--font-hand);animation:sway 4.2s ease-in-out infinite;transition:opacity .25s ease;opacity:.85}.char:hover,.char:active{opacity:1;background:none;translate:none}.char.selected{opacity:1}.char-pic{position:relative;overflow:hidden;width:128px;height:160px;display:grid;place-items:center;background:linear-gradient(170deg,#efe0bd,#d9c8a6);border:2px solid var(--ink);border-radius:var(--cut-2);box-shadow:3px 4px 0 var(--shadow);rotate:-2deg;transition:rotate .25s ease,border-color .25s ease,box-shadow .25s ease}.char:nth-child(2n) .char-pic{rotate:2deg;background:linear-gradient(170deg,#cfd9e6,#aebccb)}.char.selected .char-pic{border:3px solid var(--pumpkin);box-shadow:0 0 0 2px var(--ink),4px 5px 0 var(--shadow);rotate:0deg}.char-pic video,.char-pic canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.char-pic canvas{filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}.char-name{text-align:center;max-width:128px}.char.selected .char-name{font-family:var(--font-head);font-weight:700}@keyframes sway{0%,to{translate:0 0;rotate:-.6deg}50%{translate:0 -4px;rotate:.6deg}}@media(prefers-reduced-motion:reduce){.char{animation:none}}.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}.chips:empty{display:none}.chip-group{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}.chip-label{font-size:14px;color:var(--ink-soft);margin:0 4px 0 6px}.chip{white-space:nowrap;font-family:var(--font-head);font-weight:500;font-size:13px;padding:3px 10px;border-radius:99px;background:var(--paper);border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--shadow)}.chip:hover{background:#fff3d6}.chip.on{background:var(--pumpkin)}.chip.on:hover{background:#ff9a52}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px 10px}.tile{background:none;border:none;box-shadow:none;padding:0;color:var(--ink);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0;transition:opacity .2s ease;font-family:var(--font-hand);font-weight:400}.tile:hover,.tile:active{background:none;translate:none}.tile.off{opacity:.45}.tile .swatch{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--cut-2);border:2px solid var(--ink);font-size:28px;color:var(--ink);box-shadow:3px 4px 0 var(--shadow);transition:rotate .2s ease,translate .2s ease}.tile:nth-child(3n+1) .swatch{rotate:-2deg}.tile:nth-child(3n+2) .swatch{rotate:1.5deg}.tile:nth-child(3n) .swatch{rotate:-1deg}.tile:hover .swatch{translate:0 -2px}.tile .swatch{overflow:hidden}.swatch-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}.swatch-loop.ready{opacity:1}.tile.live .swatch{border-width:3px;border-color:var(--pumpkin);box-shadow:0 0 0 2px var(--ink),3px 4px 0 var(--shadow)}.live-badge{position:absolute;left:6px;bottom:6px;font:700 10px/1 var(--font-head);letter-spacing:.06em;padding:3px 7px;border-radius:99px;background:var(--paper);border:2px solid var(--ink);color:var(--ink)}.tile-toggle{position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:var(--pumpkin);box-shadow:1px 1px 0 var(--shadow)}.tile.off .tile-toggle{background:var(--paper)}.tile-name{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.15}.tile-tag{font-size:13px;color:var(--ink-soft);line-height:1.2}.tile-add .swatch{background:none;border-style:dashed;box-shadow:none}@media(max-width:640px){#cells{left:10px;right:10px;top:10px;width:auto;max-width:none;gap:10px}.cell{padding:10px 12px;gap:10px}.cell-icon{width:40px;height:40px}.cell-value{font-size:17px}.popover,#look{left:10px;right:10px;top:10px;width:auto;max-width:none;max-height:calc(100dvh - 20px);padding:12px 14px;font-size:15px;rotate:0deg}.row label{min-width:0;flex:1 1 100%}.row input[type=range]{flex:1 1 100%;min-width:0}button,select,label.file{min-height:40px}.chip,.popover-close,.tile,.char{min-height:0}#hud{left:12px;top:12px}#bpm{font-size:56px}#status{font-size:13px;white-space:normal;max-width:70vw}#meter{width:140px}#debug{left:8px;right:8px;width:auto;height:200px;bottom:64px}#welcome{padding:18px 18px 14px;font-size:15px;rotate:0deg;max-height:calc(100dvh - 20px);max-width:calc(100vw - 20px)}#welcome h1{font-size:36px}#welcome .lede{font-size:17px}#start{width:120px;height:120px;font-size:28px}#stop{right:12px;bottom:16px}}