/* Headings: Fredoka 600 (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted. */
@font-face{font-family:"Fredoka";src:url(/assets/fonts/fredoka-600.woff2?v=b62f2898) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{
  --bg:#fff8f2; --ink:#2b1d17; --muted:#6b5546;
  --pink:#ff5d8f; --pink-deep:#c7295f; --pink-ink:#a61e4d; --pink-light:#ffdbe7;
  --cream:#ffe9d6; --gold:#f6a623; --choc:#5a3825;
  --card:#ffffff; --ring:#c7295f; --maxw:1080px;
  --shadow:0 10px 30px rgba(90,56,37,.12);
  --accent:#c7295f; --surface:rgba(255,248,242,.96); --cap-bg:rgba(255,255,255,.92); color-scheme:light;
  --font-display:"Fredoka",ui-rounded,"Arial Rounded MT Bold",-apple-system,"Segoe UI",sans-serif;
  /* Motion tokens. Used only inside the no-preference block at the end. */
  --dur-ui:200ms; --dur-reveal:400ms; --dur-long:700ms; --dur-intro:1000ms; --dur-slide:5000ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --dur-steam:1600ms;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent)}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Off-screen upward, not sideways, so right-to-left pages get no sideways scroll. */
.skip{position:absolute;inset-inline-start:12px;top:-999px}
.skip:focus{top:12px;background:var(--card);padding:8px 14px;display:inline-flex;align-items:center;min-height:44px;border-radius:8px;box-shadow:var(--shadow);z-index:50}
:where(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

header.nav{position:sticky;top:0;z-index:20;background:var(--surface);backdrop-filter:blur(8px);border-bottom:4px solid var(--pink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap}
/* Phones: breathing room above the sign's icing drips. */
@media (max-width:560px){.nav .wrap{padding-top:10px}}
.brand{display:flex;align-items:center;min-height:44px;gap:10px;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand img{display:block;height:40px;width:auto}
nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:10px 8px}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:16px}
.btn.primary{background:var(--pink-deep);color:#fff}
.btn.primary:hover{background:var(--pink-ink)}
.btn.ghost{border-color:var(--choc);color:var(--choc);background:transparent}
.btn.small{min-height:40px;padding:8px 16px;font-size:15px}

.hero{padding:56px 0 40px;position:relative;isolation:isolate;overflow:hidden}
/* Temporary sky (the sky module replaces it): a soft dawn, a night sky in
   dark mode. Decorative, behind everything in the hero. */
/* Live sky over Oakland (sky/sky.js sets the colors from the real sun),
   mixed toward the page background so the hero text keeps its contrast. */
.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;--sky-mix:24%;background:linear-gradient(180deg,color-mix(in srgb,var(--sky-top,#ff8fb1) var(--sky-mix),var(--bg)) 0%,color-mix(in srgb,var(--sky-bottom,#ffe9d6) var(--sky-mix),var(--bg)) 35%,var(--bg) 75%)}
.sky::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sun-x,70%) var(--sun-y,20%),color-mix(in srgb,var(--sky-glow,#f6a623) 30%,transparent),transparent 35%)}
.sky::after{content:"";position:absolute;inset:0 0 55% 0;opacity:calc(var(--star-opacity,0) * .9);background-image:radial-gradient(circle at 8% 22%,#fff8f2 1.2px,transparent 1.8px),radial-gradient(circle at 21% 58%,#fff8f2 1px,transparent 1.6px),radial-gradient(circle at 34% 14%,#fff8f2 1.4px,transparent 2px),radial-gradient(circle at 47% 44%,#fff8f2 1px,transparent 1.6px),radial-gradient(circle at 63% 18%,#fff8f2 1.2px,transparent 1.8px),radial-gradient(circle at 76% 52%,#fff8f2 1px,transparent 1.6px),radial-gradient(circle at 88% 26%,#fff8f2 1.4px,transparent 2px),radial-gradient(circle at 95% 64%,#fff8f2 1px,transparent 1.6px)}
.weather{margin:6px 0 0;line-height:1.5;min-height:1.5em;font-weight:600;color:var(--muted);visibility:hidden}
.weather.on{visibility:visible}
.neon{margin:16px 0 0;line-height:0}
.neon img{height:clamp(40px,7vw,52px);width:auto;background:#1c1412;border-radius:14px;padding:4px 6px}
/* AR: over the donut stage, so showing it shifts nothing. */
.donut-stage{position:relative}
.ar-row{position:absolute;left:8px;bottom:8px;margin:0;display:flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:999px;background:var(--card);border:2px solid var(--choc);color:var(--choc);font-weight:700;font-size:15px}
.ar-row[hidden]{display:none}
.ar-link{line-height:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.ar-cap{cursor:pointer}
/* Oakland skyline band and the oak divider: day/night art by theme. */
.pano{--pano-h:clamp(120px,22vw,260px);position:relative;height:var(--pano-h);overflow:hidden;margin:8px 0 0}
.pano img,.pano svg{position:absolute;top:0;left:calc(50% - var(--pano-h) * 2.5);height:100%;width:calc(var(--pano-h) * 5);max-width:none}
.pano .pano-night,.oak .oak-dark{display:none}
.oak{max-width:1200px;margin:8px auto;padding:0 16px;line-height:0}
.oak img{width:100%;height:auto}
.night-card{display:grid;gap:20px}
.night-store{width:100%;height:auto;border-radius:16px}
@media (min-width:760px){.night-card{grid-template-columns:1.1fr 1fr;align-items:center}}
.menu-chips a img{margin-right:6px;flex:none}
.donut-stage{position:relative;margin:0 auto;width:100%;max-width:440px;aspect-ratio:1}
.donut-stage img,.donut-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.donut-stage canvas{touch-action:pan-y pinch-zoom}
.donut-stage.is-3d .donut-still{opacity:0}
.slides-band{padding:8px 0 32px}
/* First-visit intro: a pink box lid across the top of the hero (never over
   the donut or the text), opened once; site.js removes it afterwards. */
.intro-lid{position:absolute;left:0;right:0;top:0;height:48px;z-index:2;background:var(--pink);display:flex;align-items:center;justify-content:center;transform-origin:top;pointer-events:none}
/* Live clock line: two lines reserved, shown once the real time is in. */
.clock{min-height:3.2em;margin:14px 0 0;font-weight:700;color:var(--ink);visibility:hidden}
.clock.ready{visibility:visible}
.clock-late{display:block;color:var(--pink-ink)}
/* Night shift: a dark card in both themes (the night is the point). */
.night-card{background:#1c1412;color:#fbeee4;border-radius:24px;padding:28px;border:3px solid var(--pink)}
.night-card h2{color:#fbeee4;text-shadow:0 0 6px rgba(255,93,143,.55),0 0 16px rgba(255,93,143,.3)}
.night-card .lead{color:#fbeee4}
.night-facts{margin:0 0 20px;padding-left:20px;font-weight:700}
.night-facts li{margin:4px 0}
.night-card .btn.ghost{border-color:#f3d9c4;color:#f3d9c4}
.slides-band .slides{max-width:720px}
@media (max-width:760px){.hero .donut-stage{order:-1;max-width:240px;margin-bottom:-8px}}
.hero .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:760px){.hero .grid{grid-template-columns:1fr}}
/* Category pages (/donuts, /breakfast, /coffee, /groups): photo-led hero. */
.page-hero{padding:48px 0 16px}
.page-hero .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:760px){.page-hero .grid{grid-template-columns:1fr}}
.page-hero h1{font-size:clamp(34px,7vw,56px);line-height:1.08;margin:0 0 8px;color:var(--choc)}
.page-hero .sub{font-size:clamp(17px,2.5vw,20px);color:var(--muted);margin:0 0 24px}
.page-photo{position:relative;margin:0;min-width:0}
.page-photo .photo{aspect-ratio:4/3;object-fit:cover}
.more ul{list-style:none;margin:0;padding:0}
.more h2{font-size:24px}
h1,h2,h3{font-family:var(--font-display);font-weight:600}
.hero h1{font-size:clamp(34px,7vw,60px);line-height:1.08;margin:.15em 0;letter-spacing:-.01em;color:var(--choc)}
.hero p.sub{font-size:clamp(17px,2.5vw,20px);color:var(--muted);margin:0 0 24px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink);background:var(--pink-light);padding:4px 10px;border-radius:999px}

/* Decorative sprinkles (static; the element is aria-hidden). */
.sprinkles{height:24px;background:url(/assets/img/sprinkles.svg?v=e8088f0e) repeat-x center/120px 24px}

.photo-todo{border:2px dashed var(--gold);border-radius:20px;background:#fffaf0;color:#7a5b00;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-weight:600}

section{padding:48px 0}
h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.01em;margin:0 0 8px;color:var(--choc)}
.lead{color:var(--muted);max-width:620px;margin:0 0 24px}

.menu-list li,.best{position:relative;isolation:isolate}
.best-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.best{background:var(--card);border:1px solid var(--cream);border-top:6px solid var(--pink);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);padding:0 0 18px}
.best-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0 0 12px}
.best h3,.best p{margin-left:18px;margin-right:18px}
.best h3{margin-top:0;margin-bottom:4px;font-size:20px}
.best p{margin-top:0;margin-bottom:4px;color:var(--muted);font-size:15px}
.best .price{color:var(--accent)}
.made{padding:8px 0 24px}
.facts-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.facts-list li{background:var(--pink-light);border-radius:14px;padding:14px 16px;font-weight:700;color:var(--ink)}
.big-orders{font-weight:700;margin:0 0 20px}
.band a,.big-orders a{color:var(--pink-ink)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pick{background:var(--card);border:1px solid var(--cream);border-top:6px solid var(--pink);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.pick h3{margin:0 0 4px;font-size:19px}
.pick p{margin:0;color:var(--muted);font-size:15px}
.price{font-weight:800;color:var(--accent);white-space:nowrap}

.menu-cat{margin:0 0 32px}
.menu-cat h2{font-size:24px;margin:0 0 6px}
.menu-cat h2::after{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--pink);margin-top:4px}
.menu-cat .note{color:var(--muted);margin:0 0 12px;font-size:15px}
.menu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 28px}
.menu-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--cream)}
.menu-list .name{font-weight:600}
.menu-list .desc{display:block;color:var(--muted);font-size:14px;font-weight:400}

.band{background:var(--pink-light);border-radius:24px;padding:28px}
.band .lead{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--cream);border-top:6px solid var(--pink);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{margin:0 0 8px}
.todo-note{background:#fff3cd;border:1px solid var(--gold);color:#7a5b00;border-radius:10px;padding:8px 12px;font-size:14px;margin-top:10px}

footer{padding:0 0 36px;color:var(--ink);background:var(--pink-light);font-size:15px}
footer .sprinkles{margin-bottom:28px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.stamp{width:56px;height:56px;flex:none;border-radius:50%}
.sign-logo{display:block;height:80px;width:auto;flex:none}
footer .logo-night{display:none}
.night-store-pic{display:block}

/* shared page helpers */
.narrow{max-width:640px}
.page-title{font-size:clamp(32px,6vw,48px);margin:0 0 12px}

/* photos */
.photo{width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow)}
.menu-list li.has-thumb{align-items:center}
.menu-list li.has-thumb .name{flex:1;min-width:0}
.thumb-box{display:block;width:64px;height:48px;border-radius:10px;overflow:hidden;flex:none}
.thumb{display:block;width:100%;height:100%;object-fit:cover}
.thumb-empty{background:var(--cream)}
/* Rows without a Clover photo: the drawn icon for the kind, on the tile colour. */
.thumb-icon{background:var(--cream);display:flex;align-items:center;justify-content:center}
.thumb-icon img{width:60%;height:auto;max-height:80%}

/* Hero slides: CSS scroll-snap; JS only adds auto-advance and controls. */
.slides{position:relative;padding:0 0 54px;min-width:0;view-timeline:--hero block}
.brand{view-transition-name:brand}
.hero .grid>*{min-width:0}
.slides-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:20px;box-shadow:var(--shadow);scrollbar-width:none;overscroll-behavior-x:contain}
.slides-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;margin:0}
.slide-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.slide-cap{position:absolute;left:12px;bottom:12px;margin:0;background:var(--cap-bg);color:var(--ink);font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px}
.slides-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;margin:0}
.slides-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--choc);background:var(--card);color:var(--choc);font-size:24px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ico-pause{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.slides-toggle[aria-pressed="true"] .ico-pause{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor;margin-left:4px}
.slides-count{min-width:64px;text-align:center;font-weight:700;color:var(--choc);font-variant-numeric:tabular-nums}
.slide-img:not([src]){background:var(--cream)}

/* Motion. Every transition, animation and transform lives in this block:
   with prefers-reduced-motion: reduce (or no preference support) nothing
   moves. Only transform and opacity animate; durations are tokens. */
@media (prefers-reduced-motion: no-preference){
  /* Smooth only once the page has landed (site.js sets data-smooth after load):
     a page opened at an anchor (/#visit from another page) jumps straight
     there; a smooth scroll on load was cut short and left readers at the
     top or ~2,000 px above it. */
  html[data-smooth]{scroll-behavior:smooth}
  .slides-track{scroll-behavior:smooth}
  .btn{transition:transform var(--dur-ui) var(--ease-out)}
  .btn:hover,.btn:focus-visible{transform:translateY(-2px)}
  .thumb{transition:transform var(--dur-ui) var(--ease-out)}
  .menu-list li:hover .thumb{transform:scale(1.05)}
  .reveal{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  .reveal.pending{opacity:0;transform:translateY(16px)}
  .order-bar{transition:transform var(--dur-ui) var(--ease-out)}
  .order-bar:not(.show){display:flex;visibility:hidden;transform:translateY(110%)}
  /* Glaze shine: a soft highlight follows the pointer over menu rows and
     best-seller cards (background-position only, set per frame). */
  @media (hover:hover) and (pointer:fine){
    .menu-list li::before,.best::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 65%) no-repeat;background-size:220px 220px;background-position:var(--gx,-999px) var(--gy,-999px);opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}
    .menu-list li.lit::before,.best.lit::before{opacity:1}
  }
  /* The intro lid swings open once. */
  .intro-lid.play{animation:qd-lid var(--dur-intro) var(--ease-out) 1 both}
  @keyframes qd-lid{0%{transform:perspective(700px) rotateX(0);opacity:1}70%{transform:perspective(700px) rotateX(-100deg);opacity:1}100%{transform:perspective(700px) rotateX(-110deg);opacity:0}}
  /* The box lid swings shut when the 12th donut lands. */
  .box-lid{transition:transform var(--dur-long) var(--ease-back)}
  .box:not(.closed) .box-lid{transform:perspective(600px) rotateX(100deg)}
  /* Page-to-page: a quick cross-fade; photos with the same name morph. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-ui)}
  /* Photo depth: the hero photos drift a little as the hero scrolls by. */
  @supports (animation-timeline: view()){
    .slide-img{animation:qd-depth linear both;animation-timeline:--hero;animation-range:cover 0% cover 100%}
  }
  @keyframes qd-depth{from{transform:translateY(-3%) scale(1.08)}to{transform:translateY(3%) scale(1.08)}}
  /* Tasty hovers, mouse and trackpad only. */
  @media (hover:hover) and (pointer:fine){
    .menu-list li:hover .thumb{animation:qd-wiggle var(--dur-reveal) var(--ease-out) 1}
    .btn.primary{position:relative;overflow:hidden}
    .btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
    .btn.primary:hover::after{transform:translateX(120%);transition:transform var(--dur-long) var(--ease-out)}
    .pick,.best{transition:transform var(--dur-ui) var(--ease-out)}
  }
  @keyframes qd-wiggle{0%{transform:scale(1.05) rotate(0)}30%{transform:scale(1.05) rotate(-5deg)}60%{transform:scale(1.05) rotate(4deg)}100%{transform:scale(1.05) rotate(0)}}
}

/* /menu: the header scrolls away and the section bar sticks instead. */
.menu-page header.nav{position:static}
.menu-bar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;margin:0 -16px 20px;padding:8px 16px;background:var(--surface);border-bottom:2px solid var(--pink-light)}
.menu-chips{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;padding:2px}
.menu-chips::-webkit-scrollbar{display:none}
.menu-chips a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--choc);color:var(--choc);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;background:var(--card)}
.menu-chips a[aria-current]{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.menu-search{flex:none}
.menu-search input{width:112px;min-height:44px;padding:0 12px;border-radius:999px;border:2px solid var(--choc);font:inherit;font-size:16px;background:var(--card);color:var(--ink)}
@media (min-width:760px){.menu-search input{width:220px}}
/* With the mic inside, the box is wide enough for the whole placeholder. */
.menu-search.has-voice input{width:156px}
@media (min-width:760px){.menu-search.has-voice input{width:240px}}
.menu-cat{scroll-margin-top:76px}
.menu-none{font-weight:700;color:var(--choc)}

/* Click-to-load map in the Visit address card. */
.card .row{gap:8px}
.map-slot iframe{display:block;width:100%;height:260px;border:0;border-radius:12px;margin-top:12px}
.map-slot a{display:inline-block;margin-top:6px;font-size:14px}

/* Touch-only links (texting the shop): hidden with a mouse or trackpad. */
@media (pointer:fine){.coarse-only{display:none !important}}

/* Build your dozen (/groups). */
.builder{padding:24px 0 8px}
.box-ui{border:0;margin:0;padding:0;min-width:0}
.box-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media (max-width:760px){.box-grid{grid-template-columns:1fr}}
.pick-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pick-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:6px 10px;border:2px solid var(--cream);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pick-btn .meta{display:flex;flex-direction:column;flex:1;min-width:0}
.pick-btn .name{font-weight:600;font-size:15px;line-height:1.25}
.pick-btn .price{font-size:14px}
.pick-btn:disabled{opacity:.55;cursor:default}
.box{position:relative;background:var(--pink-light);border:3px solid var(--pink);border-radius:18px;padding:14px}
.box h3{margin:0 0 10px}
.box-slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.slot{min-height:96px;border-radius:14px;background:var(--card);border:2px dashed var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
.slot.filled{border-style:solid;border-color:var(--gold)}
.slot-n{color:var(--muted);font-weight:700}
.slot-name{font-weight:700;font-size:14px;line-height:1.2}
.slot-tools{display:flex;gap:2px;margin-top:6px}
.slot-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--choc);background:transparent;color:var(--choc);font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0}
.slot-btn:disabled{opacity:.35;cursor:default}
.box-lid{position:absolute;left:-3px;right:-3px;top:-3px;height:48px;background:var(--pink);border-radius:18px 18px 0 0;display:flex;align-items:center;justify-content:center;transform-origin:top}
.box:not(.closed) .box-lid{visibility:hidden}
.box-count{font-weight:800;font-size:20px;margin:12px 0 0;font-variant-numeric:tabular-nums}
.box-total{font-weight:800;margin:4px 0 0;font-variant-numeric:tabular-nums}
.box-actions{margin-top:12px}
.pick-sum{display:none;font-weight:800;font-variant-numeric:tabular-nums;margin:0 0 10px}
@media (max-width:760px){.pick-sum{display:block;position:sticky;top:0;z-index:5;background:var(--surface);padding:8px 0}}
/* /groups at phone width: like /menu, the header scrolls away so the count
   bar can stick — both sticky at top:0 put the bar (z 5) behind the 166 px
   wrapped header (z 20), fully hidden after a scroll down, then up. */
@media (max-width:760px){.box-page header.nav{position:static}}
.fly{position:fixed;z-index:60;pointer-events:none;width:64px;height:48px}

/* The open sign (open 24 hours) and the closure notice. */
.open-now{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-weight:700;color:var(--ink)}
.open-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.open-now.is-open .open-dot{background:#1f8a4c}
.notice{background:#a61e4d;color:#fff;font-weight:700;padding:10px 0;text-align:center}

/* Phone order bar: fixed at the bottom under 768px, shown by site.js once
   the page's own order buttons are out of view. Pages that carry it keep
   room for it (and the safe area) so it never covers the footer. */
.order-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:4px solid var(--pink);box-shadow:0 -6px 20px rgba(90,56,37,.12)}
.order-bar .btn{flex:1}
.order-bar:not(.show){display:none}
@media (max-width:767px){body.with-order-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media (min-width:768px){.order-bar{display:none !important}}

/* Night mode: follows the phone, or the sun/moon switch (data-theme on
   <html>, set before first paint). The two blocks below must stay equal. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1c1412; --ink:#fbeee4; --muted:#d9c3b4; --pink-ink:#ffa3c0; --pink-light:#3b1f2a; --cream:#3a2b25; --choc:#f3d9c4; --card:#2a1f1b; --ring:#ff8fb1; --accent:#ff8fb1; --surface:rgba(28,20,18,.94); --cap-bg:rgba(28,20,18,.88); --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;}}
:root[data-theme="dark"]{--bg:#1c1412; --ink:#fbeee4; --muted:#d9c3b4; --pink-ink:#ffa3c0; --pink-light:#3b1f2a; --cream:#3a2b25; --choc:#f3d9c4; --card:#2a1f1b; --ring:#ff8fb1; --accent:#ff8fb1; --surface:rgba(28,20,18,.94); --cap-bg:rgba(28,20,18,.88); --shadow:0 10px 30px rgba(0,0,0,.45); color-scheme:dark;}
.brand .logo-night{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-day{display:none}:root:not([data-theme="light"]) .logo-night{display:block}}
:root[data-theme="dark"] .logo-day{display:none}
:root[data-theme="dark"] .logo-night{display:block}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle[data-pending]{visibility:hidden}
.theme-toggle .ico-sun{display:none}
.theme-toggle[aria-pressed="true"] .ico-sun{display:block}
.theme-toggle[aria-pressed="true"] .ico-moon{display:none}
/* Neon at night: headings glow (static, never flicker); the open sign glows
   green when open and dims when closed. Text colors keep AA on their own. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sky{--sky-mix:40%}:root:not([data-theme="light"]) .pano .pano-day,:root:not([data-theme="light"]) .oak .oak-light{display:none}:root:not([data-theme="light"]) .pano .pano-night,:root:not([data-theme="light"]) .oak .oak-dark{display:block}:root:not([data-theme="light"]) :is(h1,h2){text-shadow:0 0 6px rgba(255,93,143,.55),0 0 16px rgba(255,93,143,.3)}:root:not([data-theme="light"]) .open-now.is-open .open-text{color:#8affc1;text-shadow:0 0 6px rgba(138,255,193,.6),0 0 14px rgba(138,255,193,.3)}:root:not([data-theme="light"]) .open-now:not(.is-open) .open-text{color:var(--muted)}}
:root[data-theme="dark"] .sky{--sky-mix:40%}
:root[data-theme="dark"] .pano .pano-day,:root[data-theme="dark"] .oak .oak-light{display:none}
:root[data-theme="dark"] .pano .pano-night,:root[data-theme="dark"] .oak .oak-dark{display:block}
:root[data-theme="dark"] .menu-list li::before,:root[data-theme="dark"] .best::before{background-image:radial-gradient(circle,rgba(255,143,177,.22),rgba(255,143,177,0) 65%)}
:root[data-theme="dark"] :is(h1,h2){text-shadow:0 0 6px rgba(255,93,143,.55),0 0 16px rgba(255,93,143,.3)}
:root[data-theme="dark"] .open-now.is-open .open-text{color:#8affc1;text-shadow:0 0 6px rgba(138,255,193,.6),0 0 14px rgba(138,255,193,.3)}
:root[data-theme="dark"] .open-now:not(.is-open) .open-text{color:var(--muted)}

/* Print: reveal items waiting off-screen must still print. */
@media print{.reveal,.reveal.pending{opacity:1 !important;transform:none !important;transition:none !important}.slides-ctrl,.order-bar{display:none !important}}

/* Lane 6b: Today's pick, the craving quiz, voice search, the fly-in map and
   "How far am I?". JS-filled parts keep their space (visibility, not hidden). */
.js-wait{visibility:hidden}
.picks{padding:8px 0 32px}
.picks-grid{display:grid;gap:20px}
@media (min-width:760px){.picks-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start}}
.pick-card{background:var(--card);border:2px solid var(--pink-light);border-radius:20px;padding:16px}
.pick-title{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink);margin:0 0 10px}
.pick-photo{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--pink-light)}
.pick-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pick-name{margin:12px 0 4px}
.pick-price{margin:0 0 8px}
.quiz-step{border:0;margin:0;padding:0;min-width:0}
.quiz-step legend{font-weight:700;font-size:18px;margin:0 0 10px;padding:0}
.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quiz-choices .btn{width:100%;min-height:48px;white-space:normal;font:inherit;font-weight:700;cursor:pointer}
.quiz-picks{list-style:none;margin:8px 0;padding:0;display:grid;gap:10px}
.quiz-picks a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);text-decoration:none;font-weight:700}
.quiz-picks img{width:64px;height:48px;object-fit:cover;border-radius:10px;flex:none}
.quiz-picks .price{margin-left:auto}
.quiz-result:focus{outline:none}
.menu-search{position:relative}
.menu-search.has-voice input{padding-right:44px}
.voice-btn{position:absolute;right:2px;top:50%;margin-top:-22px;width:44px;height:44px;border:0;border-radius:999px;background:none;color:var(--choc);display:flex;align-items:center;justify-content:center;cursor:pointer}
.voice-btn[hidden]{display:none}
.voice-btn[aria-pressed="true"]{color:var(--pink-deep)}
.voice-toast{position:fixed;left:16px;right:16px;bottom:96px;z-index:30;margin:0 auto;max-width:420px;padding:10px 14px;border-radius:14px;background:var(--choc);color:#fff8f2;font-weight:600;text-align:center}
.voice-toast[hidden]{display:none}
.menu-list li[id]{scroll-margin-top:96px}
.visit-extra{margin-top:20px;display:grid;gap:8px}
.flyin-wrap{position:relative;isolation:isolate;max-width:640px;width:100%}
.flyin{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--map-water,#a9d5ea)}
.flyin .qdf-osm{z-index:2}
.flyin-go{position:absolute;inset:0;z-index:1;border-radius:16px}
.btn.far-btn{min-height:44px}
.far{margin:4px 0 0;min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--map-water:#1f3a4d;--map-land:#2a1f1b;--map-road:#c98a2e;--map-bridge:#e6d3c4;--map-pin:#ff8fb1;--map-water-ink:#cfe6f2;--cap-bg:#1c1412ee}}
:root[data-theme="dark"]{--map-water:#1f3a4d;--map-land:#2a1f1b;--map-road:#c98a2e;--map-bridge:#e6d3c4;--map-pin:#ff8fb1;--map-water-ink:#cfe6f2;--cap-bg:#1c1412ee}
/* Language menu: a tap-first <details>; the list drops under the globe. */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 8px;cursor:pointer;font-weight:700;color:var(--muted);border-radius:999px}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu[open] summary,.lang-menu summary:hover{color:var(--ink)}
nav .lang-menu ul{position:absolute;inset-inline-end:0;top:100%;z-index:40;margin:4px 0 0;padding:6px;display:grid;gap:2px;min-width:190px;background:var(--card);border:2px solid var(--pink-light);border-radius:14px;box-shadow:0 10px 30px rgba(28,20,18,.18)}
nav .lang-menu a{justify-content:flex-start;width:100%;padding:0 12px;border-radius:10px;color:var(--ink);white-space:nowrap}
nav .lang-menu a[aria-current]{color:var(--pink-ink);font-weight:700}
/* Phones: the nav wraps, so the list spans the screen under the globe (no layout read needed). */
@media (max-width:560px){nav .lang-menu ul{position:fixed;top:auto;inset-inline:16px;min-width:0}}

/* Right-to-left pages: a phone number never wraps; in a flex button the
   space before it is trimmed, so it keeps a gap of its own. */
a[href^="tel:"] bdi{white-space:nowrap}
.btn:has(> bdi){column-gap:.3em}
[dir="rtl"] .slot-name{unicode-bidi:isolate;direction:ltr}
/* The box lid's 3D turn must not widen the page (tablet widths). */
.box-col{overflow-x:clip}
/* Print: the page's words and prices on white paper, whatever the theme.
   No navigation, buttons, search or decorations; theme colours reset. */
@media print{
  :root:root:root{--bg:#fff8f2;--ink:#2b1d17;--muted:#6b5546;--pink-ink:#a61e4d;--pink-light:#ffdbe7;--cream:#ffe9d6;--choc:#5a3825;--card:#ffffff;--ring:#c7295f;--accent:#c7295f;--surface:rgba(255,248,242,.96);--cap-bg:rgba(255,255,255,.92);--shadow:0 10px 30px rgba(90,56,37,.12);color-scheme:light;--map-water:#a9d5ea;--map-land:#fff3e4;--map-road:#f0a23b;--map-bridge:#6b5546;--map-pin:#ff5d8f;--map-water-ink:#1f5673}
  header.nav,.theme-toggle,.lang-menu,.menu-bar,.voice-btn,.voice-toast,.btn,button,.row,.ar-row,.sprinkles,.intro-lid,.weather,.far,.flyin-wrap,.picks,.skip,.thumb-icon,.thumb-empty{display:none !important}
  *{text-shadow:none !important;box-shadow:none !important}
  body{background:#fff !important;color:#2b1d17 !important}
}

/* Oakland: the home strip, the timeline, the gallery, the credits. */
.oak-band{padding:8px 0 24px}
.oak-strip{list-style:none;margin:0 0 16px;padding:0 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,80%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
@media (min-width:760px){.oak-strip{grid-auto-columns:360px}}
.oak-strip > li{scroll-snap-align:start}
.oak-fig{margin:0}
.oak-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.oak-fig figcaption{margin-top:8px;display:grid;gap:4px}
.oak-fact{font-weight:600}
.oak-credit{color:var(--muted);font-size:13px}
.oak-credit a{color:inherit}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:28px;max-width:720px}
.tl-item{border-inline-start:4px solid var(--pink);padding-inline-start:16px}
.tl-year{margin:0;font-family:var(--font-display);font-weight:600;font-size:28px;color:var(--pink-ink)}
.tl-item h3{margin:4px 0 8px}
.tl-item .oak-fig{margin:8px 0}
.tl-art{display:block;max-width:560px;margin:8px 0;border-radius:16px;overflow:clip;line-height:0}
.tl-art img{display:block;width:100%;height:auto}
.tl-src{color:var(--muted);font-size:14px}
.tl-src a{color:inherit}
.oak-gallery{display:grid;gap:24px}
@media (min-width:760px){.oak-gallery{grid-template-columns:1fr 1fr}}
.credits{padding-inline-start:20px;display:grid;gap:10px}
.credits a{color:var(--accent)}
.foot-link{color:inherit}

/* Lane 9: the page as a day, and scroll-driven motion (CSS scroll
   timelines). Only where the browser supports them and motion is welcome;
   anywhere else everything rests in place. Transform and opacity only, and
   opacity only on decorative layers: text is never see-through, so its
   contrast holds at every scroll position. */
.day-sky{position:fixed;inset:0;z-index:-1;pointer-events:none}
.day-sky i{position:absolute;inset:0;opacity:0}
.d-now{background:linear-gradient(180deg,var(--sky-top,#ff8fb1),var(--sky-bottom,#ffe9d6))}
.d-noon{background:linear-gradient(180deg,#bfe3f7,#fff8f2 80%)}
.d-sunset{background:linear-gradient(180deg,#ffb38a,#ff8fb1 55%,#fff8f2)}
.d-night{background:linear-gradient(180deg,#1d1b4f,#3b1f4a)}
/* Dark theme: the page is already night; the day only tints it lightly. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .day-sky{opacity:.45}}
:root[data-theme="dark"] .day-sky{opacity:.45}
.neon-end{margin:24px 0 0}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* a: now -> noon -> sunset -> night as the page scrolls */
    .day-sky i{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root)}
    .d-now{animation-name:qd-day-now}
    .d-noon{animation-name:qd-day-noon}
    .d-sunset{animation-name:qd-day-sunset}
    .d-night{animation-name:qd-day-night}
    @keyframes qd-day-now{0%{opacity:.22}15%{opacity:.22}28%{opacity:0}100%{opacity:0}}
    @keyframes qd-day-noon{0%{opacity:0}12%{opacity:0}28%{opacity:.2}45%{opacity:.2}58%{opacity:0}100%{opacity:0}}
    @keyframes qd-day-sunset{0%{opacity:0}45%{opacity:0}60%{opacity:.22}74%{opacity:.22}86%{opacity:0}100%{opacity:0}}
    @keyframes qd-day-night{0%{opacity:0}74%{opacity:0}92%{opacity:.16}100%{opacity:.16}}
    /* ... and at night the sign at the bottom lights up (two flickers, then on) */
    .neon-end{animation:qd-neon-on linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes qd-neon-on{0%{opacity:.1}45%{opacity:.1}50%{opacity:.8}56%{opacity:.25}64%{opacity:1}70%{opacity:.45}80%{opacity:1}100%{opacity:1}}
    /* d: headings and lines rise into place */
    main :is(h2,.lead,.oak-fact,.tl-text,.tl-year){animation:qd-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes qd-rise{from{transform:translateY(22px)}to{transform:none}}
    /* Z2: home sections zoom in as they enter and ease back as they leave */
    :is(.slides-band,#best,.picks,.made,#groups,#visit,.night-shift){animation:qd-zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes qd-zoom{0%{transform:scale(.94)}20%{transform:none}80%{transform:none}100%{transform:scale(.97)}}
    /* c + Z3: Oakland and best-seller photos push in as they cross the screen */
    .oak-fig,.best{overflow:clip}
    .oak-fig{border-radius:16px}
    :is(.oak-img,.best-img,.tl-art img){animation:qd-push linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes qd-push{from{transform:scale(1)}to{transform:scale(1.12)}}
    /* Z5: the skyline starts close on the port cranes and zooms out to the whole city */
    .pano :is(img,svg){transform-origin:58% 70%;animation:qd-skyline linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    @keyframes qd-skyline{from{transform:scale(1.7)}to{transform:scale(1)}}
    /* h: menu icons roll in */
    .thumb-icon img{animation:qd-roll linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    [dir="rtl"] .thumb-icon img{animation-name:qd-roll-rtl}
    @keyframes qd-roll{from{transform:translateX(-18px) rotate(-200deg)}to{transform:none}}
    @keyframes qd-roll-rtl{from{transform:translateX(18px) rotate(200deg)}to{transform:none}}
    /* Z4: the night storefront pushes in toward the lit window and ends on
       its OPEN sign (tall art on phones, wide from 760 px). */
    .night-store-pic{overflow:clip;border-radius:16px}
    .night-store{transform-origin:40% 69%;animation:qd-storefront linear both;animation-timeline:view();animation-range:cover 15% cover 85%}
    @media (min-width:760px){.night-store{transform-origin:45.5% 64%}}
    @keyframes qd-storefront{from{transform:scale(1)}to{transform:scale(2.2)}}
    /* g: the Oakland strip becomes a pinned reel: while the band fills the
       screen, scrolling down moves the photos sideways. */
    .oak-band{height:260vh;view-timeline-name:--oak-reel}
    .oak-band > .wrap{position:sticky;top:72px;overflow:clip}
    .oak-strip{overflow:visible;width:max-content;grid-auto-columns:min(78vw,360px);animation:qd-reel linear both;animation-timeline:--oak-reel;animation-range:contain 0% contain 100%}
    [dir="rtl"] .oak-strip{animation-name:qd-reel-rtl}
    @keyframes qd-reel{from{transform:none}to{transform:translateX(calc(-100% + min(100vw, var(--maxw)) - 32px))}}
    @keyframes qd-reel-rtl{from{transform:none}to{transform:translateX(calc(100% - min(100vw, var(--maxw)) + 32px))}}
  }
}

/* Lane 9c: the fun modules' boxes and the donut journey. */
.hero > .wrap{position:relative}
.speed-layer{position:absolute;inset:0;pointer-events:none}
.scroll-donut{position:fixed;right:12px;bottom:96px;width:48px;height:48px;z-index:25}
@media (min-width:768px){.scroll-donut{bottom:20px}}
.journey{position:relative;padding:24px 0}
.journey-stage{position:relative;width:min(80vw,440px);margin:0 auto;aspect-ratio:1/1.25}
.journey-still,.journey-canvas{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1}
.journey.is-ready .journey-still{visibility:hidden}
/* The pink box the donut drops into, in front of the canvas's bottom edge. */
.journey-box{position:absolute;left:10%;right:10%;bottom:0;height:24%;background:var(--pink);border-radius:6px 6px 14px 14px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08)}
.journey-lid{position:absolute;left:-4%;right:-4%;top:-10px;height:14px;border-radius:6px;background:var(--pink-deep)}
@media (prefers-reduced-motion: no-preference){
  /* Pinned only once the 3D donut mounts (journey-host.js adds .is-3d). */
  .journey.is-3d{height:300vh;padding:0}
  .journey.is-3d .journey-stage{position:sticky;top:12vh}
}
@media print{.scroll-donut,.journey,.speed-layer,.sound-toggle,.box-share{display:none !important}}

/* Print menu: a header with the sign, address, phone and hours (print only). */
.print-head{display:none}
@media print{
  .print-head{display:block;text-align:center;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid #2b1d17}
  .print-head img{display:block;height:80px;width:auto;margin:0 auto}
  .print-head p{margin:6px 0 0;font-weight:700}
  .menu-page .menu-cat{break-inside:avoid-page}
}

/* Glaze drip between home sections: the edge is always there (it keeps its
   space); with motion welcome its drips run down as it scrolls into view. */
.drip{height:40px;margin:-8px 0 8px;line-height:0;overflow:clip}
.drip svg{display:block;width:100%;height:100%;fill:var(--season-accent,var(--pink))}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .drip svg{transform-origin:50% 0;animation:qd-drip linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes qd-drip{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
  }
}
@media print{.drip{display:none}}

/* A3m: each hero slide zooms in slowly (1 -> 1.06) over its 5 s on show,
   restarting per slide and pausing with the slider. Its own wrapper, so it
   never stacks on the image's scroll depth drift. */
.slide{overflow:clip}
.slide-zoom{display:block}
@media (prefers-reduced-motion: no-preference){
  .slide.is-current .slide-zoom{animation:qd-slide-zoom var(--dur-slide) linear 1 both}
  .slides.is-paused .slide.is-current .slide-zoom{animation-play-state:paused}
  @keyframes qd-slide-zoom{from{transform:none}to{transform:scale(1.06)}}
}
/* A5m: steam over the coffee cup on the /menu chip. Three wisps rise and
   fade, three times, once the chip is in view (menu-nav.js). Drawn inside
   the 44px chip, so the chip strip never clips it. */
.chip-cup{position:relative;display:inline-flex;flex:none;margin-right:6px}
.menu-chips .chip-cup img{margin-right:0}
.steam{position:absolute;left:3px;right:5px;bottom:100%;height:9px;display:flex;justify-content:space-around;pointer-events:none}
.steam i{display:block;width:2px;height:7px;border-radius:2px;background:currentColor;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .chip-cup.is-steaming .steam i{animation:qd-steam var(--dur-steam) ease-out 3 both}
  .chip-cup.is-steaming .steam i:nth-child(2){animation-delay:250ms}
  .chip-cup.is-steaming .steam i:nth-child(3){animation-delay:500ms}
  @keyframes qd-steam{from{transform:translateY(3px);opacity:0}40%{opacity:.55}to{transform:translateY(-6px);opacity:0}}
}
/* Z1: zoom through the donut hole. Not there at all without scroll
   timelines or with reduced motion (the page is as before). --z1-hole is
   the ring art's hole radius over its width (data-hole-r 150 of 1000). */
.z1{display:none}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .z1{display:block;height:200vh;margin-bottom:-100vh;position:relative;z-index:3;pointer-events:none;view-timeline-name:--z1;--z1-size:min(46vmin,420px);--z1-hole:.15}
    .z1-stage{position:sticky;top:0;height:100vh;overflow:clip}
    .z1-mask,.z1-ring{position:absolute;left:50%;top:50%;animation:qd-z1 linear both;animation-timeline:--z1;animation-range:contain 5% contain 95%}
    .z1-ring{width:var(--z1-size);height:auto;margin:calc(var(--z1-size) / -2) 0 0 calc(var(--z1-size) / -2)}
    /* Everything but the hole is the page colour, so only the hole shows what is behind. */
    .z1-mask{width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;background:radial-gradient(circle at center,transparent calc(var(--z1-size) * var(--z1-hole)),var(--bg) calc(var(--z1-size) * var(--z1-hole) + 1px))}
    .z1-night{display:none}
    @keyframes qd-z1{from{transform:scale(1)}to{transform:scale(22)}}
  }
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .z1-day{display:none}:root:not([data-theme="light"]) .z1-night{display:block}}
:root[data-theme="dark"] .z1-day{display:none}
:root[data-theme="dark"] .z1-night{display:block}

/* 3D tricks (#84 wiring): the glaze picker on the hero donut, shown only once
   the 3D donut is up; the donut rain above the footer on home. */
.glaze-pick{display:none;position:absolute;right:4px;top:4px;gap:6px}
.donut-stage.is-3d .glaze-pick{display:flex}
.glaze-btn{width:44px;height:44px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 2px var(--choc);padding:0;cursor:pointer}
.glaze-btn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--choc),0 0 0 5px var(--pink-deep)}
.glaze-pink{background:#f59ac0}
.glaze-chocolate{background:#5a3321}
.glaze-maple{background:#c98a3e}
.donut-rain{display:block;width:100%;height:clamp(200px,24vw,320px);margin-top:16px}
@media print{.glaze-pick,.donut-rain{display:none !important}}