:root {
  --bg: #F2F3EF;
  --surface: #FFFFFF;
  --ink: #15171C;
  --ink-2: #33373F;
  --muted: #4A4F59;
  --muted-2: #565B66;
  --line: #DFE1DA;
  --line-2: #ECEDE8;
  --chip-line: #C9CCC3;
  --accent: #2448E0;
  --accent-soft: #EBEFFF;
  --nice: #9AA6D8;
  --nice-soft: #E3E7F8;
  --nice-ink: #23336E;
  --ok: #1F7A4D;
  --ok-soft: #DDF0E5;
  --ok-ink: #1A5E3C;
  --no: #B4481A;
  --no-soft: #FBE9DF;
  --no-ink: #8F3410;
  --dark-2: #22252C;
  --dark-muted: #B9BFD0;
  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); }
button { font-family: inherit; }
h1, h2, h3 { margin: 0; }

.page { min-height: 100vh; padding: 28px 16px 64px; }
.wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.label { font: 600 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.label.light { color: var(--dark-muted); }
.muted-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.small-p { font-size: 14px; }
.empty { font-size: 14px; color: var(--muted-2); padding: 4px 12px; }

/* Picker */
.picker { display: flex; flex-direction: column; gap: 10px; }
.picker-label { font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.picker-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.pick { flex: 0 0 auto; width: 220px; scroll-snap-align: start; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.pick:hover { border-color: var(--ink); transform: translateY(-2px); }
.pick.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pick-role { font: 700 15px var(--display); color: var(--ink); }
.pick-quote { font-size: 13px; line-height: 1.35; color: var(--muted-2); }

/* Audience */
.audience { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.audience-pill { display: inline-flex; background: var(--accent); color: #fff; font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; }
.audience p { margin: 0; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.handoff { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.handoff-line { display: flex; align-items: center; gap: 14px; }
.handoff-line::before, .handoff-line::after { content: ''; flex: 1; height: 1px; background: #D5D8D0; }
.handoff-line span { flex: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--ink-2); font: 600 14px var(--body); text-align: center; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.eyebrow { font: 600 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.hero h1 { font: 700 clamp(30px, 4.4vw, 50px)/1.05 var(--display); letter-spacing: -.02em; }
.lede { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.brief-quote { flex: 0 1 360px; background: var(--surface); border: 1px dashed #B9BDB2; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.brief-quote .quote { font: 500 17px/1.4 var(--display); }

/* Layout */
.row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.deck-col { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.deck-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.step { font: 600 15px var(--body); color: var(--muted); }
.dots { display: flex; gap: 6px; align-items: center; }
.dot { display: block; height: 8px; width: 8px; border-radius: 99px; background: var(--chip-line); transition: width .35s cubic-bezier(.2,.85,.2,1), background .35s; }
.dot.past { background: var(--ink); }
.dot.cur { width: 28px; background: var(--accent); }
.deck { position: relative; min-height: 470px; }

/* Card */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; position: relative; box-shadow: 0 1px 0 rgba(21,23,28,.04), 0 22px 44px -26px rgba(21,23,28,.45); }
.enter { animation: cardIn .6s cubic-bezier(.2,.85,.2,1) both; }
.out-yes { animation: outYes .44s cubic-bezier(.55,0,.8,.2) forwards; }
.out-no { animation: outNo .44s cubic-bezier(.55,0,.8,.2) forwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(34px) scale(.95) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes outYes { to { opacity: 0; transform: translateX(75%) rotate(8deg); } }
@keyframes outNo { to { opacity: 0; transform: translateX(-75%) rotate(-8deg); } }
.stamp { position: absolute; top: 22px; right: 22px; border: 3px solid currentColor; border-radius: 10px; padding: 4px 14px; font: 700 22px var(--display); letter-spacing: .1em; animation: stamp .3s cubic-bezier(.2,1.7,.4,1) both; }
.stamp.yes { color: var(--ok); } .stamp.no { color: var(--no); }
@keyframes stamp { from { opacity: 0; transform: scale(1.9) rotate(-14deg); } to { opacity: 1; transform: rotate(-8deg); } }
.card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 22px var(--display); flex: none; }
.card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title { font: 700 21px/1.2 var(--display); }
.card-sub { font-size: 14px; color: var(--muted-2); }
.fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.fields.rich { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.field dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.field dd { margin: 0; font-size: 16px; font-weight: 500; }
.field-extra { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.job { border-top: 1px solid var(--line-2); padding: 12px 0 4px; }
.job-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.job-bullets { margin: 8px 0 0; padding: 0 0 0 18px; }
.job-bullets li { font-size: 15px; line-height: 1.4; color: var(--ink-2); margin: 0 0 6px; }
.choose { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.choose-q { margin: 0; font-size: 14px; line-height: 1.35; color: var(--muted); }
.choose-row { display: flex; gap: 8px; }
.choose-btn { appearance: none; flex: 1; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--chip-line); background: #fff; color: var(--ink); font: 600 15px var(--body); cursor: pointer; }
.choose-btn.yes.on { background: var(--ok-soft); border-color: #7BB892; color: var(--ok-ink); }
.choose-btn.no.on { background: var(--no-soft); border-color: #E2B198; color: var(--no-ink); }
.choose-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.choose-chip { appearance: none; border: 1.5px solid var(--chip-line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 12px; min-height: 34px; font: 500 14px var(--body); cursor: pointer; }
.choose-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.choose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.choose-skip { appearance: none; border: 0; background: none; padding: 0; color: var(--muted-2); font: 500 14px var(--body); cursor: pointer; }
.choose-go { appearance: none; border: 0; background: none; padding: 0; color: var(--accent); font: 600 15px var(--body); cursor: pointer; }
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; flex-direction: column; gap: 10px; transition: transform .45s cubic-bezier(.22,.82,.2,1); }
.carousel-track.snap { transition: none; }
.peek { pointer-events: none; }
.verdict, .reasons { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.reasons { animation: slideUp .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reasons-title { font: 600 16px var(--body); }
.reasons-title span { font-weight: 400; color: var(--muted-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; border: 1.5px solid var(--chip-line); background: #fff; color: var(--ink); border-radius: 999px; padding: 10px 16px; min-height: 44px; font: 500 15px var(--body); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.05); }

/* Buttons */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { appearance: none; border: 0; border-radius: 14px; min-height: 52px; padding: 0 22px; font: 600 16px var(--body); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.small { min-height: 44px; }
.btn.grow { flex: 1 1 140px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--chip-line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Done card */
.done { display: flex; flex-direction: column; gap: 16px; animation: cardIn .7s cubic-bezier(.2,.85,.2,1) both; }
.sending { animation: send .9s cubic-bezier(.6,0,.3,1) both; }
@keyframes send { 0% { transform: none; } 40% { transform: scale(.96); } 100% { transform: none; } }
.done-badge { width: 56px; height: 56px; border-radius: 16px; background: var(--ok); display: grid; place-items: center; }
.done-title { font: 700 28px/1.15 var(--display); }
.summary { background: var(--bg); border-radius: 14px; padding: 16px; font: 500 16px/1.5 var(--display); }

/* Live panel */
.live { flex: 1 1 380px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.live-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.meter-label { font: 700 22px var(--display); }
.pct { font: 700 44px/1 var(--display); letter-spacing: -.03em; color: var(--accent); }
.pct span { font-size: 22px; }
.meter { height: 10px; border-radius: 99px; background: #E4E6DF; overflow: hidden; }
.meterfill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .9s cubic-bezier(.2,.85,.2,1); }
.insight { border: 1.5px solid var(--accent); background: var(--accent-soft); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: drop .55s cubic-bezier(.2,1.35,.4,1) both, pulse 1.8s .6s ease-in-out infinite; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(36,72,224,.35); } 50% { box-shadow: 0 0 0 9px rgba(36,72,224,0); } }
.insight-body { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.insight-icon { flex: none; margin-top: 2px; color: var(--accent); }
.group { display: flex; flex-direction: column; gap: 6px; }
.group-title { font: 600 14px var(--body); display: flex; align-items: center; gap: 8px; }
.sw { width: 10px; height: 10px; border-radius: 3px; }
.sw.must { background: var(--accent); } .sw.nice { background: var(--nice); } .sw.no { background: var(--no); }
.crit { animation: pop .55s cubic-bezier(.2,1.45,.4,1) both; border-radius: 12px; padding: 10px 12px; transition: background .5s ease; }
.crit.hot { background: var(--accent-soft); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
.crit-top { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 500; margin-bottom: 7px; }
.num { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 99px; background: #E4E6DF; overflow: hidden; }
.fill { height: 100%; border-radius: 99px; transform-origin: left center; transition: width .75s cubic-bezier(.2,.85,.2,1); animation: grow .8s cubic-bezier(.2,.85,.2,1) both; }
.fill.must { background: var(--accent); } .fill.nice { background: var(--nice); }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }
.db-row { display: flex; flex-wrap: wrap; gap: 8px; }
.db-pill { display: inline-flex; padding: 8px 12px; border-radius: 999px; background: var(--no-soft); color: var(--no-ink); font-size: 14px; font-weight: 600; animation: pop .5s cubic-bezier(.2,1.45,.4,1) both; }
.trail { border-top: 1px solid var(--line-2); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.logrow { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; color: var(--ink-2); animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.tag { flex: none; font: 700 13px var(--display); padding: 2px 8px; border-radius: 6px; }
.tag.yes { background: var(--ok-soft); color: var(--ok-ink); } .tag.no { background: var(--no-soft); color: var(--no-ink); }

/* Kit */
.kit { background: var(--ink); color: #fff; border-radius: 26px; padding: 28px 20px; display: flex; flex-direction: column; scroll-margin-top: 24px; animation: rise .8s cubic-bezier(.2,.85,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.kit-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.kit h2 { font: 700 clamp(26px, 3.4vw, 38px)/1.1 var(--display); letter-spacing: -.02em; }
.kit-note { margin: 4px 0 0; max-width: 640px; color: var(--dark-muted); font-size: 16px; line-height: 1.45; }
.master { background: #fff; color: var(--ink); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 22px; animation: rise .8s .15s cubic-bezier(.2,.85,.2,1) both; }
.master-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.master-id { display: flex; flex-direction: column; gap: 6px; flex: 1 1 380px; min-width: 0; }
.master-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.approved { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); }
.master h3 { font: 700 30px/1.15 var(--display); letter-spacing: -.01em; }
.master-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.master-pct .big { font: 700 40px/1 var(--display); color: var(--accent); }
.master-pct .small { font-size: 13px; color: var(--muted-2); }
.sentence { font: 500 19px/1.5 var(--display); background: var(--bg); border-radius: 14px; padding: 16px 18px; }
.master-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.master-crit { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.master-crit > .label { margin-bottom: 6px; }
.mrow { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-2); animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.mrow:nth-child(3) { animation-delay: .08s; } .mrow:nth-child(4) { animation-delay: .16s; } .mrow:nth-child(5) { animation-delay: .24s; }
.mrow:nth-child(6) { animation-delay: .32s; } .mrow:nth-child(7) { animation-delay: .4s; } .mrow:nth-child(8) { animation-delay: .48s; }
.mrow-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mrow-label { font-size: 16px; font-weight: 600; }
.lvl { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.lvl.must { background: var(--accent); color: #fff; } .lvl.nice { background: var(--nice-soft); color: var(--nice-ink); } .lvl.gone { background: var(--line-2); color: var(--muted); }
.mrow-ev { font-size: 14px; line-height: 1.45; color: var(--muted); }
.mrow-change { font-size: 13px; font-weight: 600; color: var(--no-ink); }
.master-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.side-block { display: flex; flex-direction: column; gap: 8px; }
.side-block.open { border: 1.5px dashed #B9BDB2; border-radius: 14px; padding: 14px; }
.db-card { background: var(--no-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.db-l { font-size: 15px; font-weight: 600; color: var(--no-ink); } .db-e { font-size: 13px; color: #6B3A22; }
.ex { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; }
.ex-l { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #E7E8E2; color: var(--ink); display: grid; place-items: center; font: 700 15px var(--display); }
.ex-l.yes { background: var(--ok); color: #fff; }
.open-q { display: flex; gap: 8px; font-size: 14px; line-height: 1.4; }
.qmark { flex: none; font-weight: 700; color: var(--accent); }
.feed-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.feed { height: 56px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #fff 0 40%, rgba(255,255,255,.15) 40% 100%); background-size: 100% 24px; animation: flow 1.1s linear infinite; }
@keyframes flow { from { background-position: 0 0; } to { background-position: 0 24px; } }
.feed-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); text-align: center; }
.channels { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.chan-nav { flex: 1 1 260px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.chan-group { display: flex; flex-direction: column; gap: 2px; }
.chan-group-title { font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8C93A3; padding: 0 14px 4px; }
.chan { appearance: none; border: 0; width: 100%; text-align: left; background: transparent; color: #C9CEDB; min-height: 44px; padding: 8px 14px; border-radius: 12px; font: 500 15px var(--body); cursor: pointer; transition: background .25s, color .25s, padding .25s; }
.chan:hover { color: #fff; background: var(--dark-2); }
.chan.on { background: #fff; color: var(--ink); padding-left: 18px; }
.chan-panel-wrap { flex: 999 1 520px; min-width: 0; }
.panel { background: #fff; color: var(--ink); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; animation: panelIn .45s cubic-bezier(.2,.85,.2,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.panel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.derived { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--nice-ink); margin-bottom: 4px; }
.panel-title { font: 700 22px/1.2 var(--display); }
.panel-body { background: var(--bg); border-radius: 14px; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.panel-body.mono { font-family: var(--mono); font-size: 14px; }

/* Research strip (?research=1) */
.research { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.r-before, .r-after { border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.r-before { background: #E7E8E2; } .r-after { background: #fff; border: 1px solid var(--line); }
.r-big { font: 700 22px/1.2 var(--display); } .r-small { font-size: 15px; line-height: 1.45; color: #3E424B; }

@media (max-width: 720px) {
  .page { padding: 20px 14px calc(32px + env(safe-area-inset-bottom)); }
  .wrap { gap: 26px; }
  .hero { align-items: stretch; }
  .hero h1 { font-size: 32px; }
  .lede { font-size: 16px; }
  .brief-quote { flex: 1 1 100%; }
  .picker { gap: 8px; }
  .picker-label { font-size: 11px; letter-spacing: .14em; }
  .picker-row { margin: 0 -14px; padding: 0 14px 2px; -webkit-overflow-scrolling: touch; }
  .pick { width: auto; max-width: none; padding: 9px 14px; border-radius: 12px; box-shadow: none; }
  .pick.on { box-shadow: 0 0 0 2px var(--accent-soft); }
  .pick-role { font-size: 14px; }
  .pick-quote { display: none; }
  .audience { gap: 6px; }
  .audience-pill { font-size: 11px; padding: 5px 10px; letter-spacing: .1em; }
  .audience p { font-size: 14px; max-width: 280px; }
  .row { flex-direction: column; gap: 16px; }
  .deck-col, .live { flex: 1 1 auto; width: 100%; }
  .deck { min-height: 0; }
  .card, .live, .master, .panel { padding: 16px; }
  .fields, .fields.rich { grid-template-columns: 1fr; }
  .choose-row { flex-direction: row; }
  .card-title { font-size: 19px; }
  .field dd { overflow-wrap: anywhere; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .done-title { font-size: 24px; }
  .pct { font-size: 36px; }
  .kit { padding: 16px 12px; border-radius: 18px; }
  .master h3 { font-size: 24px; }
  .master-pct { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
  .sentence { font-size: 16px; padding: 14px; }
  .channels { flex-direction: column; }
  .chan-nav, .chan-panel-wrap { flex: 1 1 auto; width: 100%; }
  .panel-body { font-size: 14px; }
  .ex { align-items: flex-start; }
  .chip { max-width: 100%; text-align: left; }
  .handoff-line span { font-size: 13px; padding: 8px 12px; }
}
@media (hover: none) {
  .btn:hover, .pick:hover, .chip:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }