*{box-sizing:border-box}
@view-transition{navigation:auto}
:root{
  --text:#1d1d1f;--muted:#6e6e73;--brand:#0071e3;--brand-press:#0062c3;--on-brand:#fff;
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.78);--edge:rgba(255,255,255,.7);--hair:rgba(0,0,0,.08);
  --field:rgba(255,255,255,.7);--shadow:0 1px 1px rgba(0,0,0,.04),0 12px 40px -12px rgba(16,24,64,.18);
  --warn:#9a5b00;--warnbg:rgba(255,204,0,.16);--ok:#1d7d3a;
  --b1:#c9dcff;--b2:#ffd9ec;--b3:#d7f5ea;--bg:#f5f5f7;
  --ease:cubic-bezier(.22,1,.36,1)
}
@media (prefers-color-scheme:dark){:root{
  --text:#f5f5f7;--muted:#a1a1a6;--brand:#2997ff;--brand-press:#0a84ff;--on-brand:#fff;
  --glass:rgba(30,30,34,.55);--glass-strong:rgba(36,36,40,.72);--edge:rgba(255,255,255,.08);--hair:rgba(255,255,255,.1);
  --field:rgba(255,255,255,.06);--shadow:0 1px 1px rgba(0,0,0,.3),0 20px 50px -20px rgba(0,0,0,.6);
  --warn:#ffd60a;--warnbg:rgba(255,214,10,.12);--ok:#30d158;
  --b1:#1e3a8a;--b2:#5b1d5e;--b3:#0f4d40;--bg:#000
}}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);
  font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60vmax 60vmax at 10% -10%,var(--b1),transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 10%,var(--b2),transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 120%,var(--b3),transparent 60%),var(--bg);
  background-attachment:fixed}
header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 20px;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);view-transition-name:bar}
header .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#0071e3,#7a5cff);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
header b{font-size:15px;font-weight:600}header span{font-size:13px;color:var(--muted);margin-left:auto}
main{max-width:600px;margin:0 auto;padding:28px 16px 8px;view-transition-name:page}
.card{position:relative;background:var(--glass);border:1px solid var(--edge);border-radius:22px;padding:22px;margin:0 0 16px;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--shadow);
  animation:rise .7s var(--ease) both}
.card:nth-of-type(2){animation-delay:.06s}.card:nth-of-type(3){animation-delay:.12s}.card:nth-of-type(4){animation-delay:.18s}
.card:nth-of-type(n+5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
h1{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0 0 8px}
h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.code{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);padding:3px 9px;border-radius:999px;margin:0 0 8px}
.muted{color:var(--muted);font-size:15px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:18px 0 8px}
input{width:100%;font:inherit;padding:14px 16px;border:1px solid var(--hair);border-radius:14px;background:var(--field);color:var(--text);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent);background:var(--glass-strong)}
input#code{font-size:28px;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;padding-left:calc(16px + .5em)}
button{font:inherit;font-weight:600;padding:14px 18px;border:0;border-radius:14px;background:var(--brand);color:var(--on-brand);width:100%;margin-top:18px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 70%,transparent)}
button:hover{background:var(--brand-press)}button:active{transform:scale(.97)}
button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
button.link{background:var(--field);color:var(--brand);width:auto;padding:8px 14px;margin:0;font-size:14px;border-radius:999px;box-shadow:none;border:1px solid var(--hair)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.msg{padding:14px 16px;border-radius:14px;background:var(--warnbg);color:var(--warn);margin:14px 0 0;font-size:15px}
.ok{background:var(--field);color:var(--text);border:1px solid var(--hair)}
.flush{margin:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.who{display:flex;align-items:center;gap:14px;margin-top:10px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#34c759,#0071e3)}
.total-mark{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px}
.total-mark b{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.total-mark span{color:var(--muted)}
progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--hair);display:block}
progress::-webkit-progress-bar{background:var(--hair);border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#0071e3,#7a5cff);border-radius:999px;animation:grow 1.1s var(--ease) both}
progress::-moz-progress-bar{background:linear-gradient(90deg,#0071e3,#7a5cff);border-radius:999px}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
table{width:100%;border-collapse:collapse;margin-top:16px}
td{padding:12px 0;border-top:1px solid var(--hair);font-size:15px}td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
tr.total td{font-weight:700}
footer{text-align:center;color:var(--muted);font-size:12px;padding:12px 16px 32px}
::view-transition-old(page){animation:out .25s var(--ease) both}
::view-transition-new(page){animation:in .45s var(--ease) both}
@keyframes out{to{opacity:0;transform:translateY(-8px);filter:blur(6px)}}
@keyframes in{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,header{background:var(--glass-strong)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.card,header{background:var(--glass-strong);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (max-width:420px){h1{font-size:28px}.card{padding:18px;border-radius:20px}}