@font-face{font-family:"Anton";src:url(fonts/Anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Marker";src:url(fonts/PermanentMarker.woff2) format("woff2");font-display:swap}
:root{
  --ground:#09090B;--card:#131317;--card2:#1B1B21;--line:#2A2A33;
  --text:#FFFFFF;--muted:#A6A6B3;--dim:#6E6E7C;
  --orange:#F56600;--orange2:#FF7A1A;--green:#1FB35A;--mark:#009344;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --script:"Marker","Chalkboard SE","Comic Sans MS",cursive;
  --body:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ground);color:var(--text);font:400 16px/1.45 var(--body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;transition:background .35s ease}
body.face-move{background:var(--orange)}
.wrap{max-width:460px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}
.hidden{display:none!important}

/* the lockup, as on the crew card */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px}
.lockup{display:flex;align-items:center;gap:10px;min-width:0}
.lockup img{width:34px;height:34px;flex:none}
.lockup b{display:block;font:400 15px/1 var(--display);letter-spacing:.02em;white-space:nowrap}
.lockup b em{font-style:normal;color:var(--green)}
.lockup b sup{font-size:8px;vertical-align:top;margin-left:1px}
.lockup span{display:block;font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap}
.lockup span em{font-style:normal;color:var(--orange);font-weight:700}
.tag{font:400 13px/1 var(--display);letter-spacing:.14em;border:1px solid var(--line);border-radius:999px;padding:7px 11px 6px;color:var(--muted);white-space:nowrap}
body.face-move .lockup span,body.face-move .lockup span em,body.face-move .tag{color:#1a0b00}
body.face-move .lockup b em{color:#0b3d1c}
body.face-move .tag{border-color:rgba(0,0,0,.25)}

.face{display:flex;flex-direction:column;flex:1;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.kicker{font:400 14px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 10px}
.title{margin:0;line-height:.86}
.title .mv{display:block;font:400 clamp(88px,30vw,132px)/.86 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.title .script{display:block;width:max-content;font:400 clamp(70px,22vw,100px)/.9 var(--script);color:var(--orange);transform:rotate(-6deg);margin:-30px 0 0 38%;text-shadow:0 4px 0 var(--ground),4px 0 0 var(--ground),-4px 0 0 var(--ground)}
.title .script i{font-style:normal;color:var(--green)}
.triad{display:flex;gap:10px;align-items:center;font:400 13px/1 var(--display);letter-spacing:.34em;color:var(--muted);margin:22px 0 22px;white-space:nowrap}
.triad i{font-style:normal;color:var(--green)}

.clockrow{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.clock{font:400 64px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.clock-l{font-size:13px;color:var(--muted);margin:0 0 18px}

.movecard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px 16px 22px;margin:4px 0 16px;overflow:hidden}
.movecard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.movecard span{display:block;font:400 12px/1 var(--display);letter-spacing:.22em;color:var(--muted);margin-bottom:8px}
.movecard strong{display:block;font:400 30px/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em}
.movecard small{display:block;font-size:14px;color:var(--muted);margin-top:8px}

.line{font-size:14px;color:var(--muted);margin:0 0 12px;font-variant-numeric:tabular-nums}
.line b{color:var(--text);font-weight:700}
.spacer{flex:1;min-height:10px}

button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cta{position:relative;display:block;width:100%;border:0;border-radius:18px;padding:20px 12px 18px;background:var(--orange);color:#fff;font:400 30px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 30px rgba(245,102,0,.35);transition:transform .08s ease}
.cta:active{transform:scale(.985)}
.cta.pulse::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 0 rgba(245,102,0,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 16px rgba(245,102,0,0)}100%{box-shadow:0 0 0 0 rgba(245,102,0,0)}}
.cta.ghost{background:transparent;border:1.5px solid var(--line);box-shadow:none;font-size:20px;padding:16px 12px 14px;color:var(--text)}
.cta.black{background:#09090B;color:#fff;font-size:52px;padding:30px 12px 26px;border-radius:24px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.cta.black.done{background:#fff;color:#09090B}
.cta[disabled]{opacity:.55}
.fine{font-size:12.5px;color:var(--dim);line-height:1.5;margin:14px 0 0}
.fine a{color:inherit}

.giant{font:400 clamp(92px,31vw,140px)/.9 var(--display);letter-spacing:-.005em;font-variant-numeric:tabular-nums;margin:2px 0 6px}
.sub{font-size:17px;color:var(--muted);margin:0 0 20px}
.sub b{color:var(--text)}

/* the Move: the phone becomes an orange card in the stands */
.face-move .kicker{color:#1a0b00;font-size:16px}
.movehead{font:400 clamp(56px,18vw,84px)/.92 var(--display);text-transform:uppercase;color:#09090B;margin:0 0 6px;letter-spacing:.005em}
.ring{--pct:0%;width:min(62vw,230px);aspect-ratio:1;border-radius:50%;margin:16px auto 8px;display:grid;place-items:center;background:conic-gradient(#09090B 0 var(--pct),rgba(0,0,0,.14) var(--pct) 100%)}
.ring div{width:84%;aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;font:400 clamp(58px,19vw,84px)/1 var(--display);color:#09090B;font-variant-numeric:tabular-nums}
.ring-note{text-align:center;font:400 14px/1 var(--display);letter-spacing:.24em;color:#1a0b00;margin:4px 0 16px}
.face-move .fine{color:#2a1300;text-align:center}

/* after */
.stamp{font:400 60px/1 var(--script);color:var(--green);transform:rotate(-5deg);transform-origin:left bottom;margin:0 0 22px 2px}
.stamp b{color:var(--orange);font-weight:400}
.meter{height:12px;border-radius:999px;background:var(--card2);overflow:hidden;margin:2px 0 8px}
.meter div{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange2));border-radius:999px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.meter-l{font-size:13px;color:var(--muted);margin:0 0 18px;font-variant-numeric:tabular-nums}
.meter-l b{color:var(--text)}
.rows{display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.rows a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;color:inherit;text-decoration:none}
.rows a span:first-child{font:400 19px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.rows a small{display:block;font:400 13px/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--muted);margin-top:4px}
.rows a .chev{font:400 24px/1 var(--display);color:var(--orange)}
.rows a.give{background:var(--orange);border-color:var(--orange)}
.rows a.give .chev{color:#fff}
.rows a.give small{color:rgba(255,255,255,.9)}
.field{display:flex;gap:8px;margin-top:16px}
.field input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;font:inherit;font-size:16px;color:var(--text)}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:2px solid var(--orange);outline-offset:1px}
.field button{border:0;border-radius:14px;padding:0 18px;background:#fff;color:#09090B;font:400 18px/1 var(--display);letter-spacing:.08em}

/* the crew card, as on the lanyard */
.crew{margin-top:22px;background:#000;border:1px solid var(--line);border-radius:22px;padding:18px 18px 16px;position:relative;overflow:hidden}
.crew .crewtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.crew .crewmark{font:400 34px/.9 var(--script);color:#fff;transform:rotate(-4deg)}
.crew .crewmark i{font-style:normal;color:var(--green)}
.crew .code{font:400 13px/1 var(--display);letter-spacing:.2em;color:var(--orange);border:1px solid #3a2a1c;border-radius:999px;padding:7px 10px 6px}
.crew .n{font:400 34px/1 var(--display);margin:16px 0 4px;font-variant-numeric:tabular-nums}
.crew .n i{font-style:normal;color:var(--dim)}
.crew .rank{font-size:14px;color:var(--muted);margin:0 0 14px}
.crew .section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px}
.crew .section span{display:block;font:400 11px/1 var(--display);letter-spacing:.22em;color:var(--muted);margin-bottom:6px}
.crew .section strong{font:400 20px/1.1 var(--display);text-transform:uppercase}
.crew .section small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.crew ol{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.crew li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.crew li b{color:var(--text);font-weight:600}
.crew li:first-child b::after{content:" ★";color:var(--orange)}

details{margin-top:24px;border-top:1px solid var(--line);padding-top:14px}
summary{font:400 14px/1 var(--display);letter-spacing:.2em;color:var(--muted);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:" +";color:var(--orange)}
details[open] summary::after{content:" −"}
details ol{padding-left:18px;font-size:13.5px;color:var(--muted);margin:12px 0 0}
details li{margin:6px 0}
details li b{color:var(--text)}
body.face-move details{border-color:rgba(0,0,0,.2)}
body.face-move summary,body.face-move details ol,body.face-move details li b{color:#1a0b00}

.foot{display:flex;justify-content:center;gap:14px;margin-top:22px;font:400 11px/1 var(--display);letter-spacing:.26em;color:var(--dim)}
.foot i{font-style:normal;color:var(--green)}
body.face-move .foot{color:#2a1300}
body.face-move .foot i{color:#09090B}

.toast{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));background:#fff;color:#09090B;border-radius:14px;padding:13px 14px;font-size:14px;font-weight:600;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* the working pages: control, report, join */
.page .wrap{max-width:640px}
.page h1.hd{font:400 clamp(44px,12vw,72px)/.92 var(--display);text-transform:uppercase;margin:0 0 10px}
.page h1.hd .script{font:400 .7em/1 var(--script);color:var(--orange);text-transform:none;display:inline-block;transform:rotate(-4deg);margin-left:.15em}
.page .state{font-size:14px;color:var(--muted);margin:0 0 18px;font-variant-numeric:tabular-nums}
.page .state b{color:var(--text);font-weight:700}
.page input[type=datetime-local]{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;color:var(--text);color-scheme:dark;margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.grid2 .cta{font-size:22px;padding:18px 10px 16px;box-shadow:none}
.grid2 .cta.ghost{font-size:20px}
.grid2 .cta.go{background:var(--green)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.stat3 div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px}
.stat3 b{display:block;font:400 40px/1 var(--display);font-variant-numeric:tabular-nums}
.stat3 span{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35}
.stat3 div.cov{border-color:var(--orange)}
.table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.table td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.table td:last-child{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.raised{font:400 clamp(64px,20vw,110px)/.9 var(--display);color:var(--orange);font-variant-numeric:tabular-nums;margin:6px 0 2px}
.codebig{font:400 clamp(72px,24vw,120px)/.9 var(--display);letter-spacing:.02em;margin:6px 0 10px}
@media (max-width:520px){.stat3{grid-template-columns:1fr}}