@font-face{font-family:"Instrument Serif";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/instrument-serif-400.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/public-sans-400.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/public-sans-700.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/sora-400.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/sora-600.woff2) format("woff2")}
:root{--ink:#0d1b2f;--muted:#5d6b80;--accent:#0a64d8;--accent-dark:#0850ad;--line:#c4d9f0;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#e9f2fc;color:var(--ink)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:"Public Sans",sans-serif;font-size:1.0625rem;line-height:1.6;background:linear-gradient(125deg,#d8e8fa,#eef5fd 35%,#d6e6f9 70%,#eaf3fc);background-size:300% 300%;animation:drift 45s ease-in-out infinite}
@keyframes drift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
a{color:var(--accent);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem clamp(1.25rem,5vw,4.5rem)}
.brand{font-family:"Sora",sans-serif;font-size:.8125rem;color:var(--muted)}
.brand b{color:var(--ink);font-weight:600}
.brand i{font-style:normal;font-weight:600;color:var(--accent)}
.session{display:flex;gap:1rem;align-items:center;margin:0;font-size:.9rem}
.linkish{font:inherit;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;color:var(--ink);cursor:pointer}
main{flex:1;width:100%;max-width:60rem;margin:0 auto;padding:clamp(1rem,5vh,3rem) clamp(1.25rem,5vw,2rem) 9rem}
.hero{text-align:center;padding:clamp(1rem,8vh,5rem) 0 2rem;animation:rise .9s ease both}
h1{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(3rem,8vw,6rem);line-height:.98;letter-spacing:-.02em;margin:0 0 1.25rem;text-wrap:balance}
.lead{color:var(--muted);font-size:1.2rem;margin:0 auto 2rem;max-width:30rem}
.search{display:flex;gap:.75rem;max-width:36rem;margin:2rem auto 0}
.search input,.field input{flex:1;width:100%;font:inherit;padding:.95rem 1.5rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--ink)}
.login{display:grid;gap:1rem;max-width:22rem;margin:0 auto;text-align:left}
.field span{display:block;font-size:.85rem;color:var(--muted);margin:0 0 .25rem 1rem}
.button{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:.95rem 2.1rem;font:inherit;font-weight:700;cursor:pointer;transition:background .15s}
.button:hover{background:var(--accent-dark)}
.button[disabled]{opacity:.6;cursor:wait}
.button.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.history{margin-top:2rem}
.history h2,.band h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:1.9rem;line-height:1.1;margin:0 0 .75rem}
.history ul{list-style:none;margin:0;padding:1rem 0;max-height:15rem;overflow:auto;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.history button{display:grid;grid-template-columns:1fr auto auto;gap:1.25rem;width:100%;text-align:left;font:inherit;color:var(--ink);background:transparent;border:0;border-radius:999px;padding:.55rem 1.25rem;cursor:pointer}
.history button:hover{background:rgba(255,255,255,.6)}
.history em{font-style:normal;color:var(--accent);font-weight:700}
.history time,.fine{color:var(--muted);font-size:.9rem}
#report{margin-top:2rem}
.who{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1rem 1.5rem;animation:rise .8s ease both}
.who h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(2.4rem,6vw,3.8rem);line-height:1;margin:0}
.who h2 a{color:var(--accent);text-decoration:none}
.who h2 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.nick{margin:.25rem 0 0;color:var(--muted);font-size:1rem}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%}
.track{fill:none;stroke:#cadff4;stroke-width:9}
.fill{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1)}
.fill.warn{stroke:#d98a4e}
.fill.bad{stroke:#d45d5d}
.ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:"Instrument Serif",serif;font-size:2.6rem;line-height:1}
.ring small{display:block;font-family:"Public Sans",sans-serif;font-size:.7rem;color:var(--muted)}
.band{position:relative;padding:2.75rem clamp(1rem,4vw,2.5rem);background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55) 22%,rgba(255,255,255,.55) 78%,rgba(255,255,255,0));animation:rise .9s ease both}
.band+.band{margin-top:-1.25rem}
.band:nth-of-type(2){animation-delay:.1s}.band:nth-of-type(3){animation-delay:.2s}.band:nth-of-type(4){animation-delay:.3s}.band:nth-of-type(5){animation-delay:.4s}.band:nth-of-type(6){animation-delay:.5s}.band:nth-of-type(7){animation-delay:.6s}.band:nth-of-type(8){animation-delay:.7s}
.stat{margin:0 0 1rem;color:var(--muted)}
.stat.ok b{color:var(--accent)}
.stat.low b{color:#c0583e}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:#c4d9f0;stroke-width:1}
.worth{margin:0 0 .25rem;font-family:"Instrument Serif",serif;font-size:3.2rem;line-height:1}
.worth b{font-weight:400}
.chart .area{fill:rgba(10,100,216,.14)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .tick{fill:var(--muted);font-size:12px;font-family:"Public Sans",sans-serif}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.grp{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(5rem,1fr) minmax(0,.8fr);gap:1rem;align-items:center}
.grp small{grid-column:2/-1;color:var(--muted);margin-top:-.6rem}
.item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:1rem;align-items:center}
.thumb{width:44px;height:44px;border-radius:12px;background:#cadff4;object-fit:cover;display:block}
.avatar{width:84px;height:84px;border-radius:50%;background:#cadff4;object-fit:cover;flex:none;display:block}
.id{display:flex;align-items:center;gap:1.25rem;min-width:0}
.fact{display:flex;justify-content:space-between;gap:1.5rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.fact span{color:var(--muted)}
.fact b{text-align:right;overflow-wrap:anywhere}
.showall{margin-top:1.25rem;padding:.6rem 1.5rem}
dialog.wide{max-width:38rem;text-align:left}
dialog.wide h3{text-align:center}
dialog.wide .rows{margin-bottom:1.25rem;min-height:12rem}
.pager{align-items:center;margin-bottom:1rem;color:var(--muted);font-size:.9rem}
.pager .button{padding:.55rem 1.25rem}
.bar{display:block;height:8px;border-radius:99px;background:#cadff4;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent);animation:grow 1.2s ease both}
.rank{color:var(--muted);font-size:.9rem;text-align:right}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.25rem 2rem;margin:0}
.facts dt{color:var(--muted);font-size:.85rem}
.facts dd{margin:0;font-weight:700}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.notes b{color:var(--accent)}
dialog{border:0;border-radius:1.5rem;padding:2rem 2.25rem;max-width:26rem;width:calc(100% - 2rem);background:#f7fbff;color:var(--ink);box-shadow:0 30px 80px rgba(13,27,47,.2);text-align:center}
dialog::backdrop{background:rgba(13,27,47,.28)}
dialog h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:2.4rem;margin:0 0 .5rem}
dialog p{margin:0 0 1.5rem;color:var(--muted)}
.actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.actions form{margin:0}
.loading{height:3px;margin:1.5rem auto 0;max-width:36rem;border-radius:99px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:sweep 1.1s linear infinite}
@keyframes sweep{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}}
@media (max-width:640px){.who{flex-direction:column-reverse;align-items:flex-start}.grp{grid-template-columns:44px 1fr}.grp .bar,.grp .rank{grid-column:2}.rank{text-align:left}.search{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.prose{width:100%;max-width:40rem;text-align:left}
.prose h1{font-size:clamp(2.6rem,6vw,4.5rem)}
.prose h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:1.9rem;line-height:1.1;margin:2.25rem 0 .5rem}
.prose p{margin:0}