:root{
  --bg:#FBF8F4; --surface:#FFFDFA; --cream:#F5EEE4; --sand:#E9DDCD; --blush:#F4DCD5;
  --wine:#8C3A45; --btn:#8C3A45; --on-btn:#FFF8F3; --terra:#C4694C;
  --ink:#2A2527; --muted:#756A66; --line:#E7DCD0; --danger:#B23A2E;
  --serif:"Lora",Georgia,serif; --sans:"Onest",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:22px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1B1718; --surface:#242021; --cream:#2B2627; --sand:#3A3233; --blush:#3B2A2D;
  --wine:#E0949B; --btn:#D98A93; --on-btn:#1B1718; --terra:#E39A7C;
  --ink:#F3ECE6; --muted:#A99E98; --line:#3A3334; --danger:#F08A7E;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
button,textarea,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:8px}
main{padding:12px 20px 24px;display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}
h1,h2{margin:0;font-weight:500;text-wrap:balance}
.q{font-family:var(--serif);font-size:22px;line-height:1.3;margin:6px 0 0;text-wrap:balance}
.q.xl{font-size:26px;line-height:1.28}
.lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wine)}
.lbl.m{color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:8px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.card.b{background:var(--blush);border-color:transparent}
.card.c{background:var(--cream);border-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;padding:12px 16px;font-weight:600;font-size:15px;background:var(--btn);color:var(--on-btn);transition:transform .12s var(--ease),opacity .15s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.s{background:var(--cream);color:var(--ink)}
.btn.g{background:none;color:var(--wine);padding:8px 2px}
.btn.d{background:none;color:var(--danger);padding:10px 2px}
.btn.w{width:100%}
.btn.big{padding:15px;font-size:16px;border-radius:16px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:999px;background:var(--cream);font-size:14px;border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.chip.on{background:var(--blush);color:var(--wine);border-color:var(--wine);font-weight:600}
.chip.sm{padding:5px 10px;font-size:12.5px}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;background:var(--sand);color:var(--ink);border:2px solid var(--bg)}
.av.p{background:var(--blush);color:var(--wine)}
.avs{display:flex}.avs .av+.av{margin-left:-10px}
.head-name{font-weight:600;font-size:15px;line-height:1.2}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--cream);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:92px;text-align:left;transition:transform .12s var(--ease)}
.tile:active{transform:scale(.98)}
.tile b{font-size:14.5px;font-weight:600}
.tile span{font-size:12.5px;color:var(--muted);line-height:1.3}
.tile .ic{color:var(--wine)}
.bar{height:6px;border-radius:99px;background:var(--sand);overflow:hidden}
.bar i{display:block;height:100%;background:var(--wine);border-radius:99px;transition:width .6s var(--ease)}
.card.b .bar{background:var(--surface)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--wine);flex:none}
.note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.4}
.note .ic{width:16px;height:16px;margin-top:1px}
textarea,input[type=text],input[type=number],input[type=date]{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;font-size:16px;resize:none;outline:none;transition:border-color .15s}
textarea:focus,input:focus{border-color:var(--wine)}
textarea{min-height:130px}
.counter{font-size:12px;color:var(--muted);text-align:right;margin-top:-4px}
.ans{font-family:var(--serif);font-size:16.5px;line-height:1.5;margin:8px 0 0;white-space:pre-wrap}
.react{display:flex;gap:6px;margin-top:12px}
.react button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:18px;transition:transform .15s var(--ease)}
.react button.on{background:var(--btn);box-shadow:0 0 0 2px var(--blush)}
.react button:active{transform:scale(1.2)}
.seg{display:flex;background:var(--cream);border-radius:12px;padding:3px;gap:2px}
.seg button{flex:1;text-align:center;font-size:13.5px;padding:7px;border-radius:9px;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.say{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5}
.fact{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact div{border-radius:14px;padding:10px 12px;font-size:13.5px;line-height:1.4;background:var(--cream)}
.fact b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.bub{align-self:flex-end;background:var(--blush);border-radius:18px 18px 6px 18px;padding:10px 14px;font-size:14.5px;max-width:88%;white-space:pre-wrap}
.h5{margin:0 0 4px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.steps{display:flex;flex-direction:column;gap:8px;font-size:14.5px;margin:10px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:10px;counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--serif);color:var(--wine);font-size:17px;line-height:1.2;min-width:12px}
.tl{position:relative;padding-left:24px;display:flex;flex-direction:column;gap:12px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:6px;width:1.5px;background:var(--sand)}
.tl .n{position:relative}
.tl .n::before{content:"";position:absolute;left:-23px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--wine)}
.tl .n.big::before{background:var(--wine)}
.tl .yr{font-family:var(--serif);font-size:26px;color:var(--muted);margin-left:-24px;line-height:1;margin-top:6px}
.tl .d{font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.tl .t{font-size:15px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.tl img{width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-top:6px;background:var(--cream)}
.counter-big{font-family:var(--serif);font-size:48px;line-height:1}
.prow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.prow:last-child{border-bottom:0}
.tog{width:42px;height:26px;border-radius:99px;background:var(--sand);position:relative;flex:none;transition:background .18s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .18s var(--ease)}
.tog.on{background:var(--btn)}.tog.on::after{left:19px}
.lvl{display:flex;gap:12px;align-items:flex-start}
.lvl .ic{color:var(--wine);margin-top:2px}
.lvl b{font-size:14.5px;display:block}
.lvl span{font-size:13px;color:var(--muted);line-height:1.4;display:block}
.center{text-align:center;align-items:center}
.envelopes{display:block;margin:8px auto 0}
@media (prefers-reduced-motion:no-preference){
  .envelopes g{animation:breathe 3s ease-in-out infinite}
  .envelopes g:nth-child(2){animation-delay:.6s}
  .rise{animation:rise .32s var(--ease) both}
}
@keyframes breathe{50%{transform:translateY(-2px)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px));z-index:5}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted)}
.tabbar button.on{color:var(--wine);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;max-width:88vw;text-align:center}
.sheet-bg{position:fixed;inset:0;background:rgba(20,15,16,.35);z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-radius:24px 24px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));z-index:11;display:flex;flex-direction:column;gap:12px;max-height:85vh;overflow:auto;box-shadow:0 -12px 32px -12px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .24s var(--ease)}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.loading{display:grid;place-items:center;height:60vh}
.lens-load{width:44px;height:44px;border-radius:50%;border:2px solid var(--sand);border-top-color:var(--wine);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{height:14px;border-radius:7px;background:var(--cream);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.danger-zone{border-top:1px solid var(--line);padding-top:4px}