:root{
  --bg:#FAF7F2;--card:#FFFDF9;--ink:#1A1614;--muted:#6E6560;--line:#E9E1D6;
  --plum:#6B1F4A;--plum2:#8A2E62;--lav:#D9CFE6;--lav2:#EEE8F4;
  --green:#4F7A5A;--greenbg:#E7F0E8;--amber:#C98A2B;--amberbg:#FBF0DD;--red:#B23A3A;--redbg:#F8E3E1;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{background-image:radial-gradient(circle at 12% -10%,#F3E7EC 0,transparent 40%),radial-gradient(circle at 100% 30%,#EFEAF5 0,transparent 35%);background-attachment:fixed}
.display{font-family:'Bricolage Grotesque',serif;letter-spacing:-0.035em}
.mono{font-family:'JetBrains Mono',monospace}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 0 rgba(26,22,20,.03),0 8px 24px -14px rgba(60,30,40,.18);transition:transform .2s,box-shadow .2s}
.card.lift:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(26,22,20,.03),0 16px 32px -16px rgba(60,30,40,.28)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;font-weight:600;min-height:44px;padding:0 1.1rem;transition:all .15s;cursor:pointer;border:1px solid transparent;font-size:.92rem}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum2)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--lav2)}
.btn-soft{background:var(--lav2);color:var(--plum)}
.chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.28rem .7rem;font-size:.78rem;font-weight:500;border:1px solid var(--line);background:#fff;white-space:nowrap}
.chip.g{background:var(--greenbg);border-color:#CFE0D2;color:var(--green)}
.chip.a{background:var(--amberbg);border-color:#F0DDB8;color:#8E5F17}
.chip.r{background:var(--redbg);border-color:#EFC6C2;color:var(--red)}
.chip.p{background:var(--lav2);border-color:var(--lav);color:var(--plum)}
.chip.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.lvl-must{border:1.5px solid var(--plum);background:#fff}
.lvl-should{background:var(--lav2);border:1px solid var(--lav)}
.lvl-nice{border:1.5px dashed #CBBFB2;background:transparent}
.eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.scroll-x{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.scroll-x::-webkit-scrollbar{display:none}
.timeline-line{position:absolute;left:52px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--lav),var(--line))}
.dot{width:14px;height:14px;border-radius:99px;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--plum);background:var(--plum)}
.fade-up{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fresh{animation:pulseG 1.6s ease-out 1}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(79,122,90,.5)}100%{box-shadow:0 0 0 18px rgba(79,122,90,0)}}
.overlay{position:fixed;inset:0;background:rgba(26,22,20,.28);z-index:60;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.sheet{position:fixed;z-index:70;background:var(--card);overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.18)}
@media (max-width:767px){.sheet{left:0;right:0;bottom:0;max-height:86vh;border-radius:24px 24px 0 0;animation:up .3s cubic-bezier(.2,.8,.2,1)}}
@media (min-width:768px){.sheet{top:0;right:0;bottom:0;width:440px;border-left:1px solid var(--line);animation:right .3s cubic-bezier(.2,.8,.2,1)}}
@keyframes up{from{transform:translateY(100%)}}
@keyframes right{from{transform:translateX(100%)}}
.strike{text-decoration:line-through;text-decoration-color:var(--red)}
.fab{position:fixed;right:20px;bottom:92px;z-index:40;box-shadow:0 10px 30px -8px rgba(107,31,74,.6)}
@media (min-width:768px){.fab{bottom:28px}}
input,select,textarea{font-family:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:.55rem .75rem;min-height:42px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lav);border-color:var(--plum)}
.spin{width:18px;height:18px;border:2px solid var(--lav);border-top-color:var(--plum);border-radius:99px;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.lowvision{font-size:118%}
.lowvision .card{border-color:#1A1614;border-width:2px}
.lowvision .btn{min-height:54px;font-size:1.05rem}
.lowvision .chip{font-size:.92rem;padding:.4rem .85rem}
.lowvision .muted,.lowvision .text-\[color\:var\(--muted\)\]{color:#2C2522!important}
.muted{color:var(--muted)}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--plum);border-radius:9px}
.seg button{min-height:30px;padding:0 .55rem;font-size:.7rem;font-weight:700;border-radius:99px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:90;animation:fadeUp .3s}
@media (min-width:768px){.toast{bottom:32px}}