@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/InstrumentSans-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/InstrumentSans-500.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/InstrumentSans-600.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/InstrumentSans-700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/JetBrainsMono-500.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Newsreader-300i.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--bg:#F3EFE7;--card:#FBF9F5;--surf:#FFFFFF;--ink:#141210;--sec:#625A52;--muted:#6F675E;--hair:rgba(20,18,16,.10);--hair2:rgba(20,18,16,.14);--dots:rgba(20,18,16,.14);--glow:rgba(255,138,61,.38);--ember:#D3420D;--ember-rgb:211,66,13;--shadow:rgba(20,18,16,.20);--inset:rgba(255,255,255,.7);--on-ink:#FFFFFF;--panel:#141210;--panel-2:#0F0E0D;--panel-ring:rgba(20,18,16,.9);--hdr:rgba(243,239,231,.88);--tile:rgba(251,249,245,.92);--tile-sh:rgba(20,18,16,.09);--hov:rgba(255,255,255,.4);--hov-2:rgba(255,255,255,.55);--nav-hov:rgba(20,18,16,.05);--illo-glow:rgba(255,138,61,.24);color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0B0A09;--card:#141210;--surf:#1D1A17;--ink:#F3EFE7;--sec:#A59D92;--muted:#8A8278;--hair:rgba(243,239,231,.10);--hair2:rgba(243,239,231,.16);--dots:rgba(243,239,231,.07);--glow:rgba(255,100,35,.22);--ember:#F05A1E;--ember-rgb:240,90,30;--shadow:rgba(0,0,0,.6);--inset:rgba(255,255,255,.06);--on-ink:#141210;--panel:#171412;--panel-2:#141210;--panel-ring:rgba(243,239,231,.14);--hdr:rgba(11,10,9,.82);--tile:rgba(29,26,23,.92);--tile-sh:rgba(0,0,0,.45);--hov:rgba(243,239,231,.04);--hov-2:rgba(243,239,231,.08);--nav-hov:rgba(243,239,231,.07);--illo-glow:rgba(255,100,35,.14);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B0A09;--card:#141210;--surf:#1D1A17;--ink:#F3EFE7;--sec:#A59D92;--muted:#8A8278;--hair:rgba(243,239,231,.10);--hair2:rgba(243,239,231,.16);--dots:rgba(243,239,231,.07);--glow:rgba(255,100,35,.22);--ember:#F05A1E;--ember-rgb:240,90,30;--shadow:rgba(0,0,0,.6);--inset:rgba(255,255,255,.06);--on-ink:#141210;--panel:#171412;--panel-2:#141210;--panel-ring:rgba(243,239,231,.14);--hdr:rgba(11,10,9,.82);--tile:rgba(29,26,23,.92);--tile-sh:rgba(0,0,0,.45);--hov:rgba(243,239,231,.04);--hov-2:rgba(243,239,231,.08);--nav-hov:rgba(243,239,231,.07);--illo-glow:rgba(255,100,35,.14);color-scheme:dark}
:root[data-theme="light"]{--bg:#F3EFE7;--card:#FBF9F5;--surf:#FFFFFF;--ink:#141210;--sec:#625A52;--muted:#6F675E;--hair:rgba(20,18,16,.10);--hair2:rgba(20,18,16,.14);--dots:rgba(20,18,16,.14);--glow:rgba(255,138,61,.38);--ember:#D3420D;--ember-rgb:211,66,13;--shadow:rgba(20,18,16,.20);--inset:rgba(255,255,255,.7);--on-ink:#FFFFFF;--panel:#141210;--panel-2:#0F0E0D;--panel-ring:rgba(20,18,16,.9);--hdr:rgba(243,239,231,.88);--tile:rgba(251,249,245,.92);--tile-sh:rgba(20,18,16,.09);--hov:rgba(255,255,255,.4);--hov-2:rgba(255,255,255,.55);--nav-hov:rgba(20,18,16,.05);--illo-glow:rgba(255,138,61,.24);color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--sec);text-decoration:none}
a:hover{color:var(--ink)}
.cta{cursor:pointer;transition:filter .2s ease, transform .2s ease, box-shadow .2s ease}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cta:active{transform:scale(.98)}
.form{box-shadow:0 0 0 1px var(--hair2),0 22px 44px -18px var(--shadow),inset 0 1px 0 var(--inset);transition:box-shadow .2s ease}
.form:focus-within{box-shadow:0 0 0 1px var(--ember),0 0 0 5px rgba(var(--ember-rgb),.18),0 22px 44px -18px var(--shadow)}
.field::placeholder{color:var(--muted)}
.tile{position:absolute;display:flex;align-items:center;gap:12px;border-radius:20px;background:var(--tile);box-shadow:0 0 0 1px var(--hair2),0 14px 36px var(--tile-sh);color:var(--ink);animation:mo-float 7s ease-in-out infinite}
@keyframes mo-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
.chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--hair2);font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.pulse{width:8px;height:8px;border-radius:50%;flex:none;animation:mo-pulse 2s ease-out infinite}
@keyframes mo-pulse-g{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.pulse-g{animation:mo-pulse-g 2s ease-out infinite !important}
@keyframes mo-pulse{0%{box-shadow:0 0 0 0 rgba(var(--ember-rgb),.55)}100%{box-shadow:0 0 0 10px rgba(var(--ember-rgb),0)}}
.cell{display:flex;align-items:center;justify-content:center;gap:11px;height:88px;border-left:1px solid var(--hair);color:var(--sec);font-size:19px;font-weight:600;letter-spacing:-.04em;transition:color .2s ease,background .2s ease}
.cell:first-child{border-left:0}
.cell:hover{color:var(--ink);background:var(--hov)}
.cell:hover svg{color:var(--ember)}
.cell svg{transition:color .2s ease}
.plot{display:flex;align-items:flex-end;gap:6px;height:320px;position:relative;z-index:1}
.col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar{width:100%;border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:mo-grow 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes mo-grow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.val{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:-.02em;margin-bottom:6px;white-space:nowrap;animation:mo-valin .6s ease both}
@keyframes mo-fade{0%{opacity:0}100%{opacity:1}}
.scroll{overflow-x:auto}.plotw{min-width:520px}
.logos{display:flex;gap:6px;margin-top:16px}
.logos span{flex:1;min-width:0;display:flex;justify-content:center;align-items:center}
.eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px}
.eq i{display:block;width:3px;height:100%;border-radius:2px;background:#22C55E;transform-origin:bottom;animation:mo-eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s}.eq i:nth-child(3){animation-delay:-.7s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes mo-eq{0%,100%{transform:scaleY(.28)}45%{transform:scaleY(1)}70%{transform:scaleY(.55)}}
.live{width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none;animation:mo-live 1.6s ease-in-out infinite}
@keyframes mo-live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{opacity:.35;box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.vh{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.seg label{cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:15px;color:var(--sec);transition:background .2s ease,color .2s ease}
#bill-m:checked ~ * .seg label[for=bill-m],#bill-y:checked ~ * .seg label[for=bill-y]{background:var(--ink);color:var(--on-ink)}
.p-y{display:none}
#bill-y:checked ~ * .p-y{display:inline}
#bill-y:checked ~ * .p-m{display:none}
#bill-y:focus-visible ~ * .seg,#bill-m:focus-visible ~ * .seg{outline:2px solid var(--ember);outline-offset:3px;border-radius:999px}
.form.formd{background:rgba(243,239,231,.08);box-shadow:0 0 0 1px rgba(243,239,231,.18),0 22px 50px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.form.formd:focus-within{box-shadow:0 0 0 1px var(--ember),0 0 0 5px rgba(var(--ember-rgb),.28),0 22px 50px -18px rgba(0,0,0,.6)}
.form.formd .field{color:#F3EFE7}
details.faq{border-bottom:1px solid var(--hair2)}
details.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq .faq-btn{flex:none;width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 1px var(--hair2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s ease}
details.faq summary:hover .faq-btn{background:var(--hov-2)}
.faq-ic{transition:transform .25s ease}
details.faq[open] .faq-ic{transform:rotate(45deg)}
details.faq .ans{padding:0 72px 32px 0;font-size:18px;line-height:1.6;color:var(--sec)}
details.faq .ans p{margin:0 0 14px}
details.faq .ans ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
details.faq .ans li{position:relative;padding-left:22px}
details.faq .ans li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--ember)}
details.faq .ans>:last-child{margin-bottom:0}
.fl,.fb{position:relative}
.fl::before,.fb::after{content:"";position:absolute;left:50%;width:4000px;margin-left:-2000px;height:1px;background:var(--hair);pointer-events:none}
.fl::before{top:0}
.fb::after{bottom:0}
.nav a{font-size:15px;color:var(--sec);padding:8px 14px;border-radius:10px;transition:color .15s ease,background .15s ease}
.nav a:hover{color:var(--ink);background:var(--nav-hov)}.mnav a:hover{color:var(--ink)}
section[id]{scroll-margin-top:72px}
.burger{display:none;width:40px;height:40px;border-radius:12px;box-shadow:0 0 0 1px var(--hair2);align-items:center;justify-content:center;color:var(--ink);cursor:pointer;background:var(--card)}
.burger .bg-c{display:none}
#nav-open:checked ~ div .burger .bg-o{display:none}
#nav-open:checked ~ div .burger .bg-c{display:block}
.mnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;padding:8px 20px 18px;background:var(--bg);border-bottom:1px solid var(--hair2);box-shadow:0 24px 40px -24px var(--shadow)}
.mnav a{font-size:19px;color:var(--ink);padding:14px 0;border-top:1px solid var(--hair)}
.mnav a:first-child{border-top:0}
#nav-open:checked ~ .mnav{display:flex}
.tgl{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--hair2);display:inline-flex;align-items:center;justify-content:center;color:var(--sec);cursor:pointer;transition:color .15s ease,background .15s ease}
.tgl:hover{color:var(--ink);background:var(--hov-2)}
#theme-toggle:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.radar-sw{animation:mo-sweep 3.2s linear infinite}
.radar-pg{animation:mo-ping 2.4s ease-out infinite}
@keyframes mo-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes mo-cycle{0%{opacity:0;transform:translateY(8px)}8%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes mo-scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes mo-ping{0%{transform:scale(.7);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes mo-sweep{to{transform:rotate(360deg)}}
@keyframes mo-dash{to{stroke-dashoffset:-24}}
@keyframes mo-draw{0%{stroke-dashoffset:var(--len)}60%,100%{stroke-dashoffset:0}}
@keyframes mo-rise{0%{transform:scaleY(.15)}60%,100%{transform:scaleY(1)}}
@keyframes mo-flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cyc{opacity:0;animation:mo-cycle 8s ease-in-out infinite}
@keyframes mo-fade{0%{opacity:0}10%,86%{opacity:1}96%,100%{opacity:0}}
.fd{opacity:0;animation:mo-fade 8s ease-in-out infinite}
.rd svg{width:56%;height:56%}
.rnote .rd svg{width:16px;height:16px}
@container (max-width: 420px){.rnote{display:none !important}}
@media (max-width:900px){.nw{white-space:normal !important}.stg{padding:24px 12px !important}}
.scan{position:absolute;left:0;right:0;height:56px;margin-top:-28px;background:linear-gradient(180deg,rgba(var(--ember-rgb),0),rgba(var(--ember-rgb),.16),rgba(var(--ember-rgb),0));border-bottom:1px solid rgba(var(--ember-rgb),.45);animation:mo-scan 4s ease-in-out infinite;pointer-events:none}
.stk svg{width:58%;height:58%}
.ping{transform-origin:center;animation:mo-ping 2.4s ease-out infinite}
.sweep{transform-origin:240px 170px;animation:mo-sweep 6s linear infinite}
.dash{animation:mo-dash 1.4s linear infinite}
.drawl{stroke-dasharray:var(--len);animation:mo-draw 6s ease-in-out infinite}
.rise{transform-box:fill-box;transform-origin:bottom;animation:mo-rise 4s ease-in-out infinite}
.flt{animation:mo-flt 5s ease-in-out infinite}
@media (max-width:900px){.ord1,.ord2{order:initial !important}}
@media (prefers-reduced-motion: reduce){.cyc,.fd{animation:none;opacity:1}.scan,.ping,.sweep,.dash,.drawl,.rise,.flt{animation:none}}

.tiles{display:contents}
@media (max-width:1100px){
/* one row of logos above the headline */
.tiles{display:flex;justify-content:center;flex-wrap:nowrap;gap:10px;order:-1;margin:34px 0 0}
main > h1{order:-2}
.tile{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0 !important;animation:none !important;border-radius:13px;box-shadow:0 0 0 1px var(--hair2),0 8px 18px var(--tile-sh)}
.tile svg{width:24px;height:24px;flex:none}
.tile span{display:none}
}
@media (max-width:700px){
.tiles{gap:6px;margin-top:28px}
.tile{width:37px;height:37px;border-radius:11px}
.tile svg{width:20px;height:20px}
}
@media (max-width:900px){.nav,.login{display:none !important}.burger{display:inline-flex}.fb>header,header.fb{grid-template-columns:1fr auto !important;padding:12px 20px !important}.form{flex-wrap:wrap !important;padding:10px !important;border-radius:18px !important}.form .field{flex:1 1 0 !important}.form .cta{flex:1 1 100% !important;justify-content:center}.ft{grid-template-columns:1fr !important;justify-items:center;text-align:center}.ft>span{justify-self:center !important;flex-wrap:wrap;justify-content:center}.ft nav{gap:10px 24px !important}details.faq .ans{padding-right:0 !important}.split{grid-template-columns:1fr !important}.strip{grid-template-columns:repeat(3,1fr) !important}.cell{border-top:1px solid var(--hair);gap:8px !important;font-size:14.5px !important;padding-left:8px !important;padding-right:8px !important}.cell:nth-child(4){border-left:0}}

@media (prefers-reduced-motion: reduce){.radar-sw,.radar-pg{animation:none}.eq i{animation:none}.live{animation:none}.tile{animation:none;transform:rotate(var(--r,0deg))}.bar,.val{animation:none}.pulse{animation:none}.pulse-g{animation:none !important}}

@keyframes mo-valin{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* chart starts when scrolled into view */
.js .plotw:not(.in) .bar,.js .plotw:not(.in) .val{animation-play-state:paused}
/* header + menu */
.hcta{display:inline-flex}
@media (max-width:900px){.hcta{display:none !important}}
@media (max-width:900px){
 .burger{box-shadow:none;background:transparent;width:36px;height:36px}
 .mnav{padding:4px 20px 20px}
 .mnav a{font-size:17px;padding:13px 0}
 .mnav a.mcta{display:flex !important;justify-content:space-between;margin-top:12px;padding:0 6px 0 20px !important;color:#fff !important;border-top:0 !important}
}
/* tighter side margins on phones */
@media (max-width:700px){
 [style*="padding: 14px 40px"]{padding:12px 16px !important}
 [style*="padding: 88px 40px 120px"]{padding:56px 16px 72px !important}
 [style*="padding: 104px 40px 96px"],[style*="padding: 112px 40px 120px"]{padding:64px 16px 64px !important}
 [style*="padding: 72px 40px"]{padding:44px 16px !important}
 [style*="padding: 0 40px 72px"]{padding:0 16px 48px !important}
 [style*="padding: 0 40px 64px"]{padding:0 12px 40px !important}
 [style*="padding: 140px 40px 160px"]{padding:72px 20px 96px !important}
 [style*="padding: 40px 28px"]{padding:20px 10px !important}
 [style*="padding: 40px 40px 44px"]{padding:28px 18px 30px !important}
 [style*="padding: 30px 32px 26px"]{padding:20px 14px 18px !important}
 [style*="padding: 22px 32px"]{padding:16px 18px !important}
 [style*="padding: 28px 40px"]{padding:24px 16px !important}
}
.scroll{padding-bottom:12px}

/* ---------- blog ---------- */
.acc{color:var(--ember);font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:1.1em;letter-spacing:-.02em}
.bl-hero{padding:104px 40px 88px;box-sizing:border-box}
.bl-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;border-radius:999px;background:rgba(var(--ember-rgb),.1);box-shadow:0 0 0 1px rgba(var(--ember-rgb),.22);color:var(--ember);font-size:15px;font-weight:500}
.bl-pill .pulse{width:6px;height:6px;background:var(--ember);animation:none}
.bl-hero h1{margin:28px 0 0;max-width:900px;font-size:clamp(44px,7vw,100px);font-weight:600;line-height:.98;letter-spacing:-.055em}
.bl-hero p{margin:30px 0 0;max-width:560px;font-size:19px;line-height:1.5;color:var(--sec)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.post{display:flex;flex-direction:column;gap:0;padding:40px;border-left:1px solid var(--hair);color:var(--ink);transition:background .2s ease}
.post:first-child{border-left:0}
.post:hover{background:var(--hov);color:var(--ink)}
.post h2{margin:28px 0 0;font-size:27px;line-height:1.08;font-weight:600;letter-spacing:-.045em}
.post p{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--sec)}
.post .art{transition:transform .3s ease}
.post:hover .art{transform:translateY(-3px)}
/* illustrations */
.art{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 1px var(--hair2)}
.art-wide{aspect-ratio:2/1;border-radius:26px}
.art-grid{background:radial-gradient(40% 60% at 85% 12%,rgba(255,176,70,.35),transparent 70%),radial-gradient(45% 55% at 12% 90%,rgba(255,120,60,.32),transparent 70%),linear-gradient(var(--hair) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/34px 34px,var(--card)}
.art-dark{background:radial-gradient(60% 45% at 50% 118%,rgba(255,110,40,.6),transparent 72%),radial-gradient(35% 45% at 90% 0%,rgba(160,110,50,.35),transparent 70%),linear-gradient(rgba(243,239,231,.05) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,rgba(243,239,231,.05) 1px,transparent 1px) 0 0/34px 34px,#141210;box-shadow:0 0 0 1px var(--panel-ring)}
.art-rings{background:radial-gradient(40% 55% at 10% 8%,rgba(255,176,70,.35),transparent 70%),radial-gradient(45% 55% at 92% 92%,rgba(255,120,60,.38),transparent 70%),repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,var(--hair2) 22px 23px),var(--card)}
.art-ic{position:relative;z-index:1;width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:var(--surf);color:var(--ember);box-shadow:0 0 0 1px var(--hair2),0 12px 26px var(--tile-sh)}
.art-dark .art-ic{background:#1D1A17;color:#F3A65A;box-shadow:0 0 0 1px rgba(243,239,231,.14),0 12px 26px rgba(0,0,0,.5)}
.art-ping{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:17px;border:1px solid var(--ember);animation:mo-ping 3s ease-out infinite}
.art-dark @media (prefers-reduced-motion:reduce){.art-ping{animation:none;opacity:0}}
/* article */
.ar{max-width:760px;margin:0 auto;padding:72px 24px 0;box-sizing:border-box}
.ar-back{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--sec)}
.ar h1{margin:28px 0 0;font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.04em}
.ar-intro{margin:20px 0 0;font-size:19px;line-height:1.55;color:var(--sec)}
.ar .art-wide{margin:40px 0 48px}
.prose{padding-bottom:40px;font-size:18px;line-height:1.7;color:var(--sec)}
.prose h2{margin:44px 0 14px;font-size:clamp(22px,2.4vw,27px);line-height:1.15;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:n}
.prose li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:5px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ember)}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n)".";position:absolute;left:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;color:var(--ember)}
.prose blockquote{margin:34px 0;padding:2px 0 2px 24px;border-left:2px solid var(--ember);font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,26px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.bl-cta{padding:88px 40px 96px}
.ar + .bl-cta{padding-top:56px}
@media (max-width:900px){
 .posts{grid-template-columns:1fr}
 .post{border-left:0;border-top:1px solid var(--hair)}
 .post:first-child{border-top:0}
}
@media (max-width:700px){
 .bl-hero{padding:56px 16px 56px}
 .bl-hero p,.ar-intro{font-size:18px}
 .post{padding:28px 16px}
 .ar{padding:40px 16px 0}
 .ar .art-wide{aspect-ratio:16/10;margin:32px 0 36px;border-radius:22px}
 .prose{padding-bottom:24px}
 .bl-cta{padding:56px 12px 72px}
 .ar + .bl-cta{padding-top:36px}
}

/* theme switch */
.tgl{position:relative;width:46px;height:26px;padding:0;border:0;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--hair2);cursor:pointer}
.tgl:hover{background:var(--hov-2)}
.tgl-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;transition:transform .22s cubic-bezier(.4,.1,.2,1)}
.tgl[aria-checked="true"] .tgl-knob{transform:translateX(20px)}
.tgl .i-moon,.tgl[aria-checked="true"] .i-sun{display:none}
.tgl[aria-checked="true"] .i-moon{display:block}
@media (prefers-reduced-motion:reduce){.tgl-knob{transition:none}}