:root{--paper:#F7F6F2;--paper2:#EFEDE6;--ink:#17181A;--dark:#111214;--dark2:#1B1D20;--mut:#5E5C57;--mutd:#9B9890;--line:#E2DFD6;--lined:#2C2F33;--acc:#A33B4A;--acc2:#C9566A;--accDk:#D4707F;--ok:#3E7C5A;--w:#fff;--max:1140px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--paper);color:var(--ink);font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.022em;line-height:1.14}
h1{font-size:clamp(34px,5.4vw,64px);letter-spacing:-.034em}
h2{font-size:clamp(23px,2.6vw,31px);margin-bottom:10px}
h3{font-size:18px;margin-bottom:5px}
p{margin-bottom:12px}
.lede{font-size:20px;color:var(--mut);max-width:60ch}
.eb{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.eb svg{width:13px;height:13px}
section{padding:104px 0;border-top:1px solid var(--line);scroll-margin-top:76px}
section#faq,section#index{padding:80px 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
a{color:var(--ink)}
.mono{font-family:"JetBrains Mono",monospace}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
nav{position:sticky;top:0;z-index:60;background:rgba(17,18,20,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--lined)}
nav .wrap{display:flex;align-items:center;gap:20px;height:56px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;text-decoration:none;color:#fff;letter-spacing:-.02em}
.nl{display:flex;gap:20px;font-size:14px;margin-left:auto;flex-wrap:nowrap}
.navtog{display:none;background:none;border:0;color:#fff;padding:7px;margin-left:auto;cursor:pointer;border-radius:7px;line-height:0}
.navtog:hover{background:rgba(255,255,255,.08)}
.nl a{color:var(--mutd);text-decoration:none}
.nl a:hover{color:#fff}
.btn{background:var(--acc);color:#fff;border:none;padding:9px 17px;border-radius:7px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn{transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--acc2)}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:12px 22px;font-size:15px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--paper2);border-color:var(--mut)}
.hero{background:var(--dark);color:#fff;padding:74px 0 44px;border:none;position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:1}
/* WebGL backdrop: desktop only, never in front of the copy */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:radial-gradient(68% 88% at 84% 40%,#000 12%,transparent 72%);mask-image:radial-gradient(68% 88% at 84% 40%,#000 12%,transparent 72%)}
.hero-gl.on{opacity:.5}
@media(max-width:900px){.hero-gl{display:none}}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:#A9A69E;font-size:20px;max-width:48ch;margin-top:16px}
.hgrid{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
.hform{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px;max-width:460px;align-items:stretch}
.hform input,.hform .slotbtn,.hform .btn{height:44px;min-width:0}
.hform .btn{justify-content:center}
@media(max-width:480px){.hform{grid-template-columns:1fr}}
.hform input{padding:11px 13px;border:1px solid var(--lined);border-radius:7px;font:inherit;font-size:14px;background:var(--dark2);color:#fff}
.hform input::placeholder{color:#6E6B65}
.slotbtn{display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid var(--lined);border-radius:7px;background:var(--dark2);color:#fff;font:inherit;font-size:14px;cursor:pointer;text-align:left;transition:border-color .15s}
.slotbtn:hover{border-color:#41454B}
.slotbtn svg{width:15px;height:15px;flex:none;color:#8B8880}
.slotbtn .sv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slotbtn.set .sv{color:#fff}
.slotbtn .sv.ph{color:#8B8880}
/* booking modal */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s ease}
.modal.on{opacity:1}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(10,11,12,.66);backdrop-filter:blur(3px)}
.modal-card{position:relative;background:var(--dark);color:#fff;border:1px solid var(--lined);border-radius:14px;padding:26px 26px 22px;width:min(560px,100%);max-height:90vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translateY(8px);transition:transform .18s ease}
.modal.on .modal-card{transform:none}
.modal-card h3{color:#fff;font-size:21px;margin-bottom:6px}
.modal-card .fine{color:#A9A69E;margin-bottom:16px}
.modal-card .hform{margin-top:0}
.modal-x{position:absolute;right:12px;top:10px;background:none;border:0;color:#8B8880;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px}
.modal-x:hover{color:#fff;background:rgba(255,255,255,.06)}
@media(max-width:560px){.modal-card{padding:22px 18px 18px}}
/* a form that refuses to submit has to say why */
.hform input.bad,.hform .slotbtn.bad{border-color:var(--acc2);box-shadow:0 0 0 2px rgba(201,86,106,.16)}
.formerr{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--accDk)}
.hform.on-light .formerr{color:var(--acc)}
.slotpanel{grid-column:1/-1;min-width:0;border:1px solid var(--lined);border-radius:10px;background:var(--dark2);padding:14px}
.slotpanel[hidden]{display:none}
.sp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sp-head label{font-size:12px;color:#8B8880}
.sp-tz{flex:1 1 200px;padding:8px 30px 8px 11px;border:1px solid var(--lined);border-radius:7px;background:#16181B;color:#fff;font:inherit;font-size:13px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8B8880 50%),linear-gradient(135deg,#8B8880 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sp-days{display:flex;gap:7px;min-width:0;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;scrollbar-width:thin}
.sp-day{flex:none;min-width:66px;padding:8px 10px;border:1px solid var(--lined);border-radius:9px;background:#16181B;color:#A9A69E;font:inherit;font-size:12px;line-height:1.35;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.sp-day b{display:block;color:#fff;font-size:15px;font-weight:600}
.sp-day:hover{border-color:#41454B}
.sp-day[aria-pressed=true]{background:rgba(163,59,74,.16);border-color:var(--acc2)}
.sp-day[aria-pressed=true] b{color:var(--accDk)}
.sp-times{min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;max-height:186px;overflow-y:auto}
.sp-time{padding:9px 6px;border:1px solid var(--lined);border-radius:7px;background:#16181B;color:#fff;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.sp-time:hover{border-color:var(--acc2)}
.sp-time[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.sp-foot{margin-top:11px;font-size:12px;color:#7E7B75}
/* the same form on a light section (self-check) */
.hform.on-light input,.hform.on-light .slotbtn,.hform.on-light .slotpanel,.hform.on-light .sp-tz,.hform.on-light .sp-day,.hform.on-light .sp-time{background:var(--w);border-color:var(--line);color:var(--ink)}
.hform.on-light input::placeholder,.hform.on-light .slotbtn .sv.ph,.hform.on-light .slotbtn svg,.hform.on-light .sp-head label,.hform.on-light .sp-foot,.hform.on-light .sp-day{color:var(--mut)}
.hform.on-light .sp-day b{color:var(--ink)}
.hform.on-light .slotbtn.set .sv{color:var(--ink)}
.hform.on-light .sp-tz{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%)}
.hform.on-light .sp-day:hover,.hform.on-light .sp-time:hover{border-color:var(--mut)}
.hform.on-light .sp-day[aria-pressed=true]{background:rgba(163,59,74,.07);border-color:var(--acc)}
.hform.on-light .sp-day[aria-pressed=true] b{color:var(--acc)}
.hform.on-light .sp-time[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hnote{font-size:12px;color:#7E7B75;margin-top:11px;display:flex;align-items:center;gap:6px}
.hnote svg{width:13px;height:13px;flex:none}
.demo{background:var(--dark2);border:1px solid var(--lined);border-radius:12px;overflow:hidden}
.demo-top{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--lined);font-size:12px;color:var(--mutd)}
.dot{width:8px;height:8px;border-radius:50%;background:#3A3D42}
.demo-body{padding:17px 18px;min-height:252px;font-size:14px}
.q{color:#fff;display:flex;gap:9px;margin-bottom:15px}
.q svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--mutd)}
.cursor{display:inline-block;width:7px;height:16px;background:var(--accDk);vertical-align:-2px;animation:bl .9s steps(2) infinite}
@keyframes bl{0%,50%{opacity:1}51%,100%{opacity:0}}
.ans{color:#B7B4AC;line-height:1.62}
.brand{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #24272B;opacity:0;transform:translateY(5px);transition:all .4s}
.brand.on{opacity:1;transform:none}
.brand .rk{font-family:"JetBrains Mono",monospace;font-size:12px;color:#6E6B65;width:16px}
.brand .nm{color:#fff;font-weight:500}
.brand .src{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:12px;color:#6E6B65}
.brand.you{border:1px dashed #4A3238;background:rgba(163,59,74,.09);border-radius:6px;padding:8px 10px;margin-top:9px}
.brand.you .nm{color:var(--accDk)}
.demo-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--lined);font-size:12px;color:var(--mutd)}
.tgl{margin-left:auto;display:flex;background:#25282C;border-radius:6px;padding:2px}
.tgl button{background:none;border:none;color:var(--mutd);font:inherit;font-size:12px;padding:5px 10px;border-radius:4px;cursor:pointer}
.tgl button[aria-pressed=true]{background:var(--acc);color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;padding-top:24px;border-top:1px solid var(--lined)}
.stat .n{font-size:34px;font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1}
.stat{transition:opacity .15s}
.stat:hover{opacity:.86}
.stat .l{font-size:14px;color:#8B8880;margin-top:6px}
.stat a{color:#6E6B65;font-size:12px;font-family:"JetBrains Mono",monospace;text-decoration:none;border-bottom:1px solid #3A3D42}
.stat a:hover{color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.fitgrid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.fitgrid li{display:flex;gap:11px;align-items:flex-start;background:var(--w);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:15px;color:var(--ink);line-height:1.5;transition:border-color .15s,box-shadow .15s}
.fitgrid li:hover{border-color:var(--mut);box-shadow:0 3px 14px rgba(23,24,26,.05)}
.fitgrid svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ok)}
@media(max-width:760px){.fitgrid{grid-template-columns:1fr}}
.card{background:var(--w);border:1px solid var(--line);border-radius:11px;padding:22px}
.lay{display:grid;grid-template-columns:26px minmax(0,1fr) max-content;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.lay>div:last-child{justify-self:end}
.lay:last-child{border-bottom:none}
.lay{transition:background .15s;border-radius:7px}
.lay:hover{background:rgba(23,24,26,.022)}
.lay .n{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut);padding-top:3px}
.lay p{margin:0;color:var(--mut);font-size:14px}
.lay .plain{color:var(--ink);font-size:14px;margin-bottom:3px}
.tag{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:5px;white-space:nowrap;display:inline-block}
.tag.y{background:var(--acc);color:#fff}
.tag.n{background:var(--paper2);color:var(--mut)}
.bars{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.bar{display:grid;grid-template-columns:96px minmax(50px,1fr) auto;gap:12px;align-items:center;font-size:14px}
.bar .track{min-width:0;height:14px;background:#DEDAD0;border-radius:4px;overflow:hidden;display:flex}
.bar .own{background:var(--acc)}
.bar .rent{background:repeating-linear-gradient(45deg,#C98E99,#C98E99 3px,#DEDAD0 3px,#DEDAD0 6px)}
.bar .v{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut);text-align:right;white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.key{display:flex;gap:16px;font-size:12px;color:var(--mut);margin-top:14px}
.key i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}
.hon{background:var(--dark);color:#fff;border-radius:14px;padding:44px 40px}
.hon h2{color:#fff}
.hon .lede{color:#A9A69E}
.hrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;padding:16px 0;border-top:1px solid var(--lined);font-size:14px}
.hrow b{color:#fff;font-weight:600;display:block;margin-bottom:4px}
.hrow .c{color:#8B8880}
.hrow .s{color:#fff}
.hrow .s em{color:var(--accDk);font-style:normal;font-weight:500}
.pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan{background:var(--w);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.plan:hover{border-color:var(--mut);box-shadow:0 4px 18px rgba(23,24,26,.06)}
.plan.f{border-color:var(--acc)}
.plan h3{font-size:19px;margin-bottom:2px}
.plan .sub{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.plan .for{font-size:14px;color:var(--mut);margin-bottom:16px;min-height:38px}
.amt{display:flex;align-items:baseline;gap:8px}
.amt .n{font-size:32px;font-weight:600;letter-spacing:-.03em}
.amt .was{font-size:15px;color:var(--mut);text-decoration:line-through}
.per{font-size:12px;color:var(--mut);margin-top:1px}
.lim{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--acc);margin-top:9px}
.plan ul{list-style:none;margin:16px 0;font-size:14px}
.plan li{padding:6px 0 6px 20px;position:relative;color:var(--mut)}
.plan li svg{position:absolute;left:0;top:9px;width:12px;height:12px;color:var(--ok)}
.plan .btn{margin-top:auto;justify-content:center}
.wl{margin-top:16px;padding:16px 20px;background:var(--paper2);border-radius:11px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
.pf{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--w)}
.pf div{padding:18px;border-right:1px solid var(--line)}
.pf div:last-child{border-right:none}
.pf .n{font-size:25px;font-weight:600;letter-spacing:-.03em}
.pf .l{font-size:12px;color:var(--mut);margin-top:3px}
.vid{background:var(--dark);border-radius:12px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mutd);font-size:14px;border:1px solid var(--lined)}
.vid svg{width:34px;height:34px;color:var(--acc2)}
details{border-top:1px solid var(--line);padding:15px 0;transition:background .15s}
details:hover{background:rgba(23,24,26,.025)}
details summary{padding:0 6px;margin:0 -6px;border-radius:6px}
summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:15px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--mut);font-size:16px}
details[open] summary:after{content:"\2013"}
details p{margin:10px 0 0;color:var(--mut);max-width:68ch;font-size:14px}
.fine{font-size:12px;color:var(--mut)}
footer{background:var(--dark);color:var(--mutd);padding:40px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--mutd)}
.footlinks{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:4px 30px;margin-top:6px}
.mbar{display:none}
@media(max-width:900px){.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(17,18,20,.97);backdrop-filter:blur(10px);border-top:1px solid var(--lined);padding:10px 16px;gap:10px;align-items:center}.mbar a.lnk{color:#A9A69E;text-decoration:none;font-size:14px}.mbar .btn{margin-left:auto}body{padding-bottom:62px}
.hgrid,.two,.hrow{grid-template-columns:1fr;gap:30px}.pg,.pg2,.stats{grid-template-columns:1fr}.pf{grid-template-columns:1fr 1fr}.pf div{border-bottom:1px solid var(--line)}.hon{padding:30px 22px}section{padding:54px 0}.lay{grid-template-columns:22px 1fr;gap:12px}.lay>div:last-child{grid-column:2}section{padding:64px 0}}
@media(max-width:760px){
 /* phone header: menu on the left, wordmark next to it, call button on the right */
 nav .wrap{gap:10px}
 .navtog{display:flex;order:-1;margin-left:-7px}
 .logo{margin-right:auto}
 .nl{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;gap:0;background:var(--dark);border-bottom:1px solid var(--lined);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px 0 10px;margin:0}
 .nl.open{display:flex}
 .nl a{padding:13px 26px;font-size:16px;color:#E6E3DC;border-top:1px solid rgba(255,255,255,.055)}
 .nl a:first-child{border-top:none}
 nav .wrap{position:static}
 /* with the links hidden there was nothing pushing the CTA right, so it sat against the logo */
 nav .btn{margin-left:auto}
}
@media(max-width:600px){
 /* the close section's inline padding overrode .wrap, so its form ran edge to edge */
 #close .wrap{padding-left:22px;padding-right:22px}
 #close .lede{font-size:17px}
 #close h2{font-size:26px}
}
@media(max-width:600px){.pf{grid-template-columns:1fr}.bar{grid-template-columns:72px minmax(40px,1fr) auto;gap:8px}h1{font-size:31px}.hero{padding:48px 0 44px}section{padding:52px 0}.demo-body{min-height:0}}

.cf{font:500 10px/1.5 ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid;white-space:nowrap;cursor:help;display:inline-block;vertical-align:middle}
.cf-v{color:#3f8a5f;border-color:#3f8a5f40;background:#3f8a5f14}
.cf-m{color:#a8863f;border-color:#a8863f40;background:#a8863f14}
.cf-i{color:#a33b4a;border-color:#a33b4a40;background:#a33b4a14}
.cf-u{color:#8a8d92;border-color:#8a8d9240;background:#8a8d9214}
.hero .cf-v,.hero .cf-m,.hero .cf-i,.hero .cf-u{background:rgba(255,255,255,.06)}
/* soft ownership mark, on screen and in print */
.wm{position:fixed;inset:0;z-index:0;pointer-events:none;
 background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='210'%3E%3Ctext x='160' y='115' font-family='Helvetica,Arial,sans-serif' font-size='20' font-weight='600' fill='%2317181A' fill-opacity='0.05' text-anchor='middle' transform='rotate(-28 160 105)'%3ECitrel AI%3C/text%3E%3C/svg%3E");
 background-repeat:repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* the watermark sits at z 0, so everything real is lifted above it. nav is deliberately
   left out: it carries its own sticky position and a higher z-index, and overriding that
   here stopped the header sticking and buried the mobile menu under the hero. */
header,section,footer,.mbar,.modal{position:relative;z-index:1}
body{overflow-x:clip}
.vid{position:relative;max-width:900px;margin:0 auto 12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000;line-height:0}
.vid video{width:100%;height:auto;display:block;aspect-ratio:16/9}
.vid-ui{position:absolute;inset:0;opacity:1;transition:opacity .25s ease}
.vid.idle .vid-ui{opacity:0;pointer-events:none}
.vid-btn{position:absolute;display:flex;align-items:center;gap:7px;border:0;border-radius:999px;background:rgba(17,18,20,.72);color:#fff;font:500 13px/1 "Instrument Sans",sans-serif;padding:9px 13px;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s}
.vid-btn:hover{background:rgba(17,18,20,.9)}
.vid-btn svg{width:16px;height:16px;flex:none}
.vid-rate{left:12px;top:12px;font-family:"JetBrains Mono",monospace;letter-spacing:.02em}
.vid-right{position:absolute;right:12px;top:12px;display:flex;gap:8px}
#vidSnd .i-on{display:none}
#vidSnd.on .i-off{display:none}
#vidSnd.on .i-on{display:inline}
.vid-right .vid-btn{position:static}
.vid-play{left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;padding:0;justify-content:center;background:rgba(163,59,74,.92);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.vid-play svg{width:26px;height:26px;fill:#fff;color:#fff}
.vid-play:hover{background:var(--acc2)}
.vid-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.vid-seek{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.22);cursor:pointer;overflow:hidden}
.vid-seek i{display:block;height:100%;width:0;background:var(--acc2)}
.vid-time{font:500 12px/1 "JetBrains Mono",monospace;color:#E7E4DC;min-width:74px;text-align:right}
.vid-note{max-width:900px;margin:0 auto 26px;text-align:center}
@media (max-width:560px){.vid-play{width:56px;height:56px}.vid-btn{padding:8px 11px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.vid-ui,.vid-btn{transition:none}}

/* ---- blog ---- */
.phero{background:var(--dark);color:#fff;padding:64px 0 52px}
.phero h1{color:#fff;max-width:18ch;font-size:clamp(32px,4.4vw,52px)}
.phero .lede{color:var(--mutd);margin-top:14px;max-width:62ch}
.plist{padding:16px 0 90px}
.plist section{padding:38px 0;border-top:1px solid var(--line)}
.plist section:first-child{border-top:none}
.pblurb{color:var(--mut);margin:-4px 0 16px;font-size:15px}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:var(--paper2);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(23,24,26,.09);border-color:#D4CFC2}
.bcard.t0{background:#EAEDE8}
.bcard.t1{background:#F2E7E7}
.bcard.t2{background:#E9EAEF}
.bcard.t3{background:#F0EDE3}
.bcbody{padding:22px 22px 18px;display:flex;flex-direction:column;gap:11px;flex:0 0 auto}
.bcmeta{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:0}
.bcmeta span{opacity:.45;padding:0 4px}
.bcard h3{font-size:19px;line-height:1.26;letter-spacing:-.018em;margin:0;color:var(--ink)}
.bcmore{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--acc);margin-top:3px}
.bcard:hover .bcmore svg{transform:translateX(3px)}
.bcmore svg{transition:transform .16s ease}
.bcart{margin-top:auto;aspect-ratio:4/3;background:rgba(23,24,26,.05);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bcart img{width:100%;height:100%;object-fit:cover;display:block}
.bcard.noart .bcart{aspect-ratio:16/7;color:var(--mut);opacity:.55}
.bcmark{display:flex}
@media(max-width:1020px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phero-img{margin:0 0 30px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.phero-img img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.phero-img figcaption{font-size:12px;color:var(--mut);padding:8px 12px;background:var(--paper2);font-family:"JetBrains Mono",monospace;letter-spacing:.02em}
.post{padding:44px 0 88px}
.post > .wrap{max-width:760px}
.pcrumb{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.pcrumb a{color:var(--mut);text-decoration:none}
.pcrumb a:hover{color:var(--acc)}
.post h1{font-size:clamp(30px,4.2vw,46px);max-width:20ch}
.pmeta{font-size:13px;color:var(--mut);margin:14px 0 30px;font-family:"JetBrains Mono",monospace}
.prose{font-size:17px;line-height:1.72}
.prose h2{font-size:clamp(21px,2.3vw,27px);margin:38px 0 10px}
.prose h3{font-size:18px;margin:26px 0 6px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:7px}
.prose a{color:var(--acc);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--acc2)}
.prose strong{font-weight:600}
.prose blockquote{border-left:3px solid var(--line);padding-left:16px;color:var(--mut);margin:0 0 16px}
.prose code{font-family:"JetBrains Mono",monospace;font-size:13px;background:var(--paper2);padding:1px 5px;border-radius:4px}
.prel{margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.prel h2{font-size:17px;margin-bottom:14px}
.prelgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.prelcard{border:1px solid var(--line);border-radius:9px;padding:13px 15px;text-decoration:none;font-size:15px;font-weight:500;background:var(--w);line-height:1.4}
.prelcard:hover{border-color:var(--acc);color:var(--acc)}
.pcta{margin-top:40px;background:var(--dark);color:#fff;border-radius:13px;padding:26px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.pcta h2{color:#fff;font-size:21px}
.pcta p{color:var(--mutd);font-size:15px;margin:8px 0 0;max-width:46ch}
.pctab{display:flex;gap:10px;flex-wrap:wrap}
.pcta .btn.ghost{border-color:var(--lined);color:#fff}
.pcta .btn.ghost:hover{background:var(--dark2);border-color:var(--mutd)}
@media(max-width:760px){
  .bgrid{grid-template-columns:1fr;gap:18px}
  .bcard h3{font-size:20px}
  .prelgrid{grid-template-columns:1fr}
  .post{padding:28px 0 60px}
  .prose{font-size:16px}
  .pcta{padding:22px}
}
.prose a,.prose code,.prose li,.prose p{overflow-wrap:anywhere}