/* Margin brand book page. Everything comes from tokens.css so the theme switch restyles it. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--k-bg);color:var(--k-text);font:380 17px/1.6 var(--k-font-body);transition:background .5s,color .5s;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 38px,var(--k-rule) 38px 39px);z-index:0}
body::after{content:"";position:fixed;top:0;bottom:0;left:max(24px,calc(50% - 700px));width:2px;background:var(--k-margin);opacity:.3;pointer-events:none}
a{color:inherit}
code{font:500 .86em ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--k-text) 8%,transparent);padding:.1em .4em;border-radius:6px}
.wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 48px 0 72px}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px 32px;background:color-mix(in srgb,var(--k-bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--k-line)}
.bar-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.bar-logo b{font:400 26px/1 var(--k-font-title)}
.bar-logo i{font:600 11px var(--k-font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--k-muted);font-style:normal}
.bar-links{display:flex;gap:18px;margin-left:auto;font-size:14px}
.bar-links a{text-decoration:none;color:var(--k-muted)}
.bar-links a:hover{color:var(--k-text)}
.bar-theme{display:flex;gap:6px;background:var(--k-bg-2);padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--k-line)}
.bar-theme button{appearance:none;border:0;background:transparent;color:var(--k-muted);font:500 13px var(--k-font-body);padding:6px 12px 6px 8px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:7px}
.bar-theme button span{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px rgba(128,128,128,.4)}
.bar-theme button[aria-pressed="true"]{background:var(--k-text);color:var(--k-bg)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:40px}
.eyebrow{display:flex;align-items:center;gap:12px;font:520 12px var(--k-font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--k-muted);margin:0 0 20px}
.rule{display:inline-block;width:32px;height:3px;border-radius:2px;background:var(--k-accent)}
.hero h1{font:400 clamp(72px,9vw,128px)/.9 var(--k-font-title);margin:0 0 24px;letter-spacing:-.02em}
.hero h1 sup{font:500 12px var(--k-font-body);letter-spacing:.14em;text-transform:uppercase;vertical-align:top;margin-left:10px;color:var(--k-on-hl);background:var(--k-hl);padding:4px 9px;border-radius:999px;position:relative;top:14px}
.lede{font:400 26px/1.35 var(--k-font-title);margin:0 0 16px}
.lede em{color:var(--k-accent)}
.hero-copy>p:not(.eyebrow):not(.lede){color:var(--k-muted);max-width:520px}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:500;font-size:15px;box-shadow:inset 0 0 0 2px var(--k-line)}
.btn.primary{background:var(--k-hl);color:var(--k-on-hl);box-shadow:none;font-weight:600}
.hero-demo{margin:0}
.frame16{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--k-bg);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px var(--k-line)}
.frame16 iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none}
.hero-demo figcaption{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--k-muted);margin-top:12px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--k-bad);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.3}}
/* sections */
.sec{padding:72px 0 24px;border-top:1px solid var(--k-line);margin-top:48px}
.h2{display:flex;align-items:baseline;gap:18px;font:400 56px/1 var(--k-font-title);margin:0 0 18px;letter-spacing:-.01em}
.h2 .num{font:italic 400 28px var(--k-font-title);color:var(--k-accent)}
.h3{font:520 12px var(--k-font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--k-muted);margin:44px 0 16px}
.intro{font-size:19px;max-width:820px;color:color-mix(in srgb,var(--k-text) 82%,var(--k-bg))}
.small-note{font-size:14px;color:var(--k-muted);max-width:820px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:var(--k-bg-2);border-radius:18px;padding:26px 26px 22px;box-shadow:inset 0 0 0 1px var(--k-line)}
.card h3{font:400 28px/1.1 var(--k-font-title);margin:0 0 10px}
.card p{margin:0;color:var(--k-muted);font-size:15px}
.sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin:0 2px}
/* swatches */
.swatches{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:14px}
@media (max-width:980px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{border-radius:18px;overflow:hidden;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line)}
.swatch .chip{height:120px;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px;font:600 13px var(--k-font-body);box-shadow:inset 0 -1px 0 var(--k-line)}
.swatches.small .swatch .chip{height:78px}
.swatch .meta{padding:12px 14px 14px;font-size:13px;line-height:1.45}
.swatch .meta b{display:block;font:400 22px/1.1 var(--k-font-title);margin-bottom:4px}
.swatch .meta .hex{font:600 13px ui-monospace,monospace;letter-spacing:.02em}
.swatch .meta .rgb,.swatch .meta .use{color:var(--k-muted)}
.swatch .meta .cr{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--k-text) 8%,transparent)}
.notes2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.note{background:var(--k-bg-2);border-radius:18px;padding:22px 26px;box-shadow:inset 0 0 0 1px var(--k-line);font-size:15px}
.note h4{font:400 26px/1.1 var(--k-font-title);margin:0 0 10px}
.note ul{margin:0;padding-left:18px;color:color-mix(in srgb,var(--k-text) 80%,var(--k-bg))}
.note li{margin:0 0 8px}
.note p{margin:0 0 10px}
.keys{display:flex;gap:10px;margin-top:12px}
.keys span{color:#fff;font:600 12px ui-monospace,monospace;padding:6px 10px;border-radius:8px}
/* type */
.fonts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.font{background:var(--k-bg-2);border-radius:18px;padding:22px 26px 20px;box-shadow:inset 0 0 0 1px var(--k-line)}
.font header{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--k-muted)}
.font .role{color:var(--k-hl);font-weight:600}
[data-theme="daylight"] .font .role{color:var(--k-accent)}
.spec{font-size:64px;line-height:1.1;margin:18px 0 10px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spec-s{margin:0;color:var(--k-muted);font-size:15px}
.wmorph{animation:wm 2.4s var(--k-ease-enter) infinite alternate;font-weight:380;color:var(--k-text)}
@keyframes wm{to{font-weight:800}}
table.scale{width:100%;border-collapse:collapse;font-size:14px}
.scale th{text-align:left;font:520 11px var(--k-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted);padding:10px 12px;border-bottom:1px solid var(--k-line)}
.scale td code{white-space:nowrap}
.scale td{padding:14px 12px;border-bottom:1px solid var(--k-line);vertical-align:middle}
.scale td:nth-child(2){font-weight:600;white-space:nowrap}
.weights{display:flex;gap:32px;flex-wrap:wrap;font-size:30px}
.dodont{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dodont figure{margin:0}
.dd-frame{aspect-ratio:16/9;border-radius:14px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line);display:flex;flex-direction:column;justify-content:center;padding:18px;gap:8px;overflow:hidden;position:relative}
.dd-frame.light{background:#F4EFE6}
.dd-lab{font:520 9px var(--k-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--k-muted)}
.dd-word{font:400 20px var(--k-font-body)}
.dd-word mark{background:var(--k-hl);color:var(--k-on-hl);padding:0 .12em;border-radius:.2em;font-weight:700}
.dd-shout{font:900 34px/0.95 var(--k-font-body);text-transform:uppercase;color:var(--k-bad)}
.dd-long{font-size:17px;line-height:1.15;color:var(--k-accent)}
.dodont figcaption{font-size:13px;color:var(--k-muted);margin-top:10px}
.dodont .do figcaption b{color:var(--k-ok)} .dodont .dont figcaption b{color:var(--k-bad)}
.dodont .dont .dd-frame::after{content:"";position:absolute;right:10px;top:10px;width:22px;height:22px;background:linear-gradient(45deg,transparent 45%,var(--k-bad) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--k-bad) 45% 55%,transparent 55%)}
/* layout diagram */
.layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px;align-items:start}
.frame-diagram{position:relative;aspect-ratio:16/9;background:var(--k-bg);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--k-line),0 24px 60px rgba(0,0,0,.25);container-type:inline-size}
.fd-grid{position:absolute;inset:0;background-image:linear-gradient(to right,color-mix(in srgb,var(--k-text) 6%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--k-text) 6%,transparent) 1px,transparent 1px);background-size:3.3333% 5.9259%}
.frame-diagram span{position:absolute;font:600 max(9px,1.05cqw)/1 var(--k-font-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fd-margin{position:absolute;left:6.667%;top:0;bottom:0;width:2px;background:var(--k-margin);opacity:.8}
.fd-margin span{left:8px;bottom:10px;color:var(--k-margin)}
.fd-safe{position:absolute;left:9.167%;top:11.11%;width:42.92%;height:77.78%;border:2px dashed var(--k-accent);border-radius:8px;background:color-mix(in srgb,var(--k-accent) 7%,transparent)}
.fd-safe>span{left:8px;top:8px;color:var(--k-accent)}
.fd-sample{position:absolute;left:6%;top:40%;display:flex;flex-direction:column;gap:.6cqw}
.fd-sample b{font:520 max(6px,.7cqw) var(--k-font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--k-muted)}
.fd-sample i{font:560 4.2cqw/1 var(--k-font-body);font-style:normal;letter-spacing:-.01em}
.fd-sample mark{background:var(--k-hl);color:var(--k-on-hl);border-radius:.18em}
.fd-split{position:absolute;left:55%;top:0;bottom:0;border-left:2px dotted var(--k-faint)}
.fd-split span{left:8px;top:10px;color:var(--k-muted)}
.fd-nar{position:absolute;left:57.5%;top:8.89%;width:38.75%;height:82.22%;border:2px dashed var(--k-faint);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--k-text) 4%,transparent)}
.fd-nar span{left:10px;bottom:10px;color:var(--k-muted)}
.fd-nar svg{position:absolute;left:50%;bottom:0;width:75%;transform:translateX(-50%);fill:color-mix(in srgb,var(--k-text) 10%,transparent)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:15px}
.specs dt{color:var(--k-muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.specs dd{margin:0}
.alts{display:flex;gap:14px;margin-top:22px}
.alt{font-size:13px;color:var(--k-muted)}
.alt i{display:block;width:160px;aspect-ratio:16/9;border-radius:8px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line);margin-bottom:6px;position:relative}
.alt i::after{content:"";position:absolute;border:1.5px dashed var(--k-accent);border-radius:4px;top:11%;bottom:11%}
.a-full::after{left:9%;right:9%}.a-centre::after{left:19%;right:19%}
.shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.shape{font-size:13px;color:var(--k-muted);display:flex;flex-direction:column;gap:10px}
.shape b{color:var(--k-text);margin-right:4px}
.shape i{display:block;height:84px;background:var(--k-bg-2);box-shadow:inset 0 0 0 2px var(--k-line)}
.shape i.pill{border-radius:999px;height:48px;margin:18px 0}
.shape i.hair{background:transparent;box-shadow:none;border-top:2px solid var(--k-text);height:0;margin:42px 0}
.shape svg.pen{height:84px;width:100%}
.shape svg path,.curve svg path.c{fill:none;stroke:var(--k-accent);stroke-width:5;stroke-linecap:round}
/* motion */
.curves{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 28px}
.curve{margin:0;background:var(--k-bg-2);border-radius:18px;padding:18px 22px;box-shadow:inset 0 0 0 1px var(--k-line)}
.curve svg{width:100%;height:170px;overflow:visible}
.curve svg .ax{stroke:var(--k-line);stroke-width:1.5;fill:none}
.curve svg path.c{stroke:var(--k-hl);stroke-width:3.5}
.track{position:relative;height:14px;margin:14px 0 14px;border-radius:7px;background:color-mix(in srgb,var(--k-text) 6%,transparent)}
.track i{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--k-hl);animation:trk 2.4s infinite}
@keyframes trk{0%{left:0}45%,100%{left:calc(100% - 14px)}}
.curve figcaption{font-size:14px;color:var(--k-muted)}
.curve figcaption b{color:var(--k-text);font:400 22px var(--k-font-title)}
.demos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.demo{margin:0}
.dm{height:120px;border-radius:14px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line);display:grid;place-items:center;overflow:hidden;font:560 34px var(--k-font-body)}
.demo figcaption{font-size:13px;color:var(--k-muted);margin-top:8px}
.demo figcaption b{color:var(--k-text)}
.d-rise{display:flex;justify-content:center;align-items:center}
.d-rise span{display:inline-block;animation:rise 3s var(--k-ease-enter) infinite}
.d-rise span:nth-child(2){animation-delay:.05s}.d-rise span:nth-child(3){animation-delay:.1s}.d-rise span:nth-child(4){animation-delay:.15s}.d-rise span:nth-child(5){animation-delay:.2s}
@keyframes rise{0%{transform:translateY(60px);opacity:0}30%,85%{transform:none;opacity:1}100%{opacity:0}}
.hlx{position:relative;padding:0 .1em;z-index:0;animation:hltx 3s infinite}
.hlx::before{content:"";position:absolute;inset:.1em -.08em 0;background:var(--k-hl);border-radius:.2em .1em .24em .1em;z-index:-1;transform-origin:left;animation:hlbg 3s var(--k-ease-enter) infinite}
@keyframes hlbg{0%,15%{transform:scaleX(0)}40%,88%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes hltx{0%,22%{color:var(--k-text)}30%,100%{color:var(--k-on-hl)}}
.d-draw svg,.mk{width:64px;height:64px;overflow:visible}
.d-draw path,.mk path{fill:none;stroke:var(--k-ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.d-draw path{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 2.6s var(--k-ease-enter) infinite}
@keyframes draw{10%{stroke-dashoffset:100}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.mk.bad path{stroke:var(--k-bad)} .mk.acc path{stroke:var(--k-accent)}
.mk.acc{width:84px;height:30px}
.d-stamp i{width:26px;height:26px;border-radius:50%;background:var(--k-hl);animation:stamp 2.4s var(--k-ease-mark) infinite}
@keyframes stamp{0%,10%{transform:translateY(-50px) scale(.3);opacity:0}40%,90%{transform:none;opacity:1}100%{opacity:0}}
.d-beat{display:flex;align-items:flex-end;gap:10px;height:120px;padding-bottom:30px;place-items:end center;justify-content:center}
.d-beat i,.mk-bars i{display:block;width:22px;height:16px;border-radius:5px;background:var(--k-line);transform-origin:bottom}
.d-beat i.on,.mk-bars i.on{height:54px;background:var(--k-hl)}
.d-beat i{animation:beat 1.6s ease-in-out infinite}
.d-beat i:nth-child(2){animation-delay:.3s}.d-beat i:nth-child(3){animation-delay:.6s}.d-beat i:nth-child(4){animation-delay:.9s}
@keyframes beat{0%,20%,100%{transform:none}10%{transform:scaleY(1.3)}}
.d-exit span{animation:exit 2.6s infinite}
@keyframes exit{0%,50%{transform:none;opacity:1}70%{transform:translateY(16px);opacity:0;animation-timing-function:var(--k-ease-exit)}71%{transform:translateY(-30px);opacity:0}100%{transform:none;opacity:1;animation-timing-function:var(--k-ease-enter)}}
/* marks */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.marks figure{margin:0;height:150px;border-radius:14px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:500 30px var(--k-font-body)}
.marks figcaption{font:400 13px var(--k-font-body);color:var(--k-muted)}
.mk-hl{position:relative;z-index:0;color:var(--k-on-hl);font-weight:760;padding:0 .06em}
.mk-hl::before{content:"";position:absolute;inset:.12em -.06em 0;background:var(--k-hl);border-radius:.2em .1em .24em .1em;z-index:-1}
.mk-hl i{position:absolute;left:50%;top:-.34em;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--k-hl)}
.mk-bars{display:flex;align-items:flex-end;gap:8px;height:54px}
.mk-syl b{color:var(--k-faint);font-weight:300;padding:0 .1em}
.mk-caret{position:relative}.mk-caret em{font-style:normal;color:var(--k-accent)}
.mk-caret svg{position:absolute;right:-6px;top:100%;width:20px;height:20px}
.mk-caret svg path,.mk-strike svg path{fill:none;stroke:var(--k-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.mk-strike{position:relative;color:var(--k-bad)}
.mk-strike svg{position:absolute;left:-6px;top:50%;width:calc(100% + 12px);height:20px;margin-top:-10px}
.mk-strike svg path{stroke:var(--k-bad)}
.tags{display:flex;gap:12px;flex-wrap:wrap}
.k-tag{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 13px;border-radius:999px;font:500 17px/1 var(--k-font-body);color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 55%,transparent)}
.k-tag i{width:10px;height:10px;border-radius:50%;background:var(--c)}
/* themes */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.theme{appearance:none;text-align:left;cursor:pointer;border:0;border-radius:18px;padding:22px;background:var(--tb);color:var(--tt);font:inherit;min-height:190px;position:relative;box-shadow:0 0 0 1px rgba(128,128,128,.3)}
.theme b{display:block;font:400 34px var(--k-font-title);margin-bottom:6px}
.theme span{display:block;font-size:14px;opacity:.75;max-width:92%}
.theme i{position:absolute;right:20px;top:24px;width:44px;height:20px;border-radius:5px;background:var(--th);box-shadow:-56px 0 0 -4px var(--ta)}
.theme:focus-visible,.bar-theme button:focus-visible{outline:3px solid var(--k-hl);outline-offset:3px}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.gal{display:block;text-decoration:none;border-radius:16px;overflow:hidden;outline:1px solid var(--k-line);outline-offset:-1px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line);transition:transform .35s var(--k-ease-enter)}
.gal:hover{transform:translateY(-4px)}
.gal img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0E1726}
.gal div{padding:14px 16px 16px}
.gal b{font:400 24px var(--k-font-title);display:block}
.gal span{font-size:14px;color:var(--k-muted)}
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dl a{display:block;text-decoration:none;padding:20px 22px;border-radius:16px;background:var(--k-bg-2);box-shadow:inset 0 0 0 1px var(--k-line)}
.dl a:hover{box-shadow:inset 0 0 0 2px var(--k-hl)}
.dl b{display:block;margin-bottom:4px}
.dl span{font-size:14px;color:var(--k-muted)}
.foot{padding:56px 48px 72px 72px;color:var(--k-muted);font-size:14px}
@media (max-width:980px){.hero,.layout,.notes2,.fonts{grid-template-columns:1fr}.cards3,.curves,.themes,.gallery,.dl{grid-template-columns:1fr 1fr}.demos,.dodont,.marks,.shapes{grid-template-columns:repeat(2,1fr)}.bar-links{display:none}.wrap{padding:0 22px 0 40px}}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important}}