/* ── tokens ───────────────────────────────────────────────────────────────
   Everything downstream measures itself against these. No loose pixel values
   in the rules below; if a number is not here it is part of the artwork.     */
:root{
  /* aged cel paint, sampled to sit together rather than to look loud */
  --paper:#f1e1be; --paper-2:#e0c795; --paper-3:#cfae76;
  --ink:#241a12; --ink-2:#4a3626; --ink-3:rgba(36,26,18,.30); --ink-4:rgba(36,26,18,.13);
  --cream:#f9f2df; --bone:#ebdfc2; --white:#fffdf5;
  --red:#c4402e; --red-dk:#8f2a1d; --red-lt:#e0705c;
  --blue:#7cb4c6; --blue-lt:#c9e6ee; --blue-dk:#3d7383;
  --mustard:#e4ae3a; --mustard-dk:#a9781f;
  --sage:#7d9757; --brown:#8a5f3c; --hot:#e2603c; --ember:#f5a63c;

  /* spacing — a 4px bed, used in whole steps only */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px; --sp-7:40px;

  /* controls: one height for everything the finger lands on */
  --ctl:52px; --ctl-min:44px; --ctl-wide:112px; --icon:28px; --icon-gap:var(--sp-2);

  --bw:3px; --bw-thick:5px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  --sh-1:0 4px 0 var(--ink-3);
  --sh-2:0 6px 0 var(--ink-3);
  --sh-3:0 8px 0 var(--ink-3), 0 22px 38px rgba(60,40,20,.20);
  --press:translateY(5px);

  --fs-micro:12px; --fs-small:13.5px; --fs-body:14.5px; --fs-lead:15.5px;
  --lh-tight:1.25; --lh-body:1.65;
  --track-caps:.13em;

  --t-fast:120ms; --t-med:200ms; --t-slow:320ms;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --measure:1180px;

  --font-hand:"Chalkboard SE","Marker Felt","Comic Sans MS",ui-rounded,"Trebuchet MS",system-ui,sans-serif;
}

*{box-sizing:border-box}
h1,p{margin:0}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  margin:0; padding:var(--sp-5) var(--sp-4) var(--sp-6); color:var(--ink);
  font:var(--fs-lead)/var(--lh-body) var(--font-hand);
  background:radial-gradient(1200px 780px at 50% 8%, #f7ebd0 0%, var(--paper) 42%, var(--paper-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* paper tooth — one turbulence tile, no external asset */
body::before{
  content:""; position:fixed; inset:-40px; pointer-events:none; z-index:9; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.55'/></svg>");
  mix-blend-mode:multiply;
}
.wrap{position:relative; z-index:1; width:min(var(--measure),100%); margin:0 auto;
      display:flex; flex-direction:column; gap:var(--sp-4)}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
                 overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ── the title card ───────────────────────────────────────────────────────
   A hand-painted marquee, not a hero banner: capped in height so the room
   keeps the space it needs.                                                */
.marquee{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  display:grid; place-content:center; gap:var(--sp-1);
  min-height:126px; padding:var(--sp-3) 132px;
  border:var(--bw-thick) solid var(--ink);
  border-radius:52% 48% 47% 53% / 22% 26% 21% 25%;
  background:var(--red); box-shadow:0 7px 0 var(--red-dk), 0 12px 0 var(--ink-4);
}
.sunburst{
  position:absolute; inset:-70%; z-index:-1;
  background:repeating-conic-gradient(from 4deg, rgba(255,228,142,.20) 0 10deg, transparent 10deg 21deg);
  animation:marqueeSpin 90s linear infinite;
}
@keyframes marqueeSpin{ to{ transform:rotate(360deg) } }
.studio{font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
        color:rgba(255,253,245,.88)}
h1{
  margin:0; line-height:1.02; letter-spacing:-.02em; color:var(--cream);
  font-size:clamp(34px,5.4vw,58px); transform:rotate(-1.4deg);
  text-shadow:3px 4px 0 var(--red-dk), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
              -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
h1 em, h1 b{font-style:normal; font-weight:inherit; color:var(--mustard)}
.billing{
  justify-self:center; padding:var(--sp-1) var(--sp-3);
  border-block:2px solid rgba(255,253,245,.40);
  font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--cream);
}
.seal{
  position:absolute; right:var(--sp-5); top:50%; translate:0 -50%;
  width:86px; height:86px; display:grid; place-content:center; gap:2px;
  border:3px dashed var(--ink); border-radius:50%; background:var(--cream);
  transform:rotate(9deg); box-shadow:3px 4px 0 var(--ink-4); text-align:center;
}
.seal b{display:block; color:var(--red); font-size:21px; line-height:.9}
.seal span{display:block; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; line-height:1.15}

/* ── appliance tabs ─────────────────────────────────────────────────────────
   A grid, so every card is the same height whatever its label, and the tilt is
   one magnitude alternating in sign rather than four arbitrary angles.        */
.tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2);
      padding:0 var(--sp-1) var(--sp-1)}
.tab{
  --tilt:-.7deg;
  display:grid; grid-template-columns:22px var(--icon) minmax(0,1fr);
  align-items:center; gap:var(--icon-gap);
  min-height:72px; padding:var(--sp-2) var(--sp-3);
  font:inherit; font-size:var(--fs-small); color:var(--ink); text-align:left; cursor:pointer;
  background:var(--bone); border:var(--bw) solid var(--ink); border-bottom-width:var(--bw-thick);
  border-radius:var(--r-md) var(--r-md) var(--r-sm) var(--r-sm);
  transform:rotate(var(--tilt));
  transition:background var(--t-med) ease, transform var(--t-med) var(--spring),
             box-shadow var(--t-med) ease;
}
.tab:nth-child(even){--tilt:.7deg}
.tab .num{
  justify-self:center; width:22px; height:22px; display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:50%; background:var(--cream);
  font-size:11px; line-height:1; font-variant-numeric:tabular-nums;
}
.tab[aria-selected="true"] .num{background:var(--ink); color:var(--mustard)}
.tab svg{width:var(--icon); height:var(--icon); display:block}
.tab .lbl{display:grid; min-width:0}
.tab .lbl b{font-weight:400; line-height:var(--lh-tight);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tab .lbl i{font-style:normal; font-size:var(--fs-micro); color:var(--ink-2);
            line-height:var(--lh-tight); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tab:hover{background:var(--cream); transform:rotate(var(--tilt)) translateY(-2px); box-shadow:var(--sh-1)}
.tab[aria-selected="true"]{background:var(--mustard); box-shadow:var(--sh-2);
                           transform:rotate(var(--tilt)) translateY(-3px)}
.tab[aria-selected="true"] .lbl i{color:var(--ink)}
/* selection is not carried by colour alone */
.tab .mark{grid-column:1 / -1; height:var(--bw); border-radius:var(--r-pill);
           background:var(--ink); opacity:0; transition:opacity var(--t-med) ease}
.tab:active{transform:rotate(var(--tilt)) translateY(2px); box-shadow:none}
.tab[aria-selected="true"] .mark{opacity:1}

/* ── the frame the cartoon lives in ─────────────────────────────────────── */
.stage{position:relative; border:var(--bw-thick) solid var(--ink); border-radius:var(--r-lg);
       overflow:hidden; background:var(--cream); box-shadow:var(--sh-3); isolation:isolate}
/* the film slate: which reel we are on, and what the machine has to say */
.slate{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
       min-height:34px; padding:0 var(--sp-4); border-bottom:var(--bw) solid var(--ink);
       background:var(--mustard); font-size:var(--fs-micro); letter-spacing:.13em;
       text-transform:uppercase}
.slate .scene{white-space:nowrap}
.slate b{font-weight:400; color:var(--red-dk); text-align:right;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
canvas#scene{display:block; width:100%; height:auto; touch-action:none}
/* The room stays visible behind it — this is a curtain, not a modal. */
.curtain{position:absolute; inset:0; display:grid; place-items:center; cursor:pointer;
         text-align:center; padding:var(--sp-5); border:0;
         background:rgba(241,225,190,.62); backdrop-filter:blur(3px);
         transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--spring)}
.curtain[hidden]{display:none}
.curtain.leaving{opacity:0; transform:scale(1.05); pointer-events:none}
.curtain .card{display:grid; justify-items:center; gap:var(--sp-2);
               background:var(--cream); border:4px solid var(--ink); border-radius:var(--r-lg);
               padding:var(--sp-5) var(--sp-6); max-width:40ch; box-shadow:6px 6px 0 var(--ink);
               transform:rotate(-1deg)}
.curtain .pre{font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--red-dk)}
.curtain b{display:block; font-size:clamp(24px,3.4vw,34px); line-height:1.05; color:var(--red);
           text-shadow:2px 2px 0 var(--bone)}
.curtain .say{display:block; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink-2)}
.curtain .bigred{margin-top:var(--sp-3); width:78px; height:54px; display:grid; place-items:center;
                 border:4px solid var(--ink); border-radius:50%; background:var(--red-dk);
                 box-shadow:0 10px 0 #6d2318, 0 13px 0 var(--ink);
                 transition:transform var(--t-fast) ease, box-shadow var(--t-fast) ease}
.curtain .bigred i{width:60px; height:40px; border-radius:50%; background:var(--red);
                   box-shadow:inset 0 8px 0 rgba(255,255,255,.22)}
.curtain:hover .bigred{transform:translateY(-2px) scale(1.04)}
.curtain:active .bigred{transform:translateY(8px) scale(.97,.9); box-shadow:0 2px 0 #6d2318, 0 5px 0 var(--ink)}
.curtain:focus-visible{outline:var(--bw) dashed var(--red); outline-offset:-8px}

/* ── control plate ────────────────────────────────────────────────────────
   Fixed slots. Controls that do not apply to the current appliance are
   disabled in place rather than removed, so nothing on the plate ever moves. */
.plate{
  display:grid; gap:var(--sp-4) var(--sp-5); align-items:end;
  grid-template-columns:auto auto auto minmax(0,1fr);
  grid-template-areas:"speed swing mode vol"
                      "read  read  read read";
  background:linear-gradient(180deg,var(--bone),var(--paper-3));
  border:var(--bw-thick) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:var(--sp-4) var(--sp-5);
}
.group{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0}
.group > .cap{font-size:var(--fs-micro); letter-spacing:var(--track-caps); text-transform:uppercase;
              color:var(--ink-2); white-space:nowrap}
.group > .row{display:flex; gap:var(--sp-2); align-items:center; min-height:var(--ctl)}
#keys{min-width:calc(4 * var(--ctl) + 3 * var(--sp-2))}
.group[data-slot="speed"]{grid-area:speed} .group[data-slot="swing"]{grid-area:swing}
.group[data-slot="mode"]{grid-area:mode}   .group[data-slot="vol"]{grid-area:vol; justify-self:end}
.group[aria-disabled="true"] > .cap{opacity:.4}

/* one shared skin for every physical control */
.ctl{
  position:relative; display:grid; place-items:center;
  min-width:var(--ctl); min-height:var(--ctl); padding:0;
  font:inherit; font-size:var(--fs-body); color:var(--ink); cursor:pointer;
  border:4px solid var(--ink); background:var(--bone); box-shadow:var(--sh-2);
  transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) ease,
             background var(--t-med) ease, opacity var(--t-med) ease;
}
.ctl:hover:not(:disabled){background:var(--cream)}
.ctl:active:not(:disabled){transform:var(--press); box-shadow:0 1px 0 var(--ink-3)}
.ctl:disabled{cursor:not-allowed; opacity:.34; box-shadow:none;
              background:repeating-linear-gradient(-45deg,var(--bone) 0 6px,var(--paper-3) 6px 12px)}
.ctl:focus-visible{outline:var(--bw) dashed var(--red); outline-offset:4px}

.key{width:var(--ctl); height:var(--ctl); border-radius:50%; white-space:nowrap;
     background:radial-gradient(circle at 34% 28%, var(--cream) 0%, var(--bone) 58%, var(--paper-3) 100%)}
.key:hover:not(:disabled){background:radial-gradient(circle at 34% 28%, var(--white) 0%, var(--cream) 60%, var(--bone) 100%)}
.key[aria-pressed="true"]{
  background:radial-gradient(circle at 34% 28%, var(--red-lt) 0%, var(--red) 62%, var(--red-dk) 100%);
  color:var(--white); transform:var(--press); box-shadow:0 1px 0 var(--ink-3);
}
.key.stop[aria-pressed="true"]{
  background:radial-gradient(circle at 34% 28%, var(--cream) 0%, var(--bone) 58%, var(--paper-3) 100%);
  color:var(--ink); box-shadow:inset 0 3px 7px rgba(36,26,18,.24);
}
/* the depressed key also carries a printed dot, so state is not colour alone */
.key[aria-pressed="true"]::after{content:""; position:absolute; bottom:-14px; width:6px; height:6px;
  border-radius:50%; background:var(--ink)}

.latch{width:var(--ctl-wide); height:var(--ctl); border-radius:var(--r-sm);
       background:linear-gradient(180deg,var(--cream),var(--bone));
       grid-template-columns:26px minmax(0,1fr); place-items:center; gap:var(--sp-2);
       padding:0 var(--sp-3); font-size:var(--fs-small)}
.latch .pin{position:relative; width:18px; height:34px; border:var(--bw) solid var(--ink);
            border-radius:var(--r-sm); background:var(--paper-3); overflow:hidden}
.latch .pin::after{content:""; position:absolute; left:2px; right:2px; height:14px; border-radius:3px;
                   background:var(--mustard); bottom:2px; transition:bottom var(--t-slow) var(--spring),
                   background var(--t-med) ease}
.latch[aria-pressed="true"]{background:linear-gradient(180deg,var(--blue-lt),var(--blue))}
.latch[aria-pressed="true"] .pin::after{bottom:16px; background:var(--sage)}
.latch .txt{justify-self:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}

.flip{width:var(--ctl-wide); height:var(--ctl); border-radius:var(--r-pill);
      background:var(--blue-lt); grid-template-columns:1fr; overflow:hidden}
.flip .knobface{position:absolute; top:2px; left:2px; width:38px; height:38px; border-radius:50%;
                border:var(--bw) solid var(--ink); background:var(--white);
                transition:left var(--t-slow) var(--spring), background var(--t-med) ease}
.flip .txt{position:absolute; right:var(--sp-3); font-size:var(--fs-micro); letter-spacing:.06em;
           color:var(--blue-dk); white-space:nowrap}
.flip[aria-pressed="true"]{background:var(--ember)}
.flip[aria-pressed="true"] .knobface{left:calc(100% - 46px); background:var(--hot)}
.flip[aria-pressed="true"] .txt{right:auto; left:var(--sp-3); color:var(--red-dk)}

.dial{width:var(--ctl); height:var(--ctl); border-radius:50%; cursor:grab; touch-action:none;
      background:radial-gradient(circle at 36% 30%, var(--cream), var(--bone) 60%, var(--paper-3))}
.dial:active{cursor:grabbing}
.dial .needle{position:absolute; top:5px; width:4px; height:16px; background:var(--ink);
              border-radius:2px; transform-origin:50% 21px; transform:rotate(var(--a,0deg))}
.mute{width:var(--ctl); height:var(--ctl); border-radius:50%}
.mute[aria-pressed="true"]{background:var(--ink); color:var(--white)}
.mute svg{width:22px; height:22px; display:block}

/* ── readouts ───────────────────────────────────────────────────────────── */
.readout{grid-area:read; display:flex; gap:var(--sp-2); align-content:center;
         align-items:center; flex-wrap:wrap; min-width:0; min-height:36px;
         padding-top:var(--sp-1); border-top:var(--bw) dotted var(--ink-4)}
.chip{display:inline-flex; gap:var(--sp-2); align-items:center; min-height:36px;
      padding:0 var(--sp-3); background:var(--cream); border:var(--bw) solid var(--ink);
      border-radius:var(--r-pill); font-size:var(--fs-small); white-space:nowrap}
.chip .k{color:var(--ink-2); font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase}
.chip .v{font-variant-numeric:tabular-nums}
.chip[hidden]{display:none}
.bulb{width:11px; height:11px; border-radius:50%; border:2.5px solid var(--ink);
      background:var(--paper-3); flex:none; transition:background var(--t-med) ease}
.bulb.on{background:var(--sage)} .bulb.cold{background:var(--blue)} .bulb.hot{background:var(--hot)}

.note{margin:0; font-size:var(--fs-body); color:var(--ink-2); line-height:var(--lh-body);
      border-left:var(--bw-thick) solid var(--red); padding-left:var(--sp-3); max-width:82ch}
footer{display:flex; justify-content:space-between; gap:var(--sp-3) var(--sp-5); flex-wrap:wrap;
       font-size:var(--fs-small); color:var(--ink-2)}
footer a{color:var(--red-dk); text-decoration:none; border-bottom:2px solid var(--paper-3)}
footer a:hover{border-color:var(--red)}
footer a:focus-visible{outline:var(--bw) dashed var(--red); outline-offset:3px}
kbd{display:inline-block; min-width:22px; text-align:center; background:var(--cream);
    border:2px solid var(--ink); border-bottom-width:var(--bw); border-radius:5px;
    padding:0 var(--sp-1); font:inherit; font-size:var(--fs-micro)}

/* ── narrower ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .plate{grid-template-columns:auto auto minmax(0,1fr);
         grid-template-areas:"speed swing mode" "vol vol vol" "read read read"}
  .group[data-slot="vol"]{justify-self:start}
}
@media (max-width:820px){
  .tabs{grid-template-columns:repeat(2,1fr)}
  .marquee{padding-inline:var(--sp-5); min-height:118px;
           border-radius:30px 26px 32px 24px}
  .studio{letter-spacing:.14em}
  .seal{position:static; translate:0; justify-self:center; width:74px; height:74px;
        margin-top:var(--sp-2); transform:rotate(-5deg)}
}
@media (max-width:640px){
  :root{--ctl:48px; --ctl-wide:96px; --icon:24px;
        --fs-micro:11.5px; --fs-small:12.5px; --fs-body:14px; --fs-lead:15px}
  .tab{min-height:64px}
  body{padding:var(--sp-4) var(--sp-3) var(--sp-5)}
  .plate{grid-template-columns:repeat(2,minmax(0,1fr));
         grid-template-areas:"speed speed" "swing mode" "vol vol" "read read";
         padding:var(--sp-4)}
  .group[data-slot="vol"] > .row{justify-content:space-between}
  /* a fixed grid, so the chip row count cannot depend on label widths */
  .readout{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start}
  .readout .chip:last-child{grid-column:1 / -1}
  .chip{flex:1 1 auto; justify-content:center}
}
@media (max-width:380px){
  .tabs{grid-template-columns:1fr}
  .tab{--tilt:0deg}
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important; animation-duration:1ms !important}
  .tab:hover,.tab[aria-selected="true"]{transform:rotate(var(--tilt))}
  .sunburst{animation:none}
  .curtain{transition:none}
  .ctl:active:not(:disabled){transform:none}
}