:root{--color-bg:#f3f7fb;--color-panel:#ffffff;--color-ink:#14213d;--color-dim:#5b6b82;--color-main:#1d4ed8;--color-accent:#0e9f6e;--color-border:#d9e3f0;--color-radius:4px;--color-measure:1080px;--color-font-head:'Epilogue',system-ui,sans-serif;--color-text-font:'Albert Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--color-bg);color:var(--color-ink);font:16px/1.65 var(--color-text-font)}
img{max-width:100%;height:auto} a{color:var(--color-main);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--color-font-head);line-height:1.2;letter-spacing:-.01em;color:var(--color-ink)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.column{max-width:var(--color-measure);margin:0 auto;padding:0 1rem} .article-area{max-width:var(--color-measure);margin:0 auto;padding:1.2rem 1rem 3rem}
.jump{position:absolute;left:-9999px} .jump:focus{left:1rem;top:1rem;background:var(--color-panel);padding:.5rem;z-index:99}
.masthead-inner{max-width:var(--color-measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.brand-link{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--color-font-head);color:var(--color-ink);text-decoration:none}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .nav-links a{color:var(--color-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.header-bar{background:var(--color-bg);border-bottom:1px solid var(--color-border)} .masthead-inner{flex-direction:column;gap:.4rem;padding:.9rem 1rem} .header-bar{position:sticky;top:0;z-index:30} 
.intro{margin:1rem 0 1.4rem} .intro-text{font-size:1.12rem;max-width:46em;color:var(--color-dim)} .intro{background:var(--color-panel);border:1px solid var(--color-border);padding:2rem 1.6rem;border-radius:var(--color-radius)}
.app{margin:1.4rem 0 2rem}
.aside-note{margin:1.4em 0;padding:.9em 1.1em;background:var(--color-panel);border-left:4px solid var(--color-accent);border-radius:0 var(--color-radius) var(--color-radius) 0}
.equation{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--color-panel);border:1px dashed var(--color-main);border-radius:var(--color-radius);overflow-x:auto}
.table-scroll{margin:1.2em 0;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--color-radius);background:var(--color-panel)}
.grid-table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .grid-table th,.grid-table td{padding:.5em .75em;border-bottom:1px solid var(--color-border);text-align:left}
.grid-table thead th{background:color-mix(in srgb,var(--color-border) 60%,var(--color-panel))}
ol.howto{padding-left:1.3em} ol.howto>li{margin:.5em 0}
.visual{margin:1.6em 0;text-align:center} .visual img{width:100%;max-width:720px;border-radius:var(--color-radius);border:1px solid var(--color-border);background:#fff} .visual figcaption{font-size:.9em;color:var(--color-dim)}
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.item{display:block;padding:1.1rem;background:var(--color-panel);border-radius:var(--color-radius);border:1px solid var(--color-border);color:var(--color-ink);text-decoration:none}
.item b{display:block;font-family:var(--color-font-head);margin-bottom:.35rem} .item span{color:var(--color-dim);font-size:.92rem} .item:hover{border-color:var(--color-main)}
.item--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .item--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--color-ink) 14%,transparent)}
.card-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .card-txt{display:block;padding:1rem 1.1rem 1.1rem} .card-txt>span{display:block}
.blist a,.brow,.post-kicker{background:none!important}
.card-meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--color-main)}
.card-list--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .card-list--feat>.item:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .card-list--feat>.item:first-child b{font-size:1.35rem}
.blist{display:grid;gap:1rem;margin:1.2em 0} .brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--color-radius);overflow:hidden;color:var(--color-ink);text-decoration:none}
.brow .card-img{height:100%;aspect-ratio:auto;min-height:126px} .brow b{display:block;font-family:var(--color-font-head);font-size:1.12rem;margin-bottom:.3rem} .brow .card-txt>span{color:var(--color-dim);font-size:.93rem} .brow:hover{border-color:var(--color-main)}
.blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .blist--min li{counter-increment:bl;border-top:1px solid var(--color-border)} .blist--min li:last-child{border-bottom:1px solid var(--color-border)}
.blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--color-ink);text-decoration:none} .blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--color-font-head);color:var(--color-main)}
.blist--min b{font-family:var(--color-font-head);font-size:1.15rem} .blist--min span{color:var(--color-dim);font-size:.93rem} .blist--min a:hover b{color:var(--color-main)}
.post-head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--color-radius);overflow:hidden} .post-head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.post-ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .post-ov h1,.post-ov .post-meta,.post-ov .post-kicker{color:#fff}
.post-head--band{background:var(--color-main);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--color-radius)} .post-head--band h1,.post-head--band .post-meta,.post-head--band .post-kicker{color:#fff}
.post-head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .post-head--split .post-cover{margin:0}
.outline--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .outline--chips li{margin:0} .outline--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);text-decoration:none;font-size:.88rem}
.outline--rail{background:none;border:0;border-left:3px solid var(--color-accent);border-radius:0;padding:.2rem 0 .2rem 1rem}
.i18n--globe summary{display:flex;align-items:center;gap:.35rem} .langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .langpills a{padding:.25rem .7rem;border:1px solid var(--color-border);border-radius:999px;text-decoration:none} .langpills a[aria-current]{background:var(--color-main);border-color:var(--color-main);color:#fff}
@media (max-width:700px){.card-list--feat{grid-template-columns:1fr} .card-list--feat>.item:first-child{display:flex} .brow{grid-template-columns:1fr} .brow .card-img{min-height:0;aspect-ratio:1200/630} .post-head--split{grid-template-columns:1fr} .post-ov{position:static;background:var(--color-main);padding:1.2rem} .post-head--overlay>img{min-height:0}}
.post{max-width:48rem;margin:0 auto} .post-head{margin:.6rem 0 1.2rem} .post-head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.post-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-main);text-decoration:none}
.upd{color:var(--color-dim);font-size:.9rem;margin:2rem 0 0} .sign{font-style:italic;color:var(--color-dim)} .post-meta{color:var(--color-dim);font-size:.92rem;margin:0} .post-cover{margin:0 0 1.6rem} .post-cover img{display:block;width:100%;height:auto;border-radius:var(--color-radius)}
.post .intro-text{font-size:1.2rem;color:var(--color-ink)} .post .intro-text::first-letter{font-family:var(--color-font-head);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--color-main)}
.post .outline--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--color-panel);border:1px solid var(--color-border);border-left:4px solid var(--color-main);border-radius:var(--color-radius);font-size:.95rem}
.outline--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .outline--post li{margin:.2rem 0}
.post h3{color:var(--color-main)} .post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--color-accent);font-size:1.1em}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .faq-grid>div{background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--color-radius);padding:1rem} .qa h3{margin-top:0;font-size:1rem}
.trail{font-size:.88rem;color:var(--color-dim);margin:.4rem 0 1rem} .trail a{color:var(--color-dim)}
.callout-cta{margin:2.4rem 0;padding:1.4rem;background:var(--color-panel);border-radius:var(--color-radius);border:1px solid var(--color-border);text-align:center}
.action-link{display:inline-block;padding:.7em 1.4em;background:var(--color-main);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.colophon{border-top:1px solid var(--color-border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--color-dim);background:var(--color-panel)}
.colophon nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .colophon a{color:var(--color-dim)} .colophon{background:var(--color-ink);color:var(--color-bg)} .colophon a,.colophon p{color:var(--color-bg);opacity:.85}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.4rem;align-items:start} .outline{position:sticky;top:5rem;font-size:.9rem;border-left:2px solid var(--color-border);padding-left:1rem} .outline ol{list-style:none;padding:0;margin:.4rem 0 0} .outline li{margin:.35rem 0} .outline a{text-decoration:none;color:var(--color-dim)} .outline a:hover{color:var(--color-main)} .layout>*{min-width:0} @media(max-width:900px){.layout{grid-template-columns:1fr} .outline:not(.outline--post){display:none}}
.i18n{position:relative} .i18n summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--color-border);border-radius:999px;font-size:.85rem}
.langs-list{position:absolute;right:0;top:120%;background:var(--color-panel);border:1px solid var(--color-border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.langs-list a{padding:.3rem .5rem;text-decoration:none;color:var(--color-ink)} .langs-list a[aria-current]{font-weight:700;color:var(--color-main)}
.codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .codes a{text-decoration:none;color:var(--color-dim);padding:.1rem .3rem;border-radius:4px} .codes a[aria-current]{color:var(--color-main);background:color-mix(in srgb,var(--color-main) 12%,transparent)}
[data-ad]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-ad]:empty{margin:0}
[data-ad="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--color-panel)}
[data-ad="sidebar_left"],[data-ad="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-ad="sidebar_left"]{left:12px} [data-ad="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-ad="sidebar_left"],[data-ad="sidebar_right"]{display:none}}
.adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--color-dim)}
.action-link{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.table-scroll{border:0;border-top:3px solid var(--color-main);border-radius:0;background:transparent} .grid-table thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.block a:not(.action-link):not(.item){text-decoration-thickness:2px}
@media (max-width:640px){.masthead-inner{justify-content:center} .nav-links{justify-content:center}}

/* Color picker — color-picker.org. Chrome uses only site tokens; the colors you see in swatches are the user's data. */
.cpk {
  --cp-c: var(--color-main);
  --cp-ink: var(--color-panel);
  --cp-check: conic-gradient(var(--color-border) 25%, var(--color-panel) 0 50%, var(--color-border) 0 75%, var(--color-panel) 0) 0 0 / 12px 12px;
  color: var(--color-ink);
  font-family: var(--color-text-font);
  color-scheme: inherit;
  line-height: 1.5;
  position: relative;
}
.cpk *, .cpk *::before, .cpk *::after { box-sizing: border-box; }
.cpk [hidden] { display: none !important; }
.cpk-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(.cpk) p { margin: 0; }
.cpk code, .cpk pre, .cpk kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:where(.cpk) button { font: inherit; color: inherit; cursor: pointer; }
:where(.cpk) button:disabled { cursor: not-allowed; opacity: .5; }
.cpk :focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

/* ---------- headings, text ---------- */
.cpk-h { font-family: var(--color-font-head); font-size: 1.2rem; line-height: 1.25; margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.cpk-h::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--cp-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-c) 25%, transparent); flex: none; }
.cpk-h4 { font-family: var(--color-font-head); font-size: .95rem; margin: 0 0 .45rem; }
.cpk-label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dim); margin: 0 0 .3rem; }
.cpk-hint { font-size: .85rem; color: var(--color-dim); }
.cpk-note { font-size: .8rem; color: var(--color-dim); margin-top: .5rem; }
.cpk-msg { font-size: .9rem; margin: .6rem 0 0; min-height: 0; }
.cpk-msg.is-bad, .cpk-warn { border-left: 4px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-panel)); padding: .55rem .75rem; border-radius: var(--color-radius); color: var(--color-ink); }
.cpk-msg:empty { display: none; }

/* ---------- buttons, inputs ---------- */
.cpk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .45rem 1rem;
  border: 1px solid var(--color-border); border-radius: var(--color-radius); background: var(--color-panel); color: var(--color-ink); font-weight: 600; font-size: .92rem;
}
.cpk-btn:hover { border-color: var(--color-main); }
.cpk-btn--prim { background: var(--color-main); border-color: var(--color-main); color: var(--color-panel); }
.cpk-btn--prim:hover { background: color-mix(in srgb, var(--color-main) 85%, var(--color-ink)); }
.cpk-btn--quiet { border-style: dashed; color: var(--color-dim); }
.cpk-btn.is-armed { border-style: solid; border-color: var(--color-accent); color: var(--color-ink); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-panel)); }
.cpk-link { background: none; border: 0; padding: .25rem 0; color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; font-weight: 600; }
.cpk-ibtn {
  flex: none; width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; border: 1px solid var(--color-border);
  border-radius: var(--color-radius); background: var(--color-panel); color: var(--color-ink);
}
.cpk-ibtn:hover { border-color: var(--color-main); color: var(--color-main); }
.cpk-input {
  width: 100%; min-width: 0; min-height: 2.75rem; padding: .5rem .7rem; font: 600 1rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-ink); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--color-radius); color-scheme: inherit;
}
.cpk-input:focus { border-color: var(--color-main); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-main) 25%, transparent); }
.cpk-input[aria-invalid="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.cpk-inrow { display: flex; gap: .5rem; align-items: center; }
.cpk-inchip { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--color-radius); border: 1px solid var(--color-border); }
.cpk-inchip, .cpk-picked__sw, .cpk-cchip { background: linear-gradient(var(--sw, transparent), var(--sw, transparent)), var(--cp-check); }
.cpk-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: var(--color-radius); overflow: hidden; background: var(--color-bg); }
.cpk-seg button { border: 0; background: none; padding: .45rem .8rem; font-size: .85rem; font-weight: 600; color: var(--color-dim); min-height: 2.4rem; }
.cpk-seg button + button { border-left: 1px solid var(--color-border); }
.cpk-seg button[aria-pressed="true"] { background: var(--color-main); color: var(--color-panel); }
.cpk-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ---------- studio: mixer + hero ---------- */
.cpk-studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.25rem; align-items: start; }
.cpk-mixer, .cpk-hero, .cpk-panel { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--color-radius); padding: 1.1rem; }
.cpk-sv { position: relative; aspect-ratio: 1 / 1; max-height: 300px; width: 100%; border-radius: var(--color-radius); overflow: hidden; touch-action: none; cursor: crosshair; }
.cpk-sv__canvas { display: block; width: 100%; height: 100%; }
.cpk-sv__handle, .cpk-track__thumb {
  position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border: 3px solid var(--color-panel); box-shadow: 0 0 0 1px var(--color-ink), 0 2px 6px color-mix(in srgb, var(--color-ink) 35%, transparent); background: var(--cp-c);
}
.cpk-track { position: relative; height: 18px; margin: 1rem 11px 0; border-radius: 9px; touch-action: none; cursor: pointer; }
.cpk-track::before { content: ""; position: absolute; inset: 0 -11px; border-radius: 9px; }
.cpk-track--hue::before { background: linear-gradient(90deg, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%); }
.cpk-track--alpha::before { background: var(--cp-check); }
.cpk-track__fade { position: absolute; inset: 0 -11px; border-radius: 9px; }
.cpk-track__thumb { left: var(--pos, 0%); top: 50%; background: var(--thumb, var(--cp-c)); }
.cpk-mixer .cpk-label { margin-top: 1.1rem; }
.cpk-mixer .cpk-hint { margin-top: .4rem; }
.cpk-recent { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--color-border); }
.cpk-recent .cpk-label { margin: 0; }
.cpk-dots { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-width: 0; }

.cpk-hero { position: relative; overflow: hidden; }
.cpk-swatch {
  border-radius: var(--color-radius); background: var(--cp-check); overflow: hidden;
  box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--cp-c) 60%, transparent);
}
.cpk-swatch__fill { min-height: 210px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; transition: background-color .2s; }
.cpk-swatch__name { font-weight: 600; font-size: 1rem; }
.cpk-swatch__name small { font-weight: 500; opacity: .8; font-size: .8rem; display: block; }
.cpk-swatch__hex { font-family: var(--color-font-head); font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.cpk-swatch__aa { display: flex; flex-wrap: wrap; gap: .4rem; }
.cpk-aa { font-weight: 700; font-size: .85rem; padding: .25rem .55rem; border-radius: var(--color-radius); }
.cpk-dna { margin: .9rem 0 .6rem; color: var(--color-dim); }
.cpk-dna svg { display: block; max-width: 100%; }
.cpk-dna__k { font: 700 10px var(--color-text-font); fill: var(--color-dim); }
.cpk-dna__v { font: 600 10px ui-monospace, Menlo, monospace; fill: var(--color-ink); }
.cpk-dna__track { fill: var(--color-bg); stroke: var(--color-border); }
.cpk-dna__bar { stroke: color-mix(in srgb, var(--color-ink) 25%, transparent); stroke-width: .5; }
.cpk-formats { list-style: none; margin: .7rem 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.cpk-fmt { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--color-border); }
.cpk-fmt__k { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--color-dim); }
.cpk-fmt__k abbr { text-decoration: none; }
.cpk-fmt__v { font-size: .95rem; overflow-wrap: anywhere; user-select: all; }
.cpk-copy { width: 2.3rem; height: 2.3rem; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--color-radius); background: none; color: var(--color-dim); }
.cpk-copy:hover { color: var(--color-main); border-color: var(--color-border); }

/* ---------- panels ---------- */
.cpk-panel { margin-top: 1.25rem; }
details.cpk-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
details.cpk-panel > summary::-webkit-details-marker { display: none; }
details.cpk-panel > summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid var(--color-dim); border-bottom: 2px solid var(--color-dim); transform: rotate(45deg); transition: transform .2s; flex: none; }
details.cpk-panel:not([open]) > summary::after { transform: rotate(-45deg); }
details.cpk-panel[open] > summary { margin-bottom: 1rem; }
section.cpk-panel > .cpk-h { margin-bottom: .6rem; }

/* swatch buttons: color over a checkerboard so alpha is visible */
.cpk-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.cpk-sw {
  position: relative; min-width: 3.1rem; height: 3.1rem; padding: 0 .3rem; border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent); border-radius: var(--color-radius);
  background: linear-gradient(var(--sw), var(--sw)), var(--cp-check); color: var(--sw-ink); display: inline-flex; align-items: flex-end; justify-content: center;
  transition: transform .15s;
}
.cpk-sw:hover { transform: translateY(-2px); }
.cpk-sw__l { font: 600 .66rem/1.1 ui-monospace, Menlo, monospace; padding-bottom: .3rem; white-space: nowrap; }
.cpk-sw--dot { min-width: 1.9rem; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; }
.cpk-swatches--ramp, .cpk-ramp .cpk-swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; border-radius: var(--color-radius); overflow: hidden; border: 1px solid var(--color-border); }
.cpk-ramp .cpk-swatches:not(.cpk-swatches--ramp) { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.cpk-ramp .cpk-sw { min-width: 0; width: 100%; height: 3.6rem; border: 0; border-radius: 0; }
.cpk-ramp .cpk-sw:hover { transform: scaleY(1.06); z-index: 1; }
.cpk-ramp .cpk-sw.is-near::before { content: ""; position: absolute; top: .4rem; left: 50%; width: .45rem; height: .45rem; margin-left: -.225rem; border-radius: 50%; background: var(--sw-ink); }
.cpk-ramp + .cpk-ramp { margin-top: 1rem; }
.cpk-ramp .cpk-hint { margin-top: .35rem; }

/* ---------- image picker ---------- */
.cpk-privacy { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; font-weight: 600; padding: .55rem .75rem; margin: 0 0 .9rem; border-radius: var(--color-radius); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-panel)); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); }
.cpk-privacy svg { flex: none; color: var(--color-accent); margin-top: .1rem; }
.cpk-drop {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1.6rem 1rem;
  border: 2px dashed var(--color-border); border-radius: var(--color-radius); background: var(--color-bg); transition: border-color .2s, background-color .2s;
}
.cpk-image.is-over .cpk-drop, .cpk-image.is-over .cpk-stage { border-color: var(--color-main); background: color-mix(in srgb, var(--color-main) 8%, var(--color-bg)); }
.cpk-drop__t { font-weight: 600; }
.cpk-art-frame { fill: var(--color-panel); stroke: var(--color-border); stroke-width: 2; }
.cpk-art-sun { fill: color-mix(in srgb, var(--cp-c) 70%, var(--color-panel)); }
.cpk-art-hill { fill: var(--cp-c); opacity: .85; }
.cpk-art-pipette path { fill: var(--color-panel); stroke: var(--color-ink); stroke-width: 2.5; stroke-linejoin: round; }
.cpk-art-pipette circle { fill: var(--cp-c); stroke: var(--color-ink); stroke-width: 2; }
.cpk-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.cpk-toolbar .cpk-seg { margin-right: auto; }
.cpk-stage { position: relative; margin-top: .6rem; border-radius: var(--color-radius); background: var(--cp-check); border: 1px solid var(--color-border); display: flex; justify-content: center; }
.cpk-canvas { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; touch-action: none; cursor: crosshair; }
.cpk-canvas:focus-visible { outline-offset: -3px; }
.cpk-loupe { position: absolute; z-index: 3; width: 160px; padding: 3px; pointer-events: none; background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 50% 50% var(--color-radius) var(--color-radius); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--color-ink) 50%, transparent); }
.cpk-loupe__c { display: block; width: 154px; height: 154px; border-radius: 50%; image-rendering: pixelated; background: var(--cp-check); }
.cpk-loupe__t { display: block; text-align: center; font: 700 .8rem/1.6 ui-monospace, Menlo, monospace; }
.cpk-picked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; margin-top: .9rem; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--color-radius); background: var(--color-bg); }
.cpk-picked__sw { width: 4.2rem; height: 4.2rem; border-radius: var(--color-radius); border: 1px solid var(--color-border); }
.cpk-picked__hex { font: 700 1.35rem/1.2 ui-monospace, Menlo, monospace; }
.cpk-picked__sub { font-size: .88rem; overflow-wrap: anywhere; }
.cpk-picked__where { font-size: .8rem; color: var(--color-dim); }
.cpk-picked__btns { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.cpk-warn { grid-column: 1 / -1; font-size: .88rem; }
.cpk-tip { margin-top: .6rem; }
.cpk-extract { margin-top: 1.1rem; }
.cpk-bar { display: flex; height: 1.4rem; border-radius: var(--color-radius); overflow: hidden; margin-bottom: .6rem; border: 1px solid var(--color-border); }
.cpk-bar__seg { flex: 1 1 0; min-width: 4px; }
.cpk-extract .cpk-sw, .cpk-hcard .cpk-sw { min-width: 4.6rem; }

/* ---------- palette board ---------- */
.cpk-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.cpk-chip { position: relative; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--color-radius); background: var(--color-panel); padding: 4px; }
.cpk-sw--chip { width: 5.4rem; height: 4.6rem; }
.cpk-chip__x { position: absolute; top: -.55rem; right: -.55rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-panel); color: var(--color-ink); font-size: 1rem; line-height: 1; padding: 0; }
.cpk-chip__x:hover { border-color: var(--color-accent); }
.cpk-empty { margin-top: .8rem; padding: 1rem; border: 2px dashed var(--color-border); border-radius: var(--color-radius); color: var(--color-dim); text-align: center; }
.cpk-exp { margin-top: 1rem; }
.cpk-code { margin: .6rem 0 0; padding: .8rem; max-height: 16rem; overflow: auto; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--color-radius); font-size: .85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink); }
.cpk-export .cpk-btn { margin-top: .6rem; }

/* ---------- harmonies ---------- */
.cpk-harmonies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .9rem; }
.cpk-hcard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: .7rem; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--color-radius); background: var(--color-bg); }
.cpk-wheel { grid-row: 1 / 3; }
.cpk-wheel svg { display: block; }
.cpk-wheel__poly { fill: color-mix(in srgb, var(--color-ink) 8%, transparent); stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.cpk-wheel__dot { stroke: var(--color-panel); stroke-width: 2; }
.cpk-hcard .cpk-h4 { align-self: center; margin: 0; }
.cpk-hcard .cpk-swatches { grid-column: 1 / -1; margin-top: .6rem; }
.cpk-hcard .cpk-sw { min-width: 0; flex: 1 1 3.6rem; }
.cpk-hcard .cpk-link { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }

/* ---------- contrast ---------- */
.cpk-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.4rem; }
.cpk-cpair { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; grid-column: 1 / -1; }
.cpk-cside { flex: 1 1 12rem; min-width: 0; }
.cpk-cside code { font-weight: 700; margin-left: .4rem; vertical-align: middle; }
.cpk-cchip { display: inline-block; vertical-align: middle; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--color-radius); border: 1px solid var(--color-border); }
.cpk-native { flex: none; width: 2.75rem; height: 2.75rem; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--color-radius); background: var(--color-panel); cursor: pointer; }
.cpk-quick { display: flex; gap: 1rem; margin-top: .2rem; }
.cpk-ratio span { font-family: var(--color-font-head); font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.cpk-ratio small { color: var(--color-dim); font-size: .85rem; }
.cpk-gauge { margin: .3rem 0 .5rem; }
.cpk-gauge svg { display: block; }
.cpk-gauge__z0 { fill: color-mix(in srgb, var(--color-ink) 14%, var(--color-panel)); }
.cpk-gauge__z1 { fill: color-mix(in srgb, var(--color-main) 30%, var(--color-panel)); }
.cpk-gauge__z2 { fill: color-mix(in srgb, var(--color-main) 65%, var(--color-panel)); }
.cpk-gauge__z3 { fill: var(--color-accent); }
.cpk-gauge__tick { stroke: var(--color-ink); stroke-width: 1.5; }
.cpk-gauge__lbl { font: 600 10px var(--color-text-font); fill: var(--color-dim); }
.cpk-gauge__mark { fill: var(--color-ink); }
.cpk-gauge__dot { stroke: var(--color-panel); stroke-width: 3; }
.cpk-verdict { font-weight: 600; font-size: .92rem; }
.cpk-badges { list-style: none; padding: 0; margin: .7rem 0 0; }
.cpk-badges li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.cpk-badges small { color: var(--color-dim); margin-left: .3rem; }
.cpk-badge { font-size: .8rem; padding: .15rem .55rem; border-radius: var(--color-radius); white-space: nowrap; }
.cpk-badge.is-pass { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-panel)); color: var(--color-ink); }
.cpk-badge.is-fail { background: color-mix(in srgb, var(--color-ink) 10%, var(--color-panel)); color: var(--color-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.cpk-fix { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; padding: .6rem; border: 1px dashed var(--color-main); border-radius: var(--color-radius); font-size: .9rem; }
.cpk-fix .cpk-btn { min-height: 2.2rem; padding: .3rem .8rem; }
.cpk-preview { align-self: start; border-radius: var(--color-radius); padding: 1.2rem; border: 1px solid var(--color-border); display: grid; gap: .7rem; min-height: 100%; }
.cpk-preview__n { font-size: 1rem; }
.cpk-preview__l { font-size: 24px; font-weight: 400; line-height: 1.2; }
.cpk-preview__ui { display: flex; align-items: center; gap: 1rem; }
.cpk-preview__btn { border: 2px solid var(--fg); border-radius: var(--color-radius); padding: .35rem .9rem; font-weight: 700; }
.cpk-contrast > .cpk-hint { margin-top: .9rem; }

/* ---------- misc ---------- */
.cpk-foot { margin-top: .8rem; text-align: right; }
.cpk-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.cpk-modal__bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink) 55%, transparent); }
.cpk-modal__card { position: relative; max-width: 26rem; width: 100%; background: var(--color-panel); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--color-radius); padding: 1.2rem; }
.cpk-keys { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .45rem; font-size: .92rem; }
.cpk-keys kbd { display: inline-block; min-width: 1.6rem; text-align: center; padding: .05rem .35rem; margin-right: .25rem; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: var(--color-radius); background: var(--color-bg); font-size: .8rem; }
.cpk-toast {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 1001; max-width: min(92vw, 30rem); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--color-ink); color: var(--color-bg); padding: .65rem 1rem; border-radius: var(--color-radius); font-size: .9rem; font-weight: 600; transition: opacity .2s, transform .2s;
}
.cpk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .cpk-studio, .cpk-cgrid { grid-template-columns: minmax(0, 1fr); }
  .cpk-sv { max-height: none; aspect-ratio: 4 / 3; }
  .cpk-mixer, .cpk-hero, .cpk-panel { padding: .9rem; }
  .cpk-fmt { grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: .4rem; }
  .cpk-swatches--ramp, .cpk-ramp .cpk-swatches, .cpk-ramp .cpk-swatches:not(.cpk-swatches--ramp) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cpk-ramp .cpk-swatches:not(.cpk-swatches--ramp) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpk-picked { grid-template-columns: auto minmax(0, 1fr); }
  .cpk-picked__btns { grid-column: 1 / -1; justify-content: flex-start; }
  .cpk-toolbar .cpk-seg { margin-right: 0; width: 100%; }
  .cpk-toolbar .cpk-seg button { flex: 1; }
  .cpk-foot { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cpk *, .cpk *::before, .cpk *::after { transition: none !important; animation: none !important; }
  .cpk-sw:hover, .cpk-ramp .cpk-sw:hover { transform: none; }
}

/* design: sites/<d>/design/site.css */
/* color-picker.org — "Swatch book on a press sheet"
   gallery-white sheet, press colour bar on the edges, crop marks, swatch chips as the only ornament */

body{background:var(--color-panel);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--color-main) 22%,transparent)}
h1,h2,h3{letter-spacing:-.02em}
h1{font-weight:800}

/* ---------- header: white sheet with a printed colour bar on the top edge ---------- */
.header-bar{background:color-mix(in srgb,var(--color-panel) 94%,transparent);border-bottom:1px solid var(--color-border);padding-top:6px;position:sticky;top:0;z-index:30}
@supports (backdrop-filter:blur(6px)){.header-bar{backdrop-filter:saturate(1.4) blur(8px)}}
.header-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:url(/assets/img/d-strip.svg) 0 0/auto 6px repeat-x}
.masthead-inner{padding:.65rem 1rem}
.brand-link{font-size:1.12rem;letter-spacing:-.02em;gap:.55rem}
.brand-link svg{width:30px;height:30px}
.nav-links{gap:1.35rem}
.nav-links>a{position:relative;font-family:var(--color-font-head);font-weight:600;font-size:.94rem;padding:.3rem 0;color:var(--color-ink)}
.nav-links>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--color-ink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links>a:hover::after,.nav-links>a[aria-current]::after{transform:scaleX(1)}

/* language codes = a strip of chips, each with its own ink stripe */
.codes{gap:0;border:1px solid var(--color-border);border-radius:4px;overflow:hidden;font-family:var(--color-font-head);font-size:.72rem;letter-spacing:.06em}
.codes a{border-radius:0;padding:.36rem .5rem .44rem;color:var(--color-dim);border-left:1px solid var(--color-border);background-image:url(/assets/img/d-chips.svg);background-repeat:no-repeat;background-size:800% 3px;background-position-y:100%}
.codes a:first-child{border-left:0}
.codes a:nth-child(1){background-position-x:14.286%}
.codes a:nth-child(2){background-position-x:28.571%}
.codes a:nth-child(3){background-position-x:42.857%}
.codes a:nth-child(4){background-position-x:57.143%}
.codes a:nth-child(5){background-position-x:71.429%}
.codes a:nth-child(6){background-position-x:85.714%}
.codes a:hover{color:var(--color-ink);background-color:var(--color-bg)}
.codes a[aria-current]{color:var(--color-panel);background-color:var(--color-ink)}

/* ---------- first screen: a trimmed proof with crop marks and a swatch fan ---------- */
.article-area{padding-top:1.6rem}
.intro{position:relative;margin:1.6rem 0 2.2rem;padding:2.6rem 2.2rem 3.4rem;background:var(--color-panel) url(/assets/img/d-chips.svg) 2.2rem calc(100% - 1.7rem)/176px 10px no-repeat;border:0;border-radius:0}
.intro::before{content:"";position:absolute;inset:-13px;pointer-events:none;
 background:
  linear-gradient(var(--color-dim),var(--color-dim)) 0 0/16px 1px no-repeat,linear-gradient(var(--color-dim),var(--color-dim)) 0 0/1px 16px no-repeat,
  linear-gradient(var(--color-dim),var(--color-dim)) 100% 0/16px 1px no-repeat,linear-gradient(var(--color-dim),var(--color-dim)) 100% 0/1px 16px no-repeat,
  linear-gradient(var(--color-dim),var(--color-dim)) 0 100%/16px 1px no-repeat,linear-gradient(var(--color-dim),var(--color-dim)) 0 100%/1px 16px no-repeat,
  linear-gradient(var(--color-dim),var(--color-dim)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--color-dim),var(--color-dim)) 100% 100%/1px 16px no-repeat}
.intro h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 .5em;max-width:15em}
.intro .intro-text{font-size:1.14rem;line-height:1.6;max-width:36em;color:var(--color-dim)}
@media (min-width:880px){
 .intro{padding-right:min(40%,400px);min-height:330px}
 .intro::after{content:"";position:absolute;right:1.2rem;bottom:1.4rem;width:min(34%,330px);aspect-ratio:380/340;background:url(/assets/img/d-fan.svg) center bottom/contain no-repeat;pointer-events:none}
}
@media (max-width:640px){.intro{padding:1.7rem 1.2rem 2.9rem;background-position:1.2rem calc(100% - 1.3rem)}}

/* tool sits on the sheet like a mounted proof */
.app{margin:2rem 0 2.6rem}

/* ---------- body sections: every heading carries a 3-chip palette slice ---------- */
.block{border-top:1px solid var(--color-border);margin-top:2.8rem;padding-top:2.2rem}
.layout .block:first-of-type{margin-top:1.6rem}
.block>h2{margin-top:0;font-size:clamp(1.45rem,3vw,1.95rem);font-weight:800;line-height:1.15}
.block>h2::before{content:"";display:block;width:3.3rem;height:.6rem;margin-bottom:.85rem;border-radius:1px;background:url(/assets/img/d-chips.svg) 0 0/266.667% 100% no-repeat}
.block:nth-of-type(6n+2)>h2::before{background-position-x:20%}
.block:nth-of-type(6n+3)>h2::before{background-position-x:40%}
.block:nth-of-type(6n+4)>h2::before{background-position-x:60%}
.block:nth-of-type(6n+5)>h2::before{background-position-x:80%}
.block:nth-of-type(6n)>h2::before{background-position-x:100%}
.block h3{font-size:1.12rem;font-weight:700}
.block li::marker{color:var(--color-dim);font-weight:700}
.layout>div>p:first-child{font-size:1.1rem;line-height:1.65}

/* inline code reads like a swatch label */
.block code,.post code,.qa code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;padding:.08em .38em;border-radius:3px;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-ink);overflow-wrap:break-word}
.grid-table code{white-space:normal;overflow-wrap:normal}
@media (max-width:640px){.grid-table{font-size:.88em} .grid-table th,.grid-table td{padding:.55em .5em}}

/* contents: a printed index with ink chips */
@media (min-width:901px){.layout{grid-template-columns:minmax(0,1fr) 230px;gap:3rem}}
.outline{top:6.2rem;border-left:0;padding:0;font-size:.88rem}
.outline strong{display:block;font:700 .7rem var(--color-font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--color-dim);padding-bottom:.55rem;border-bottom:1px solid var(--color-ink)}
.outline ol{counter-reset:tc;margin-top:.2rem}
.outline li{margin:0;border-bottom:1px solid var(--color-border)}
.outline a{display:flex;gap:.6rem;align-items:baseline;padding:.45rem 0;color:var(--color-ink);line-height:1.35}
.outline a::before{content:"";flex:0 0 .62rem;height:.62rem;border-radius:1px;transform:translateY(.05rem);background:url(/assets/img/d-chips.svg) 0 0/800% 100% no-repeat}
.outline li:nth-child(8n+2) a::before{background-position-x:14.286%}
.outline li:nth-child(8n+3) a::before{background-position-x:28.571%}
.outline li:nth-child(8n+4) a::before{background-position-x:42.857%}
.outline li:nth-child(8n+5) a::before{background-position-x:57.143%}
.outline li:nth-child(8n+6) a::before{background-position-x:71.429%}
.outline li:nth-child(8n+7) a::before{background-position-x:85.714%}
.outline li:nth-child(8n) a::before{background-position-x:100%}
.outline a:hover{color:var(--color-main)}

/* tables = proof spec sheet */
.table-scroll{border:0;border-top:2px solid var(--color-ink);border-radius:0;background:transparent;margin:1.5em 0}
.grid-table{font-size:.93em}
.grid-table caption{caption-side:top;text-align:left;font:700 .72rem var(--color-font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--color-dim);padding:.55rem 0 .5rem}
.grid-table thead th{font:700 .7rem var(--color-font-head);letter-spacing:.11em;color:var(--color-dim);border-bottom:1px solid var(--color-ink);padding:.6em .75em;vertical-align:bottom}
.grid-table td{vertical-align:top;padding:.65em .75em}
.grid-table tbody tr:hover td{background:color-mix(in srgb,var(--color-bg) 70%,transparent)}
.grid-table td:first-child{font-weight:600}

/* notes, formulas, figures */
.aside-note{background:var(--color-bg);border-left:0;border-radius:2px;padding:1em 1.2em 1em 1.5em;position:relative}
.aside-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:url(/assets/img/d-chips.svg) 42.857% 0/800% 100% no-repeat}
.equation{background:var(--color-bg);border:1px solid var(--color-border);border-left:3px solid var(--color-ink);border-radius:2px;line-height:1.7;font-size:.93rem}
.visual img{border:1px solid var(--color-border);border-radius:2px}
.visual figcaption{margin-top:.55rem;font-size:.86rem}
blockquote{border-left:3px solid var(--color-ink)}

/* ---------- guide cards = tear-out swatch cards ---------- */
.card-list{gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.item--img{border:1px solid var(--color-border);border-radius:4px;background:var(--color-panel)}
.card-img{border-bottom:1px solid var(--color-border)}
.item--img .card-txt{flex:1;padding:1.45rem 1.15rem 1.2rem;background:url(/assets/img/d-chips.svg) 14.286% 0/800% 7px no-repeat}
.card-list>.item:nth-child(2) .card-txt{background-position-x:42.857%}
.card-list>.item:nth-child(3) .card-txt{background-position-x:71.429%}
.card-list>.item:nth-child(4) .card-txt{background-position-x:100%}
.item b{font-size:1.06rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:.45rem}
.item span{font-size:.9rem;line-height:1.5}
.item .card-txt{color:var(--color-ink)}
.item .card-txt>span{color:var(--color-dim)}
.card-meta{font-family:var(--color-font-head);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-dim);margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--color-border)}
.item--img:hover{border-color:var(--color-ink);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--color-ink) 35%,transparent)}
.item--img:hover b{color:var(--color-main)}

/* ---------- FAQ: ruled index rows with a drawn plus ---------- */
.qa details{border-bottom:0;border-top:1px solid var(--color-border);padding:0}
.qa details:last-child{border-bottom:1px solid var(--color-border)}
.qa summary{position:relative;list-style:none;padding:1rem 2.6rem 1rem 0;font-family:var(--color-font-head);font-weight:700;font-size:1.04rem;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:.35rem;top:50%;width:1.35rem;height:1.35rem;margin-top:-.675rem;border:1px solid var(--color-border);border-radius:3px;
 background:linear-gradient(var(--color-ink),var(--color-ink)) center/9px 1.5px no-repeat,linear-gradient(var(--color-ink),var(--color-ink)) center/1.5px 9px no-repeat;transition:background-size .2s ease}
.qa details[open] summary::after{background-size:9px 1.5px,1.5px 0;background-color:var(--color-bg)}
.qa summary:hover{color:var(--color-main)}
.qa details p{margin:0 0 1.1rem;max-width:44em;color:var(--color-ink)}

/* ---------- buttons, CTA, crumbs ---------- */
.action-link{border-radius:3px;padding:.8em 1.5em;font-family:var(--color-font-head);font-size:.82rem;letter-spacing:.09em;background:var(--color-ink);transition:background-color .2s ease}
.action-link:hover{background:var(--color-main)}
.callout-cta{background:var(--color-panel);border:1px solid var(--color-border);border-radius:2px;padding:2.4rem 1.4rem 2rem;position:relative}
.callout-cta::before{content:"";position:absolute;left:50%;top:0;width:176px;margin-left:-88px;height:7px;background:url(/assets/img/d-chips.svg) 0 0/100% 100% no-repeat}
.trail{font-size:.8rem;letter-spacing:.02em}
.trail a{text-decoration-color:var(--color-border)}

/* hub */
.article-area>h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.035em;margin-bottom:.3em}
.article-area>.intro-text{font-size:1.14rem;max-width:40em}

/* ---------- article: the header is one big swatch chip with its white label ---------- */
.post{max-width:47rem}
.post-head--band{position:relative;padding:2.4rem 2rem 0;border-radius:4px;margin-top:.8rem;background:var(--color-main);display:flex;flex-direction:column;min-height:17rem}
.post-head--band .post-kicker{align-self:flex-start;font-size:.7rem;letter-spacing:.16em;color:var(--color-panel);border:1px solid color-mix(in srgb,var(--color-panel) 55%,transparent);border-radius:2px;padding:.3rem .55rem}
.post-head--band h1{margin:auto 0 1.6rem;padding-top:1.4rem;font-size:clamp(1.85rem,4.6vw,2.8rem);line-height:1.08;letter-spacing:-.03em;max-width:17em}
.post-head--band .post-meta{margin:0 -2rem;padding:.85rem 2rem;background:var(--color-panel);color:var(--color-ink);border:1px solid var(--color-border);border-top:0;border-radius:0 0 4px 4px;font:700 .72rem var(--color-font-head);letter-spacing:.13em;text-transform:uppercase}
.post .intro-text{font-size:1.18rem;line-height:1.65}
.post .intro-text::first-letter{font-family:var(--color-font-head);font-weight:800;font-size:2.7em;line-height:1;color:var(--color-panel);background:var(--color-main);padding:.08em .16em .02em;margin:.08em .14em 0 0;border-radius:2px}
.post h3{color:var(--color-ink)}
.post>p,.post .block>p,.post li{line-height:1.72}

/* article contents as swatch tabs */
.outline--chips{background:transparent;border:0;padding:0;margin:1.8rem 0 2rem}
.outline--chips strong{display:block;font:700 .7rem var(--color-font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--color-dim);margin-bottom:.6rem}
.outline--chips ol{gap:.5rem}
.outline--chips a{display:inline-flex;align-items:center;gap:.5rem;border-radius:3px;background:var(--color-panel);border-color:var(--color-border);color:var(--color-ink);font-size:.86rem;padding:.38rem .7rem .38rem .45rem;transition:border-color .2s ease}
.outline--chips a::before{content:"";flex:0 0 .8rem;height:.8rem;border-radius:1px;background:url(/assets/img/d-chips.svg) 14.286% 0/800% 100% no-repeat}
.outline--chips li:nth-child(8n+2) a::before{background-position-x:28.571%}
.outline--chips li:nth-child(8n+3) a::before{background-position-x:42.857%}
.outline--chips li:nth-child(8n+4) a::before{background-position-x:57.143%}
.outline--chips li:nth-child(8n+5) a::before{background-position-x:71.429%}
.outline--chips li:nth-child(8n+6) a::before{background-position-x:85.714%}
.outline--chips li:nth-child(8n+7) a::before{background-position-x:100%}
.outline--chips li:nth-child(8n) a::before{background-position-x:0}
.outline--chips a:hover{border-color:var(--color-ink)}

/* ---------- footer: the bottom edge of the press sheet ---------- */
.colophon{position:relative;background:var(--color-ink);color:var(--color-bg);border-top:0;margin-top:4rem;padding:2.6rem 0 2.8rem}
.colophon::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:url(/assets/img/d-strip.svg) 0 0/auto 6px repeat-x}
.foot-in{position:relative;padding-left:3.2rem;min-height:40px;align-items:center}
.foot-in::before{content:"";position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;background:url(/assets/img/d-reg-light.svg) center/contain no-repeat;opacity:.8}
.colophon p{margin:0;color:var(--color-bg);opacity:1}
.colophon a{color:var(--color-bg);opacity:1;text-decoration-color:color-mix(in srgb,var(--color-bg) 40%,transparent)}
.colophon a:hover{text-decoration-color:var(--color-bg)}
.colophon nav{gap:.5rem 1.4rem;font-size:.86rem}

/* the side contents hides below 900px; the article contents must stay */
@media (max-width:900px){.outline--post{display:block} .layout{grid-template-columns:minmax(0,1fr)}}

/* ---------- phone ---------- */
@media (max-width:640px){
 .header-bar{position:relative}
 .masthead-inner{gap:.55rem;padding:.6rem 1rem}
 .nav-links{gap:.9rem 1.1rem}
 .block{margin-top:2.2rem;padding-top:1.8rem}
 .post-head--band{padding:1.6rem 1.2rem 0;min-height:14rem}
 .post-head--band .post-meta{margin:0 -1.2rem;padding:.8rem 1.2rem}
 .foot-in{padding-left:0}
 .foot-in::before{position:static;display:block;margin:0 0 .4rem}
}
@media (prefers-reduced-motion:reduce){
 .nav-links>a::after,.action-link,.qa summary::after,.outline--chips a,.item--img{transition:none}
 .item--img:hover{transform:none}
}