/* Belt Pace (/belt-pace/). The app follows ALEX's round 2 comps
   (~/private/projects/tomo/research/belt-pace-flow-comps-2026-09-29/).
   Static sections below the app reuse /library/library.css (vl- classes).
   Belt colours match the app's tokens. Weight 500+, nothing under 12px. */

.bp-wrap {
  --bone: #E5E5E5; --t2: #C8C8C8; --t3: #9A9A9A; --t4: #7A7A7A;
  --raised: #161616; --well: #0C0C0C; --gold: #F5A623;
  --hl: rgba(255,255,255,.07); --hl2: rgba(255,255,255,.12); --hl3: rgba(255,255,255,.22);
  --hatch: repeating-linear-gradient(135deg, #E5E5E5 0 2px, transparent 2px 5px);
  max-width: 600px; margin: 0 auto; padding: 8px 16px 0;
}
.bp-title { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding-top: 20px; }
.bp-title h1 { font: inherit; letter-spacing: inherit; display: inline; }
#bp-app { color: var(--bone); padding: 12px 0 48px; scroll-margin-top: 72px; min-height: 60vh; }
#bp-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
#bp-app button:focus-visible, #bp-app select:focus-visible, #bp-app input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.kick { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--t3); text-transform: uppercase; margin: 0; }
.qbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 6px; }
#bp-app .back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px Inter, sans-serif; color: var(--t2); }
#bp-app .back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid var(--t2); border-bottom: 2px solid var(--t2); transform: rotate(45deg); }
.qh { font: 800 28px/1.15 Unbounded, sans-serif; margin: 6px 0 20px; letter-spacing: -.01em; }
.qh2 { font: 800 21px/1.2 Unbounded, sans-serif; margin: 6px 0 16px; }
.sub { font: 500 15px/1.45 Inter, sans-serif; color: var(--t2); margin: 0 0 14px; }
.fine { font: 500 13px/1.5 Inter, sans-serif; color: var(--t3); margin: 8px 0 0; }
.monof { font: 500 12px/1.5 'JetBrains Mono', monospace; color: var(--t4); margin: 0; white-space: pre-wrap; }
.lead { font: 600 16px/1.45 Inter, sans-serif; color: var(--t2); margin: 0; }
.strong { font: 600 16px/1.4 Inter, sans-serif; color: var(--bone); }
.sp8 { margin-top: 8px; } .sp12 { margin-top: 12px; } .sp16 { margin-top: 16px; } .sp20 { margin-top: 20px; } .sp24 { margin-top: 24px; }

/* belt tiles */
.tiles { display: flex; flex-direction: column; gap: 8px; }
#bp-app .bt { position: relative; height: 64px; border-radius: 3px; display: flex; align-items: center; padding: 0 18px; font: 700 17px Inter, sans-serif; width: 100%; text-align: left; box-shadow: inset 0 0 0 1px var(--hl3); transition: transform .12s; }
#bp-app .bt:active { transform: scale(.99); }
.bt .tp { position: absolute; right: 30px; top: 0; bottom: 0; width: 46px; background: #000; }
#bp-app .bt-white { background: #FFFFFF; color: #111; }
#bp-app .bt-blue { background: #0033A0; color: #fff; }
#bp-app .bt-purple { background: #4B0082; color: #fff; }
#bp-app .bt-brown { background: #8B4513; color: #fff; }
#bp-app .bt-black { background: #000; color: #fff; }
.bt-black .tp { background: transparent; box-shadow: inset 0 0 0 1px var(--hl3); }
#bp-app .bt.sel { outline: 2px solid var(--bone); outline-offset: 3px; }
.bt .ck { position: absolute; right: 92px; width: 24px; height: 24px; border-radius: 3px; background: var(--bone); }
.bt .ck::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #111; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.bt .tag { margin-left: 12px; }
.tag { display: inline-block; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .06em; padding: 4px 6px; border: 1px solid currentColor; border-radius: 2px; opacity: .85; white-space: nowrap; }

/* month wall */
.yr { font: 700 16px Unbounded, sans-serif; margin: 16px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.yr span { font: 500 12px 'JetBrains Mono', monospace; color: var(--t4); }
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
#bp-app .wall button { height: 52px; background: #1A1A1A; font: 600 14px Inter, sans-serif; color: var(--t2); }
#bp-app .wall button:hover:not([disabled]) { background: #242424; }
#bp-app .wall button.off { background: transparent; color: #4a4a4a; box-shadow: inset 0 0 0 1px var(--hl); cursor: default; }
#bp-app .wall button.on { background: var(--bone); color: #111; }
#bp-app .wall button.floor { box-shadow: inset 0 -3px 0 #6E6E6E; }
#bp-app .wall button.typ { box-shadow: inset 0 -3px 0 var(--bone); }
#bp-app .earlier { margin-top: 10px; height: 52px; width: 100%; border: 1px solid var(--hl3); border-radius: 3px; font: 600 15px Inter, sans-serif; color: var(--t2); }

/* buttons */
#bp-app .cta { height: 60px; width: 100%; background: var(--gold); color: #111; font: 700 17px Inter, sans-serif; display: grid; place-items: center; border-radius: 4px; text-decoration: none; }
#bp-app .cta[disabled] { opacity: .35; cursor: not-allowed; }
#bp-app .b1 { height: 56px; width: 100%; background: var(--bone); color: #111; font: 700 16px Inter, sans-serif; border-radius: 4px; }
#bp-app .b2 { height: 56px; width: 100%; border: 1px solid var(--hl3); border-radius: 4px; font: 600 16px Inter, sans-serif; }
#bp-app .skip { min-height: 44px; font: 600 14px Inter, sans-serif; color: var(--t3); padding: 0 12px; }
#bp-app .edit { font: 600 13px 'JetBrains Mono', monospace; color: var(--bone); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
#bp-app .linkish { margin-top: 10px; min-height: 44px; font: 600 14px Inter, sans-serif; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.row2 { display: flex; gap: 10px; align-items: center; }
.row2 .b1 { flex: 2; } .row2 .back2 { flex: 1; } .row2 .skip { flex: 0 0 auto; }

/* choice grids */
.grid, .seg { display: grid; gap: 2px; }
.grid.g2 { grid-template-columns: 1fr 1fr; } .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g5 { grid-template-columns: repeat(5, 1fr); }
.seg { grid-auto-flow: column; grid-auto-columns: 1fr; }
#bp-app .grid button, #bp-app .seg button { min-height: 56px; background: #1A1A1A; font: 600 15px Inter, sans-serif; color: var(--t2); padding: 0 6px; }
#bp-app .grid.g5 button { font: 700 20px Unbounded, sans-serif; }
#bp-app .grid button.on, #bp-app .seg button.on { background: var(--bone); color: #111; }
.rows { display: flex; flex-direction: column; }
#bp-app .rows > button, .rows .r { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-top: 1px solid var(--hl); font: 600 16px Inter, sans-serif; text-align: left; gap: 12px; }
#bp-app .rows > button:last-child, .rows .r:last-child { border-bottom: 1px solid var(--hl); }
#bp-app .rows > button::after { content: ""; width: 22px; height: 22px; border: 1.5px solid #6E6E6E; border-radius: 3px; flex: none; }
#bp-app .rows > button.on::after { background: var(--bone); border-color: var(--bone); }
.rows .dm { color: var(--t3); font: 500 13px 'JetBrains Mono', monospace; }
.rows input[type="month"], .field { height: 48px; background: #1A1A1A; border: 0; border-radius: 3px; color: var(--bone); font: 600 15px Inter, sans-serif; padding: 0 12px; color-scheme: dark; }
label.field { display: flex; align-items: center; gap: 12px; }
label.field .l { font: 500 12px 'JetBrains Mono', monospace; color: var(--t3); letter-spacing: .06em; }
label.field select { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; color: var(--bone); font: 600 16px Inter, sans-serif; }
select.field { width: 100%; }

/* summary + hero */
.sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 14px Inter, sans-serif; color: var(--t2); padding: 0 12px; min-height: 48px; background: var(--well); border-radius: 4px; }
.hero { font: 800 clamp(40px, 12vw, 64px)/1 Unbounded, sans-serif; white-space: nowrap; letter-spacing: -.03em; color: var(--gold); margin: 8px 0 8px; }

/* the timeline (the belt) */
.tl { position: relative; padding-bottom: 2px; }
.tl-tk { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--hl); }
.tl-tk span { position: absolute; top: 0; left: 4px; font: 500 12px/1 'JetBrains Mono', monospace; color: var(--t4); }
.tl-ax { height: 18px; }
.tl-lab { height: 46px; position: relative; }
.tl-flag { position: absolute; bottom: 4px; transform: translateX(-100%); text-align: right; white-space: nowrap; padding-right: 6px; border-right: 2px solid var(--bone); line-height: 1; transition: left .9s cubic-bezier(.3,.7,.2,1); }
.tl-flag .k { display: block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--t2); margin-bottom: 5px; }
.tl-flag b { font: 800 18px/1 Unbounded, sans-serif; color: var(--bone); }
.tl.big .tl-lab { height: 60px; } .tl.big .tl-flag b { font-size: 24px; }
.tl-bar { position: relative; height: 30px; box-shadow: inset 0 0 0 1px var(--hl3); overflow: visible; }
.tl.big .tl-bar { height: 42px; }
.tl-seg { position: absolute; top: 0; bottom: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: left .9s cubic-bezier(.3,.7,.2,1), width .9s cubic-bezier(.3,.7,.2,1); }
.tl-tip { position: absolute; right: 0; top: 0; bottom: 0; width: 28px; background: #000; display: flex; flex-direction: row-reverse; gap: 3px; padding: 0 3px; }
.tl-tip i { width: 3px; background: #fff; height: 100%; animation: pop .3s both; }
.tl-ghost { position: absolute; top: -6px; bottom: -6px; border-left: 2px dotted var(--bone); opacity: .8; }
.tl-you { position: absolute; top: -8px; bottom: -8px; border-left: 2px dashed var(--bone); z-index: 3; }
.tl-fk { margin-top: 14px; height: 18px; text-align: right; font: 600 12px/18px 'JetBrains Mono', monospace; color: var(--t3); letter-spacing: .04em; }
.tl-fbar { position: relative; height: 8px; box-shadow: inset 0 0 0 1px var(--hl3); }
.tl-fseg { position: absolute; top: 0; bottom: 0; }
.tl-tod { position: absolute; top: 64px; bottom: 22px; width: 2px; background: var(--bone); z-index: 4; }
.tl.big .tl-tod { top: 78px; }
.tl-bl { height: 22px; position: relative; }
.tl-bl span { position: absolute; top: 5px; transform: translateX(-50%); font: 600 12px/1 'JetBrains Mono', monospace; color: var(--bone); white-space: nowrap; }
.tl-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font: 600 12px 'JetBrains Mono', monospace; color: var(--t2); }
.tl-key span { display: flex; align-items: center; gap: 6px; }
.tl-key i { display: inline-block; height: 14px; }
.tl-key .dsh { border-left: 2px dashed var(--bone); } .tl-key .dot { border-left: 2px dotted var(--bone); }

@keyframes grow { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scaleY(.2); } }
@keyframes land { from { opacity: 0; transform: translateY(8px); } }
.an-grow .tl-bar, .an-grow .tl-fbar { transform-origin: left center; animation: grow 1.2s cubic-bezier(.2,.7,.2,1) both; }
.an-grow .tl-fbar { animation-delay: .4s; }
.an-grow .tl-flag { animation: fade .5s 1s both; }
.an-shift .tl-flag, .an-shift .tl-seg { animation: none; }
.an-land { animation: land .5s .2s both; }

/* pinned timeline + answer rail */
.pin { position: sticky; top: 60px; z-index: 5; margin: 0 -16px; padding: 12px 16px 14px; background: var(--raised); border-bottom: 1px solid var(--hl2); }
.railw { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.rail { display: flex; gap: 5px; }
.rail i, .g { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; }
.m-s { background: var(--bone); }
.m-h { background: var(--hatch); box-shadow: inset 0 0 0 1.5px var(--bone); }
.m-f { background: linear-gradient(135deg, var(--bone) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--bone); }
.m-fk { background: linear-gradient(135deg, #111 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px #111; }
.m-o { box-shadow: inset 0 0 0 1.5px var(--bone); }
.m-e { background: linear-gradient(transparent 12px, #4a4a4a 12px); }
.m-c { background: linear-gradient(transparent 12px, var(--bone) 12px); }
.m-k { background: linear-gradient(transparent 7px, #6E6E6E 7px, #6E6E6E 9px, transparent 9px); }
.railw .ct { font: 600 12px 'JetBrains Mono', monospace; color: var(--t2); letter-spacing: .06em; }

/* the four landings */
.land { position: relative; margin-top: 22px; padding: 2px 0 2px 18px; }
.land::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.land.s::before { background: var(--bone); }
.land.h::before { background: var(--hatch); width: 6px; }
.land.f::before { background: linear-gradient(var(--bone) 50%, transparent 50%); }
.land.grey::before { background: #8A8A8A; }
.land.grey .verd { color: #A8A8A8; }
.lk { display: flex; align-items: center; gap: 8px; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--bone); }
.lk .g { width: 12px; height: 12px; }
.land .big { font: 800 22px/1.2 Unbounded, sans-serif; margin: 10px 0 4px; }
.land p { margin: 8px 0 0; font: 500 15px/1.45 Inter, sans-serif; color: #D6D6D6; }
.land p.fine { font-size: 13px; color: var(--t3); }
.verd { font: 800 22px/1.2 Unbounded, sans-serif; margin: 8px 0 6px; }
.meta { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; margin-top: 4px; }
#bp-app .bp-src, .bp-src { font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); text-decoration: underline dotted; text-underline-offset: 4px; min-height: 40px; letter-spacing: .02em; background: none; border: 0; cursor: pointer; text-align: left; }
.bars2 { margin-top: 10px; }
.bl2 { display: grid; grid-template-columns: 124px 1fr 52px; align-items: center; gap: 8px; min-height: 26px; font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); }
.bl2 .tr { height: 10px; background: #1F1F1F; position: relative; }
.bl2 .tr i { position: absolute; left: 0; top: 0; bottom: 0; background: #5E5E5E; }
.bl2.me { color: var(--bone); }
.bl2.me .tr i { background: var(--bone); }
.bl2 .v { text-align: right; }
.bh { margin: 14px 0 2px; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--t3); }
.stay { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 10px; }
.stay div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.stay i { display: block; width: 100%; box-shadow: inset 0 0 0 1px var(--hl3); }
.stay span { font: 600 12px 'JetBrains Mono', monospace; color: var(--t2); }

/* myth card */
.myth { perspective: 1200px; height: 260px; margin-top: 22px; cursor: pointer; }
.myth .in { position: relative; height: 100%; transition: transform .7s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.myth.fl .in { transform: rotateY(180deg); }
.myth .fc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; padding: 18px; }
.myth .fr { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hl2); }
.myth .bk { background: var(--bone); color: #111; transform: rotateY(180deg); }
.myth .bk .lk { color: #111; }
.myth .q { font: 800 20px/1.25 Unbounded, sans-serif; margin: 14px 0 0; }
.myth .tap { position: absolute; left: 18px; right: 18px; bottom: 16px; font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); letter-spacing: .06em; }
.myth .v { font: 800 23px/1.15 Unbounded, sans-serif; margin: 12px 0 6px; }
.myth .bk p { margin: 0; font: 600 15px/1.4 Inter, sans-serif; color: #222; }
.myth .bk .bp-src, #bp-app .myth .bk .bp-src { color: #444; }

/* counting cards */
.cc { margin-top: 12px; border: 1.5px solid rgba(229,229,229,.55); border-radius: 4px; padding: 14px; }
.cc h4 { margin: 8px 0 10px; font: 700 16px/1.3 Inter, sans-serif; }
.cc .opt { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--t3); font: 600 14px/1.4 Inter, sans-serif; color: var(--t2); }
.consent { display: flex; gap: 12px; align-items: flex-start; font: 600 15px/1.4 Inter, sans-serif; color: var(--t2); cursor: pointer; }
.consent input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: #E5E5E5; }

/* flag, list, result */
.flag { border-left: 2px solid var(--bone); padding: 2px 0 2px 12px; }
.flag .fl { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--t3); }
.flag p { margin: 4px 0 0; font: 500 14px/1.45 Inter, sans-serif; color: #D6D6D6; }
.dl { margin-top: 18px; border-top: 1px solid var(--hl); }
.dl .d { display: grid; grid-template-columns: 16px 1fr auto; gap: 0 12px; align-items: start; padding: 12px 0 2px; border-bottom: 1px solid var(--hl); }
.dl .sw { width: 16px; height: 14px; margin-top: 3px; box-shadow: inset 0 0 0 1px var(--hl3); }
.dl .sw-thin { height: 5px; margin-top: 7px; }
.dl .k { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--t3); }
.dl .v { font: 700 20px/1.2 Unbounded, sans-serif; text-align: right; }
.dl .x { grid-column: 2 / 4; font: 500 14px Inter, sans-serif; color: var(--t2); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.moved .r { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: center; min-height: 52px; border-top: 1px solid var(--hl); font: 600 15px Inter, sans-serif; }
.moved .r:last-child { border-bottom: 1px solid var(--hl); }
.moved .e { font: 600 12px 'JetBrains Mono', monospace; color: var(--t2); text-align: right; letter-spacing: .04em; }
.moved .e.b { color: var(--bone); }
.band { margin: 24px -16px 0; padding: 22px 16px 24px; background: var(--raised); }
.band .pitch { font: 800 19px/1.3 Unbounded, sans-serif; margin: 8px 0 16px; }

/* source sheet */
.bp-sheet { max-width: 560px; width: calc(100% - 24px); margin: auto auto 0; border: 0; border-radius: 12px 12px 0 0; background: #161616; color: #E5E5E5; padding: 10px 20px 28px; box-shadow: 0 -1px 0 rgba(255,255,255,.22); }
.bp-sheet::backdrop { background: rgba(0,0,0,.6); }
.bp-sheet .hd { width: 36px; height: 4px; background: #4a4a4a; border-radius: 2px; margin: 0 auto 16px; }
.bp-sheet .kick { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .1em; color: #9A9A9A; text-transform: uppercase; margin: 0; }
.bp-sheet h3 { font: 800 20px/1.2 Unbounded, sans-serif; margin: 6px 0 12px; }
.bp-sheet .sr { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); font: 500 14px/1.4 Inter, sans-serif; color: #D6D6D6; }
.bp-sheet .sr span { font: 600 12px 'JetBrains Mono', monospace; color: #9A9A9A; letter-spacing: .06em; padding-top: 2px; }
.bp-sheet a { color: #F5A623; word-break: break-all; }
.bp-sheet button { height: 48px; width: 100%; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: none; color: #E5E5E5; font: 600 16px Inter, sans-serif; cursor: pointer; }

/* static content below the app */
.bp-static { max-width: 760px; margin: 0 auto; padding: 0 16px 72px; }
.bp-static h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; color: #fff; font-size: 22px; margin: 56px 0 14px; }
.bp-static p { color: #c8c8c8; margin-bottom: 12px; }
.bp-table-wrap { overflow-x: auto; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.bp-table th, .bp-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #262626; }
.bp-table th { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.bp-table td:not(:first-child) { font-family: 'JetBrains Mono', monospace; color: #F5A623; }
.bp-srcs { font-size: 14px; color: #8a8a8a; }
.bp-srcs li { margin: 6px 0 6px 18px; }
.bp-srcs a { color: #bbb; }
.bp-faq .faq details { border-bottom: 1px solid #262626; }
.bp-faq .faq summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; color: #fff; padding: 10px 0; }
.bp-faq .faq summary::-webkit-details-marker { display: none; }
.bp-faq .faq summary::after { content: "+"; color: #F5A623; font-size: 22px; flex: none; }
.bp-faq .faq details[open] summary::after { content: "\2212"; }
.bp-faq .faq p { color: #c8c8c8; padding: 0 0 16px; }

@media (prefers-reduced-motion: reduce) { .bp-wrap *, .bp-wrap *::before { animation: none !important; transition: none !important; } }

/* simple pickers (round 3: native selects, like a birthdate field) */
.my { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.my label, label.field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: auto; background: none; padding: 0; }
.my .l, label.field .l { font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); letter-spacing: .06em; }
.my select, label.field select {
  height: 56px; width: 100%; background: #1A1A1A; border: 1px solid var(--hl2); border-radius: 4px;
  color: var(--bone); font: 600 17px Inter, sans-serif; padding: 0 14px; color-scheme: dark;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #C8C8C8 50%), linear-gradient(135deg, #C8C8C8 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.prog { display: block; flex: 1; height: 4px; background: #2a2a2a; border-radius: 2px; margin-right: 14px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--bone); transition: width .3s; }
.land { margin-top: 20px; }
.land .big { font-size: 20px; }
.brk { margin-top: 16px; padding: 12px 14px 14px; background: #161616; border: 1px solid var(--hl2); border-radius: 4px; }
.brk-h { display: flex; justify-content: space-between; align-items: center; }
.brk .kick.sp12 { margin-top: 12px; }
.err { font: 600 14px/1.45 Inter, sans-serif; color: #E5E5E5; margin: 12px 0 0; min-height: 1px; }
.err:not(:empty) { padding-left: 10px; border-left: 2px solid #E5E5E5; }

/* ---------- motion (round 4) ----------
   Transform and opacity only, so it stays smooth on phones. Everything here is
   switched off by prefers-reduced-motion (the block at the end). */
:root { --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* belt tiles: lean in on hover, press on tap, the rank bar widens */
#bp-app .bt { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), opacity .28s var(--ease-out), outline-color .2s; will-change: transform; }
#bp-app .bt .tp { transition: transform .28s var(--ease-out); transform-origin: right center; }
@media (hover: hover) {
  #bp-app .bt:hover { transform: scale(1.03); z-index: 2; box-shadow: inset 0 0 0 1px var(--hl3), 0 14px 34px rgba(0,0,0,.55); }
  #bp-app .bt:hover .tp { transform: scaleX(1.3); }
  #bp-app .tiles:hover .bt:not(:hover) { opacity: .55; transform: scale(.985); }
}
#bp-app .bt:active { transform: scale(.975); transition-duration: .08s; }

/* choices and buttons press in; a new selection pops */
#bp-app .grid button, #bp-app .seg button, #bp-app .b1, #bp-app .b2, #bp-app .cta { transition: transform .18s var(--ease-out), background-color .2s, color .2s; }
#bp-app .grid button:active, #bp-app .seg button:active, #bp-app .b1:active, #bp-app .b2:active, #bp-app .cta:active { transform: scale(.97); }
@media (hover: hover) { #bp-app .cta:hover, #bp-app .b1:hover { transform: translateY(-1px); } }
@keyframes pick { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
#bp-app .grid button.on, #bp-app .seg button.on { animation: pick .32s var(--ease-out); }
#bp-app .my select { transition: border-color .2s, background-color .2s; }
#bp-app .my select:hover { border-color: var(--hl3); background-color: #202020; }

/* a new screen rises in; belts are laid out one after another */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes layout { from { opacity: 0; transform: translateX(-28px) scaleX(.92); } }
#bp-app.enter > * { animation: rise .5s var(--ease-out) both; }
#bp-app.enter > *:nth-child(2) { animation-delay: .05s; } #bp-app.enter > *:nth-child(3) { animation-delay: .1s; }
#bp-app.enter > *:nth-child(4) { animation-delay: .15s; } #bp-app.enter > *:nth-child(5) { animation-delay: .2s; }
#bp-app.enter > *:nth-child(n+6) { animation-delay: .25s; }
#bp-app.enter .tiles .bt { animation: layout .55s var(--ease-out) both; transform-origin: left center; }
#bp-app.enter .tiles .bt:nth-child(1) { animation-delay: .08s; } #bp-app.enter .tiles .bt:nth-child(2) { animation-delay: .14s; }
#bp-app.enter .tiles .bt:nth-child(3) { animation-delay: .2s; } #bp-app.enter .tiles .bt:nth-child(4) { animation-delay: .26s; }
#bp-app.enter .tiles .bt:nth-child(5) { animation-delay: .32s; }

/* the next question slides across */
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } }
#bp-app.qin .qarea, #bp-app.qin [data-land] { animation: slidein .4s var(--ease-out) both; }

/* the answer: the date zooms in, the belt grows, today's line draws in */
@keyframes zoomin { from { opacity: 0; transform: scale(.86) translateY(10px); } }
#bp-app.enter .hero { animation: zoomin .7s .15s var(--ease-spring) both; transform-origin: left bottom; }
@keyframes draw { from { transform: scaleY(0); } }
.an-grow .tl-tod { transform-origin: bottom center; animation: draw .5s 1.1s var(--ease-out) both; }
.an-grow .tl-bl span { animation: fade .4s 1.4s both; }
.an-grow .tl-tip i { animation-delay: 1.1s; }

/* sharpening: the belt and flag slide from the old date to the new one */
.tl.no-tr .tl-seg, .tl.no-tr .tl-flag { transition: none !important; }
.tl-seg, .tl-flag { transition-duration: .9s; }
@keyframes glint { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.an-shift .tl-flag b { display: inline-block; animation: pick .5s .75s var(--ease-out); }
.an-shift .tl-ghost { animation: fade .4s .2s both; }
.prog i { transition: width .5s var(--ease-out); }

/* findings and the result list arrive one after another */
@keyframes landin { from { opacity: 0; transform: translateY(10px); } }
#bp-app .land.an-land { animation: landin .45s .15s var(--ease-out) both; }
#bp-app.enter .moved .r { animation: landin .4s var(--ease-out) both; }
#bp-app.enter .moved .r:nth-child(1) { animation-delay: .9s; } #bp-app.enter .moved .r:nth-child(2) { animation-delay: .97s; }
#bp-app.enter .moved .r:nth-child(3) { animation-delay: 1.04s; } #bp-app.enter .moved .r:nth-child(4) { animation-delay: 1.11s; }
#bp-app.enter .moved .r:nth-child(5) { animation-delay: 1.18s; } #bp-app.enter .moved .r:nth-child(n+6) { animation-delay: 1.25s; }

@media (prefers-reduced-motion: reduce) {
  #bp-app *, #bp-app *::before, #bp-app *::after, #bp-app.enter > * { animation: none !important; transition: none !important; }
  #bp-app .bt:hover, #bp-app .tiles:hover .bt:not(:hover) { transform: none; }
}

/* ---------- stripes, picked on the belt (round 5) ---------- */
.bt .tp { display: flex; flex-direction: row-reverse; gap: 4px; padding: 0 5px; }
.bt .tp i { width: 5px; height: 100%; background: #fff; animation: pop .25s var(--ease-spring) both; }
.bt-white .tp i { background: #fff; }
#bp-app .bt.sel { transform: scale(1.02); box-shadow: inset 0 0 0 1px var(--hl3), 0 12px 30px rgba(0,0,0,.5); z-index: 2; }
#bp-app .tiles:has(.sel) .bt:not(.sel) { opacity: .5; }
@media (hover: hover) { #bp-app .tiles:has(.sel) .bt:not(.sel):hover { opacity: 1; } }

.stp { margin: 4px 0 10px; padding: 14px 14px 6px; background: #161616; border: 1px solid var(--hl2); border-radius: 4px; }
.stp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stp-n { font: 700 16px Unbounded, sans-serif; color: var(--bone); }
.stp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; padding: 8px; background: #000; border-radius: 3px; }
#bp-app .stp-s { height: 64px; background: #1E1E1E; border-radius: 2px; transition: background-color .2s, transform .18s var(--ease-out); }
#bp-app .stp-s.on { background: #fff; }
@media (hover: hover) { #bp-app .stp-s:not(.on):hover { background: #3a3a3a; } }
#bp-app .stp-s:active { transform: scaleY(.94); }
#bp-app .stp-s.on { animation: pop .3s var(--ease-spring) both; }
.stp-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 16px; }

/* the stripe panel opens under the belt */
@keyframes unfold { from { opacity: 0; transform: translateY(-8px) scaleY(.9); } }
.stp.open { animation: unfold .38s var(--ease-out) both; transform-origin: top center; }

@media (prefers-reduced-motion: reduce) { #bp-app .bt.sel { transform: none; } .bt .tp i, #bp-app .stp-s.on { animation: none; } }

/* ---------- round 6: easy continue, yes/no, desktop ---------- */
/* Continue sits at the bottom of the screen on phones, so it is always one thumb away. */
.ctabar { position: sticky; bottom: 0; z-index: 6; margin: 20px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(17,17,17,0), #111 28%); }
.ctabar.row2 { display: flex; gap: 10px; align-items: center; }
.yn { display: grid; gap: 10px; margin-top: 8px; }
#bp-app .yn .b1, #bp-app .yn .b2 { height: 64px; font-size: 17px; }
.bp-q .sub { margin-top: -8px; }
#bp-app .tiles .bt.sel { animation: none; }

@media (min-width: 900px) {
  .bp-wrap { max-width: 700px; padding-top: 24px; }
  .qh { font-size: 34px; }
  .qh2 { font-size: 24px; }
  #bp-app .bt { height: 72px; font-size: 18px; }
  .bt .tp { width: 56px; }
  #bp-app .stp-s { height: 72px; }
  .hero { font-size: 76px; }
  .tl.big .tl-bar { height: 50px; }
  .tl.big .tl-flag b { font-size: 28px; }
  .yn { grid-template-columns: 1fr 1fr; }
  .ctabar { position: static; margin: 24px 0 0; padding: 0; background: none; }
  .band { margin: 32px 0 0; padding: 28px; border-radius: 6px; }
  .pin { top: 72px; }
}

/* ---------- round 7: years and months counters ---------- */
.dur-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.stepr { display: flex; flex-direction: column; gap: 6px; }
.stepr .l { font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); letter-spacing: .06em; }
.stepr-c { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; height: 64px; background: #1A1A1A; border: 1px solid var(--hl2); border-radius: 4px; overflow: hidden; }
#bp-app .stepr-c button { height: 100%; font: 600 24px Inter, sans-serif; color: var(--bone); transition: background-color .15s, transform .12s var(--ease-out); }
@media (hover: hover) { #bp-app .stepr-c button:hover { background: #242424; } }
#bp-app .stepr-c button:active { transform: scale(.9); }
.stepr-c output { text-align: center; font: 800 28px Unbounded, sans-serif; color: var(--bone); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.stepr-c output.bump { animation: bump .25s var(--ease-out); }
.dur + .linkish { margin-top: 6px; }
@media (min-width: 900px) { .stepr-c { height: 72px; } .stepr-c output { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .stepr-c output.bump { animation: none; } }

.qh3 { font: 800 19px/1.25 Unbounded, sans-serif; margin: 32px 0 4px; color: var(--bone); }
@media (min-width: 900px) { .qh3 { font-size: 22px; } }

/* ---------- round 8: start date, roughly or exact ---------- */
.dur-row.one { grid-template-columns: 1fr; max-width: 280px; }
#bp-app .seg.mode { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px 0 12px; border-radius: 4px; overflow: hidden; }
#bp-app .seg.mode button { min-height: 44px; padding: 0 18px; font-size: 14px; }
.qh + .dur, .qh + .dur-row { margin-top: 0; }

/* ---------- round 9: angular motion ----------
   Broadcast-graphics language (UFC, NFL): hard accelerate-and-stop easing, diagonal
   wipes, skewed entries, slams with no overshoot, a gold slash across the answer.
   Replaces the earlier springy motion: later keyframes and rules of the same name win. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.16,1,.3,1); --ease-cut: cubic-bezier(.7,0,.2,1); }

/* belts: a sharp shove to the right with a hard gold edge, no zoom */
#bp-app .bt { transition: transform .14s var(--ease-cut), box-shadow .14s var(--ease-cut), opacity .14s linear; }
#bp-app .bt .tp { transition: transform .14s var(--ease-cut); }
@media (hover: hover) {
  #bp-app .bt:hover { transform: translateX(8px); box-shadow: inset 0 0 0 1px var(--hl3), -8px 0 0 0 #F5A623; }
  #bp-app .bt:hover .tp { transform: scaleX(1.35); }
  #bp-app .tiles:hover .bt:not(:hover) { transform: none; opacity: .45; }
}
#bp-app .bt:active { transform: translateX(4px); }
#bp-app .bt.sel { transform: translateX(8px); box-shadow: inset 0 0 0 1px var(--hl3), -8px 0 0 0 #F5A623; }
#bp-app .tiles:has(.sel) .bt:not(.sel) { opacity: .4; }

/* belts arrive like a cut: skewed, fast, staggered tight */
@keyframes layout { from { opacity: 0; transform: translateX(-70px) skewX(-18deg); } 55% { opacity: 1; } to { transform: none; } }
#bp-app.enter .tiles .bt { animation: layout .3s var(--ease-cut) both; }
#bp-app.enter .tiles .bt:nth-child(1) { animation-delay: .04s; } #bp-app.enter .tiles .bt:nth-child(2) { animation-delay: .08s; }
#bp-app.enter .tiles .bt:nth-child(3) { animation-delay: .12s; } #bp-app.enter .tiles .bt:nth-child(4) { animation-delay: .16s; }
#bp-app.enter .tiles .bt:nth-child(5) { animation-delay: .2s; }

/* screens and questions: a diagonal wipe instead of a float */
@keyframes rise {
  from { opacity: 0; transform: translateX(-28px) skewX(-8deg); clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); }
  to { opacity: 1; transform: none; clip-path: polygon(0 0, 112% 0, 100% 100%, 0 100%); }
}
#bp-app.enter > * { animation: rise .32s var(--ease-cut) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(48px) skewX(-10deg); } to { opacity: 1; transform: none; } }
#bp-app.qin .qarea, #bp-app.qin [data-land], #bp-app.qin .bp-q > * { animation: slidein .24s var(--ease-cut) both; }

/* the answer: the date is wiped on behind a gold slash */
.hero { position: relative; overflow: hidden; padding-bottom: 4px; }
@keyframes zoomin {
  from { clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); transform: translateX(-16px) skewX(-10deg); }
  to { clip-path: polygon(0 0, 114% 0, 100% 100%, 0 100%); transform: none; }
}
#bp-app.enter .hero { animation: zoomin .42s .12s var(--ease-cut) both; }
@keyframes slash { from { transform: translateX(-130%) skewX(-24deg); } to { transform: translateX(260%) skewX(-24deg); } }
#bp-app.enter .hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: #F5A623; mix-blend-mode: difference; animation: slash .5s .1s var(--ease-cut) both; pointer-events: none; }

/* the timeline slams across and stops dead; today's line cuts in */
.an-grow .tl-bar, .an-grow .tl-fbar { animation: grow .55s var(--ease-cut) both; }
.an-grow .tl-fbar { animation-delay: .18s; }
.an-grow .tl-flag { animation: fade .12s .55s linear both; }
@keyframes draw { from { transform: scaleY(0); } }
.an-grow .tl-tod { animation: draw .14s .7s var(--ease-cut) both; }
.an-grow .tl-bl span { animation: fade .1s .8s linear both; }
.tl-seg, .tl-flag { transition-duration: .5s; transition-timing-function: var(--ease-cut); }

/* stripes slam down, no bounce */
@keyframes pop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bt .tp i, .tl-tip i, #bp-app .stp-s.on { animation: pop .12s var(--ease-cut) both; transform-origin: top center; }
.an-grow .tl-tip i { animation-delay: .5s; }

/* a pick flashes gold and cuts to white */
@keyframes pick { 0%, 45% { background-color: #F5A623; color: #111; } 100% { background-color: var(--bone); color: #111; } }
#bp-app .grid button.on, #bp-app .seg button.on, #bp-app .stp-s.on { animation: pick .2s steps(1, end) both; }
.an-shift .tl-flag b { animation: pickb .3s steps(1, end) .45s; }
@keyframes pickb { 0% { color: #F5A623; } 100% { color: var(--bone); } }

/* counters swap like a scoreboard */
@keyframes bump { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }
.stepr-c output.bump { animation: bump .12s var(--ease-cut); }
#bp-app .stepr-c button:active { transform: translateY(1px); }

/* buttons: no lift, a hard press */
@media (hover: hover) { #bp-app .cta:hover, #bp-app .b1:hover { transform: none; filter: brightness(1.08); } }
#bp-app .grid button:active, #bp-app .seg button:active, #bp-app .b1:active, #bp-app .b2:active, #bp-app .cta:active { transform: translateY(1px); }

/* findings and result rows cut in, left to right */
@keyframes landin { from { opacity: 0; transform: translateX(-24px) skewX(-8deg); } to { opacity: 1; transform: none; } }
#bp-app .land.an-land { animation: landin .24s .08s var(--ease-cut) both; }
#bp-app.enter .moved .r { animation: landin .22s var(--ease-cut) both; }
#bp-app.enter .moved .r:nth-child(1) { animation-delay: .6s; } #bp-app.enter .moved .r:nth-child(2) { animation-delay: .65s; }
#bp-app.enter .moved .r:nth-child(3) { animation-delay: .7s; } #bp-app.enter .moved .r:nth-child(n+4) { animation-delay: .75s; }

/* the stripe panel wipes down from the belt */
@keyframes unfold { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.stp.open { animation: unfold .2s var(--ease-cut) both; }

@media (prefers-reduced-motion: reduce) {
  #bp-app.enter .hero::after { display: none; }
  #bp-app .bt:hover, #bp-app .bt.sel { transform: none; }
}

/* ---------- round 10: ember type (the app's EmberText) ---------- */
.ew { white-space: nowrap; }
.ec { font-style: normal; position: relative; }
.embering .ec { visibility: hidden; }
.embering .ec.s, .embering .ec.t { visibility: visible; }
.ec.cur::after { content: ""; position: absolute; right: -3px; top: .12em; bottom: .08em; width: 2px; background: #F5A623; box-shadow: 0 0 8px rgba(245,166,35,.7); }

/* ---------- round 11: the range (as early as / typical / as late as) ---------- */
.range { display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin-top: 16px; border-top: 1px solid var(--hl2); border-bottom: 1px solid var(--hl2); }
.range > div { padding: 12px 10px 12px 0; display: flex; flex-direction: column; gap: 4px; }
.range > div + div { padding-left: 12px; border-left: 1px solid var(--hl2); }
.range .k { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.range b { font: 800 17px/1.1 Unbounded, sans-serif; color: var(--bone); white-space: nowrap; }
.range .mid b { color: #F5A623; }
.range + .fine { margin-top: 8px; }
.tl-range { position: absolute; top: -9px; height: 4px; background: #F5A623; z-index: 2; }
.tl-range::before, .tl-range::after { content: ""; position: absolute; top: -3px; width: 2px; height: 10px; background: #F5A623; }
.tl-range::before { left: 0; } .tl-range::after { right: 0; }
.an-grow .tl-range { transform-origin: left center; animation: grow .35s .6s var(--ease-cut) both; }
@media (max-width: 380px) { .range b { font-size: 15px; } .range > div + div { padding-left: 8px; } }
@media (min-width: 900px) { .range b { font-size: 22px; } }
.tl-range { top: calc(100% + 5px); }
.tl-range::before, .tl-range::after { top: -6px; }
.tl-fk { margin-top: 20px; }

.range .k2 { font: 600 12px "JetBrains Mono", monospace; color: var(--t4); letter-spacing: .04em; }

/* stripe boxes carry their number, left to right */
#bp-app .stp-s { font: 800 22px Unbounded, sans-serif; color: #8A8A8A; display: grid; place-items: center; }
#bp-app .stp-s.on { color: #111; }
@media (hover: hover) { #bp-app .stp-s:not(.on):hover { color: var(--bone); } }

/* ---------- round 12: road over ladder (desktop), tracker (phone) ---------- */
#bp-app .win { font: 700 18px/1.35 Inter, sans-serif; color: var(--bone); margin: 12px 0 0; }
#bp-app .freq { font: 500 14px/1.5 Inter, sans-serif; color: var(--t2); margin: 4px 0 0; }
.pc { margin-top: 22px; }
.pc .mono { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--t3); text-transform: uppercase; margin: 0; }
.pc-axis { position: relative; height: 18px; }
.pc-axis span { position: absolute; transform: translateX(-50%); font: 500 12px 'JetBrains Mono', monospace; color: var(--t4); white-space: nowrap; }
.pc-row { position: relative; padding: 12px 0 14px; border-top: 1px solid var(--hl); }
.pc-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pc-hd .nm { font: 700 15px Inter, sans-serif; color: var(--bone); }
.pc-hd .rg { font: 500 13px Inter, sans-serif; color: var(--t2); margin-left: auto; }
.pc-row.goal .pc-hd .nm { color: #F5A623; }
.pc-bar { position: relative; height: 18px; margin-top: 8px; background: linear-gradient(transparent 8px, #222 8px, #222 10px, transparent 10px); }
.pc-band { position: absolute; top: 3px; height: 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: left .5s var(--ease-cut), width .5s var(--ease-cut); }
.pc-mid { position: absolute; top: -1px; width: 3px; height: 20px; margin-left: -1px; background: var(--bone); border-radius: 1px; transition: left .5s var(--ease-cut); }
.pc-row.goal .pc-mid, .pc-stop.goal .pc-mid { background: #F5A623; }
.pc-rule { position: absolute; top: 1px; height: 16px; border-left: 2px dotted var(--t3); }
.pc-was { position: absolute; top: -2px; height: 22px; border-left: 2px dotted var(--bone); opacity: .7; }
.pc-you { position: absolute; top: -4px; height: 26px; border-left: 2px dashed var(--bone); }
.no-tr .pc-band, .no-tr .pc-mid { transition: none !important; }
.pc-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 500 12px 'JetBrains Mono', monospace; color: var(--t3); }
.pc-key i { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.pc-key .k-band { width: 16px; height: 10px; border-radius: 5px; background: #5a4a3a; }
.pc-key .k-mid { width: 3px; height: 12px; background: #F5A623; }
.pc-key .k-rule { height: 12px; border-left: 2px dotted var(--t3); }
.pc-key .k-was { height: 12px; border-left: 2px dotted var(--bone); }
.pc-key .k-you { height: 12px; border-left: 2px dashed var(--bone); }

/* the road */
.pc-road { position: relative; height: 104px; }
.pc-seg { position: absolute; top: 76px; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pc-dot { position: absolute; top: 68px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 3px solid #111; box-shadow: 0 0 0 2px var(--bone); z-index: 2; }
.pc-dot.goal { box-shadow: 0 0 0 3px #F5A623; }
.pc-now { position: absolute; left: 0; top: 64px; width: 4px; height: 32px; background: var(--bone); border-radius: 2px; }
.pc-tag { position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.pc-tag.r0 { top: 34px; } .pc-tag.r1 { top: 2px; }
.pc-tag b { display: block; font: 800 16px/1.1 Unbounded, sans-serif; color: var(--bone); }
.pc-tag.goal b { color: #F5A623; }
.pc-tag.you { left: 0; top: 34px; transform: none; text-align: left; }

/* the tracker (phone) */
.pc-phone { display: block; }
.pc-desk { display: none; }
.pc-stop { display: grid; grid-template-columns: 28px 1fr; gap: 0 14px; position: relative; padding-bottom: 18px; }
.pc-rail { position: relative; }
.pc-ln { display: block; position: absolute; left: 11px; top: 24px; bottom: -6px; width: 6px; border-radius: 3px; }
.pc-nd { display: block; position: relative; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #111; box-shadow: 0 0 0 2px var(--bone); }
.pc-stop.goal .pc-nd { box-shadow: 0 0 0 3px #F5A623; }
.pc-when { font: 800 21px/1.15 Unbounded, sans-serif; color: var(--bone); margin: 2px 0 0; }
.pc-when.sm { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.pc-stop.goal .pc-when { color: #F5A623; }
.pc-rg { font: 500 13px/1.4 Inter, sans-serif; color: var(--t2); margin: 3px 0 0; }
.pc-belt { display: inline-block; position: relative; width: 70px; height: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.pc-belt i { position: absolute; right: 8px; top: 0; bottom: 0; width: 22px; background: #000; display: flex; flex-direction: row-reverse; gap: 2px; padding: 0 2px; }
.pc-belt em { width: 3px; background: #fff; }
.pc-axisw { margin-left: 42px; }

/* compact (pinned above the adjust and date-check questions) */
.pc-compact { margin-top: 0; }
.pc-compact .pc-row { border-top: 0; padding: 4px 0 2px; }
.pc-compact .pc-hd .nm { font-family: Unbounded, sans-serif; font-weight: 800; font-size: 16px; }

@media (min-width: 720px) {
  .pc-phone { display: none; }
  .pc-desk { display: block; }
}

/* motion: the road draws on, then the rows cut in */
.an-grow .pc-seg { transform-origin: left center; animation: grow .45s var(--ease-cut) both; }
.an-grow .pc-seg:nth-of-type(2) { animation-delay: .12s; } .an-grow .pc-seg:nth-of-type(3) { animation-delay: .24s; } .an-grow .pc-seg:nth-of-type(4) { animation-delay: .36s; }
.an-grow .pc-dot, .an-grow .pc-nd { animation: pop .14s .4s var(--ease-cut) both; }
.an-grow .pc-band { transform-origin: left center; animation: grow .4s .35s var(--ease-cut) both; }
.an-grow .pc-row, .an-grow .pc-stop { animation: landin .24s var(--ease-cut) both; }
.an-grow .pc-row:nth-of-type(2), .an-grow .pc-stop:nth-of-type(2) { animation-delay: .1s; }
.an-grow .pc-row:nth-of-type(3), .an-grow .pc-stop:nth-of-type(3) { animation-delay: .2s; }
.an-grow .pc-row:nth-of-type(n+4), .an-grow .pc-stop:nth-of-type(n+4) { animation-delay: .3s; }
.an-grow .pc-tag { animation: fade .12s .5s linear both; }
@media (prefers-reduced-motion: reduce) { .pc * { animation: none !important; transition: none !important; } }
/* more headroom on the road so labels never sit on the dots */
.pc-road { height: 116px; }
.pc-seg { top: 88px; } .pc-dot { top: 80px; } .pc-now { top: 76px; height: 32px; }
.pc-tag.r0 { top: 36px; } .pc-tag.r1 { top: 0; }
.pc-tag.you { left: 12px; top: 36px; }
.pc-tag.you { top: 0; }
.pc-road { height: 126px; }
.pc-seg { top: 98px; } .pc-dot { top: 90px; } .pc-now { top: 86px; }
.pc-tag.r0 { top: 48px; }
.pc-road { height: 136px; }
.pc-seg { top: 108px; } .pc-dot { top: 100px; } .pc-now { top: 96px; }
.srcs { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; }
.pc-band.blk { box-shadow: inset 0 0 0 2px rgba(229,229,229,.55); }
.pc-dot[style*="#000000"], .pc-nd[style*="#000000"] { background-image: radial-gradient(circle, #000 55%, #333 56%); }