/* =========================================================================
   Unusual Ventures — Design Tokens
   Colors, type, spacing, radii, shadows.
   Drop-in: <link rel="stylesheet" href="colors_and_type.css">

   Brand basis (confirmed by Unusual Ventures, May 2026):
     · unusual blue   #1E1EF6  — the signature electric blue
     · dark blue      #001563  — the authoritative deep navy
     · accent 1       #A2958D  — warm taupe
     · accent 2       #E9E7E3  — paper cream (default surface)
     · accent 3       #D5E3FF  — light blue, soft surfaces
     · Helvetica Neue — the type system. Platform-safe and the standard.
   ========================================================================= */

:root {
  /* ---------- COLOR ---------- */
  /* Foundation — paper cream + ink black, the everyday surfaces. */
  --uv-paper:      #E9E7E3;   /* DEFAULT page surface — brand accent 2 (cream) */
  --uv-paper-2:    #DEDBD4;   /* slightly deeper cream for sub-surfaces */
  --uv-bone:       #F2F0EC;   /* lifted surface */
  --uv-white:      #FFFFFF;   /* pure white — chart canvas, photo crops */
  --uv-ink:        #0A0A0A;   /* primary text */
  --uv-ink-soft:   #2A2A2A;   /* secondary text */
  --uv-ink-muted:  #6B6868;   /* tertiary / footer / page numbers */
  --uv-line:       #C8C5BE;   /* hairline on cream */

  /* Inverse — dark mode + section-divider slides. Built on the dark navy. */
  --uv-ink-bg:     #001563;   /* PRIMARY dark surface — brand dark blue */
  --uv-ink-bg-2:   #000B3A;   /* deeper navy */
  --uv-ink-line:   #1A2A78;   /* hairline on navy */
  --uv-ink-fg:     #E9E7E3;   /* paper text on navy */
  --uv-ink-fg-muted: #8E9BC4; /* muted text on navy */

  /* Brand colors — the signature pair + supporting accents. */
  --uv-blue:        #1E1EF6;  /* SIGNATURE electric blue — primary brand */
  --uv-blue-deep:   #001563;  /* deep navy — authoritative companion */
  --uv-blue-soft:   #D5E3FF;  /* light blue — soft surfaces / fills */
  --uv-taupe:       #A2958D;  /* warm taupe — neutral accent / supporting */
  --uv-taupe-soft:  #C8BFB7;  /* taupe tint */

  /* Semantic — mapped onto the brand */
  --uv-success:    #1E7A4F;
  --uv-warn:       #B47A1F;
  --uv-error:      #C8331E;
  --uv-info:       #1E1EF6;   /* electric blue carries "info" */

  /* ---------- TYPE ---------- */
  /* Helvetica Neue is the type system. Compatible across platforms. */
  --uv-sans:      'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --uv-display:   'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --uv-mono:      'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace;

  /* Helvetica Neue weights — assumed available:
       100 UltraLight, 200 Thin, 300 Light, 400 Regular, 500 Medium, 700 Bold, 900 Black
     Display titles ride on 200 Thin or 300 Light at very large sizes
     for the elegant editorial feel; body sits at 400/500. */

  /* Type scale — calibrated for slide work (1920×1080). */
  --uv-fs-eyebrow:   12px;
  --uv-fs-meta:      13px;
  --uv-fs-body-sm:   14px;
  --uv-fs-body:      16px;
  --uv-fs-body-lg:   18px;
  --uv-fs-h6:        20px;
  --uv-fs-h5:        24px;
  --uv-fs-h4:        32px;
  --uv-fs-h3:        44px;
  --uv-fs-h2:        64px;
  --uv-fs-h1:        96px;
  --uv-fs-display:   144px;

  /* Line height */
  --uv-lh-tight:    0.92;
  --uv-lh-display:  1.00;
  --uv-lh-heading:  1.06;
  --uv-lh-body:     1.5;
  --uv-lh-loose:    1.65;

  /* Letter-spacing — Helvetica reads better with slightly negative tracking
     at display sizes; heavily tracked uppercase for labels. */
  --uv-ls-display:  -0.035em;
  --uv-ls-heading:  -0.022em;
  --uv-ls-body:     -0.005em;
  --uv-ls-label:    0.16em;
  --uv-ls-eyebrow:  0.22em;

  /* Weights */
  --uv-w-thin:    200;
  --uv-w-light:   300;
  --uv-w-regular: 400;
  --uv-w-medium:  500;
  --uv-w-bold:    700;
  --uv-w-black:   900;

  /* ---------- SPACING (4px base) ---------- */
  --uv-1: 4px;   --uv-2: 8px;   --uv-3: 12px;  --uv-4: 16px;
  --uv-5: 20px;  --uv-6: 24px;  --uv-8: 32px;  --uv-10: 40px;
  --uv-12: 48px; --uv-16: 64px; --uv-20: 80px; --uv-24: 96px;
  --uv-32: 128px;
  --uv-slide-pad-x: 96px;
  --uv-slide-pad-y: 80px;

  /* ---------- RADII ---------- */
  --uv-r-0: 0;
  --uv-r-1: 2px;
  --uv-r-2: 4px;
  --uv-r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --uv-shadow-flat:  none;
  --uv-shadow-card:  0 1px 0 var(--uv-line), 0 2px 6px rgba(0,21,99,0.05);
  --uv-shadow-lift:  0 8px 30px rgba(0,21,99,0.10), 0 1px 2px rgba(0,21,99,0.05);

  /* ---------- MOTION ---------- */
  --uv-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --uv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --uv-dur-fast: 150ms;
  --uv-dur:      240ms;
  --uv-dur-slow: 420ms;
}

/* =========================================================================
   SEMANTIC TYPE classes — apply via class, or compose into your own.
   Display sizes use Helvetica Neue Thin/Light for the elegant editorial feel.
   ========================================================================= */

.uv-display {
  font-family: var(--uv-display);
  font-size: var(--uv-fs-display);
  line-height: var(--uv-lh-display);
  letter-spacing: var(--uv-ls-display);
  font-weight: var(--uv-w-thin);
  color: var(--uv-ink);
}

.uv-h1 {
  font-family: var(--uv-display);
  font-size: var(--uv-fs-h1);
  line-height: var(--uv-lh-display);
  letter-spacing: var(--uv-ls-display);
  font-weight: var(--uv-w-thin);
  color: var(--uv-ink);
}

.uv-h2 {
  font-family: var(--uv-display);
  font-size: var(--uv-fs-h2);
  line-height: var(--uv-lh-heading);
  letter-spacing: var(--uv-ls-display);
  font-weight: var(--uv-w-light);
  color: var(--uv-ink);
}

.uv-h3 {
  font-family: var(--uv-display);
  font-size: var(--uv-fs-h3);
  line-height: var(--uv-lh-heading);
  letter-spacing: var(--uv-ls-heading);
  font-weight: var(--uv-w-light);
  color: var(--uv-ink);
}

.uv-h4 {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-h4);
  line-height: var(--uv-lh-heading);
  letter-spacing: var(--uv-ls-heading);
  font-weight: var(--uv-w-medium);
  color: var(--uv-ink);
}

.uv-h5 {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-h5);
  line-height: 1.25;
  letter-spacing: var(--uv-ls-body);
  font-weight: var(--uv-w-medium);
  color: var(--uv-ink);
}

.uv-h6 {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-h6);
  line-height: 1.3;
  font-weight: var(--uv-w-medium);
  color: var(--uv-ink);
}

.uv-body-lg {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-body-lg);
  line-height: var(--uv-lh-body);
  font-weight: var(--uv-w-regular);
  color: var(--uv-ink-soft);
}

.uv-body {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-body);
  line-height: var(--uv-lh-body);
  font-weight: var(--uv-w-regular);
  color: var(--uv-ink-soft);
}

.uv-body-sm {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-body-sm);
  line-height: var(--uv-lh-body);
  font-weight: var(--uv-w-regular);
  color: var(--uv-ink-soft);
}

.uv-meta {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-meta);
  line-height: 1.45;
  font-weight: var(--uv-w-regular);
  color: var(--uv-ink-muted);
}

.uv-eyebrow {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-eyebrow);
  font-weight: var(--uv-w-medium);
  letter-spacing: var(--uv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--uv-ink-muted);
}

.uv-label {
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-meta);
  font-weight: var(--uv-w-medium);
  letter-spacing: var(--uv-ls-label);
  text-transform: uppercase;
  color: var(--uv-ink);
}

.uv-mono {
  font-family: var(--uv-mono);
  font-size: var(--uv-fs-body-sm);
  font-weight: var(--uv-w-regular);
  letter-spacing: 0;
  color: var(--uv-ink);
}

/* Big numeric — stat blocks. Helvetica at thin weight reads beautifully
   at very large sizes with tight tracking. */
.uv-stat {
  font-family: var(--uv-display);
  font-size: 144px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: var(--uv-w-thin);
  font-feature-settings: "lnum", "tnum";
  color: var(--uv-ink);
}

/* =========================================================================
   FOUNDATIONS for prototypes built on this system.
   ========================================================================= */

html, body {
  background: var(--uv-paper);
  color: var(--uv-ink);
  font-family: var(--uv-sans);
  font-size: var(--uv-fs-body);
  line-height: var(--uv-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--uv-blue);
  color: var(--uv-white);
}

*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--uv-paper);color:var(--uv-ink)}

/* layout: fixed left rail + content */
.toc{position:fixed;top:0;left:0;width:256px;height:100vh;overflow-y:auto;background:var(--uv-bone);border-right:1px solid var(--uv-line);padding:26px 14px 60px;z-index:50}
.toc .tt{display:block;font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:18px;line-height:1.15;letter-spacing:-.01em;color:var(--uv-ink);text-decoration:none;padding:0 10px 16px;border-bottom:1px solid var(--uv-line);margin-bottom:8px}
.toc .grp{margin:16px 0 4px}
.toc .grp.solo{margin:6px 0 0;padding-left:10px;color:var(--uv-blue)}
.toc .grp a{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:var(--uv-w-medium);letter-spacing:.07em;text-transform:uppercase;color:var(--uv-ink-muted);text-decoration:none;padding:4px 10px}
.toc .grp a:hover{color:var(--uv-blue)}
.toc a{display:block;font-size:13.5px;color:var(--uv-ink-soft);text-decoration:none;padding:5px 10px 5px 30px;border-left:2px solid transparent;line-height:1.3}
.toc a.tocf{padding-left:10px;display:flex;align-items:center;gap:9px}
.toc a:hover{color:var(--uv-blue)}
.toc a.active{color:var(--uv-blue);border-left-color:var(--uv-blue);background:#fff;font-weight:var(--uv-w-medium)}
.toc .ph{font-size:15px;color:var(--uv-blue);flex:none}
.content{margin-left:256px}
.toc-toggle{display:none;position:fixed;top:16px;left:16px;z-index:60;width:44px;height:44px;border:1px solid var(--uv-line);background:var(--uv-paper);color:var(--uv-ink);border-radius:2px;align-items:center;justify-content:center;cursor:pointer}
.toc-toggle .ph{font-size:22px}

/* cover */
.cover{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:64px clamp(28px,6vw,96px) 72px;color:var(--uv-paper);background:var(--uv-blue) url("assets/ds/pattern-topo-blue.jpg") center/cover no-repeat}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,21,99,.20),rgba(0,21,99,0) 34%,rgba(0,21,99,0) 60%,rgba(0,21,99,.46))}
.cover>*{position:relative;z-index:1}
.cover .wm{position:absolute;top:48px;left:clamp(28px,6vw,96px)}.cover .wm img{height:30px;display:block}
.cover .eyebrow{font-weight:var(--uv-w-medium);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,231,227,.82);margin-bottom:24px}
.cover h1{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(44px,7vw,92px);line-height:1;letter-spacing:-.03em;color:#fff;margin:0}
.cover .rule{width:64px;height:2px;background:rgba(255,255,255,.55);border:0;margin:28px 0 22px}
.cover .sub{font-size:clamp(18px,2.2vw,24px);line-height:1.42;color:rgba(233,231,227,.92);max-width:34ch;margin:0}
.cover .credits{margin-top:34px}
.cover .credit{margin-top:16px}.cover .credit:first-child{margin-top:0}
.cover .credit .cname{margin:0;font-size:18px;font-weight:var(--uv-w-medium);color:#fff}
.cover .credit .crole{margin:3px 0 0;font-size:13px;letter-spacing:.01em;color:rgba(233,231,227,.82)}

/* dividers */
.divider{position:relative;min-height:540px;display:flex;align-items:center;padding:64px clamp(28px,6vw,96px);overflow:hidden}
.divider .dwrap{position:relative;z-index:1;max-width:760px;margin:0 auto;width:100%}
.divider .eyebrow{font-weight:var(--uv-w-medium);font-size:13px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.divider h2{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:-.03em;margin:0}
.divider .dsub{font-size:clamp(16px,2vw,20px);margin:20px 0 0;max-width:40ch}
.divider.blue,.divider.warm,.divider.peak{color:#fff}
.divider.blue .eyebrow{color:rgba(233,231,227,.8)}.divider.blue .dsub{color:rgba(233,231,227,.9)}
.divider.cream{color:var(--uv-ink)}.divider.cream .eyebrow{color:var(--uv-blue)}.divider.cream .dsub{color:var(--uv-ink-soft)}
.divider.warm::after,.divider.peak::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,21,99,.30),rgba(0,21,99,.62))}
.divider.warm .eyebrow,.divider.peak .eyebrow{color:rgba(233,231,227,.85)}
.divider.warm .dsub,.divider.peak .dsub{color:rgba(233,231,227,.92)}

/* reading column */
.book{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.frontmatter{padding:72px 0 0}
.chapter{padding:64px 0;border-top:1px solid var(--uv-line)}
.book:first-of-type .frontmatter{border-top:0}
.chapter h1{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:-.03em;margin:.1em 0 .6em}
h2{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(24px,3.2vw,34px);letter-spacing:-.022em;line-height:1.12;margin:1.7em 0 .5em}
h3{font-weight:var(--uv-w-medium);font-size:21px;letter-spacing:-.01em;margin:1.5em 0 .4em}
h4{font-weight:var(--uv-w-medium);font-size:17px;margin:1.3em 0 .3em}
p,li{font-size:18px;line-height:1.62;color:var(--uv-ink-soft)}li{margin:.28em 0}
ul,ol{padding-left:1.3em}li.ck{list-style:none;margin-left:-1.3em}strong{color:var(--uv-ink);font-weight:var(--uv-w-medium)}em{font-style:italic}
a{color:var(--uv-blue);text-decoration:none;border-bottom:1px solid rgba(30,30,246,.25)}a:hover{border-bottom-color:var(--uv-blue)}
hr{border:0;border-top:1px solid var(--uv-line);margin:2em 0}
code{font-family:var(--uv-mono);font-size:.86em;background:var(--uv-bone);padding:1px 5px;border-radius:2px;color:var(--uv-ink)}
pre{background:var(--uv-ink-bg);color:var(--uv-ink-fg);padding:18px 20px;border-radius:2px;overflow:auto;font-size:14px;line-height:1.5}pre code{background:none;color:inherit;padding:0}

figure.fig{margin:2.4em 0}
figure.fig svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--uv-line);padding:22px}
.fig img.figimg{display:block;width:100%;height:auto;border:1px solid var(--uv-line);border-radius:6px}
.fpwrap img.fpimg{display:block;width:100%;height:auto;border-radius:8px}
figure.fig figcaption{margin-top:10px;font-size:13px;color:var(--uv-ink-muted)}

/* author / foreword portraits (square-cornered per brand; B&W reserved for founders) */
.portrait{float:left;width:152px;height:188px;object-fit:cover;border:1px solid var(--uv-line);margin:6px 26px 14px 0}
.founder{filter:grayscale(1)}
@media(max-width:560px){.portrait{float:none;display:block;margin:0 0 18px}}

blockquote.pq{margin:1.8em 0;padding:.2em 0;border:0;background:none}
blockquote.pq p{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(24px,3.2vw,33px);line-height:1.18;letter-spacing:-.02em;color:var(--uv-blue);border-top:2px solid var(--uv-ink);padding-top:.55em;margin:0}
blockquote.pq cite{display:block;font-style:normal;font-size:14px;font-weight:var(--uv-w-medium);color:var(--uv-ink-muted);letter-spacing:.04em;margin-top:.7em}

blockquote{margin:1.4em 0;padding:16px 20px;background:var(--uv-bone);border:1px solid var(--uv-line)}
blockquote p{margin:.3em 0;font-size:16px}
blockquote.loom{background:#EEF1FF;border-color:#C9D4FF}
blockquote.loom strong{color:var(--uv-blue)}
.loomicon{color:var(--uv-blue);font-size:18px;vertical-align:-3px;margin-right:7px}

/* video: click-to-play facade — no third-party iframe (or cookie) until the reader asks */
figure.loomvid{margin:2.4em 0}
figure.loomvid .lvplay{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:16/9;padding:0;font:inherit;cursor:pointer;color:var(--uv-blue);background:#EEF1FF center/cover no-repeat;border:1px solid #C9D4FF;transition:border-color .18s ease}
figure.loomvid .lvplay:hover{border-color:var(--uv-blue)}
figure.loomvid.hasposter .lvplay{border-color:var(--uv-line);color:#fff}
figure.loomvid.hasposter .lvplay::before{content:"";position:absolute;inset:0;background:rgba(0,21,99,.44)}
figure.loomvid .lvbtn,figure.loomvid .lvmeta{position:relative;z-index:1}
figure.loomvid .lvbtn .ph{font-size:64px;display:block;transition:transform .18s ease}
figure.loomvid .lvplay:hover .lvbtn .ph{transform:scale(1.08)}
figure.loomvid .lvmeta{font-size:12px;font-weight:var(--uv-w-medium);letter-spacing:.09em;text-transform:uppercase}
figure.loomvid iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--uv-line)}
figure.loomvid figcaption{margin-top:10px;font-size:14px;color:var(--uv-ink-muted)}
figure.loomvid figcaption p{margin:0;font-size:14px;color:var(--uv-ink-muted)}
figure.loomvid figcaption strong{color:var(--uv-ink-soft)}
.lvlink{display:inline-block;margin-top:5px;font-size:13px}

/* founder-quote callout (flat hairline card, per brand — no colored left border) */
blockquote.fquote{background:#fff;border:1px solid var(--uv-line);padding:20px 24px}
aside.field{margin:2.2em 0;padding:22px 26px 20px;background:var(--uv-paper);border-left:4px solid var(--uv-blue);border-radius:0 8px 8px 0}
aside.field .fk{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--uv-blue);font-weight:600;margin-bottom:8px}
aside.field blockquote{margin:0;padding:0;border:0;background:none}aside.field blockquote p{font-size:17.5px;line-height:1.6;color:var(--uv-ink)}
aside.field cite{display:block;margin-top:10px;font-size:13px;color:var(--uv-ink-muted);font-style:normal}
blockquote.fquote p{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:21px;line-height:1.3;letter-spacing:-.015em;color:var(--uv-ink);margin:0}
blockquote.fquote cite{display:block;font-style:normal;font-size:13px;font-weight:var(--uv-w-medium);color:var(--uv-ink-muted);margin-top:12px;letter-spacing:.01em}
.fsrc{color:var(--uv-ink-muted);border:0;font-weight:400}.fsrc:hover{color:var(--uv-blue)}
 .fco{color:inherit;border:0}.fco:hover{color:var(--uv-blue)}

/* frontispiece marquee map */
.frontispiece{background:var(--uv-paper);padding:60px clamp(20px,5vw,48px);border-bottom:1px solid var(--uv-line)}
.frontispiece .fpwrap{max-width:1000px;margin:0 auto}
.frontispiece svg{display:block;width:100%;height:auto}
.frontispiece .fpcap{margin:18px 0 0;font-size:14px;color:var(--uv-ink-muted);max-width:64ch}

table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px}
th{background:var(--uv-blue-soft);color:var(--uv-blue-deep);text-align:left;font-weight:var(--uv-w-medium);letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;padding:10px 12px;border-bottom:2px solid var(--uv-blue-deep)}
td{padding:10px 12px;border-bottom:1px solid var(--uv-line);color:var(--uv-ink-soft);vertical-align:top}
tr:nth-child(even) td{background:var(--uv-bone)}

.colophon{max-width:760px;margin:0 auto;padding:48px clamp(20px,5vw,40px) 80px;border-top:1px solid var(--uv-line);color:var(--uv-ink-muted);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.colophon img{height:22px}

@media(max-width:1100px){
 .toc{transform:translateX(-100%);transition:transform .24s ease;box-shadow:0 0 40px rgba(0,0,0,.18)}
 body.toc-open .toc{transform:none}
 .content{margin-left:0}.toc-toggle{display:flex}
}
@media print{
 .toc,.toc-toggle{display:none}.content{margin-left:0}
 body{background:#fff}.cover{min-height:auto;height:980px}
 .divider{min-height:auto;height:520px;page-break-before:always}
 .chapter{page-break-before:always;border-top:0}a{color:var(--uv-ink);border:0}
 /* PDF can't hold video: collapse the player to a poster strip and print the URL */
 figure.loomvid{page-break-inside:avoid}
 figure.loomvid .lvplay,figure.loomvid iframe{aspect-ratio:auto;height:132px}
 figure.loomvid .lvbtn .ph{font-size:34px}
 .lvlink::after{content:" — " attr(href);color:var(--uv-ink-muted);font-size:12px}
}

/* interactive diagnostic — one-question stepper */
.diag-intro{font-size:18px}
.diag{margin:1.6em 0;border:1px solid var(--uv-line);border-radius:3px;background:#fff;padding:22px 24px}
.diag-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.diag-dots{display:inline-flex;gap:9px}
.diag-dots i{width:9px;height:9px;border-radius:50%;background:var(--uv-line);transition:background .2s,transform .2s}
.diag-dots i.done{background:var(--uv-blue)}
.diag-dots i.current{background:var(--uv-blue);transform:scale(1.4)}
.diag-count{font-size:12px;font-weight:var(--uv-w-medium);letter-spacing:.07em;text-transform:uppercase;color:var(--uv-ink-muted)}
.diag-stage{border:0;padding:0;margin:0;min-height:172px}
.diag-step{border:0;padding:0;margin:0;display:none}
.diag-step.active{display:block;animation:diagin .28s ease}
@keyframes diagin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.diag-step legend{font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:23px;line-height:1.24;letter-spacing:-.015em;color:var(--uv-ink);padding:0;margin-bottom:6px;float:left;width:100%}
.diag-step legend em{display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-style:italic;font-weight:400;font-size:14px;color:var(--uv-ink-muted);margin-top:8px}
.diag-step label{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;margin:10px 0 0;border:1px solid var(--uv-line);border-radius:2px;cursor:pointer;font-size:16px;line-height:1.45;color:var(--uv-ink-soft);transition:border-color .14s,background .14s}
.diag-step label:hover{border-color:var(--uv-blue);background:var(--uv-blue-soft)}
.diag-step label:has(input:checked){border-color:var(--uv-blue);background:var(--uv-blue-soft)}
.diag-step input{margin:2px 0 0;accent-color:var(--uv-blue);flex:none;width:17px;height:17px}
.diag-step label b{color:var(--uv-ink);font-weight:var(--uv-w-medium)}
.diag-nav{margin-top:18px}
.diag-back,.diag-reset{font:inherit;font-size:13px;color:var(--uv-ink-muted);background:none;border:1px solid var(--uv-line);border-radius:2px;padding:7px 15px;cursor:pointer}
.diag-back:hover:not(:disabled),.diag-reset:hover{border-color:var(--uv-blue);color:var(--uv-blue)}
.diag-back:disabled{opacity:.4;cursor:default}
.diag-summary{border-top:1px solid var(--uv-line);margin-top:2px;padding-top:20px;animation:diagin .3s ease}
.diag-summary h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--uv-blue-deep);font-weight:var(--uv-w-medium)}
.diag-summary h3 .ph{font-size:19px;color:var(--uv-blue)}
.diag-summary dl{margin:0}
.diag-summary dl>div{display:grid;grid-template-columns:158px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--uv-line)}
.diag-summary dl>div:first-child{border-top:0}
.diag-summary dt{font-size:12.5px;font-weight:var(--uv-w-medium);letter-spacing:.03em;text-transform:uppercase;color:var(--uv-ink-muted);margin:0}
.diag-summary dd{margin:0;font-size:16px;color:var(--uv-ink);font-weight:var(--uv-w-medium);line-height:1.35}
.diag-summary dd[data-r="channels"]{color:var(--uv-blue-deep)}
.diag-summary dd a{color:var(--uv-blue-deep);border-bottom:1px solid rgba(30,30,246,.32)}
.diag-summary dd a:hover{border-bottom-color:var(--uv-blue-deep)}
@keyframes diagflash{0%{box-shadow:0 0 0 5px rgba(30,30,246,.22);background:rgba(30,30,246,.18)}100%{box-shadow:0 0 0 5px rgba(30,30,246,0);background:rgba(30,30,246,0)}}
.diag-summary dd.flash{border-radius:3px;animation:diagflash 1s ease-out}
.diag-summary .diag-reset{margin-top:18px}
@media(prefers-reduced-motion:reduce){.diag-step.active,.diag-summary{animation:none}.diag-summary dd.flash{animation:none}}
.diag-tablecap{font-size:14px;color:var(--uv-ink-muted);margin:1.8em 0 .4em}
.diag-table tr[data-row].hl td{background:var(--uv-blue-soft);box-shadow:inset 3px 0 0 var(--uv-blue)}
.diag-table tr[data-row].hl td:first-child{font-weight:var(--uv-w-medium);color:var(--uv-ink)}
@media(max-width:560px){.diag-summary dl>div{grid-template-columns:1fr;gap:2px}}
@media print{.diag-nav,.diag-reset{display:none}.diag-step{display:block!important;margin-bottom:14px}.diag-summary{break-inside:avoid}}
/* downloadable starter templates */
.tmpl-grid{display:grid;gap:12px;margin:1.6em 0}
.tmpl{display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid var(--uv-line);border-radius:3px;background:#fff;text-decoration:none;transition:border-color .14s,background .14s}
.tmpl:hover{border-color:var(--uv-blue);background:var(--uv-blue-soft)}
.tmpl-ext{flex:none;font-size:11px;font-weight:var(--uv-w-medium);letter-spacing:.05em;color:var(--uv-blue-deep);background:var(--uv-blue-soft);border-radius:2px;padding:7px 9px;min-width:46px;text-align:center}
.tmpl-body{flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.tmpl-t{font-size:16px;font-weight:var(--uv-w-medium);color:var(--uv-ink)}
.tmpl-d{font-size:13.5px;color:var(--uv-ink-muted);line-height:1.4}
.tmpl-dl{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--uv-w-medium);color:var(--uv-blue)}
.tmpl-dl .ph{font-size:17px}
.tmpl-eg{font-size:14px;color:var(--uv-ink-muted);margin:14px 0 0;line-height:1.5}
.tmpl-eg a{color:var(--uv-blue)}
@media(max-width:560px){.tmpl-dl span{display:none}}
@media print{.tmpl{break-inside:avoid}.tmpl-dl{display:none}}

/* per-chapter site */
.nextch{margin:0;padding:36px 0 72px;border-top:1px solid var(--uv-line)}
.nextch a,.startread{display:inline-flex;align-items:center;gap:10px;font-family:var(--uv-display);font-weight:var(--uv-w-light);font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;color:var(--uv-blue);border:0}
.nextch .nk{display:block;font-family:inherit;font-size:12px;font-weight:var(--uv-w-medium);letter-spacing:.2em;text-transform:uppercase;color:var(--uv-ink-muted);margin-bottom:8px}
.nextch a:hover,.startread:hover{text-decoration:underline;text-underline-offset:5px}
.startwrap{padding:24px 0 80px}
.colophon img,.cover .wm img{width:auto}   /* height-sized wordmarks: keep the width/height attrs from stretching them */