/* norcane brand site · brand.norcane.cloud
   Static, no build. Tokens are the same as assets/tokens.css; the rest is this page. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #F4F6FC; --paper-2: #FFFFFF; --paper-3: #E8EFF9;
  --line: #C8D6EE; --line-soft: #DBE5F4;
  --ink: #081C3F; --ink-2: #314E7C; --ink-3: #62709A;
  --blue: #0D47A1; --blue-2: #2F6BD1; --blue-tint: #DBE7FA;
  --night: #071630;
  --gold: #D9A62E; --gold-text: #916900; --gold-soft: #F1C862;
  --good: #0D814C; --warn: #BA5217; --crit: #C72E38; --none: #637092;
  --shadow: 0 24px 60px rgba(8, 28, 63, .14);
  --code-bg: #081C3F; --code-ink: #C9D4F0;
  --mark: #0D47A1;   /* small brand-coloured elements: squares, meter fills, chart points; lighter on night */
  --wm: #0D47A1;     /* the mark and the wordmark on this surface: blue on paper, white on night */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230D47A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gold-band: #D9A62E; /* cut bands in the construction diagram */
  --ghost: .18;         /* the mark's ghost under the diagram */
  --hero-line: transparent;
  --angle: -15deg;   /* rotation of the square, counter-clockwise */
  --skew: 15deg;     /* skew of bars and panels: their sides run parallel to the rotated square's sides */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #071630; --paper-2: #0A2045; --paper-3: #0F2A56;
    --line: #203F73; --line-soft: #173362;
    --ink: #EDF2FB; --ink-2: #B2C5E3; --ink-3: #758EB8;
    --blue-2: #4A83E3; --blue-tint: #13408A;
    --mark: #4A83E3; --wm: #EDF2FB; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A83E3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gold-band: #F1C862; --ghost: .4; --hero-line: #203F73;
    --gold-text: #F1C862;
    --good: #3FBF7F; --warn: #F58550; --crit: #F0555E; --none: #8794B3;
    --shadow: 0 24px 60px rgba(3, 9, 28, .55);
    --code-bg: #040F24;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #071630; --paper-2: #0A2045; --paper-3: #0F2A56;
  --line: #203F73; --line-soft: #173362;
  --ink: #EDF2FB; --ink-2: #B2C5E3; --ink-3: #758EB8;
  --blue-2: #4A83E3; --blue-tint: #13408A;
  --mark: #4A83E3; --wm: #EDF2FB; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A83E3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gold-band: #F1C862; --ghost: .4; --hero-line: #203F73;
  --gold-text: #F1C862;
  --good: #3FBF7F; --warn: #F58550; --crit: #F0555E; --none: #8794B3;
  --shadow: 0 24px 60px rgba(3, 9, 28, .55);
  --code-bg: #040F24;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55;
  padding-block: 0 80px; padding-inline: clamp(16px, 4vw, 56px);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; }
a { color: var(--blue-2); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--gold); color: #071630; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 16px; }

/* The one motif: a square rotated 15°. Every use below derives from this utility. */
/* Never below 10 px: smaller than that the 15° reads as misregistration, not as a choice. */
.sq { display: inline-block; width: 10px; height: 10px; background: var(--mark); transform: rotate(var(--angle)); flex: none; }
.sq.gold { background: var(--gold); }
.sq.hollow { background: transparent; border: 1.5px solid currentColor; }

/* Header + nav */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px 16px; border-bottom: 1px solid var(--line-soft); }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand svg { width: 30px; height: 30px; color: var(--wm); }
.brand .wm { font-weight: 600; font-stretch: 118%; letter-spacing: .3em; font-size: 15px; color: var(--wm); }
nav.chapters { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
/* Theme switch: floats bottom right so the theme can be changed from anywhere on the page.
   A straight frame (it is a control), three options with the square as their icon: hollow for
   light, filled for dark, half for system. The chosen option is filled with the mark colour. */
.theme { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: flex; gap: 2px; padding: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.theme button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.theme button:hover { color: var(--ink); background: var(--paper-3); }
.theme button[aria-pressed="true"] { background: var(--mark); color: #fff; }
.theme button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme i { width: 10px; height: 10px; border: 1.5px solid currentColor; transform: rotate(var(--angle)); flex: none; box-sizing: border-box; }
.theme .i-dark { background: currentColor; }
.theme .i-system { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
@media (prefers-reduced-motion: no-preference) { .theme button { transition: background-color .15s ease, color .15s ease; } }
@media (max-width: 560px) { .theme { right: 12px; bottom: 12px; } .theme button span { display: none; } .theme button { padding: 9px; } }
@media print { .theme { display: none; } }
nav.chapters a { color: var(--ink-3); text-decoration: none; position: relative; padding-bottom: 4px; }
nav.chapters a:hover, nav.chapters a:focus-visible { color: var(--ink); }
nav.chapters a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; background: var(--mark); transform: translateX(-50%) rotate(var(--angle)) scale(0); }
nav.chapters a:hover::after { transform: translateX(-50%) rotate(var(--angle)) scale(1); }
@media (prefers-reduced-motion: no-preference) { nav.chapters a::after { transition: transform .15s ease; } }

/* Hero: the square itself, seen up close. It overflows the section so only its 15° edges show. */
.hero { position: relative; overflow: hidden; margin-top: 32px; border-radius: 22px; background: var(--night); color: #fff; min-height: 480px; display: grid; align-items: end; border: 1px solid var(--hero-line); }
.hero .big { position: absolute; right: -8%; top: -30%; width: 72%; aspect-ratio: 1/1; background: var(--blue); transform: rotate(var(--angle)); }
.hero .big::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='15' y='15' width='14' height='14' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E"); }
.hero .mark { position: absolute; right: 12%; top: 14%; width: min(36%, 340px); color: #fff; }
.hero .mark svg { width: 100%; height: auto; }
.hero .copy { position: relative; padding: 48px 40px 44px; max-width: 60%; }
.hero h1 { font-size: clamp(34px, 5.2vw, 62px); line-height: .98; font-weight: 700; font-stretch: 94%; letter-spacing: -.025em; margin-bottom: 18px; }
.hero p { color: #B2C5E3; font-size: 17px; max-width: 44ch; }
.hero .tag { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-soft); font-size: 13px; letter-spacing: .04em; margin-bottom: 22px; }
.hero .tag .sq { background: var(--gold-soft); }

/* Chapters */
.chapter { padding-block: 56px 8px; scroll-margin-top: 16px; }
.ch { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; letter-spacing: .04em; margin-bottom: 14px; }
.ch .mono { color: var(--blue-2); }
.chapter h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; font-stretch: 94%; letter-spacing: -.02em; margin-bottom: 10px; }
.lead { color: var(--ink-2); font-size: 17px; max-width: 62ch; margin-bottom: 28px; }
.note { color: var(--ink-3); font-size: 13.5px; }
h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 20px; }
.card p { color: var(--ink-2); font-size: 14.5px; }
.card .demo { display: grid; place-items: center; min-height: 120px; margin: 6px 0 14px; }

/* Mark chapter */
.construct { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.construct svg { width: 100%; height: auto; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 15px; align-items: baseline; }
.facts .k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--blue-2); }
.tile { border-radius: 14px; aspect-ratio: 4/3; display: grid; place-items: center; position: relative; border: 1px solid var(--line-soft); }
.tile svg { width: 42%; height: auto; }
.tile .cap { position: absolute; left: 14px; bottom: 11px; font-size: 12.5px; opacity: .8; }
.on-blue { background: #0D47A1; color: #fff; }
.on-paper { background: #F4F6FC; color: #0D47A1; }
.on-ink { background: #F4F6FC; color: #081C3F; }
.on-night { background: #071630; color: #EDF2FB; }
.sizes { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.sizes div { display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.sizes svg { color: var(--wm); }
.dont { display: grid; place-items: center; height: 110px; border-radius: 12px; background: var(--paper-3); position: relative; }
.dont svg { width: 44px; height: 44px; color: var(--wm); }
.dont::after { content: "✕"; position: absolute; top: 8px; right: 12px; color: var(--crit); font-weight: 700; }

/* Wordmark chapter */
.wm-big { font-weight: 600; font-stretch: 118%; letter-spacing: .32em; font-size: clamp(28px, 6vw, 64px); color: var(--wm); line-height: 1; padding: 28px 0 8px; }
.lockups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lockup { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 14px; font-size: 26px; font-weight: 600; font-stretch: 92%; letter-spacing: -.01em; }
.lockup svg { width: 30px; height: 30px; color: var(--wm); flex: none; }
.lockup small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; font-stretch: 100%; }
.widths { display: grid; gap: 4px; font-weight: 600; font-size: 26px; letter-spacing: .12em; }
.widths span { color: var(--ink-3); font-size: 12px; font-weight: 400; letter-spacing: 0; font-stretch: 100%; margin-left: 12px; }

/* Angle system elements */
ul.list { list-style: none; padding: 0; margin: 0; width: 100%; }
ul.list li { padding: 7px 0 7px 18px; border-top: 1px solid var(--line-soft); position: relative; }
ul.list li:first-child { border-top: 0; }
ul.list li.hi .sq { position: absolute; left: 0; top: .95em; }
.dots { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.dots span { display: inline-flex; align-items: center; gap: 8px; }
.dots .sq { width: 10px; height: 10px; }
.divider { display: flex; align-items: center; gap: 12px; }
.divider hr { flex: 1; border: 0; border-top: 1px solid var(--line); margin: 0; }
.divider .sq { width: 10px; height: 10px; }
.meter { width: 100%; height: 12px; background: var(--paper-3); transform: skewX(var(--skew)); overflow: hidden; }
.meter b { display: block; height: 100%; width: 68%; background: var(--mark); }
.meter.gold b { background: var(--gold); width: 34%; }
.frame { width: 120px; aspect-ratio: 1/1; max-width: 100%; clip-path: polygon(2.3% 22.3%, 76.2% 2.3%, 97.7% 77.7%, 23.8% 97.7%); background: linear-gradient(160deg, #2F6BD1 0%, #0D47A1 45%, #071630 100%); position: relative; }
.frame::after { content: ""; position: absolute; left: 20%; right: 0; top: 62%; height: 3px; background: rgba(241,200,98,.9); transform: rotate(var(--angle)); transform-origin: left center; }
.loader { width: 26px; height: 26px; background: var(--mark); transform: rotate(var(--angle)); }
@media (prefers-reduced-motion: no-preference) {
  .loader { animation: spin 1.6s cubic-bezier(.6, .05, .3, 1) infinite; }
  @keyframes spin { 0% { transform: rotate(-15deg); } 100% { transform: rotate(345deg); } }
}
.tabs { display: flex; gap: 22px; font-size: 14.5px; }
.tabs span { position: relative; padding-bottom: 12px; color: var(--ink-3); }
.tabs span.on { color: var(--ink); font-weight: 600; }
.tabs span.on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; background: var(--mark); transform: translateX(-50%) rotate(var(--angle)); }
.corner { position: relative; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; width: 100%; font-size: 14px; }
.corner::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: var(--gold); transform: rotate(var(--angle)); }
.pattern { width: 100%; height: 120px; border-radius: 10px; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='15' y='15' width='14' height='14' transform='rotate(-15 22 22)' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E"); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn.primary { background: var(--gold); color: #071630; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.chart svg { width: 100%; height: 90px; display: block; }

/* Colour */
.sw { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--paper-2); }
.sw .chip { height: 78px; position: relative; }
.sw .chip i { position: absolute; right: 12px; bottom: 12px; width: 12px; height: 12px; transform: rotate(var(--angle)); }
.sw .txt { padding: 10px 12px 12px; font-size: 13px; }
.sw .txt b { display: block; font-weight: 600; font-size: 14px; }
.sw .txt code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }
.sw .txt .role { display: block; color: var(--ink-2); margin-top: 3px; }
.ratio { display: flex; height: 28px; border-radius: 8px; overflow: hidden; margin: 22px 0 6px; }
.ratio div { display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.pill .sq { width: 10px; height: 10px; background: currentColor; }
.pill.good { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pill.crit { color: var(--crit); background: color-mix(in srgb, var(--crit) 16%, transparent); }
.pill.none { color: var(--none); background: color-mix(in srgb, var(--none) 16%, transparent); }
.pill.none .sq { background: transparent; border: 1.5px solid currentColor; }

/* Type */
.spec { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 24px 26px; }
.spec .d1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; font-stretch: 94%; letter-spacing: -.025em; line-height: 1.02; margin-bottom: 14px; }
.spec .body { color: var(--ink-2); max-width: 58ch; margin-bottom: 18px; }
.scale { display: grid; grid-template-columns: 90px 1fr; gap: 6px 14px; font-size: 14px; align-items: baseline; }
.scale .k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }
.nums { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.nums small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; }

/* Applications */
.app { background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; display: grid; gap: 12px; align-content: start; }
.app .cap { font-size: 12.5px; color: var(--ink-3); }
.avatar { width: 130px; height: 130px; background: #0D47A1; border-radius: 50%; display: grid; place-items: center; flex: none; }
.avatar svg { width: 62%; height: 62%; color: #fff; }
.banner { position: relative; overflow: hidden; border-radius: 10px; background: var(--night); color: #fff; padding: 26px 24px; min-height: 150px; }
.banner .bigsq { position: absolute; right: -14%; top: -60%; width: 60%; aspect-ratio: 1/1; background: #0D47A1; transform: rotate(var(--angle)); }
.banner .lk { position: relative; display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 600; font-stretch: 92%; }
.banner .lk svg { width: 30px; height: 30px; color: #fff; }
.banner p { position: relative; color: #B2C5E3; font-size: 14px; margin-top: 8px; max-width: 34ch; }
.term { margin: 0; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 14px 16px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.65; overflow-x: auto; }
.term .p { color: #758EB8; } .term .b { color: #4A83E3; } .term .g { color: #F1C862; } .term .ok { color: #3FBF7F; }
.social { aspect-ratio: 1200/630; border-radius: 10px; background: #0D47A1; color: #fff; position: relative; overflow: hidden; padding: 6% 7%; display: grid; align-content: space-between; }
.social .bigsq { position: absolute; right: -18%; bottom: -55%; width: 70%; aspect-ratio: 1/1; background: #071630; transform: rotate(var(--angle)); }
.social .wm { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 600; font-stretch: 118%; letter-spacing: .3em; font-size: 12px; }
.social .wm svg { width: 20px; height: 20px; }
.social h4 { position: relative; margin: 0; font-size: clamp(20px, 3vw, 34px); font-weight: 700; font-stretch: 94%; letter-spacing: -.02em; line-height: 1.05; max-width: 70%; }
.social .foot { position: relative; font-size: 12px; color: #B2C5E3; }
.webhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--paper); }
.webhead .lk { display: flex; align-items: center; gap: 10px; font-weight: 600; font-stretch: 92%; font-size: 17px; }
.webhead .lk svg { width: 20px; height: 20px; color: var(--ink); }
.webhead nav { display: flex; gap: 16px; font-size: 13.5px; color: var(--ink-3); }
.webhead nav .on { color: var(--ink); font-weight: 600; position: relative; }
.webhead nav .on { padding-bottom: 16px; margin-bottom: -16px; }
.webhead nav .on::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 10px; height: 10px; background: var(--mark); transform: translateX(-50%) rotate(var(--angle)); }
.slide { aspect-ratio: 16/9; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line-soft); position: relative; overflow: hidden; padding: 5% 6%; display: grid; align-content: end; }
.slide .bigsq { position: absolute; left: -22%; top: -45%; width: 55%; aspect-ratio: 1/1; background: var(--blue-tint); transform: rotate(var(--angle)); }
.slide h4 { position: relative; margin: 0 0 6px; font-size: clamp(18px, 2.6vw, 30px); font-weight: 700; font-stretch: 94%; letter-spacing: -.02em; line-height: 1.05; }
.slide p { position: relative; font-size: 13px; color: var(--ink-2); }
.slide .n { position: absolute; right: 6%; bottom: 6%; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.slide .n .sq { width: 10px; height: 10px; }

/* Voice, downloads, tokens */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.rule { padding-left: 16px; position: relative; }
.rule::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--mark); transform: rotate(var(--angle)); }
.rule b { display: block; font-weight: 600; margin-bottom: 2px; }
.rule p { color: var(--ink-2); font-size: 14.5px; }
.downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dl { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 12px; color: inherit; text-decoration: none; }
.dl:hover { border-color: var(--blue-2); }
.dl .pv { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; }
.dl .pv svg { width: 60%; height: 60%; }
.dl b { display: block; font-weight: 600; font-size: 14.5px; }
.dl span { font-size: 12.5px; color: var(--ink-3); }
pre.tokens { margin: 0; background: var(--code-bg); color: var(--code-ink); border-radius: 12px; padding: 16px 18px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; overflow-x: auto; }
footer.site { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }
footer .brand .wm { font-size: 12px; }

@media (max-width: 900px) {
  .hero { min-height: 420px; }
  .hero .copy { max-width: 100%; padding: 200px 24px 32px; }
  .hero .big { right: -30%; top: -22%; width: 110%; }
  .hero .mark { right: 8%; top: 8%; width: 40%; }
  .g3, .g4, .lockups, .rules, .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .construct { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g2, .g3, .g4, .lockups, .rules, .downloads { grid-template-columns: 1fr; }
  .hero .copy { padding-top: 170px; }
}

/* Components chapter: native controls styled by the same square. Base rules mirror assets/tokens.css. */
.ui .demo { justify-items: stretch; align-content: start; }
.fields { display: grid; gap: 12px; width: 100%; }
.field { display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.field > span { font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 14.5px; line-height: 1.4;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--blue-2); }
.field.invalid input { border-color: var(--crit); }
.field small { color: var(--crit); font-size: 12.5px; }
.field select { appearance: none; padding-right: 34px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 12px center; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
/* Off: an upright, hollow square. On: it turns 15° and fills. State is readable without colour. */
.check input { appearance: none; margin: 0; width: 14px; height: 14px; border: 1.5px solid var(--ink-3); background: transparent; flex: none; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--mark); border-color: var(--mark); transform: rotate(var(--angle)); }
/* Radio: the frame stays upright and turns blue; the selection inside is the rotated square. */
.check input[type="radio"]:checked { background: transparent; border-color: var(--mark); transform: none; }
.check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; background: var(--mark); transform: rotate(var(--angle)); }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .check input { transition: transform .18s ease, background-color .18s ease, border-color .18s ease; } }
.toggle { display: flex; align-items: center; gap: 12px; font-size: 14.5px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* The track stays straight so it reads as a switch. Off: the knob is an upright grey square. On: it slides across and turns 15°. */
.toggle .track { position: relative; width: 40px; height: 20px; border-radius: 4px; background: var(--paper-3); border: 1px solid var(--line); flex: none; }
.toggle .track i { position: absolute; left: 3px; top: 0; bottom: 0; margin: auto 0; width: 12px; height: 12px; background: var(--ink-3); transform: rotate(0deg); }
.toggle input:checked + .track { background: var(--mark); border-color: var(--mark); }
.toggle input:checked + .track i { left: 23px; background: #fff; transform: rotate(var(--angle)); }
.toggle input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .toggle .track i { transition: left .18s ease, transform .18s ease, background-color .18s ease; } .toggle .track { transition: background-color .18s ease, border-color .18s ease; } }
.combo { position: relative; }
.combo ul { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); box-shadow: var(--shadow); font-size: 14px; color: var(--ink); }
.combo li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.combo li[aria-selected="true"] { background: var(--blue-tint); }
.combo li .sq { width: 10px; height: 10px; }
.combo li .sq.hollow { color: var(--ink-3); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.danger { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12.5px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.hi td:first-child { position: relative; padding-left: 20px; }
.tbl tr.hi td:first-child::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--gold); transform: rotate(var(--angle)); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--paper-2); font-size: 14px; }
.notice .sq { margin-top: 5px; width: 10px; height: 10px; }
.notice b { display: block; font-weight: 600; }
.notice span { color: var(--ink-2); font-size: 13.5px; }
.notice.error { border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.notice.error .sq { background: var(--crit); }
.dlg { width: 100%; padding: 18px 20px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dlg h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; font-stretch: 94%; letter-spacing: -.01em; }
.dlg p { font-size: 14px; margin-bottom: 14px; }
/* Tooltip: a parallelogram with the brand skew, no pointer. It sits tight under the trigger, aligned to its left edge. */
.tipwrap { position: relative; display: inline-block; padding-bottom: 44px; }
.tip { position: absolute; left: 4px; top: calc(100% - 36px); background: var(--ink); color: var(--paper); font-size: 12.5px; padding: 6px 12px; white-space: nowrap; transform: skewX(var(--skew)); }
.tip > span { display: block; transform: skewX(calc(-1 * var(--skew))); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.tag.on { border-color: var(--mark); color: var(--blue-2); }
.tag .sq { width: 10px; height: 10px; }