:root { color-scheme: dark; --bg:#30323D; --bg-muted:#4D5061; --accent:#5C80BC; --text:#FEFFFE; --placeholder: #CDD1C4; --muted:#CDD1C4; --line:#49373A; --error:#ff9bb2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app { width:min(100% - 40px, 560px); margin:0 auto; padding:clamp(42px,10vh,92px) 0 42px; }
h1 { font:normal clamp(2rem,8vw,3.35rem)/1.13 "Arbutus Slab", Georgia, serif; letter-spacing:-.035em; margin:0 0 42px; }
.label { font-size:.78rem; font-weight:650; letter-spacing:.09em; text-transform:none; color:var(--muted); }
textarea,.option-input { width:100%; color:var(--text); background:var(--bg-muted); border:1px solid var(--line); border-radius:12px; font:inherit; font-size:1rem; padding:15px 16px; outline:none; transition:border-color .15s; }
textarea { display:block; resize:vertical; min-height:118px; margin:10px 0 28px; line-height:1.5; }
textarea:focus,.option-input:focus { border-color:var(--accent); }
textarea::placeholder,.option-input::placeholder { color:var(--placeholder); }
.options-heading { display:flex; justify-content:space-between; align-items:center; }
.count { font-size:.8rem; color:var(--muted); }
.options { display:grid; gap:10px; margin-top:10px; }
.option-row { display:flex; gap:9px; align-items:center; }
.option-index { width:27px; flex:none; color:var(--muted); font:1rem "Arbutus Slab", Georgia,serif; }
.option-input { min-width:0; height:52px; }
.remove { border:0; background:transparent; color:var(--muted); font-size:1.35rem; width:40px; height:44px; cursor:pointer; }
.remove:hover { color:var(--accent); }
button { font:inherit; cursor:pointer; }
.add { display:flex; gap:8px; align-items:center; padding:12px 0; border:0; background:none; color:var(--accent); font-weight:650; }
.add span { font-size:1.3rem; line-height:1; }
.submit { display:flex; justify-content:space-between; align-items:center; width:100%; padding:17px 19px; margin-top:20px; color:var(--text); background:var(--accent); border:0; border-radius:12px; font-weight:750; }
.submit:hover { filter:brightness(1.08); }
.submit:disabled { opacity:.65; cursor:wait; }
.error { color:var(--error); margin:18px 0 0; line-height:1.5; }
.result { border-top:1px solid var(--line); margin-top:35px; padding-top:25px; }
.result-title { color:var(--muted); font-size:.78rem; font-weight:650; letter-spacing:.09em; text-transform:none; }
.winner { font:normal 1.8rem/1.25 "Arbutus Slab", Georgia,serif; margin:9px 0 7px; }
.confidence { color:var(--muted); font-size:.9rem; }
.probabilities { margin-top:24px; display:grid; gap:14px; }
.probability-head { display:flex; justify-content:space-between; gap:12px; font-size:.88rem; margin-bottom:6px; }
.probability-head span:last-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.track { height:5px; border-radius:9px; background:var(--bg-muted); overflow:hidden; }
.bar { height:100%; background:var(--accent); border-radius:9px; }
.note { margin:27px 0 0; color:var(--placeholder); font-size:.78rem; }
@media (min-width:700px) { .app { padding-top:10vh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }