:root{
  /* color: the desk, what lies on it, and the two accents (see .sources/STYLEGUIDE.md) */
  --desk:#242424; --chalk:#f2f2f2; --soft:#c8c8c8; --muted:#a8a8a8; --rule:#4d4d4d;
  --paper:#fbfbf7; --card:#fff; --ink:#1d232a; --ink-2:#4a5560; --ink-3:#6b7480; --hairline:#d1d5db;
  --sticky:#8cd0f0; /* the old site's #1aa1e1, 50% toward white */ --pen:#0b5f8a; /* blue ballpoint: the old site's #1aa1e1, darkened */ --fx-red:#b42318; /* explosions and the hole's swirl */ --tape:color-mix(in srgb,var(--sticky) 80%,transparent);
  /* type scale: printed (Work Sans) and handwritten (Caveat) */
  --fs-xs:13px; --fs-s:15px; --fs-m:17px; --fs-l:21px; --fs-h2:36px;
  --fs-hand-xs:20px; --fs-hand-s:24px; --fs-hand-m:30px; --fs-hand-l:34px; --fs-fx:44px;
  /* corners: paper is square; controls, chat bubbles and the one rounded sheet (the chat) */
  --r-control:8px; --r-bubble:12px; --r-sheet:16px; --r-pill:999px;
  --shadow-paper:0 2px 0 rgba(0,0,0,.08),0 14px 30px rgba(0,0,0,.35);
  --shadow-float:0 10px 30px rgba(0,0,0,.4);
  --space-section:56px; --space-section-end:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--desk);color:var(--chalk);font-family:'Work Sans',system-ui,sans-serif;overflow-x:hidden;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:6px 6px}
/* no site-wide hover color: desk links turn --sticky, paper cards straighten up, answer links go from pen to ink */
a{color:var(--ink)}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
img{display:block;max-width:100%}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:28px 0}
.logo{font-family:Caveat,cursive;font-weight:700;font-size:var(--fs-hand-l);color:var(--chalk);text-decoration:none;user-select:none}
.nav{display:flex;flex-wrap:wrap;gap:24px;font-size:var(--fs-s)}
.nav a,.foot a{color:var(--chalk)}
.logo:hover,.nav a:hover,.foot a:hover{color:var(--sticky)}
/* keyboard focus: a sticky-blue ring on the desk, an ink ring on paper (pale blue vanishes there) */
:focus-visible{outline:3px solid var(--sticky);outline-offset:3px}
.chat :focus-visible,.powerups :focus-visible,.pad :focus-visible,.consent :focus-visible{outline-color:var(--ink)}

/* hero + bot */
.hero{min-height:640px;display:flex;flex-direction:column;justify-content:center;padding:var(--space-section) 0 var(--space-section-end)}
.hero h1{margin:0;font-size:clamp(48px,7vw,88px);line-height:1;font-weight:600;letter-spacing:-.03em;align-self:flex-start}
.lede{margin:20px 0 36px;font-size:var(--fs-l);line-height:1.5;color:var(--soft);max-width:660px}
/* the chat is one rounded sheet of paper on the desk: conversation on top, input on its bottom edge */
.chat{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--r-sheet);box-shadow:var(--shadow-paper)}
.ask{background:var(--card);color:var(--ink);border-radius:var(--r-sheet);padding:8px 8px 8px 20px;display:flex;align-items:center;gap:12px}
.thread:not(:empty)+.ask{border-radius:0 0 var(--r-sheet) var(--r-sheet);border-top:1px dashed var(--hairline)}
.prompt{font-family:'JetBrains Mono',monospace;font-size:var(--fs-m);color:var(--pen)}
.ask input{flex:1 1 auto;min-width:0;min-height:56px;border:0;outline:none;font:inherit;font-size:var(--fs-m);color:var(--ink);background:transparent}
.ask button{min-height:52px;padding:0 24px;background:var(--ink);color:var(--card);border:0;border-radius:var(--r-control);font:inherit;font-size:var(--fs-s);font-weight:600;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{min-height:44px;padding:0 16px;background:var(--card);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--r-pill);font:inherit;font-size:var(--fs-s);cursor:pointer}
/* rounded on top so the sticky header (and the scrollbar) can't square off the sheet's corners */
.thread{display:flex;flex-direction:column;gap:10px;max-height:min(46vh,420px);border-radius:var(--r-sheet) var(--r-sheet) 0 0;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 18px;scrollbar-width:thin}
.thread:empty{display:none}
.thread-head{position:sticky;top:-14px;z-index:1;display:flex;justify-content:space-between;align-items:baseline;margin:-14px -20px 0;padding:10px 20px 6px;background:var(--paper)}
.thread-head span{font:700 var(--fs-hand-s) Caveat,cursive;color:var(--ink-2)}
.thread-head button{background:none;border:0;color:var(--ink-3);font:var(--fs-xs) 'JetBrains Mono',monospace;text-decoration:underline;cursor:pointer;padding:4px 0}
.q{align-self:flex-end;max-width:80%;background:var(--sticky);color:var(--ink);border-radius:var(--r-bubble) var(--r-bubble) 3px var(--r-bubble);padding:9px 14px;font-size:var(--fs-m);line-height:1.4;box-shadow:0 2px 4px rgba(0,0,0,.08);transform:rotate(.6deg);animation:pop .25s ease-out both}
.answer{align-self:flex-start;max-width:88%;background:var(--card);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 3px;padding:12px 16px;animation:pop .3s ease-out both}
.answer p{margin:0;font-size:var(--fs-m);line-height:1.5;white-space:pre-line}
.answer > a{display:inline-block;vertical-align:middle;margin-top:10px;font-weight:600;color:var(--pen)}
.answer p a{color:var(--pen);overflow-wrap:anywhere}
.answer a:hover{color:var(--ink)}
.answer.thinking p{color:var(--ink-3)}
.drawer a{color:var(--soft)}.drawer a:hover{color:var(--sticky)}
.note{margin:18px 0 0;font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);color:var(--muted)}
.note a{color:var(--soft)}.note a:hover{color:var(--sticky)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* sections */
.block{padding:var(--space-section) 0 var(--space-section-end);border-top:1px dashed var(--rule)}
/* the handwritten label is the section heading (an h2), except in #building where a big headline follows it */
.label{margin:0 0 24px;font-family:Caveat,cursive;font-weight:500;font-size:var(--fs-hand-m);line-height:1.2;color:var(--sticky)}
#building .label{margin-bottom:8px}
.block h2:not(.label){margin:0 0 36px;font-size:var(--fs-h2);font-weight:600;letter-spacing:-.02em}
.paper{display:block;text-decoration:none;transform:rotate(var(--r,0deg));transition:transform .2s;box-shadow:var(--shadow-paper)}
.paper:not(.wrecked):hover{transform:rotate(0deg) scale(1.03)}
.tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:var(--tape);transform:rotate(-3deg)}
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px}
.polaroid{position:relative;background:var(--card);padding:14px 14px 20px;margin:0}
.still{display:flex;aspect-ratio:1/1;background:var(--tint,var(--hairline));align-items:center;justify-content:center;overflow:hidden}
/* a still can zoom in on its action: --zoom (scale) and --focus (the point it zooms toward), set inline on .still */
.still img{width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom,1));transform-origin:var(--focus,50% 50%)}
.polaroid .title{display:block;margin-top:12px;font-family:Caveat,cursive;font-weight:700;font-size:var(--fs-hand-l);color:var(--ink)}
.polaroid .line{display:block;font-size:var(--fs-s);color:var(--ink-2)}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}
.sticky{background:var(--sticky);color:var(--ink);padding:20px;min-height:170px}
.sticky .year{display:block;font-size:var(--fs-xs);font-weight:600}
.sticky .title{display:block;margin-top:6px;font-family:Caveat,cursive;font-weight:700;font-size:var(--fs-hand-m);line-height:1}
.sticky .line{display:block;margin-top:8px;font-size:var(--fs-s)}
div.sticky a{color:var(--ink);text-decoration:none}
/* links on a note stay ink: the title underlines, the already underlined demo link thickens */
div.sticky a.title:hover{text-decoration:underline}
.sticky .demo:hover{text-decoration-thickness:2px}
.sticky .demo{display:inline-block;margin-top:10px;font-weight:600;font-size:var(--fs-s);text-decoration:underline}
.drawer{margin:24px 0 0;font-family:Caveat,cursive;font-size:var(--fs-hand-s);color:var(--soft)}
/* a grid, so a row's polaroids stretch to its tallest caption and line up at the bottom */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px}
.photos .polaroid{padding:12px 12px 18px}
.photos .caption{display:block;margin-top:10px;font-family:Caveat,cursive;font-size:var(--fs-hand-s);line-height:1.1;color:var(--ink)}
/* photos are pinned to the desk (games get tape) */
/* a domed head lit from the top left: a white glint, the blue body darkening toward the rim, a darker lip underneath */
.photos .polaroid::before{content:'';position:absolute;top:-7px;left:50%;z-index:2;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 9%,transparent 24%),
    radial-gradient(circle at 40% 36%,color-mix(in srgb,var(--sticky),#fff 55%) 0,var(--sticky) 42%,color-mix(in srgb,var(--sticky),#000 30%) 78%,color-mix(in srgb,var(--sticky),#000 55%) 100%);
  box-shadow:inset -2px -3px 3px rgba(0,0,0,.22),0 2px 0 color-mix(in srgb,var(--sticky),#000 50%),1px 3px 3px rgba(0,0,0,.35)}
/* the pin stands off the paper, so its shadow falls a little down and to the right */
.photos .polaroid::after{content:'';position:absolute;top:5px;left:50%;z-index:1;width:18px;height:8px;margin-left:1px;border-radius:50%;
  background:rgba(0,0,0,.32);filter:blur(2px);transform:rotate(28deg)}
.games .still{aspect-ratio:16/9}

/* photo lightbox */
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,14,14,.94);color:var(--chalk)}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
.lightbox[open]{display:flex;align-items:center;justify-content:center;animation:pop .25s ease-out both}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:calc(100vw - 32px);pointer-events:none}
.lightbox img{max-width:calc(100vw - 140px);max-height:calc(100vh - 120px);width:auto;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);background:var(--card);padding:10px}
.lightbox figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 20px;pointer-events:auto}
#lb-title{font:700 var(--fs-hand-m) Caveat,cursive}
#lb-link{color:var(--sticky);font-weight:600;font-size:var(--fs-s)}
.lb-btn{position:absolute;width:56px;height:56px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--chalk);font-size:34px;line-height:1;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;margin-top:-28px}
.lb-next{right:16px;top:50%;margin-top:-28px}
@media (max-width:600px){
  .lightbox img{max-width:calc(100vw - 24px);padding:6px}
  .lb-prev,.lb-next{top:auto;bottom:16px;margin:0}
}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:24px 0 120px;border-top:1px solid var(--rule);font-size:var(--fs-s);color:var(--soft)}
.foot .links{display:flex;gap:20px}
.foot span{display:inline-block}

/* ---------- power-ups ---------- */
.wrecked{pointer-events:none}
.bite{display:inline-block}
.powerups{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 32px);
  background:var(--paper);color:var(--ink);padding:10px 12px;box-shadow:var(--shadow-float);transform:rotate(-1deg);animation:pop .3s ease-out both}
.powerups[hidden]{display:none}
.powerups-label{font-family:Caveat,cursive;font-weight:700;font-size:var(--fs-hand-s);margin-right:4px}
.powerup,.powerups-close{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:var(--r-control);background:var(--card);color:var(--ink);cursor:pointer}
.powerup[aria-pressed="true"]{background:var(--sticky)}
.powerups-close{flex:0 0 auto;border-color:transparent;background:none}
.powerups-close:hover{background:var(--hairline)}
.powerups svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.powerups svg .fill{fill:currentColor}
/* tooltip above the button, right-aligned so it grows into the page, not off its right edge */
.powerups [data-tip]::after{content:attr(data-tip);position:absolute;right:-2px;bottom:calc(100% + 10px);background:var(--card);color:var(--ink);box-shadow:var(--shadow-float);
  padding:6px 10px;border-radius:var(--r-control);font:400 var(--fs-xs) 'JetBrains Mono',monospace;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.powerups [data-tip]:focus-visible::after{opacity:1}
@media (hover:hover){.powerups [data-tip]:hover::after{opacity:1}.powerups:hover [data-tip]:not(:hover)::after{opacity:0}}
.reset{position:fixed;top:16px;right:16px;z-index:95;min-height:64px;padding:0 28px;background:var(--sticky);color:var(--ink);border:3px solid var(--paper);border-radius:var(--r-control);
  font:700 var(--fs-hand-m) Caveat,cursive;box-shadow:var(--shadow-float);cursor:pointer;transform:rotate(2deg);animation:pop .3s ease-out both}
.reset:hover{transform:rotate(0deg) scale(1.05)}
.reset[hidden]{display:none}
.powerup-hint{position:fixed;left:50%;top:24px;z-index:85;transform:translateX(-50%);background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--chalk);padding:10px 16px;border-radius:var(--r-control);
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);white-space:nowrap;pointer-events:none;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.powerup-hint[hidden]{display:none}
.boom-on,.boom-on *{cursor:crosshair!important}

/* car + marks */
.marks{position:absolute;left:0;top:0;z-index:55;pointer-events:none}
.fx{position:fixed;left:0;top:0;z-index:58;pointer-events:none}
.car{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:96px;height:48px;transform-origin:48px 24px;filter:drop-shadow(3px 6px 4px rgba(0,0,0,.4))}
.car svg{width:96px;height:48px;display:block}

/* paper plane */
.plane{position:fixed;left:0;top:0;z-index:70;pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.2,1)}

/* kabooom: the blast, its sparks and word, the page shake and the scorch mark */
@keyframes flash{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes spark{0%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(90px) scale(.2);opacity:0}}
@keyframes word{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}30%{opacity:1;transform:translate(-50%,-120%) scale(1.1) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-170%) scale(1) rotate(-8deg)}}
@keyframes shakeA{0%,100%{transform:none}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,2px)}}
@keyframes shakeB{0%,100%{transform:none}25%{transform:translate(6px,-3px)}50%{transform:translate(-5px,4px)}75%{transform:translate(3px,-2px)}}
.shakeA{animation:shakeA .3s}.shakeB{animation:shakeB .3s}
.blast{position:fixed;z-index:80;pointer-events:none;width:0;height:0}
.flash{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 20%,#ffd166 35%,#f2a33a 55%,rgba(239,91,75,0) 72%);animation:flash .6s ease-out forwards}
.ray{position:absolute;left:0;top:0;width:0;height:0}
.spark{position:absolute;left:0;top:-5px;width:14px;height:10px;border-radius:5px;animation:spark .7s cubic-bezier(.1,.7,.3,1) forwards}
.word{position:absolute;left:0;top:0;font-family:Caveat,cursive;font-weight:700;font-size:var(--fs-fx);color:#ffd166;white-space:nowrap;text-shadow:2px 2px 0 var(--fx-red);animation:word .9s ease-out forwards}
.scorch{position:absolute;z-index:1;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,10,10,.55) 0 22%,rgba(30,24,20,.3) 45%,rgba(0,0,0,0) 70%)}
/* a planted stick of dynamite: bottom of the stick sits on the click, the count floats above it */
@keyframes tick{0%{transform:scale(1.7)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes flicker{0%,100%{opacity:1;r:3.5}50%{opacity:.5;r:2}}
@keyframes jitter{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes drop{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
.dynamite{position:absolute;z-index:79;width:0;height:0;pointer-events:none}
.dynamite svg{position:absolute;left:-15px;top:-44px;filter:drop-shadow(2px 5px 3px rgba(0,0,0,.4));transform-origin:50% 100%;animation:drop .2s ease-out}
.dynamite.fizz svg{animation:jitter .12s linear infinite}
.dynamite .spark-dot{animation:flicker .18s linear infinite}
.dynamite .count{position:absolute;left:-19px;top:-86px;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--fx-red);
  display:flex;align-items:center;justify-content:center;font:700 var(--fs-hand-m)/1 Caveat,cursive;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:tick .35s ease-out}

/* gravity hole */
@keyframes holeIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes holeOut{from{transform:scale(1)}to{transform:scale(0)}}
@keyframes swirl{to{transform:rotate(360deg)}}
.hole-pos{position:fixed;left:0;top:0;z-index:65;pointer-events:none}
.hole{position:absolute;inset:0;animation:holeIn .5s cubic-bezier(.3,1.4,.6,1) both}
.hole.out{animation:holeOut .4s ease-in forwards}
.hole .swirl{position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,230,128,.35),rgba(255,255,255,0),color-mix(in srgb,var(--fx-red) 35%,transparent),rgba(255,255,255,0));animation:swirl 1.1s linear infinite}
.hole .core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#000 0 55%,#05070a 70%,rgba(0,0,0,0) 100%);box-shadow:0 0 50px 14px rgba(0,0,0,.6)}

/* touch d-pad for car and hole */
.pad{position:fixed;left:16px;bottom:16px;z-index:92;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:6px;touch-action:none}
.pad[hidden]{display:none}
.pad button{border:2px solid var(--ink);border-radius:var(--r-control);background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--ink);font-size:20px;touch-action:none;user-select:none}
.pad .up{grid-area:1/2}.pad .left{grid-area:2/1}.pad .brake{grid-area:2/2}.pad .right{grid-area:2/3}.pad .down{grid-area:3/2}

@media (max-width:600px){
  .hero{min-height:auto;padding:24px 0 56px}
  .ask{padding-left:14px}
  .ask button{padding:0 16px}
  .photos{grid-template-columns:repeat(2,1fr);gap:20px}
  .photos .polaroid{padding:8px 8px 12px}
  .photos .caption{font-size:var(--fs-hand-xs)}
  /* one slim row of buttons instead of a two-row slip; the group keeps its aria-label */
  .powerups{left:16px;right:16px;transform:none;flex-wrap:nowrap;justify-content:space-between;gap:6px;padding:6px 8px}
  .powerups-label{display:none}
  .powerup{flex:1 1 auto}
  /* the bar spans the screen, so every tooltip sits above its left edge instead of over its button */
  .powerup,.powerups-close{position:static}
  .powerups [data-tip]::after{left:0;right:auto}
  .reset{font-size:var(--fs-hand-s);min-height:52px;padding:0 18px}
}
/* never cover the chat while someone is typing into it */
body:has(#q:focus) .powerups{display:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flash,.spark,.word,.shakeA,.shakeB,.hole,.plane,.q,.answer,.lightbox[open],.powerups,.reset,.consent,.dynamite svg,.dynamite .count{animation-duration:.01s!important;transition:none!important}
  /* looping ones stop outright: a .01s loop would strobe */
  .hole .swirl,.dynamite.fizz svg,.dynamite .spark-dot{animation:none!important}
}

/* "▶ Drive the mini car" under a chat answer: the power-up only starts when the visitor clicks */
.answer .try{position:relative;display:inline-block;vertical-align:middle;margin:10px 0 0 16px;min-height:32px;padding:0 10px;border:2px solid var(--ink);border-radius:var(--r-control);background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:var(--fs-xs);cursor:pointer}
/* drawn at 32px so it sits inline with the link, but the hit area still reaches 44px */
.answer .try::after{content:'';position:absolute;inset:-8px -2px}
.answer p + .try{margin-left:0}
.answer .try:hover{background:color-mix(in srgb,var(--sticky),var(--card) 75%)}

/* cookie consent: a paper note pinned bottom left */
.consent{position:fixed;left:16px;bottom:16px;z-index:96;max-width:420px;background:var(--paper);color:var(--ink);padding:16px 18px;border-radius:var(--r-bubble);
  box-shadow:var(--shadow-float);font-size:var(--fs-s);line-height:1.5;animation:pop .3s ease-out both}
.consent p{margin:0 0 10px}
.consent-more{background:none;border:0;padding:0;color:var(--pen);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.consent-details{max-height:40vh;overflow-y:auto;font-size:var(--fs-xs);border-top:1px dashed var(--hairline);padding-top:10px;margin-bottom:6px}
.consent-details a{color:var(--pen)}
.consent-more:hover,.consent-details a:hover{color:var(--ink)}
.consent-actions{display:flex;gap:10px;justify-content:flex-end}
.consent-actions button{min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:var(--r-control);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.consent-actions [data-choice="granted"]{background:var(--ink);color:var(--card)}
@media (max-width:600px){.consent{left:16px;right:16px;bottom:16px;max-width:none}}
/* on phones the power-ups bar shares the bottom edge with the card, so it waits for an answer */
@media (max-width:600px){body:has(#consent) .powerups{display:none}}
/* a touch pad in use stays put and the card moves up above it (16px gap + 3 rows of 56px + 2 gaps of 6px + 16px) */
body:has(.pad:not([hidden])) .consent{bottom:212px}