[hidden] { display: none !important; }
:root {
  --turf: oklch(0.2 0.03 152); --stripe: oklch(0.235 0.035 150); --board: oklch(0.15 0.015 150); --board2: oklch(0.19 0.02 150);
  --chalk: oklch(0.95 0.012 110); --faded: oklch(0.76 0.02 140); --red: oklch(0.62 0.21 27); --redd: oklch(0.48 0.18 27);
  --blue: oklch(0.62 0.17 258); --blued: oklch(0.47 0.15 258); --hemp: oklch(0.8 0.12 82); --line: oklch(0.95 0.012 110 / .14);
  --disp: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif; --num: 'Jersey 10', monospace; --text: 'Barlow', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--chalk); font: 16px/1.5 var(--text); min-height: 100svh; overflow-x: hidden;
  background:
    radial-gradient(60% 50% at 18% -8%, oklch(0.95 0.03 110 / .13), transparent 70%),
    radial-gradient(60% 50% at 82% -8%, oklch(0.95 0.03 110 / .13), transparent 70%),
    repeating-linear-gradient(90deg, var(--stripe) 0 9vw, var(--turf) 9vw 18vw);
  background-attachment: fixed;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hemp); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--disp); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: .95; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7vw, 84px); }
h2 { font-size: clamp(32px, 4.4vw, 54px); }
h3 { font-size: 26px; }
.sub { color: var(--faded); max-width: 62ch; margin: 10px 0 0; }
.band > .sub { margin-left: max(0px, calc((100% - 1280px) / 2)); }
.lr h2 { font-size: 30px; }
.cpot { display: grid; justify-items: center; margin-top: 8px; padding-top: 8px; border-top: 2px solid oklch(0.3 0.02 150); width: 100%; }
.cpot small { font: 800 15px var(--disp); text-transform: uppercase; color: var(--faded); }
.cpot b { font: 400 clamp(34px, 3.4vw, 48px)/.9 var(--num); color: var(--chalk); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) { .under .pot { display: none; } .under { grid-template-columns: 1fr minmax(320px, 440px); } }
.lbl { font-size: 13px; color: var(--faded); font-weight: 600; }
.empty { color: var(--faded); list-style: none; padding: 14px 0; }
.err { color: oklch(0.8 0.12 30); }
.linkbtn { background: none; border: 0; color: var(--hemp); font: inherit; text-decoration: underline; cursor: pointer; }

/* HUD */
.hud { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px clamp(12px, 3vw, 36px); background: linear-gradient(var(--board), oklch(0.15 0.015 150 / .86)); border-bottom: 2px solid var(--line); backdrop-filter: blur(6px); }
.mark { display: flex; align-items: center; gap: 8px; text-decoration: none; font: italic 900 26px/1 var(--disp); text-transform: uppercase; }
.mark em { font-style: italic; font-weight: 600; color: var(--hemp); margin: 0 3px; font-size: .72em; }
.links { display: flex; gap: 4px; margin-left: 8px; }
.links a { text-decoration: none; font: 800 19px/1 var(--disp); text-transform: uppercase; padding: 9px 12px; color: var(--faded); border-radius: 4px; }
.links a:hover { color: var(--chalk); background: var(--board2); }
.links a.on { color: var(--chalk); box-shadow: inset 0 -3px 0 var(--hemp); }
.chip { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--board2); color: var(--chalk); border: 2px solid var(--line); border-radius: 6px; padding: 7px 12px; font: 600 15px var(--text); cursor: pointer; min-height: 40px; }
.chip b { font: 900 italic 20px/1 var(--disp); color: var(--hemp); }
.chip span, .chip i { font-variant-numeric: tabular-nums; font-style: normal; }
.chip .up { color: oklch(0.8 0.15 150); } .chip .dn { color: oklch(0.75 0.15 30); }
.chip:hover { border-color: var(--hemp); }

/* Stage */
.stage { min-height: calc(100svh - 64px); display: grid; grid-template-rows: auto minmax(260px, 1fr) auto; padding: clamp(10px, 2vw, 24px) clamp(10px, 3vw, 36px) 18px; gap: 10px; }
.bug { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.plate { position: relative; display: grid; align-content: center; padding: 12px clamp(14px, 3vw, 40px); min-height: 150px; transition: filter .3s; }
.plate.red { background: linear-gradient(100deg, var(--redd), var(--red)); clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%); padding-right: 50px; }
.plate.blue { background: linear-gradient(260deg, var(--blued), var(--blue)); clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%); padding-left: 50px; text-align: right; }
.plate::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, oklch(1 0 0 / .05) 0 2px, transparent 2px 4px); pointer-events: none; }
.tname { font: italic 900 clamp(22px, 2.6vw, 34px)/1 var(--disp); text-transform: uppercase; }
.score { display: flex; align-items: baseline; gap: 8px; }
.blue .score { justify-content: flex-end; }
.score b { font: 400 clamp(64px, 10vw, 138px)/.82 var(--num); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 oklch(0.15 0.02 30 / .35); }
.score small { font: 800 20px var(--disp); opacity: .85; }
.tmeta { font-size: 14px; font-weight: 600; opacity: .95; }
.plate.ahead .tname::after { content: ' leads'; color: var(--hemp); }
.sealed .plate { filter: saturate(.35) brightness(.7); }
.clock { background: var(--board); border: 3px solid oklch(0.3 0.02 150); display: grid; justify-items: center; align-content: center; padding: 8px clamp(14px, 2vw, 30px); margin: 0 -18px; z-index: 1; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); min-width: 190px; }
.time { font: 400 clamp(56px, 7vw, 96px)/.85 var(--num); color: var(--hemp); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px oklch(0.8 0.12 82 / .35); }
.sealed .time { color: var(--red); text-shadow: 0 0 18px oklch(0.62 0.21 27 / .5); }
.rnd { font: 800 17px/1.1 var(--disp); text-transform: uppercase; color: var(--faded); font-variant-numeric: tabular-nums; }
.rnd:first-child { color: var(--chalk); font-size: 20px; }

.pitch { position: relative; border-block: 2px solid var(--line); overflow: hidden; background: radial-gradient(70% 90% at 50% 50%, oklch(0.95 0.03 110 / .06), transparent 70%); }
.rope { position: absolute; inset: 0; }
.rope-svg { display: block; }
.chalk line { stroke: var(--chalk); stroke-width: 3; opacity: .5; }
.chalk .mid { stroke-dasharray: 10 10; opacity: .7; }
.chalk .zl { opacity: .28; }
.zt { font: italic 800 17px var(--disp); text-transform: uppercase; }
.zt.red { fill: oklch(0.75 0.15 27); } .zt.blue { fill: oklch(0.76 0.12 258); }
.tick line { stroke: var(--chalk); stroke-width: 2; opacity: .35; }
.slot rect { fill: oklch(0.2 0.03 152 / .55); stroke: var(--chalk); stroke-width: 2; stroke-dasharray: 5 4; opacity: .6; }
.slot .fing line { stroke: var(--chalk); stroke-width: 1.5; opacity: .3; }
.jn { font: 400 22px var(--num); fill: var(--faded); }
.jn.on { fill: var(--chalk); font-size: 24px; }
.grip { cursor: pointer; }
.grip .band { stroke: var(--board); stroke-width: 3; }
.grip.red .band { fill: var(--red); } .grip.blue .band { fill: var(--blue); }
.grip.q .band { stroke: var(--hemp); stroke-width: 3.5; }
.grip .fing line { stroke: oklch(0.15 0.015 150 / .4); stroke-width: 2; }
.grip:hover .band { filter: brightness(1.2); }
.gs { font: 400 24px var(--num); fill: var(--chalk); }
.ga { font: 600 12px var(--text); fill: var(--faded); }
.lead { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; font: italic 800 clamp(20px, 2.4vw, 28px)/1 var(--disp); text-transform: uppercase; white-space: nowrap; background: var(--board); padding: 10px 18px; border: 2px solid var(--line); }
.lead .red { color: oklch(0.72 0.18 27); } .lead .blue { color: oklch(0.74 0.14 258); }
.tarp { position: absolute; left: 20%; right: 20%; top: 12%; bottom: 22%; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; background: repeating-linear-gradient(135deg, var(--board) 0 18px, var(--board2) 18px 36px); border: 3px solid var(--red); animation: drop .6s var(--ease); }
.tarp b { font: italic 900 clamp(48px, 7vw, 92px)/.9 var(--disp); text-transform: uppercase; color: var(--red); }
.tarp span { font: 400 clamp(44px, 5vw, 70px)/.9 var(--num); color: var(--chalk); }
.tarp small { color: var(--faded); font-weight: 600; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
.grip-tip { position: absolute; z-index: 4; transform: translate(-50%, -100%); background: var(--board); border: 2px solid var(--hemp); padding: 10px 12px; display: grid; gap: 2px; font-size: 14px; min-width: 170px; pointer-events: auto; }
.grip-tip b { font: italic 900 20px var(--disp); text-transform: uppercase; } .grip-tip .red { color: oklch(0.72 0.18 27); } .grip-tip .blue { color: oklch(0.74 0.14 258); }
.grip-tip a { color: var(--hemp); font-weight: 600; }

.under { display: grid; grid-template-columns: auto 1fr minmax(300px, 420px); gap: clamp(14px, 3vw, 40px); align-items: center; }
.pot { display: grid; background: var(--board); border: 2px solid var(--hemp); padding: 10px 18px; }
.pot b { font: 400 clamp(40px, 4.5vw, 62px)/.9 var(--num); color: var(--hemp); font-variant-numeric: tabular-nums; }
.rule { margin: 0; font: 700 clamp(17px, 1.6vw, 21px)/1.3 var(--text); max-width: 46ch; }
.check label { font: italic 900 22px var(--disp); text-transform: uppercase; display: block; margin-bottom: 4px; }
.check .row { display: flex; background: var(--board); border: 2px solid var(--line); }
.check .row:focus-within { border-color: var(--hemp); }
.check input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--chalk); font: 500 16px var(--text); padding: 12px; outline: 0; }
.check input::placeholder { color: oklch(0.68 0.02 140); }
.check button, .share button, .share a, .buy, .more, .sheet .close, .carow button { background: var(--hemp); color: var(--board); border: 0; font: italic 900 20px/1 var(--disp); text-transform: uppercase; padding: 12px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; transition: transform .15s var(--ease), filter .15s; }
.check button:hover, .share a:hover, .share button:hover, .buy:hover, .more:hover { filter: brightness(1.1); transform: translateY(-1px); }
.check button:active { transform: translateY(1px); }
.result { min-height: 30px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 15px; }
.result a { color: var(--hemp); font-weight: 600; }
.tag { font: italic 900 18px/1 var(--disp); text-transform: uppercase; padding: 6px 10px; }
.tag.red { background: var(--red); } .tag.blue { background: var(--blue); }
.chr { font: 400 26px/1 var(--num); color: var(--hemp); padding: 0 4px; background: var(--board); }

/* Bands */
.band { padding: clamp(40px, 6vw, 80px) clamp(14px, 4vw, 56px); }
.band > * { max-width: 1280px; margin-inline: auto; }
.bandhead { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.bandhead a { color: var(--hemp); font-weight: 700; }
.pullers { background: linear-gradient(var(--board), transparent 40%); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 40px); margin-top: 24px; }
.plist { list-style: none; margin: 0; padding: 0; border-top: 6px solid; }
.plist.red { border-color: var(--red); } .plist.blue { border-color: var(--blue); }
.plist li { display: grid; grid-template-columns: 28px 1fr auto auto 28px; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.plist li.empty { display: block; }
.plist .n { font: 400 22px var(--num); color: var(--faded); }
.addr { font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.addr:hover { text-decoration: underline; }
.plist .b { font: 400 24px var(--num); }
.plist .s { font-size: 13px; color: oklch(0.78 0.12 30); }
.plist .q { width: 24px; height: 24px; border: 2px solid var(--line); display: grid; place-items: center; color: var(--board); font-weight: 800; }
.plist .q.y { background: var(--hemp); border-color: var(--hemp); }
.tapeband { background: var(--board); }
.tape { list-style: none; padding: 0; margin: 20px auto 0; columns: 2 420px; column-gap: 40px; }
.tape li { break-inside: avoid; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto 26px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.tape li.empty { display: block; }
.tg { font: italic 900 16px/1 var(--disp); text-transform: uppercase; padding: 4px 6px; text-align: center; }
.tape .red .tg { background: var(--red); } .tape .blue .tg { background: var(--blue); }
.tape .tb { color: oklch(0.85 0.12 150); } .tape .ts { color: oklch(0.8 0.12 30); }
.tape time, .spends time { color: var(--faded); font-size: 13px; }
.sx { color: var(--hemp); font-size: 13px; font-weight: 600; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 22px; }
.whistle { display: grid; gap: 2px; padding: 14px; text-decoration: none; background: var(--board); border-top: 6px solid var(--faded); }
.whistle.red { border-color: var(--red); } .whistle.blue { border-color: var(--blue); }
.whistle .rn { font: 400 22px var(--num); color: var(--faded); }
.whistle .w { font: italic 900 26px/1 var(--disp); text-transform: uppercase; }
.whistle .amt { font-size: 14px; color: var(--hemp); font-weight: 600; }
.whistle.roll .amt { color: var(--faded); }
.money { background: linear-gradient(transparent, var(--board) 60%); }
.split { display: flex; margin-top: 24px; min-height: 96px; }
.seg { display: grid; align-content: end; padding: 12px 16px; min-width: 0; }
.seg b { font: 400 48px/.9 var(--num); } .seg span { font-weight: 600; font-size: 15px; }
.potseg { background: linear-gradient(180deg, var(--hemp), oklch(0.72 0.12 78)); color: var(--board); box-shadow: inset 0 -6px 0 oklch(0.6 0.1 72); }
.burn { background: var(--board2); border: 2px solid var(--hemp); min-width: 118px; }
.vstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.vstats div, .cstats div, .mine div { display: grid; }
.vstats b, .cstats b, .mine b { font: 400 34px/1 var(--num); font-variant-numeric: tabular-nums; }
.spends { list-style: none; padding: 0; margin: 18px 0 0; }
.spends li { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: center; font-variant-numeric: tabular-nums; }
.spends li.empty { display: block; }
details { border-bottom: 1px solid var(--line); max-width: 860px; }
summary { cursor: pointer; font: italic 800 24px var(--disp); text-transform: uppercase; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
summary::after { content: '+'; color: var(--hemp); font-style: normal; }
details[open] summary::after { content: '−'; }
details p { margin: 0 0 16px; color: oklch(0.88 0.015 120); max-width: 68ch; }
.faq details { margin-inline: auto; }

/* Pages */
.page { max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 60px) clamp(14px, 4vw, 32px) 60px; min-height: 70svh; }
.page.wide { max-width: 1100px; }
.check.big { margin: 26px 0; }
.rulecard { margin: 24px 0; }
.halves { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.halves div { padding: 16px; display: grid; gap: 4px; }
.halves .red { background: var(--red); } .halves .blue { background: var(--blue); }
.halves b { font: italic 900 28px/1 var(--disp); text-transform: uppercase; }
.teamcard { padding: 22px; display: grid; gap: 6px; }
.teamcard.red { background: linear-gradient(100deg, var(--redd), var(--red)); } .teamcard.blue { background: linear-gradient(100deg, var(--blued), var(--blue)); }
.teamcard .big { font: italic 900 clamp(52px, 9vw, 96px)/.85 var(--disp); text-transform: uppercase; }
.mine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: var(--board); padding: 18px; }
.mine .st { grid-column: 1 / -1; margin: 0; font-weight: 700; }
.mine .st.ok { color: var(--hemp); }
.wins { list-style: none; padding: 0; } .wins li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.page h3 { margin-top: 24px; }
.share { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.skel { height: 120px; margin-top: 12px; background: linear-gradient(90deg, var(--board) 30%, var(--board2), var(--board) 70%) 0 0 / 300% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -300% 0; } }
.lr { background: var(--board); margin-top: 16px; padding: 18px; border-left: 0; border-top: 6px solid var(--faded); }
.lr.red { border-color: var(--red); } .lr.blue { border-color: var(--blue); }
.lr header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.lr time { color: var(--faded); font-size: 14px; }
.sc { display: flex; gap: 18px; margin-top: 8px; font: 400 26px var(--num); font-variant-numeric: tabular-nums; }
.sc .red { color: oklch(0.72 0.18 27); } .sc .blue { color: oklch(0.74 0.14 258); }
.res { margin: 8px 0; } .res b.red { color: oklch(0.72 0.18 27); } .res b.blue { color: oklch(0.74 0.14 258); }
.pt { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.pt th { text-align: left; color: var(--faded); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pt td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.more { margin-top: 18px; }

/* Sheet, toast, footer, tabs */
.sheet { position: fixed; z-index: 40; top: 64px; right: clamp(8px, 3vw, 36px); width: min(380px, calc(100vw - 16px)); background: var(--board); border: 2px solid var(--hemp); padding: 18px; animation: drop .25s var(--ease); }
.sheet h3 span { font: 400 26px var(--num); color: var(--hemp); margin-left: 8px; }
.cstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } .cstats b { font-size: 26px; }
.spark { width: 100%; height: 60px; } .spark path { fill: none; stroke: var(--hemp); stroke-width: 2; vector-effect: non-scaling-stroke; }
.carow { display: flex; gap: 8px; align-items: center; margin: 10px 0; min-width: 0; }
.carow code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.carow button { font-size: 16px; padding: 8px 12px; min-height: 36px; }
.buy { width: 100%; }
.sheet .close { background: var(--board2); color: var(--chalk); font-size: 16px; margin-top: 10px; min-height: 36px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--hemp); color: var(--board); padding: 10px 16px; font-weight: 700; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 24px; padding: 36px clamp(14px, 4vw, 56px) 110px; border-top: 2px solid var(--line); background: var(--board); }
.fcol { display: grid; gap: 6px; align-content: start; min-width: 0; color: var(--faded); font-size: 15px; }
.fcol b { font: italic 900 24px var(--disp); text-transform: uppercase; color: var(--chalk); }
.fcol a { color: var(--chalk); }
.ca { background: none; border: 0; color: var(--chalk); font: 13px var(--text); padding: 0; text-align: left; overflow-wrap: anywhere; cursor: pointer; text-decoration: underline dotted; }
.tabs { display: none; }

@media (max-width: 760px) {
  .links { display: none; }
  .mark { font-size: 22px; }
  .stage { min-height: calc(100svh - 60px - 64px); padding: 8px 8px 12px; grid-template-rows: auto minmax(230px, 1fr) auto; }
  .bug { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .clock { grid-column: 1 / -1; grid-row: 1; margin: 0 0 6px; clip-path: none; flex-direction: row; display: flex; justify-content: center; gap: 12px; align-items: center; padding: 6px 10px; min-width: 0; }
  .time { font-size: 54px; }
  .cpot { display: none; }
  .plate { min-height: 110px; padding: 10px 12px; }
  .plate.red { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); padding-right: 22px; }
  .plate.blue { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); padding-left: 22px; }
  .score b { font-size: 62px; }
  .score small { font-size: 15px; }
  .tmeta { font-size: 12.5px; line-height: 1.25; }
  .plate.ahead .tname::after { content: ''; }
  .plate.ahead { box-shadow: inset 0 -5px 0 var(--hemp); }
  .zt { font-size: 13px; }
  .lead { font-size: 18px; bottom: 8px; }
  .tarp { left: 6%; right: 6%; }
  .under { grid-template-columns: 1fr; gap: 12px; }
  .pot { grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; }
  .pot #potNote { grid-column: 1 / -1; }
  .rule { font-size: 16px; }
  .cols, .halves, .vstats, .mine { grid-template-columns: 1fr; }
  .plist li { grid-template-columns: 24px minmax(0, 1fr) auto 26px; }
  .plist .s { display: none; }
  .tape li { grid-template-columns: 46px minmax(0, 1fr) auto 26px; }
  .tape time { display: none; }
  .spends li { grid-template-columns: 1fr auto auto; } .spends li > span:nth-child(3), .spends time { display: none; }
  .foot { grid-template-columns: 1fr; }
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; background: var(--board); border-top: 2px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabs a { display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; text-decoration: none; font: 800 15px/1 var(--disp); text-transform: uppercase; color: var(--faded); min-height: 56px; }
  .tabs a.on { color: var(--hemp); box-shadow: inset 0 3px 0 var(--hemp); }
  .tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .sheet { top: auto; bottom: 64px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }