:root{--bg:#FBF8F3;--ink:#1d2b2a;--muted:#55635f;--teal:#0F5E5C;--teal2:#0b4442;--coral:#F2786B;--sun:#FFD25A;--card:#fff;--line:#e6dfd3;--soft:#F1ECE2;}
html{font-size:var(--fs,18px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
 background-image:radial-gradient(circle at 10% 0%,rgba(242,120,107,.12),transparent 40%),radial-gradient(circle at 95% 20%,rgba(15,94,92,.10),transparent 40%),radial-gradient(rgba(15,94,92,.07) 1px,transparent 1px);
 background-size:auto,auto,22px 22px;min-height:100vh}
.display{font-family:'Fraunces',Georgia,serif;letter-spacing:-.02em}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 0 var(--line)}
.btn{min-height:44px;padding:.55rem 1.1rem;border-radius:12px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--teal);color:#fff}.btn-p:hover{background:var(--teal2)}
.btn-c{background:var(--coral);color:#2a0f0b}
.btn-g{background:transparent;border-color:var(--teal);color:var(--teal)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pill{border-radius:999px}
.inp{min-height:44px;width:100%;border:2px solid var(--line);border-radius:12px;padding:.5rem .8rem;background:#fff;color:var(--ink)}
.chip{min-height:40px;padding:.35rem .9rem;border-radius:999px;border:2px solid var(--teal);color:var(--teal);font-weight:700;background:#fff;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--teal);color:#fff}
.tag{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .3rem .2rem .7rem;border-radius:999px;background:var(--sun);color:#000;font-weight:700}
.tag button{min-width:32px;min-height:32px;border-radius:999px}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;padding:.15rem .6rem;border-radius:999px}
.muted{color:var(--muted)}
.seg{display:inline-flex;border:2px solid var(--teal);border-radius:999px;padding:3px;background:var(--card);gap:2px}
.seg button{min-height:40px;padding:.4rem 1rem;border-radius:999px;font-weight:700;color:var(--teal);background:transparent;border:0;cursor:pointer;transition:background .15s}
.seg button[aria-pressed="true"]{background:var(--teal);color:#fff}
.hc .seg button[aria-pressed="true"]{color:#000}
.blurdoc .ln{height:10px;background:#8a9a98;border-radius:4px;margin:8px 0;filter:blur(3px)}
*:focus-visible{outline:3px solid var(--sun)!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(0,0,0,.6)}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--sun);color:#000;padding:.6rem 1rem;z-index:100;border-radius:8px;font-weight:700}
.skip-link:focus{left:8px}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast{animation:rise .35s both}
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:90;animation:fall 2.2s linear forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.reduce *,.reduce *::before{animation:none!important;transition:none!important}
.hc{--bg:#000;--ink:#fff;--muted:#fff;--teal:#FFE600;--teal2:#fff;--coral:#FFE600;--card:#000;--line:#fff;--soft:#111}
.hc body,.hc{background:#000}
.hc .btn-p,.hc .btn-c{color:#000}
.hc .inp,.hc .chip{background:#000;color:#fff;border-color:#fff}
.hc .chip[aria-pressed="true"]{background:#FFE600;color:#000}
.hc .card{border-width:2px}
.hc .badge{background:#000!important;color:#fff!important;border:2px solid #fff}
.hc *:focus-visible{outline-color:#00FFFF!important}
.opt{min-height:64px;width:100%;text-align:left;padding:1rem 1.25rem;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:1.1rem;cursor:pointer}
.opt:hover{border-color:var(--teal)}
.opt[aria-pressed="true"]{border-color:var(--teal);background:var(--teal);color:#fff}
.hc .opt[aria-pressed="true"]{background:#FFE600;color:#000}
.chat{max-height:320px;min-height:160px;overflow:auto;display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-radius:12px;background:var(--soft)}
.bubble{max-width:80%;padding:.5rem .8rem;border-radius:14px;background:var(--card);border:1px solid var(--line);align-self:flex-start}
.bubble.mine{align-self:flex-end;background:var(--teal);color:#fff;border-color:var(--teal)}
.hc .bubble.mine{color:#000}
.bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.bar>div{height:100%;background:var(--coral);transition:width .4s}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.55rem;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:767px){
 .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--card);border-top:2px solid var(--line);padding:.35rem;display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;margin:0!important}
 .tabbar .btn{padding:.3rem;font-size:.8rem}
 body{padding-bottom:76px}
}