:root {
  --ink-950:#011821; --ink-900:#0b2530; --ink-700:#38506d; --ink-500:#586b82; --ink-300:#aebbc9;
  --line:#dfe6ed; --surface:#fff; --canvas:#f5f8f7; --primary:#02675c; --primary-soft:#e3f2ef;
  --red:#a22e25; --red-soft:#ffebe9; --amber:#7c4b09; --amber-soft:#fff4df;
  --danger:var(--red); --warning:var(--amber); --focus:#0b63ce;
  --shadow:0 16px 44px rgba(24,48,79,.08); --radius-lg:1.25rem; --radius-md:.95rem; --tap:2.75rem;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink-950); background:var(--canvas); font-synthesis:none; font-size:16px;
}
* {box-sizing:border-box}
html {min-width:320px; min-height:100%; background:var(--canvas); -webkit-text-size-adjust:100%; scroll-padding-block:2rem 7rem}
body {margin:0; min-width:320px; min-height:100dvh; background:var(--canvas); line-height:1.55}
[hidden] {display:none!important}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.2; letter-spacing:-.025em; text-wrap:balance}
h1 {font-size:clamp(1.75rem,4vw,2.25rem); font-weight:650}
h2 {font-size:1.2rem} h3 {font-size:1.05rem}
a {color:var(--primary); text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center; overflow-wrap:anywhere}
button,input,textarea,select {font:inherit; color:inherit}
button,a,input,textarea,select,summary {touch-action:manipulation; -webkit-tap-highlight-color:transparent}
button,.button {min-height:var(--tap); border:1px solid var(--ink-300); border-radius:.85rem; padding:.65rem 1rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--surface); color:var(--primary); font-weight:600; line-height:1.4}
button:hover,.button:hover {background:var(--primary-soft)}
button:active,.button:active {transform:translateY(1px)}
button.primary,.button.primary {background:var(--primary); color:white; border-color:var(--primary)}
button.danger {color:var(--danger); border-color:var(--danger)}
button:disabled {cursor:not-allowed; background:#edf0ed; color:var(--ink-500); border-color:var(--line); transform:none}
:focus-visible {outline:3px solid var(--focus); outline-offset:3px}
input,textarea,select {display:block; width:100%; min-width:0; max-width:100%; border:1px solid var(--ink-300); background:white; border-radius:.7rem; padding:.7rem .8rem; min-height:var(--tap)}
textarea {resize:vertical; min-height:10rem; line-height:1.55}
input[type=file] {font-size:.875rem; padding:.6rem}
input[type=file]::file-selector-button {min-height:var(--tap); border:0; border-radius:.5rem; padding:.5rem; margin-right:.5rem; color:var(--primary); background:var(--primary-soft)}
label {font-weight:600; display:block; margin-bottom:.4rem}
small,.muted {font-size:.875rem; color:var(--ink-500)}
fieldset {min-width:0; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-md)}
legend {font-weight:600; padding:0 .4rem}
.topbar {padding:calc(.75rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left)); background:var(--surface); color:var(--ink-950); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand {color:var(--ink-950); gap:.75rem; flex-wrap:wrap; font-size:1.25rem; font-weight:700; letter-spacing:-.025em; line-height:1.2}
.brand-logo {display:block; height:32px; width:auto}
.brand small {display:block; font-size:.75rem; color:var(--ink-500); font-weight:400; letter-spacing:.025em; margin-top:.2rem}
.connection {font-size:.75rem; color:var(--primary); flex-shrink:0; display:flex; align-items:center; gap:.4rem}
.connection::before {content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor}
.app-shell {min-height:calc(100dvh - 80px)}
.content {min-width:0; padding:1.5rem max(1rem,env(safe-area-inset-right)) calc(7rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); max-width:60rem; margin:auto}
[tabindex="-1"]:focus {outline:none}
main {outline:none; display:grid; gap:1rem; min-width:0}
.page-heading {display:grid; gap:.6rem; padding:.25rem 0 .75rem}
.eyebrow {font-size:.7rem; color:var(--primary); font-weight:750; letter-spacing:.13em; text-transform:uppercase}
.card {border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); padding:1.25rem; display:grid; gap:1.1rem; min-width:0}
.card.flat {box-shadow:none}
.stack,form {display:grid; gap:1rem; min-width:0}
.row {display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; min-width:0}
.row.spread {justify-content:space-between}
.actions {display:flex; gap:.65rem; flex-wrap:wrap}
.actions>* {flex:1 1 9rem}
.auth {max-width:30rem; margin:1rem auto; width:100%}
.auth .card {padding:1.5rem}
.auth-mark {width:auto; height:40px}
.divider {border-top:1px solid var(--line); padding-top:1rem}
.notice,.warning,.error {border-radius:.8rem; padding:.85rem 1rem; overflow-wrap:anywhere}
.notice {background:var(--primary-soft); color:var(--primary); margin-bottom:1rem; border:1px solid #a9d3cb}
.warning {background:var(--amber-soft); color:var(--warning); border:1px solid #dbbf8b}
.error {color:var(--danger); background:var(--red-soft); border:1px solid #e4aaa6}
.field-error {color:var(--danger); font-size:.875rem; margin-top:.4rem}
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.skip-link {position:fixed; top:-100%; left:1rem; background:white; padding:.75rem; z-index:100}
.skip-link:focus {top:.5rem}
.navigation {position:fixed; z-index:20; bottom:0; left:0; right:0; padding:.35rem max(.4rem,env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.4rem,env(safe-area-inset-left)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); background:white; box-shadow:0 -4px 24px #18304f08}
.navigation>a {flex-direction:column; justify-content:center; text-align:center; font-size:.7rem; font-weight:600; min-height:3.5rem; border-radius:.75rem; color:var(--ink-500); padding:.25rem}
.navigation>a[aria-current=page] {background:var(--primary-soft); color:var(--primary)}
.nav-icon {font-size:1.4rem; line-height:1.15; font-weight:400}
.nav-caption,.nav-note {display:none}
.upload-row,.list-row {border:1px solid var(--line); border-radius:var(--radius-md); padding:1rem; display:grid; gap:.5rem; min-width:0}
.upload-row p,.list-row p {overflow-wrap:anywhere}
.badge {display:inline-flex; width:fit-content; border-radius:.4rem; padding:.15rem .5rem; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:600}
.choice {display:flex; gap:.75rem; min-height:var(--tap); align-items:flex-start; margin:0; padding:.5rem 0; cursor:pointer}
.choice input {width:1.25rem; min-width:1.25rem; height:1.25rem; min-height:1.25rem; margin:.2rem 0 0; accent-color:var(--primary)}
.choice span {min-width:0} .choice small {display:block; font-weight:400; margin-top:.3rem}
.mode-grid {display:grid; gap:.75rem}
.mode-card {justify-content:flex-start; text-align:left; display:grid; gap:.3rem; padding:1rem; border-radius:var(--radius-md)}
.mode-card[aria-pressed=true] {border:2px solid var(--primary); padding:calc(1rem - 1px); background:var(--primary-soft)}
.timer {background:var(--primary-soft); border-radius:var(--radius-md); padding:1rem; display:grid; gap:.8rem}
.timer-number {font-variant-numeric:tabular-nums; font-size:1.5rem; color:var(--primary); font-weight:650}
.steps {list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.steps li {padding:.9rem 1rem; border:1px solid var(--line); border-radius:.75rem; display:flex; align-items:center; gap:.8rem}
.steps li::before {content:""; width:.7rem; height:.7rem; border:2px solid var(--ink-500); border-radius:50%; flex-shrink:0}
.steps li.current {background:var(--primary-soft); border-color:var(--primary)}
.steps li.complete::before {background:var(--primary); border-color:var(--primary)}
.answer {max-width:70ch; line-height:1.55}
.answer p {white-space:pre-wrap; overflow-wrap:anywhere}
.section-switcher {display:flex; flex-wrap:wrap; gap:.5rem}
.section-switcher a {border:1px solid var(--line); background:white; border-radius:.7rem; padding:.5rem .8rem; font-size:.875rem}
section[id] {scroll-margin-top:1.5rem}
summary {cursor:pointer; min-height:var(--tap); padding:.6rem 0; font-weight:600}
details {border-top:1px solid var(--line); min-width:0}
details p {padding:.5rem 0 1rem}
.qr {display:block; width:min(100%,248px); height:auto; border:1px solid var(--line); background:white; margin:auto; image-rendering:pixelated}
footer {margin-top:2rem; color:var(--ink-500); font-size:.75rem; text-align:center}
dialog {border:1px solid var(--line); border-radius:var(--radius-lg); max-width:min(30rem,calc(100% - 2rem)); padding:1.5rem; color:var(--ink-950); box-shadow:var(--shadow)}
dialog::backdrop {background:#0d1b2d80}
dialog h2 {margin-bottom:1rem} dialog .actions {margin-top:1.5rem}
#pwa-banners:empty {display:none}
#pwa-banners>.notice {display:grid; gap:.7rem}
@media(min-width:600px) {.mode-grid {grid-template-columns:1fr 1fr} .card {padding:1.5rem}}
@media(min-width:900px) {
  .topbar {padding-left:2rem; padding-right:2rem}
  .app-shell {display:grid; grid-template-columns:15rem minmax(0,1fr); max-width:100rem; margin:auto}
  .navigation {position:sticky; top:0; align-self:start; grid-template-columns:minmax(0,1fr); gap:.5rem; align-content:start; grid-auto-rows:min-content; box-shadow:none; border:0; background:transparent; padding:2.25rem 1rem; min-height:calc(100dvh - 80px)}
  .navigation>a {flex-direction:row; justify-content:flex-start; gap:.8rem; font-size:.9rem; padding:.8rem 1rem; min-height:var(--tap)}
  .nav-caption {display:block; font-size:.6rem; font-weight:700; letter-spacing:.11em; color:var(--ink-500); margin:0 1rem 1rem}
  .nav-note {display:block; color:var(--ink-500); font-size:.75rem; line-height:1.7; padding:2rem 1rem}
  .content {width:100%; padding:2.5rem 3rem 3rem; margin:0 auto}
  .app-shell:has(.navigation[hidden]) {display:block}
  .page-heading {padding-bottom:1rem}
  .auth {margin:2rem auto}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important} button:active {transform:none}}
/* Long synthetic filenames, profile labels and server text still reflow at 320px. */
main {overflow-wrap:anywhere}
button,.button {min-width:0; max-width:100%; overflow-wrap:anywhere}
@media (min-width:900px){.brand-logo{height:36px}}

.demo-banner { position: sticky; top: 0; z-index: 5; margin-top: 0; }