/* VLTA v3: the site-wide layer, loaded after styles.css. One system for the site and the tool:
   Archivo only (expanded width for display), ink and paper with one purple, fully round controls, soft panels
   separated by tone not lines, one easing family, and buttons that answer the press. */
:root{--ease:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--pur:#9B3DFF;--pur-hover:#8A2BF0;--pur-t:#C7A3FF;
  --panel:rgba(242,241,247,.045);--panel2:rgba(242,241,247,.075);--panel3:rgba(242,241,247,.11);--r:20px;--r-s:12px}

/* page changes cross-fade instead of flashing white: same-origin navigations only */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-old(root){animation:.2s ease-out both v3-out}
::view-transition-new(root){animation:.38s var(--ease) both v3-in}
header.top{view-transition-name:nav}
@keyframes v3-out{to{opacity:0}}
@keyframes v3-in{from{opacity:0;transform:translateY(10px)}}

body{font-feature-settings:"ss01" 0;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* ---- header: quiet, solid, sticky. One action, in purple */
header.top{border-bottom:0;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 94%,transparent)}
header.top .wrap{min-height:72px}
header.top nav a,header.top nav .linkish{font:500 15px var(--sans);color:var(--muted);border-radius:999px;padding:9px 14px}
header.top nav a[aria-current=page]{color:var(--fg);box-shadow:none;background:var(--panel2);border-radius:999px}
header.top nav a.btn,header.top nav a.btn:hover{background:var(--pur);color:#fff;border:0;border-radius:999px;clip-path:none;min-height:44px;padding:0 20px;font-weight:600;margin-left:10px}
@media (hover:hover){header.top nav a.btn:hover{background:var(--pur-hover)}}
header.top nav .sep{background:var(--panel3)}
@media (max-width:760px){header.top .wrap{min-height:60px}header.top nav a.btn{min-height:40px;padding:0 14px;margin-left:4px}}

/* ---- buttons: fully round. Default is paper on ink; .accent is the one purple action; .ghost a tone step */
.btn,.btn:not(.ghost):not(.danger):not(.on-dark){clip-path:none;border-radius:999px}
.btn{font:600 15.5px var(--sans);border-width:0;min-height:48px;padding:0 24px;transition:transform .12s var(--ease),background-color .18s ease-out,color .18s ease-out}
.btn:active{transform:scale(.97)}
.btn.accent,.btn.accent:hover{background:var(--pur);color:#fff;border:0}
@media (hover:hover){.btn.accent:hover{background:var(--pur-hover)}}
.btn.ghost{background:var(--panel2);color:var(--fg);border:0}
@media (hover:hover){.btn.ghost:hover{background:var(--panel3);color:var(--fg)}}
.btn.small{min-height:38px;padding:0 16px;font-size:14px}
.btn:disabled{opacity:.5;transform:none;cursor:not-allowed}

/* ---- panels: no outlines, a tone step from the ground */
.card,.notice,.week-list,.empty,.upload-drop,.startgrid,.meter,.timing,.tower{border:0!important;border-radius:var(--r)}
.card{background:var(--panel)}
.notice{background:color-mix(in srgb,var(--pur) 10%,var(--bg));border-radius:var(--r-s);padding:16px 20px}
.notice.err{background:color-mix(in srgb,var(--bad) 14%,var(--bg))}
.note{border-left:0;border-radius:var(--r-s);background:var(--panel)}
.offer-line{border-left:0;border-radius:var(--r-s)}
.pill,.src{border:0!important;background:var(--panel2);border-radius:999px}
.pill.sample{border-style:solid}

/* ---- forms: filled fields, label above, purple focus */
input,textarea,select{border:1px solid transparent;background:var(--panel2);border-radius:var(--r-s);min-height:48px;transition:border-color .18s ease-out,background-color .18s ease-out}
input:hover,textarea:hover,select:hover{background:var(--panel3)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--pur);background:var(--panel3);box-shadow:0 0 0 3px color-mix(in srgb,var(--pur) 28%,transparent)}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--pur)}
.upload-drop input::file-selector-button{border-radius:999px;border:0;background:var(--fg);color:var(--bg);font-weight:600;padding:9px 16px}

/* ---- chips: round, filled; the chosen one in purple */
.chip span{border:0!important;border-radius:999px!important;background:var(--panel2)!important;transition:background-color .18s ease-out,transform .12s var(--ease)}
@media (hover:hover){.chip span:hover{background:var(--panel3)!important}}
.chip span:active{transform:scale(.97)}
.chip input:checked+span{background:var(--pur)!important;color:#fff!important}
.chip input:focus-visible+span{outline:2px solid var(--pur);outline-offset:2px}

/* ---- labels in the text face: no monospace capitals anywhere in the app */
.eyebrow,.stat-k,th,.kpis .k,.src,.facts dt,.report-sample .rs-top,table.compare td:first-child,dl.keyinfo dt,.subhead,
.tour .tour-n,.races time,.doc-top,.doc-foot,.driver-kicker,.driver-stats dt,.bignums dt,.form-strip li span,.tpl-h,.qe-h,.wk-when,.step-n{
  font-family:var(--sans)!important;letter-spacing:0!important;text-transform:none!important;font-variant-numeric:tabular-nums}
.stat-k,th,.kpis .k,.facts dt,dl.keyinfo dt,.subhead,.bignums dt,.tpl-h,.qe-h,.tour .tour-n,.wk-when{font-size:13px!important;font-weight:600!important;color:var(--muted)}
.eyebrow::before{display:none}
fieldset.step legend .n{border-radius:999px}
.step-n{border:0;background:var(--panel2)}

/* ---- page heads: big, expanded, no rule underneath */
.page-head{border-bottom:0!important;padding-bottom:8px}
.page-head h1{font:800 clamp(38px,5vw,64px)/.95 'Archivo Display',Archivo,sans-serif;font-stretch:125%;letter-spacing:-.035em}
.page-head .help{font-size:17px;max-width:56ch}

/* ---- the week list on the dashboard: rows as tone steps */
.week-list{background:var(--panel)!important;overflow:hidden}
.week-list li{border-bottom:0!important}
.week-list li+li{box-shadow:inset 0 1px 0 var(--panel2)}
.week-list li:first-child{background:color-mix(in srgb,var(--pur) 9%,transparent)}

/* ---- footer: a quiet field */
footer{border-top:0!important;background:var(--panel);margin-top:72px}

/* ---- browser surfaces */
::selection{background:var(--pur);color:#fff}
input,textarea{caret-color:var(--pur)}
html{scrollbar-color:color-mix(in srgb,var(--pur) 60%,transparent) transparent}
:focus-visible{outline:2px solid var(--pur);outline-offset:2px}
table,.num,.price,.tabnum{font-variant-numeric:tabular-nums}
a{text-underline-offset:.18em}
img{background-color:rgba(242,241,247,.03)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.btn:active{transform:none}}

/* ---- the Builder on a desktop: the post large on a lit stage, the steps in a panel beside it */
@media (min-width:861px){
  body.in-builder{background:#0B0A1C}
  body.in-builder main{padding:0}
  body.in-builder main .wrap{max-width:1360px;padding-inline:32px}
  .builder.tabbed{display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto auto 1fr;gap:0 40px;min-height:100svh;align-items:start}
  .builder.tabbed>.b-top{grid-row:1}
  .builder.tabbed>.stage{grid-column:1;grid-row:2/4}
  .builder.tabbed>.controls{grid-column:2;grid-row:2;margin-bottom:0;border-radius:24px 24px 0 0;max-height:calc(100svh - 190px)}
  .builder.tabbed>.b-bottom{grid-column:2;grid-row:3;position:sticky;top:auto;bottom:24px;margin:0 0 24px!important;border-radius:0 0 24px 24px;background:var(--sheet,#15132E)!important}
  .builder.tabbed .b-top{grid-column:1/-1;margin:0 -32px;padding-inline:20px;height:72px;position:sticky;top:0}
  .builder.tabbed .b-segs{max-width:320px}
  .builder.tabbed .stage{position:sticky;top:72px;height:calc(100svh - 72px);display:grid;align-content:center;justify-items:center;padding:24px 0 32px;background:radial-gradient(60% 55% at 50% 45%,rgba(155,61,255,.2),rgba(155,61,255,0) 70%)}
  .builder.tabbed .stage canvas{max-height:calc(100svh - 220px);max-width:100%;width:auto;border-radius:6px}
  .builder.tabbed .controls{margin:24px 0 32px;border-radius:24px;min-height:0;padding:20px 24px 0;max-height:calc(100svh - 120px);overflow:auto;position:sticky;top:96px;overscroll-behavior:contain}
  .builder.tabbed .controls::before{display:none}
  .builder.tabbed .actions{position:sticky;bottom:0;left:auto;right:auto;margin:16px -24px 0;padding:16px 24px 20px;border-radius:0 0 24px 24px}
  .builder.tabbed .tpl-groups{grid-template-columns:1fr}
  .builder.tabbed .tpl-g .chips{flex-wrap:wrap;margin:0;padding:0}
}
@media (min-width:861px){
  .builder.tabbed .b-top{align-items:center;padding-block:0!important;height:72px!important;background:#0B0A1C}
  .builder.tabbed>.b-bottom{background:var(--sheet,#15132E)!important;padding-top:4px!important;box-shadow:none}
  body.in-builder .support-fab{display:none}
  .builder.tabbed .stage-tools{margin-top:16px}
}
/* no monospace in the interface: the app's mono token now points at the text face, set in sentence case */
:root{--mono:Archivo,system-ui,sans-serif}
.big-price small,.sg-h,.sg span em,.rsheet-top,.rsheet-figs em,.rs-top,.rp-k,.no-k{font-family:Archivo,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.big-price small{font-size:15px!important}
.sg-h{font-size:13.5px!important;font-weight:600}
@media (min-width:861px){.builder.tabbed .b-top{grid-template-columns:44px minmax(0,1fr) 44px 44px}}

/* ---- phone fixes, Nov 2026 */
/* the narrowest phones: the header keeps the logo, Sign in, the one action and Help */
@media (max-width:400px){header.top nav a[href="/pricing"]:not(.btn){display:none}header.top nav a.btn{padding:0 12px}header.top .hdr-help{margin-left:0}}
/* wide tables scroll inside their card instead of being cut off */
.card:has(table),.report:has(table),section:has(>table){overflow-x:auto}
table{min-width:max-content}
@media (min-width:700px){table{min-width:0}}

/* ---- Builder scrolling, Nov 2026. One scroll per screen: the page scrolls, nothing scrolls inside it. */
@media (min-width:861px){
  /* desktop: the post stays put on the left, the step flows down the right, Next rides the bottom of the column */
  .builder.tabbed>.controls,.builder.tabbed .controls{max-height:none!important;overflow:visible!important;position:relative!important;top:auto!important;margin:24px 0 0!important;border-radius:24px 24px 0 0!important}
  .builder.tabbed>.b-bottom{position:sticky!important;bottom:0!important;margin:0 0 24px!important;padding:14px 24px 20px!important;border-radius:0 0 24px 24px}
  .builder.tabbed .actions{position:sticky!important;bottom:0}
}
@media (max-width:860px){
  /* phone: the post shrinks to a small preview once you start scrolling, so the step gets the screen */
  .builder.tabbed .stage canvas{transition:max-height .28s var(--ease)}
  .builder.tabbed.compact .stage canvas{max-height:19svh}
  .builder.tabbed.compact .stage .stage-tools{display:none}
  .builder.tabbed.compact .stage{padding-bottom:10px}
  .builder.tabbed .controls{min-height:calc(100svh - 140px)}
}

/* ---- The app, Nov 2026: soft and calm. No outlined boxes anywhere: every panel is a rounded tone step from the
   ground, headings are confident but not shouting, and the content uses the width it is given. */
body:not(.in-builder) main .wrap{max-width:1120px}
body:not(.in-builder) .page-head h1,body:not(.in-builder) main > .wrap > h1:first-child,.dash-h{font-size:clamp(34px,3.6vw,50px)!important;line-height:1.02!important;letter-spacing:-.03em!important}
body:not(.in-builder) main h2{letter-spacing:-.015em}
/* panels */
.next,section.next,.list,ul.list,details.more-fields,.more-fields,fieldset.step,.panel,.box,.setup{border:0!important;border-radius:22px!important}
.next{max-width:none!important;padding:28px 30px!important;gap:12px!important;background:radial-gradient(120% 140% at 100% 0%,rgba(155,61,255,.22),rgba(155,61,255,0) 55%),var(--panel)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.next h2{font-size:clamp(22px,2vw,28px)!important;letter-spacing:-.02em}
body:not(.in-builder) .card{border-radius:22px!important;padding:24px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body:not(.in-builder) .notice{border-radius:16px!important}
/* the setup list: numbered rows with soft circles, done ones ticked in green */
ol.steps{gap:4px!important;margin-top:8px!important}
ol.steps li{align-items:center!important;gap:14px!important;padding:10px 12px;border-radius:14px;font-size:16px!important}
ol.steps li:not(.done){background:rgba(242,241,247,.04)}
ol.steps li::before{display:grid;place-items:center;width:28px!important;height:28px;border-radius:50%;background:rgba(242,241,247,.08);font:700 13px var(--sans)!important;color:var(--fg)!important}
ol.steps li.done::before{background:rgba(91,214,154,.16);color:#5BD69A!important}
ol.steps li.done{text-decoration:none!important;color:var(--muted)}
ol.steps li a{text-decoration:none;color:var(--fg);font-weight:600}
@media (hover:hover){ol.steps li:not(.done):has(a):hover{background:rgba(155,61,255,.14)}}
/* lists: rows on one soft panel, separated by tone */
ul.list{border-top:0!important;background:var(--panel);overflow:hidden}
ul.list>li{border-bottom:0!important;padding-inline:20px}
ul.list>li+li{box-shadow:inset 0 1px 0 rgba(242,241,247,.06)}
/* forms in the app: grouped in soft panels, no rules between groups */
body:not(.in-builder) fieldset.step{background:var(--panel);padding:24px 26px 18px!important;margin-bottom:14px!important}
body:not(.in-builder) .more-fields{background:rgba(242,241,247,.03);padding:14px 18px!important}
body:not(.in-builder) .more-fields>summary{cursor:pointer;font-weight:600}
/* tables: inside a soft panel, rows by tone */
body:not(.in-builder) table{border-collapse:separate;border-spacing:0}
body:not(.in-builder) th,body:not(.in-builder) td{border:0!important}
body:not(.in-builder) tbody tr:nth-child(odd){background:rgba(242,241,247,.03)}
/* buttons inside panels stay round */
body:not(.in-builder) .btn{clip-path:none!important;border-radius:999px!important}
@media (min-width:900px){.next{grid-template-columns:minmax(0,1fr) auto;align-items:start}.next>*{grid-column:1}.next>.row:last-child{grid-column:2;grid-row:1/span 3;align-self:center;margin:0!important}}
section.week{max-width:none!important}

/* ---- phones, Nov 2026: nothing in the app may be wider than the screen. Grid and flex children can shrink,
   form fields never outgrow their box, and long headings wrap instead of running off the side. */
main input:not([type=checkbox]):not([type=radio]),main select,main textarea{max-width:100%;min-width:0}
main h1,main h2,main h3{overflow-wrap:break-word;min-width:0}
.card,.card>*,.monthly>*,.row>*,.stack>*{min-width:0}
.fig-table input{width:100%}
.month-pick{flex-wrap:wrap}
.month-pick label{min-width:0;flex:1 1 160px}
.month-pick input{width:100%}
@media (max-width:640px){
  .fig-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monthly-head{align-items:stretch}
  .monthly-head>div,.month-pick{flex:1 1 100%}
}
/* phones: tables stack into one card per row (labels come from public/tables.js), instead of scrolling sideways */
@media (max-width:699px){
  .card:has(table.stacks),.report:has(table.stacks),section:has(>table.stacks),.scroll:has(>table.stacks),.card:has(.fig-table),.scroll:has(>.fig-table){overflow-x:visible}
  table.stacks,.fig-table{min-width:0!important;width:100%}
  table.stacks thead{display:none}
  table.stacks,table.stacks tbody,table.stacks tr{display:block;width:100%}
  table.stacks tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);background:none}
  table.stacks td,table.stacks th{display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  table.stacks tr>:first-child{grid-column:1/-1;font-weight:600}
  table.stacks td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:12px;color:var(--mute,#A9A7C2);margin-bottom:2px}
  table.stacks td:has(form,.btn,button){grid-column:1/-1}
}

/* ---- Builder on a phone, Nov 2026, take two: an app screen, not a web page. The whole Builder is exactly one
   screen tall and the page never scrolls. The post stays in view at the top; only the step's options scroll,
   inside their own panel, and Next is always under your thumb. */
@media (max-width:860px){
  body.in-builder{height:100dvh;overflow:hidden;overscroll-behavior:none}
  body.in-builder main,body.in-builder main .wrap{height:100dvh;padding-top:0!important;padding-bottom:0!important;margin-top:0!important}
  .builder.tabbed{display:flex!important;flex-direction:column;height:100dvh;min-height:0!important;overflow:hidden}
  .builder.tabbed>.b-top{flex:none;position:relative!important;top:auto!important}
  .builder.tabbed>.stage{flex:none;position:relative!important;top:auto!important;border-bottom:0;width:100%;display:flex!important;flex-direction:column;align-items:center}
  .builder.tabbed .stage canvas{max-height:min(34dvh,46vw * 1.6)}
  .builder.tabbed.compact .stage canvas{max-height:17dvh}
  .builder.tabbed>.controls{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    margin:0!important;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;scroll-padding-bottom:110px}
  .builder.tabbed .controls :is(fieldset,label,input,select,textarea,button){scroll-margin-top:16px}
}
@media (max-width:860px){
  /* the small preview keeps its tools (Flip, Move), so a style picked low in the list can still be flipped */
  .builder.tabbed.compact .stage .stage-tools{display:flex!important;margin-top:6px}
  .builder.tabbed.compact .stage .stage-tools .btn{min-height:30px;padding:2px 12px;font-size:12.5px}
}

/* ---- the driver kit page */
.kit-bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end;margin:8px 0 4px;padding:16px;border-radius:20px;background:rgba(155,61,255,.08)}
.kit-bar label{display:grid;gap:6px;font-size:14px}
.kit-photo{flex:1 1 200px}
.kit-col input{width:56px;height:48px;padding:4px;border-radius:12px}
.kit-swatches{display:flex;gap:6px;align-self:center}
.kit-sw{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.4);padding:0;cursor:pointer}
.kit-flip{display:flex!important;grid-auto-flow:column;align-items:center;gap:8px;align-self:center;min-height:44px}
.kit-all{margin-left:auto}
.kit-status{min-height:1.4em;margin:6px 0 0}
.kit-h{margin:40px 0 6px}
.kit-row{display:grid;gap:16px;margin-top:16px}
.kit-sq{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.kit-tall{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.kit-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-card{display:grid;gap:10px;align-content:start;min-width:0}
.kit-frame{border-radius:14px;overflow:hidden;background:#0B0B10;line-height:0}
.kit-frame canvas{width:100%;height:auto;display:block}
.kit-sq .kit-frame{border-radius:50%}
.kit-meta{display:grid;gap:4px;justify-items:start}
.kit-meta h3{margin:0;font-size:16px}
.kit-meta p{margin:0}
.kit-meta .btn{margin-top:6px;min-height:40px}
.kit-tt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;max-width:820px}
.kit-tt label{display:grid;gap:6px;font-size:14px}
.kit-tt .tt-wide{grid-column:1/-1}
.kit-rules{display:grid;gap:10px;padding-left:20px;max-width:70ch}
@media (max-width:700px){
  .kit-wide{grid-template-columns:1fr}
  .kit-sq,.kit-tall{gap:12px}
  .kit-tt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-tt label:first-child{grid-column:1/-1}
  .kit-all{margin-left:0;flex:1 1 100%}
  .kit-meta p{font-size:13px}
}
.kit-print{grid-template-columns:minmax(0,3fr) minmax(0,4fr);max-width:900px;align-items:start}
.kit-partner{display:grid;gap:6px;max-width:360px;margin-top:12px;font-size:14px}
.kit-cap{display:grid;gap:8px;max-width:820px;margin-top:16px;justify-items:start}
.kit-cap textarea{width:100%}
.kit-bios{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}
.kit-bio{display:grid;gap:8px;justify-items:start;padding:14px;border-radius:16px;background:rgba(255,255,255,.04)}
.kit-bio label{display:grid;gap:6px;width:100%;font-weight:600}
.kit-bio textarea{width:100%;font-weight:400}
@media (max-width:700px){.kit-print{grid-template-columns:1fr}}

/* ---- Race day: one phone screen, nothing to scroll. Session chips, a keypad, one big button. */
body:has(.rd) header.top,body:has(.rd) .tabbar,body:has(.rd) footer,body:has(.rd) .dock{display:none!important}
body:has(.rd){overflow:hidden;height:100dvh}
body:has(.rd) main,body:has(.rd) main .wrap{padding:0!important;margin:0 auto!important;max-width:560px}
.rd{height:100dvh;display:flex;flex-direction:column;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 14px calc(12px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.rd-top{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:8px;flex:none}
.rd-back{font-size:34px;line-height:1;text-decoration:none;color:inherit;display:grid;place-items:center;height:40px}
.rd-where h1{font-size:18px!important;margin:0;line-height:1.1!important;letter-spacing:0!important}
.rd-where .linkish{font-size:14px;color:var(--violet-t,#C7A3FF);padding:2px 0;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rd-photo{max-width:120px;font-size:16px;min-height:40px;padding:4px 8px;border-radius:12px}
.rd-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none}
.rd-more label{display:grid;gap:4px;font-size:13px}
.rd-more input:not([type=checkbox]){font-size:16px;min-height:42px}
.rd-more .rd-sz{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.rd-stage{flex:1 1 auto;min-height:0;position:relative}
.rd-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.rd-sess{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:none;padding:2px 0;scroll-snap-type:x proximity}
.rd-sess button{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:inherit;font:600 15px Archivo,sans-serif;scroll-snap-align:center}
.rd-sess button.on{background:var(--violet,#9B3DFF);color:#fff}
.rd-pad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;flex:none}
.rd-pad button{min-height:min(52px,6.6dvh);border:0;border-radius:14px;background:rgba(255,255,255,.07);color:inherit;font:800 22px Archivo,sans-serif;touch-action:manipulation}
.rd-pad button:active{background:rgba(155,61,255,.4)}
.rd-pad .rd-st{font-size:14px}
.rd-go{display:grid;grid-template-columns:2fr 1fr;gap:8px;flex:none}
.rd-go .btn{min-height:54px;border-radius:999px;font-size:16px}
.rd-msg{margin:0;min-height:1.2em;text-align:center;flex:none}
@media (min-width:700px){.rd-pad{grid-template-columns:repeat(12,minmax(0,1fr))}}
.install-hint{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:8px 10px 8px 14px;border-radius:14px;background:rgba(155,61,255,.16);font-size:13px;line-height:1.35}
.install-hint p{margin:0}
.install-hint .ih-b{display:grid;gap:6px}.install-hint .btn{min-height:34px;padding:2px 12px;font-size:13px}
.install-hint[hidden]{display:none}
.kit-review{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.kit-review{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .builder.tabbed .b-bottom:has(#b-skip:not([hidden])){display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .builder.tabbed .b-bottom #b-skip{width:auto!important;padding:0 18px;white-space:nowrap}
}
@media (min-width:861px){.builder.tabbed .b-bottom #b-skip{margin-top:8px;width:100%}}
.list .li-h{font-size:1.1rem;margin:0 0 4px;line-height:1.25}
main h2.h3{font-size:1.15rem;line-height:1.25;letter-spacing:0}
.builder > .b-h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;display:block!important}
@media (max-width:860px){
  /* the bars at the bottom of the Builder are solid, with a short fade above, so nothing shows through behind the buttons */
  .builder.tabbed .b-bottom,.builder.tabbed .actions{background:var(--sheet,#15132E)!important;padding-top:10px!important}
  .builder.tabbed .b-bottom::before,.builder.tabbed .actions::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(to top,var(--sheet,#15132E),rgba(21,19,46,0));pointer-events:none}
  .builder.tabbed .b-bottom #b-skip{background:rgba(255,255,255,.08)!important;border-color:transparent!important;box-shadow:none!important;color:#F2F1F7!important}
  .builder.tabbed .b-bottom #b-skip::after{content:none!important}
}

/* ---- best of your photos */
.p-best span{color:var(--violet-t,#C7A3FF)}
dialog.bp{width:min(560px,100vw - 24px);max-height:min(86dvh,900px);padding:0;border:0;border-radius:22px;background:#15132E;color:#F2F1F7}
dialog.bp::backdrop{background:rgba(5,5,12,.7)}
.bp-in{display:grid;gap:10px;padding:18px;max-height:inherit;box-sizing:border-box;overflow:auto}
.bp-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bp-top h2{margin:0;font-size:20px}
.bp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bp-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:16px;background:rgba(255,255,255,.04)}
.bp-item.top{background:rgba(155,61,255,.18)}
.bp-item canvas{width:120px;height:90px;object-fit:cover;border-radius:10px}
.bp-info{display:grid;gap:4px;justify-items:start}
.bp-rank{margin:0;font-weight:700}
.bp-info p.muted{margin:0}
.funnel{list-style:none;padding:0;margin:12px 0 8px;display:grid;gap:8px;max-width:760px}
.funnel li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) 6rem;gap:12px;align-items:center;font-size:14px}
.funnel .f-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.funnel .f-bar i{display:block;height:100%;background:#9B3DFF;border-radius:999px}
.funnel .f-n{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.funnel li{grid-template-columns:1fr 5rem}.funnel .f-bar{grid-column:1/-1;grid-row:2}}
.ref-ask{position:fixed;left:12px;right:12px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:40;max-width:520px;margin:0 auto;padding:14px 16px;border-radius:18px;background:#1C1A3B;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);display:grid;gap:10px;font-size:15px}
.ref-ask[hidden]{display:none}
.ref-ask p{margin:0}

/* /links: the bio link page */
.links-page{max-width:520px;margin:8px auto 40px;text-align:center}
.links-mark{width:64px;height:auto;margin:0 auto 14px;display:block}
.links-page h1{font-size:clamp(28px,7vw,40px);margin:0 0 8px}
.links-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;text-align:left}
.links-a{display:block;padding:16px 20px;border-radius:18px;border:1px solid rgba(199,163,255,.28);background:linear-gradient(135deg,rgba(155,61,255,.16),rgba(155,61,255,.03));color:inherit;text-decoration:none}
.links-a strong{display:block;font-size:19px}.links-a span{display:block;color:#B4B2CC;font-size:15px;margin-top:3px}
.links-a.main{background:#9B3DFF;border-color:#9B3DFF}.links-a.main span{color:#F2F1F7}
.links-a:focus-visible{outline:3px solid #C7A3FF;outline-offset:3px}
.made-with{margin:28px 0 0;text-align:center}