/* Fonts, self-hosted from Google Fonts (fonts/README.md): 3 UI faces (latin) and 16 number faces (digits only).
   font-display:block, so a card never shows a fallback digit; Play also waits for them (game.js). */
@font-face{font-family:"Andika"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/andika-400.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Andika"; font-style:normal; font-weight:700; font-display:block; src:url(fonts/andika-700.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cherry Bomb One"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/cherry-bomb-one-400.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lilita One"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/lilita-one-400.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Abril Fatface"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/abril-fatface-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Baloo 2"; font-style:normal; font-weight:800; font-display:block; src:url(fonts/baloo-2-800-digits.woff) format("woff"); unicode-range:U+30-39}
@font-face{font-family:"Bebas Neue"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/bebas-neue-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Bungee"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/bungee-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Caveat"; font-style:normal; font-weight:700; font-display:block; src:url(fonts/caveat-700-digits.woff) format("woff"); unicode-range:U+30-39}
@font-face{font-family:"Chewy"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/chewy-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Fredoka"; font-style:normal; font-weight:600; font-display:block; src:url(fonts/fredoka-600-digits.woff) format("woff"); unicode-range:U+30-39}
@font-face{font-family:"Nunito"; font-style:normal; font-weight:900; font-display:block; src:url(fonts/nunito-900-digits.woff) format("woff"); unicode-range:U+30-39}
@font-face{font-family:"Pacifico"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/pacifico-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Patrick Hand"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/patrick-hand-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Permanent Marker"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/permanent-marker-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Press Start 2P"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/press-start-2p-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Righteous"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/righteous-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Rubik Mono One"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/rubik-mono-one-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Shrikhand"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/shrikhand-400-digits.woff2) format("woff2"); unicode-range:U+30-39}
@font-face{font-family:"Special Elite"; font-style:normal; font-weight:400; font-display:block; src:url(fonts/special-elite-400-digits.woff2) format("woff2"); unicode-range:U+30-39}

/* Base reset. On claude.ai the artifact skeleton supplies this; it's repeated here so the local page matches. */
:root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
body{margin:0; font:14px system-ui, -apple-system, sans-serif}
img{max-width:100%}
[hidden]{display:none !important}
/* Layout: a classroom felt board. Paper number cards are pinned to it; a ten-frame tray slides in to show "how many". Single committed look. */
:root{
  --felt:#8A3A73;
  --felt-deep:#6B2A59;
  --chalk:#FFF4F9;
  --chalk-dim:#F2C4DD;
  --paper:#FFFAFC;
  --paper-edge:#F2D6E3;
  --ink:#3B1F3F;
  --sun:#FF9EC9;
  --sun-deep:#D9629A;
  --gold:#FFD36E;
  --gold-deep:#E9A23B;
  --font-title:"Cherry Bomb One", "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui:"Andika", "Trebuchet MS", system-ui, sans-serif;
  --font-display:"Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --gap:clamp(12px, 2.6vw, 26px);
  color-scheme:light;
}
html,body{height:100%}
body{
  background-color:var(--felt);
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.4px),
    radial-gradient(120% 70% at 50% -12%, rgba(255,140,200,.6), transparent 62%),
    radial-gradient(80% 60% at -5% 105%, rgba(120,60,190,.6), transparent 65%),
    radial-gradient(70% 55% at 105% 105%, rgba(255,110,150,.4), transparent 60%);
  background-size:6px 6px, auto, auto, auto;
  color:var(--chalk);
  font-family:var(--font-ui);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0;
}
button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
button:focus-visible{outline:4px solid var(--sun); outline-offset:4px}

#app{position:relative; z-index:1; height:100%; display:grid; grid-template-rows:auto 1fr; max-width:1200px; margin:0 auto}
#bg, #fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none}
#bg{z-index:0}
#fx{z-index:25}

/* top bar */
.bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:14px 6px; gap:12px; min-height:84px}
/* Round progress: a row of stars at the bottom centre of the screen during the game. */
.progress{position:fixed; z-index:2; left:50%; translate:-50% 0; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); display:flex; gap:4px; flex-wrap:nowrap; pointer-events:none}
.left{display:flex; align-items:center; gap:12px; min-width:0}
.home, .gear{position:relative; flex:none; width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.24); background:rgba(255,255,255,.16); color:var(--chalk); display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 16px rgba(40,6,40,.2)}
.home:active, .gear:active{transform:scale(.94)}
.home svg{width:30px; height:30px; position:relative}
.pstar{display:block; width:clamp(22px, 3vw, 32px); height:clamp(22px, 3vw, 32px)}
.pstar svg{display:block; width:100%; height:100%; fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.5); stroke-width:1.6; stroke-linejoin:round}
.pstar.on svg{fill:var(--gold); stroke:var(--gold-deep); filter:drop-shadow(0 0 4px rgba(255,211,110,.7))}
.pstar.new{animation:starpop .6s cubic-bezier(.3,1.7,.6,1)}
@keyframes starpop{0%{transform:scale(.2) rotate(-60deg)}100%{transform:none}}
.replay{width:70px; height:70px; border-radius:50%; border:0; background:linear-gradient(180deg,#fff,#FFEAF4); color:var(--sun-deep); display:grid; place-items:center; cursor:pointer; box-shadow:0 5px 0 var(--paper-edge), 0 0 0 6px rgba(255,158,201,.35), 0 14px 24px rgba(40,6,40,.3)}
.replay:active{transform:translateY(3px); box-shadow:0 2px 0 var(--paper-edge), 0 0 0 6px rgba(255,158,201,.35), 0 6px 10px rgba(0,0,0,.2)}
.replay{position:relative}
.replay::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:6px solid rgba(255,158,201,.55); opacity:0; pointer-events:none; will-change:transform, opacity}
.replay.talk::after{animation:talk 1s ease-out infinite}
@keyframes talk{0%{transform:scale(.95); opacity:.9}100%{transform:scale(1.35); opacity:0}}
.replay svg{width:36px; height:36px}
.cue{font-size:30px; font-family:var(--font-ui); font-weight:700; color:var(--ink); line-height:1}
.gear{justify-self:end; grid-column:3}
.left{grid-column:1}
.replay{grid-column:2}
.gear svg{width:28px; height:28px; position:relative}

/* hold-to-activate ring */
.hold{--p:0}
.hold::before{content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(var(--sun) calc(var(--p) * 1turn), transparent 0); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); pointer-events:none}

/* screens */
#stage{position:relative; min-height:0}
.screen{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(18px, 4vh, 36px); padding-block:8px 24px}
#game{padding-bottom:calc(24px + clamp(22px, 3vw, 32px))}   /* keep the cards clear of the progress stars */

/* start */
.title-cards{display:flex; gap:var(--gap); align-items:center}
.title-cards .card{--cw:clamp(66px, 14vw, 140px); pointer-events:none; animation:float 3.4s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -1.1s); will-change:transform}
.title-cards .card:nth-of-type(1){--rot:-8deg}
.title-cards .card:nth-of-type(2){--rot:3deg}
.title-cards .card:nth-of-type(3){--rot:9deg}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.title{margin:0; display:flex; flex-direction:column; align-items:center; line-height:.92; text-align:center}
.t-small{font-family:var(--font-title); font-weight:400; font-size:clamp(24px, 3.8vw, 40px); color:var(--gold); rotate:-5deg; translate:-18% 12%; text-shadow:0 3px 0 rgba(60,10,50,.4)}
.t-big{font-family:var(--font-title); font-weight:400; font-size:clamp(46px, 8.6vw, 96px); display:flex}
.t-big i{
  font-style:normal; display:inline-block; color:var(--lc);
  text-shadow:
    .035em 0 #fff, -.035em 0 #fff, 0 .035em #fff, 0 -.035em #fff,
    .025em .025em #fff, -.025em .025em #fff, .025em -.025em #fff, -.025em -.025em #fff,
    0 .09em 0 var(--felt-deep);
  animation:wave 2.8s ease-in-out infinite; animation-delay:calc(var(--i) * .13s); will-change:transform;
}
@keyframes wave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.07em) rotate(-3deg)}}
.play{
  position:relative; overflow:hidden;
  font-family:var(--font-title); font-weight:400; font-size:clamp(30px, 4.8vw, 46px);
  padding:12px 66px 16px; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, #FFC4DF 0%, #FF8EC2 55%, #F46AAC 100%);
  color:#fff; text-shadow:0 2px 0 var(--sun-deep);
  box-shadow:0 7px 0 var(--sun-deep), 0 18px 30px rgba(40,6,40,.38), inset 0 2px 0 rgba(255,255,255,.6);
  animation:breathe 2.4s ease-in-out infinite; transition:opacity .3s; will-change:transform;
}
.play::after{content:""; position:absolute; left:14%; right:14%; top:9%; height:36%; border-radius:999px; background:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events:none}
.play:active{animation:none; transform:translateY(4px); box-shadow:0 3px 0 var(--sun-deep), 0 8px 14px rgba(40,6,40,.3), inset 0 2px 0 rgba(255,255,255,.6)}
.play:disabled{opacity:.45; animation:none}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.hint{margin:0; font-size:14px; color:var(--chalk-dim); text-align:center}

/* cards */
.card{
  --cw:120px;
  width:var(--cw); aspect-ratio:3/4; max-width:100%;
  border:0; padding:0; border-radius:calc(var(--cw) * .1);
  background:linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 calc(var(--cw) * .03) 0 var(--paper-edge), 0 calc(var(--cw) * .09) calc(var(--cw) * .16) rgba(40,6,40,.34);
  cursor:pointer; position:relative; rotate:var(--rot, 0deg);
  transition:transform .12s, translate .08s, box-shadow .08s, opacity .3s, filter .3s;
}
.card::before{
  content:""; position:absolute; top:3.5%; left:50%; width:38%; height:9%; translate:-50% 0; rotate:-4deg;
  background-color:var(--tape, #FFC2DF);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 5px, transparent 5px 10px);
  border-radius:2px; opacity:.92; box-shadow:0 1px 2px rgba(60,10,50,.15);
}
.card::after{content:""; position:absolute; inset:5%; border:2px dashed rgba(217,98,154,.17); border-radius:calc(var(--cw) * .07); pointer-events:none}
.choices .card{animation:pop .42s cubic-bezier(.3,1.5,.6,1) both; animation-delay:var(--d, 0s)}
/* Choice cards are buttons: a thicker paper edge that squashes when pressed, like the speaker button.
   Uses `translate` (not `transform`) because the pop-in animation's end state keeps owning `transform`. */
.choices .card{box-shadow:0 calc(var(--cw) * .05) 0 #EBC3D7, 0 calc(var(--cw) * .1) calc(var(--cw) * .16) rgba(40,6,40,.34)}
.choices .card:active{translate:0 calc(var(--cw) * .04); box-shadow:0 calc(var(--cw) * .01) 0 #EBC3D7, 0 calc(var(--cw) * .03) calc(var(--cw) * .06) rgba(40,6,40,.3)}
.digit{
  font-size:calc(var(--cw) * .7 * var(--k, 1));
  line-height:1; color:var(--ink-c); display:inline-block; padding:.04em .02em;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
.t-shadow{text-shadow:.05em .05em 0 var(--ink2)}
.t-outline{color:transparent; -webkit-text-stroke:max(3px, .04em) var(--ink-c)}
.t-stripe{background:linear-gradient(var(--ink-c) 0 52%, var(--ink2) 52% 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:max(1.5px, .014em) var(--ink-c)}
.t-dots{background:radial-gradient(circle, var(--ink-c) 40%, transparent 43%) 0 0 / .1em .1em; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:max(1.5px, .016em) var(--ink-c)}

.choices{
  --n:2;
  --tile-w:min(calc((100vw - 32px - (var(--n) - 1) * var(--gap)) / var(--n)), 44vh, 250px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); width:100%;
}
.choices.grid2{--tile-w:min(calc((100vw - 32px - var(--gap)) / 2), 31vh, 240px); max-width:calc(var(--tile-w) * 2 + var(--gap))}
.choices .card{--cw:var(--tile-w)}
.card.tried{opacity:.35; filter:grayscale(.7); pointer-events:none}
.card.shake{animation:shake .45s}
.card.hintme{animation:nudge 1.1s ease-in-out infinite; outline:8px solid rgba(255,158,201,.75); outline-offset:3px}
.card.right{animation:bounce .5s}

@keyframes pop{from{transform:scale(.6) translateY(30px); opacity:0}to{transform:none; opacity:1}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
/* transform only (no animated box-shadow), so the hint costs no repaint per frame */
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(-10px) scale(1.04)}}
@keyframes bounce{0%{transform:none}35%{transform:translateY(-18px) scale(1.06)}70%{transform:translateY(2px)}100%{transform:none}}

/* celebration: card + ten-frame */
.celebrate{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 42%, rgba(150,55,132,.9), rgba(45,12,44,.94));
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:16px;
}
.cele-panel{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px, 4vw, 52px); animation:pop .4s cubic-bezier(.3,1.4,.6,1) both}
.cele-panel .card{--cw:min(34vw, 38vh, 260px); --rot:-3deg; cursor:default}
.cele-panel .card.glow{box-shadow:0 8px 0 var(--paper-edge), 0 0 0 8px var(--gold), 0 0 46px 16px rgba(255,211,110,.55), 0 20px 30px rgba(0,0,0,.3)}
.tray{display:flex; flex-direction:column; align-items:center}
.m-cele{width:clamp(70px, 10vw, 104px); margin-bottom:-18px; position:relative; z-index:1}
.m-cele.is-uni{width:clamp(96px, 14vw, 146px); margin-bottom:-8px}
.frame{
  --cell:min(10vw, 12vh, 76px);
  display:grid; grid-template-columns:repeat(5, var(--cell)); grid-auto-rows:var(--cell);
  gap:8px; padding:14px; border-radius:28px;
  background:linear-gradient(180deg, #FFD6E8, #F7A8CB);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.75), inset 0 -5px 0 rgba(200,70,130,.25), 0 0 0 6px #fff, 0 22px 36px rgba(30,4,30,.45);
}
.cell{background:radial-gradient(circle at 50% 32%, #FFFFFF, #FFE3EF 70%); border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 3px 7px rgba(200,70,130,.28)}
.counter{width:74%; height:74%; animation:drop .32s cubic-bezier(.3,1.6,.6,1) both}
.counter svg{display:block; width:100%; height:100%; fill:var(--c)}
@keyframes drop{from{transform:translateY(-40px) scale(.5); opacity:0}to{transform:none; opacity:1}}

/* end screen */
h2{font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 5vw, 48px); margin:0; text-align:center; text-wrap:balance}
#endTitle{font-family:var(--font-title); color:var(--gold); text-shadow:0 4px 0 var(--felt-deep), 0 10px 20px rgba(40,6,40,.35)}
.end-pals{display:flex; align-items:flex-end; gap:clamp(6px, 2vw, 20px); margin-bottom:-10px}
.m-end{width:clamp(80px, 15vw, 150px)}
.end-pals .uni-lilac svg{transform:scaleX(-1)}   /* faces the star */
.sheet{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:min(100%, 780px)}
.sheet .card{--cw:clamp(56px, 13vw, 100px); pointer-events:none; animation:pop .4s cubic-bezier(.3,1.5,.6,1) both; animation-delay:var(--d, 0s)}
.again{position:relative; border:0; border-radius:999px; background:linear-gradient(180deg,#fff,#FFEAF4); color:var(--sun-deep); padding:14px 32px; font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 5px 0 var(--paper-edge), 0 14px 24px rgba(40,6,40,.3)}

/* mascot: an original little star */
.mascot{display:block; aspect-ratio:1; animation:bob 2.6s ease-in-out infinite; will-change:transform}
.mascot svg{display:block; width:100%; height:100%; overflow:visible}
.m-start{width:clamp(48px, 12vw, 124px); align-self:flex-start; margin-left:-6px}
.m-start.uni-pinky{width:clamp(56px, 15vw, 150px); align-self:flex-end; margin-left:0; margin-right:-6px}
.m-eyes{transform-box:fill-box; transform-origin:center; animation:blink 4.2s infinite}
.uni-pinky{animation-delay:-.7s}
.uni-lilac{animation-delay:-1.5s}
.mascot.cheer{animation:hop .55s cubic-bezier(.3,1.5,.6,1) 3}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(5deg)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-26px) scale(1.1) rotate(12deg)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.again::before{inset:-6px}

/* parent panel */
/* A centred card that always stays clear of the status bar and iPadOS window controls (the 48px floor covers windowed apps, where the inset can be 0). */
.parent{position:fixed; inset:0; z-index:30; background:rgba(40,10,36,.55); display:flex; justify-content:center; align-items:center; box-sizing:border-box;
  padding:max(48px, calc(env(safe-area-inset-top, 0px) + 16px)) max(12px, env(safe-area-inset-right, 0px)) max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)) max(12px, env(safe-area-inset-left, 0px))}
.ppanel{box-sizing:border-box; background:var(--paper); color:var(--ink); width:min(100%, 600px); max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-radius:20px; padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; -webkit-user-select:text; user-select:text; font-size:15px}
.phead{display:flex; justify-content:space-between; align-items:center; gap:12px}
.phead h2{margin:0; font-size:22px; color:var(--ink)}
.ppanel h3{margin:6px 0 0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#7A5C74}
.prow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.plabel{font-weight:700}
.seg{display:inline-flex; background:#F6E8EF; border-radius:12px; padding:3px; gap:3px}
.seg button{border:0; background:transparent; padding:7px 12px; border-radius:9px; cursor:pointer; font-weight:700; color:#5E3F58}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.stepper{display:inline-flex; align-items:center; gap:8px}
.stepper button{width:36px; height:36px; border-radius:10px; border:2px solid var(--paper-edge); background:#fff; cursor:pointer; font-size:20px; font-weight:700}
.stepper button:disabled{opacity:.35}
.stepper output{min-width:64px; text-align:center; font-weight:700}
.pnote{margin:-2px 0 0; color:#7A5C74; font-size:13px}
.pbtn{border:2px solid var(--paper-edge); background:#fff; border-radius:12px; padding:9px 16px; font-weight:700; cursor:pointer}
.pbtn.warn{border-color:#E7B3A8; color:#A3321F}
.pfoot{display:flex; flex-wrap:wrap; gap:10px}

.bars{display:grid; grid-template-columns:repeat(var(--m), minmax(0,1fr)); gap:6px; align-items:end; height:100px; padding-top:18px; border-bottom:2px solid var(--paper-edge); position:relative}
.bars::before{content:""; position:absolute; left:0; right:0; top:18px; border-top:1px dashed #D9D1BD}
.bars::after{content:"100%"; position:absolute; top:0; left:0; font-size:11px; color:#9A7F93}
.bcol{height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; position:relative; min-width:0}
.bar-fill{background:var(--felt); border-radius:6px 6px 0 0; min-height:2px}
.bar-fill.few{background:repeating-linear-gradient(45deg, #C9C2B0 0 4px, #E4DECF 4px 8px)}
.bval{position:absolute; left:0; right:0; text-align:center; font-size:11px; color:#4A5753; font-variant-numeric:tabular-nums}
.blabels{display:grid; grid-template-columns:repeat(var(--m), minmax(0,1fr)); gap:6px; text-align:center; font-variant-numeric:tabular-nums}
.blabels b{font-size:18px; display:block}
.blabels span{font-size:11px; color:#9A7F93}
.kv{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px}
.kv div{background:#F6F2E7; border-radius:12px; padding:10px 12px; min-width:0}
.kv h4{margin:0 0 6px; font-size:13px; color:#7A5C74}
.kv ul{margin:0; padding:0; list-style:none; font-variant-numeric:tabular-nums; display:grid; gap:3px}
.muted{color:#9A7F93}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}