/* Paper, ink, one highlighter. Tokens are locked in design/BRAND-KIT.md. */
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono.18be4527.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --color-bg:#F6F3EA;
  --color-surface:#FFFDF7;
  --color-mat:#E9E4D6;
  --color-text:#1B1915;
  --color-text-secondary:#4A453B;
  --color-text-muted:#676152;
  --color-border:#D6CFBD;
  --color-plate-edge:rgba(27,25,21,.22);
  --color-accent:#FFD43B;
  --color-accent-hover:#F7C518;
  --color-accent-edge:#8F6A00;
  --color-on-accent:#1B1915;
  --color-focus:#6F5200;
  --font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --type-price:clamp(2.5rem,1.9rem + 2.6vw,4rem);
  --type-h1:clamp(1.625rem,1.1rem + 2.1vw,2.75rem);
  --type-h2:clamp(1.375rem,1.2rem + .75vw,1.875rem);
  --space-section:72px;
  --space-block:32px;
  --space-stack:16px;
  --space-head:12px;
  --space-card-padding:16px;
  --space-card-gap:16px;
  --space-mat:8px;
  --space-page-x:16px;
  --layout-max-content:1120px;
  --layout-max-text:68ch;
  --layout-rail:224px;
  --layout-header-height:56px;
  --radius-card:8px;
  --radius-button:6px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --color-bg:#151411;
    --color-surface:#1D1B17;
    --color-mat:#28251F;
    --color-text:#EEE9DD;
    --color-text-secondary:#C2BBAB;
    --color-text-muted:#9A9383;
    --color-border:#3A362E;
    --color-plate-edge:rgba(238,233,221,.2);
    --color-accent:#FFD43B;
    --color-accent-hover:#FFE270;
    --color-accent-edge:#FFD43B;
    --color-on-accent:#1B1915;
    --color-focus:#FFD43B;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#151411;
  --color-surface:#1D1B17;
  --color-mat:#28251F;
  --color-text:#EEE9DD;
  --color-text-secondary:#C2BBAB;
  --color-text-muted:#9A9383;
  --color-border:#3A362E;
  --color-plate-edge:rgba(238,233,221,.2);
  --color-accent:#FFD43B;
  --color-accent-hover:#FFE270;
  --color-accent-edge:#FFD43B;
  --color-on-accent:#1B1915;
  --color-focus:#FFD43B;
}
@media (min-width:390px){:root{--space-page-x:20px}}
@media (min-width:768px){:root{--space-page-x:32px;--space-card-padding:20px;--space-card-gap:24px;--space-mat:12px}}
@media (min-width:1024px){:root{--space-page-x:40px;--space-section:104px;--layout-header-height:64px}}
@media (min-width:1280px){:root{--layout-rail:256px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--layout-header-height) + 16px)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 1rem/1.6 var(--font-text);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
h1{font-size:var(--type-h1);line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h2{font-size:var(--type-h2);line-height:1.2;letter-spacing:-.01em;font-weight:700;text-wrap:balance}
h3,h4{font-size:1.125rem;line-height:1.35;font-weight:600}
code{font-family:var(--font-mono);font-size:.875em;background:var(--color-mat);padding:1px 5px;border-radius:3px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--layout-max-content) + 2 * var(--space-page-x));margin-inline:auto;padding-left:max(var(--space-page-x),env(safe-area-inset-left));padding-right:max(var(--space-page-x),env(safe-area-inset-right))}
.mono{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;line-height:1.5;font-variant-ligatures:none}
.lead{font-size:1.0625rem;line-height:1.5;color:var(--color-text-secondary);max-width:60ch}
.small{font-size:.875rem;line-height:1.5;color:var(--color-text-secondary)}
.caption{font-size:.8125rem;line-height:1.5;color:var(--color-text-muted)}
.label{color:var(--color-text-muted)}
.icon{flex:none}
.icon--inline{display:inline-block;vertical-align:-2px;margin-left:4px}
.link{color:var(--color-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--color-text-muted)}
.caption .link{color:inherit}
.mark-fill{background:var(--color-accent);color:var(--color-on-accent);padding:0 .3em;border-radius:3px}
.skip{position:absolute;left:8px;top:-100px;z-index:40;padding:12px 16px;background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-button);font-weight:600}
.skip:focus{top:8px}
@media (min-width:768px){.lead{font-size:1.125rem}}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--color-bg);border-bottom:1px solid var(--color-border)}
@supports (backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px)){
  .site-header{background:color-mix(in srgb,var(--color-bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.site-header__inner{display:flex;align-items:center;gap:16px;height:var(--layout-header-height)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-text);text-decoration:none;white-space:nowrap}
.brand__name{font-size:.9375rem;font-weight:700}
.mark__tile{fill:var(--color-text)}
.mark__line{fill:var(--color-bg)}
.mark__bar{fill:var(--color-accent)}
.nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:4px}
.nav a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 12px;font-size:.875rem;font-weight:500;color:var(--color-text-secondary);text-decoration:none}
.nav a[aria-current]{color:var(--color-text);font-weight:600}
.nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:var(--color-accent)}
.site-header__tools{display:flex;align-items:center;gap:4px;margin-left:auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-button);background:transparent;color:var(--color-text);cursor:pointer}
.theme-toggle{display:none}
.js .theme-toggle{display:inline-flex}
.icon--sun,.icon--moon,.icon--close{display:none}
[data-theme="dark"] .icon--sun,[data-theme="light"] .icon--moon{display:block}
.menu-open .icon--close{display:block}
.menu-open .icon--menu{display:none}
.menu{position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--layout-header-height));height:calc(100dvh - var(--layout-header-height));overflow-y:auto;overscroll-behavior:contain;background:var(--color-bg);border-top:1px solid var(--color-border);padding:8px 0 calc(32px + env(safe-area-inset-bottom))}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--color-border);font-weight:500;text-decoration:none}
.menu__pages a{font-size:1.125rem;font-weight:600}
.menu a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--color-accent);text-underline-offset:.3em}
.menu .label{margin:24px 0 4px}
html.menu-open{overflow:hidden}
@media (min-width:768px){
  .nav{display:block}
  .site-header__tools{margin-left:0}
  .menu-btn,.menu{display:none}
  .brand__name{font-size:1rem}
}

/* Buttons and actions */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 20px 12px;border:1px solid var(--color-text);border-radius:var(--radius-button);background:transparent;color:var(--color-text);font-size:1rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;transition:background-color .15s ease,transform .1s ease}
.btn--primary{background:var(--color-accent);border-color:var(--color-accent-edge);color:var(--color-on-accent)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.actions .link{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.actions--install{flex-direction:column;align-items:stretch;margin-top:20px}
.actions__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.trustline{margin-top:10px;color:var(--color-text-muted)}
.more{margin-top:var(--space-stack)}
@media (min-width:768px){.actions--install{flex-direction:row;align-items:center;gap:12px}}

/* Hero */
.hero{padding-top:20px}
.hero h1{margin-top:8px}
.hero .lead{margin-top:10px}
.hero--home{display:grid;gap:24px;padding-top:32px}
.hero--home h1{margin-top:0}
.hero--text{padding-top:20px}
.hero--text .actions{margin-top:24px}
.hero__plate{margin-top:20px}
.hero__facts .caption{margin-top:10px}
.hero__facts .freshness{margin-top:4px}
.crumbs{color:var(--color-text-muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 8px}
.crumbs li + li::before{content:"/";margin-right:8px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs [aria-current]{color:var(--color-text-secondary)}
@media (min-width:1024px){
  .hero--home{grid-template-columns:7fr 4fr;gap:72px;align-items:end;padding-top:64px}
  .hero--plugin{display:grid;grid-template-columns:11fr 13fr;gap:48px;align-items:start;padding-top:32px}
  .hero--plugin .hero__plate{margin-top:36px}
  .hero--text{padding-top:48px}
  .hero--text h1{max-width:22ch}
}
@media (orientation:landscape) and (max-height:500px){
  .hero__plate img{width:auto;max-height:70vh;max-height:70svh;margin-inline:auto}
}

/* Plate: every capture sits on a mat */
.plate{background:var(--color-mat);padding:var(--space-mat);border-radius:var(--radius-card)}
.plate__link{display:block;border-radius:4px;cursor:zoom-in}
.plate img,.plate video{width:100%;border-radius:4px;outline:1px solid var(--color-plate-edge);outline-offset:-1px}
.plate video{background:var(--color-bg)}
.demo{position:relative;display:block;border-radius:4px;text-decoration:none}
.demo__btn{position:absolute;left:12px;bottom:12px;gap:8px;min-height:44px;padding:10px 16px;background:var(--color-surface)}
.demo .icon--pause,.demo[data-playing="true"] .icon--play{display:none}
.demo[data-playing="true"] .icon--pause{display:block}
.plate__cap{padding:8px 4px 2px;font-size:.8125rem;line-height:1.5;color:var(--color-text-muted)}

/* Facts: keys and values, like front matter */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--color-text);font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;font-variant-ligatures:none}
.facts__item{min-width:0;padding:8px 12px 8px 0;border-bottom:1px solid var(--color-border)}
.facts__item:last-child:nth-child(odd){grid-column:1 / -1}
.facts dt{color:var(--color-text-muted)}
.facts dd{font-weight:600}
.facts--home dd{font-size:1.125rem;line-height:1.4}
.factsheet{margin-top:var(--space-block)}
.factsheet .freshness{margin-top:8px}
@media (min-width:768px){
  .facts--plugin{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts--plugin .facts__item:last-child:nth-child(odd){grid-column:auto}
}
@media (min-width:1024px){
  .facts--plugin{grid-template-columns:repeat(7,minmax(0,1fr))}
  .facts--home{grid-template-columns:minmax(0,1fr)}
  .facts--home .facts__item{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-right:0}
}

/* Sections and the label rail */
.section{margin-top:var(--space-section)}
.section--tight{margin-top:var(--space-block)}
.rail{border-top:1px solid var(--color-border);padding-top:24px}
.rail__head .small{margin-top:8px;max-width:44ch}
.rail__body{min-width:0;margin-top:var(--space-stack)}
.rail__body > * + *{margin-top:var(--space-stack)}
.rail__body p,.rail__body li,.rail__body dd{max-width:var(--layout-max-text)}
.rail__body.cards > *{margin-top:0}
@media (min-width:1024px){
  .rail{display:grid;grid-template-columns:var(--layout-rail) minmax(0,1fr);column-gap:48px;padding-top:32px}
  .rail__head{align-self:start;position:sticky;top:calc(var(--layout-header-height) + 24px)}
  .rail__body{margin-top:0}
}

/* Band: one mat-coloured strip per page */
.band{background:var(--color-mat);padding-block:48px}
.band .rail{border-top:0;padding-top:0}
.band .plate,.band code{background:var(--color-bg)}
.band__inner{display:grid;gap:24px}
.band__text p{margin-top:var(--space-head);max-width:56ch;color:var(--color-text-secondary)}
.band + .section .rail{border-top:0}
@media (min-width:1024px){
  .band{padding-block:64px}
  .band__inner{grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
  .actions--band{flex-direction:column;align-items:stretch}
  .actions--band .link{justify-content:center}
}

/* Cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-card-gap)}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);transition:transform .15s ease,border-color .15s ease}
.card__thumb{background:var(--color-mat);padding:8px 8px 0;border-bottom:1px solid var(--color-border)}
.card__thumb img{width:100%;border-radius:4px 4px 0 0;outline:1px solid var(--color-plate-edge);outline-offset:-1px}
.card__body{display:flex;flex:1;flex-direction:column;gap:6px;padding:var(--space-card-padding)}
.card__title{display:flex;align-items:center;gap:8px}
.card__title a{text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-card)}
.card__title a:focus-visible{outline:none}
.card__title a:focus-visible::after{outline:3px solid var(--color-focus);outline-offset:-3px}
.card__desc{font-size:.875rem;line-height:1.5;color:var(--color-text-secondary)}
.card__meta{margin-top:auto;padding-top:6px;color:var(--color-text-muted)}
.catalog{margin-top:48px}
.catalog__title{margin-bottom:16px}
.catalog__group:first-of-type{border-top:0;padding-top:0}
.catalog__group + .catalog__group{margin-top:40px}
@media (min-width:768px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--related{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media (min-width:1024px){
  .catalog{margin-top:var(--space-section)}
  .catalog__title{margin-bottom:24px}
  .catalog__group:first-of-type{border-top:1px solid var(--color-border);padding-top:32px}
  .catalog__group + .catalog__group{margin-top:56px}
}

/* Trust points */
.points{display:grid;gap:20px 32px;margin-top:24px}
.points li{display:flex;align-items:flex-start;gap:12px}
.points .icon{margin-top:3px}
.points p{margin-top:2px;color:var(--color-text-secondary)}
@media (min-width:768px){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Features */
.features{display:grid;gap:40px}
.feature > p{margin-top:8px}
.feature .plate{margin-top:16px}
.tag{display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--color-text);border-radius:4px;vertical-align:2px}
.note{margin-top:var(--space-block);padding:4px 0 4px 16px;border-left:3px solid var(--color-text);font-weight:500}
.actions--pro{margin-top:var(--space-block)}

/* Lists */
.needs,.rules{display:grid;gap:8px}
.rail__body .needs{margin-top:8px}
.needs li,.rules li{position:relative;padding-left:20px}
.needs li::before,.rules li::before{content:"";position:absolute;left:2px;top:.75em;width:8px;height:2px;background:var(--color-text-muted)}
.rules{gap:12px}
.rail__body .label + .steps{margin-top:12px}
.rail__body .needs + .label{margin-top:24px}
.steps{display:grid;gap:16px;counter-reset:step}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--color-text);border-radius:4px;font-family:var(--font-mono);font-size:.8125rem;font-weight:600}
.steps p{padding-top:1px}
.compare__row{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--color-border)}
.compare__row:first-child{padding-top:0}
.compare dt{font-weight:600}
.compare dd{color:var(--color-text-secondary)}
.faq{display:grid;gap:28px}
.faq__item dt{font-size:1.125rem;font-weight:600;line-height:1.35}
.faq__item p,.faq__item dd{margin-top:8px;color:var(--color-text-secondary)}
.linklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 24px}
.linklist a{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--color-border);font-weight:500;text-decoration:none}
@media (min-width:768px){.compare__row{grid-template-columns:180px minmax(0,1fr);gap:24px}}

/* Closing install row */
.closing{margin-top:var(--space-section);padding-top:24px;border-top:2px solid var(--color-text)}
.closing__text{display:flex;align-items:center;gap:8px;font-weight:600}
.closing .actions--install{margin-top:16px}
.closing + .section{margin-top:56px}

/* Pro page */
.tiers{display:grid;gap:16px}
.tier{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.tier--main{border:2px solid var(--color-text)}
.tier .tag{margin-left:0}
.tier__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.price{font-size:var(--type-price);font-weight:700;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tier__period{font-size:1.125rem;color:var(--color-text-secondary)}
.tier__body{flex:1;max-width:48ch;color:var(--color-text-secondary)}
.tier .btn{align-self:stretch;margin-top:4px}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.table td{padding-right:0;color:var(--color-text-secondary)}
.table thead th{border-bottom:2px solid var(--color-text);font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--color-text-muted)}
.table tbody th{width:36%;font-weight:600}
.reviewed{margin-top:var(--space-block)}
@media (max-width:1023px){.page--info .section{margin-top:48px}}
@media (min-width:768px){
  .tiers{grid-template-columns:7fr 5fr;gap:24px}
  .tier{padding:28px}
  .tier .btn{align-self:flex-start}
  .table tbody th{width:232px}
}

/* Footer */
.site-footer{margin-top:var(--space-section);padding:48px 0 calc(32px + env(safe-area-inset-bottom));border-top:2px solid var(--color-text)}
.site-footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.site-footer__brand,.site-footer__plugins{grid-column:1 / -1}
.site-footer__brand p + p{margin-top:8px;max-width:36ch;font-size:.875rem;color:var(--color-text-secondary)}
.site-footer__plugins ul{columns:2;column-gap:24px}
.site-footer .label{margin-bottom:8px}
.site-footer li{break-inside:avoid}
.site-footer li a{display:inline-block;padding:4px 0;font-size:.875rem;color:var(--color-text-secondary);text-decoration:none}
.site-footer__notes{display:grid;gap:6px;margin-top:40px;padding-top:20px;border-top:1px solid var(--color-border);font-size:.8125rem;line-height:1.6;color:var(--color-text-muted)}
.site-footer__notes .link{color:inherit}
@media (min-width:768px){
  .site-footer__grid{grid-template-columns:1.3fr 2fr 1fr 1fr;gap:32px}
  .site-footer__brand,.site-footer__plugins{grid-column:auto}
}

/* Large image dialog */
.zoom{max-width:96vw;max-height:96vh;padding:0;border:0;background:transparent;color:#EEE9DD;overflow:visible}
.zoom::backdrop{background:rgba(12,11,9,.95)}
.zoom img{width:auto;max-width:96vw;max-height:calc(96vh - 64px);max-height:calc(96dvh - 64px);border-radius:6px}
.zoom__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-size:.8125rem}
.zoom__close{color:inherit;border:1px solid currentColor}

/* Pointer and motion */
@media (hover:hover){
  .btn--primary:hover{background:var(--color-accent-hover)}
  .btn--secondary:hover{background:var(--color-mat)}
  .band .btn--secondary:hover{background:var(--color-bg)}
  .link:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
  .nav a:hover,.icon-btn:hover{color:var(--color-text);background:var(--color-mat)}
  .nav a:hover{border-radius:var(--radius-button)}
  .crumbs a:hover,.site-footer li a:hover,.menu a:hover,.linklist a:hover{text-decoration:underline}
  .card:hover{transform:translateY(-2px);border-color:var(--color-text)}
  .demo:hover .demo__btn{background:var(--color-mat)}
}
.card:active{transform:none}
@media (pointer:coarse){
  .icon-btn{width:48px;height:48px}
  .demo__btn{min-height:48px}
  .nav a{height:48px}
  .brand{min-height:48px}
  .site-footer li a{padding:14px 0}
  .crumbs a,.more .link,.freshness .link,.site-footer__notes .link,.table .link{display:inline-block;padding-block:14px;margin-block:-14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}