:root{--site-base:#18181b;--site-raised:#202024;--site-ink:#f4f4f5;--site-dim:#a1a1aa;--site-main:#22c55e;--site-hi:#38bdf8;--site-border:#323238;--site-rad:4px;--site-max:1140px;--site-heading:'Fraunces',system-ui,sans-serif;--site-body:'Manrope',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(--site-base);color:var(--site-ink);font:16px/1.65 var(--site-body);color-scheme:dark}
img{max-width:100%;height:auto} a{color:var(--site-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(--site-heading);line-height:1.2;letter-spacing:-.01em;color:var(--site-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}
.lay-shell{max-width:var(--site-max);margin:0 auto;padding:0 1rem} .lay-core{max-width:var(--site-max);margin:0 auto;padding:1.2rem 1rem 3rem}
.lay-skip-link{position:absolute;left:-9999px} .lay-skip-link:focus{left:1rem;top:1rem;background:var(--site-raised);padding:.5rem;z-index:99}
.lay-header__in{max-width:var(--site-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.lay-wordmark{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--site-heading);color:var(--site-ink);text-decoration:none}
.lay-nav-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .lay-nav-links a{color:var(--site-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.lay-header-bar{background:var(--site-raised);border-bottom:1px solid var(--site-border)}  .lay-nav-links a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.lay-headline{margin:1rem 0 1.4rem} .lay-summary{font-size:1.12rem;max-width:46em;color:var(--site-dim)} 
.lay-widget{margin:1.4rem 0 2rem}
.lay-hint-box{margin:1.4em 0;padding:.9em 1.1em;background:var(--site-raised);border-left:4px solid var(--site-hi);border-radius:0 var(--site-rad) var(--site-rad) 0}
.lay-math-box{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--site-raised);border:1px dashed var(--site-main);border-radius:var(--site-rad);overflow-x:auto}
.lay-grid-wrap{margin:1.2em 0;overflow-x:auto;border:1px solid var(--site-border);border-radius:var(--site-rad);background:var(--site-raised)}
.lay-tbl{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .lay-tbl th,.lay-tbl td{padding:.5em .75em;border-bottom:1px solid var(--site-border);text-align:left}
.lay-tbl thead th{background:color-mix(in srgb,var(--site-border) 60%,var(--site-raised))}
ol.lay-step-list{padding-left:1.3em} ol.lay-step-list>li{margin:.5em 0}
.lay-figure{margin:1.6em 0;text-align:center} .lay-figure img{width:100%;max-width:720px;border-radius:var(--site-rad);border:1px solid var(--site-border);background:#fff} .lay-figure figcaption{font-size:.9em;color:var(--site-dim)}
.lay-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.lay-link-card{display:block;padding:1.1rem;background:var(--site-raised);border-radius:var(--site-rad);border:1px solid var(--site-border);color:var(--site-ink);text-decoration:none}
.lay-link-card b{display:block;font-family:var(--site-heading);margin-bottom:.35rem} .lay-link-card span{color:var(--site-dim);font-size:.92rem} .lay-link-card:hover{border-color:var(--site-main)}
.lay-link-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .lay-link-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--site-ink) 14%,transparent)}
.lay-guide-card__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .lay-link-card__txt{display:block;padding:1rem 1.1rem 1.1rem} .lay-link-card__txt>span{display:block}
.lay-blist a,.lay-brow,.lay-post__kicker{background:none!important}
.lay-tile__meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--site-main)}
.lay-card-list--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .lay-card-list--feat>.lay-link-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .lay-card-list--feat>.lay-link-card:first-child b{font-size:1.35rem}
.lay-blist{display:grid;gap:1rem;margin:1.2em 0} .lay-brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--site-raised);border:1px solid var(--site-border);border-radius:var(--site-rad);overflow:hidden;color:var(--site-ink);text-decoration:none}
.lay-brow .lay-guide-card__img{height:100%;aspect-ratio:auto;min-height:126px} .lay-brow b{display:block;font-family:var(--site-heading);font-size:1.12rem;margin-bottom:.3rem} .lay-brow .lay-link-card__txt>span{color:var(--site-dim);font-size:.93rem} .lay-brow:hover{border-color:var(--site-main)}
.lay-blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .lay-blist--min li{counter-increment:bl;border-top:1px solid var(--site-border)} .lay-blist--min li:last-child{border-bottom:1px solid var(--site-border)}
.lay-blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--site-ink);text-decoration:none} .lay-blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--site-heading);color:var(--site-main)}
.lay-blist--min b{font-family:var(--site-heading);font-size:1.15rem} .lay-blist--min span{color:var(--site-dim);font-size:.93rem} .lay-blist--min a:hover b{color:var(--site-main)}
.lay-post__head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--site-rad);overflow:hidden} .lay-post__head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.lay-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))} .lay-post__ov h1,.lay-post__ov .lay-post__meta,.lay-post__ov .lay-post__kicker{color:#fff}
.lay-post__head--band{background:var(--site-main);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--site-rad)} .lay-post__head--band h1,.lay-post__head--band .lay-post__meta,.lay-post__head--band .lay-post__kicker{color:#fff}
.lay-post__head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .lay-post__head--split .lay-post__cover{margin:0}
.lay-toc-box--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .lay-toc-box--chips li{margin:0} .lay-toc-box--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--site-border);border-radius:999px;background:var(--site-base);text-decoration:none;font-size:.88rem}
.lay-toc-box--rail{background:none;border:0;border-left:3px solid var(--site-hi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.lay-locale--globe summary{display:flex;align-items:center;gap:.35rem} .lay-langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .lay-langpills a{padding:.25rem .7rem;border:1px solid var(--site-border);border-radius:999px;text-decoration:none} .lay-langpills a[aria-current]{background:var(--site-main);border-color:var(--site-main);color:#fff}
@media (max-width:700px){.lay-card-list--feat{grid-template-columns:1fr} .lay-card-list--feat>.lay-link-card:first-child{display:flex} .lay-brow{grid-template-columns:1fr} .lay-brow .lay-guide-card__img{min-height:0;aspect-ratio:1200/630} .lay-post__head--split{grid-template-columns:1fr} .lay-post__ov{position:static;background:var(--site-main);padding:1.2rem} .lay-post__head--overlay>img{min-height:0}}
.lay-post{max-width:48rem;margin:0 auto} .lay-post__head{margin:.6rem 0 1.2rem} .lay-post__head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.lay-post__kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--site-main);text-decoration:none}
.lay-upd{color:var(--site-dim);font-size:.9rem;margin:2rem 0 0} .lay-sign{font-style:italic;color:var(--site-dim)} .lay-post__meta{color:var(--site-dim);font-size:.92rem;margin:0} .lay-post__cover{margin:0 0 1.6rem} .lay-post__cover img{display:block;width:100%;height:auto;border-radius:var(--site-rad)}
.lay-post .lay-summary{font-size:1.2rem;color:var(--site-ink)} .lay-post .lay-summary::first-letter{font-family:var(--site-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--site-main)}
.lay-post .lay-toc-box--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--site-raised);border:1px solid var(--site-border);border-left:4px solid var(--site-main);border-radius:var(--site-rad);font-size:.95rem}
.lay-toc-box--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .lay-toc-box--post li{margin:.2rem 0}
.lay-post h3{color:var(--site-main)} .lay-post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--site-hi);font-size:1.1em}
.lay-answers__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .lay-answers__grid>div{background:var(--site-raised);border:1px solid var(--site-border);border-radius:var(--site-rad);padding:1rem} .lay-faq-list h3{margin-top:0;font-size:1rem}
.lay-crumb-nav{font-size:.88rem;color:var(--site-dim);margin:.4rem 0 1rem} .lay-crumb-nav a{color:var(--site-dim)}
.lay-callout-cta{margin:2.4rem 0;padding:1.4rem;background:var(--site-raised);border-radius:var(--site-rad);border:1px solid var(--site-border);text-align:center}
.lay-action-link{display:inline-block;padding:.7em 1.4em;background:var(--site-main);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.lay-colophon{border-top:1px solid var(--site-border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--site-dim);background:var(--site-raised)}
.lay-colophon nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .lay-colophon a{color:var(--site-dim)} .lay-colophon{background:var(--site-ink);color:var(--site-base)} .lay-colophon a,.lay-colophon p{color:var(--site-base);opacity:.85}


.lay-locale{position:relative} .lay-locale summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--site-border);border-radius:999px;font-size:.85rem}
.lay-lang-menu__list{position:absolute;right:0;top:120%;background:var(--site-raised);border:1px solid var(--site-border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.lay-lang-menu__list a{padding:.3rem .5rem;text-decoration:none;color:var(--site-ink)} .lay-lang-menu__list a[aria-current]{font-weight:700;color:var(--site-main)}
.lay-codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .lay-codes a{text-decoration:none;color:var(--site-dim);padding:.1rem .3rem;border-radius:4px} .lay-codes a[aria-current]{color:var(--site-main);background:color-mix(in srgb,var(--site-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(--site-raised)}
[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}}
.lay-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--site-dim)}
.lay-action-link{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.lay-grid-wrap{border:0;border-top:3px solid var(--site-main);border-radius:0;background:transparent} .lay-tbl thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.lay-section a:not(.lay-action-link):not(.lay-link-card){text-decoration-thickness:2px}
@media (max-width:640px){.lay-header__in{gap:.5rem} .lay-nav-links{gap:.8rem}}

/* Graffiti generator — tool styles. Only site tokens for colour, radius and fonts (color-mix for tints).
   The canvas carries the artwork's own colours; everything around it follows the page. */
.gg {
  --gg-soft: color-mix(in srgb, var(--site-main) 10%, var(--site-raised));
  --gg-soft2: color-mix(in srgb, var(--site-hi) 12%, var(--site-raised));
  --gg-well: color-mix(in srgb, var(--site-ink) 6%, var(--site-base));
  --gg-rs: calc(var(--site-rad) * .6);
  position: relative;
  color: var(--site-ink);
  font-family: var(--site-body);
  color-scheme: inherit;
  display: grid;
  gap: 1.1rem;
}
.gg *, .gg *::before, .gg *::after { box-sizing: border-box; }
.gg [hidden] { display: none !important; }
.gg-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.gg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gg button { font: inherit; color: inherit; cursor: pointer; }
.gg button:disabled { cursor: not-allowed; opacity: .45; }
.gg :focus-visible { outline: 2px solid var(--site-hi); outline-offset: 2px; }

/* ---------- text input ---------- */
.gg-top { display: grid; gap: .35rem; }
.gg-lbl { font-family: var(--site-heading); font-weight: 700; font-size: 1.05rem; }
.gg-irow { position: relative; }
.gg-tinp {
  width: 100%; min-height: 58px; padding: .6rem 4.6rem .6rem 1rem;
  font: 800 clamp(1.3rem, 4vw, 1.9rem)/1.2 var(--site-heading); letter-spacing: .02em;
  color: var(--site-ink); background: var(--site-base); border: 2px solid var(--site-border); border-radius: var(--site-rad);
  transition: border-color .2s, box-shadow .2s;
}
.gg-tinp::placeholder { color: var(--site-dim); opacity: .7; font-weight: 600; }
.gg-tinp:focus { outline: none; border-color: var(--site-main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-main) 22%, transparent); }
.gg-cc { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: .82rem; color: var(--site-dim); font-variant-numeric: tabular-nums; pointer-events: none; }
.gg-cc.warn { color: var(--site-hi); font-weight: 700; }
.gg-hint, .gg-tnote { margin: 0; font-size: .86rem; color: var(--site-dim); }
.gg-tnote { color: var(--site-hi); font-weight: 600; }

/* ---------- stage: the canvas is the hero ---------- */
.gg-stage { display: grid; gap: .7rem; }
.gg-cw {
  position: relative; display: grid; place-items: center; padding: clamp(.5rem, 2vw, 1rem);
  border-radius: var(--site-rad); border: 1px solid var(--site-border);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--site-main) 9%, transparent) 0 22%, transparent 23%),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--site-hi) 9%, transparent) 0 18%, transparent 19%),
    var(--gg-well);
}
.gg-cw::after { /* a small cap-nozzle drip at the frame edge */
  content: ""; position: absolute; left: 12%; top: 100%; width: 6px; height: 16px; border-radius: 0 0 6px 6px;
  background: var(--site-main); opacity: .55;
}
.gg-mc { display: block; max-width: 100%; height: auto; border-radius: var(--gg-rs); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.gg-cw.gg-checker .gg-mc {
  background-color: color-mix(in srgb, var(--site-ink) 10%, var(--site-base));
  background-image: linear-gradient(45deg, color-mix(in srgb, var(--site-ink) 18%, var(--site-base)) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--site-ink) 18%, var(--site-base)) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--site-ink) 18%, var(--site-base)) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--site-ink) 18%, var(--site-base)) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.gg-empty {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0; max-width: calc(100% - 2rem);
  padding: .3rem .8rem; border-radius: 999px; font-size: .84rem; text-align: center;
  background: color-mix(in srgb, var(--site-raised) 88%, transparent); color: var(--site-ink); border: 1px solid var(--site-border);
}

.gg-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.gg-btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1rem;
  border-radius: var(--gg-rs); border: 1px solid var(--site-border); background: var(--site-raised); font-weight: 600; font-size: .95rem;
  transition: background .2s, border-color .2s, transform .15s;
}
.gg-btn:hover:not(:disabled) { border-color: var(--site-main); background: var(--gg-soft); }
.gg-btn:active:not(:disabled) { transform: translateY(1px); }
.gg-bp { background: var(--site-main); border-color: var(--site-main); color: var(--site-base); }
.gg-bp:hover:not(:disabled) { background: color-mix(in srgb, var(--site-main) 85%, var(--site-ink)); }
.gg-readout { margin: 0; font-size: .9rem; color: var(--site-dim); font-variant-numeric: tabular-nums; }
.gg-status { margin: 0; min-height: 1.4em; font-size: .9rem; font-weight: 600; opacity: 0; transition: opacity .25s; }
.gg-status.on { opacity: 1; }
.gg-status.ok { color: var(--site-main); }
.gg-status.err { color: var(--site-hi); }

/* ---------- style wall: sample panels ---------- */
.gg-h { margin: 0 0 .6rem; font-family: var(--site-heading); font-size: 1.15rem; }
.gg-ftabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.gg-ft {
  min-height: 38px; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--site-border);
  background: transparent; color: var(--site-dim); font-size: .88rem; font-weight: 600;
}
.gg-ft[aria-pressed="true"] { background: var(--site-ink); color: var(--site-base); border-color: var(--site-ink); }
.gg-ft:hover { color: var(--site-ink); border-color: var(--site-main); }
.gg-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .7rem; }
.gg-sc {
  position: relative; display: grid; gap: .3rem; padding: .45rem .45rem .55rem; text-align: left;
  border: 2px solid var(--site-border); border-radius: var(--gg-rs); background: var(--site-raised);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.gg-sc:hover { transform: translateY(-2px) rotate(-.4deg); border-color: color-mix(in srgb, var(--site-main) 60%, var(--site-border)); }
.gg-sc[aria-pressed="true"] { border-color: var(--site-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-main) 25%, transparent); }
.gg-sc[aria-pressed="true"]::after {
  content: ""; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--site-main); border: 3px solid var(--site-raised);
}
.gg-sc-cv { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: calc(var(--gg-rs) * .7); }
.gg-sc-lb { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.gg-sc-cat { font-size: .74rem; color: var(--site-dim); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- panels ---------- */
.gg-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .8rem; align-items: start; }
.gg-pnl { border: 1px solid var(--site-border); border-radius: var(--site-rad); background: var(--site-raised); }
.gg-pnl > summary {
  display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--site-heading); font-weight: 700; font-size: 1.02rem;
}
.gg-pnl > summary::-webkit-details-marker { display: none; }
.gg-pnl > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--site-dim); border-bottom: 2px solid var(--site-dim); transform: rotate(45deg); transition: transform .2s; }
.gg-pnl[open] > summary::after { transform: rotate(-135deg); }
.gg-pnl > summary svg { color: var(--site-main); }
.gg-pb { padding: 0 1rem 1rem; display: grid; gap: .6rem; }
.gg-sub { margin: .2rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--site-dim); font-weight: 700; }
.gg-tip { margin: .2rem 0 0; font-size: .84rem; color: var(--site-dim); line-height: 1.45; }

/* paint presets as a rail of spray caps */
.gg-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .35rem; }
.gg-cap {
  display: grid; justify-items: center; gap: .2rem; padding: .35rem .2rem; border: 1px solid transparent; border-radius: var(--gg-rs);
  background: transparent; font-size: .72rem; line-height: 1.2; text-align: center; color: var(--site-dim);
}
.gg-cap-i { width: 38px !important; height: 38px !important; stroke: none !important; transition: transform .2s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.gg-cap:hover .gg-cap-i { transform: translateY(-2px) rotate(-8deg); }
.gg-cap { min-width: 0; }
.gg-cap-n { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.gg-cap[aria-pressed="true"] { border-color: var(--site-main); background: var(--gg-soft); color: var(--site-ink); }

.gg-crow { display: grid; grid-template-columns: 7.5rem 44px 1fr; align-items: center; gap: .5rem; }
.gg-crow label { font-size: .9rem; }
.gg-crow input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--site-border); border-radius: var(--gg-rs); background: var(--site-base); cursor: pointer; }
.gg-hx {
  width: 100%; min-width: 0; height: 36px; padding: 0 .6rem; font: 600 .92rem/1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--site-ink); background: var(--site-base); border: 1px solid var(--site-border); border-radius: var(--gg-rs);
}
.gg-hx[aria-invalid="true"] { border-color: var(--site-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-hi) 25%, transparent); }
.gg-err { grid-column: 1 / -1; font-size: .82rem; color: var(--site-hi); font-weight: 600; }

.gg-rng { display: grid; grid-template-columns: 7.5rem 1fr 3.6rem; align-items: center; gap: .55rem; }
.gg-rng label { font-size: .9rem; }
.gg-rng output { font-size: .85rem; text-align: right; color: var(--site-dim); font-variant-numeric: tabular-nums; }
.gg-rng input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--site-main); background: transparent; }

.gg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .45rem; }
.gg-opt {
  display: grid; justify-items: center; gap: .35rem; padding: .5rem .3rem; min-height: 44px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--site-border); border-radius: var(--gg-rs); background: var(--site-base);
}
.gg-opt[aria-pressed="true"] { border-color: var(--site-main); background: var(--gg-soft); box-shadow: inset 0 0 0 1px var(--site-main); }
.gg-sw { width: 46px; height: 26px; border-radius: 4px; border: 1px solid var(--site-border); }
.gg-sw-solid { background: color-mix(in srgb, var(--site-main) 30%, var(--site-ink) 40%); }
.gg-sw-brick {
  background-color: color-mix(in srgb, var(--site-ink) 45%, var(--site-base));
  background-image: linear-gradient(var(--site-base) 1px, transparent 1px), linear-gradient(90deg, var(--site-base) 1px, transparent 1px);
  background-size: 15px 8px, 15px 16px;
}
.gg-sw-none {
  background-color: var(--site-raised);
  background-image: linear-gradient(45deg, var(--site-border) 25%, transparent 25%, transparent 75%, var(--site-border) 75%), linear-gradient(45deg, var(--site-border) 25%, transparent 25%, transparent 75%, var(--site-border) 75%);
  background-size: 10px 10px; background-position: 0 0, 5px 5px;
}
.gg-sw-color { background: linear-gradient(135deg, var(--site-main), var(--site-hi)); }
.gg-sw-sheet { background: var(--site-base); box-shadow: inset 0 0 0 3px var(--site-ink); }
.gg-ratio { display: block; border: 2px solid currentColor; border-radius: 3px; opacity: .8; }
.gg-r-wide { width: 40px; height: 20px; }
.gg-r-square { width: 26px; height: 26px; }
.gg-r-tall { width: 16px; height: 28px; }
.gg-chk { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.gg-chk input { width: 18px; height: 18px; accent-color: var(--site-main); }
.gg-seg { display: inline-flex; border: 1px solid var(--site-border); border-radius: var(--gg-rs); overflow: hidden; width: max-content; }
.gg-seg button { min-width: 52px; min-height: 40px; border: 0; border-right: 1px solid var(--site-border); background: var(--site-base); font-weight: 700; }
.gg-seg button:last-child { border-right: 0; }
.gg-seg button[aria-pressed="true"] { background: var(--site-main); color: var(--site-base); }

/* outline-sheet mode: hint that colour panels do not apply */
.gg.gg-is-sheet .gg-pgrid, .gg.gg-is-sheet .gg-crow { opacity: .5; }

/* print-only outline sheet */
.gg-print { display: none; }
@media print {
  html.gg-printing body > *:not(.gg-print) { display: none !important; }
  html.gg-printing .gg-print { display: block !important; margin: 0; text-align: center; color: #000; background: #fff; }
  html.gg-printing .gg-print img { display: block; height: auto; margin: 0 auto; max-width: 100%; max-height: 240mm; object-fit: contain; }
  html.gg-printing .gg-print p { font: 10pt/1.3 sans-serif; margin: 6mm 0 0; }
}

@media (max-width: 560px) {
  .gg-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .gg-acts .gg-btn { flex: 1 1 calc(50% - .5rem); justify-content: center; }
  .gg-acts .gg-bdl { flex-basis: 100%; }
  .gg-crow { grid-template-columns: 6rem 44px 1fr; }
  .gg-rng { grid-template-columns: 6rem 1fr 3.2rem; }
  .gg-panels { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gg *, .gg *::before, .gg *::after { transition: none !important; animation: none !important; }
  .gg-sc:hover { transform: none; }
}

/* design: sites/<d>/design/site.css */
/* graffiti-generator.net: "Night paint jam at a legal hall-of-fame wall"
   primed cinder-block wall, coping header with fat-cap spray line and drips, sticker language switcher,
   piece-lettered h1 with hard 3D block, sprayed heading strokes, primed boards with flat 3D shadows,
   black-book notes, spray-can label formulas, pavement footer. */

:root{
  --g-3d:color-mix(in srgb,var(--site-main) 42%,#000);
  --g-3d2:color-mix(in srgb,var(--site-main) 22%,#000);
  --g-sky3d:color-mix(in srgb,var(--site-hi) 35%,#000);
  --g-prime:color-mix(in srgb,var(--site-raised) 82%,var(--site-ink) 4%);
  --g-mist:color-mix(in srgb,var(--site-main) 30%,transparent);
  --g-hair:color-mix(in srgb,var(--site-ink) 8%,transparent);
  --g-deep:color-mix(in srgb,var(--site-base) 72%,#000);
}
::selection{background:color-mix(in srgb,var(--site-main) 45%,transparent);color:var(--site-ink)}
body{background-color:var(--site-base);background-image:
  radial-gradient(900px 380px at 85% -60px,color-mix(in srgb,var(--site-hi) 9%,transparent),transparent 70%),
  url(/assets/img/d-blocks.svg);
  background-size:auto,240px 120px;background-repeat:no-repeat,repeat}

/* ---------- header: concrete coping with a fat-cap spray line and drips ---------- */
.lay-header-bar{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--site-raised) 70%,var(--site-ink) 6%),var(--site-raised));border-bottom:0;margin-bottom:34px;box-shadow:0 1px 0 var(--g-hair) inset}
.lay-header-bar::after{content:'';position:absolute;left:0;right:0;bottom:-30px;height:34px;background:url(/assets/img/d-drips.svg) 0 0/300px 34px repeat-x;pointer-events:none}
.lay-header__in{padding:.8rem 1rem;gap:.6rem 1.6rem}
.lay-wordmark{font:800 1.12rem/1.1 var(--site-heading);letter-spacing:-.01em;gap:.7rem}
.lay-wordmark svg{border-radius:4px;box-shadow:3px 3px 0 var(--g-3d),5px 5px 0 var(--g-3d2)}
.lay-wordmark svg rect{rx:4px}
.lay-nav-links{gap:.5rem 1.5rem}
.lay-header-bar .lay-nav-links>a{font-weight:800;letter-spacing:.12em;color:var(--site-dim);padding:.35rem 0;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.lay-header-bar .lay-nav-links>a:hover{color:var(--site-ink);border-bottom-color:var(--site-border)}
.lay-header-bar .lay-nav-links>a[aria-current]{color:var(--site-ink);border-bottom-color:var(--site-main)}

/* languages: a sticker slapped on the coping */
.lay-locale summary{position:relative;padding:.42rem .8rem .36rem;border:0;border-radius:3px;background:var(--site-ink);color:var(--site-base);font-weight:800;font-size:.8rem;letter-spacing:.04em;transform:rotate(-2deg);box-shadow:inset 0 4px 0 var(--site-hi),2px 2px 0 var(--g-deep);transition:transform .2s}
.lay-locale summary::-webkit-details-marker{display:none}
.lay-locale summary:hover,.lay-locale[open] summary{transform:rotate(0)}
.lay-locale summary::after{content:'';display:inline-block;width:0;height:0;margin-left:.45rem;vertical-align:.12em;border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
.lay-lang-menu__list{border-radius:4px;border:1px solid var(--site-border);background:var(--site-raised);box-shadow:5px 5px 0 var(--g-deep);padding:.35rem}
.lay-lang-menu__list a{border-radius:3px;font-weight:600}
.lay-lang-menu__list a:hover{background:color-mix(in srgb,var(--site-main) 14%,transparent)}
.lay-lang-menu__list a[aria-current]{color:var(--site-main)}

/* ---------- first screen: piece-lettered h1 beside a spray can ---------- */
.lay-headline{position:relative;margin:1.2rem 0 1.4rem}
.lay-headline h1{font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0 0 .45em;text-wrap:balance;
  text-shadow:1px 1px 0 var(--g-3d),2px 2px 0 var(--g-3d),3px 3px 0 var(--g-3d),4px 4px 0 var(--g-3d2),5px 5px 0 var(--g-3d2)}
.lay-headline .lay-summary{font-size:1.08rem;color:var(--site-dim);max-width:40em}
@media (min-width:900px){
  .lay-headline{padding-right:220px;min-height:190px}
  .lay-headline::after{content:'';position:absolute;right:0;top:-1.4rem;width:180px;height:216px;background:url(/assets/img/d-can.svg) center/contain no-repeat;pointer-events:none}
}

/* tool frame (outside only): a primed board screwed to the wall */
.lay-widget{position:relative;margin:1.4rem 0 2.8rem;padding:.8rem;background:color-mix(in srgb,var(--site-raised) 72%,transparent);border:1px solid var(--site-border);border-radius:6px;box-shadow:8px 8px 0 var(--g-deep)}
.lay-widget::before,.lay-widget::after{content:'';position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:var(--site-border);box-shadow:inset 1px 1px 0 var(--g-hair);pointer-events:none}
.lay-widget::before{left:7px}.lay-widget::after{right:7px}
@media (max-width:520px){.lay-widget{padding:.4rem;margin-left:-.4rem;margin-right:-.4rem;box-shadow:4px 4px 0 var(--g-deep)}}

/* ---------- crumbs: stencil labels ---------- */
.lay-crumb-nav{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--site-dim)}
.lay-crumb-nav a{color:var(--site-dim);text-decoration:none;border-bottom:2px solid var(--site-border)}
.lay-crumb-nav a:hover{color:var(--site-ink);border-bottom-color:var(--site-main)}

/* ---------- section headings: a fat-cap stroke with mist and one drip ---------- */
.lay-section>h2{position:relative;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-top:2.3em;padding-top:1.35rem}
.lay-section>h2::before{content:'';position:absolute;left:-8px;top:-2px;width:6rem;height:26px;margin:0;background:
  linear-gradient(90deg,var(--site-main) 0 72%,color-mix(in srgb,var(--site-main) 35%,transparent) 88%,transparent) 8px 8px/5rem 7px no-repeat,
  linear-gradient(var(--site-main),var(--site-main)) 2.9rem 12px/4px 10px no-repeat,
  radial-gradient(circle at 50% 50%,var(--site-main) 0 2.6px,transparent 3px) calc(2.9rem - 1px) 19px/6px 6px no-repeat,
  radial-gradient(ellipse 50% 50% at 45% 45%,var(--g-mist),transparent 78%) 0 0/100% 24px no-repeat}
.lay-section--guides>h2::before,.lay-faq-list>h2::before{background:
  linear-gradient(90deg,var(--site-hi) 0 72%,color-mix(in srgb,var(--site-hi) 35%,transparent) 88%,transparent) 8px 8px/5rem 7px no-repeat,
  linear-gradient(var(--site-hi),var(--site-hi)) 1.5rem 12px/4px 7px no-repeat,
  radial-gradient(circle at 50% 50%,var(--site-hi) 0 2.6px,transparent 3px) calc(1.5rem - 1px) 16px/6px 6px no-repeat,
  radial-gradient(ellipse 50% 50% at 45% 45%,color-mix(in srgb,var(--site-hi) 28%,transparent),transparent 78%) 0 0/100% 24px no-repeat}
.lay-section h3{font-size:1.08rem;margin-top:1.7em}
.lay-section h3::before{content:'';display:inline-block;width:.55em;height:.55em;margin-right:.55em;vertical-align:.08em;border-radius:50%;background:var(--site-main);box-shadow:0 0 0 2px var(--site-base),0 0 0 3.5px color-mix(in srgb,var(--site-main) 60%,transparent)}
.lay-section a:not(.lay-action-link){text-decoration-color:color-mix(in srgb,var(--site-main) 55%,transparent)}
.lay-section a:not(.lay-action-link):hover{text-decoration-color:var(--site-main)}

/* steps: numbered spray caps */
ol.lay-step-list{list-style:none;counter-reset:st;padding-left:0}
ol.lay-step-list>li{counter-increment:st;position:relative;padding-left:2.6rem;margin:.75em 0}
ol.lay-step-list>li::before{content:counter(st);position:absolute;left:0;top:.05em;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;font:800 .82rem/1 var(--site-body);color:var(--site-base);background:var(--site-main);box-shadow:inset 0 -3px 0 var(--g-3d),2px 2px 0 var(--g-deep)}
ol.lay-step-list>li:nth-child(3n+2)::before{background:var(--site-hi);box-shadow:inset 0 -3px 0 var(--g-sky3d),2px 2px 0 var(--g-deep)}
ol.lay-step-list>li:nth-child(3n)::before{background:var(--site-ink);box-shadow:inset 0 -3px 0 var(--site-dim),2px 2px 0 var(--g-deep)}
.lay-section ul>li::marker,.lay-post ul>li::marker{color:var(--site-main)}

/* notes: a black-book page */
.lay-hint-box{position:relative;background:linear-gradient(var(--g-hair) 1px,transparent 1px) 0 0/100% 22px,var(--g-deep);border:1px solid var(--site-border);border-left:0;border-radius:2px 6px 6px 2px;box-shadow:inset 6px 0 0 var(--site-hi),5px 5px 0 color-mix(in srgb,#000 35%,transparent);padding:1em 1.2em 1em 1.5em}

/* formulas: a spray-can label with cap-colour bands */
.lay-math-box{border:1px solid var(--site-border);border-radius:4px;background:
  linear-gradient(90deg,var(--site-main) 0 6px,var(--site-hi) 6px 12px,var(--site-ink) 12px 15px,transparent 15px),var(--g-deep);
  padding:.95em 1.2em .95em 1.7rem;color:var(--site-ink);box-shadow:4px 4px 0 color-mix(in srgb,#000 35%,transparent)}

/* tables: paint chart with a sprayed header line */
.lay-grid-wrap{border-radius:4px;border-color:var(--site-border);background:color-mix(in srgb,var(--site-raised) 88%,transparent);box-shadow:5px 5px 0 color-mix(in srgb,#000 35%,transparent)}
.lay-tbl thead th{background:var(--g-deep);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--site-ink);border-bottom:3px solid var(--site-main)}
.lay-tbl tbody tr:hover td{background:color-mix(in srgb,var(--site-main) 6%,transparent)}
.lay-tbl caption{color:var(--site-dim);font-size:.88rem;padding:.4rem 0}

/* figures pinned on the wall */
.lay-figure img{border-radius:4px;border-color:var(--site-border);box-shadow:6px 6px 0 color-mix(in srgb,#000 35%,transparent)}
.lay-figure figcaption{margin-top:.6rem;font-size:.86rem}

/* buttons: fat-cap green with a hard block */
.lay-action-link{border-radius:3px;font-weight:800;letter-spacing:.06em;color:var(--site-base);background:var(--site-main);box-shadow:4px 4px 0 var(--g-3d);transition:transform .15s,box-shadow .15s}
.lay-action-link:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--g-3d)}
.lay-callout-cta{position:relative;border-radius:6px;border:1px solid var(--site-border);background:linear-gradient(135deg,color-mix(in srgb,var(--site-main) 12%,var(--site-raised)),var(--site-raised));box-shadow:8px 8px 0 var(--g-deep)}

/* ---------- guide rows: primed boards with a piece-style 3D edge ---------- */
.lay-brow{border-radius:4px;border-color:var(--site-border);background:var(--site-raised);box-shadow:6px 6px 0 var(--g-deep);transition:transform .18s,box-shadow .18s,border-color .18s}
.lay-brow:hover{border-color:var(--site-main);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--g-3d)}
.lay-blist li:nth-child(2) .lay-brow:hover,.lay-blist>.lay-brow:nth-child(2):hover{border-color:var(--site-hi);box-shadow:8px 8px 0 var(--g-sky3d)}
.lay-brow b{font-weight:800;letter-spacing:-.01em}
.lay-brow .lay-guide-card__img{border-right:1px solid var(--site-border)}
.lay-tile__meta{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.lay-blist{gap:1.4rem}

/* ---------- FAQ: answer boards ---------- */
.lay-answers__grid{gap:1.2rem}
.lay-answers__grid>div{border-radius:4px;background:var(--site-raised);border:1px solid var(--site-border);box-shadow:5px 5px 0 var(--g-deep)}
.lay-answers__grid>div:nth-child(odd){border-top:4px solid var(--site-main)}
.lay-answers__grid>div:nth-child(even){border-top:4px solid var(--site-hi)}
.lay-faq-list h3{font-size:1rem;line-height:1.3}
.lay-faq-list h3::before{display:none}
details{border-radius:4px}

/* ---------- article ---------- */
.lay-post__head--split{padding-bottom:1.4rem;border-bottom:1px solid var(--site-border);margin-bottom:1.6rem}
.lay-post__head h1{font-weight:800;text-shadow:1px 1px 0 var(--g-3d),2px 2px 0 var(--g-3d),3px 3px 0 var(--g-3d2),4px 4px 0 var(--g-3d2)}
.lay-post__kicker{color:var(--site-base);background:var(--site-main)!important;padding:.32rem .6rem .28rem;border-radius:2px;transform:rotate(-2deg);box-shadow:2px 2px 0 var(--g-3d)}
.lay-post__meta{text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:700;margin-top:.4rem}
.lay-post__cover img{border:1px solid var(--site-border);border-radius:4px;box-shadow:7px 7px 0 var(--g-deep)}
.lay-post .lay-summary::first-letter{font-weight:800;color:var(--site-main);text-shadow:2px 2px 0 var(--g-3d),3px 3px 0 var(--g-3d2)}
.lay-post .lay-toc-box--post{border-radius:4px;border:1px solid var(--site-border);border-left:6px solid var(--site-main);background:var(--g-deep);box-shadow:5px 5px 0 color-mix(in srgb,#000 35%,transparent)}
/* contents chips: stickers slapped in a row */
.lay-toc-box--chips a{border-radius:3px;background:var(--site-raised);border-color:var(--site-border);color:var(--site-ink);font-weight:600;transition:border-color .15s,color .15s}
.lay-toc-box--chips a::before{content:'';display:inline-block;width:.5em;height:.5em;margin-right:.45em;border-radius:50%;background:var(--site-main);vertical-align:.05em}
.lay-toc-box--chips li:nth-child(even) a::before{background:var(--site-hi)}
.lay-toc-box--chips a:hover{border-color:var(--site-main);color:var(--site-ink)}
.lay-post blockquote{margin:1.6em 0;padding:.8em 1.2em;border-left:6px solid var(--site-hi);background:var(--g-deep);font-family:var(--site-heading);font-size:1.12rem;border-radius:0 4px 4px 0}
.lay-post .lay-section>h2{font-size:clamp(1.3rem,2.8vw,1.65rem)}

/* ---------- footer: the pavement at the foot of the wall ---------- */
.lay-colophon{position:relative;margin-top:4rem;padding-top:2.6rem;background:
  repeating-linear-gradient(90deg,transparent 0 119px,color-mix(in srgb,#000 30%,transparent) 119px 121px),
  linear-gradient(180deg,color-mix(in srgb,var(--site-raised) 60%,#000 10%),var(--g-deep));
  color:var(--site-dim);border-top:6px solid color-mix(in srgb,var(--site-dim) 35%,var(--site-raised))}
.lay-colophon::before{content:'';position:absolute;left:0;right:0;top:-6px;height:34px;background:url(/assets/img/d-drips.svg) 140px 0/300px 34px repeat-x;opacity:.8;pointer-events:none}
.lay-colophon p{color:var(--site-dim);opacity:1}
.lay-colophon a{color:var(--site-ink);opacity:1;text-decoration-color:color-mix(in srgb,var(--site-main) 60%,transparent);text-decoration-thickness:2px}
.lay-colophon a:hover{color:var(--site-main)}

@media (max-width:640px){
  .lay-header-bar{margin-bottom:30px}
  .lay-headline h1{text-shadow:1px 1px 0 var(--g-3d),2px 2px 0 var(--g-3d),3px 3px 0 var(--g-3d2)}
  .lay-brow:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lay-brow,.lay-action-link,.lay-locale summary{transition:none}
  .lay-brow:hover,.lay-action-link:hover{transform:none}
}