/* Recipe pages: shared styles (cream sheets, ink outlines, hard shadows). Fonts: Russo One + Play (OFL). */
@font-face{font-family:'Russo One';font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2116,U+00BD,U+00BC,U+00BE,U+00D7,U+2212;src:url(fonts/russo-one-latin-400.woff2) format('woff2')}
@font-face{font-family:'Russo One';font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1;src:url(fonts/russo-one-cyrillic-400.woff2) format('woff2')}
@font-face{font-family:'Russo One';font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url(fonts/russo-one-latin-ext-400.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2116,U+00BD,U+00BC,U+00BE,U+00D7,U+2212;src:url(fonts/play-latin-400.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1;src:url(fonts/play-cyrillic-400.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url(fonts/play-latin-ext-400.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:400;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;src:url(fonts/play-cyrillic-ext-400.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2116,U+00BD,U+00BC,U+00BE,U+00D7,U+2212;src:url(fonts/play-latin-700.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1;src:url(fonts/play-cyrillic-700.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url(fonts/play-latin-ext-700.woff2) format('woff2')}
@font-face{font-family:'Play';font-weight:700;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;src:url(fonts/play-cyrillic-ext-700.woff2) format('woff2')}
/* Layout: orange field with a sticky progress rail on top and a chunky nav dock at the bottom; one cream recipe sheet per stage. Switching stages throws the sheet and its blocks out sideways and springs the next stage in, while food stickers drift and swing behind. One committed light look, kept in dark mode on purpose. */
:root{
  --field:#ff6a10;
  --field-0:rgba(255,106,16,0);
  --sheet:#fdf6ea;
  --tile:#f5e3c8;
  --ink:#141210;
  --butter:#f6d35c;
  --muted:#5a4a3c;
  --glow:rgba(255,140,40,.62);
  --drop:8px 8px 0 var(--ink);
  --display:"Russo One","Arial Black","Segoe UI",system-ui,sans-serif;
  --body:"Play","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --spring:cubic-bezier(.2,1.3,.35,1);
  color-scheme:light;
}
html{background:var(--field)}
body{background:var(--field);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--field)}
*{box-sizing:border-box}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* drifting stickers */
.bg,.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.bg{z-index:0}
.fx{z-index:60}
.st{position:absolute}
.st-p{width:100%;height:100%;transition:transform 1.2s cubic-bezier(.3,1.35,.4,1)}
.st-f{display:block;width:100%;height:100%;overflow:visible;animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-10px) rotate(-6deg)}to{transform:translateY(12px) rotate(7deg)}}
.fx svg{position:absolute;overflow:visible}

/* top rail */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding-block:10px 14px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(var(--field) 72%,var(--field-0))}
.top-in{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:6px}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;background:var(--ink);color:var(--sheet);
  border-radius:10px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cnt{flex:none;font-family:var(--display);font-size:1rem;font-variant-numeric:tabular-nums;background:var(--sheet);border:2.5px solid var(--ink);
  border-radius:10px;padding:2px 10px;overflow:hidden;line-height:1.5}
.cnt span,.next b span{display:inline-block}
.segs{display:flex;gap:5px}
.seg{flex:1;appearance:none;border:0;background:none;padding:7px 0;cursor:pointer;min-width:0}
.seg i{display:block;height:10px;border:2px solid var(--ink);border-radius:6px;background:var(--sheet);transition:background .3s,transform .45s var(--spring)}
.seg.done i{background:var(--ink)}
.seg.on i{background:var(--butter);transform:scaleY(1.6)}
.seg:hover i{transform:scaleY(1.5)}
.seg:focus-visible{outline:3px solid var(--ink);outline-offset:1px;border-radius:6px}

/* deck & sheets */
.deck{position:relative;z-index:1;max-width:820px;margin-inline:auto;padding-block:10px calc(180px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet{position:relative;width:100%;background:var(--sheet);border:3px solid var(--ink);border-radius:28px;box-shadow:12px 12px 0 var(--ink);
  padding:clamp(20px,4.5vw,44px) clamp(22px,5vw,48px) clamp(24px,5vw,48px) clamp(20px,4.5vw,44px);display:flex;flex-direction:column;gap:24px;transform-origin:50% 0}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;text-align:center;line-height:.95;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(2.1rem,7.2vw,4.3rem)}
h1 .w{display:inline-block}
h2{font-size:clamp(2rem,6.4vw,3.5rem)}
.sub{text-align:center;font-size:1.12rem;text-wrap:balance}
.label{font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.07em}
.cell{background:var(--tile);border:2.5px solid var(--ink);border-radius:16px;padding:16px 18px;min-width:0;box-shadow:var(--drop);transition:box-shadow .28s ease}
.cell.hl{background:var(--butter)}
.cell:hover,.photo:hover{box-shadow:var(--drop),0 0 0 2px rgba(255,176,92,.75),0 0 22px 7px var(--glow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.center{text-align:center}
.cell .label{display:block;margin-bottom:8px}

/* cover */
.photo{position:relative;border:2.5px solid var(--ink);border-radius:18px;overflow:hidden;aspect-ratio:16/10;max-width:100%;box-shadow:var(--drop);transition:box-shadow .28s}
.photo img{display:block;width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,1%)}}
.photo .tag{position:absolute;left:14px;bottom:14px;font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;
  background:var(--butter);border:2px solid var(--ink);border-radius:10px;padding:4px 10px;rotate:-3deg}
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px}
.stat .v{font-family:var(--display);font-size:1.45rem;line-height:1.05;font-variant-numeric:tabular-nums}
.kbju .label{text-align:center}
.kb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.kb div{text-align:center;background:var(--sheet);border:2px solid var(--ink);border-radius:12px;padding:8px 4px}
.kb dt{font-size:.85rem;color:var(--muted)}
.kb dd{margin:2px 0 0;font-family:var(--display);font-size:1.6rem;line-height:1.05;font-variant-numeric:tabular-nums}
.kb small{font-family:var(--body);font-size:.8rem;margin-left:3px}
.wine{display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(1.15rem,2.5vw,1.5rem);line-height:1.3;text-wrap:balance}
.music{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px}
.mico{width:2.7rem;height:2.7rem;display:grid;place-items:center;font-size:1.5rem;background:var(--sheet);border:2px solid var(--ink);border-radius:12px;flex:none;animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(-8deg)}}
.mtxt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:12rem}
.mtxt .label{margin:0}
.mtxt b{font-size:1.08rem}
.mlinks{display:flex;gap:8px}
.mlinks a,.mini{color:var(--ink);text-decoration:none;font:700 1rem var(--body);border:2px solid var(--ink);border-radius:10px;background:var(--sheet);padding:6px 12px;cursor:pointer;transition:box-shadow .2s,transform .15s}
.mlinks a:hover,.mini:hover{box-shadow:0 0 12px 3px var(--glow)}
.mlinks a:focus-visible,.mini:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mini:active{transform:scale(.94)}
.cta{appearance:none;align-self:center;display:inline-flex;align-items:center;gap:14px;font-family:var(--display);text-transform:uppercase;font-size:clamp(1.1rem,3.4vw,1.5rem);letter-spacing:.03em;
  color:var(--butter);background:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:16px 26px;box-shadow:7px 7px 0 var(--field);cursor:pointer;transition:transform .15s,box-shadow .15s}
.cta svg{width:28px;height:28px;animation:nudge 1.3s ease-in-out infinite}
.cta:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:10px 10px 0 var(--field)}
.cta:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--field)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* note from the author */
.say{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--sheet);border:2.5px solid var(--ink);
  border-radius:22px 22px 22px 6px;padding:14px 18px;rotate:-1deg;box-shadow:var(--drop)}
.say .emo{font-size:2rem;line-height:1;width:3rem;height:3rem;display:grid;place-items:center;background:var(--butter);border:2px solid var(--ink);border-radius:14px;animation:beat 2.4s ease-in-out infinite}
.say p{font-weight:700;font-size:1.02rem;line-height:1.35;text-wrap:pretty}

/* ingredients */
.servbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;background:var(--butter)}
.servbar .label{margin:0;font-size:.95rem}
.spin{display:flex;align-items:center;gap:8px}
.spin output{font-family:var(--display);font-size:1.7rem;line-height:1;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;outline:none;border-radius:8px}
.spin output:focus-visible{box-shadow:0 0 0 3px var(--ink)}
.arrbtn{appearance:none;border:2px solid var(--ink);background:var(--sheet);border-radius:10px;width:36px;height:34px;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,box-shadow .2s,transform .15s}
.arrbtn svg{width:14px;height:14px}
.arrbtn:hover:not(:disabled){background:#fff;box-shadow:0 0 12px 3px var(--glow)}
.arrbtn:active:not(:disabled){transform:scale(.88)}
.arrbtn:disabled{opacity:.35;cursor:not-allowed}
.arrbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.unit{font-family:var(--display);font-size:1rem}
.servbar .hint{font-size:.88rem;color:var(--muted);text-align:right}
.tally{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 16px}
.tally .tl{font-weight:700}
.tally b{font-family:var(--display);font-weight:400;font-size:1.2rem;display:inline-block;font-variant-numeric:tabular-nums}
.bar{flex:1;min-width:120px;height:16px;border:2.5px solid var(--ink);border-radius:9px;background:var(--sheet);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--ink) 0 8px,#3a3128 8px 16px);transition:width .6s var(--spring)}
.tally.full{background:var(--butter)}
.ing{width:100%;border-collapse:collapse}
.ing td{padding:7px 0;border-bottom:1.5px dashed rgba(20,18,16,.32);vertical-align:top;transition:color .25s}
.ing tr:last-child td{border-bottom:none}
.ing td.q{text-align:right;white-space:nowrap;font-weight:700;padding-left:12px;font-variant-numeric:tabular-nums}
.ing tr.pick{cursor:pointer;outline:none}
.ing tr.pick td:first-child{padding-left:32px;position:relative}
.ing tr.pick td:first-child::before{content:"";position:absolute;left:0;top:8px;width:20px;height:20px;border:2px solid var(--ink);border-radius:6px;background:var(--sheet);
  transition:background-color .2s,transform .35s var(--spring)}
.ing tr.pick:hover td:first-child::before{transform:scale(1.15)}
.ing tr.pick:focus-visible td{background:rgba(246,211,92,.55)}
.ing tr.got td{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
.ing tr.got td:first-child::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23f6d35c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;transform:rotate(-10deg) scale(1.1)}
.qty{display:inline-block}
.ing .qty{display:inline}
.salt{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.08rem}
.note{margin-top:8px;font-size:.92rem;color:var(--muted)}

/* steps */
.shead{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center}
.bignum{display:block;font-family:var(--display);font-size:clamp(5rem,16vw,8.2rem);line-height:.8;color:var(--butter);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:7px 7px 0 var(--ink);rotate:-7deg;font-variant-numeric:tabular-nums;padding:6px 4px 10px 0}
.stitle{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.stitle h2{text-align:left;font-size:clamp(1.7rem,5.2vw,2.9rem)}
.pill{white-space:nowrap;font-weight:700;font-size:.92rem;border:2px solid var(--ink);border-radius:10px;padding:2px 10px;background:var(--butter)}
.sbody{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}
.instr{font-size:clamp(1.12rem,2.5vw,1.3rem);line-height:1.55;background:var(--sheet)}
.instr strong{white-space:nowrap;font-weight:700;background:var(--butter);border:2px solid var(--ink);border-radius:7px;padding:0 5px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:6px;border:2px solid var(--ink);border-radius:999px;background:var(--sheet);padding:5px 12px;font-size:.95rem}
.chip b{font-variant-numeric:tabular-nums;white-space:nowrap}
.tip{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--butter)}
.tip .tag{font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;background:var(--ink);color:var(--butter);border-radius:8px;padding:4px 9px;rotate:-4deg}
/* tips side by side alternate: light card, dark card, light… */
.cell.tip.alt,.tips .srow:nth-child(even){background:var(--ink);color:var(--sheet)}
.cell.tip.alt .tag{background:var(--butter);color:var(--ink)}
.cell.tip.warn.alt .tag{background:#b3261e;color:#fff}
.tips .srow:nth-child(even) .label{background:var(--butter);color:var(--ink)}
.tmr{appearance:none;font:inherit;color:var(--ink);display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:var(--tile);
  border:2.5px solid var(--ink);border-radius:16px;padding:12px 16px;box-shadow:var(--drop);transition:background-color .25s,color .25s,transform .15s,box-shadow .15s}
.tmr:hover{box-shadow:var(--drop),0 0 22px 7px var(--glow)}
.tmr:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink)}
.tmr:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tmr svg{width:58px;height:58px;flex:none;rotate:-90deg}
.tmr .trk{fill:var(--sheet);stroke:var(--ink);stroke-width:2.5}
.tmr .arc{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear}
.tmr .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.tmr .tt{font-family:var(--display);font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.tmr .tl{font-size:.92rem;color:var(--muted)}
.tmr.run{background:var(--butter)}
.tmr.run svg{animation:tick 1s steps(2) infinite}
@keyframes tick{50%{transform:scale(1.06)}}
.tmr.done{background:var(--ink);color:var(--butter);animation:wob .5s ease-in-out 3}
.tmr.done .tl{color:var(--butter)}
.tmr.done .trk{fill:var(--ink);stroke:var(--butter)}
.tmr.done .arc{stroke:var(--butter)}
@keyframes wob{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}

/* finale */
.store{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:stretch}
.store .vh{font-family:var(--display);font-weight:400;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:clamp(2rem,5.4vw,3.1rem);line-height:.9;align-self:center}
.rows{display:flex;flex-direction:column;gap:22px;min-width:0}
.srow{display:grid;grid-template-columns:9.2rem 1fr;gap:16px;align-items:center}
.srow .label{margin:0;border:2px solid var(--ink);border-radius:10px;background:var(--sheet);padding:6px 10px;text-align:center}
.nuts .label{display:block}
.credit{text-align:center;font-size:.8rem;color:var(--muted)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding-block:26px calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(var(--field-0),var(--field) 42%);pointer-events:none}
.nav-in{max-width:820px;margin-inline:auto;display:flex;gap:12px;pointer-events:auto}
.nb{appearance:none;border:3px solid var(--ink);border-radius:18px;background:var(--sheet);color:var(--ink);box-shadow:6px 6px 0 var(--ink);cursor:pointer;font:inherit;transition:transform .15s,box-shadow .15s,opacity .2s}
.nb:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.nb:active:not(:disabled){transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.nb:disabled{opacity:.4;cursor:default}
.nb:focus-visible{outline:3px solid var(--sheet);outline-offset:3px}
.prev{width:62px;height:62px;display:grid;place-items:center;flex:none}
.prev svg{width:26px;height:26px;transform:scaleX(-1)}
.next{flex:1;min-width:0;height:62px;display:flex;align-items:center;gap:12px;padding:0 9px 0 18px;background:var(--butter);text-align:left}
.next .nx{display:flex;flex-direction:column;min-width:0;flex:1;overflow:hidden}
.next small{font-family:var(--display);text-transform:uppercase;font-size:.7rem;letter-spacing:.08em}
.next b{font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next .arr{width:44px;height:44px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex:none}
.next .arr svg{width:24px;height:24px;color:var(--butter);animation:nudge 1.3s ease-in-out infinite}
.dock{position:fixed;z-index:31;left:0;right:0;bottom:calc(100px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.tchip{pointer-events:auto;appearance:none;cursor:pointer;font:400 .95rem var(--display);font-variant-numeric:tabular-nums;color:var(--butter);background:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;box-shadow:4px 4px 0 rgba(20,18,16,.4)}
.tchip.done{background:var(--butter);color:var(--ink);animation:wob .5s ease-in-out infinite}
.tchip:focus-visible{outline:3px solid var(--sheet);outline-offset:2px}

@media (max-width:620px){
  .grid2{grid-template-columns:1fr;gap:20px}
  .grid3{gap:12px}
  .col{gap:20px}
  :root{--drop:6px 6px 0 var(--ink)}
  .sheet{box-shadow:8px 8px 0 var(--ink);gap:20px}
  .sbody{grid-template-columns:1fr;gap:20px}
  .shead{gap:6px 14px}
  .store{grid-template-columns:1fr}
  .store .vh{writing-mode:horizontal-tb;transform:none}
  .srow{grid-template-columns:1fr;gap:8px}
  .srow .label{justify-self:start}
  .servbar .hint{display:none}
  .servbar{padding:6px 10px}
  .stat .v{font-size:1.15rem}
  .next b{font-size:.98rem}
}

/* music button inside the cover note */
.say.has-link{grid-template-columns:auto 1fr auto}
.blink{width:3rem;height:3rem;display:grid;place-items:center;color:var(--ink);background:var(--butter);border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);transition:box-shadow .2s,transform .15s}
.blink svg{width:1.5rem;height:1.5rem;animation:beat 1.1s ease-in-out infinite}
.blink:hover{box-shadow:3px 3px 0 var(--ink),0 0 14px 4px var(--glow)}
.blink:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.blink:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* authorship */
.byline{align-self:center;font-size:.95rem;background:var(--ink);color:var(--sheet);border-radius:12px;padding:6px 14px}
.byline b,.credit .made b{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.byline a,.credit a{color:var(--butter);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.byline a:focus-visible,.credit a:focus-visible{outline:2px solid var(--butter);outline-offset:3px;border-radius:4px}
.credit{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:inherit;font-size:1rem}
.credit p{margin:0}
.credit .made{font-size:1.1rem;background:var(--ink);color:var(--sheet);border-radius:14px;padding:8px 16px;box-shadow:var(--drop)}
.credit .icons{font-size:.8rem;color:var(--muted)}

/* language */
html[data-lang="en"] .i-ru,html[data-lang="pt"] .i-ru,
html:not([data-lang="en"]) .i-en,html:not([data-lang="pt"]) .i-pt{display:none!important}
.top-r{display:flex;align-items:center;gap:8px;flex:none}
.lang{display:flex;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--sheet)}
.lang button{appearance:none;border:0;background:transparent;color:var(--ink);font:400 .9rem/1.5 var(--display);letter-spacing:.05em;padding:2px 10px;cursor:pointer;transition:background-color .2s}
.lang button+button{border-left:2px solid var(--ink)}
.lang button[aria-pressed="true"]{background:var(--butter)}
.lang button[aria-pressed="false"]:hover{background:#fff;box-shadow:inset 0 0 12px rgba(255,140,40,.55)}
.lang button:focus-visible{outline:3px solid var(--ink);outline-offset:-4px}
@media (max-width:420px){.lang button{padding:2px 7px;font-size:.82rem}.top-r{gap:6px}.cnt{padding:2px 7px}}

/* home button + shared chrome */
.top-l{display:flex;align-items:center;gap:8px;min-width:0}
.home{flex:none;width:36px;height:33px;display:grid;place-items:center;color:var(--ink);background:var(--sheet);border:2.5px solid var(--ink);border-radius:10px;transition:background-color .2s,transform .15s}
.home svg{width:19px;height:19px}
.home:hover{background:var(--butter);transform:translate(-1px,-1px)}
.home:active{transform:translate(1px,1px)}
.home:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}