*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--page) repeating-linear-gradient(45deg,var(--weave) 0 2px,transparent 2px 6px);color:var(--ink);font-family:var(--font);font-size:1.125rem;line-height:1.45;overflow-x:hidden}
/* the chequered flag along the top of every screen */
body::before{content:"";display:block;height:12px;background:repeating-conic-gradient(var(--kerb-b) 0 25%,#111 0 50%) 0 0/12px 12px}
[hidden]{display:none!important}
.page{max-width:1100px;margin:0 auto;padding:clamp(12px,2.2vw,30px) clamp(16px,3vw,40px)}
h1,h2,.phase,.btn,.card strong,.status,.label,.readout,.readout-sm,th,.result-line strong{font-family:var(--display)}
h1,.phase,.card strong,.readout,.readout-sm,.result-line strong,.stat{font-style:oblique 10deg;font-weight:800}
h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;margin:0 0 .45em;text-transform:uppercase;letter-spacing:.01em}
/* a run of kerb under each heading */
h1::after{content:"";display:block;width:clamp(90px,14vw,170px);height:8px;margin-top:.16em;background:repeating-linear-gradient(115deg,var(--kerb-a) 0 14px,var(--kerb-b) 14px 28px)}
h2{font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin:1.2em 0 .5em}
.lede{color:var(--ink-2);margin:0 0 1em;max-width:62ch}
.muted{color:var(--ink-2)}
/* buttons are cut on the slant, like a livery */
.btn{display:inline-block;min-height:48px;padding:.5em 1.4em;border:0;background:var(--line);color:var(--ink);font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-decoration:none;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:transform .08s}
.btn:hover{transform:translateX(3px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--actual);outline-offset:2px;clip-path:none}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.panel{background:var(--panel);border:1px solid var(--line);padding:clamp(14px,2vw,24px);margin:0 0 16px}
label.field{display:flex;flex-direction:column;gap:4px;font-weight:600;min-width:0;max-width:100%}
select,input[type=number]{min-height:44px;max-width:100%;padding:.4em .6em;border:1px solid var(--line);background:var(--page);color:var(--ink);font:inherit;font-weight:400}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}