:root{--s: 2;--mint: #B2F6E3;--charcoal: #111212;--linen: #EFEEEC;--orange: #E46D4B;--green: #2C5C4E;--yellow: #CDDD77;--pink: #F5B3B0;--blue: #39669F;--lilac: #B5A6DA;--red: #D34962;--grey: #A3A29E;--dgrey: #5E5D5A;--shade: #DAD8D3;--font: "Saans", "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:var(--linen)}html,body{margin:0;height:100%;color:var(--charcoal);font-family:var(--font);overflow:hidden;overscroll-behavior:none}body{display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.04em;line-height:1.05}a{color:inherit}[hidden]{display:none!important}#shell{position:relative}#frame{position:relative;width:calc(var(--s) * 180px);height:100dvh;background:var(--charcoal);overflow:hidden}#stage{position:absolute;left:0;top:0;width:calc(var(--s) * 180px);height:calc(var(--s) * 320px);background:var(--charcoal);touch-action:none;user-select:none;-webkit-user-select:none}body.desktop #frame{height:calc(var(--s) * 320px);border-radius:10px;box-shadow:0 0 0 3px var(--charcoal),8px 8px 0 3px var(--shade)}body.demo.desktop #frame{box-shadow:none;border-radius:0}body.scene:not(.desktop):after{content:"";position:fixed;left:0;right:0;bottom:0;top:calc(var(--s) * 300px);background:var(--charcoal);z-index:-1}body.playing,body.playing #frame{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button,a{touch-action:manipulation}#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.lbl{position:absolute;left:0;top:0;font-weight:500;line-height:1.05;letter-spacing:-.02em;font-size:calc(var(--s) * 4.6px);will-change:transform}.lbl-slop,.lbl-anvil{width:calc(var(--s) * 60px);margin-left:calc(var(--s) * -30px);text-align:center}.lbl-slop{margin-top:calc(var(--s) * -1px);translate:0 -100%;color:var(--charcoal)}.lbl-slop:before,.lbl-anvil:before{content:none}.lbl-slop{background:none}.lbl-slop,.lbl-anvil{text-wrap:balance}.lbl-anvil{translate:0 calc(var(--s) * 3.4px);color:var(--linen);font-size:calc(var(--s) * 3.6px);width:calc(var(--s) * 22px);margin-left:calc(var(--s) * -11px);white-space:nowrap}.lbl-power{width:max-content;translate:-50% calc(var(--s) * 2px);font-weight:600;font-size:calc(var(--s) * 4.8px);line-height:1.15;background:var(--mint);border:max(1px,calc(var(--s) * .5px)) solid var(--charcoal);border-radius:99px;padding:calc(var(--s) * .8px) calc(var(--s) * 3px);white-space:nowrap}.lbl-power.badge{background:var(--yellow)}.float{position:absolute;left:0;top:0;width:calc(var(--s) * 40px);margin-left:calc(var(--s) * -20px);text-align:center;font-weight:600;font-size:calc(var(--s) * 6px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;animation:float-up .75s ease-out forwards;text-shadow:0 0 calc(var(--s) * 1px) var(--linen),0 0 calc(var(--s) * 1px) var(--linen)}.float.none{color:var(--dgrey);font-weight:500}.float.bad{color:var(--red)}.lbl-reddit{width:calc(var(--s) * 36px);font-size:calc(var(--s) * 4.2px)}.lbl-listicle{width:calc(var(--s) * 38px);font-size:calc(var(--s) * 4.4px)}#hud{position:absolute;inset:0;pointer-events:none}.topbar{position:absolute;left:0;right:0;top:0;height:calc(var(--s) * 24px);padding:0 calc(var(--s) * 4px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.score{font-size:calc(var(--s) * 9px);font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:calc(var(--s) * 3px)}#hud-double{font-size:calc(var(--s) * 6px);background:var(--mint);border:1px solid var(--charcoal);border-radius:99px;padding:0 calc(var(--s) * 2.5px);letter-spacing:0}.wave{font-size:calc(var(--s) * 7px);font-weight:500;background:var(--charcoal);color:var(--linen);border-radius:99px;padding:calc(var(--s) * 1px) calc(var(--s) * 5px)}.topbar .right{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--s) * 4px)}.slop-box{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--s) * 1.2px)}.slop-label{font-size:calc(var(--s) * 4.6px);font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}.slop{display:flex;gap:calc(var(--s) * 1.5px)}.slop i{width:calc(var(--s) * 5px);height:calc(var(--s) * 5px);border:max(1px,calc(var(--s) * .5px)) solid var(--charcoal);border-radius:50%;background:var(--linen)}.slop i.on{background:var(--dgrey)}.slop.hit{animation:shake .3s}.icon-btn{pointer-events:auto;width:calc(var(--s) * 18px);height:calc(var(--s) * 18px);min-width:36px;min-height:36px;border:2px solid var(--charcoal);border-radius:8px;background:var(--linen);display:grid;place-items:center;padding:0;cursor:pointer}.icon-btn svg{width:55%;height:55%;fill:var(--charcoal)}body.demo .icon-btn{display:none}.meters{position:absolute;left:0;right:0;top:calc(var(--s) * 46px);display:grid;grid-template-columns:repeat(5,1fr)}.meter{text-align:center;line-height:1}.meter .name{font-size:calc(var(--s) * 4.6px);font-weight:500}.meter .pct{display:inline-block;margin-top:calc(var(--s) * 1.2px);min-width:calc(var(--s) * 17px);font-size:calc(var(--s) * 6.4px);font-weight:600;font-variant-numeric:tabular-nums;padding:calc(var(--s) * .8px) calc(var(--s) * 2px);border:max(1px,calc(var(--s) * .5px)) solid var(--charcoal);border-radius:99px;background:var(--linen)}.gauge{position:relative;margin:calc(var(--s) * 1.6px) auto 0;width:calc(var(--s) * 28px);height:calc(var(--s) * 4px);background:#fff;border:max(1px,calc(var(--s) * .5px)) solid var(--charcoal);border-radius:99px;overflow:hidden}.gauge .zone{position:absolute;top:0;bottom:0;left:32%;width:8%;background:var(--mint)}.gauge .zone.over{left:80%;width:20%;background:var(--pink)}.gauge .fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--charcoal);opacity:.85;transition:width .12s}.gauge .zone.mark{z-index:1;background:none;box-shadow:inset 0 0 0 max(1px,calc(var(--s) * .4px)) var(--charcoal)}.meter.sweet .gauge .fill{background:var(--green)}.meter.warning .gauge .fill{background:var(--red)}.status{position:absolute;left:0;right:0;top:calc(var(--s) * 70px);display:flex;justify-content:center;flex-wrap:wrap;gap:calc(var(--s) * 2px);padding:0 calc(var(--s) * 4px)}.status span{font-size:max(11px,calc(var(--s) * 5px));font-weight:600;line-height:1.2;padding:calc(var(--s) * 1px) calc(var(--s) * 4px);border-radius:99px;border:max(1px,calc(var(--s) * .5px)) solid var(--charcoal);background:var(--yellow);white-space:nowrap;font-variant-numeric:tabular-nums}.status span.bad{background:var(--red);color:#fff}.budgets-cap{position:absolute;left:0;right:0;top:calc(var(--s) * 21px);text-align:center;font-size:calc(var(--s) * 5px);font-weight:600;color:var(--charcoal);line-height:1}.meter.under .pct{background:var(--orange)}.meter.sweet .pct{background:var(--mint);box-shadow:0 0 0 calc(var(--s) * 1.5px) var(--mint)}.meter.fine .pct{background:#fff}.meter.warning .pct{background:var(--red);color:#fff;animation:shake .35s infinite}.meter.bump .pct{animation:bump .18s}.meter.radar .name{background:var(--mint);border-radius:99px}#banner{position:absolute;left:0;right:0;top:32%;text-align:center;padding:0 calc(var(--s) * 12px);pointer-events:none;animation:pop .25s}#banner .big{font-size:calc(var(--s) * 30px);font-weight:500;letter-spacing:-.05em;line-height:1}#banner .tip{margin-top:calc(var(--s) * 5px);font-size:calc(var(--s) * 6.6px);line-height:1.2;font-weight:500;text-wrap:balance}#banner .src{margin-top:calc(var(--s) * 2px);font-size:calc(var(--s) * 4.8px);color:var(--dgrey)}#toasts{position:absolute;left:0;right:0;top:calc(var(--s) * 82px);display:flex;flex-direction:column;align-items:center;gap:calc(var(--s) * 2px);pointer-events:none;padding:0 calc(var(--s) * 8px);z-index:30}.toast{background:var(--charcoal);color:var(--linen);font-size:max(12px,calc(var(--s) * 5.6px));font-weight:500;line-height:1.2;padding:calc(var(--s) * 2.5px) calc(var(--s) * 5px);border-radius:calc(var(--s) * 3px);text-align:center;text-wrap:balance;max-width:100%;animation:toast-in .25s cubic-bezier(.3,1.6,.6,1)}.toast.good{background:var(--mint);color:var(--charcoal);border:2px solid var(--charcoal)}.toast.out{opacity:0;transition:opacity .3s}#screens{position:absolute;inset:0;pointer-events:none;z-index:20}.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;pointer-events:auto;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}.screen.solid{background:var(--linen)}.screen.veil{background:#efeeece6;justify-content:center;align-items:stretch;text-align:center}.screen h1{font-size:clamp(40px,calc(var(--s) * 22px),64px)}.screen h2{font-size:clamp(26px,calc(var(--s) * 13px),36px)}.screen p{line-height:1.35}.small{font-size:13px;color:var(--dgrey);line-height:1.3}.wordmark{display:block;height:16px;width:auto;flex:none;align-self:flex-start;object-fit:contain}#start .foot .wordmark{align-self:center}.wordmark.on-dark{filter:invert(1) brightness(.94)}.panel{background:var(--linen);border:2px solid var(--charcoal);border-radius:10px;box-shadow:4px 4px 0 var(--charcoal);padding:14px;display:flex;flex-direction:column;gap:10px}.panel.mint{background:var(--mint)}.panel.dark{background:var(--charcoal);color:var(--linen);box-shadow:none}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:10px 16px;border:2px solid var(--charcoal);border-radius:8px;background:var(--linen);font-weight:500;font-size:16px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--charcoal);transition:transform .06s,box-shadow .06s;text-align:center}.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--charcoal)}.btn.primary{background:var(--mint);font-size:19px;min-height:56px}.btn.enquire{background:var(--charcoal);color:var(--linen);box-shadow:3px 3px 0 var(--mint)}.btn.quiet{box-shadow:none;border-color:transparent;background:none;text-decoration:underline;text-underline-offset:3px;min-height:40px;font-size:14px}.btn.quiet:active{transform:none}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}:focus-visible{outline:3px solid var(--mint);outline-offset:2px;box-shadow:0 0 0 6px var(--charcoal)}[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}body.desktop #frame:focus{box-shadow:0 0 0 3px var(--charcoal),8px 8px 0 3px var(--shade)}#start{justify-content:space-between;padding-top:calc(var(--s) * 64px)}#start .panel{text-align:center;gap:10px}#start .challenge{background:var(--yellow);border:2px solid var(--charcoal);border-radius:8px;padding:8px 10px;font-weight:500}#start .target{font-weight:500;text-wrap:balance}#start .foot{text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--linen);margin-top:auto;background:var(--charcoal);margin:0 -16px calc(-1*max(20px,env(safe-area-inset-bottom)));padding:10px 16px max(12px,env(safe-area-inset-bottom))}#start .foot .small{color:var(--shade)}body:not(.tall) #start .foot{flex-direction:row;justify-content:space-between;align-items:center;padding:0 12px;height:calc(var(--s) * 20px);margin:0;position:absolute;left:0;right:0;bottom:0;gap:8px;white-space:nowrap}body:not(.tall) #start .foot .wordmark{height:12px}body:not(.tall) #start .foot .small{font-size:10.5px}body:not(.tall) #slop-line{display:none}#start .title-btn{background:none;border:0;padding:0;cursor:default}@media(max-height:620px){#start{padding-top:calc(var(--s) * 50px)}#start .panel{padding:10px 12px;gap:6px}#start h1{font-size:34px}#start .panel p{font-size:14px;line-height:1.25}#start .btn{min-height:40px;padding:6px 12px}#start .btn.primary{min-height:46px;font-size:17px}#start .btn.quiet{min-height:30px}#start .foot{padding-top:6px;gap:2px}}#creator .preview{align-self:center;width:140px;height:190px;image-rendering:pixelated;background:#fff;border:2px solid var(--charcoal);border-radius:10px}.opt-row{display:flex;flex-wrap:wrap;gap:6px}.opt-label{font-size:13px;font-weight:500;margin-bottom:-4px}.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--charcoal);cursor:pointer;padding:0}.chip{min-height:36px;padding:6px 12px;border:2px solid var(--charcoal);border-radius:99px;background:var(--linen);cursor:pointer;font-size:14px;font-weight:500}.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--linen),0 0 0 6px var(--charcoal)}.chip[aria-pressed=true]{background:var(--mint);box-shadow:2px 2px 0 var(--charcoal)}#industry .group{display:flex;flex-direction:column;gap:6px}#industry .group h3{font-size:13px;letter-spacing:0;color:var(--dgrey)}#industry .avg{font-weight:400;color:var(--dgrey);margin-left:4px;font-variant-numeric:tabular-nums}#industry .sticky{position:sticky;bottom:0;margin-top:auto;box-shadow:4px 4px 0 var(--charcoal),0 -12px 0 0 var(--linen),0 16px 0 4px var(--linen)}.mix{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-size:13px}.mix .bar{height:10px;background:var(--shade);border-radius:2px;overflow:hidden}.mix .bar i{display:block;height:100%;background:var(--charcoal)}.mix b{font-variant-numeric:tabular-nums;font-weight:500}.carrie{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end}.carrie canvas{image-rendering:pixelated}.bubble{position:relative;background:#fff;border:2px solid var(--charcoal);border-radius:12px;padding:12px;font-weight:500;line-height:1.3}.bubble:after{content:"";position:absolute;left:-10px;bottom:18px;width:10px;height:10px;background:#fff;border-left:2px solid var(--charcoal);border-bottom:2px solid var(--charcoal);transform:translate(6px) rotate(45deg)}.bubble.bot{background:var(--charcoal);color:var(--linen);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px}.bubble.bot:after{display:none}.how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.how li{display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:center;justify-items:center;font-size:15px;line-height:1.25}.how li span:last-child{justify-self:start}.how canvas{image-rendering:pixelated}#intro .go{position:sticky;bottom:0;box-shadow:3px 3px 0 var(--charcoal),0 -10px 0 0 var(--linen),0 24px 0 6px var(--linen)}#pause .panel{align-self:center;width:min(100%,300px)}#results{gap:14px}#results .scene{position:relative;margin:calc(-1*max(16px,env(safe-area-inset-top))) -16px 0}#results .scene canvas{display:block;width:100%;image-rendering:pixelated}#results .cfo-hit{position:absolute;right:2%;bottom:14%;width:16%;height:48%;background:none;border:0;padding:0;cursor:default}#results .headline{display:flex;flex-direction:column;gap:6px}#results .tagline{font-weight:500;background:var(--mint);align-self:flex-start;padding:2px 8px;border-radius:4px}.scorebox{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end}.scorebox .label{font-size:13px;color:var(--dgrey)}.scorebox .rating{font-size:26px;font-weight:500;letter-spacing:-.04em;line-height:1.05}.scorebox .num{font-size:40px;font-weight:500;letter-spacing:-.05em;line-height:.95;text-align:right;font-variant-numeric:tabular-nums}.scorebox .vs{grid-column:1 / -1;font-size:13px;color:var(--dgrey)}.bars{display:grid;grid-template-columns:auto 1fr 3.2em;gap:6px 8px;align-items:center;font-size:14px;font-weight:500}.bars .track{position:relative;height:14px;background:var(--shade);border-radius:3px}.bars .track:before{content:"";position:absolute;left:32%;width:8%;top:-2px;bottom:-2px;background:var(--mint);border-radius:2px}.bars .track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;border:2px solid var(--charcoal);min-width:4px}.bars b{text-align:right;font-variant-numeric:tabular-nums}.facts{display:flex;flex-direction:column;gap:6px;font-weight:500}.facts p{background:#fff;border:2px solid var(--charcoal);border-radius:8px;padding:8px 10px}.facts p.win{background:var(--mint)}.facts:empty{display:none}#results .card-img{width:100%;border:2px solid var(--charcoal);border-radius:8px;display:block;aspect-ratio:1200 / 627;background:var(--shade)}.fold>summary{list-style:none;cursor:pointer}.fold>summary::-webkit-details-marker{display:none}.fold[open]>summary{display:none}.fold>.panel{margin-top:0}.linkish{background:none;border:0;padding:0;font:inherit;color:var(--charcoal);font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.lead form{display:flex;flex-direction:column;gap:8px}.lead input[type=email]{min-height:46px;padding:8px 12px;border:2px solid var(--charcoal);border-radius:8px;background:#fff;font-size:16px;width:100%}.lead textarea{padding:8px 12px;border:2px solid var(--charcoal);border-radius:8px;background:#fff;font:inherit;font-size:16px;width:100%;resize:vertical}.lead .consent{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:12px;line-height:1.3;align-items:start}.lead .consent input{width:20px;height:20px;margin:0;accent-color:var(--charcoal)}.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.lead .error{color:var(--red);font-weight:500;font-size:14px}#rotate{position:fixed;inset:0;z-index:99;background:var(--charcoal);color:var(--linen);display:grid;place-items:center;text-align:center;font-size:20px;font-weight:500;padding:24px}.noscript{position:fixed;inset:0;z-index:100;background:var(--linen);padding:32px;display:flex;flex-direction:column;gap:12px;justify-content:center;max-width:480px;margin:auto}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes bump{50%{transform:scale(1.25)}}@keyframes pop{0%{transform:scale(.8);opacity:0}}@keyframes toast-in{0%{transform:translateY(8px) scale(.9);opacity:0}}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes float-up{0%{opacity:1;translate:0 0}to{opacity:0;translate:0 calc(var(--s) * -16px)}}@media(prefers-reduced-motion:reduce){.toast,#banner{animation:fade-in .3s}.slop.hit,.meter.warning .pct,.meter.bump .pct{animation:none}.btn{transition:none}.float{animation:fade-out .75s forwards}.gauge .fill{transition:none}}
