/* Porcelain ground, ink type, one signal red that takes over the screen only at the cue. */
:root{color-scheme:light;--ground:#eceef1;--ink:#16202e;--slate:#66707d;--line:#d3d7dd;--face:#ffffff;--back:#1f3b5c;--signal:#e5322d;--ok:#1f3b5c}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font:16px/1.75 "Zen Kaku Gothic New",system-ui,sans-serif;min-height:100svh}
main{max-width:520px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:10px;color:inherit;text-decoration:none}
.brand b{font:800 26px/1 "Big Shoulders Display",sans-serif;letter-spacing:.02em}
.brand span{font-size:13px;color:var(--slate)}
.mode{font-size:12px;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.arena{flex:1;display:flex;flex-direction:column;padding-top:22px}
.phase{margin:0;font-size:13px;font-weight:700;color:var(--slate)}
h1{font-size:clamp(34px,10vw,48px);line-height:1.25;font-weight:900;letter-spacing:-.02em;margin:6px 0 10px}
.instruction{margin:0;color:var(--slate);font-size:15px;min-height:52px;max-width:30em}

/* The phone card: the memorable element. Its rotation follows the sensor. */
.stage{position:relative;height:230px;display:grid;place-items:center;perspective:900px;margin:14px 0 4px}
.shadow{position:absolute;bottom:14px;width:140px;height:18px;border-radius:50%;background:radial-gradient(closest-side,#16202e33,transparent)}
.card{position:relative;width:112px;height:196px;transform-style:preserve-3d;transition:transform .12s linear}
.face{position:absolute;inset:0;border-radius:22px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face span{font-size:46px;font-weight:900}
.front{background:var(--face);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 24px #16202e1f}
.front .notch{position:absolute;top:10px;width:34px;height:6px;border-radius:6px;background:var(--ink)}
.back{background:var(--back);color:#fff;transform:rotateX(180deg);box-shadow:0 10px 24px #16202e33}
.back .lens{position:absolute;top:14px;left:14px;width:22px;height:22px;border-radius:50%;background:#0f2238;box-shadow:inset 0 0 0 3px #3a587c}

.readout{display:flex;align-items:baseline;justify-content:center;gap:8px}
#time{font:800 clamp(72px,24vw,104px)/1 "Big Shoulders Display",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.unit{font-size:16px;font-weight:700;color:var(--slate)}
.status{text-align:center;font-size:14px;color:var(--slate);min-height:24px;margin:8px 0 18px}
.actions{display:grid;gap:8px}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
.primary{width:100%;border:0;border-radius:16px;background:var(--ink);color:#fff;padding:18px;font-size:18px;font-weight:700;letter-spacing:.06em}
.primary:active{transform:scale(.985)}
.secondary{width:100%;border:1.5px solid var(--ink);border-radius:16px;background:transparent;color:var(--ink);padding:15px;font-weight:700}
.quiet{background:none;border:0;color:var(--slate);padding:10px;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0;margin:22px 0 0}
.steps li{counter-increment:s;font-size:12px;color:var(--slate);line-height:1.55;border-top:2px solid var(--line);padding-top:10px}
.steps li::before{content:counter(s);display:block;font:800 22px/1 "Big Shoulders Display",sans-serif;color:var(--ink);margin-bottom:4px}
.steps b{display:block;color:var(--ink);font-size:14px}
footer{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--slate);display:flex;flex-direction:column;gap:10px}
summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:32px;display:flex;align-items:center}
details p{font-size:13px;line-height:1.8}

/* States */
body[data-state="prepare"] .steps li:nth-child(1),body[data-state="waiting"] .steps li:nth-child(2),body[data-state="go"] .steps li:nth-child(3){border-color:var(--ink)}
body[data-state="waiting"] #headline{color:var(--ink)}
body[data-state="go"]{--ground:var(--signal);--ink:#fff;--slate:#ffe1df;--line:#ffffff55;background:var(--signal);color:#fff}
body[data-state="go"] .front{box-shadow:inset 0 0 0 1.5px #16202e,0 10px 24px #0003}
body[data-state="go"] .front,body[data-state="go"] .front span{color:#16202e}
body[data-state="go"] .front .notch{background:#16202e}
body[data-state="go"] .secondary{border-color:#fff;color:#fff}
body[data-state="result"] #time{color:var(--back)}
body[data-state="error"] #headline,body[data-state="error"] .phase{color:var(--signal)}
[hidden]{display:none!important}
@media(min-width:700px){.stage{height:260px}.card{width:128px;height:224px}}
@media(max-height:700px){.stage{height:180px}.card{width:92px;height:160px}.face span{font-size:38px}.steps{display:none}}
@media(prefers-reduced-motion:reduce){.card,body{transition:none}}
body:not([data-state="result"]) #time{opacity:.22}
/* Links between the four apps: a bar fixed to the bottom of every screen */
:root{--series-h:58px}body{padding-bottom:calc(var(--series-h) + env(safe-area-inset-bottom))!important}.series{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));margin:0;background:#fffffff0;border-top:1px solid #d3d7dd;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:700 13px/1 "Zen Kaku Gothic New",system-ui,sans-serif}.series span{display:none}.series a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;color:#16202e;text-decoration:none;letter-spacing:.04em}.series a[aria-current]{background:#16202e;color:#fff;pointer-events:none}.series a:focus-visible{outline:3px solid #e5322d;outline-offset:2px}@media(min-width:700px){.series{left:50%;right:auto;transform:translateX(-50%);width:min(520px,100%);border:1px solid #d3d7dd;border-bottom:0;border-radius:16px 16px 0 0}}