:root{
  --ink:#202734;--slate:#36415A;--sage:#B7D894;--mint:#E0F8C7;--white:#FFFFFF;
  --bg:var(--mint);--fg:var(--ink);--card:var(--white);--primary:var(--ink);--on-primary:var(--mint);
  --muted:rgba(32,39,52,.6);--border:rgba(32,39,52,.15);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --read:"Charter","Iowan Old Style",Georgia,serif;
  --shadow:0 20px 50px -20px rgba(32,39,52,.45);
}
body.dark{--bg:var(--ink);--fg:var(--white);--card:var(--slate);--primary:var(--sage);--on-primary:var(--ink);--muted:rgba(255,255,255,.6);--border:rgba(255,255,255,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);transition:background .3s}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}
.screen{min-height:100vh}
.center{display:grid;place-items:center;padding:40px 20px}
.wrap{width:100%;max-width:380px;text-align:center}
.container{max-width:680px;margin:0 auto;padding:40px 20px 80px}
.card{background:var(--card);border-radius:24px}
.player{display:inline-flex;align-items:center;gap:12px;background:var(--card);border-radius:999px;padding:8px 16px 8px 8px;box-shadow:var(--shadow);margin-bottom:32px}
.disc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-size:13px}
.disc.spin{animation:spin 6s linear infinite}
.ptxt{text-align:left;font-size:14px}.ptxt b,.ptxt small{display:block}.ptxt small{color:var(--muted)}
.icon{width:96px;height:96px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow);display:block;margin:0 auto}
.icon.missing,.cover.missing{background:var(--sage)}
.brand{margin:20px 0 4px;font-size:36px;font-weight:800;letter-spacing:.2em}
.sub{margin:0;font-size:12px;letter-spacing:.25em;color:var(--muted)}
.form{margin-top:32px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
input{font:inherit;width:100%;padding:13px 16px;border-radius:12px;border:0;background:var(--bg);color:var(--fg);outline:none;font-size:16px}
input:focus{box-shadow:0 0 0 2px var(--sage)}
.err{margin:0;font-size:14px;color:var(--muted);min-height:0}
.btn{width:100%;padding:13px;border-radius:12px;font-weight:700;letter-spacing:.1em;transition:transform .15s}
.btn:active{transform:scale(.97)}
.primary{background:var(--primary);color:var(--on-primary)}
.outline{border:1px solid var(--border)}
.muted{color:var(--muted)}.small{font-size:14px}
.title{font-size:40px;margin:4px 0;letter-spacing:-.02em}
header p{margin:0}
#items{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:12px}
.item{width:100%;text-align:left;display:flex;gap:16px;align-items:center;padding:16px;background:var(--card);border-radius:18px;transition:transform .15s,box-shadow .15s}
.item:hover:not(.locked){box-shadow:0 0 0 2px var(--primary)}
.item:active{transform:scale(.98)}
.item.locked{opacity:.4}
.num{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--primary);font-weight:700;font-size:18px}
.meta{min-width:0}.meta b{display:block;line-height:1.3}
.meta span{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar{position:sticky;top:0;z-index:5;padding:12px 16px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.link{color:var(--primary);font-weight:600;padding:8px 0}
#article{padding-top:20px}
.cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;display:block}
.atitle{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:32px 0 8px;letter-spacing:-.02em}
.body{margin-top:32px;font-family:var(--read);font-size:clamp(18px,2.4vw,21px);line-height:1.7}
.body p{margin:0 0 24px}
.ask{margin-top:56px;padding:24px;text-align:center}
.ask h2{margin:0;font-size:24px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal{width:100%;max-width:380px;padding:24px;text-align:center;display:flex;flex-direction:column;gap:8px}
.popText{font-size:18px;font-weight:600;line-height:1.4;margin:0 0 16px}
.rise{animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}