:root{--font-display:"Fredoka", "Bowlby One", "Arial Black", sans-serif;--font-body:"Instrument Sans", "Manrope", system-ui, sans-serif;--sky:#dceeff;--blue:#4da2ff;--mint:#55db9c;--lav:#e9ccff;--ember:#fb4903;--sun:#ffd731;--violet:#5c4ade;--pink:#ff8ac2;--paper:#fff8ee;--ink:#111;--white:#fff;--band:var(--sky);--band-2:var(--lav);--sticker:var(--ember);--text:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--white);--outline:var(--ink);--ow:2px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{font-family:var(--font-body);color:var(--text);background:var(--band);-webkit-font-smoothing:antialiased;overflow:hidden}.grain{z-index:2;pointer-events:none;opacity:.14;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;position:fixed;inset:0}body[data-mood=alone] .grain{mix-blend-mode:screen;opacity:.08}.wipe{z-index:30;pointer-events:none;background:var(--band);position:fixed;inset:0;transform:translateY(101%)}.decor{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.decor svg{width:var(--s,72px);height:var(--s,72px);will-change:transform;position:absolute;overflow:visible}.decor svg *{vector-effect:non-scaling-stroke}.flash{z-index:50;pointer-events:none;opacity:0;background:var(--ember);position:fixed;inset:0}#stage{z-index:3;width:100%;height:100svh;padding:max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));position:relative}.screen{text-align:center;will-change:transform, opacity;flex-direction:column;justify-content:center;align-items:center;gap:clamp(22px,4.5vh,44px);padding:24px clamp(20px,5vw,64px);display:flex;position:absolute;inset:0}.line{font-family:var(--font-display);letter-spacing:-.015em;text-wrap:balance;max-width:16ch;color:var(--text);margin:0;font-size:clamp(34px,7.5vw + 10px,88px);font-weight:700;line-height:.95}.line.big{letter-spacing:-.03em;text-transform:uppercase;max-width:10ch;padding-block:.06em;font-size:clamp(60px,15vw + 8px,160px);line-height:.82}.line.shout{text-transform:uppercase}.sub{font-family:var(--font-body);text-wrap:balance;opacity:.85;max-width:30ch;margin:0;font-size:clamp(17px,2.2vw + 8px,26px);font-weight:500;line-height:1.3}.line .word{white-space:pre;display:inline-block}.line mark{background:var(--sticker);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;outline:var(--ow) solid var(--ink);outline-offset:-1px;border-radius:.18em;padding:.02em .14em;display:inline-block;transform:rotate(-2deg)}.actions{flex-wrap:wrap;justify-content:center;gap:14px 12px;margin-top:4px;display:flex}.btn{appearance:none;cursor:pointer;isolation:isolate;font:700 16px/1 var(--font-body);letter-spacing:.02em;border:var(--ow) solid transparent;min-width:128px;min-height:56px;color:var(--btn-fg);touch-action:manipulation;-webkit-user-select:none;user-select:none;will-change:transform;background:0 0;border-radius:999px;padding:18px 30px;transition:transform .12s cubic-bezier(.4,0,.2,1),color .25s;position:relative}.btn:before{content:"";z-index:-1;border-radius:inherit;background:var(--btn-bg);border:var(--ow) solid var(--outline);position:absolute;inset:-2px}.btn:after{content:"";z-index:-2;border-radius:inherit;background:var(--band-2);border:var(--ow) solid var(--outline);transition:transform .12s cubic-bezier(.4,0,.2,1);position:absolute;inset:-2px;transform:translate(5px,6px)}@media (hover:hover){.btn:hover{transform:translate(-1px,-1px)}.btn:hover:after{transform:translate(7px,8px)}}.btn:active{transform:translate(5px,6px)}.btn:active:after{transform:translate(0)}.btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.btn.ghost{color:var(--ink)}.btn.ghost:before{background:var(--white)}.btn.ghost:after{background:var(--sun)}.btn.skip{color:var(--text);opacity:.7;min-width:0;padding:14px 18px;font-weight:600}.btn.skip:before,.btn.skip:after{display:none}.btn .em{margin-left:.4em}.actions.stack{flex-direction:column;align-items:center;gap:18px}.btn.playing{color:var(--ink)}.btn.playing:before{background:var(--mint)}.btn.playing:after{transform:translate(0)}.typebox{flex-direction:column;align-items:center;gap:14px;width:min(560px,100%);display:flex}.example{font-family:var(--font-body);opacity:.75;background:var(--white);border:var(--ow) solid var(--ink);border-radius:12px;margin:0;padding:8px 14px;font-size:clamp(15px,2vw + 6px,20px);font-weight:600;transform:rotate(1.2deg)}.typebox input{width:100%;font:600 clamp(18px, 2vw + 8px, 24px)/1.3 var(--font-body);border:var(--ow) solid var(--ink);background:var(--white);color:var(--ink);text-align:center;border-radius:20px;outline:none;padding:18px 22px}.typebox input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--sky)}.typebox .nag{min-height:1.4em;color:var(--ember);margin:0;font-size:15px;font-weight:600}body[data-mood=alone] .typebox input{color:#fff;background:#1b1b1b;border-color:#fff}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;width:min(100%,640px);display:grid}.card{appearance:none;cursor:pointer;color:var(--ink);font:700 clamp(12px, 1.2vw + 8px, 16px)/1.2 var(--font-body);touch-action:manipulation;background:0 0;border:0;flex-direction:column;align-items:center;gap:10px;padding:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1);display:flex}@media (hover:hover){.card:hover{transform:translateY(-4px)rotate(0)scale(1.04)}}.card:active{transform:scale(.94)}.card:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:22px}.card .cap{background:var(--white);border:var(--ow) solid var(--ink);text-wrap:balance;transform:rotate(var(--tilt,0deg));border-radius:999px;padding:6px 10px}.pic,.hero-pic{aspect-ratio:1;background:var(--white);border:5px solid var(--white);outline:var(--ow) solid var(--ink);width:100%;transform:rotate(var(--tilt,0deg));border-radius:18px;position:relative;overflow:hidden}.card:first-child{--tilt:-3deg}.card:nth-child(2){--tilt:2deg}.card:nth-child(3){--tilt:-1.5deg}.pic img,.hero-pic img{object-fit:cover;width:100%;height:100%;display:block}.hero-pic{--tilt:-4deg;border-width:6px;border-radius:50%;flex:none;width:min(56vw,260px)}.hero-pic:after{content:"";background:var(--sun);border:1.5px solid var(--ink);opacity:.9;width:64px;height:20px;position:absolute;top:-10px;left:50%;transform:translate(-50%)rotate(-8deg)}.tile{background:var(--lav);place-items:center;gap:2px;width:100%;height:100%;display:grid}.tile .em{font-size:clamp(28px,7vw,48px);line-height:1}.tile .ini{font-family:var(--font-display);opacity:.55;letter-spacing:.05em;font-size:clamp(14px,3vw,22px);font-weight:700}.results{background:var(--white);border:var(--ow) solid var(--ink);text-align:left;isolation:isolate;border-radius:24px;flex-direction:column;gap:12px;width:min(100%,400px);padding:20px 22px;display:flex;position:relative;transform:rotate(-1.5deg)}.results:after{content:"";z-index:-1;border-radius:inherit;background:var(--band-2);border:var(--ow) solid var(--ink);position:absolute;inset:-2px;transform:translate(8px,9px)}.results .score{font-family:var(--font-display);justify-content:center;align-items:baseline;gap:6px;display:flex}.results .score .n{font-variant-numeric:tabular-nums;font-size:clamp(60px,13vw,100px);font-weight:700;line-height:1}.results .score .of{opacity:.6;font-size:clamp(20px,4vw,30px)}.results ul{flex-direction:column;gap:8px;margin:0;padding:0;font-size:clamp(15px,2vw + 6px,18px);font-weight:600;list-style:none;display:flex}.results li{align-items:center;gap:12px;display:flex}.results .tick{background:var(--mint);border:var(--ow) solid var(--ink);border-radius:50%;flex:none;place-items:center;width:28px;height:28px;font-size:15px;font-weight:800;display:grid}.results .grade{text-align:center;font:800 13px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}.clock{aspect-ratio:1;width:min(60vw,260px);position:relative}.clock svg{width:100%;height:100%;overflow:visible}.clock .face{fill:var(--white);stroke:var(--ink);stroke-width:6px}.clock .ring{fill:none;stroke:var(--ember);stroke-width:12px;stroke-linecap:round;transform-origin:50%;transform:rotate(-90deg)}.clock .hand{stroke:var(--ink);stroke-width:7px;stroke-linecap:round}.clock .num{font-family:var(--font-display);font-variant-numeric:tabular-nums;place-items:center;font-size:clamp(48px,11vw,90px);font-weight:700;display:grid;position:absolute;inset:0}.clock .bell{opacity:0;font-size:40px;position:absolute;top:-14%;left:50%;transform:translate(-50%)}.overlay{z-index:40;text-align:center;background:var(--ember);color:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:24px;display:flex;position:fixed;inset:0}.overlay .stamp{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ember);background:var(--white);border:4px solid var(--ink);border-radius:14px;padding:.12em .25em;font-size:clamp(44px,13vw,120px);font-weight:700;line-height:.85;transform:rotate(-8deg)}.overlay .line{max-width:22ch;font-size:clamp(22px,3.5vw + 8px,44px)}.overlay .btn{color:var(--white)}.overlay .btn:before{background:var(--ink)}.overlay .btn:after{background:var(--sun)}body[data-mood=gtfo]{--band:#111;--band-2:var(--ember);--text:#fff;--btn-bg:var(--ember);--btn-fg:#111;--outline:#fff}body[data-mood=alone]{--band:#0e0f14;--band-2:var(--violet);--text:#f3f1ff;--btn-bg:#f3f1ff;--btn-fg:#0e0f14;--outline:#f3f1ff;--sticker:var(--violet)}.alone-screen .line{letter-spacing:.01em;font-weight:400;line-height:1.1}.alone-screen .line.quiet{font-size:clamp(24px,4.5vw + 6px,48px)}.star{opacity:0;background:#fff;border-radius:50%;width:2px;height:2px;position:absolute}.video-wrap{flex-direction:column;align-items:center;gap:14px;width:min(100%,720px);display:flex}.video-wrap video,.video-wrap .placeholder{object-fit:contain;border:6px solid var(--white);outline:var(--ow) solid var(--ink);background:#111;border-radius:22px;width:auto;max-width:100%;height:auto;max-height:68svh;display:block;transform:rotate(-1deg)}.video-wrap .placeholder{aspect-ratio:9/16;color:#fff;opacity:.9;place-items:center;width:100%;padding:20px;font-weight:600;display:grid}.video-wrap .caption{letter-spacing:.12em;text-transform:uppercase;background:var(--sun);border:var(--ow) solid var(--ink);border-radius:999px;margin:0;padding:6px 12px;font-size:13px;font-weight:700;transform:rotate(2deg)}#progress{z-index:5;left:max(16px, env(safe-area-inset-left,0px));right:72px;top:max(20px, env(safe-area-inset-top,0px));gap:5px;display:flex;position:fixed}#progress span{background:var(--white);border:1.5px solid var(--outline);border-radius:999px;flex:1;height:6px;overflow:hidden}#progress i{background:var(--outline);width:0;height:100%;transition:width .5s;display:block}#mute{z-index:20;right:max(14px, env(safe-area-inset-right,0px));top:max(14px, env(safe-area-inset-top,0px));appearance:none;cursor:pointer;font:700 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;background:var(--white);color:var(--ink);border:var(--ow) solid var(--ink);border-radius:999px;padding:10px 14px;transition:opacity .3s;position:fixed}#mute.off{opacity:.55;text-decoration:line-through}body[data-mood=alone] #mute,body[data-mood=gtfo] #mute{color:#fff;background:#1b1b1b;border-color:#fff}#dev{z-index:99;left:50%;bottom:max(10px, env(safe-area-inset-bottom,0px));color:#fff;background:#141414e6;border-radius:999px;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:6px;font:12px/1 monospace;display:flex;position:fixed;transform:translate(-50%)}#dev button{appearance:none;color:#111;cursor:pointer;background:#fff;border:0;border-radius:50%;flex:none;width:36px;height:36px;font-size:14px}#dev select{font:inherit;color:#fff;background:#333;border:0;border-radius:999px;min-width:0;max-width:46vw;padding:8px}@media (prefers-reduced-motion:reduce){.btn,.btn:after,.card{transition:none}.decor{display:none}}