@font-face{font-family:Unbounded;src:url('/fonts/Unbounded.ttf') format('truetype');font-display:swap;font-weight:200 900}
@font-face{font-family:Montserrat;src:url('/fonts/Montserrat.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{color-scheme:dark;--accent:#b2200f;--bg:#111315;--panel:#202327;--line:#353a42;--text:#f7f5f0;--muted:#adb2bb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.shell{max-width:520px;margin:auto;padding:12px 18px 30px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px}header img{width:130px;height:65px;object-fit:contain}header span{font-size:10px;color:var(--muted);text-align:right;line-height:1.5}
h1,h2{font-family:Unbounded,system-ui,sans-serif}h1{font-size:23px;line-height:1.35;overflow-wrap:anywhere;margin:16px 0 12px}h2{font-size:15px;line-height:1.5;margin:0 0 7px}h3{font-size:13px;margin:16px 0 6px}p{font-size:12px;line-height:1.65;margin:8px 0}.muted,.eyebrow{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1px;margin-top:26px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:165px;overflow:hidden}.hero>div:first-child{min-width:0;flex:1}.hero h1{font-size:23px}.hero p{font-size:11px;color:var(--muted)}.peek{height:165px;width:165px;position:relative;overflow:hidden;flex-shrink:0;pointer-events:none}.peek img{position:absolute;width:220px;height:220px;right:-50px;top:-24px;object-fit:contain;animation:peek 7s ease-in-out both}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.stats div{background:var(--panel);padding:13px 9px;border-radius:12px;min-width:0}.stats b{display:block;font-size:25px;line-height:1.2;font-family:Unbounded,system-ui,sans-serif;overflow-wrap:anywhere}.stats span{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-top:7px}.work-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.progress-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;line-height:1.5;color:var(--muted);margin-top:16px}progress{display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;margin:8px 0 18px;appearance:none;background:#34383f}progress::-webkit-progress-bar{background:#34383f}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}
.section{margin-top:24px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.action,button,a.primary{font-family:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 10px;text-align:left;font-size:12px;line-height:1.45;cursor:pointer;text-decoration:none}.action strong{display:block;font-size:12px}.action span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.action.primary,a.primary{background:var(--accent);border-color:var(--accent);color:#fff}.action.primary span{color:#f2deda}button:focus-visible,a:focus-visible{outline:2px solid var(--text);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}a.primary{display:block;margin-top:16px;text-align:center}
.switch{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.switch button{font-size:10px;padding:10px}.message,.upcoming{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px;margin-top:16px;font-size:12px;line-height:1.6}.upcoming h3{margin:0 0 6px}.upcoming p{font-size:11px;color:var(--muted)}.upcoming button{width:100%;margin-top:8px;background:var(--accent);border-color:var(--accent)}
summary{font-size:12px;cursor:pointer}.rules{white-space:pre-line;overflow-wrap:anywhere;color:var(--muted);font-size:11px}.motto{border-top:1px solid var(--line);padding-top:16px;margin-top:24px;font-size:11px;color:#c0c4cb}.updated{font-size:9px;color:#959ba5;margin-top:12px}[hidden]{display:none!important}.still .peek img{animation:none;transform:rotate(-6deg)}
@keyframes peek{0%,7%,100%{transform:translateX(112%) rotate(10deg)}27%,65%{transform:translateX(0) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.peek img{animation:none;transform:rotate(-6deg)}}
@media(max-width:350px){.shell{padding-left:13px;padding-right:13px}.peek{width:133px}.peek img{right:-64px}.hero h1{font-size:20px}.stats b{font-size:22px}.action{padding:11px 8px}}