/* holarch.app marketing site. Light only; no scripts. Brand from css/tokens.css (navy #24335f, teal #0e4a59 / #8fdbe0, amber #f2a93b). */
:root{--bg:#fff;--bg2:#f4f6f9;--bd:#d5dde7;--tx:#16213a;--tx2:#44526d;--lk:#0e4a59;--pr:#24335f;--prh:#1b2850;--acc:#0e4a59;--accbg:#dcf3f4;--wbg:#fcf0d9;--wtx:#8a5300;--err:#b42318;--errbg:#fde8e6;--band:linear-gradient(135deg,#24335f,#0e4a59);--sh:0 8px 24px rgba(15,26,51,.10);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.6;overflow-wrap:break-word}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
svg{display:block;flex:none}
img{max-width:100%;height:auto}
.w{max-width:1120px;margin:0 auto;padding:0 16px}
.s{padding:56px 0}
.alt{background:var(--bg2)}
h1{font-size:clamp(34px,7vw,54px);line-height:1.08;font-weight:750;letter-spacing:-.02em}
h2{font-size:clamp(25px,4vw,34px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
h3{font-size:18px;line-height:1.35;font-weight:650}
p{color:var(--tx2)}
strong{font-weight:650}
.lead{font-size:clamp(17px,2.2vw,20px);line-height:1.55;max-width:40em}
.eb{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.mt{margin-top:16px}
.hd{max-width:720px;margin-bottom:32px}.hd p{margin-top:12px}.hd.m0{margin:0}
a{color:var(--lk);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--pr);color:#fff;padding:8px 14px;border-radius:6px}
.skip:focus{left:16px}
/* header */
.hdr{border-bottom:1px solid var(--bd);background:var(--bg)}
.hdr .w{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-height:64px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font-weight:700;font-size:19px}
.nav{display:flex;flex-wrap:wrap;gap:2px 18px}
.nav a{color:var(--tx2);text-decoration:none;font-weight:550;font-size:15px;padding:6px 0;display:inline-block}
.nav a:hover{color:var(--tx);text-decoration:underline}
.nav a[aria-current=page]{color:var(--tx);box-shadow:inset 0 -2px 0 var(--acc)}
@media (min-width:760px){.hdr nav{margin-left:auto}}
/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;border-radius:8px;border:2px solid var(--pr);font:inherit;font-weight:650;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn.p{background:var(--pr);color:#fff}
.btn.p:hover{background:var(--prh);border-color:var(--prh)}
.btn.o{background:transparent;color:var(--pr)}
.btn.o:hover{background:var(--accbg)}
.band{background:var(--band);color:#fff}
.band p{color:#d3dceb}
.band .eb{color:#8fdbe0}.band .lead{color:#fff}
.band .btn.p{background:#fff;color:#24335f;border-color:#fff}
.band .btn.p:hover{background:#dcf3f4;border-color:#dcf3f4}
.band a:focus-visible{outline-color:#8fdbe0}
/* layout */
.split{display:grid;gap:32px;align-items:center}
.g{display:grid;gap:16px;grid-template-columns:1fr}
.card{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:22px}
.card h3{margin:14px 0 6px}
.card p{font-size:15px}
.cta{padding:32px}.cta .btns{margin-top:0}
.ic{width:44px;height:44px;border-radius:10px;background:var(--accbg);color:var(--acc);display:flex;align-items:center;justify-content:center}
.ic svg{width:24px;height:24px}
.n{font-size:13px;font-weight:700;color:var(--tx2);margin-left:auto}
.row{display:flex;align-items:center;gap:12px}
.row .eb{margin:0}
.ck li{position:relative;padding-left:30px;margin-top:10px;color:var(--tx2)}
.ck li::before{content:"";position:absolute;left:5px;top:.5em;width:12px;height:7px;border-left:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(-45deg)}
.ck strong{color:var(--tx)}
/* screenshot slots (second pass: replace with <img class="img">) */
.shot{aspect-ratio:1.6;width:100%;border:2px dashed var(--bd);border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:14px;font-weight:600;color:var(--tx2)}
.alt .shot{background:var(--bg)}
.img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--bd);box-shadow:var(--sh)}
.tag{display:inline-block;vertical-align:middle;font-size:12px;font-weight:700;line-height:1.5;padding:2px 10px;border-radius:999px;background:var(--wbg);color:var(--wtx);white-space:nowrap}
.note{border-left:4px solid var(--wtx);background:var(--wbg);border-radius:8px;padding:18px 20px}
.note h2{font-size:20px;color:var(--tx)}
.note p{color:var(--tx);margin-top:6px}
.note .row{color:var(--wtx)}
.logo{width:64px;height:64px;margin-bottom:24px}
.tier{display:flex;flex-direction:column}
.tier .k{font-size:20px;font-weight:700;margin-bottom:6px}
.tier .st{font-weight:650;margin-bottom:10px}
.tier p{margin-bottom:22px}
.tier .btn{margin-top:auto;align-self:flex-start}
.ctr{text-align:center}.ctr .lead{margin:12px auto 0}.ctr .btns{justify-content:center}
.btns.sm{margin-top:18px}
/* contact form */
.form{display:grid;gap:18px;max-width:640px}
.f label{display:block;font-weight:650;margin-bottom:6px}
.f .opt{font-weight:400;color:var(--tx2)}
.f input,.f select,.f textarea{display:block;width:100%;font:inherit;color:var(--tx);background:#fff;border:1px solid #8a97ab;border-radius:8px;padding:10px 12px;min-height:46px}
.f textarea{min-height:180px;resize:vertical}
.f .hint{font-size:14px;color:var(--tx2);margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{border-left:4px solid var(--err);background:var(--errbg);border-radius:8px;padding:14px 18px;color:var(--tx)}
/* footer */
.ft{padding:32px 0;font-size:14px;background:var(--bg2);border-top:1px solid var(--bd)}
.ft .row{gap:10px;color:var(--tx);font-weight:650}
.ft ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0}
.ft p{margin-top:4px}
@media (min-width:600px){.w{padding:0 24px}.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.s{padding:88px 0}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.split{grid-template-columns:1fr 1fr;gap:56px}.split.wide{grid-template-columns:5fr 6fr}.split.rev>:first-child{order:2}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.band a.lt{color:#fff}
.split.top{align-items:start}
.f select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2344526d' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center}
body{min-height:100vh;display:flex;flex-direction:column}main{flex:1 0 auto}
/* legal pages (terms, privacy) */
.legal{max-width:760px}
.legal .note{margin-top:24px}.legal .note p{margin:0}
.legal .upd{margin-top:16px;font-size:14px}
.legal h2{font-size:24px;margin:44px 0 0;scroll-margin-top:16px}
.legal h3{margin:24px 0 0}
.legal p{margin-top:12px}
.legal ul{list-style:disc;padding-left:24px;margin-top:10px}
.legal li{color:var(--tx2);margin-top:6px}
.legal li strong,.legal p strong{color:var(--tx)}
.legal code{font-size:.9em;background:var(--bg2);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.legal .tw{overflow-x:auto;margin-top:16px}
.legal table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.legal caption{text-align:left;font-weight:650;color:var(--tx);padding-bottom:8px}
.legal th,.legal td{border:1px solid var(--bd);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--bg2);color:var(--tx)}.legal td{color:var(--tx2)}
/* help (generated from the in-app Help by build.py) */
kbd{display:inline-block;min-width:1.6em;padding:0 6px;font:600 .85em/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;color:var(--tx);background:#fff;border:1px solid #b9c4d3;border-bottom-width:2px;border-radius:5px;white-space:nowrap}
.help .hd{margin-bottom:24px}
.jump ul{display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-block;padding:4px 12px;border:1px solid var(--bd);border-radius:999px;font-size:14px;font-weight:550;text-decoration:none;color:var(--tx2);background:var(--bg)}
.jump a:hover{border-color:var(--acc);color:var(--tx)}
.hidx{display:grid;gap:16px;margin-top:32px;align-items:start}
.hsec{border:1px solid var(--bd);border-radius:10px;padding:20px 22px;scroll-margin-top:16px}
.hsec h2{font-size:20px;margin-bottom:8px}
.hsec li{margin-top:6px;color:var(--tx2)}
.tag.ht{background:var(--accbg);color:var(--acc);font-size:11px;padding:0 8px;margin-left:6px}
@media (min-width:760px){.hidx{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.hidx{grid-template-columns:repeat(3,1fr)}}
.topic{max-width:780px}
.topic h1{font-size:clamp(28px,5vw,40px);margin-top:4px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;padding:0;margin:0 0 20px;list-style:none;font-size:14px;color:var(--tx2)}
.crumbs li+li::before{content:"/";margin:0 8px;color:#8a97ab}
.hbody{margin-top:16px}
.hbody p,.hbody ul,.hbody ol{margin-top:12px}
.hbody .lede{font-size:18px;color:var(--tx)}
.hbody h2{font-size:22px;margin-top:36px}
.hbody h3{margin-top:24px}
.hbody ul{list-style:disc;padding-left:24px}
.hbody ol{padding-left:26px}
.hbody li{color:var(--tx2);margin-top:6px}
.hbody strong{color:var(--tx)}
.hbody code{font-size:.88em;background:var(--bg2);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.hbody .note{margin-top:12px;color:var(--tx)}
.hbody .cards{display:grid;gap:10px;margin-top:12px}
.hbody .card{display:block;padding:12px 14px}.hbody .card span{display:block;font-size:14px;color:var(--tx2)}
.hbody .tw{overflow-x:auto;margin-top:16px}
.hbody table{border-collapse:collapse;width:100%;font-size:15px}
.hbody th,.hbody td{border:1px solid var(--bd);padding:7px 10px;text-align:left;vertical-align:top}
.hbody th{background:var(--bg2);color:var(--tx)}.hbody td{color:var(--tx2)}
.pn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--bd)}
.pn a{display:flex;flex-direction:column;max-width:48%;min-width:0;text-decoration:none;font-weight:600}
.pn a span{font-size:13px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.pn a:hover{text-decoration:underline}
.pn .next{margin-left:auto;text-align:right}
@media (max-width:520px){.pn a{max-width:100%}.pn .next{text-align:left;margin-left:0}}
/* zoomable screenshots: build.py wraps <picture> in a checkbox + label (data-zoom); checked = expanded in place, CSS only */
.zbox{display:block;position:relative;max-width:760px;margin-inline:auto}
.zoom .img-full{display:none}
.zoom-toggle{position:absolute;top:50%;left:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.zoom{display:block;position:relative;aspect-ratio:1600/936;border-radius:12px;cursor:zoom-in}
.zoom picture{display:block}
.zoom .img{transition:transform .2s,box-shadow .2s}
.zoom:hover .img{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,26,51,.18)}
.zoom::after{content:"";position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(22,33,58,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") no-repeat center;opacity:.8;transition:opacity .2s}
.zoom:hover::after{opacity:1}
.zoom-toggle:focus-visible+.zoom{outline:3px solid var(--acc);outline-offset:4px}
/* expanded: the image is fixed and centered over a dim backdrop (the label's ::before); the label keeps the thumbnail's space */
.zoom-toggle:checked+.zoom{cursor:zoom-out}
.zoom-toggle:checked+.zoom::before{content:"";position:fixed;inset:0;z-index:99;background:rgba(10,16,32,.88)}
.zoom-toggle:checked+.zoom::after{display:none}
.zoom-toggle:checked+.zoom .img,.zoom-toggle:checked+.zoom:hover .img{position:fixed;z-index:100;top:50%;left:50%;width:auto;height:auto;max-width:96vw;max-height:92vh;object-fit:contain;transform:translate(-50%,-50%);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.zoom-toggle:checked+.zoom .img{width:min(96vw,calc(92vh * 1600 / 936))}
.zoom-toggle:checked+.zoom .img-full{display:block;position:fixed;z-index:101;top:50%;left:50%;width:min(96vw,calc(92vh * 1600 / 936));height:auto;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%);border-radius:8px}
html:has(.zoom-toggle:checked){overflow:hidden}
@media (prefers-reduced-motion:no-preference){.zoom-toggle:checked+.zoom .img,.zoom-toggle:checked+.zoom .img-full{animation:zoom-in .22s ease-out}.zoom-toggle:checked+.zoom::before{animation:zoom-fade .22s ease-out}}
@keyframes zoom-in{from{transform:translate(-50%,-50%) scale(.6);opacity:.4}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes zoom-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.zoom .img,.zoom::after{transition:none}.zoom:hover .img{transform:none}}
/* header app buttons (APP_LIVE) */
.happ{display:flex;align-items:center;gap:16px}
.happ .signin{color:var(--tx2);font-weight:550;font-size:15px;text-decoration:none}
.happ .signin:hover{color:var(--tx);text-decoration:underline}
.btn.sm{min-height:38px;padding:6px 16px;font-size:15px}
@media (max-width:759px){.happ{width:100%;justify-content:flex-start;padding-bottom:4px}}
/* clickable cards: the "Learn more" link stretches over the whole card */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card.lk{position:relative;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card.lk:hover{border-color:var(--acc);box-shadow:var(--sh)}
.card.lk:focus-within{border-color:var(--acc)}
.more{display:inline-block;margin-top:auto;padding-top:12px;font-weight:650;text-decoration:none}
.more::after{content:"";position:absolute;inset:0;border-radius:10px}
.more:focus-visible{outline:none}.more:focus-visible::after{outline:3px solid var(--acc);outline-offset:2px}
.card.lk:hover .more{text-decoration:underline}
.more.solo::after{display:none}
/* feature detail pages */
.steps{counter-reset:st;display:grid;gap:14px;max-width:820px;padding:0}
.steps li{counter-increment:st;position:relative;padding:4px 0 0 52px;color:var(--tx2);list-style:none}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--pr);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps strong{color:var(--tx)}
.hl{display:grid;gap:8px 24px;grid-template-columns:1fr;list-style:disc;padding-left:20px;margin-top:16px}
.hl li{color:var(--tx2)}
@media (min-width:760px){.hl{grid-template-columns:repeat(2,1fr)}}
.fpage .crumbs ol{margin-bottom:24px}
.fsub{margin-top:12px}.fsub li{margin-top:8px}
/* the model diagram (Home, /features/model/) */
.mdl{display:block;width:100%;height:auto;max-width:1040px;margin:0 auto}
.mdl .cls rect{fill:#fff;stroke:#24335f;stroke-width:1.6}
.mdl .cls text{fill:#16213a;font:650 14px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.mdl .core{fill:#dcf3f4;stroke:#0e4a59;stroke-width:1.6;stroke-dasharray:6 5}
.mdl .core-t{fill:#0e4a59;font:700 13px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;letter-spacing:.06em}
.mdl .rel{stroke:#0e4a59;stroke-width:1.5;fill:none}
.mdl .rl{fill:#44526d;font:italic 500 11.5px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.mdl .rlb{fill:#fff}
.mdl .view rect{fill:#24335f}
.mdl .view text{fill:#fff;font:600 12.5px -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.mdl .vl{stroke:#8a97ab;stroke-width:1.2;stroke-dasharray:3 4;fill:none}
.mdl .ah{fill:#0e4a59}
.mdlcap{max-width:760px;margin:16px auto 0;text-align:center;font-size:14px}
.ft .fcol ul{gap:4px 18px;font-size:13.5px}
.mbse .hd{max-width:820px}
.ctr-b{justify-content:center}
.aitrust .card h3{margin:0 0 6px}
.mdlw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mdlw:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
@media (max-width:700px){.mdl{min-width:700px}}
/* help search (help-search.js; the form stays hidden without scripts) */
.hsearch{margin:0 0 28px;max-width:760px}
.hsearch input,.hmini input{display:block;width:100%;font:inherit;color:var(--tx);background:#fff;border:1px solid #8a97ab;border-radius:8px;padding:10px 14px;min-height:48px;font-size:17px}
.hsearch input:focus-visible,.hmini input:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.hstat{margin-top:10px;font-size:14px}
.hstat:empty{display:none}
.hres{list-style:none;padding:0;margin:8px 0 0}
.hres li{padding:12px 14px;border:1px solid var(--bd);border-radius:10px;margin-top:8px;position:relative}
.hres li.on,.hres li:hover{border-color:var(--acc);background:var(--accbg)}
.hr-t{font-weight:650;text-decoration:none}
.hr-t::after{content:"";position:absolute;inset:0;border-radius:10px}
.hr-s{display:block;font-size:13px;color:var(--tx2)}
.hr-b{font-size:14.5px;margin-top:4px}
.hres mark{background:#fcf0d9;color:inherit;border-radius:3px;padding:0 1px}
.hmini{display:flex;gap:8px;max-width:420px;margin:0 0 20px}
.hmini input{min-height:40px;font-size:15px;padding:6px 12px}
.split>*,.g>*{min-width:0}
/* pricing */
.tiers{align-items:stretch}
.tier .price{margin:4px 0 0;color:var(--tx);font-size:15px}
.tier .amt{font-size:34px;font-weight:750;letter-spacing:-.01em;margin-right:4px}
.tier .alt-price{margin:2px 0 6px;font-size:14px}
.tier ul.ck{margin-bottom:22px}
.tier ul.ck li{font-size:15px}
.hl-tier{border-color:var(--acc);box-shadow:var(--sh)}
.fine{margin-top:24px;font-size:14px;max-width:820px}
.faq details{border-bottom:1px solid var(--bd);padding:14px 0;max-width:820px}
.faq summary{cursor:pointer;font-weight:650;color:var(--tx)}
.faq details p{margin-top:8px}
.cta-note{margin-top:10px;font-size:14px}
.band .cta-note{color:#d3dceb}
.chg h2 .date{font-size:15px;font-weight:400;color:var(--tx2);margin-left:10px}
.chg h2:first-of-type{margin-top:32px}
/* docs (/docs/, generated by build.py from docs/user/*.md): index, page with sticky table of contents on wide screens */
.didx{display:grid;gap:16px;margin-top:32px;align-items:start}
.dsec{border:1px solid var(--bd);border-radius:10px;padding:20px 22px;scroll-margin-top:16px}
.dsec h2{font-size:20px;margin-bottom:4px}
.dsec li{margin-top:14px}
.dsec li p{font-size:15px;margin-top:2px}
.dsec .dt{font-weight:650}
.dsec .dguide{font-size:14px;margin-top:4px}
.dsec .dguide a{font-weight:600}
@media (min-width:760px){.didx{grid-template-columns:repeat(2,1fr)}}
.docs .topic{max-width:800px}
.dsum{font-size:18px;color:var(--tx);margin-top:12px}
.dstart{margin-top:14px}
.dstart a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--accbg);color:var(--acc);font-weight:650;text-decoration:none}
.dstart a:hover{text-decoration:underline}
.dbody h2,.dbody h3{scroll-margin-top:16px}
.dbody ol ol,.dbody ul ul,.dbody ol ul,.dbody ul ol{margin-top:4px}
.dbody th.c,.dbody td.c{text-align:center}.dbody th.r,.dbody td.r{text-align:right}
.dbody .tw:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.dbody .dfig{margin:20px 0 0}
.dbody .dfig>.img{max-width:760px;margin-inline:auto}
.dbody pre.code{margin-top:12px;padding:12px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;overflow-x:auto;font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dbody pre.code code{background:none;padding:0;font-size:inherit;overflow-wrap:normal}
.callout{margin-top:16px;border-left:4px solid var(--acc);background:var(--accbg);border-radius:8px;padding:12px 16px}
.callout p{margin:0;color:var(--tx)}.callout p+p{margin-top:8px}
.callout.tip{border-left-color:#2e7d4f;background:#e6f4ea}
.callout.limit{border-left-color:var(--wtx);background:var(--wbg)}
.drel{margin-top:40px;padding:18px 20px;border:1px solid var(--bd);border-radius:10px}
.drel h2{font-size:18px}
.drel ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.dupd{margin-top:24px;font-size:14px}
.dlink{margin-top:28px;font-weight:600}
.toc-h{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin-bottom:8px}
.tocl{list-style:none;padding:0;margin:0;font-size:14px;line-height:1.4}
.tocl li{margin-top:6px}
.tocl ol{list-style:none;padding:0 0 0 12px;margin:0;border-left:1px solid var(--bd)}
.tocl a{color:var(--tx2);text-decoration:none}
.tocl a:hover{color:var(--tx);text-decoration:underline}
.tocl>li.key>a{display:inline-block;color:var(--acc);font-weight:700;padding:2px 8px;margin-left:-8px;border-radius:6px;background:var(--accbg)}
.toc-m{margin-top:20px;border:1px solid var(--bd);border-radius:10px;padding:10px 16px}
.toc-m summary{cursor:pointer;font-weight:650;color:var(--tx)}
.toc-m .tocl{margin:8px 0 4px}
.toc{display:none}
@media (min-width:1100px){
  .dlay.has-toc{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start}
  .toc{display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;padding:4px 0 16px 16px;border-left:1px solid var(--bd)}
  .toc-m{display:none}
}
.hr-k{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:0 7px;border-radius:999px;margin-right:6px;background:var(--bg2);color:var(--tx2);vertical-align:1px}
.hr-k.d{background:var(--accbg);color:var(--acc)}