/* recipes.vexed.works and groceries.vexed.works.
   Built from the parts of vexed.works (code.html): the same tokens and fonts,
   the registration marks, the topbar, the mono eyebrow, the huge uppercase
   title with the red dot, the signal strip and the numbered ruled rows.
   Fonts are served from this site (SIL Open Font License). */
@font-face{font-family:'Chakra Petch';font-weight:400;font-display:swap;src:url(/fonts/chakra-petch-400-latin.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:'Chakra Petch';font-weight:400;font-display:swap;src:url(/fonts/chakra-petch-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-weight:500;font-display:swap;src:url(/fonts/chakra-petch-500-latin.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:'Chakra Petch';font-weight:500;font-display:swap;src:url(/fonts/chakra-petch-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-600-latin.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:'Chakra Petch';font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-700-latin.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:'Chakra Petch';font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;src:url(/fonts/share-tech-mono-400-latin.woff2) format('woff2')}

:root{
  --paper:#FFFFFF;
  --panel:#F1F3F5;
  --ink:#0B0D10;
  --mute:#79828F;
  --body:#2C3138;
  --rule:#D3D8DE;
  --signal:#C8152C;
  --gut:clamp(16px,4.5vw,64px);
  --top:54px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Chakra Petch",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
[hidden]{display:none!important}
.mono{font-family:"Share Tech Mono",ui-monospace,monospace;font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.mute{color:var(--mute)}
.sig{color:var(--signal)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the page presents itself as a technical drawing */
.reg{position:fixed;width:22px;height:22px;pointer-events:none;z-index:60;border-color:var(--ink);opacity:.45}
.reg.tl{top:14px;left:14px;border-left:1px solid;border-top:1px solid}
.reg.tr{top:14px;right:14px;border-right:1px solid;border-top:1px solid}
.reg.bl{bottom:14px;left:14px;border-left:1px solid;border-bottom:1px solid}
.reg.br{bottom:14px;right:14px;border-right:1px solid;border-bottom:1px solid}
@media(max-width:760px){.reg{display:none}}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------ topbar */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top)}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:var(--top)}
.topbar .mark{width:17px;height:17px;flex:0 0 auto;color:var(--ink)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.wordmark{font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.topnav{margin-left:auto;display:flex;gap:18px;align-items:center}
.topnav a{color:var(--mute);transition:color .18s;padding:10px 0}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current]{color:var(--ink);border-bottom:2px solid var(--signal);padding-bottom:8px}
.topnav .gear{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-11px;padding:0}
.topnav .gear svg{width:21px;height:21px;display:block}
/* On a phone the wordmark already says where you are; the nav only offers the other app. */
@media(max-width:560px){.topnav a[data-nav][aria-current]{display:none}}

/* -------------------------------------------------------------- hero */
.hero{padding-top:clamp(26px,6vw,80px)}
.eyebrow{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mute);margin-bottom:clamp(14px,3vw,30px)}
.eyebrow b{color:var(--ink);font-weight:500}
.eyebrow .sig{color:var(--signal)}
h1{font-weight:700;font-size:clamp(46px,13.5vw,176px);line-height:.84;letter-spacing:-.022em;
  text-transform:uppercase;margin:0;overflow-wrap:anywhere}
h1 .dot{color:var(--signal)}
h1.long{font-size:clamp(34px,9vw,112px);line-height:.9;hyphens:auto;overflow-wrap:break-word}
h2{font-weight:700;text-transform:uppercase;font-size:clamp(24px,4.4vw,48px);line-height:.9;margin:0}
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--ink);padding-top:clamp(18px,3vw,30px);margin:clamp(30px,5vw,56px) 0 clamp(14px,2.4vw,24px)}
.section-head .note{color:var(--mute);margin-left:auto}

/* signal strip: here it reads out how far the list is */
.signal-strip{margin:clamp(20px,4vw,40px) 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.signal-strip .wrap{display:flex;align-items:center;gap:0;height:58px}
.sig-label{flex:0 0 auto;color:var(--mute);padding-right:16px;white-space:nowrap}
.sig-bar{flex:1 1 auto;height:2px;background:var(--rule);position:relative;min-width:0}
.sig-bar i{position:absolute;left:0;top:-1px;height:4px;background:var(--signal);transition:width .35s ease}
.sig-readout{flex:0 0 auto;color:var(--ink);padding-left:16px;margin-left:16px;white-space:nowrap;
  border-left:1px solid var(--rule);height:100%;display:flex;align-items:center}

/* ----------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;
  font:500 12px/1 "Share Tech Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  transition:background .15s,color .15s}
.btn:hover{background:var(--panel)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:#262A30}
.btn.signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;padding:0 10px}
.btn.ghost:hover{background:var(--panel)}
.btn:disabled{opacity:.4;cursor:default}
.btn svg{width:16px;height:16px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,3vw,28px) 0}
.actions .grow{flex:1 1 auto}

label.field{display:block;margin:0 0 18px}
label.field>span{display:block;color:var(--mute);margin-bottom:6px}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:11px 12px;width:100%;min-height:44px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink)}
textarea{min-height:140px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:auto;min-height:0}
.hint{color:var(--mute);font-size:14px;margin:-8px 0 18px}

.search{display:flex;gap:10px;margin:clamp(18px,3vw,28px) 0 0}
.search input{flex:1 1 auto}

/* ---------------------------------------------------- the ruled rows */
.rows{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--rule);transition:background .16s,padding-left .16s}
.row:hover,.row:focus-visible{background:var(--panel);padding-left:8px}
.row .idx{color:var(--mute);align-self:start;padding-top:5px}
.row .ttl{font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.4vw,28px);line-height:1.05;overflow-wrap:anywhere}
.row .meta{grid-column:2;color:var(--mute);font-size:14px;line-height:1.3}
.row .st{grid-column:3;grid-row:1/span 2;color:var(--mute)}
.row .thumb{width:58px;height:58px;object-fit:cover;display:block;border:1px solid var(--rule);background:var(--panel)}
.empty{color:var(--mute);padding:22px 0;border-bottom:1px solid var(--rule)}

/* ------------------------------------------------------------ recipe */
.back{display:inline-block;color:var(--mute);padding:12px 0 0}
.back:hover{color:var(--ink)}
.photo{margin:clamp(18px,3vw,30px) 0 0}
.photo img{width:100%;max-height:62vh;object-fit:cover;display:block;border:1px solid var(--rule);background:var(--panel)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.stepper button{width:44px;height:44px;border:0;background:var(--paper);font:500 20px/1 "Share Tech Mono",monospace;cursor:pointer}
.stepper button:hover{background:var(--panel)}
.stepper output{min-width:96px;text-align:center;padding:0 6px}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:clamp(16px,3vw,26px) 0}
.ings{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ings li{display:grid;grid-template-columns:minmax(76px,30%) minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.ings .q{font-family:"Share Tech Mono",monospace;font-size:15px;text-align:right;color:var(--ink);white-space:nowrap}
.ings .n{font-size:17px}
.ings .n small{display:block;color:var(--mute);font-size:14px}
.ings li.head{display:block;border-bottom:1px solid var(--ink);padding-top:22px;color:var(--ink)}
.ings .opt{color:var(--mute)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);counter-reset:step}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px;color:var(--body)}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font:500 11px/1.9 "Share Tech Mono",monospace;letter-spacing:.14em;color:var(--mute)}
.notes{white-space:pre-line;color:var(--body);font-size:17px;max-width:62ch}
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(28px,5vw,72px)}
@media(min-width:900px){.two{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ------------------------------------------------------------ groceries */
.add{display:flex;gap:10px;margin:clamp(18px,3vw,28px) 0 clamp(16px,2.5vw,24px)}
.add input{flex:1 1 auto}
.add .btn{width:52px;padding:0;font-size:22px}
.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:44px minmax(0,1fr) auto 40px;gap:2px 10px;align-items:center;
  border-bottom:1px solid var(--rule);min-height:62px;padding:8px 0;cursor:pointer;user-select:none}
.entry:hover{background:var(--panel)}
.box{width:26px;height:26px;border:1.5px solid var(--ink);display:grid;place-items:center;margin-left:6px;transition:background .15s}
.box svg{width:16px;height:16px;opacity:0;color:#fff}
.entry[aria-checked=true] .box{background:var(--signal);border-color:var(--signal)}
.entry[aria-checked=true] .box svg{opacity:1}
.entry .ttl{font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.2vw,24px);line-height:1.1;overflow-wrap:anywhere}
.entry .amt{font-family:"Share Tech Mono",monospace;font-size:15px;white-space:nowrap;text-align:right}
.entry .meta{grid-column:2/4;color:var(--mute);font-size:14px;line-height:1.3}
.entry .more{grid-column:4;grid-row:1/span 2;width:40px;height:44px;border:0;background:transparent;cursor:pointer;color:var(--mute)}
.entry .more:hover{color:var(--ink)}
.entry[aria-checked=true] .ttl{text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px;color:var(--mute)}
.cart>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;
  border-top:1px solid var(--ink);padding:clamp(18px,3vw,26px) 0 14px;margin-top:clamp(28px,5vw,48px)}
.cart>summary::-webkit-details-marker{display:none}
.cart>summary h2::after{content:" +";color:var(--signal)}
.cart[open]>summary h2::after{content:" \2212"}

/* ------------------------------------------------------------- sheet */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:640px;max-height:92vh;
  background:var(--paper);color:var(--ink);border-top:3px solid var(--signal);box-shadow:0 -10px 40px rgba(11,13,16,.18)}
dialog.sheet::backdrop{background:rgba(11,13,16,.42)}
@media(min-width:700px){dialog.sheet{margin:auto;border:1px solid var(--ink);border-top:3px solid var(--signal)}}
.sheet-in{padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));overflow:auto;max-height:92vh}
.sheet-in h2{margin-bottom:14px}
.picklist{list-style:none;margin:0 0 6px;padding:0;border-top:1px solid var(--rule)}
.picklist label{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.picklist input{width:22px;height:22px;accent-color:var(--signal)}
.picklist .q{font-family:"Share Tech Mono",monospace;color:var(--mute);white-space:nowrap}
.picklist .head{padding:16px 0 6px;color:var(--ink);border-bottom:1px solid var(--ink)}
.code{font:500 clamp(44px,14vw,72px)/1 "Share Tech Mono",monospace;letter-spacing:.12em;margin:10px 0 6px}

/* ------------------------------------------------------------- toast */
#toasts{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;display:grid;justify-items:center;gap:8px;pointer-events:none;padding:0 var(--gut)}
.toast{pointer-events:auto;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:14px;
  padding:12px 16px;max-width:560px;width:100%;box-shadow:0 8px 28px rgba(11,13,16,.25)}
.toast span{flex:1 1 auto}
.toast a,.toast button{color:#fff;background:none;border:0;border-bottom:2px solid var(--signal);padding:4px 0;cursor:pointer;font:inherit}
.toast.error{background:var(--signal)}
.toast.error a,.toast.error button{border-bottom-color:#fff}

/* -------------------------------------------------------------- cook */
body.cooking .topbar,body.cooking .reg{display:none}
/* Only top and bottom: the side gutter comes from .wrap. A shorthand padding
   here put the step text against the screen edge. */
.cook{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.cook-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule);min-height:var(--top)}
.cook-top .title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cook-main{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.cook-count{color:var(--signal);margin-bottom:16px}
.cook-step{font-weight:500;font-size:clamp(24px,6vw,46px);line-height:1.22;margin:0;max-width:30ch}
.timers-found{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.running{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.timer{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule);min-height:52px}
.timer .left{font:500 26px/1 "Share Tech Mono",monospace;letter-spacing:.06em;min-width:96px}
.timer .lbl{flex:1 1 auto;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer.done{background:var(--signal);color:#fff;animation:pulse 1s steps(2) infinite}
.timer.done .lbl{color:#fff}
@keyframes pulse{50%{background:var(--ink)}}
.cook-nav{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:14px 0}
.cook-nav .btn{min-height:64px;font-size:14px}
.cook-ings{border-top:1px solid var(--rule);padding-top:10px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------ editor */
.preview-ings{list-style:none;margin:-6px 0 22px;padding:0;font-size:14px;color:var(--mute)}
.preview-ings li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;border-bottom:1px dashed var(--rule);padding:4px 0}
.preview-ings .q{font-family:"Share Tech Mono",monospace;color:var(--ink)}
.preview-ings .head{display:block;color:var(--ink);font-weight:600}
.photo-pick{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.photo-pick img{width:96px;height:96px;object-fit:cover;border:1px solid var(--rule)}
.danger-zone{border-top:1px solid var(--rule);margin-top:36px;padding-top:18px}

/* ---------------------------------------------------------- settings */
.settings section{margin-bottom:8px}
.kv{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.kv li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--rule)}
.kv li .grow{flex:1 1 auto;min-width:0}
.kv li small{display:block;color:var(--mute)}
.pair{max-width:520px}
.pair .code-input{font:500 32px/1 "Share Tech Mono",monospace;letter-spacing:.3em;text-align:center}
footer.foot{margin:72px 0 40px;color:var(--mute)}

/* ---------------------------------------------- groceries tabs (phase 2) */
.tabs{border-bottom:1px solid var(--rule)}
.tabs .wrap{display:flex;align-items:center;gap:22px;min-height:52px}
.tab{color:var(--mute);padding:14px 0 12px;border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab[aria-current]{color:var(--ink);border-bottom-color:var(--signal)}
.tabs .receipt-btn{margin-left:auto;margin-right:-10px}
.hint.top{margin:clamp(18px,3vw,28px) 0 14px}
.entry .prod{grid-column:2/4;font-size:13px;color:var(--ink);padding:2px 0;justify-self:start;
  border-bottom:1px solid var(--signal);overflow-wrap:anywhere}
.entry.again{cursor:pointer}
.entry.again .box{font:500 18px/1 "Share Tech Mono",monospace;color:var(--ink)}
.entry.again.due .box{border-color:var(--signal);color:var(--signal)}
.entry.again.due .amt{color:var(--signal)}
.entry.again[aria-disabled=true]{cursor:default}
.entry.again[aria-disabled=true] .ttl{color:var(--mute)}
.entry.again .meta{grid-column:2/5}

/* -------------------------------------------------- receipt review */
.rhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.receipt-lines{margin-top:6px}
.rline{padding:14px 0 6px;border-bottom:1px solid var(--rule)}
.rline .field{margin-bottom:10px}
.rline .field>span{font-size:11px;margin-bottom:4px}
.rgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px}
.rgrid .field{grid-column:span 2}
.rgrid .field.name{grid-column:span 4}
.rgrid .field.item{grid-column:span 6}
.rgrid input{min-height:40px;padding:6px 10px}
.rgrid .num{font-family:"Share Tech Mono",monospace;text-align:right}
.rline.minor{opacity:.75}
.match{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--mute);font-size:13px;min-height:28px}
.match .keep{display:inline-flex;align-items:center;gap:8px;color:var(--ink);cursor:pointer}
.match .keep input{width:20px;height:20px;accent-color:var(--signal)}
.rline .remove{min-height:36px;font-size:12px;color:var(--mute);margin-left:-10px}
@media(min-width:760px){
  .rgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .rgrid .field{grid-column:span 1}
  .rgrid .field.name,.rgrid .field.item{grid-column:span 2}
}

/* ------------------------------------------------------- product */
.row.static:hover{background:none;padding-left:0}
.row.rating{grid-template-columns:minmax(0,1fr) auto}
.row.rating .meta{grid-column:1}
.row.rating .st{grid-column:2;grid-row:1;font-size:20px;letter-spacing:.08em}
.row.rating .st.mono{font-size:13px}
.row.rating .st.sig{color:var(--signal)}
h3.sub{color:var(--mute);margin:clamp(22px,4vw,36px) 0 10px;font-weight:500}
.stars{display:flex;gap:4px;margin:0 0 14px}
.star{width:48px;height:48px;border:1px solid var(--rule);background:var(--paper);font-size:24px;line-height:1;
  color:var(--rule);cursor:pointer}
.star[aria-pressed=true]{color:var(--signal);border-color:var(--ink)}