:root{--paper:#fbf7f0;--ink:#3d3a4b;--soft:#6f6a80;--rose:#f3c9cf;--mint:#cfe8dc;--sky:#d4e4f4;--lav:#e3d9f2;--sun:#fbe7b5;--accent:#8a6fb8;--accent2:#5e9c8a;--r:22px;--sh:0 6px 20px rgba(80,60,110,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Assistant","Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);background-image:radial-gradient(rgba(140,120,90,.06) 1px,transparent 1px),radial-gradient(rgba(140,120,90,.05) 1px,transparent 1px);background-size:22px 22px,13px 13px;background-position:0 0,7px 9px;line-height:1.6;font-size:17px}
a{color:var(--accent)}
header.top{position:sticky;top:0;z-index:20;background:rgba(251,247,240,.94);backdrop-filter:blur(6px);border-bottom:1px solid #eadfce}
.bar{display:flex;align-items:center;gap:10px;padding:8px 14px;max-width:1100px;margin:auto}
.brand{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.menu-btn{margin-inline-start:auto}
nav.main{display:none;flex-wrap:wrap;gap:8px;padding:8px 14px 14px;max-width:1100px;margin:auto}
nav.main.open{display:flex}
nav.main a{text-decoration:none;background:#fff;border:1px solid #e9dfd0;border-radius:999px;padding:8px 14px;color:var(--ink);font-weight:600;font-size:.95rem}
nav.main a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.levels{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 10px 10px}
.levels button{font-size:.92rem;padding:7px 12px;min-height:40px}
.levels button.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
main{max-width:1100px;margin:auto;padding:14px}
section.route{display:none;animation:fade .45s ease}
section.route.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.2;margin:.3em 0}
h2{font-size:clamp(1.35rem,4.6vw,1.9rem);margin:.6em 0 .3em}
h3{margin:.5em 0 .2em}
.sub{color:var(--soft)}
button,.btn{font-family:inherit;font-size:1rem;font-weight:700;border:1px solid #e2d6c4;background:#fff;color:var(--ink);border-radius:999px;padding:11px 20px;min-height:48px;cursor:pointer;box-shadow:var(--sh);text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center}
button:active{transform:scale(.97)}
.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.green{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--sh);border:1px solid #f0e7da;margin:12px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.hero{text-align:center;padding:26px 10px 10px}
.hero .mirror{width:120px;height:150px;margin:0 auto 10px;border-radius:50% 50% 46% 46%;background:linear-gradient(160deg,#fff 0%,#e7f1fb 40%,#efe6f8 70%,#fde8ec 100%);border:6px solid #e8d7bf;box-shadow:inset 0 0 30px rgba(255,255,255,.9),var(--sh);position:relative;overflow:hidden}
.hero .mirror:after{content:"";position:absolute;top:-30%;left:-60%;width:50%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:rotate(20deg);animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.quotes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:16px 0}
.quote{border-radius:var(--r);padding:24px 20px;font-size:1.25rem;font-weight:700;line-height:1.5;box-shadow:var(--sh);position:relative;min-height:150px;display:flex;align-items:center}
.quote:before{content:"״";position:absolute;top:-8px;right:14px;font-size:4rem;opacity:.25;line-height:1}
.q0{background:var(--rose)}.q1{background:var(--sky)}.q2{background:var(--mint)}.q3{background:var(--lav)}.q4{background:var(--sun)}
.para{background:#fffdf8;border-right:6px solid var(--accent);border-radius:16px;padding:18px;font-size:1.12rem}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;background:#fff;border-radius:var(--r);padding:16px 10px;text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--sh);border:1px solid #f0e7da;min-height:110px}
.tile .e{font-size:2rem}
.why .card{display:flex;gap:12px;align-items:flex-start}
.why .ic{font-size:1.8rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.prompt-box{font-size:1.4rem;font-weight:700;text-align:center;padding:30px 18px;border-radius:var(--r);background:linear-gradient(135deg,#fff7ea,#f4ecfb);min-height:150px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
textarea,input,select{font-family:inherit;font-size:1.05rem;border:1px solid #e2d6c4;border-radius:16px;padding:12px;width:100%;background:#fffefb;color:var(--ink)}
textarea{min-height:160px;line-height:1.8;background-image:repeating-linear-gradient(transparent,transparent 31px,#efe5d6 31px,#efe5d6 32px);background-attachment:local;line-height:32px;padding-top:6px}
label{font-weight:700;display:block;margin:10px 0 4px}
.calm{position:relative;border-radius:28px;overflow:hidden;padding:20px;min-height:420px;background:linear-gradient(120deg,#e9f3f0,#efe8f7,#fdf0e6,#e6eff9);background-size:400% 400%;animation:calmbg 24s ease infinite}
@keyframes calmbg{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.calm .bub{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);animation:float 18s ease-in-out infinite;pointer-events:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-40px)}}
.timer{font-size:3.2rem;font-weight:800;text-align:center;letter-spacing:2px;position:relative}
.breath{width:70px;height:70px;border-radius:50%;margin:6px auto;background:rgba(138,111,184,.25);animation:breath 8s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.7)}50%{transform:scale(1.15)}}
.calm>*{position:relative}
.note{background:#fff8e6;border:1px dashed #e6c77a;border-radius:16px;padding:10px 14px;font-size:.95rem}
.privacy{background:#eef7f2;border:1px solid #bfe0cf;border-radius:16px;padding:12px 14px}
.emo-fam{border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
.emo-fam h3{margin:0 0 8px}
.emo-w{display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.75);border-radius:12px;padding:7px 10px;margin:6px 0}
.emo-w b{white-space:nowrap}
.meter{display:inline-block;height:8px;border-radius:4px;background:var(--accent);opacity:.65;margin-top:9px;flex:none}
.entry{border-right:5px solid var(--accent2)}
.entry .meta{color:var(--soft);font-size:.9rem}
.wheel-wrap{position:relative;overflow:hidden;width:min(88vw,380px);aspect-ratio:1;margin:10px auto}
.wheel{width:100%;height:100%;border-radius:50%;border:8px solid #fff;box-shadow:var(--sh);transition:transform 4s cubic-bezier(.17,.67,.2,1)}
.pointer{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:2rem;z-index:2}
.opener-out{font-size:1.4rem;font-weight:800;text-align:center;min-height:2.4em}
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{background:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--sh);border-top:6px solid var(--accent)}
.step:nth-child(2){border-color:#e48aa0}.step:nth-child(3){border-color:#e6b84f}.step:nth-child(4){border-color:var(--accent2)}
.tag{display:inline-block;background:var(--lav);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:700}
.model{font-size:1.15rem;line-height:1.9}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:.95rem}
th,td{border:1px solid #eadfce;padding:8px;vertical-align:top;text-align:right}
th{background:#f5eee3}
.tablewrap{overflow-x:auto}
.poster-prev{width:100%;max-width:520px;aspect-ratio:210/297;margin:12px auto;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9%;box-shadow:var(--sh);position:relative;overflow:hidden}
.poster-prev .pe{font-size:4rem}
.poster-prev .pq{font-size:clamp(1.4rem,5vw,2.2rem);font-weight:800;line-height:1.45;margin:16px 0}
.poster-prev .pf{position:absolute;bottom:4%;font-size:.85rem;opacity:.7}
.slide{display:flex;gap:12px}
.slide .n{flex:none;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.saved{color:var(--accent2);font-weight:700}
footer{text-align:center;padding:26px 10px 40px;color:var(--soft)}
footer img{width:72px;height:72px;border-radius:50%;display:block;margin:0 auto 6px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;z-index:50;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
details{background:#fff;border-radius:16px;padding:10px 14px;margin:8px 0;box-shadow:var(--sh)}
summary{font-weight:800;cursor:pointer}
.sealed{background:repeating-linear-gradient(45deg,#f6efe4,#f6efe4 10px,#fbf7f0 10px,#fbf7f0 20px)}
@media (max-width:420px){body{font-size:16px}.quote{font-size:1.12rem;min-height:120px}.timer{font-size:2.6rem}}
@media print{
 @page{size:A4;margin:15mm}
 body{background:#fff;font-size:12pt}
 header.top,footer,.noprint,button,.levels,nav,.note.pn,.toast{display:none!important}
 main{padding:0;max-width:none}
 .card,.step,.quote,.emo-fam{box-shadow:none;break-inside:avoid}
 body.print-poster section.route.on>*:not(.poster-prev){display:none!important}
 body.print-poster .poster-prev{max-width:none;width:180mm;height:267mm;margin:0;box-shadow:none;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 textarea{border:1px solid #999;min-height:60mm}
}

/* her cover image */
.cover{display:block;max-width:1000px;margin:0 auto 18px;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.22);line-height:0}
.cover img{display:block;width:100%;height:auto}
@media print{.cover{display:none!important}}