/* Mira Earn · personal product. Mobile-first on the available width,
   then a full desktop. No device frame around the live app. */
:root{
 --ink:#292332;--ink-strong:#1d1d1f;--muted:#81748f;--muted-soft:#a093ad;
 --violet:#7654df;--violet-dark:#5e3fc8;--violet-ink:#6b4ba9;--lavender:#f4effb;--lavender-strong:#ece4fa;--lilac:#cab6e7;
 --line:#e8e1ef;--canvas:#f7f5fb;--white:#fff;
 --wheel-fill:#f5f0fc;--wheel-ring:#b69bd8;--wheel-ring2:#cbb9e3;--wheel-ring3:#d8cbe8;--wheel-spoke:#d3c1e5;--wheel-text:#a58bbe;--wheel-tri:#b89fd5;--wheel-dot:#cbb5e7;
 --paper:#efe3d1;--paper-ink:#6e5a4c;--night:#28213f;--night-ink:#e6d9f2;--lav:#e6e0f5;--lav-ink:#5f4e7d;
 --green:#26785c;--green-bg:#e9f4ed;--warn:#8a5a12;--warn-bg:#fff6e8;--danger:#a3475e;--danger-bg:#fff0f2;
 --radius-lg:22px;--radius:18px;--radius-sm:14px;
 --surface:#fff;--page:#fff;--ink-soft:#5f5470;--ink-body:#4e4360;--tint:#fbf9fe;--chip-gray:#f0edf3;--on-accent:#fff;--display:inherit;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);font-synthesis:none;
 -webkit-text-size-adjust:100%;text-size-adjust:100%
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--white)}
html{overflow-x:hidden}
body{overflow-x:clip}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #aa8de8;outline-offset:2px}
a{color:inherit}
img{display:block}
svg{width:20px;height:20px;flex:none}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(28px,8.2vw,34px);line-height:1.1;letter-spacing:-.8px;font-weight:700;color:var(--ink)}
h2{font-size:clamp(26px,7.4vw,30px);line-height:1.13;letter-spacing:-.6px;font-weight:700}
h3{font-size:18px;line-height:1.3;letter-spacing:-.2px;font-weight:650}
p{line-height:1.55}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hidden{display:none!important}
.lead{font-size:15px;line-height:1.55;color:var(--muted);margin:14px 0 22px;max-width:520px}
.note{font-size:12px;line-height:1.5;color:var(--muted);text-align:center;margin-top:12px}
.caption{font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}
.eyebrow{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-soft);font-weight:600;margin-bottom:10px}
.field-label{display:block;font-size:13px;color:var(--muted);margin:20px 0 8px}
.gap{height:24px}.gap-sm{height:12px}
.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}
.center{display:flex;justify-content:center;width:100%}
.ok-text{color:var(--green)!important}.warn-text{color:var(--danger)!important}

/* Buttons */
.primary,.secondary{width:100%;min-height:52px;border:0;border-radius:16px;padding:14px 18px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center}
.primary{background:var(--violet);color:var(--on-accent)}
.primary:hover:not(:disabled){background:var(--violet-dark)}
.secondary{background:var(--lavender-strong);color:var(--violet-ink)}
.as-link{display:flex}
.quiet{border:0;background:transparent;color:var(--muted);font-size:14px;min-height:44px;padding:10px 6px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.quiet.center{display:flex;margin:6px auto 0}
.quiet svg{width:16px;height:16px}
.pill-btn{border:1px solid var(--line);background:var(--surface);border-radius:30px;min-height:40px;padding:8px 14px;font-size:13px;color:var(--violet-ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill-btn svg{width:15px;height:15px}
.pill-btn.approved{background:var(--green-bg);border-color:#d3e8da;color:var(--green)}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:30px;min-height:42px;padding:9px 16px;font-size:14px;color:var(--muted)}
.chip.active{background:var(--lavender-strong);border-color:var(--lavender-strong);color:var(--violet-ink);font-weight:550}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.icon-button{width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;padding:0;color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--violet-ink);text-decoration:none;min-height:44px}
.text-link svg{width:15px;height:15px}
.pill{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:14px;background:var(--lavender);color:var(--muted);font-size:12px;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:30px;background:var(--lavender-strong);color:var(--violet-ink);font-size:12px;line-height:1.3}
.badge.gray{background:var(--chip-gray);color:var(--muted)}

/* Top bar */
.topbar{position:sticky;top:0;z-index:20;height:60px;display:flex;align-items:center;gap:6px;padding:0 14px 0 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .icon-button{margin-left:-10px}
.brand{display:flex;align-items:center;min-height:44px}
.logo-mira{height:26px;width:auto}
.logo-tribute{height:24px;width:auto}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.topbar-end .pill-btn{min-height:36px;padding:6px 12px}
.who{font-size:14px;color:var(--muted);display:none}

/* Studio layout */
.studio{width:100%}
.steps,.live{display:none}
.mark{width:20px;height:20px;flex:none}
.mark--lg{width:32px;height:32px}

/* Entry */
.topic{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:18px 18px;margin-bottom:12px;min-height:72px}
.topic span{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.topic strong{font-size:17px;font-weight:650;color:var(--ink)}
.topic small{font-size:13px;color:var(--muted);line-height:1.45}
.topic>svg:not(.wheel){color:#b8a7cd;width:18px;height:18px}
.resume{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--lilac);background:var(--tint);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.resume span{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.resume strong{font-size:16px;overflow-wrap:anywhere}
.resume small{font-size:12px;color:var(--muted)}
.resume svg{color:var(--violet)}
.partner{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-soft)}
.partner img{height:24px;width:auto}

/* Wheel */
.wheel{width:96px;height:96px;flex:none}
.wheel .w-fill{fill:var(--wheel-fill)}
.wheel .w-ring{fill:none;stroke:var(--wheel-ring);stroke-width:.8}
.wheel .w-ring2{fill:none;stroke:var(--wheel-ring2);stroke-width:.8}
.wheel .w-ring3{fill:none;stroke:var(--wheel-ring3);stroke-width:.8}
.wheel .w-spokes{stroke:var(--wheel-spoke);stroke-width:.6;fill:none}
.wheel text{fill:var(--wheel-text);font-size:6.6px;text-anchor:middle;font-family:Arial,sans-serif}
.wheel .w-tri{fill:none;stroke:var(--wheel-tri);stroke-width:.9}
.wheel .w-dot{fill:var(--wheel-dot)}
.wheel--md{width:84px;height:84px}

/* Style screen */
.text-input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:16px;background:var(--surface);color:var(--ink);outline:0;min-width:0}
select.text-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#a093ad 50%),linear-gradient(135deg,#a093ad 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.signature{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;font-size:13px;color:var(--muted)}
.signature input{width:130px;min-height:40px;border:0;border-bottom:1px dashed var(--lilac);padding:6px 2px;font-size:16px;color:var(--ink);background:transparent;outline:0}
.wish{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px;border-radius:var(--radius);background:var(--lavender);font-size:14px;line-height:1.5;color:var(--ink)}
.wish span{min-width:0;overflow-wrap:anywhere}
.wish small{display:block;margin-top:6px;font-size:12px;color:var(--violet-ink)}

/* Composer */
.composer{display:flex;gap:4px;align-items:flex-end;border:0;border-radius:26px;padding:6px 6px 6px 18px;background:var(--surface);margin-top:14px;box-shadow:0 0 0 1px var(--line),0 12px 30px -24px #3a246650;transition:box-shadow .2s}
.composer:focus-within{box-shadow:0 0 0 1.5px var(--violet),0 12px 30px -20px #3a246660}
.composer textarea{flex:1;width:0;min-width:0;height:42px;min-height:42px;max-height:200px;resize:none;border:0;outline:0;background:none;padding:10px 0;font-size:16px;line-height:22px;color:var(--ink)}
.composer textarea:focus-visible{outline:0}
.composer textarea::placeholder{color:#b1a7bd}
.composer.disabled{opacity:.6}
.mic-btn,.send-btn{width:42px;height:42px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--lavender-strong);color:var(--violet-ink)}
.composer .mic-btn{background:transparent;color:var(--muted)}
.composer .mic-btn:hover{background:var(--lavender)}
.send-btn{background:var(--violet);color:#fff}
.send-btn svg{stroke-width:2.2}
.mic-btn.recording{background:#f7d8de;color:#bb4462}
.composer.listening{border-color:#e9a9b8;box-shadow:0 0 0 3px #f7d8de80}
@keyframes pulse{50%{box-shadow:0 0 0 6px #f7d8de55}}
.mic-btn.recording{animation:pulse 1.4s ease-in-out infinite}

/* Cover and sample */
.cover{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:170px;border-radius:var(--radius-lg);padding:22px 18px 18px 20px;margin:18px 0 6px;overflow:hidden}
.cover h3{font-size:clamp(23px,6.6vw,28px);line-height:1.12;font-weight:400;letter-spacing:-.4px}
.cover small{font-size:12px;opacity:.8}
.cover .wheel{flex:0 1 132px;width:132px;min-width:56px;height:auto;aspect-ratio:1}
.fragment{border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 18px;background:var(--surface)}
.fragment h3{font-size:19px;margin-bottom:10px}
.fragment p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:10px;overflow-wrap:anywhere}
.questions{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.questions li{padding:10px 12px;border-radius:12px;background:var(--canvas);font-size:14px;line-height:1.45;color:var(--ink)}
.edit-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* Offer */
.checklist{display:grid;gap:4px}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 2px;cursor:pointer;min-height:44px}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--violet);flex:none}
.check span{display:flex;flex-direction:column;gap:3px;min-width:0}
.check strong{font-size:15px;font-weight:550}
.check small{font-size:12px;color:var(--muted);line-height:1.45}
.price-field{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-field input{width:140px;font-size:32px;font-weight:650;border:0;border-bottom:1px solid var(--line);padding:4px 0;outline:0;color:var(--ink);background:transparent;min-width:0}
.price-field span{font-size:14px;color:var(--muted)}
/* Storefront check & publish */

.publish{margin-top:18px}
.slug-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;min-height:52px;background:var(--surface)}
.slug-field input{flex:1;min-width:0;border:0;outline:0;padding:12px 4px 12px 14px;font-size:16px;background:transparent}
.slug-field span{padding:0 12px 0 0;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
/* The hidden label comes first: the host prefix is the first visible part */
.slug-field .sr-only+span{padding:0 0 0 16px;max-width:60%}
.slug-field span+input{padding-left:1px}
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:var(--radius);background:var(--canvas);font-size:14px;line-height:1.5;color:var(--ink-soft);margin:12px 0}
.callout.warn{background:var(--warn-bg);color:var(--warn)}
.callout.ok{background:var(--green-bg);color:var(--green)}
.callout span{min-width:0;flex:1 1 200px}

/* Promotion */
.post{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;background:var(--surface)}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.post-head span{display:flex;flex-direction:column}
.post-head strong{font-size:15px}
.post-head small{font-size:12px;color:var(--muted)}
.post p{font-size:15px;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere}

/* Cabinet */
.page{width:100%;margin:0 auto;padding:20px 20px 40px;min-width:0}
.cab-tabs{position:sticky;top:60px;z-index:10;display:flex;gap:4px;padding:8px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cab-tabs button{flex:1;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:14px}
.cab-tabs button.active{background:var(--lavender-strong);color:var(--violet-ink);font-weight:600}
.section-title{font-size:19px;letter-spacing:-.2px;margin:28px 0 12px}
.history{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.history li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--ink-soft)}
.history li span:last-child{min-width:0;overflow-wrap:anywhere}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpis div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;min-width:0}
.kpis small{display:block;font-size:12px;color:var(--muted)}
.kpis strong{display:block;font-size:clamp(17px,5vw,24px);margin-top:4px;overflow-wrap:anywhere}
.orders{list-style:none;margin:14px 0 6px;padding:0;display:grid;gap:8px}
.orders li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.orders li strong{margin-left:auto;order:2}
.orders small{flex-basis:100%;order:3}
.orders small{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.45}
.orders strong{font-size:14px;white-space:nowrap}
.status{justify-self:start;font-size:12px;padding:4px 9px;border-radius:20px;background:var(--chip-gray);color:var(--muted)}
.status--delivered{background:var(--green-bg);color:var(--green)}
.status--awaiting_payment{background:var(--warn-bg);color:var(--warn)}
.status--preview_ready{background:var(--lavender-strong);color:var(--violet-ink)}
.status--failed{background:var(--danger-bg);color:var(--danger)}
.agent-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.agent-head div{display:flex;flex-direction:column;gap:3px}
.agent-head strong{font-size:18px}
.agent-head small{font-size:12px;color:var(--muted)}
.messages{display:flex;flex-direction:column;gap:10px}
.msg{max-width:92%;padding:13px 15px;border-radius:18px;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.msg--agent{align-self:flex-start;background:var(--lavender);color:var(--ink-body);border-bottom-left-radius:6px}
.msg .row{margin-top:10px;flex-wrap:wrap}
.proposal{margin-top:10px;padding:12px;border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.proposal strong{font-size:14px}
.proposal small{font-size:12px;color:var(--muted)}
.proposal.done{opacity:.8}
.suggestions{display:flex;gap:8px;overflow-x:auto;padding:14px 0 2px;scrollbar-width:none;margin:0 -20px;padding-left:20px;padding-right:20px}
.suggestions .chip{flex:none;font-size:13px;min-height:38px}

/* Errors, loading, dialog, toast */
.error-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--danger-bg);color:var(--danger);font-size:14px;line-height:1.5;margin-bottom:16px}
.error-box .quiet{color:var(--danger);min-height:36px}
.loading{display:flex;align-items:center;gap:10px;padding:40px 0;color:var(--muted)}
.spinner{width:18px;height:18px;border:2px solid #d9c8eb;border-top-color:var(--violet);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
dialog{border:0;border-radius:24px;padding:28px 24px 24px;max-width:440px;width:calc(100% - 32px);box-shadow:0 25px 90px #27143a30;color:var(--ink)}
dialog::backdrop{background:#25133745;backdrop-filter:blur(3px)}
dialog h3{font-size:20px;padding-right:36px}
dialog p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:12px 0}
dialog .close-modal{position:absolute;right:10px;top:10px}
#toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);background:#392b4e;color:#fff;border-radius:16px;font-size:14px;line-height:1.5;padding:12px 16px;box-shadow:0 8px 25px #32204222;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.visible{opacity:1}

/* Buyer storefront */
.page--shop{max-width:560px}
.shop-about h1{margin-top:2px}
.shop-form{position:relative}
.birth-form{display:block}
.birth-form .primary{margin-top:22px}
.other-place .caption{font-size:12px}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.flags{display:grid;gap:6px;margin-bottom:14px;padding:12px 14px;border-radius:var(--radius-sm);border:1px dashed var(--lilac);font-size:13px;line-height:1.5;color:var(--muted)}
.flags .flag-main{color:var(--violet-ink);font-weight:550}
.checkout{border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px;margin:18px 0 14px}
.toc{list-style:none;margin:0 0 18px;padding:0}
.toc button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:none;padding:10px 0;min-height:52px;font-size:16px;color:var(--ink)}
.toc button>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.toc button small{font-size:12px;color:var(--muted)}
.toc button.off{color:var(--muted-soft)}
.toc .num{width:34px;height:34px;border-radius:10px;background:var(--lavender);display:grid;place-items:center;font-size:12px;color:var(--muted)}
.toc svg{color:#b8a7cd;width:17px;height:17px}
.saved-meta{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.reader h1{margin-bottom:8px}
.reader p{font-size:16px;line-height:1.7;color:var(--ink-body);margin-top:14px}
.practice{margin-top:20px;padding:16px;border-radius:var(--radius);background:var(--lavender)}
.practice strong{font-size:14px}
.practice p{margin-top:6px;font-size:15px}
.data-note{margin-top:14px;padding:14px 16px;border-radius:var(--radius);border:1px dashed var(--lilac)}
.data-note strong{font-size:13px;color:var(--violet-ink)}
.data-note p{margin-top:6px;font-size:14px;color:var(--muted)}
.reader-nav{display:flex;gap:10px;margin-top:24px}
.reader-nav button{flex:1}
.shop-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding:20px 16px max(24px,env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.shop-foot .logo-mira{height:18px}

/* Calculated chart: wheel, key positions, table. Glyphs use text presentation. */
.chart-card{display:grid;gap:14px;margin:6px 0 16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.chart-wheel{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1;margin:0 auto;overflow:visible}
.chart-wheel text{text-anchor:middle;dominant-baseline:central;font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols',-apple-system,sans-serif}
.chart-wheel .cw-fill{fill:var(--wheel-fill)}
.chart-wheel .cw-ring{fill:none;stroke:var(--wheel-ring);stroke-width:.5}
.chart-wheel .cw-inner{fill:var(--surface)}
.chart-wheel .cw-sign{stroke:var(--wheel-ring2);stroke-width:.4}
.chart-wheel .cw-cusp{stroke:var(--wheel-ring2);stroke-width:.35}
.chart-wheel .cw-axis{stroke:var(--violet-ink);stroke-width:.6}
.chart-wheel .cw-zodiac{font-size:5.4px;fill:var(--wheel-text)}
.chart-wheel .cw-house{font-size:3.4px;fill:var(--muted-soft);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.chart-wheel .cw-label{font-size:3.6px;font-weight:600;fill:var(--violet-ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.chart-wheel .cw-body{font-size:5.8px;fill:var(--ink)}
.chart-wheel .cw-tick{stroke:var(--ink);stroke-width:.5}
.chart-wheel .cw-lead{stroke:var(--muted-soft);stroke-width:.3}
.chart-wheel .cw-faded{opacity:.42}
.chart-wheel .cw-aspect{stroke-width:.35;opacity:.75}
.chart-wheel .cw-soft{stroke:var(--violet)}
.chart-wheel .cw-hard{stroke:var(--danger)}
.chart-side{min-width:0}
.big-three{list-style:none;margin:0;padding:0}
.big-three li{display:grid;grid-template-columns:28px auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.big-three li:last-child{border-bottom:0}
.big-three .glyph{font-size:19px;line-height:1;color:var(--violet-ink);text-align:center;font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif}
.big-three strong{text-align:right;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.big-three li.off strong{font-weight:400;font-size:13px;color:var(--muted)}
.chart-side .caption{margin-top:10px}
.positions{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 8px}
.positions th,.positions td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.positions thead th{font-size:12px;font-weight:500;color:var(--muted)}
.positions tbody th{font-weight:550;color:var(--ink)}
.positions td:last-child,.positions th:last-child{text-align:right;white-space:nowrap}
.positions .glyph{width:26px;padding-left:0;font-size:16px;color:var(--violet-ink);text-align:center;font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif}
.positions tr.uncertain td,.positions tr.uncertain th{color:var(--muted)}
.positions abbr{text-decoration:none;font-size:11px;font-weight:650;color:var(--danger)}
.chart-more{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);padding:0 16px}
.chart-more summary{cursor:pointer;padding:14px 0;font-size:15px;font-weight:600;color:var(--ink)}
.cusps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 16px;font-size:14px;color:var(--ink-soft)}
.cusps span{display:inline-block;min-width:26px;color:var(--muted)}
.aspects{list-style:none;margin:0 0 12px;padding:0;font-size:14px;color:var(--ink)}
.aspects li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--line)}
.aspects li:last-child{border-bottom:0}
.aspects span{color:var(--muted)}
.engine-note{font-size:12px}
.basis dl{display:grid;gap:6px;margin:10px 0 0}
.basis dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:14px}
.basis dt{color:var(--muted)}
.basis dd{margin:0;font-weight:600;color:var(--ink)}
@media (min-width:560px){
 .chart-card{grid-template-columns:minmax(200px,250px) minmax(0,1fr);align-items:center;gap:20px}
}

/* Author landing: one page for the product line (storefront home and studio preview). */
.offer-sym{width:44px;height:44px;border-radius:14px;background:var(--lavender);display:grid;place-items:center;font-size:22px;color:var(--violet-ink);flex:none;font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif}
.saved-list{display:grid;gap:8px;margin:16px 0 4px}
.back-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:6px 0;margin-bottom:8px;font-size:14px;color:var(--violet-ink);cursor:pointer}
.back-link svg{width:16px;height:16px}
.field-label small{color:var(--muted-soft);font-size:12px;margin-left:4px}
/* Numerology and compatibility results */
.number-card{display:flex;align-items:center;gap:18px;padding:18px;border-radius:var(--radius-lg);background:var(--lavender);margin:6px 0 16px}
.big-number{font-size:64px;line-height:1;font-weight:700;color:var(--violet-dark);min-width:64px;text-align:center;letter-spacing:-2px;flex:none}
.number-card strong{display:block;font-size:16px;line-height:1.4;color:var(--ink);font-weight:600}
.number-card .eyebrow{margin-bottom:4px}
.pair-card{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;padding:18px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);margin:6px 0 16px}
.pair-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0}
.pair-side .glyph{font-size:24px;color:var(--violet-ink);font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif}
.pair-side strong{font-size:16px;overflow-wrap:anywhere}
.pair-side small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.pair-amp{font-size:26px;color:var(--danger);font-family:'Apple Symbols','Segoe UI Symbol',sans-serif}
.pair-note{grid-column:1/-1;margin-top:6px;font-size:14px;color:var(--ink-soft);text-align:center}
.pair-grid{display:grid;gap:14px}
.person{border:1px solid var(--line);border-radius:var(--radius);padding:4px 14px 16px;margin:0;min-width:0}
.person legend{font-size:14px;font-weight:600;color:var(--ink);padding:0 6px}
@media (min-width:640px){
 .pair-grid{grid-template-columns:1fr 1fr}
}

/* Studio v2: entry hero, questionnaire, product line, connections, promotion tools, CRM, pings. */
.hero{position:relative;margin:-6px -4px 8px;padding:6px 4px 0;background:linear-gradient(180deg,#f5f0ff 0%,#fff 70%);border-radius:var(--radius-lg)}
.hero h1{font-size:clamp(32px,9.4vw,44px);line-height:1.06;letter-spacing:-1.4px}
.hero .accent{color:var(--violet)}
.hero .lead{margin:16px 0 6px}
.voice-field{display:flex;gap:8px;align-items:flex-start}
.voice-field textarea{flex:1;min-width:0;resize:vertical;min-height:84px;line-height:1.5}
.voice-field .mic-btn{width:44px;height:44px;flex:none}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;min-height:40px}
.switch input{width:20px;height:20px;accent-color:var(--violet)}
.pill-btn.as-link{display:inline-flex;text-decoration:none}
.state{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--chip-gray);color:var(--muted);font-size:14px;font-weight:650;flex:none}
.state svg{width:16px;height:16px}
.state.on{background:var(--green-bg);color:var(--green)}
.tool-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:6px;padding:2px 0 10px;margin-bottom:6px}
.tool-tabs button{min-height:40px;padding:8px 10px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px;min-width:0}
.tool-tabs button.active{background:var(--violet);border-color:var(--violet);color:#fff}
.reply{padding:12px 14px;border-radius:var(--radius-sm);background:var(--lavender)}
.reply p{font-size:14px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere}
.reply .eyebrow{margin:0}
.clients{list-style:none;margin:0;padding:0}
.clients li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.clients li>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:140px}
.clients small{font-size:12px;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--lavender-strong);color:var(--violet-ink);display:grid;place-items:center;font-size:12px;font-weight:650;flex:none}
.draft{padding:12px 14px;border-radius:var(--radius-sm);background:var(--lavender);color:var(--ink)}

/* v3: guided questionnaire, site log, sale and promo codes, paywall, managed ads. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.choice{min-height:56px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:12px 16px;text-align:left;font-size:16px;color:var(--ink)}
.choice.active{border-color:var(--violet);background:#f1eafb;color:var(--violet-ink);font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 #26785c40}100%{box-shadow:0 0 0 10px #26785c00}}
body.has-site-bar #toast{bottom:max(92px,calc(env(safe-area-inset-bottom) + 80px))}
.sale-text{color:var(--danger)}
.promo-list{list-style:none;margin:10px 0 0;padding:0}
.promo-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.promo-list li>span:nth-child(2){flex:1;min-width:0}
.promo-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:650;color:var(--violet-ink);background:var(--lavender);border-radius:8px;padding:4px 8px}
.promo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.promo-grid .field-label{margin-top:12px}
.promo-form .secondary{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.price-tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.price-tag s{font-size:.8em;color:var(--muted-soft);font-weight:500}
.price-tag strong{font-weight:700;color:var(--ink)}
.sale-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;background:var(--danger);color:#fff;font-size:12px;font-weight:650;letter-spacing:.01em}
.sale-timer{font-size:13px;color:var(--danger);margin-top:6px}
.sale-timer span{font-variant-numeric:tabular-nums;font-weight:650}
.sale-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:fit-content;max-width:100%;margin:0 0 14px;padding:8px 14px;border-radius:30px;background:var(--danger);color:#fff;font-size:13px}
.sale-ribbon span{font-variant-numeric:tabular-nums}
.score-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--radius-lg);background:var(--lavender);margin:6px 0 14px}
.score-ring{width:92px;height:92px;flex:none;transform:rotate(0deg)}
.score-ring circle{fill:none;stroke-width:3.4}
.score-ring .sr-track{stroke:#e2d6f3}
.score-ring .sr-value{stroke:var(--violet);stroke-linecap:round}
.score-card>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.score-card .eyebrow{margin-bottom:2px}
.score-value{font-size:40px;line-height:1;letter-spacing:-1px;color:var(--violet-dark)}
.score-word{font-size:15px;font-weight:600;color:var(--ink)}
.score-card small{font-size:12px;color:var(--muted);line-height:1.4;margin-top:4px}
.paywall{margin-top:6px}
.teaser{position:relative;padding:16px 18px 14px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:var(--surface);overflow:hidden}
.teaser h3{font-size:16px;margin:2px 0 6px}
.teaser p{font-size:15px;line-height:1.6;color:var(--ink-body)}
.ghost-lines{display:grid;gap:7px;margin-top:8px;filter:blur(2px);opacity:.75}
.ghost-lines i{display:block;height:9px;border-radius:6px;background:linear-gradient(90deg,var(--lavender-strong),var(--lavender))}
.ghost-lines i:nth-child(2){width:88%}.ghost-lines i:nth-child(3){width:62%}
.teaser::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(180deg,#fff0,#fff)}
.paywall>.quiet{margin-top:6px}
.promo-entry{display:flex;gap:8px;margin:12px 0}
.promo-entry .text-input{flex:1;min-width:0;text-transform:uppercase}
.promo-entry .secondary{width:auto;flex:none;padding:0 16px}
.promo-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0;padding:10px 14px;border-radius:var(--radius-sm);background:var(--green-bg);color:var(--green);font-size:14px}
.section-title .badge{vertical-align:middle;margin-left:6px;font-size:11px}
.funnel{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:4px;counter-reset:f}
.funnel li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--canvas);font-size:14px;color:var(--ink-soft)}
.funnel li:nth-child(2){margin-left:4%}.funnel li:nth-child(3){margin-left:8%}.funnel li:nth-child(4){margin-left:12%;background:var(--green-bg);color:var(--green)}
.funnel strong{color:var(--ink);font-variant-numeric:tabular-nums}
.funnel li:nth-child(4) strong{color:var(--green)}
@media (min-width:1180px){
 body.has-site-bar #toast{bottom:max(20px,env(safe-area-inset-bottom))}
}
@media (max-width:420px){
 .promo-grid{grid-template-columns:1fr 1fr}
 .promo-grid>div:first-child{grid-column:1/-1}
 .score-card{gap:12px;padding:14px}
 .score-ring{width:72px;height:72px}
 .score-value{font-size:32px}
}
/* v4: the author greets, the visitor asks. Author card, products with their
   own forms, tarot spread, email step, channel, studio author panel, funnel. */

.saved-list{margin-top:22px}
.saved-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.saved-grid .resume{margin:0;padding:12px 14px}
.saved-grid .resume strong{font-size:15px}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.social{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:30px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:550;text-decoration:none;color:var(--violet-ink)}
.social svg{width:14px;height:14px}
.spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 10px}
.tcard{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.tcard figcaption{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-soft);font-weight:600;text-align:center;line-height:1.3;min-height:2.6em}
.tcard-face{aspect-ratio:2/3;border-radius:14px;background:linear-gradient(165deg,#43307e 0%,var(--night) 70%);color:var(--night-ink);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 6px 12px;text-align:center;box-shadow:0 10px 22px #2821402e;border:1px solid #ffffff1f}
.tcard-num{font-size:12px;letter-spacing:.1em;opacity:.75}
.tcard-glyph{font-size:clamp(30px,9vw,46px);line-height:1;font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',Georgia,serif;color:#f1e3b8}
.tcard-face strong{font-size:clamp(12px,3.4vw,15px);line-height:1.2;font-weight:600;overflow-wrap:anywhere;hyphens:auto}
.tcard-face small{font-size:10px;opacity:.75}
.tcard--rev .tcard-glyph{transform:rotate(180deg)}
.spread.reveal .tcard-face{animation:turn .7s cubic-bezier(.2,.7,.2,1) both}
.spread.reveal .tcard:nth-child(2) .tcard-face{animation-delay:.15s}
.spread.reveal .tcard:nth-child(3) .tcard-face{animation-delay:.3s}
@keyframes turn{from{transform:perspective(600px) rotateY(80deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.spread.reveal .tcard-face{animation:none}}
.question-quote{font-size:15px;color:var(--ink-soft);font-style:italic;margin:4px 2px 16px;overflow-wrap:anywhere}
.fragment--pending .loading{padding:6px 0 4px}
.fragment--pending .ghost-lines{position:static;margin-top:8px}
.mail-card{display:grid;gap:10px;margin:16px 0;padding:18px;border-radius:var(--radius-lg);background:var(--lavender);border:1px solid var(--lavender-strong)}
.mail-card .eyebrow{margin-bottom:0}
.mail-card strong{font-size:16px;line-height:1.4;color:var(--ink)}
.mail-card .caption{margin-top:0}
.mail-row{display:grid;gap:8px}
.mail-row .text-input{background:var(--surface);min-width:0}
.fragment.unlocked{margin-top:16px;border-color:#cfe6d9}
.fragment.unlocked .eyebrow{display:flex;align-items:center;gap:6px}
.fragment.unlocked .eyebrow svg{width:14px;height:14px}
.saved-mail{margin:10px 2px 16px}
.channel-card{display:grid;gap:12px;margin:18px 0 6px;padding:18px;border-radius:var(--radius-lg);background:var(--canvas)}
.channel-card strong{display:block;font-size:16px;line-height:1.4}
.channel-card .eyebrow{margin-bottom:4px}
.photo-row{display:flex;gap:14px;align-items:center;margin:6px 0 4px}
.photo-row>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.file-btn{width:auto;min-height:44px;padding:10px 16px;font-size:14px;cursor:pointer}
.socials-grid{display:grid;gap:8px}
.social-input{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.social-input .text-input{min-height:44px;padding:10px 12px;font-size:14px}
.funnel-real{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.funnel-real li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--canvas)}
.funnel-real span{font-size:14px;color:var(--ink)}
.funnel-real strong{font-size:16px;text-align:right}
.funnel-real small{grid-column:1/-1;font-size:12px;color:var(--muted)}
@media (min-width:560px){
 .mail-row{grid-template-columns:minmax(0,1fr) auto}
 .mail-row .primary{width:auto;padding:0 22px}
 .socials-grid{grid-template-columns:1fr 1fr}
 .channel-card{grid-template-columns:minmax(0,1fr) auto;align-items:center}
 .channel-card .primary{width:auto;padding:0 20px}
}
@media (min-width:1100px){
 .spread{max-width:520px}
}
@media (max-width:359px){
 .positions{font-size:13px}
 .positions .glyph{display:none}
 .positions th,.positions td{padding:8px 4px}
 .page,.cab-main{padding-left:16px;padding-right:16px}
 .chip{padding:8px 12px;font-size:13px}
 .kpis{grid-template-columns:1fr 1fr}
 .kpis div:last-child{grid-column:1/-1}
 .suggestions{margin:0 -16px;padding-left:16px;padding-right:16px}
 .topbar-end .pill{display:none}
}

@media (min-width:768px){
 body{background:var(--canvas)}
 .topbar{height:68px;padding:0 28px}
 .topbar .icon-button{display:none}
 .logo-mira{height:30px}
 .who{display:inline}
 .studio{display:grid;grid-template-columns:184px minmax(0,1fr);gap:28px;max-width:1040px;margin:0 auto;padding:24px 28px 48px;align-items:start}
 .steps{display:block;position:sticky;top:92px}
 .step{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px;border:0;border-radius:12px;background:transparent;text-align:left;font-size:14px;color:var(--muted)}
 .step:disabled{opacity:.45}
 .step.active{background:#e9e2f7;color:var(--violet-ink);font-weight:600}
 h1{font-size:40px}
 h2{font-size:34px}
 .lead{font-size:16px}
 .cover{min-height:200px;padding:26px 24px 22px 28px}
 .cover h3{font-size:32px}
 .cover .wheel{flex-basis:150px;width:150px}
 .messages{flex:1;overflow-y:auto;min-height:160px;padding-right:4px}
 .suggestions{margin:0;padding:12px 0 2px;flex-wrap:wrap;overflow:visible}
 .page--shop{max-width:600px;margin:28px auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px 36px 36px}
 .shop-foot{background:transparent;border-top:0}
}

@media (min-width:1024px){
 .page--shop.page--wide{max-width:1040px;padding:44px 48px}
 .shop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);gap:48px;align-items:start}
 .shop-form{border:1px solid var(--line);border-radius:var(--radius-lg);padding:6px 24px 24px;background:var(--canvas)}
 .shop-form .text-input{background:var(--surface)}
 .shop-about h1{font-size:44px}
}

@media (min-width:1180px){
 .studio{grid-template-columns:184px minmax(0,640px) minmax(300px,400px);max-width:1360px;gap:32px}
 .live{display:block;position:sticky;top:92px;min-width:0}
 .live .note{text-align:left;margin:12px 4px}
 .path{display:grid;gap:10px;margin:16px 0 0;padding:0}
 .path li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius);background:var(--canvas);list-style:none}
 .path b{width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
 .path span{display:flex;flex-direction:column;gap:3px;font-size:14px;min-width:0}
 .path small{font-size:12px;color:var(--muted);line-height:1.45}
 .nav-item{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;border:0;border-radius:12px;background:transparent;text-align:left;padding:10px 12px;font-size:15px;color:var(--muted)}
 .nav-item svg{width:16px;height:16px}
 .nav-item.active{background:#f1eafb;color:var(--violet-ink);font-weight:600}
 .nav-item.current{color:var(--ink)}
}

@media (min-width:1440px){
 .studio{grid-template-columns:200px minmax(0,680px) minmax(340px,440px);gap:44px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v6 · a warm postcard.
   Presets are named by the feeling they give. Each remaps the base tokens,
   so every storefront screen follows it; an accent recolours actions. The
   landing lays out by the postcard's own width (container queries), so the
   studio preview and the live site agree. One bold element: the author's
   portrait in an arch on a shape of the preset's colour; without a photo,
   the question itself, centred like a chat. */
.shop-root,.postcard{background:var(--page);color:var(--ink)}
.shop-root{min-height:100dvh;display:flex;flex-direction:column}
.shop-root>main{flex:1}
.postcard{container-type:inline-size}
:root{--serif:ui-serif,'New York','Iowan Old Style','Noto Serif',Georgia,serif;--rounded:ui-rounded,'SF Pro Rounded','Nunito','Segoe UI',system-ui,sans-serif;--sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Arial,sans-serif;--glyphs:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',Georgia,serif;--fill:#f1edf6;--glow:#ece4fa;--title-weight:600}
/* Спокойно и естественно: linen, deep green, warm light */
.theme-sage{--page:#f6f1e7;--surface:#fffdf8;--canvas:#efe8da;--tint:#faf6ee;--lavender:#ebe9db;--lavender-strong:#dfe3cf;--lilac:#c3cbb1;--line:#e6dfd0;--chip-gray:#efeadf;--fill:#ecebdd;
 --ink:#2b3427;--ink-strong:#1e281b;--ink-soft:#56604f;--ink-body:#3d4737;--muted:#787f70;--muted-soft:#9da291;
 --violet:#4d6a45;--violet-dark:#3d5637;--violet-ink:#3f5a39;--on-accent:#fffdf8;
 --wheel-fill:#f1efe3;--wheel-ring:#a9b596;--wheel-ring2:#c3cbb1;--wheel-ring3:#d6dbc8;--wheel-spoke:#cdd3bd;--wheel-text:#7f8a71;--wheel-tri:#9fae8c;--wheel-dot:#b7c2a5;
 --glow:#f0dfc2;--display:var(--serif);--title-weight:500;
 --hx:radial-gradient(ellipse 55% 65% at 88% 0%,#f6e3c4 0%,transparent 70%),radial-gradient(ellipse 45% 55% at 0% 100%,#e6ead7 0%,transparent 70%)}
/* Нежно и мечтательно: lavender and a rose dawn */
.theme-lavender{--page:#f7f3f9;--surface:#fff;--canvas:#efe8f5;--tint:#fbf8fd;--lavender:#efe7f6;--lavender-strong:#e5d9f2;--lilac:#cebde3;--line:#e9e0f0;--chip-gray:#f1ebf6;--fill:#efe8f6;
 --ink:#2d2638;--ink-strong:#221b2d;--ink-soft:#5d536b;--ink-body:#453c52;--muted:#847a92;--muted-soft:#a69cb2;
 --violet:#7956a8;--violet-dark:#664693;--violet-ink:#674896;--on-accent:#fff;
 --glow:#f4dbe8;--display:var(--serif);--title-weight:500;
 --hx:radial-gradient(ellipse 55% 65% at 88% 0%,#f7dcea 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,#e5dcf6 0%,transparent 70%)}
/* Загадочно: evening sky, peach gold */
.theme-midnight{--page:#24223a;--surface:#2e2c47;--canvas:#2a2841;--tint:#2b2943;--lavender:#35324f;--lavender-strong:#3f3b5c;--lilac:#5b5679;--line:#3d3957;--chip-gray:#33304c;--fill:#34314f;
 --ink:#efe7dc;--ink-strong:#fbf4ea;--ink-soft:#cbc2d0;--ink-body:#ddd4d9;--muted:#a69eb4;--muted-soft:#8c84a1;
 --violet:#e9bf90;--violet-dark:#f1cfa7;--violet-ink:#f1cfa7;--on-accent:#2a1d10;--green:#9bd8b8;--green-bg:#1f3a33;--danger:#f29bb0;--danger-bg:#3d2033;--warn-bg:#3a2f1c;--warn:#f0cf8f;
 --wheel-fill:#2f2c49;--wheel-ring:#6f6596;--wheel-ring2:#564e7d;--wheel-ring3:#463f6a;--wheel-spoke:#4d4675;--wheel-text:#bbb1d4;--wheel-tri:#e9bf90;--wheel-dot:#6f6596;
 --glow:#433a62;--display:var(--serif);--title-weight:500;
 --hx:radial-gradient(1.2px 1.2px at 12% 22%,#fff8 60%,transparent),radial-gradient(1px 1px at 78% 14%,#fff7 60%,transparent),radial-gradient(1.3px 1.3px at 64% 62%,#fff8 60%,transparent),radial-gradient(1px 1px at 30% 78%,#fff6 60%,transparent),radial-gradient(1.2px 1.2px at 92% 48%,#fff7 60%,transparent),radial-gradient(ellipse 55% 60% at 85% 0%,#4a3c66 0%,transparent 70%),radial-gradient(ellipse 50% 55% at 0% 100%,#3a2e4c 0%,transparent 70%);color-scheme:dark}
/* Ярко и уверенно: raspberry, apricot, a heavy sans */
.theme-dawn{--page:#fcede5;--surface:#fff9f5;--canvas:#f9e1d6;--tint:#fef5f0;--lavender:#f9ded3;--lavender-strong:#f5cfc1;--lilac:#e9ae9b;--line:#f1d6ca;--chip-gray:#f8e4db;--fill:#f9e0d5;
 --ink:#2e1520;--ink-strong:#230d17;--ink-soft:#653f4a;--ink-body:#4a2a34;--muted:#8c6570;--muted-soft:#b08a92;
 --violet:#c0325a;--violet-dark:#a5284c;--violet-ink:#a3284c;--on-accent:#fff;
 --wheel-fill:#fbe6dc;--wheel-ring:#e3a08f;--wheel-ring2:#ecbcae;--wheel-ring3:#f3d2c6;--wheel-spoke:#efc6b8;--wheel-text:#b67a7f;--wheel-tri:#d77a8a;--wheel-dot:#e8a99c;
 --glow:#ffcfae;--display:var(--sans);--title-weight:760;
 --hx:radial-gradient(ellipse 55% 65% at 88% 0%,#ffd4b6 0%,transparent 70%),radial-gradient(ellipse 45% 55% at 0% 100%,#fbd2d8 0%,transparent 70%)}
.accent-gold{--violet:#8a6a2a;--violet-dark:#6c501c;--violet-ink:#6c501c;--on-accent:#fff}
.accent-violet{--violet:#6f50c8;--violet-dark:#5a3db2;--violet-ink:#5a3db2;--on-accent:#fff}
.accent-rose{--violet:#b3456a;--violet-dark:#8e2f53;--violet-ink:#8e2f53;--on-accent:#fff}
.accent-emerald{--violet:#2f7a5b;--violet-dark:#225c44;--violet-ink:#225c44;--on-accent:#fff}
.theme-midnight.accent-gold{--violet:#e7c27d;--violet-dark:#f0d49c;--violet-ink:#f0d49c;--on-accent:#221a0b}
.theme-midnight.accent-violet{--violet:#b9a2ff;--violet-dark:#cdbbff;--violet-ink:#cdbbff;--on-accent:#1a1433}
.theme-midnight.accent-rose{--violet:#f2a6be;--violet-dark:#f7c1d2;--violet-ink:#f7c1d2;--on-accent:#2a1120}
.theme-midnight.accent-emerald{--violet:#8fd3b0;--violet-dark:#b2e5ca;--violet-ink:#b2e5ca;--on-accent:#0e2a1e}
.theme-midnight .logo-mira{filter:invert(1) hue-rotate(180deg)}

/* Soft components: capsule buttons, round icons, fills instead of frames */
.primary,.secondary{border-radius:999px}
.shop-root .topbar{background:color-mix(in srgb,var(--page) 86%,transparent);border-bottom:0;box-shadow:0 1px 0 var(--line)}
.shop-brand{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;border:0;background:none;padding:4px 8px 4px 0;color:var(--ink-strong);font-family:var(--display);font-weight:var(--title-weight);font-size:19px;letter-spacing:-.01em;text-align:left}
.shop-brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-brand .hello-mark{width:32px;height:32px;font-size:16px}
.topbar--shop .pill-btn{background:var(--fill);border:0;color:var(--ink);text-decoration:none}
.shop-root .text-input,.postcard .text-input,dialog.sheet .text-input{background-color:var(--tint);border-color:var(--line);color:var(--ink)}
.shop-root .text-input::placeholder,.postcard .text-input::placeholder{color:var(--muted-soft)}
.shop-root .chip,.postcard .chip{background:transparent;border-color:var(--line);color:var(--ink-soft)}
.shop-root .chip.active,.postcard .chip.active{background:var(--lavender-strong);border-color:var(--lavender-strong);color:var(--violet-ink)}
.shop-root .person,.postcard .person{border-color:var(--line)}
.shop-root .person legend,.postcard .person legend{color:var(--ink)}
.theme-midnight input[type=date]::-webkit-calendar-picker-indicator,.theme-midnight input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.85)}
.theme-midnight select.text-input{background-image:linear-gradient(45deg,transparent 50%,#a69eb4 50%),linear-gradient(135deg,#a69eb4 50%,transparent 50%)}
.shop-foot{flex-direction:column;gap:12px;border-top:0;padding-top:32px}
.shop-root .shop-foot{color:var(--muted)}
.foot-ai{font-size:13px;line-height:1.5;color:var(--ink-soft);text-align:center;max-width:46ch}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px}
.foot-pay,.foot-mira{display:inline-flex;align-items:center;gap:6px}
.shop-foot .logo-tribute{height:17px}

/* Landing: full-bleed, no boxed page */
.page--shop.page--landing{max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.hx-band{background:var(--hx),var(--page)}
.hx{display:grid;max-width:1120px;margin:0 auto;padding:28px 20px 48px}
.hx-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.hx-ribbon{margin-bottom:20px;max-width:100%}
.hx-hello{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.hello-mark{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--violet);font-size:22px;line-height:1;font-weight:400;font-family:var(--glyphs);box-shadow:0 0 0 1px var(--line)}
.hx-title{font-family:var(--display);font-weight:var(--title-weight);font-size:clamp(38px,11cqi,74px);line-height:1.03;letter-spacing:-.022em;color:var(--ink-strong);margin-top:18px;text-wrap:balance}
.theme-dawn .hx-title{letter-spacing:-.045em;line-height:.98}
.hx-lead{font-size:clamp(17px,4.2cqi,20px);line-height:1.5;color:var(--ink-soft);margin:16px 0 28px;max-width:36ch;overflow-wrap:anywhere}
.ask{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:640px}
.gpt{display:flex;align-items:flex-end;gap:4px;padding:7px 7px 7px 20px;background:var(--surface);border-radius:28px;box-shadow:0 0 0 1px var(--line),0 1px 2px #0000000a,0 18px 40px -24px #3a24104d;transition:box-shadow .2s}
.gpt:focus-within{box-shadow:0 0 0 1.5px var(--violet),0 18px 40px -22px #3a24105c}
.gpt-input{flex:1;width:0;min-width:0;height:42px;min-height:42px;max-height:200px;resize:none;border:0;outline:0;background:transparent;padding:10px 0;font-size:17px;line-height:22px;color:var(--ink)}
.gpt-input::placeholder{color:var(--muted-soft)}
.gpt-input:focus-visible{outline:0}
.gpt .mic-btn{width:42px;height:42px;border-radius:50%;background:transparent;color:var(--ink-soft)}
.gpt .mic-btn:hover{background:var(--fill)}
.gpt .mic-btn.recording{background:#f7d8de;color:#bb4462}
.gpt-send{width:42px;height:42px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--violet);color:var(--on-accent)}
.gpt-send:hover:not(:disabled){background:var(--violet-dark)}
.gpt-send svg{width:20px;height:20px;stroke-width:2.2}
.gpt-send .spinner{border-color:color-mix(in srgb,var(--on-accent) 35%,transparent);border-top-color:var(--on-accent)}
.ask-examples{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px}
.ask-examples::-webkit-scrollbar{display:none}
.ask-examples .chip{flex:none;min-height:38px;padding:8px 15px;border:0;border-radius:999px;background:var(--fill);color:var(--ink-soft);font-size:14px;text-align:left}
.ask-examples .chip:hover{color:var(--ink)}
.ask-note{font-size:13px;line-height:1.45;color:var(--muted);padding:0 4px}
.hx-paths{display:grid;gap:8px;width:100%;max-width:640px;margin-top:28px}
.path-btn{display:flex;align-items:center;gap:14px;min-height:66px;padding:10px 16px 10px 10px;border:0;border-radius:22px;background:var(--fill);color:var(--ink);text-align:left;transition:background-color .15s}
.path-btn:hover{background:var(--lavender-strong)}
.path-ico{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--violet);font-size:21px;line-height:1;font-family:var(--glyphs)}
.path-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.path-text strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.path-text small{font-size:13px;color:var(--muted)}
.path-btn>svg{width:18px;height:18px;color:var(--muted-soft)}
.portrait{display:none}
.postcard .saved-list{max-width:1120px;margin:0 auto;padding:28px 20px 0}
.about-x{display:grid;gap:18px;max-width:1120px;margin:0 auto;padding:56px 20px}
.about-head{display:flex;align-items:center;gap:16px;min-width:0}
.about-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.about-x h2,.offers-x>h2{font-family:var(--display);font-weight:var(--title-weight);font-size:clamp(30px,7cqi,44px);line-height:1.08;letter-spacing:-.02em;color:var(--ink-strong)}
.theme-dawn .about-x h2,.theme-dawn .offers-x>h2,.theme-dawn .ox-info h3{letter-spacing:-.035em}
.about-x p{font-size:18px;line-height:1.65;color:var(--ink-body);max-width:58ch;margin-top:12px;overflow-wrap:anywhere}
.about-x p:first-child{margin-top:0}
.about-x .socials{margin-top:22px}
.postcard .social{background:var(--fill);border:0;border-radius:999px;color:var(--ink)}
.postcard .social svg{color:var(--violet)}
.offers-x{max-width:1120px;margin:0 auto;padding:8px 20px 56px}
.offers-x>h2{margin-bottom:6px}
.ox{display:grid;gap:20px;padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:76px;min-width:0}
.ox:first-of-type{border-top:0}
.ox-glyph{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--fill);font-size:26px;line-height:1;color:var(--violet);margin-bottom:18px;font-family:var(--glyphs)}
.ox-topic{font-size:14px;font-weight:600;color:var(--violet-ink);margin-bottom:6px}
.ox-info h3{font-family:var(--display);font-weight:var(--title-weight);font-size:clamp(26px,6cqi,34px);line-height:1.1;letter-spacing:-.015em;color:var(--ink-strong)}
.ox-info>p:not(.ox-topic){font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:10px;max-width:46ch}
.ox-gets{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.ox-gets li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-soft)}
.ox-gets li svg{width:17px;height:17px;margin-top:2px;color:var(--muted-soft)}
.ox-gets li.free svg{color:var(--violet)}
.ox-gets strong{color:var(--ink);font-weight:600}
.ox-form{min-width:0}
.ox-start{padding:22px 20px;border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 20px 44px -34px #3a24104d}
.ox-start{display:grid;gap:14px;align-content:start}
.ox-needs{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.ox-form .primary{max-width:none}
.ox-form .birth-form>:first-child{margin-top:0}
@container (min-width:720px){
 .hx{padding:64px 40px 76px}
 .hx--photo{grid-template-columns:minmax(0,1fr) minmax(260px,400px);column-gap:72px;align-items:start}
 .hx--photo .hello-mark{display:none}
 .portrait{display:block;position:relative;margin:24px 0 0 auto;width:100%;max-width:min(400px,calc((100svh - 230px) * .8));min-width:240px;aspect-ratio:4/5}
 .portrait::before{content:'';position:absolute;inset:5% -7% -5% 9%;border-radius:999px 999px 44px 44px;background:var(--glow)}
 .portrait img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:999px 999px 36px 36px;box-shadow:0 30px 60px -30px #2a17104d}
 .portrait-badge{position:absolute;left:-24px;bottom:14%;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--violet);font-size:32px;line-height:1;font-family:var(--glyphs);box-shadow:0 14px 30px -12px #2a171045}
 .hx--solo .hx-main{align-items:center;text-align:center;max-width:760px;margin:0 auto;width:100%}
 .hx--solo .hx-hello{flex-direction:column;gap:14px}
 .hx--solo .hello-mark{width:64px;height:64px;font-size:30px}
 .hx--solo .hx-lead{margin-left:auto;margin-right:auto}
 .hx--solo .ask{text-align:left}
 .hx--solo .ask-examples{justify-content:center}
 .hx--solo .ask-note{text-align:center}
 .hx--solo .hx-paths{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:760px}
 .ask-examples{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
 .postcard .saved-list,.about-x,.offers-x{padding-left:40px;padding-right:40px}
 .about-x{grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:64px;padding-top:72px;padding-bottom:72px}
 .about-head{flex-direction:column;align-items:flex-start}
 .about-photo{width:96px;height:96px}
 .ox{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;padding:48px 0}
}
.theme-dawn .portrait::before{border-radius:50%;inset:6% -14% 22% 4%}
.theme-midnight .portrait::before{background:radial-gradient(circle at 30% 25%,#5d4c83 0%,#3b3358 70%)}
.theme-sage .portrait::before{border-radius:999px 999px 44px 44px}

/* Inner storefront screens follow the preset too: its type, its colours on the cards */
.shop-root .page:not(.page--landing) h1,.shop-root .section-title,.shop-root .fragment h3,.shop-root .teaser h3,.shop-root .reader h1{font-family:var(--display);font-weight:var(--title-weight);letter-spacing:-.015em}
.shop-root .page:not(.page--landing) h1{font-size:clamp(34px,9vw,44px);line-height:1.05;letter-spacing:-.025em;color:var(--ink-strong)}
.theme-dawn .page:not(.page--landing) h1{letter-spacing:-.04em}
.shop-root .eyebrow{text-transform:none;letter-spacing:0;font-size:13px}
.shop-root :focus-visible,dialog.sheet :focus-visible{outline-color:color-mix(in srgb,var(--violet) 55%,transparent)}
.shop-root .tcard-face{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--on-accent) 14%,transparent) 0 22%,transparent 23%),linear-gradient(165deg,var(--violet) 0%,color-mix(in srgb,var(--violet) 55%,#000) 100%);color:var(--on-accent)}
.shop-root .tcard-glyph{color:var(--on-accent)}
.shop-root .tcard figcaption{text-transform:none;letter-spacing:0;font-size:12px}
.shop-root .fragment,.shop-root .teaser{border:0;box-shadow:0 0 0 1px var(--line)}
.shop-root .mail-card{background:var(--fill);border:0}
@media (min-width:768px){.shop-root .page--shop:not(.page--landing){border:0;box-shadow:0 0 0 1px var(--line),0 30px 70px -50px #3a24104d}}

/* The purchase sheet: a bottom sheet on a phone, a compact dialog on a wide screen */
body:has(dialog[open]){overflow:hidden}
dialog.sheet{background:var(--surface);color:var(--ink);padding:30px 22px max(22px,env(safe-area-inset-bottom));max-width:460px}
dialog.sheet h3{font-family:var(--display);font-weight:var(--title-weight);font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--ink-strong)}
dialog.sheet .sheet-sub{font-size:15px;line-height:1.5;color:var(--ink-soft);margin:8px 0 18px}
dialog.sheet .checkout{border:0;padding:0;margin:12px 0 6px}
dialog.sheet .sale-timer{margin:4px 0 10px}
dialog.sheet .error-box{margin:10px 0}
dialog.sheet .primary{margin-top:14px}
.promo-more{margin:4px 0}
.promo-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:40px;font-size:14px;color:var(--violet-ink)}
.promo-more summary::-webkit-details-marker{display:none}
.promo-more .promo-entry{margin-top:4px}
dialog .pay-by,.pay-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1.4;color:var(--muted);margin:12px 0 0;text-align:center}
.pay-by .logo-tribute{height:16px}
@media (max-width:639px){
 dialog.sheet{margin:auto 0 0;width:100%;max-width:none;max-height:92dvh;overflow:auto;border-radius:28px 28px 0 0}
 dialog.sheet::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line)}
}

/* Studio preview of the postcard */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.theme-pick{position:relative;display:grid;gap:6px;padding:0 0 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;text-align:left;color:var(--ink)}
.theme-pick.active{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet)}
.theme-pick .tp-sample{display:flex;align-items:flex-end;justify-content:space-between;height:74px;padding:10px 12px;background:var(--hx),var(--page)}
.theme-pick .tp-sample b{font-family:var(--display);font-size:20px;font-weight:var(--title-weight);color:var(--ink-strong)}
.theme-pick .tp-sample i{width:26px;height:34px;border-radius:999px 999px 6px 6px;background:var(--violet);font-style:normal}
.theme-pick strong,.theme-pick small{padding:0 12px;min-width:0;overflow-wrap:anywhere}
.theme-pick small{font-size:12px;color:var(--muted)}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.dot-pick{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 8px;border-radius:30px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-soft)}
.dot-pick i{width:20px;height:20px;border-radius:50%;background:var(--violet)}
.dot-pick.active{border-color:var(--violet);color:var(--ink);font-weight:600}
.dot-pick .glyph{font-size:18px;line-height:1;width:20px;text-align:center;color:var(--violet);font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols 2',Georgia,serif}
.site-chat{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.site-chat .msg{max-width:92%}
.quota{font-size:12px;color:var(--muted);margin-top:6px}
#slug-status{margin:8px 4px 16px}

/* Author path v6: the first look at the site inside the questionnaire, the
   last edit as «было / стало» with an undo, readiness to launch, the photo
   first on the site step, and the cabinet's next step by the author's state. */
.look{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
@media (min-width:1180px){.look-preview{display:none}}
.change-card{display:flex;gap:12px;align-items:flex-start;margin:12px 0 4px;padding:14px 16px;border-radius:18px;background:var(--green-bg);color:var(--ink)}
.change-mark{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--green)}
.change-mark svg{width:16px;height:16px}
.change-card>div{display:grid;gap:6px;min-width:0}
.change-card strong{font-size:15px}
.change-card small{font-size:13px;color:var(--ink-soft)}
.change-card summary{cursor:pointer;font-size:13px;color:var(--violet-ink);min-height:32px;display:flex;align-items:center}
.change-card dl{margin:6px 0 0;display:grid;gap:10px}
.change-card dt{font-size:12px;color:var(--muted);margin-bottom:2px}
.change-card dd{margin:0;display:grid;gap:4px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.change-card .was{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.change-card .pill-btn{justify-self:start;margin-top:4px}
.postcard .is-changed{animation:changed 2.6s ease-out 1;border-radius:14px}
@keyframes changed{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 45%,transparent);background-color:color-mix(in srgb,var(--violet) 9%,transparent)}100%{box-shadow:0 0 0 4px transparent;background-color:transparent}}
@media (prefers-reduced-motion:reduce){.postcard .is-changed{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--violet) 40%,transparent)}}
.ready{display:grid;gap:10px;padding:16px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line);margin:0 0 16px}
.ready progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:99px;background:var(--lavender);overflow:hidden}
.ready progress::-webkit-progress-bar{background:var(--lavender);border-radius:99px}
.ready progress::-webkit-progress-value{background:var(--violet);border-radius:99px}
.ready progress::-moz-progress-bar{background:var(--violet);border-radius:99px}
.ready ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ready li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.35;color:var(--muted)}
.ready li.on{color:var(--ink)}
.ready li svg{width:16px;height:16px;color:var(--green)}
.ready li i{width:14px;height:14px;margin:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--lilac);flex:none}
.steps .ready{margin:20px 0 0;padding:14px}
.photo-panel .photo-row{gap:16px;margin:12px 0 4px}
.photo-arch{width:96px;height:120px;flex:none;border-radius:999px 999px 18px 18px;object-fit:cover;display:grid;place-items:center;background:var(--lavender);color:var(--violet);font-size:40px;line-height:1;font-family:var(--glyphs)}
.photo-row>.photo-side{display:grid;gap:10px;align-items:start}
.photo-side .caption{margin:0}
.photo-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Home: the first thing a person sees in Earn — two doors, nothing else */
.home{max-width:960px;margin:0 auto;padding:44px 20px 64px}
.home-hero{text-align:center;display:grid;justify-items:center;gap:14px}
.home-lockup{height:24px;width:auto}
.home-hero h1{font-size:clamp(34px,8vw,56px);line-height:1.05;letter-spacing:-.03em;max-width:14ch;text-wrap:balance}
.home-hero .lead{margin:0;max-width:46ch;font-size:17px;text-align:center}
.home-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:36px}
.door{display:grid;align-content:start;gap:10px;min-height:250px;padding:28px 26px 24px;border:0;border-radius:28px;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;font:inherit;transition:transform .15s ease,box-shadow .15s ease}
.door:hover{transform:translateY(-2px)}
.door strong{font-size:clamp(26px,6vw,30px);letter-spacing:-.02em;line-height:1.1}
.door>span:not(.door-mark){font-size:16px;line-height:1.5;color:var(--ink-soft)}
.door em{font-style:normal;font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px}
.door em svg{width:18px;height:18px}
.door-mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;margin-bottom:6px}
.door--author{background:linear-gradient(160deg,#ece3ff 0%,#f8f5ff 65%);box-shadow:0 0 0 1px #e1d5fb,0 30px 60px -40px #5a3cc966}
.door--author em{color:var(--violet-dark)}
.door--buyer{background:linear-gradient(160deg,#f5e9d3 0%,#f9f5ee 65%);box-shadow:0 0 0 1px #eadfca,0 30px 60px -40px #6b4a1a55}
.door--buyer .door-mark{color:#4d6a45;font-size:26px;line-height:1;font-family:var(--glyphs)}
.door--buyer em{color:#3f5a39}
.home-more{display:flex;justify-content:center;margin-top:18px}

/* The author's photo: the AI variant next to the original, the author picks */
.photo-ai{display:grid;gap:8px;margin-top:12px}
.photo-ai .secondary{width:auto;justify-self:start;min-height:46px;padding:0 20px}
.photo-ai .secondary .spinner{width:16px;height:16px}
.photo-ai .caption{margin:0}
.photo-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 10px;max-width:420px}
.photo-compare figure{margin:0;display:grid;gap:6px}
.photo-compare img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 18px 18px}
.photo-compare figcaption{font-size:13px;color:var(--muted);text-align:center}
.photo-choice{display:flex;flex-wrap:wrap;gap:8px}
.photo-choice .primary,.photo-choice .secondary{width:auto;flex:1 1 200px;min-height:48px}
.ready li.optional{color:var(--muted-soft);border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.ready li.optional.on{color:var(--ink-soft)}
body{min-height:100dvh}

/* v7 · one product. The way to a published site is a talk on the left and the
   site itself on the right; after it comes one cabinet: sections on the left,
   the work in the middle, Mira on the right. Neutral canvas, white surfaces,
   one accent; the warmth belongs to the author's site, not to the tool. */
:root{--ink:#26242b;--ink-strong:#1d1c21;--muted:#85818e;--muted-soft:#a9a6b1;--ink-soft:#5d5a66;--ink-body:#45434d;--line:#ebe9ee;--canvas:#f5f5f7;--tint:#faf9fc;--chip-gray:#f1f0f3;--lavender:#f2effb;--lavender-strong:#e9e3fa;--lilac:#d3c9f0;--violet:#7357d8;--violet-dark:#5f45c2;--violet-ink:#5f45c2;--card-shadow:0 1px 2px #1d1c2108}
html,body{background:var(--canvas)}
.topbar{background:color-mix(in srgb,var(--canvas) 88%,transparent);border-bottom:0}
.primary,.secondary{min-height:54px}
.chip{background:#fff;border-color:transparent;box-shadow:var(--card-shadow);color:var(--ink-soft)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.shop-root .chip.active,.postcard .chip.active{box-shadow:none}
.pill-btn{border-color:transparent;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.pill-btn:hover{background:var(--tint)}
a.pill-btn svg{color:var(--muted-soft)}
.badge.green{background:var(--green-bg);color:var(--green)}
.text-input{border-color:transparent;box-shadow:0 0 0 1px var(--line);background:#fff}
.text-input:focus{box-shadow:0 0 0 2px var(--violet)}
.slug-field{border-color:transparent;box-shadow:0 0 0 1px var(--line)}
.composer{box-shadow:0 0 0 1px var(--line)}
.fragment{border:0;background:#fff;box-shadow:var(--card-shadow)}
.callout{background:#fff;box-shadow:var(--card-shadow)}
.signature input{border-bottom-color:var(--lilac)}
.switch{position:relative;display:inline-flex;flex:none;align-items:center;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:44px;height:26px;margin:0;border-radius:99px;background:#dcdae0;position:relative;cursor:pointer;transition:background .15s}
.switch input::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #1d1c2140;transition:transform .15s}
.switch input:checked{background:var(--green)}
.switch input:checked::after{transform:translateX(18px)}
/* The way to the site */

.talk h1{font-size:clamp(32px,9vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:var(--ink-strong)}
.talk .lead{font-size:17px;line-height:1.5;margin:12px 0 24px;color:var(--muted)}
.talk-actions{margin-top:26px}
.talk-actions .primary,.talk-actions .secondary{max-width:none}
.talk .field-label{color:var(--ink-soft);font-size:14px}
.talk .chip-row .chip{min-height:46px;padding:10px 18px;font-size:15px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.said{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0;padding:0}
.said button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px 4px 8px;border:0;border-radius:99px;background:var(--chip-gray);color:var(--ink-soft);font-size:13px}
.said svg{width:14px;height:14px;color:var(--green)}
.ways{display:grid;gap:10px}
.way{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:14px 18px 14px 14px;border:0;border-radius:22px;background:#fff;text-align:left;box-shadow:var(--card-shadow);transition:transform .15s ease}
.way--on:hover{transform:translateY(-1px)}
.way-ico{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:24px;line-height:1;background:var(--lavender);color:var(--violet-ink);font-family:var(--glyphs)}
.way:nth-child(2) .way-ico{background:#e8eddf;color:#4d6a45}
.way:nth-child(3) .way-ico{background:#efe8df;color:#7a5a36}
.way-text{flex:1;display:grid;gap:3px;min-width:0}
.way strong{font-size:17px;font-weight:650;letter-spacing:-.01em}
.way small{font-size:14px;color:var(--muted)}
.way>svg{color:var(--muted-soft)}
.way:not(.way--on) .way-text,.way:not(.way--on) .way-ico{opacity:.62}
.step{border:0;background:none;min-height:38px;padding:0 14px;border-radius:99px;font-size:14px;color:var(--muted)}
.step.done{color:var(--ink-soft)}
.step.active{background:#fff;color:var(--ink-strong);font-weight:600;box-shadow:var(--card-shadow)}
.step:disabled{opacity:.5}
.more{border-radius:18px;background:#fff;margin-top:10px;padding:0 16px;box-shadow:var(--card-shadow)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;cursor:pointer;list-style:none;font-size:15px;font-weight:600}
.more summary::-webkit-details-marker{display:none}
.more summary svg{width:16px;height:16px;color:var(--muted-soft);transition:transform .15s}
.more[open] summary svg{transform:rotate(90deg)}
.more-body{padding:0 0 16px;min-width:0}
.more-body .field-label:first-child{margin-top:0}
.offer-row{padding:14px 16px;border-radius:20px;background:#fff;margin-bottom:10px;box-shadow:var(--card-shadow)}
.offer-row:not(.on){background:transparent;box-shadow:0 0 0 1px var(--line)}
.offer-row:not(.on) .offer-sym,.offer-row:not(.on) .offer-name{opacity:.55}
.offer-line{display:flex;align-items:center;gap:12px}
.offer-name{flex:1;display:grid;gap:2px;min-width:0}
.offer-name strong{font-size:16px}
.offer-name small{font-size:13px;color:var(--muted);line-height:1.35}
.offer-sym{background:var(--lavender);color:var(--violet-ink)}
.offer-price{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.offer-price .price-field{flex-wrap:nowrap;gap:6px}
.offer-price input{width:92px;min-height:40px;text-align:right;font-size:22px;border:0;padding:0}
.offer-price .price-field span{font-size:18px;font-weight:600;color:var(--ink)}
.offer-row .more{background:transparent;box-shadow:none;margin-top:4px;padding:0}
.offer-row .more summary{min-height:44px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.sale-panel strong,.promo-panel>strong{font-size:15px}
.card-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-switch h2{margin:0!important}
.photo-panel{padding:0}
.photo-row{display:flex;align-items:center;gap:16px}
.photo-panel .photo-row{margin:0 0 4px}
.photo-actions .pill-btn{cursor:pointer}
.site-edit{margin-top:22px}
.site-edit-hello{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.site-edit .suggestions{margin:0 -20px;padding:12px 20px 0}
.site-edit .composer{margin-top:10px}
.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.theme-pick{border:0;background:#fff;box-shadow:var(--card-shadow);padding-bottom:12px}
.theme-pick strong{font-size:14px;font-weight:600;line-height:1.25}
.theme-pick .tp-sample{height:64px}
.theme-pick.active{box-shadow:0 0 0 2px var(--violet)}

/* The site next to the talk, in a browser window */
.site-pane{display:none}
.look-preview{margin-bottom:6px}
.browser{display:flex;flex-direction:column;min-width:0;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.browser-bar{display:flex;align-items:center;gap:6px;flex:none;height:38px;padding:0 14px;background:#fbfbfc;border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#e2e0e6}
.browser-bar span{flex:1;min-width:0;padding-right:40px;text-align:center;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-body{min-height:0;overflow:auto;padding:0}
dialog .browser{margin-top:12px;max-height:72dvh}
.site-note{display:flex;align-items:center;gap:8px;position:absolute;left:50%;bottom:44px;transform:translateX(-50%);max-width:calc(100% - 96px);padding:10px 16px 10px 12px;border-radius:99px;background:var(--ink-strong);color:#fff;font-size:14px;line-height:1.3;box-shadow:0 14px 30px -14px #1d1c2180;animation:rise .26s ease-out}
.site-note svg{width:16px;height:16px;color:#9fe0bf}
.site-note span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* «Это уже твоё» */
.launched{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:1240px;margin:0 auto;padding:18px 20px 48px}
.launched h1{font-size:clamp(44px,12vw,72px);line-height:1;letter-spacing:-.04em;color:var(--ink-strong)}
.launched .lead{font-size:18px;margin:14px 0 22px}
.share-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 18px;border-radius:99px;background:#fff;box-shadow:var(--card-shadow)}
.share-link a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink-strong);text-decoration:none}
.launched-actions{display:grid;gap:10px;margin-top:12px}
.launched-actions .primary,.launched-actions .secondary{max-width:none}
.checks{list-style:none;margin:20px 0 6px;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-soft)}
.checks li{display:flex;align-items:center;gap:10px}
.checks svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--green-bg);color:var(--green)}
.launched-site{min-width:0}
.launched-site .browser{max-height:70dvh}

/* Cabinet */
.cab{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.cab-side,.cab-mira{display:none}
.cab-body{min-width:0}
.cab-top{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px}
.crumb{display:none;font-size:13px;color:var(--muted)}
.who{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:14px;color:var(--ink-soft)}
.who img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.cab-tabs{position:sticky;top:0;z-index:10;display:flex;gap:2px;overflow-x:auto;padding:6px 12px 8px;background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(14px);border-bottom:0;scrollbar-width:none}
.cab-tabs::-webkit-scrollbar{display:none}
.cab-tabs button{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:99px;background:transparent;color:var(--muted);font-size:14px}
.cab-tabs button.active{background:#fff;color:var(--ink-strong);font-weight:600;box-shadow:var(--card-shadow)}
.cab-main{max-width:880px;margin:0 auto;padding:14px 16px 104px;min-width:0}
.cab-main>h1{font-size:clamp(30px,8vw,40px);line-height:1.06;letter-spacing:-.035em;color:var(--ink-strong)}
.cab-main>.lead{margin:10px 0 20px;color:var(--muted);font-size:16px}
.cab-card{padding:18px;border-radius:22px;background:#fff;box-shadow:var(--card-shadow);margin-top:12px;min-width:0}
.cab-card h2{font-size:18px;letter-spacing:-.02em;font-weight:650;margin-bottom:8px}
.cab-card>.caption:first-of-type{margin-top:0}
.site-link{font-size:14px;color:var(--violet-ink);text-decoration:none;overflow-wrap:anywhere}
.site-link:hover{text-decoration:underline}
.kpis{gap:12px;margin-top:12px}
.kpis div{border:0;border-radius:20px;background:#fff;box-shadow:var(--card-shadow);padding:14px 16px}
.kpis strong{font-size:clamp(20px,5vw,26px);letter-spacing:-.02em}
.kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ready{box-shadow:var(--card-shadow);border-radius:22px;margin:12px 0 0;padding:18px}
.orders{gap:0;margin:0}
.orders li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto minmax(64px,auto);align-items:center;gap:10px;padding:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;font-size:14px}
.orders li:first-child{border-top:0}
.orders li strong{margin:0;order:0;text-align:right}
.order-who{font-weight:550;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-what{min-width:0;color:var(--ink-soft)}
.order-what small{display:block;font-size:12px;color:var(--muted-soft)}
.orders small{flex-basis:auto;order:0}
.from-list{list-style:none;margin:0;padding:0}
.from-list li{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.from-list li:first-child{border-top:0}
.clients{gap:0}
.history small{color:var(--muted);flex:none}
.tool-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 0 4px}
.tool-tabs button{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:99px;background:transparent;color:var(--muted);font-size:14px}
.tool-tabs button.active{background:var(--ink);color:#fff;font-weight:500}
.post{border:0;margin-top:12px;background:#fff;border-radius:22px;padding:16px 18px;box-shadow:var(--card-shadow)}
.post-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.post-head strong{font-size:16px}
.post-head small{font-size:13px;color:var(--muted)}
.post-head .pill-btn{margin-left:auto;min-height:34px;padding:4px 12px;font-size:12px}
.post-text{resize:vertical;line-height:1.5;font-size:15px;box-shadow:none;background:var(--canvas);border-radius:14px}
.post-actions,.find-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.post-actions .pill-btn,.find-links .pill-btn{min-height:38px}
.draft{margin-top:12px;padding:14px;border-radius:14px;background:var(--canvas);font-size:15px;line-height:1.5;color:var(--ink);display:grid;gap:10px;justify-items:start}
.ad-plan{list-style:none;margin:0;padding:0}
.ad-plan li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.ad-plan li:first-child{border-top:0}
.ad-plan li>div:first-child{display:grid;gap:2px}
.ad-plan small{font-size:13px;color:var(--muted)}
.serp{padding:14px 16px;border-radius:14px;background:var(--canvas);display:grid;gap:3px}
.serp small{font-size:12px;color:var(--muted)}
.serp strong{font-size:18px;font-weight:500;color:#1a5fb4;letter-spacing:-.01em}
.serp p{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.cab-side-foot{margin-top:auto;padding:0 12px}
.cab-side-foot .logo-tribute{height:20px}
.agent-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px}
.agent-head .logo-mira{height:24px}
.agent-head small{font-size:12px;color:var(--muted)}
.cab-mira .messages{flex:1;min-height:0;overflow-y:auto;padding:2px 2px 8px}
.msg--agent{background:var(--lavender);color:var(--ink-body)}
.cab-mira .suggestions{margin:0;padding:8px 0 2px;flex-wrap:wrap;overflow:visible}
.cab-mira .composer{margin-top:8px}
.mira-fab{position:fixed;z-index:30;right:16px;bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:99px;background:var(--ink-strong);color:#fff;font-size:15px;font-weight:550;box-shadow:0 14px 30px -12px #1d1c2190}
.mira-fab .mark{filter:invert(1)}
.cab[data-tab=agent] .cab-main,.cab[data-tab=agent] .cab-tabs{display:none}
.cab[data-tab=agent] .cab-mira{display:flex;flex-direction:column;height:calc(100dvh - 56px);padding:6px 16px 76px}

/* Buyer: the same words as the author sees, nothing about how the funnel works */
.copy-link{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;font-size:14px;color:var(--ink-soft)}
.saved-mail{margin-top:12px}
.saved-meta .row{margin-top:8px}
.foot-link{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;display:inline}
.checkout{border:0;padding:0;margin:14px 0 6px}
.checkout-total{display:grid;gap:2px;padding:0 2px}
.checkout-sum{display:flex;align-items:baseline;gap:10px}
.checkout-sum strong{font-family:var(--display);font-weight:var(--title-weight,700);font-size:38px;letter-spacing:-.02em;color:var(--ink-strong)}
.checkout-sum s{font-size:18px;color:var(--muted)}
.checkout-total small{font-size:13px;color:var(--muted)}
.pay-by{margin-top:12px}
.pay-by .logo-tribute{height:18px}
dialog.sheet .sheet-sub{margin:6px 0 14px}
.ox-gets li svg{color:var(--green)}

@media (min-width:640px){
 .launched-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
 .topbar .icon-button{display:none}
 .who{display:inline-flex}
 .cab-main{padding:20px 28px 104px}
}
@media (min-width:900px){
 .cab{grid-template-columns:232px minmax(0,1fr)}
 .cab-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100dvh;padding:22px 14px 22px;background:#fff;box-shadow:1px 0 0 var(--line)}
 .cab-side .brand{padding:0 12px}
 .cab-side nav{display:grid;gap:2px}
 .nav-item{display:flex;align-items:center;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;text-align:left;font-size:15px;color:var(--ink-soft)}
 .nav-item:hover{background:var(--canvas)}
 .nav-item.current{background:var(--lavender-strong);color:var(--violet-ink);font-weight:600}
 .cab-tabs,.cab-top .brand{display:none}
 .crumb{display:inline}
 .cab-top{height:64px;padding:0 28px;max-width:880px;margin:0 auto}
 .cab-main{padding-top:6px}
 .cab[data-tab=agent] .cab-tabs{display:none}
}
@media (min-width:1024px){
 .site-pane{display:block;position:sticky;top:68px;height:calc(100dvh - 68px);padding:8px 28px 24px 0}
 .site-pane .browser{height:100%;box-shadow:0 0 0 1px var(--line),0 40px 80px -60px #1d1c2150}
 body.has-site-bar{padding-bottom:0}
 .look-preview{display:none}
 .site-edit .suggestions{margin:0;padding:12px 0 0;flex-wrap:wrap;overflow:visible}
 .launched{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:center;padding:12px 32px 40px;min-height:calc(100dvh - 68px)}
 .launched-site .browser{max-height:calc(100dvh - 128px);box-shadow:0 0 0 1px var(--line),0 40px 80px -60px #1d1c2150}
}
@media (min-width:1280px){
 .cab{grid-template-columns:232px minmax(0,1fr) 340px}
 .cab-mira{display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;padding:20px 18px 18px;background:#fff;box-shadow:-1px 0 0 var(--line)}
 .mira-fab{display:none}
 .cab[data-tab=agent] .cab-main{display:block}
 .cab[data-tab=agent] .cab-mira{height:100dvh;padding:20px 18px 18px}
}
@media (prefers-reduced-motion:reduce){.site-note{animation:none}}

.browser-body>[inert]{min-height:100%}
.tcard-face{position:relative;padding-bottom:24px}
.tcard-face small{position:absolute;left:0;right:0;bottom:8px;text-align:center}
body:has(.mira-fab) #toast{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 60px)}
@media (min-width:1280px){body:has(.mira-fab) #toast{bottom:max(20px,env(safe-area-inset-bottom))}}
@media (max-width:359px){.share-link{padding-left:14px}.share-link .pill-btn{padding:6px 10px}}

/* v8 · the studio is a conversation. One composer at the bottom: voice, text,
   a file. Choices live inside Mira's messages, nothing else presses from below.
   The cabinet is a place of work, the author's site is a place of the author:
   different type, different air, nothing shared but the data. */
.logo-lockup{height:26px;width:auto}
.studio-top{display:flex;align-items:center;gap:6px;flex:none;min-height:60px;padding:0 16px}
.studio-top .icon-button{margin-left:-12px}
.studio-top .topbar-end{display:flex;align-items:center;gap:8px;margin-left:auto}
.mode{font-size:13px;color:var(--muted)}
.top-link{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 12px;border:0;border-radius:99px;background:#fff;box-shadow:var(--card-shadow);color:var(--ink);font-size:14px}
.top-link svg{width:14px;height:14px;color:var(--muted)}
.top-publish{min-height:38px;padding:0 16px;border:0;border-radius:99px;background:var(--violet);color:#fff;font-size:14px;font-weight:600}
.top-publish:hover:not(:disabled){background:var(--violet-dark)}
.stage-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:none;padding:0 16px}
.stage-line i{height:3px;border-radius:9px;background:#e4e2e9}
.stage-line i.on{background:var(--violet)}
.chat-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.chat-body{flex:1;min-height:0;display:flex}
.chat{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 12px}
.thread-in{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px;margin:0 auto}
.thread-in>h1{font-size:clamp(32px,9vw,44px);line-height:1.05;letter-spacing:-.035em;color:var(--ink-strong);margin-top:4px}
.thread-in>.lead{margin:2px 0 8px;font-size:16px}
.chat-foot{flex:none;padding:8px 16px max(12px,env(safe-area-inset-bottom))}
.chat-foot .composer{width:100%;max-width:560px;margin:0 auto;background:#fff}
.bot-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--ink-strong)}
.bot-name .mark{width:26px;height:26px}
.bubble{align-self:flex-start;max-width:min(94%,500px);padding:13px 16px;border-radius:20px;background:#fff;box-shadow:var(--card-shadow);font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.bubble strong{font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--ink-strong)}
.bubble p{margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted)}
.bubble.mine{align-self:flex-end;background:var(--lavender-strong);box-shadow:none;color:var(--ink-strong)}
.bubble.mine img{width:120px;height:150px;object-fit:cover;border-radius:14px}
.bubble--voice{display:grid;gap:2px}
.bubble--voice small{font-size:12px;color:var(--violet-ink)}
.wave{display:flex;align-items:center;gap:3px;height:24px}
.wave i{width:3px;height:10px;border-radius:2px;background:var(--violet)}
.wave i:nth-child(3n){height:20px}.wave i:nth-child(3n+1){height:14px}.wave i:nth-child(5n){height:24px}.wave i:nth-child(7n){height:7px}
.bubble--typing{display:inline-flex;gap:5px;padding:16px}
.bubble--typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-soft);animation:type 1s infinite}
.bubble--typing i:nth-child(2){animation-delay:.15s}.bubble--typing i:nth-child(3){animation-delay:.3s}
@keyframes type{0%,70%,100%{opacity:.35}35%{opacity:1}}
.note-line{display:flex;align-items:center;gap:6px;padding-left:4px;font-size:13px;line-height:1.3;color:var(--muted)}
.note-line svg{width:15px;height:15px;color:var(--green)}
.turn-note{margin-top:2px;font-size:14px;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:44px;padding:0 18px;border:0;border-radius:99px;background:var(--lavender-strong);color:var(--violet-ink);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.opt--yes{background:var(--violet);color:#fff}
.opt--yes:hover:not(:disabled){background:var(--violet-dark)}
.thread-in .chip-row{margin:0}
.thread-in .chip-row .chip{min-height:42px;padding:8px 16px;font-size:15px}
.thread-in .ways{margin:2px 0}
.thread-in .more{margin-top:0}
.turn-card{display:grid;gap:8px;min-width:0}
.turn-card .offer-row{margin:0}
.turn-card .slug-field{background:#fff}
.tones{display:flex;flex-wrap:wrap;gap:6px}
.tones .chip{min-height:38px;padding:6px 14px;font-size:14px}
.tones .chip.active{background:var(--lavender-strong);border-color:transparent;color:var(--violet-ink);font-weight:600}
.pitch-card{display:grid;gap:12px;padding:16px;border-radius:22px;background:#fff;box-shadow:var(--card-shadow);min-width:0}
.pitch-copy{padding:14px;border-radius:14px;background:#f5f2ec;font-size:15px;line-height:1.5;color:var(--ink-body)}
.cab-card .pitch-copy{margin:12px 0}
.pitch-ask{font-size:15px;font-weight:600;color:var(--ink-strong)}
.attach-btn{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--muted);cursor:pointer}
.attach-btn:hover{background:var(--canvas)}
.composer:has(.attach-btn){padding-left:4px}
.composer textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.look-preview .browser{max-height:280px}
dialog.wide{width:min(1100px,94vw);max-width:none}
dialog.wide .browser{max-height:78dvh}
.site-edit-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.site-edit-view{display:none}
.back-link{margin:0 0 4px -2px}
.site-edit-grid .socials-grid{grid-template-columns:minmax(0,1fr)}
.cab-main>.primary,.cab-main>.secondary{margin-top:14px}
.cab-main>.more{margin-top:10px}

/* Cabinet: a place of work */
.cab-side-foot{font-size:12px;color:var(--muted-soft)}
.cab-side .brand{display:block}
.cab-top .logo-lockup{height:22px}
.miles-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:12px}
.miles-head h2{margin:0}
.miles-head small{font-size:12px;color:var(--muted)}
.miles-row{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.miles-row li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.miles-row span{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--chip-gray);font-size:12px;font-weight:600}
.miles-row svg{width:14px;height:14px}
.miles-row .done{color:var(--green)}.miles-row .done span{background:var(--green-bg)}
.miles-row .now{color:var(--violet-ink);font-weight:600}.miles-row .now span{background:var(--lavender-strong)}
.next-card{margin-top:12px;padding:20px;border-radius:22px;background:var(--lavender-strong)}
.next-card small{font-size:13px;color:var(--violet-ink)}
.next-card h2{margin-top:6px;font-size:clamp(21px,5.4vw,26px);line-height:1.15;letter-spacing:-.025em;color:var(--ink-strong)}
.next-card p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.next-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.next-actions .opt:first-child{background:var(--violet);color:#fff}
.next-actions .opt{background:#fff;color:var(--violet-ink)}
.kpis--4{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.kpis--4 div{background:var(--canvas);box-shadow:none}
.project-row{display:flex;align-items:center;gap:14px}
.project-row img,.project-mark{width:52px;height:64px;flex:none;border-radius:26px 26px 10px 10px;object-fit:cover}
.project-mark{display:grid;place-items:center;background:var(--lavender);color:var(--violet-ink);font-size:22px}
.project-row>div{flex:1;min-width:0;display:grid;gap:2px}
.project-row strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-row small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edit-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sources h2{margin-bottom:4px}
.source{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.source:first-of-type{border-top:0}
.source>div{display:grid;gap:2px;min-width:0}
.source strong{font-size:15px}
.source small{font-size:13px;line-height:1.35;color:var(--muted)}
.source .pill-btn{flex:none;white-space:nowrap}
.done-label{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--green)}
.done-label svg{width:14px;height:14px}
.tool-tabs{margin-top:16px}
.channels-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.channels-line h2{margin:0}
.channels-line .caption{margin-top:2px}
.channels-line .pill-btn{flex:none}
.pill-btn.approved{background:var(--violet);box-shadow:none;color:#fff}
.pill-btn.approved:hover{background:var(--violet-dark)}
.post-head .badge{margin-left:auto;font-size:12px}
.post-head .badge svg{width:13px;height:13px}
.channel-list{list-style:none;margin:14px 0;padding:0}
.channel-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.channel-list li:first-child{border-top:0}
.channel-list li>div{flex:1;min-width:0;display:grid;gap:1px}
.channel-list strong{font-size:15px}
.channel-list small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--chip-gray)}
.state.on{background:var(--green-bg);color:var(--green)}
.state svg{width:14px;height:14px}
.channel-form{display:grid;gap:10px}
.channel-form .field-label{margin:0}
.plan{list-style:none;margin:8px 0 0;padding:0}
.plan li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.plan li:first-child{border-top:0}
.plan li>strong{flex:none;font-weight:600}
.plan li>span:not(.badge){flex:1;min-width:120px;color:var(--ink-soft)}
.plan .icon-button{width:34px;height:34px;color:var(--muted)}
.plan .icon-button svg{width:16px;height:16px}
.plan-form{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.plan-form .field-label{margin:0 0 6px}
.balance-card{display:flex;align-items:center;justify-content:space-between;gap:12px}
.balance-card>div{display:grid;gap:2px}
.balance-card small{font-size:13px;color:var(--muted)}
.balance-card strong{font-size:26px;letter-spacing:-.02em;color:var(--ink-strong)}
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ad-plan{margin-top:14px;padding:4px 14px;border-radius:14px;background:var(--canvas)}
.ad-plan li{font-size:14px;color:var(--ink-soft)}
.ad-plan li strong{color:var(--ink-strong);font-weight:600}
.funnel-real{list-style:none;margin:12px 0 0;padding:0}
.funnel-real li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;font-size:15px}
.funnel-real li:first-child{border-top:0}
.funnel-real span{flex:1;min-width:0;color:var(--ink-soft)}
.funnel-real small{flex-basis:100%;font-size:12px;color:var(--muted)}
.feed-title{margin-top:16px;font-size:15px}
.sales-feed{list-style:none;margin:6px 0 0;padding:0}
.sales-feed li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sales-feed li:first-child{border-top:0}
.sales-feed li>div{flex:1;min-width:0;display:grid;gap:1px}
.sales-feed strong{font-size:15px;font-weight:600}
.sales-feed small{font-size:12px;color:var(--muted)}
.amount{font-weight:600;color:var(--green);font-size:15px}
.avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--lavender);color:var(--violet-ink);font-size:12px;font-weight:600}
.mention{margin-top:12px;padding:16px 18px;border-radius:22px;background:#fff;box-shadow:var(--card-shadow)}
.mention>small{font-size:13px;color:var(--muted)}
.mention-q{margin-top:6px;font-size:16px;line-height:1.4;font-weight:550;color:var(--ink-strong)}
.reply{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--lavender);font-size:15px;line-height:1.5;color:var(--ink-body)}
.mention-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.topup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.topup-grid .secondary{min-height:50px;padding:0 6px;font-size:15px}
.topup-custom .row{gap:8px}
.topup-custom .secondary{width:auto;flex:none;padding:0 16px}
.clients{list-style:none;margin:0;padding:0}
.clients li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.clients li:first-child{border-top:0}
.clients li>div{flex:1;min-width:140px;display:grid;gap:1px}
.clients strong{font-size:15px}
.clients small{font-size:12px;color:var(--muted)}
.agent-head{justify-content:flex-start}
.agent-head .mark{width:24px;height:24px}
.agent-head strong{font-size:15px;font-weight:650}
.guide-actions{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.guide-actions .opt{min-height:36px;padding:0 13px;font-size:13px}
.cab-mira .messages{display:flex;flex-direction:column;gap:8px}
.cab-mira .msg{max-width:100%;margin:0}

/* The author's site: their name is the brand */
.topbar--shop{background:transparent;backdrop-filter:none}
.shop-brand{border:0;background:none;padding:0;font-family:var(--display);font-size:20px;font-weight:var(--title-weight,600);letter-spacing:-.01em;color:var(--ink-strong);cursor:pointer}
.site-kind{font-size:13px;color:var(--muted)}
.reading-page{width:100%;max-width:640px;margin:0 auto}
.overline{font-size:14px;color:var(--muted);margin-bottom:8px}
.reading-page>h1{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(34px,10vw,48px);line-height:1.06;letter-spacing:-.025em;color:var(--ink-strong)}
.reading{margin-top:24px}
.reading h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(25px,7vw,32px);line-height:1.14;letter-spacing:-.02em;color:var(--ink-strong)}
.reading p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--ink-body)}
.reading-cut{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 112%);mask-image:linear-gradient(180deg,#000 50%,transparent 112%)}
.reading-dock{position:sticky;bottom:max(10px,env(safe-area-inset-bottom));z-index:5;display:grid;gap:8px;margin-top:22px;padding:12px;border-radius:24px;background:color-mix(in srgb,var(--page) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px -22px #1d1c2170;text-align:center}
.reading-dock p{font-size:14px;line-height:1.35;color:var(--muted)}
.reading-dock .sale-timer{margin:0}
.ahead{margin-top:30px}
.ahead>h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:22px;letter-spacing:-.015em;color:var(--ink-strong)}
.ahead .teaser{position:relative;margin-top:12px;padding:16px 18px;border:0;border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow)}
.ahead .teaser small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.ahead .teaser p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.ahead .ghost-lines{margin-top:8px}
.mail-card{margin-top:18px;padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:var(--card-shadow);display:grid;gap:10px}
.mail-card strong{font-size:15px;font-weight:600;color:var(--ink-strong)}
.mail-row{display:grid;gap:8px}
.mail-card .caption{margin:0}
.intro-row{display:flex;align-items:center;gap:14px;margin:16px 0}
.intro-row img{width:64px;height:80px;flex:none;object-fit:cover;border-radius:32px 32px 12px 12px}
.intro-row p{font-size:16px;line-height:1.45;color:var(--ink-body)}
.shop-about>h1{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(36px,10vw,52px);line-height:1.04;letter-spacing:-.025em;color:var(--ink-strong)}
.shop-about .ox-gets{margin-bottom:20px}
.shop-form>h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:22px;letter-spacing:-.015em;color:var(--ink-strong);margin-bottom:6px}
.shop-form .field-label:first-of-type{margin-top:12px}
.buy-sheet h3{font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:-.02em;padding-right:36px}
.sheet-list{list-style:none;display:grid;gap:10px;margin:14px 0;padding:0}
.sheet-list li{display:flex;gap:10px;font-size:15px;line-height:1.35;color:var(--ink-strong)}
.sheet-list svg{width:18px;height:18px;margin-top:1px;color:var(--green)}
.sheet-list small{display:block;font-size:13px;color:var(--muted)}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:6px 0 12px}
.pay-row .logo-tribute{flex:none;height:20px;width:auto}
.pay-row .checkout-sum strong{font-size:32px}

.birth-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.time-chips{margin-top:8px}
.time-chips .chip{min-height:34px;padding:4px 12px;font-size:13px}
@media (max-width:359px){.birth-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639px){.shop-about .ox-gets{display:none}.intro-row{margin-bottom:6px}.shop-form>h2{margin-top:12px}}
@media (max-width:479px){
 .studio-top{gap:2px;padding:0 12px}
 .studio-top .logo-lockup{height:22px}
 .studio-top .topbar-end{gap:6px}
 .top-link{width:38px;padding:0;justify-content:center;font-size:0;gap:0}
 .top-link svg{width:16px;height:16px;color:var(--ink)}
 .top-publish{padding:0 13px;font-size:13px}
}
@media (min-width:640px){
 .miles-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
 .miles-row li{position:relative;display:grid;gap:8px;align-content:start;padding-right:10px;font-size:13px;line-height:1.25}
 .miles-row li:not(:last-child)::after{content:'';position:absolute;top:13px;left:34px;right:8px;height:1px;background:var(--line)}
 .kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}
 .plan-form{grid-template-columns:repeat(3,minmax(0,1fr))}
 .plan-form .secondary{grid-column:1/-1}
 .mail-row{grid-template-columns:minmax(0,1fr) auto}
 .mail-row .secondary{width:auto;padding:0 18px}
}
@media (min-width:1024px){
 .studio-top{min-height:68px;padding:0 28px}
 .stage-line{padding:0 28px}
 .chat-body{gap:0;max-width:1640px;width:100%;margin:0 auto}
 .chat{flex:0 0 min(46%,640px)}
 .site-pane{display:block;flex:1;position:relative;top:0;min-width:0;height:auto;padding:14px 28px 20px 8px}
 .site-pane .browser{height:100%}
 .look-preview{display:none}
 .thread{padding:24px 28px 12px}
 .thread-in{margin:0 0 0 auto;max-width:520px}
 .chat-foot{padding:8px 28px 18px}
 .chat-foot .composer{margin:0 0 0 auto;max-width:520px}
 .chat-body--solo{justify-content:center}
 .chat-body--solo .chat{flex:0 1 620px}
 .chat-body--solo .thread-in,.chat-body--solo .chat-foot .composer{margin:0 auto;max-width:560px}
 .chat-body--solo .thread{padding-top:8vh}
 .site-edit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
 .site-edit-view{display:grid;gap:10px;position:sticky;top:18px;margin-top:12px}
 .site-edit-view .browser{max-height:calc(100dvh - 130px)}
 .reading-page{padding-bottom:8px}
}
@media (min-width:900px) and (max-width:1279px){
 .cab[data-tab=agent] .cab-body{display:none}
 .cab[data-tab=agent] .cab-mira{grid-column:2;grid-row:1;width:100%;max-width:640px;height:100dvh;margin:0 auto;padding:20px 24px 76px}
}
@media (max-width:359px){.cab-card .tp-sample b{font-size:15px}.cab-card .tp-sample{padding-left:8px;padding-right:8px}}
@media (prefers-reduced-motion:reduce){.bubble--typing i{animation:none}}

/* Phone: a product form fills the first screen and ends with its one action.
   The footer stays below it. */
@media (max-width:639px){
 .page--form{display:flex;flex-direction:column;min-height:calc(100svh - 60px);padding-bottom:max(30px,env(safe-area-inset-bottom))}
 .page--form .shop-grid,.page--form .shop-form,.page--form .birth-form{flex:1;display:flex;flex-direction:column}
 .page--form .birth-form .note{order:1;margin-top:auto;padding-top:20px}
 .page--form .birth-form .primary{order:2;margin-top:10px}
}
/* Phone: the chart is compact, so the text of the reading starts on the first screen. */
@media (max-width:559px){
 .shop-root .page:not(.page--landing) .reading-page>h1{font-size:clamp(24px,7vw,32px)}
 .reading-page>h1 br{display:none}
 .chart-card{gap:10px;margin:4px 0 0;padding:12px 12px 14px}
 .chart-card .chart-wheel{max-width:216px}
 .chart-side .eyebrow{display:none}
 .big-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .big-three li{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0;border:0;font-size:12px;text-align:center}
 .big-three .glyph{font-size:15px}
 .big-three strong{font-size:12px;line-height:1.25;text-align:center;white-space:nowrap}
 .big-three li.off strong{font-size:11px;white-space:normal}
 .chart-side .caption{margin-top:8px;font-size:12px;text-align:center}
 .reading{margin-top:18px}
}
/* The hints under the question wrap, so every one of them is readable. */
.ask-examples{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0}
/* Text scrolling under the site header stays out of the way. */
.shop-root .topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* A round portrait is zoomed to the head, which sits high in the middle of a 4:5 photo. */
.face{display:block;flex:none;overflow:hidden;border-radius:50%;background:var(--fill)}
.face img{display:block;width:100%;height:auto;transform:scale(1.45);transform-origin:50% 0}
.who-face{width:32px;height:32px}

/* v9 · the author's site is a real site: a top bar with a brand and navigation,
   scenarios drawn as what a person gets, pickers in the site's own colours, and
   a reading that never ends in a dead end. The same rules are written down for
   every niche in skills/blueprints/esoteric/design.md. */
.theme-parchment{--page:#f1e6cd;--surface:#fbf4e3;--canvas:#e9dcbf;--tint:#f6eed9;--lavender:#e9dcbd;--lavender-strong:#e0cfa6;--lilac:#c9b27f;--line:#dccba6;--chip-gray:#ebe0c6;--fill:#e7d9b7;
 --ink:#33261a;--ink-strong:#241a10;--ink-soft:#5c4a35;--ink-body:#443524;--muted:#75634c;--muted-soft:#a08c6e;
 --violet:#1f5f8b;--violet-dark:#174a6e;--violet-ink:#174a6e;--on-accent:#fff7e6;
 --wheel-fill:#f3e9d0;--wheel-ring:#b89a5c;--wheel-ring2:#cdb684;--wheel-ring3:#dccba6;--wheel-spoke:#d3bf91;--wheel-text:#8a7350;--wheel-tri:#b89a5c;--wheel-dot:#c9b27f;
 --glow:#ecd39b;--display:var(--serif);--title-weight:500;
 --hx:radial-gradient(ellipse 60% 70% at 92% 0%,#f0d59c 0%,transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,#e5d3a8 0%,transparent 70%)}
.font-serif{--display:var(--serif);--title-weight:500}
.font-sans{--display:var(--sans);--title-weight:720}
.font-rounded{--display:var(--rounded);--title-weight:640}

/* Glyphs are drawn, so they sit exactly in the middle of their circles */
.hello-mark,.bar-mark,.portrait-badge,.photo-arch--empty,.project-mark,.offer-sym,.way-ico,.sb-ico,.resume-ico,.mine-ico,.pair-sun,.pair-amp,.dot-glyph{display:grid;place-items:center;line-height:0}
.hello-mark .glyph-ico,.bar-mark .glyph-ico,.portrait-badge .glyph-ico,.sb-ico .glyph-ico,.resume-ico .glyph-ico,.mine-ico .glyph-ico{width:56%;height:56%}
.offer-sym .glyph-ico,.way-ico .glyph-ico{width:50%;height:50%}
.photo-arch--empty .glyph-ico,.project-mark .glyph-ico{width:40%;height:40%}
.pair-sun .glyph-ico,.pair-amp .glyph-ico{width:26px;height:26px}
.dot-glyph{width:20px;height:20px}
.dot-glyph .glyph-ico{width:100%;height:100%}

/* Top bar */
.sitebar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--page) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 0 var(--line)}
.sitebar-in{display:flex;align-items:center;gap:8px;max-width:1120px;height:64px;margin:0 auto;padding:0 14px 0 20px}
.sb-brand{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;border:0;background:none;padding:0;color:var(--ink-strong);text-align:left}
.sb-brand>span:last-child{display:grid;min-width:0}
.sb-brand strong{font-family:var(--display);font-weight:var(--title-weight,600);font-size:19px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-brand small{font-size:12px;line-height:1.2;color:var(--muted);white-space:nowrap}
.bar-mark,.bar-face{width:40px;height:40px;flex:none;border-radius:50%}
.bar-mark{background:var(--fill);color:var(--violet-ink);font-size:20px}
.sb-nav{display:none;align-items:center;gap:2px;margin-left:28px}
.sb-link,.sb-menu>summary,.sb-mine{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 13px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;list-style:none;white-space:nowrap}
.sb-menu>summary::-webkit-details-marker{display:none}
.sb-link:hover,.sb-menu>summary:hover,.sb-mine:hover,.sb-menu[open]>summary{background:var(--fill)}
.sb-menu>summary svg,.sb-mine svg{width:18px;height:18px}
.sb-menu{position:relative}
.sb-drop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:320px;display:grid;gap:2px;padding:8px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 60px -24px #1d1c2159}
.sb-drop--right{left:auto;right:0;width:260px;padding:14px;gap:12px}
.sb-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:14px;background:none;color:var(--ink);text-align:left}
.sb-item:hover{background:var(--fill)}
.sb-item>span:last-child{display:grid;gap:1px;min-width:0}
.sb-item strong{font-size:15px;font-weight:600}
.sb-item small{font-size:13px;line-height:1.35;color:var(--muted)}
.sb-ico,.resume-ico,.mine-ico{width:40px;height:40px;flex:none;border-radius:50%;background:var(--fill);color:var(--violet-ink);font-size:20px}
.sb-choice small{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}
.sb-choice .chip{min-height:36px;padding:6px 12px;font-size:14px}
.sb-tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.sb-locale{display:none}
.sb-mine{display:none}
.sb-burger{color:var(--ink)}
.sb-sheet{display:grid;gap:2px;margin-top:10px}
.sb-row{display:flex;align-items:center;min-height:50px;padding:0 10px;border:0;border-radius:14px;background:none;color:var(--ink);font-size:16px;font-weight:550;text-align:left}
.sb-row:hover{background:var(--fill)}
.sb-sheet-locale{display:grid;gap:12px;margin-top:10px;padding:14px 10px 2px;border-top:1px solid var(--line)}
.crumbs{margin:-6px 0 12px}
.crumb-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px 6px 6px;border:0;border-radius:12px;background:none;color:var(--ink-soft);font-size:14px}
.crumb-back:hover{background:var(--fill);color:var(--ink)}
.crumb-back svg{width:17px;height:17px}

/* Landing: the question, then the choice of what to do, visible at once */
.hx-band{position:relative;overflow:hidden}
.hx{position:relative;z-index:1;padding-bottom:28px}
.hx-corner{position:absolute;right:0;bottom:0;max-width:40%;height:86%;aspect-ratio:3/4;color:var(--violet);opacity:.16;pointer-events:none}
.hx-corner .ornament{width:100%;height:100%}
.site-band{height:44px;overflow:hidden;color:var(--violet);opacity:.5}
.site-band .ornament{display:block;width:100%;height:100%}
.motif-none .site-band,.motif-none .hx-corner{display:none}
.scenes{max-width:1120px;margin:0 auto;padding:8px 20px 12px}
.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.scene{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:0;border-radius:24px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 0 0 1px var(--line),0 18px 40px -34px #3a24104d;transition:transform .18s,box-shadow .18s}
.scene:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--violet),0 22px 44px -30px #3a24105c}
.scene>svg{position:absolute;right:12px;bottom:12px;width:18px;height:18px;color:var(--muted-soft)}
.scene-text{display:grid;gap:2px;min-width:0}
.scene-text small{font-size:12px;font-weight:600;color:var(--violet-ink)}
.scene-text strong{font-size:clamp(15px,2.6cqi,17px);font-weight:650;line-height:1.2;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word}
.scene-text span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.35;color:var(--muted)}
.art{position:relative;display:block;height:96px;width:100%;border-radius:16px;background:radial-gradient(ellipse 80% 90% at 50% 100%,var(--glow),transparent 75%),var(--fill);overflow:hidden;color:var(--violet-ink)}
.art--cards span{position:absolute;bottom:-18px;left:50%;width:50px;margin-left:-25px;border-radius:5px;overflow:hidden;box-shadow:0 8px 16px -8px #0006}
.art--cards span:nth-child(1){transform:translateX(-34px) rotate(-14deg)}
.art--cards span:nth-child(2){transform:translateY(-8px)}
.art--cards span:nth-child(3){transform:translateX(34px) rotate(14deg)}
.art--wheel{display:grid;place-items:center}
.art--wheel .wheel{width:84px;height:84px}
.art--number{display:grid;place-items:center}
.art--number b{font-family:var(--serif);font-size:62px;font-weight:500;line-height:1;color:var(--violet-ink)}
.art--rings{display:grid;place-items:center}
.art--rings svg{width:96px;height:60px;fill:none;stroke:var(--violet-ink);stroke-width:1.8}
.art--book{display:grid;place-items:center;font-size:48px}
.art--book .glyph-ico{width:48px;height:48px}
.mine-strip-wrap{max-width:1120px;margin:14px auto 0;padding:0 20px}
.mine-strip{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 16px;border:0;border-radius:18px;background:var(--fill);color:var(--ink);font-size:15px;font-weight:550;text-align:left}
.mine-strip span{flex:1;min-width:0}
.mine-strip svg{width:18px;height:18px;color:var(--violet-ink)}
.ox-grid{display:grid;gap:14px;margin-top:18px}
.ox{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;align-content:start;padding:18px!important;border:0!important;border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 20px 44px -36px #3a24104d}
.ox .art{height:128px}
.ox .art--cards span{width:66px;margin-left:-33px;bottom:-28px}
.ox .art--wheel .wheel{width:112px;height:112px}
.ox .art--number b{font-size:84px}
.ox .art--rings svg{width:130px;height:82px}
.ox-info h3{font-size:clamp(24px,5cqi,30px)}
.ox-info>p.ox-needs{font-size:14px;margin:14px 0 12px;color:var(--muted)}
.ox-info .primary{width:100%}
@container (min-width:720px){
 .hx{padding:40px 40px 36px}
 .hx--photo{grid-template-columns:minmax(0,1fr) minmax(240px,340px);column-gap:64px;align-items:center}
 .hx-title{font-size:clamp(44px,6.4cqi,66px)}
 .hx-lead{margin:12px 0 20px}
 .scenes{padding:8px 40px 16px}
 .scene-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .mine-strip-wrap{padding:0 40px}
 .ox-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .ox{padding:22px!important}
}

/* Product pages: two columns on a wide screen, nothing stretched */
.shop-root .page--shop.page--wide:not(.page--landing){max-width:1120px;margin:0 auto;padding:22px 20px 56px;background:transparent;border:0;border-radius:0;box-shadow:none}
.form-page{display:grid;gap:20px}
.fp-about{min-width:0}
.fp-about .art{height:176px;margin-bottom:18px}
.fp-about .art--wheel .wheel{width:150px;height:150px}
.fp-about .art--number b{font-size:112px}
.fp-about .art--rings svg{width:170px;height:106px}
.form-page h1,.tarot-page h1,.mine-page>h1,.course-head h1{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(32px,6vw,52px);line-height:1.06;letter-spacing:-.025em;color:var(--ink-strong)}
.intro-row{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
.intro-row .hello-mark{width:48px;height:48px;flex:none;border-radius:50%;background:var(--fill);color:var(--violet-ink)}
.intro-row p{font-size:16px;line-height:1.5;color:var(--ink-body)}
.form-card{min-width:0;padding:20px 18px 18px;border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 60px -44px #3a24105c}
.form-card>h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:24px;letter-spacing:-.015em;color:var(--ink-strong)}
.form-card .field-label:first-of-type{margin-top:12px}
.form-card .text-input{background:var(--page)}
.fp-about .resume,.tp-main .resume{margin:16px 0 0}
.resume{gap:12px;border:0;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.resume span.resume-ico{display:grid;flex:none}
.tarot-page{display:grid;gap:18px}
.tp-main{min-width:0}
.tp-main .ask{margin-top:6px}
.tp-fan{position:relative;order:-1;height:176px;margin-top:4px}
.tp-fan span{position:absolute;bottom:0;left:50%;width:104px;margin-left:-52px;border-radius:9px;overflow:hidden;box-shadow:0 18px 36px -18px #0000006b}
.tp-fan span:nth-child(1){transform:translateX(-78px) rotate(-11deg)}
.tp-fan span:nth-child(2){transform:translateY(-12px);z-index:1}
.tp-fan span:nth-child(3){transform:translateX(78px) rotate(11deg)}
@media (min-width:900px){
 .form-page{grid-template-columns:minmax(0,1fr) minmax(400px,460px);gap:64px;align-items:start;padding-top:12px}
 .form-card{padding:26px 28px 24px}
 .tarot-page{grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:56px;align-items:center;min-height:min(620px,calc(100dvh - 220px))}
 .tp-fan{order:0;height:420px}
 .tp-fan span{width:210px;margin-left:-105px;bottom:20px}
 .tp-fan span:nth-child(1){transform:translateX(-128px) rotate(-11deg)}
 .tp-fan span:nth-child(3){transform:translateX(128px) rotate(11deg)}
 .sitebar-in{padding:0 40px}
 .sb-nav,.sb-mine,.sb-locale{display:flex}
 .sb-locale{display:block}
 .sb-burger{display:none}
}
@media (max-width:639px){
 .page--form .form-page,.page--form .form-card,.page--form .birth-form{flex:1;display:flex;flex-direction:column}
 .fp-about .art,.fp-about .ox-gets{display:none}
 .fp-about .intro-row{margin-bottom:0}
 .form-page{gap:14px}
}

/* Date, time and city in the site's colours */
.pick-field{position:relative}
.pick-field .text-input{padding-right:50px}
.pick-btn{position:absolute;top:50%;right:4px;width:44px;height:44px;margin-top:-22px;border:0;border-radius:12px;background:none;color:var(--violet-ink);display:grid;place-items:center;padding:0}
.pick-btn:hover:not(:disabled){background:var(--fill)}
.pick-city{display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-city.is-empty{color:var(--muted)}
dialog.picker{background:var(--surface);color:var(--ink);max-width:420px;padding:16px 20px 20px}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.pk-head h3{padding:0;font-family:var(--display);font-weight:var(--title-weight,600);font-size:21px;color:var(--ink-strong)}
.pk-wheels{position:relative;display:grid;gap:6px;margin:4px 0 16px}
.pk-wheels--3{grid-template-columns:64px minmax(0,1fr) 84px}
.pk-wheels--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk-wheels::before{content:'';position:absolute;left:0;right:0;top:88px;height:44px;border-radius:14px;background:var(--fill)}
.pk-wheel{position:relative;height:220px;margin:0;padding:88px 0;list-style:none;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(transparent,#000 32%,#000 68%,transparent)}
.pk-wheel::-webkit-scrollbar{display:none}
.pk-wheel:focus-visible{outline:0}
.pk-wheel li{height:44px;line-height:44px;text-align:center;scroll-snap-align:center;font-size:17px;color:var(--muted);cursor:pointer;user-select:none}
.pk-wheel li.on{color:var(--ink-strong);font-weight:650}
.picker--city .pk-search{margin:6px 0 10px;background:var(--page)}
.pk-list{max-height:min(52dvh,420px);overflow-y:auto;overscroll-behavior:contain;margin:0 -8px}
.pk-group{margin:12px 8px 4px;font-size:12px;font-weight:600;color:var(--muted)}
.pk-city{display:block;width:100%;min-height:44px;padding:8px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:16px;text-align:left}
.pk-city:hover,.pk-city.on{background:var(--fill)}
.pk-empty{padding:16px 8px;color:var(--muted);font-size:14px}

/* Cards from the author's deck */
.spread{max-width:520px;margin-left:auto;margin-right:auto}
@media (min-width:560px){.spread--4,.spread--5{max-width:620px;grid-template-columns:repeat(4,minmax(0,1fr))}.spread--5{grid-template-columns:repeat(5,minmax(0,1fr))}.spread--6{max-width:620px;grid-template-columns:repeat(6,minmax(0,1fr))}}
.tcard-face{aspect-ratio:auto;padding:0;display:block;background:none;border-radius:10px;overflow:hidden;box-shadow:0 18px 36px -20px #0000007a}
.tcard--new .tcard-face{box-shadow:0 0 0 2px var(--violet),0 18px 36px -20px #0000007a}
.tcard-note{font-size:11px;text-align:center;color:var(--muted)}
.tcard figcaption{min-height:0}

/* After a reading */
.after{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.after h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(24px,5vw,30px);line-height:1.12;letter-spacing:-.02em;color:var(--ink-strong)}
.after-lead{margin:6px 0 12px;font-size:15px;color:var(--ink-soft)}
.after .ask{margin-bottom:32px}
.after .scene-grid{margin-top:14px}
@media (min-width:640px){.after .scene-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.after .mine-strip-wrap{padding:0}
@media (min-width:768px){.page--shop:not(.page--wide){max-width:720px}}
.video-link{margin:6px 0 10px}

/* My space */
.mine-page,.course-page{max-width:760px;margin:0 auto}
.mine-list{display:grid;gap:8px}
.mine-row{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 14px;border:0;border-radius:20px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 0 0 1px var(--line)}
.mine-row:hover{box-shadow:0 0 0 1.5px var(--violet)}
.mine-row>svg{width:18px;height:18px;color:var(--muted-soft)}
.mine-text{flex:1;display:grid;gap:2px;min-width:0}
.mine-text strong{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.mine-text small{font-size:13px;color:var(--muted)}
.mine-link{margin-top:22px}
.mine-empty{display:grid;gap:14px;padding:26px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.course-head{display:grid;gap:16px}
.course-head .art{height:120px}
.course-line{display:flex;align-items:center;gap:14px;padding:8px 0;font-size:16px;color:var(--ink)}
.course-line>span:last-child{display:grid;gap:1px}
.course-line small{font-size:12px;color:var(--violet-ink)}
.course-free{margin-top:20px;padding:20px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.course-free h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:24px}
.toc .num svg{width:15px;height:15px;color:var(--violet-ink)}
@media (min-width:720px){.course-head{grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:center}}

/* Studio: the step keeps its place, a keyboard field cannot move the page */
.chat-page{overflow:clip}
.thread{position:relative}
.photo-panel{position:relative}
.way-note{margin:12px 2px 0;padding:12px 14px;border-radius:16px;background:var(--lavender);font-size:14px;line-height:1.45;color:var(--ink-body)}
.way:not(.way--on){cursor:help}
.way{min-height:76px}

/* Prices read as prices that can be changed */
.price-edit{display:flex;align-items:center;gap:8px}
.price-box{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 12px;border-radius:14px;background:var(--canvas);box-shadow:0 0 0 1px var(--line)}
.price-box:focus-within{box-shadow:0 0 0 2px var(--violet)}
.price-box input{width:78px;min-width:0;height:100%;border:0;outline:0;background:none;padding:0;font-size:20px;font-weight:650;color:var(--ink-strong);text-align:right;-moz-appearance:textfield}
.price-box input::-webkit-outer-spin-button,.price-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.price-box>span{font-size:16px;font-weight:600;color:var(--ink-soft)}
.price-box>svg{width:15px;height:15px;color:var(--muted-soft)}
.price-box--small{height:40px}
.price-box--small input{width:64px;font-size:16px}
.step-btn{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--canvas);color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center;padding:0}
.step-btn:hover{background:var(--lavender-strong)}
.offer-price--alt label{font-size:13px;color:var(--muted)}

/* Decks */
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.deck-pick{display:grid;gap:3px;padding:8px 8px 10px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);text-align:left;color:var(--ink)}
.deck-pick.active{box-shadow:0 0 0 2px var(--violet)}
.deck-pick strong{margin-top:4px;font-size:13px;font-weight:600}
.deck-pick small{font-size:11px;line-height:1.3;color:var(--muted)}
.deck-sample{display:block;background:none;border-radius:8px;overflow:hidden}
.locale-block{display:grid;gap:14px}
.locale-block .card-switch{align-items:flex-start;gap:14px}
.locale-block .card-switch strong{font-size:15px}

/* «Это уже твоё»: what comes next is on the page */
.next-steps{margin-top:18px;padding:18px;border-radius:22px;background:#fff;box-shadow:var(--card-shadow)}
.next-steps h2{font-size:19px;letter-spacing:-.015em;color:var(--ink-strong)}
.next-steps ol{display:grid;gap:10px;margin:12px 0 16px;padding:0;list-style:none}
.next-steps li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;color:var(--ink-soft)}
.next-steps li>span{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--canvas);font-size:13px;font-weight:600;color:var(--ink-soft)}
.next-steps li.done>span{background:var(--green-bg);color:var(--green)}
.next-steps li.done{color:var(--muted)}
.next-steps li svg{width:15px;height:15px}

.shop-root .pill-btn{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.shop-root .pill-btn:hover{background:var(--fill)}
.theme-midnight .sale-ribbon,.theme-midnight .sale-timer{color:#2a1120}
.theme-midnight .sale-timer{color:var(--danger)}

/* Cabinet: products, projects, clients, courses */
.card-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prod-list,.crm-list{display:grid;gap:2px;margin:10px 0 0;padding:0;list-style:none}
.prod-row,.crm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:8px;border:0;border-radius:16px;background:none;color:var(--ink);text-align:left}
.prod-row:hover,.crm-row:hover{background:var(--canvas)}
.prod-row>svg,.crm-row>svg{width:17px;height:17px;flex:none;color:var(--muted-soft)}
.prod-text,.crm-who{flex:1;display:grid;gap:2px;min-width:0}
.prod-text strong,.crm-who strong{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.prod-text small,.crm-who small{font-size:13px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.crm-sum{display:none;font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
.crm-sum small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.crm-tools{display:grid;gap:10px;margin:14px 0}
.crm-search{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--muted)}
.crm-search:focus-within{box-shadow:0 0 0 2px var(--violet)}
.crm-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15px;color:var(--ink)}
.crm-tag{display:inline-flex;align-items:center;gap:6px}
.crm-tag svg{width:13px;height:13px}
.crm-tag-form{flex:1 1 160px;min-width:0}
.crm-tag-form .text-input{min-height:42px;padding:8px 12px;font-size:14px}
.add-list{display:grid;gap:8px;margin-top:12px}
.add-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:18px;background:var(--canvas);color:var(--ink);text-align:left}
.add-item:hover{background:var(--lavender)}
.add-item>span:nth-child(2){flex:1;display:grid;gap:2px;min-width:0}
.add-item strong{font-size:15px;font-weight:600}
.add-item small{font-size:13px;line-height:1.35;color:var(--muted)}
.add-item>svg{width:17px;height:17px;flex:none;color:var(--muted-soft)}
.side-projects{display:grid;gap:2px;padding:0 4px}
.side-projects small{padding:0 8px 4px;font-size:12px;color:var(--muted)}
.side-project{min-height:36px;padding:6px 8px;border:0;border-radius:10px;background:none;color:var(--ink-soft);font-size:14px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-project:hover{background:var(--canvas)}
.side-project.current{color:var(--ink);font-weight:600}
.pane-title{margin:22px 0 10px;font-size:20px;letter-spacing:-.015em}
.course-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.course-on{margin-top:16px}
.lesson{display:grid;gap:10px}
.lesson textarea{resize:vertical}
.course-actions{align-items:center}
.kpis--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cab-main .kpis--4>div{background:#fff;border:0;border-radius:18px;box-shadow:var(--card-shadow);padding:14px 16px}
@media (min-width:640px){.kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}.crm-sum{display:block}.crm-tools{grid-template-columns:minmax(0,1fr) auto;align-items:center}.crm-tools .chip-row{grid-column:1/-1;grid-row:2}}
@media (max-width:639px){.crm-row .badge{display:none}}
@media (min-width:900px) and (max-width:1179px){
 .tarot-page{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px}
 .tp-fan span{width:150px;margin-left:-75px}
 .tp-fan span:nth-child(1){transform:translateX(-92px) rotate(-11deg)}
 .tp-fan span:nth-child(3){transform:translateX(92px) rotate(11deg)}
}
@media (max-width:419px){
 .offer-price:not(.offer-price--alt){flex-wrap:wrap;gap:6px}
 .offer-price:not(.offer-price--alt) label{flex-basis:100%}
 .price-box input{width:64px}
 .price-edit{gap:6px}
}
/* The hero and the first row of scenarios fit on one laptop screen. */
@container (min-width:720px){
 .portrait{margin-top:0;max-width:min(340px,calc((100svh - 300px) * .8))}
 .hx--solo{padding-top:36px}
 .about-x{padding-top:48px;padding-bottom:40px}
}

/* v10 · the portrait leads the eye to the question: it stands on the left. The
   brand in the top bar is a sign of its own. A course is sold by a page of
   blocks, in the order people decide. */
.hx{align-items:center}
@container (min-width:720px){
 .hx--photo{grid-template-columns:minmax(240px,320px) minmax(0,1fr);column-gap:64px}
 .hx--photo .portrait{margin:0}
}
.portrait::before,.theme-sage .portrait::before,.theme-dawn .portrait::before{inset:-3% -4% -3% -4%;border-radius:999px 999px 32px 32px;background:var(--glow);opacity:.55}
.portrait img{border-radius:999px 999px 24px 24px;box-shadow:0 24px 50px -30px #2a17104d}
.portrait-badge{left:auto;right:-14px;bottom:9%;width:60px;height:60px;box-shadow:0 10px 24px -12px #2a17104d}
.hx-band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--page));pointer-events:none}
.hx,.hx-corner{z-index:1}

/* The sign of the site */
.bar-mark{width:40px;height:40px;flex:none;border-radius:12px;background:var(--violet);color:var(--on-accent);font-size:22px}
.bar-mark .glyph-ico{width:60%;height:60%}
.bar-logo{width:40px;height:40px;flex:none;border-radius:12px;object-fit:cover}
.scene-text span{padding-right:22px}
.author-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:8px 16px;background:var(--ink-strong);color:var(--page);font-size:14px}
.author-bar a{display:inline-flex;align-items:center;gap:4px;color:inherit;font-weight:600}
.author-bar svg{width:15px;height:15px}
.shop-foot .foot-link{font-size:13px}

/* About: a meeting, not a caption */
.about-x{display:block;max-width:none;padding:0}
.about-in{display:grid;gap:24px;max-width:1120px;margin:0 auto;padding:44px 20px}
.about-visual{margin:0;min-width:0}
.about-visual img{display:block;width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:32px;box-shadow:0 30px 60px -40px #2a17104d}
.about-visual--sign{display:grid;place-items:center;max-width:420px;aspect-ratio:4/5;border-radius:32px;background:var(--fill);color:var(--violet-ink)}
.about-visual--sign .glyph-ico{width:34%;height:34%}
.about-body{min-width:0}
.about-body h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(32px,6cqi,48px);line-height:1.06;letter-spacing:-.02em;color:var(--ink-strong)}
.about-text{margin-top:14px}
.about-text p{font-size:clamp(18px,2.4cqi,21px);line-height:1.55;color:var(--ink-body);max-width:56ch;margin-top:10px;overflow-wrap:anywhere}
.about-body h3{margin:24px 0 10px;font-size:15px;font-weight:650;color:var(--ink-strong)}
.about-topics{display:flex;flex-wrap:wrap;gap:8px}
.about-topics span{padding:8px 14px;border-radius:99px;background:var(--fill);font-size:15px;color:var(--ink)}
.about-how{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:how}
.about-how li{display:flex;align-items:flex-start;gap:12px;counter-increment:how;font-size:16px;line-height:1.45;color:var(--ink-body)}
.about-how li::before{content:counter(how);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:var(--on-accent);font-size:13px;font-weight:650}
.about-body .socials{margin-top:20px}
.about-cta{width:auto;margin-top:24px;padding-left:30px;padding-right:30px}
@container (min-width:720px){
 .about-x{padding:0}
 .about-in{grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:64px;align-items:center;padding:64px 40px}
 .about-in--solo{grid-template-columns:minmax(0,760px)}
}

/* Selling a course */
.course-cards{display:grid;gap:14px;margin-top:18px}
.course-card{display:grid;gap:16px;padding:18px;border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 20px 44px -36px #3a24104d}
.course-card-text{min-width:0}
.course-card-text small{font-size:13px;font-weight:600;color:var(--violet-ink)}
.course-card-text h3{margin-top:4px;font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(24px,4cqi,30px);line-height:1.12;color:var(--ink-strong)}
.course-card-text>p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.course-card-text .primary{margin-top:16px}
.course-card .art{height:100%;min-height:128px}
.course-hero .overline{margin-bottom:10px;font-size:14px;font-weight:600;color:var(--violet-ink)}
.course-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.course-facts span{padding:7px 13px;border-radius:99px;background:var(--fill);font-size:14px;color:var(--ink)}
.course-go{display:grid;gap:10px;width:100%;max-width:440px}
.cb{scroll-margin-top:72px}
.cb:nth-of-type(even){background:var(--fill)}
.cb-in{max-width:1120px;margin:0 auto;padding:40px 20px}
.cb h2{font-family:var(--display);font-weight:var(--title-weight,600);font-size:clamp(28px,5cqi,42px);line-height:1.08;letter-spacing:-.02em;color:var(--ink-strong)}
.cb-lead{margin-top:10px;font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:60ch}
.cb-who{margin-top:6px;font-size:18px;font-weight:600;color:var(--ink)}
.cb-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}
.cb-list li{display:flex;align-items:flex-start;gap:10px;font-size:17px;line-height:1.45;color:var(--ink-body)}
.cb-list svg{width:20px;height:20px;margin-top:2px;flex:none;color:var(--violet-ink)}
.cb-list--no svg{color:var(--muted)}
.cb-two{display:grid;gap:30px}
.cb-cards{display:grid;gap:12px;margin-top:18px}
.cb-cards>p,.cb-cards blockquote{margin:0;padding:18px 20px;border-radius:22px;background:var(--surface);font-size:17px;line-height:1.45;color:var(--ink)}
.cb-cards blockquote footer{margin-top:10px;font-size:14px;color:var(--muted)}
.cb-program{display:grid;gap:2px;margin:20px 0 0;padding:0;list-style:none}
.cb-program li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.cb-program .num{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--fill);font-size:13px;font-weight:600;color:var(--violet-ink)}
.cb-program strong{display:block;font-size:18px;font-weight:650;color:var(--ink-strong)}
.cb-program p{margin-top:3px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.cb-program small{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--violet-ink)}
.tiers{display:grid;gap:14px;margin-top:20px}
.tier{display:flex;flex-direction:column;padding:22px;border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 50px -38px #3a24105c}
.tier h3{font-size:19px;font-weight:650;color:var(--ink-strong)}
.tier-price{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.tier-price strong{font-family:var(--display);font-weight:var(--title-weight,600);font-size:38px;line-height:1.1;color:var(--ink-strong)}
.tier-price s{font-size:18px;color:var(--muted)}
.tier .cb-list{flex:1;margin-bottom:20px}
.tier .cb-list li{font-size:16px}
#tiers .hx-ribbon{margin:14px 0 0}
.cb-faq{display:grid;gap:8px;margin-top:18px}
.cb-faq details{border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.cb-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.cb-faq summary::-webkit-details-marker{display:none}
.cb-faq summary svg{width:18px;height:18px;flex:none;color:var(--muted)}
.cb-faq details[open] summary svg{transform:rotate(180deg)}
.cb-faq p{padding:0 18px 16px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.cb .course-free{margin:0 auto;max-width:1120px;padding:40px 20px;border-radius:0;background:none;box-shadow:none}
.course-free small{font-size:14px;font-weight:600;color:var(--violet-ink)}
.course-free p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--ink-body);max-width:62ch}
.cb--final{text-align:center;background:var(--fill)}
.cb--final .cb-lead{margin-left:auto;margin-right:auto}
.cb--final .primary{max-width:360px;margin:20px auto 0}
@container (min-width:720px){
 .cb-in,.cb .course-free{padding:60px 40px}
 .cb-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
 .cb-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .course-go{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
 .tiers--2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tiers--3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tiers--1 .tier{max-width:520px}
 .course-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Studio: help on a step, the course, structure, logo, team */
.step-help{margin-bottom:10px}
.step-help .chip{min-height:38px;padding:7px 14px;font-size:14px}
.way-note .opts{margin-top:10px}
.plan-card{padding:18px;border-radius:22px;background:#fff;box-shadow:var(--card-shadow)}
.plan-card h3{font-size:20px;letter-spacing:-.015em;color:var(--ink-strong)}
.plan-lead{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.plan-lessons{display:grid;gap:8px;margin:0;padding:0 0 0 20px}
.plan-lessons strong{display:block;font-size:15px;font-weight:600}
.plan-lessons small{font-size:13px;color:var(--muted)}
.block-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.block-list li{display:flex;align-items:center;gap:8px;min-height:48px;padding:2px 2px 2px 8px;border-radius:12px}
.block-list li>span{flex:1;min-width:0;font-size:15px}
.block-list li.off>span{color:var(--muted)}
.block-list small{font-size:12px;color:var(--muted)}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.logo-sample{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:14px;background:var(--page);color:var(--ink-strong)}
.logo-sample img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.team-form{display:grid;gap:4px}
.team-form .secondary{margin-top:14px}
.team-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:4px 8px}
.role-list{display:grid;gap:10px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.role-list li{display:grid;gap:1px}
.role-list strong{font-size:14px;font-weight:600}
.role-list small{font-size:13px;color:var(--muted)}
.pane-title small{font-size:13px;font-weight:400;color:var(--muted)}
.home-back{display:flex;align-items:center;gap:14px;width:100%;max-width:640px;margin:0 auto 22px;padding:14px 18px;border:0;border-radius:22px;background:#fff;box-shadow:var(--card-shadow);text-align:left;color:var(--ink)}
.home-back>span:nth-child(2){flex:1;display:grid;gap:2px;min-width:0}
.home-back strong{font-size:17px;font-weight:650}
.home-back small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.home-back>svg{width:18px;height:18px;color:var(--muted-soft)}
@media (min-width:640px){.team-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px}.team-form .secondary{margin-top:0;width:auto;min-height:52px}}

/* On a phone the save button lives under the cards: the side column is hidden. */
@media (min-width:1024px){.site-edit-save{display:none}}