@font-face {
  font-family: 'CoolSymbol Math';
  src: url('../fonts/coolsymbol-math.woff2?v=20260802-live-copy') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-024F, U+02B0-052F, U+1D00-1FFF, U+2000-2BFF, U+3000-33FF, U+1D100-1D7FF, U+1F000-1FBFF;
}

@font-face {
  font-family: 'CoolSymbol Symbols';
  src: url('../fonts/coolsymbol-symbols-basic.woff2?v=20260802-live-copy') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+02B0-052F, U+1D00-1FFF, U+2000-2BFF, U+3000-33FF, U+1D100-1D7FF, U+1F000-1FBFF;
}

@font-face {
  font-family: 'CoolSymbol Symbols 2';
  src: url('../fonts/coolsymbol-symbols.woff2?v=20260802-live-copy') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-024F, U+02B0-052F, U+1D00-1FFF, U+2000-2BFF, U+3000-33FF, U+1D100-1D7FF, U+1F000-1FBFF;
}

:root {
  --ink: #171426;
  --muted: #69657a;
  --paper: #fffdf9;
  --wash: #f7f4ee;
  --line: #e8e2db;
  --violet: #5b3df5;
  --violet-dark: #3d24c9;
  --violet-soft: #eeeaff;
  --coral: #ff6b5e;
  --yellow: #ffd84d;
  --mint: #8de5cc;
  --navy: #21194c;
  --display: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow: 0 18px 50px rgba(43, 31, 96, .11);
  --radius: 18px;
  --chip-radius: 10px;
  --container: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open, body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
/* Display headings run to 3rem+ on a 347px phone container, where a single unbreakable
   token is enough to push the whole document wider than the viewport — "CoolSymbol.now"
   alone measures 406px in the About hero. This only takes effect when a word genuinely
   cannot fit, so ordinary headings wrap exactly as before. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.unicode-glyph.text-glyph { font-family: 'CoolSymbol Math', 'CoolSymbol Symbols 2', 'CoolSymbol Symbols', 'Apple Symbols', 'Segoe UI Symbol', sans-serif; }
.unicode-glyph.emoji-glyph { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'CoolSymbol Math', 'CoolSymbol Symbols 2', 'CoolSymbol Symbols', sans-serif; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.container.narrow { width: min(calc(100% - 40px), 930px); }
.reading-width { max-width: 800px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 9999; background: var(--ink); color: white; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 14px; }
.section { padding: 96px 0; }
.section-heading { max-width: 700px; margin-bottom: 38px; }
.section-heading.split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-heading h2 { margin-bottom: 12px; font: 700 clamp(2.2rem, 4vw, 4rem)/1.02 var(--display); letter-spacing: -.045em; }
.section-heading p { color: var(--muted); max-width: 590px; margin-bottom: 0; }
.center { text-align: center; margin-top: 40px; }
.home-paths { padding: 80px 0; background: var(--paper); border-top: 1px solid var(--line); }
.home-paths ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-paths li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
.home-paths li > span { color: var(--violet); font-size: .65rem; font-weight: 900; }
.home-paths h3 { margin-bottom: 7px; font: 750 1.15rem var(--display); }
.home-paths p { margin: 0; color: var(--muted); font-size: .76rem; }
.home-paths a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 0 22px; border-radius: var(--chip-radius); font-weight: 800; border: 1px solid transparent; }
.button-primary { background: var(--violet); color: white; }
.button-outline { border-color: var(--line); background: white; }
.button-light { background: white; color: var(--navy); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; height: 72px; background: rgba(255,253,249,.92); border-bottom: 1px solid rgba(232,226,219,.9); backdrop-filter: blur(18px); }
.nav-row { height: 72px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.18rem; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.brand > span:last-child span { color: var(--violet); }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--violet); color: white; font-size: 1.1rem; transform: rotate(-7deg); box-shadow: 4px 4px 0 var(--yellow); }
.desktop-nav { display: flex; align-items: center; gap: 5px; flex: 1; }
.desktop-nav > a, .nav-trigger { padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.desktop-nav > a:hover, .nav-trigger:hover { background: var(--violet-soft); color: var(--violet-dark); }
.nav-dropdown { position: relative; }
.mega-menu { position: absolute; top: calc(100% + 13px); left: -145px; width: 780px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 20px; opacity: 0; visibility: hidden; transform: translateY(-7px); transition: .18s ease; }
.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-group > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.mega-group a { display: flex; align-items: center; gap: 9px; padding: 5px 0; color: #3e394f; font-size: .79rem; }
.mega-group a:hover { color: var(--violet); }
.mega-group b { width: 22px; color: var(--violet); font-size: 1rem; text-align: center; }
.mega-foot { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.mega-foot a { display: flex; justify-content: space-between; color: var(--violet); font-size: .84rem; font-weight: 800; }
.header-search { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 9px 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--muted); font-size: .82rem; cursor: pointer; }
.header-search-icon { font-size: 1rem; line-height: 1; }
kbd { padding: 2px 7px; border: 1px solid #ded8d1; border-radius: 6px; background: var(--wash); color: var(--muted); font-size: .68rem; box-shadow: 0 1px 0 white inset; }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; }
.menu-button > span:not(.sr-only) { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }
.mobile-menu { display: none; position: fixed; inset: 72px 0 auto; background: white; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.mobile-menu.open { display: block; }
.mobile-menu .container { padding: 14px 0 24px; }
.mobile-menu a { display: block; padding: 11px 0; font-weight: 750; border-bottom: 1px solid var(--line); }
.clipboard-fallback { position: fixed; opacity: 0; }

/* Home hero */
.home-hero { position: relative; min-height: 710px; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.home-hero::before { content: ''; position: absolute; width: 560px; height: 560px; top: -300px; left: 31%; border-radius: 50%; background: #f6e8ff; filter: blur(20px); opacity: .72; }
.hero-grid { min-height: 710px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 60px; }
.hero-copy { position: relative; z-index: 2; padding: 70px 0 80px; }
.hero-copy h1 { margin: 0 0 25px; font: 700 clamp(4rem, 7vw, 6.8rem)/.87 var(--display); letter-spacing: -.07em; }
.hero-copy h1 em { color: var(--violet); font-weight: 400; }
.hero-deck { max-width: 660px; margin-bottom: 30px; color: var(--muted); font-size: 1.14rem; line-height: 1.7; }
.hero-search-wrap { position: relative; max-width: 620px; display: flex; align-items: center; min-height: 62px; padding: 0 14px 0 20px; background: white; border: 2px solid var(--ink); border-radius: 17px; box-shadow: 7px 7px 0 var(--yellow); }
.hero-search-icon { margin-right: 13px; font-size: 1.45rem; }
.hero-search-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.hero-search-results { position: absolute; z-index: 20; top: calc(100% + 12px); left: 0; right: 0; max-height: 330px; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.hero-search-results a, .hero-search-results button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; cursor: pointer; }
.hero-search-results b { min-width: 55px; font-size: 1.25rem; color: var(--violet); }
.hero-search-results small { display: block; color: var(--muted); }
.quick-links { max-width: 620px; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: .78rem; }
.quick-links a { color: var(--ink); font-weight: 800; }
.hero-art { position: relative; z-index: 1; min-height: 610px; display: grid; place-items: center; }
.symbol-cloud { position: relative; width: 520px; height: 520px; border: 1px dashed #d9d0f8; border-radius: 50%; background: radial-gradient(circle at 50% 50%, white 0 31%, transparent 32%), radial-gradient(circle at 50% 50%, #f5f1ff 0 62%, transparent 63%); }
.symbol-cloud::after { content: ''; position: absolute; inset: 55px; border: 1px dashed #d9d0f8; border-radius: 50%; }
.cloud-center { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cloud-center span, .cloud-center i { color: var(--muted); font-size: .72rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.cloud-center b { margin: 7px 0; font: 700 3rem var(--display); }
.cloud-symbol { position: absolute; z-index: 3; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.cloud-symbol:hover { transform: translate(-2px,-3px) rotate(0deg) !important; }
.c1 { left: 55px; top: 70px; width: 112px; height: 112px; background: var(--yellow); font-size: 3.6rem; transform: rotate(-10deg); }
.c2 { right: 38px; top: 75px; width: 120px; height: 120px; background: var(--coral); color: white; font-size: 4rem; transform: rotate(8deg); }
.c3 { right: 8px; top: 250px; width: 100px; height: 100px; background: var(--navy); color: var(--yellow); font-size: 3.4rem; transform: rotate(-6deg); }
.c4 { right: 96px; bottom: 24px; width: 120px; height: 94px; background: var(--mint); font-size: 3.6rem; transform: rotate(7deg); }
.c5 { left: 55px; bottom: 37px; width: 108px; height: 108px; background: white; color: var(--violet); font-size: 3.2rem; transform: rotate(-4deg); }
.c6 { left: 5px; top: 250px; width: 102px; height: 102px; background: #e7d8ff; font-size: 3.2rem; transform: rotate(7deg); }
.hero-orbit { position: absolute; color: #d9d2ff; font: 700 2rem var(--display); }
.orbit-one { left: 2%; top: 18%; transform: rotate(-15deg); }.orbit-two { left: 45%; bottom: 7%; }.orbit-three { right: 1%; top: 14%; }

/* Popular */
.section-popular { background: var(--wash); }
.text-link { color: var(--violet); font-weight: 800; white-space: nowrap; }
.popular-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.symbol-card { position: relative; min-height: 140px; padding: 15px 8px; border: 1px solid var(--line); border-radius: 16px; background: white; cursor: pointer; transition: .18s; overflow: hidden; }
.symbol-card:focus-visible { z-index: 2; border-color: var(--violet); transform: translateY(-5px); outline: 0; }
/* The lift is hover-gated for the same reason as the COPY hint: on touch, :hover
   latches after a tap and leaves the tile raised and outlined until you tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .symbol-card:hover { z-index: 2; border-color: var(--violet); transform: translateY(-5px); outline: 0; }
}
.symbol-glyph { display: block; margin: 0 0 10px; font: 2.4rem var(--sans); }
.symbol-name { display: block; color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s; }
/* Animated with transform rather than `bottom`: moving `bottom` reflows the card on
   every frame, and a popular grid is 24 cards animating at once. */
.copy-hint { position: absolute; left: 0; right: 0; bottom: 8px; color: var(--violet); font-size: .67rem; font-weight: 850; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .18s, transform .18s; pointer-events: none; }

/* Hover-reveal only where hovering is real. On a touch screen :hover latches after a
   tap, which left one tile stuck showing COPY over its own truncated name until the
   next tap elsewhere. Touch devices get the toast for feedback instead. */
@media (hover: hover) and (pointer: fine) {
  .symbol-card:hover .copy-hint, .symbol-card:focus-visible .copy-hint { opacity: 1; transform: translateY(0); }
  /* The label and the hint occupy the same line, so crossfade rather than overlap. */
  .symbol-card:hover .symbol-name, .symbol-card:focus-visible .symbol-name { opacity: 0; }
}

/* Keyboard users get the same affordance on every device, hover or not. */
.symbol-card:focus-visible .copy-hint { opacity: 1; transform: translateY(0); }
.symbol-card:focus-visible .symbol-name { opacity: 0; }

/* Touch feedback: a press that registers should look like one, immediately. */
.symbol-card:active { transform: scale(.96); transition-duration: .06s; }

@media (prefers-reduced-motion: reduce) {
  .copy-hint { transition: opacity .01ms; transform: none; }
  .symbol-card, .symbol-card:active { transform: none; }
}
.popular-rotation-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: .68rem; }
.popular-rotation-note span { color: var(--violet); font-size: 1rem; font-weight: 800; }
.copy-activity { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.15fr); gap: 36px 65px; align-items: center; margin-top: 28px; padding: 34px 38px; border: 1px solid #d9d0f8; border-radius: 18px; background: #fff; }
.copy-activity-kicker { display: block; margin-bottom: 8px; color: var(--violet); font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.copy-activity h3 { margin: 0 0 8px; font: 700 1.65rem/1.05 var(--display); letter-spacing: -.025em; }
.copy-activity-intro p { max-width: 550px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.copy-activity dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.copy-activity dl > div { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--wash); }
.copy-activity dt { color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.copy-activity dd { margin: 5px 0 3px; color: var(--ink); font: 700 clamp(1.8rem, 4vw, 2.8rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.copy-activity dl small { display: block; color: var(--muted); font-size: .56rem; line-height: 1.4; }
.copy-activity-privacy { grid-column: 1 / -1; margin: -16px 0 0; color: var(--muted); font-size: .59rem; }
.copy-activity-privacy a { color: var(--violet); font-weight: 750; }

/* Homepage copy library */
.home-copy-library { padding: 100px 0; background: white; }
.home-symbol-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-symbol-section { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.home-symbol-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 18px; }
.home-symbol-section h3 { margin: 0 0 5px; font: 700 1.45rem var(--display); }
.home-symbol-section header p { max-width: 430px; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.home-symbol-section header a { flex: 0 0 auto; color: var(--violet); font-size: .68rem; font-weight: 850; }
.home-symbol-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.home-symbol-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 58px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; overflow: hidden; }
/* A fixed, flex-centred box for the glyph. Colour emoji fonts carry a much larger
   ascent than the symbol fonts, so at an identical font-size the two families produced
   different line boxes and the emoji sat visibly higher in the tile than a maths sign.
   Centring inside a box of known height makes the position independent of font metrics. */
.home-symbol-grid button span { display: flex; align-items: center; justify-content: center; width: 100%; height: 26px; overflow: hidden; font-size: 1.2rem; line-height: 1; white-space: nowrap; }
/* Colour emoji also draw smaller than the symbol fonts at the same em size. A small
   bump matches them optically rather than numerically. */
.home-symbol-grid button span.emoji-glyph { font-size: 1.32rem; }
.home-symbol-grid button small { display: block; color: var(--muted); font-size: .48rem; line-height: 1; }

/* Studio */
.style-studio { padding: 105px 0; background: var(--navy); color: white; overflow: hidden; }
.studio-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.studio-grid h2 { margin-bottom: 20px; font: 700 clamp(2.7rem, 5vw, 4.7rem)/.97 var(--display); letter-spacing: -.05em; }
.studio-grid > div:first-child > p { color: #c7c1e3; }
.studio-input { position: relative; margin-top: 30px; padding: 12px 18px 8px; border: 1px solid #5d5488; border-radius: 14px; background: rgba(255,255,255,.07); }
.studio-input label { display: block; color: #aaa2cf; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.studio-input input { width: calc(100% - 70px); padding: 6px 0; border: 0; outline: 0; background: transparent; color: white; font-size: 1rem; }
.studio-input span { position: absolute; right: 15px; bottom: 15px; color: #aaa2cf; font-size: .66rem; }
.style-results { border-top: 1px solid #504875; }
.style-row { display: flex; align-items: center; justify-content: space-between; min-height: 102px; padding: 15px 5px; border-bottom: 1px solid #504875; }
.style-row small { display: block; margin-bottom: 5px; color: var(--mint); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.style-row b { display: block; max-width: 580px; overflow: hidden; text-overflow: ellipsis; color: white; font-size: 1.55rem; font-weight: 500; white-space: nowrap; }
.style-row i { color: var(--yellow); font-size: .8rem; font-style: normal; font-weight: 800; }

/* Category catalogue */
.category-filter { display: flex; gap: 8px; margin-bottom: 25px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.category-filter button { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--chip-radius); background: white; color: var(--muted); font-size: .72rem; font-weight: 800; cursor: pointer; }
.category-filter button.active { background: var(--ink); color: white; border-color: var(--ink); }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.category-card { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 105px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: white; transition: .18s; }
.category-card:hover { border-color: #b8acef; transform: translateY(-2px); }
.category-card[hidden] { display: none; }
.category-icons { display: flex; align-items: center; gap: 5px; }
.category-icons i { display: grid; place-items: center; width: 31px; height: 45px; margin-left: -10px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); font-size: 1.15rem; font-style: normal; }
.category-icons i:first-child { margin-left: 0; background: var(--yellow); color: var(--ink); transform: rotate(-4deg); }
.category-card b, .category-card small { display: block; }
.category-card b { margin: 0 0 4px; font-size: .9rem; font-weight: 750; }
.category-card small { color: var(--muted); font-size: .69rem; }
.category-card em { color: var(--violet); font-style: normal; }

/* Editorial home */
.editorial-tease { padding: 105px 0; background: var(--navy); color: white; }
.editorial-tease h2 { color: white; }
.editorial-intro { max-width: 470px !important; color: #c7c1e3 !important; }
.magazine-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mag-card { display: flex; min-height: 430px; flex-direction: column; background: white; color: var(--ink); border-radius: 16px; overflow: hidden; }
.mag-card img { width: 100%; height: 170px; object-fit: cover; }
.mag-copy { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.mag-copy small, .article-card small, .library-lead small { color: var(--violet); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.mag-copy h3 { margin: 8px 0 10px; font: 700 1.35rem/1.18 var(--display); }
.mag-copy p { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.mag-copy i { margin-top: auto; color: var(--violet); font-size: .75rem; font-style: normal; font-weight: 850; }
.mag-card.mag-feature { grid-column: span 2; }
.mag-feature img { height: 230px; }
.mag-feature .mag-copy h3 { font-size: 1.75rem; }
.trust-band { background: var(--yellow); border-bottom: 1px solid var(--ink); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-grid > div { padding: 30px 20px; border-right: 1px solid rgba(23,20,38,.25); text-align: center; }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid b, .trust-grid span { display: block; }
.trust-grid b { font: 700 2rem var(--display); }.trust-grid span { font-size: .7rem; font-weight: 800; text-transform: uppercase; }

/* Category detail */
.breadcrumbs { display: flex; gap: 9px; align-items: center; margin-bottom: 45px; color: var(--muted); font-size: .72rem; }
.breadcrumb-row { text-align: left; }
.breadcrumbs a:hover { color: var(--violet); }
.breadcrumbs.dark { color: #aea7d2; }.breadcrumbs.dark a { color: white; }
.category-hero { position: relative; padding: 0 0 65px; text-align: center; background: linear-gradient(180deg, #f9f6ff, var(--paper)); overflow: hidden; }
.category-hero .breadcrumbs { justify-content: flex-start; text-align: left; }
.category-hero h1 { margin-bottom: 18px; font: 700 clamp(3.2rem, 6vw, 5.6rem)/.95 var(--display); letter-spacing: -.06em; }
.category-hero h1 em { display: block; color: var(--violet); font-weight: 400; }
.category-hero > .container > p { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 1.05rem; }
.category-showcase { display: flex; justify-content: center; gap: 14px; margin-top: 35px; }
.category-showcase span { display: grid; place-items: center; width: 65px; height: 65px; border: 1px solid var(--line); border-radius: 17px; background: white; color: var(--violet); font-size: 1.9rem; box-shadow: 0 8px 20px rgba(43,31,96,.07); }
.category-showcase span:nth-child(2n) { transform: translateY(9px) rotate(3deg); background: var(--yellow); color: var(--ink); }
.collection-shell { border-top: 1px solid var(--line); background: white; }
.category-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 65px; padding-top: 60px; padding-bottom: 100px; }
.category-sidebar { align-self: start; position: sticky; top: 105px; }
.side-card { border: 1px solid var(--line); border-radius: 15px; background: white; overflow: hidden; }
.side-card > b { display: block; padding: 14px 16px; background: var(--wash); font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
.side-card a { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .73rem; line-height: 1.4; }
.side-card a:hover { color: var(--violet); background: #faf9ff; }
.side-note { margin-top: 16px; padding: 17px; border-radius: 15px; background: var(--yellow); }
.side-note > span { font-size: 1.3rem; }.side-note p { margin: 7px 0 0; font-size: .72rem; }.side-note p b { display: block; font-size: .82rem; }
.side-note.purple { background: var(--violet); color: white; }.side-note.purple a { display: block; margin-top: 10px; color: var(--yellow); font-size: .72rem; font-weight: 800; }
.content-section { padding: 75px 0; border-bottom: 1px solid var(--line); }
.content-section.first { padding-top: 0; }
.collection-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.collection-tools h2 { margin-bottom: 4px; font: 700 2rem var(--display); }.collection-tools p { margin: 0; color: var(--muted); font-size: .82rem; }
.filter-input { display: flex; align-items: center; gap: 8px; width: 250px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; }
.filter-input input { width: 100%; min-width: 0; border: 0; outline: 0; }
.category-symbol-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.category-symbol-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 105px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); cursor: pointer; transition: .16s; overflow: hidden; }
.category-symbol-grid button:hover { transform: translateY(-3px); border-color: var(--violet); }
.category-symbol-grid button[hidden] { display: none; }
/* Same fixed, flex-centred glyph box as the homepage grid, for the same reason: an
   emoji and a maths sign at one font-size produce different line boxes, so without a
   box of known height the emoji sits higher in the tile than everything around it. */
.category-symbol-grid button span { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; overflow: hidden; font-size: 2rem; line-height: 1; text-align: center; white-space: nowrap; }
.category-symbol-grid button span.emoji-glyph { font-size: 2.2rem; }
.category-symbol-grid button span.symbol-combo { font-size: 1rem; }
/* Kaomoji and text art are several real lines. Staying a flex box keeps them centred
   (the text becomes one anonymous flex item and `pre` preserves its newlines); a plain
   block would pin them to the top of the 44px box instead. They also need more room
   than a single glyph, so the height is relaxed here. */
.category-symbol-grid button span.multiline-symbol { height: auto; max-height: 62px; font-size: .7rem; line-height: 1.15; white-space: pre; }
.category-symbol-grid button small { display: block; width: 100%; overflow: hidden; color: var(--muted); font-size: .58rem; line-height: 1.2; opacity: .8; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.grid-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.grid-progress p { margin: 0 auto 0 0; color: var(--muted); font-size: .72rem; }
.grid-progress button, .grid-progress a { padding: 8px 11px; border: 1px solid var(--violet); border-radius: 8px; background: white; color: var(--violet); cursor: pointer; font-size: .65rem; font-weight: 850; }
.grid-progress button { background: var(--violet); color: white; }
.empty-filter { color: var(--muted); text-align: center; }
.prose-section { max-width: 850px; }
.section-number { margin-bottom: 8px !important; color: var(--violet) !important; font-size: .7rem !important; font-weight: 850; letter-spacing: .12em; }
.prose-section > h2, .simple-content h2 { margin-bottom: 20px; font: 700 clamp(2rem, 4vw, 3.1rem)/1.02 var(--display); letter-spacing: -.04em; }
.prose-section > p { color: var(--muted); font-size: .98rem; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 30px; }
.steps-row > div { padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
.steps-row > div > b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--violet); color: white; font-size: .7rem; }
.steps-row h3 { margin: 12px 0 5px; font-size: .9rem; }.steps-row p { margin: 0; color: var(--muted); font-size: .74rem; }
.prose-section blockquote { margin: 28px 0 0; padding: 24px 28px; border-left: 4px solid var(--yellow); background: var(--navy); color: white; font: italic 1.3rem/1.55 var(--display); }
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 30px; }
.fact-grid div { padding: 22px; border: 1px solid var(--line); border-radius: 14px; }.fact-grid span { display: block; color: var(--violet); font: 700 1.3rem var(--display); }.fact-grid b { display: block; margin: 8px 0 5px; font-size: .82rem; }.fact-grid p { margin: 0; color: var(--muted); font-size: .72rem; }
.wide-prose { max-width: none; }
.unicode-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.unicode-reference article { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; min-height: 100px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.unicode-reference button { align-self: stretch; border: 0; border-right: 1px solid var(--line); background: var(--wash); color: var(--violet); cursor: pointer; }
.unicode-reference button span { display: block; overflow: hidden; font-size: 1.65rem; text-overflow: ellipsis; white-space: nowrap; }
.unicode-reference button span.reference-combo { font-size: .78rem; }
.unicode-reference button small { display: block; margin-top: 5px; color: var(--muted); font-size: .57rem; text-transform: uppercase; }
.unicode-reference article > div { min-width: 0; padding: 14px; }
.unicode-reference .reference-name { display: block; margin: 0 0 7px; font-weight: 700; overflow: hidden; font-size: .76rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.unicode-reference code { display: block; overflow: hidden; color: var(--violet); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.unicode-reference p { margin: 5px 0 0; color: var(--muted); font-size: .63rem; }
.prose-section > h3 { margin: 34px 0 10px; font: 700 1.4rem var(--display); }
.format-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.format-breakdown > div { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.format-breakdown strong { color: var(--violet); font: 700 1.55rem var(--display); }
.format-breakdown b { display: block; margin: 7px 0 5px; font-size: .78rem; }
.format-breakdown p { margin: 0; color: var(--muted); font-size: .65rem; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 30px; }
.taxonomy-grid article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.taxonomy-grid article > span { display: flex; flex-wrap: wrap; min-height: 34px; align-items: center; gap: 5px; overflow: hidden; color: var(--violet); }
/* `flex: 0 0 auto` is deliberate — an example glyph must never be squeezed out of shape.
   The row wraps instead: three kaomoji examples measure 369px against a 311px span on a
   phone, and without the wrap the third one rendered as a cut-off half-face. */
.taxonomy-grid article > span i { flex: 0 0 auto; max-width: 100%; font-size: 1.15rem; font-style: normal; }
.taxonomy-grid h4 { margin: 9px 0 4px; font-size: .78rem; }
.taxonomy-grid p { margin: 0; color: var(--muted); font-size: .65rem; }
.inventory-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 30px; }
.inventory-insights article { padding: 17px; border-top: 3px solid var(--violet); background: var(--wash); }
.inventory-insights h4 { margin: 0 0 8px; font: 750 .84rem var(--display); }
.inventory-insights p { margin: 0; color: var(--muted); font-size: .7rem; }
.plain-summary { margin: 18px 0 28px; padding: 20px 22px; border-left: 5px solid var(--violet); border-radius: 0 12px 12px 0; background: var(--violet-soft); }
.plain-summary strong { display: block; margin-bottom: 5px; color: var(--violet-dark); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.plain-summary p { margin: 0; font-size: .92rem; }
.semantic-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 24px 0 34px; }
.semantic-fact-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.semantic-fact-grid article > span { color: var(--violet); font-size: .62rem; font-weight: 900; }
.semantic-fact-grid h3 { margin: 7px 0; font: 750 1rem var(--display); }
.semantic-fact-grid p { margin: 0; color: var(--muted); font-size: .72rem; }
.semantic-term-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 34px; padding: 0; list-style: none; }
.semantic-term-list li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); font-size: .7rem; font-weight: 750; }
.semantic-table-wrap { margin: 16px 0 34px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.semantic-table-wrap table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .72rem; }
.semantic-table-wrap th, .semantic-table-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.semantic-table-wrap thead th { background: var(--navy); color: white; }
.semantic-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.semantic-table-wrap tbody th { color: var(--violet-dark); }
.semantic-steps, .semantic-checklist { display: grid; gap: 10px; margin: 16px 0 34px; padding: 0; list-style: none; counter-reset: semantic-step; }
.semantic-steps li, .semantic-checklist li { position: relative; padding: 14px 16px 14px 48px; border: 1px solid var(--line); border-radius: 11px; background: var(--wash); font-size: .78rem; }
.semantic-steps li::before { counter-increment: semantic-step; content: counter(semantic-step); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--violet); color: white; font-size: .65rem; font-weight: 900; }
.semantic-checklist li::before { content: '✓'; position: absolute; left: 17px; top: 12px; color: var(--violet); font-size: 1.1rem; font-weight: 900; }
.semantic-guide a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(91,61,245,.3); text-underline-offset: 3px; }
.semantic-tip { margin-top: 24px; padding: 14px 16px; border-radius: 10px; background: #fff8d8; }
.use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 36px; }
.use-case-grid > div { padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.use-case-grid span { color: var(--violet); font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.use-case-grid h3 { margin: 10px 0 7px; font-size: .85rem; }
.use-case-grid p { margin: 0; color: var(--muted); font-size: .68rem; }
.example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.example-grid > div { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 17px; border-radius: 12px; background: var(--navy); color: white; }
.example-grid small { color: #bdb5df; font-size: .62rem; }
.example-grid code { min-height: 43px; overflow-wrap: anywhere; color: white; font-size: .8rem; }
.example-grid button { align-self: flex-start; padding: 7px 10px; border: 1px solid #7166a0; border-radius: 8px; background: transparent; color: var(--yellow); cursor: pointer; font-size: .62rem; font-weight: 800; }
.category-questions details { border-top: 1px solid var(--line); }
.category-questions summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; font-weight: 800; }
.category-questions summary span { color: var(--violet); }
.category-questions details > p { margin: 0 0 20px; color: var(--muted); }
.mistake-list { margin: 25px 0 0 !important; }
.mistake-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 15px 0 !important; }
.mistake-list li::before { display: none; }
.mistake-list span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); font-size: .65rem; font-weight: 900; }
.mistake-list p { margin: 3px 0 0; color: var(--muted); }
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.support-guide { display: flex; min-height: 270px; flex-direction: column; padding: 25px; border-radius: 16px; background: var(--navy); color: white; }
.support-guide small { color: var(--mint); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.support-guide h3 { margin: 13px 0 10px; font: 700 1.65rem/1.15 var(--display); }
.support-guide p { color: #c7c1e3; font-size: .75rem; }
.support-guide i { margin-top: auto; color: var(--yellow); font-size: .7rem; font-style: normal; font-weight: 850; }
.support-faqs { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.support-faqs > h3 { margin: 0; padding: 16px 18px; background: var(--wash); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.support-faqs a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 65px; padding: 11px 15px; border-top: 1px solid var(--line); }
.support-faqs a > span { color: var(--violet); }.support-faqs a > b { font-size: .7rem; line-height: 1.35; }.support-faqs a > i { color: var(--violet); font-style: normal; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.related-grid a { display: flex; min-height: 230px; flex-direction: column; padding: 24px; border-radius: 15px; background: var(--wash); border: 1px solid var(--line); }.related-grid a > span { color: var(--violet); font-size: 1.7rem; }.related-grid a > span i { color: inherit; font-size: inherit; font-style: normal; font-weight: 400; }.related-grid h3 { margin: 14px 0 8px; font: 700 1.25rem var(--display); }.related-grid p { color: var(--muted); font-size: .75rem; }.related-grid a > i { margin-top: auto; color: var(--violet); font-style: normal; font-size: .72rem; font-weight: 800; }
.home-authority { padding: 100px 0; background: white; }
.authority-intro { display: grid; grid-template-columns: .35fr 1fr 1fr; gap: 35px; align-items: start; padding-bottom: 35px; border-bottom: 1px solid var(--ink); }
.authority-intro small { color: var(--violet); font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.authority-intro h2 { margin: 0; font: 700 clamp(2.2rem, 4vw, 3.8rem)/1 var(--display); letter-spacing: -.05em; }
.authority-intro p { margin: 0; color: var(--muted); }
.authority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.authority-grid article { padding: 35px 35px 0 0; }
.authority-grid article + article { padding-left: 35px; border-left: 1px solid var(--line); }
.authority-grid span { color: var(--violet); font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.authority-grid h3 { margin: 14px 0 12px; font: 700 1.35rem var(--display); }
.authority-grid p { color: var(--muted); font-size: .82rem; }
.authority-grid a { color: var(--violet); font-size: .72rem; font-weight: 850; }
.transformer { margin-top: 35px; padding: 28px; border: 1px solid #cfc5ff; border-radius: 18px; background: var(--violet-soft); }.transformer h3 { font: 700 1.8rem var(--display); }.transformer label { display: block; font-size: .7rem; font-weight: 800; }.transformer textarea { width: 100%; margin: 7px 0 13px; padding: 14px; resize: vertical; border: 1px solid #c8bdf8; border-radius: 11px; background: white; }.transform-result { display: flex; align-items: center; gap: 15px; padding: 15px; background: white; border-radius: 11px; }.transform-result span { flex: 1; overflow-wrap: anywhere; font-size: 1.3rem; }.transform-result button { border: 0; border-radius: 9px; background: var(--violet); color: white; padding: 9px 14px; font-size: .72rem; font-weight: 800; cursor: pointer; }

/* All symbols hub */
.symbols-hero { padding: 0 0 85px; overflow: hidden; background: linear-gradient(135deg, var(--violet-soft), var(--paper)); }
.symbols-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 70px; align-items: end; }
.symbols-hero h1 { margin: 0 0 25px; font: 700 clamp(4.3rem, 8vw, 7.5rem)/.86 var(--display); letter-spacing: -.07em; }
.symbols-hero h1 em { color: var(--violet); font-weight: 400; }
.symbols-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 1.05rem; }
.symbols-hero-sample { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transform: rotate(2deg); }
.symbols-hero-sample span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #d5cdf8; border-radius: 17px; background: white; color: var(--violet); font-size: 2.2rem; }
.symbols-hero-sample span:nth-child(2n) { background: var(--yellow); color: var(--ink); }
.symbols-hub { padding: 45px 0 110px; background: white; }
.symbol-group-nav { display: flex; gap: 8px; align-items: center; padding-bottom: 38px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.symbol-group-nav span { flex: 0 0 auto; margin-right: 8px; color: var(--muted); font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.symbol-group-nav a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--chip-radius); font-size: .68rem; font-weight: 800; }
.symbols-hub-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: end; padding: 75px 0 55px; }
.symbols-hub-intro h2 { margin: 0; font: 700 clamp(2.8rem, 5vw, 4.5rem)/.96 var(--display); letter-spacing: -.05em; }
.symbols-hub-intro p { margin: 0; color: var(--muted); }
.symbols-hub-intro h3 { margin: 0 0 10px; font: 750 1.15rem var(--display); }
.symbols-hub-intro ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .76rem; }
.symbols-hub-intro a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.symbol-hub-group { padding: 55px 0 75px; border-top: 1px solid var(--ink); }
.symbol-hub-group > header { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; margin-bottom: 30px; }
.symbol-hub-group > header > div { display: flex; gap: 14px; align-items: center; }.symbol-hub-group > header span { color: var(--violet); font-size: .67rem; font-weight: 900; }
.symbol-hub-group > header h2 { margin: 0; font: 700 2.45rem var(--display); }.symbol-hub-group > header p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.symbol-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.symbol-hub-card { display: flex; min-height: 270px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.symbol-hub-icons { display: flex; gap: 5px; min-height: 42px; overflow: hidden; color: var(--violet); }.symbol-hub-icons i { font-size: 1.45rem; font-style: normal; }
.symbol-hub-card > small { margin-top: 18px; color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }.symbol-hub-card h3 { margin: 8px 0; font: 700 1.35rem var(--display); }.symbol-hub-card p { color: var(--muted); font-size: .72rem; }.symbol-hub-card > b { margin-top: auto; color: var(--violet); font-size: .68rem; }
.symbol-group-learning { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 15px 18px; border-radius: 12px; background: var(--wash); }.symbol-group-learning span { margin-right: auto; color: var(--muted); font-size: .65rem; font-weight: 850; text-transform: uppercase; }.symbol-group-learning a { color: var(--violet); font-size: .68rem; font-weight: 800; }

/* Library */
.library-hero { padding: 0 0 105px; background: var(--navy); color: white; }
.library-hero h1 { margin-bottom: 24px; font: 700 clamp(4.5rem, 10vw, 8.5rem)/.82 var(--display); letter-spacing: -.07em; }.library-hero h1 em { color: var(--yellow); font-weight: 400; }.library-hero > .container > p:last-child { max-width: 650px; color: #c7c1e3; font-size: 1.1rem; }
.library-page { padding: 0 0 110px; background: var(--paper); }
.library-lead { display: grid; grid-template-columns: 1.05fr .95fr; position: relative; top: -52px; min-height: 480px; background: white; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.library-lead img { width: 100%; height: 100%; object-fit: cover; }.library-lead > span { display: flex; flex-direction: column; justify-content: center; padding: 55px; }.library-lead h2 { margin: 15px 0 17px; font: 700 clamp(2.4rem, 4vw, 4.1rem)/.98 var(--display); letter-spacing: -.05em; }.library-lead p { color: var(--muted); }.library-lead i { color: var(--violet); font-size: .78rem; font-style: normal; font-weight: 850; }
.library-start { margin: 0 0 55px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.library-start > h2 { margin-bottom: 7px; font: 750 2rem var(--display); }
.library-start > p { color: var(--muted); font-size: .78rem; }
.library-start ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.library-start li { padding: 16px; border-radius: 10px; background: white; }
.library-start h3 { margin-bottom: 6px; font: 750 1rem var(--display); }
.library-start li p { margin: 0; color: var(--muted); font-size: .7rem; }
.library-start a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cluster-nav { display: flex; gap: 10px; align-items: center; margin: 0 0 80px; overflow-x: auto; }.cluster-nav span { margin-right: 8px; color: var(--muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; }.cluster-nav a { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--chip-radius); font-size: .72rem; font-weight: 800; }
.cluster-section { padding: 20px 0 80px; }.cluster-intro { max-width: 74ch; margin: 0 0 30px; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.cluster-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: end; margin-bottom: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--ink); }.cluster-head h2 { margin: 0; font: 700 2.8rem var(--display); }.cluster-head > p { max-width: 500px; margin: 0; color: var(--muted); }
.cluster-symbol-links { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; overflow-x: auto; }.cluster-symbol-links span { flex: 0 0 auto; margin-right: 5px; color: var(--muted); font-size: .63rem; font-weight: 850; text-transform: uppercase; }.cluster-symbol-links a { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--violet); font-size: .65rem; font-weight: 800; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.article-card { display: flex; min-height: 470px; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: white; overflow: hidden; transition: .18s; }.article-card:hover { transform: translateY(-4px); }.article-card img { width: 100%; height: 200px; object-fit: cover; }.article-card > span { display: flex; flex: 1; flex-direction: column; padding: 22px; }.article-card h3 { margin: 9px 0; font: 700 1.45rem/1.2 var(--display); }.article-card p { color: var(--muted); font-size: .77rem; }.article-card i { margin-top: auto; color: var(--violet); font-size: .72rem; font-style: normal; font-weight: 850; }

/* Article */
.article-hero { padding: 0 0 90px; background: var(--navy); color: white; }.article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 70px; align-items: center; }.article-hero h1 { margin: 0 0 25px; font: 700 clamp(3.3rem, 6vw, 5.8rem)/.94 var(--display); letter-spacing: -.055em; }.article-deck { max-width: 700px; color: #cbc5e6; font-size: 1.08rem; }.article-hero-grid > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid #635993; border-radius: 18px; transform: rotate(2deg); box-shadow: 13px 13px 0 var(--yellow); }.byline { display: flex; gap: 12px; align-items: center; margin-top: 30px; }.byline-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--violet); color: var(--yellow); }.byline b, .byline small { display: block; }.byline b { font-size: .76rem; }.byline small { color: #a9a2ce; font-size: .68rem; }
.article-layout { display: grid; grid-template-columns: 205px minmax(0, 720px) 220px; gap: 48px; padding-top: 80px; padding-bottom: 100px; }.article-toc, .article-aside { align-self: start; position: sticky; top: 105px; }.article-toc > div { border-left: 1px solid var(--line); }.article-toc > div > span { display: block; padding: 0 0 12px 15px; color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.article-toc a { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 5px; padding: 8px 0 8px 14px; color: var(--muted); font-size: .68rem; line-height: 1.35; border-left: 2px solid transparent; margin-left: -1px; }.article-toc a:hover, .article-toc a.active { color: var(--violet); border-left-color: var(--violet); }.article-toc i { color: #b3aec0; font-style: normal; }
.article-lead { padding-bottom: 35px; border-bottom: 1px solid var(--line); color: var(--ink); font: 1.35rem/1.55 var(--display); }.article-body > section { padding: 58px 0; border-bottom: 1px solid var(--line); }.article-body h2 { margin-bottom: 23px; font: 700 clamp(2rem, 4vw, 3rem)/1.03 var(--display); letter-spacing: -.04em; }.article-body section > p:not(.section-number) { color: #514d60; font-size: 1rem; line-height: 1.8; }.article-body ul { margin: 26px 0; padding: 0; list-style: none; }.article-body li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); color: #514d60; }.article-body li::before { content: '✦'; position: absolute; left: 0; color: var(--violet); font-size: .72rem; }.article-body blockquote { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; margin: 32px 0 0; padding: 25px; border: 0; border-radius: 15px; background: var(--violet-soft); }.article-body blockquote > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--violet); color: var(--yellow); }.article-body blockquote p { margin: 3px 0 0; color: var(--violet-dark); font: italic 1.13rem/1.55 var(--display); }
.article-faq details { border-top: 1px solid var(--line); }.article-faq details:last-child { border-bottom: 1px solid var(--line); }.article-faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; font-weight: 800; list-style: none; }.article-faq summary span { color: var(--violet); }.article-faq details p { padding: 0 25px 18px 0; color: var(--muted); font-size: .88rem; }
.article-aside .side-card a { gap: 8px; padding-block: 13px; }.article-aside .side-card a span { color: var(--violet); }
.article-copy-links { margin-top: 16px; }
.article-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }.article-collection-grid a { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }.article-collection-grid span { color: var(--violet); font-size: 1.25rem; }.article-collection-grid h3 { margin: 12px 0 6px; font: 700 .95rem var(--display); }.article-collection-grid p { margin: 0 !important; font-size: .65rem !important; }
.next-reading { padding: 80px 0; background: var(--navy); color: white; }.next-reading .container > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #554d7d; }.next-reading a { display: flex; min-height: 200px; flex-direction: column; padding: 28px; border-right: 1px solid #554d7d; }.next-reading a:first-child { padding-left: 0; }.next-reading small { color: var(--mint); font-size: .65rem; text-transform: uppercase; }.next-reading h3 { margin-top: 12px; font: 700 1.45rem/1.2 var(--display); }.next-reading span { margin-top: auto; color: var(--yellow); font-size: .72rem; font-weight: 800; }

/* Simple / utility */
.simple-hero { padding: 0 0 80px; background: var(--wash); text-align: center; }.simple-hero .breadcrumbs { justify-content: flex-start; }.simple-hero h1 { margin-bottom: 20px; font: 700 clamp(3.2rem, 6vw, 5.8rem)/.95 var(--display); letter-spacing: -.055em; }.simple-hero > div > p:last-child { max-width: 650px; margin: 0 auto; color: var(--muted); }
.simple-next { padding: 45px 0 0; }
.simple-next h2 { margin-bottom: 14px; font: 700 clamp(1.6rem, 3vw, 2.2rem) var(--display); letter-spacing: -.03em; }
.simple-next p { color: var(--muted); font-size: .95rem; line-height: 1.8; }
.simple-content { padding: 45px 0 100px; }.simple-content section { padding: 45px 0; border-bottom: 1px solid var(--line); }.simple-content section > p:last-child { color: var(--muted); font-size: 1rem; line-height: 1.85; }
.simple-summary { padding: 55px 0; background: var(--navy); color: white; }
.simple-summary .reading-width > span { color: var(--yellow); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.simple-summary h2 { margin: 7px 0 25px; font: 700 2.4rem var(--display); }
.simple-summary .reading-width > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.simple-summary article { padding: 18px; border: 1px solid #48406b; border-radius: 12px; }
.simple-summary article b { color: var(--yellow); font-size: .62rem; }
.simple-summary h3 { margin: 8px 0 6px; font: 750 1rem var(--display); }
.simple-summary article p, .simple-summary .reading-width > p { color: #c9c3dc; font-size: .75rem; }
.simple-summary .reading-width > h3 { margin-top: 28px; }
.simple-summary a { color: var(--yellow); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.simple-link-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.simple-link-list a { display: block; padding: 8px 11px; border: 1px solid #534a7b; border-radius: 8px; text-decoration: none; }

/* FAQ hub and answer pages */
.faq-hero { padding: 0 0 88px; overflow: hidden; background: var(--navy); color: white; }
.faq-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 80px; align-items: end; }
.faq-hero h1 { margin: 0 0 25px; font: 700 clamp(4.5rem, 9vw, 8rem)/.84 var(--display); letter-spacing: -.07em; }
.faq-hero h1 em { color: var(--yellow); font-weight: 400; }
.faq-hero-grid > div:first-child > p { max-width: 690px; margin: 0; color: #cbc5e6; font-size: 1.08rem; }
.faq-hero-stat { padding: 30px; border: 1px solid #554d7d; border-radius: 20px; background: rgba(255,255,255,.04); transform: rotate(2deg); }
.faq-hero-stat strong, .faq-hero-stat span { display: block; }
.faq-hero-stat strong { color: var(--yellow); font: 700 5rem/.85 var(--display); }
.faq-hero-stat span { margin: 9px 0 25px; color: #cbc5e6; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.faq-hero-stat div { padding-top: 18px; border-top: 1px solid #554d7d; color: var(--mint); font-size: 1.5rem; word-spacing: 9px; }
.faq-hub { padding: 45px 0 110px; background: var(--paper); }
.faq-group-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 45px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.faq-group-nav span { flex: 0 0 auto; margin-right: 10px; color: var(--muted); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.faq-group-nav a { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--chip-radius); background: white; font-size: .72rem; font-weight: 800; }
.faq-group-nav a:hover { border-color: var(--violet); color: var(--violet); }
.faq-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: end; padding: 80px 0 55px; }
.faq-intro h2 { margin: 0; font: 700 clamp(2.8rem, 5vw, 4.6rem)/.95 var(--display); letter-spacing: -.05em; }
.faq-intro p { max-width: 540px; margin: 0; color: var(--muted); }
.faq-group { padding: 55px 0 70px; border-top: 1px solid var(--ink); }
.faq-group > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; margin-bottom: 30px; }
.faq-group > header > div { display: flex; gap: 16px; align-items: center; }
.faq-group > header span { color: var(--violet); font-size: .7rem; font-weight: 900; }
.faq-group > header h2 { margin: 0; font: 700 2.55rem var(--display); letter-spacing: -.035em; }
.faq-group > header p { max-width: 540px; margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.faq-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.faq-card { position: relative; display: flex; min-height: 350px; flex-direction: column; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; transition: .18s ease; }
.faq-card:hover { transform: translateY(-4px); border-color: #cfc5ff; }
.faq-card-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 30px; border-radius: 13px; background: var(--violet-soft); color: var(--violet); font: 700 1.45rem var(--display); }
.faq-card small { color: var(--muted); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.faq-card h3 { margin: 9px 0 12px; font: 700 1.4rem/1.15 var(--display); letter-spacing: -.025em; }
.faq-card p { margin-bottom: 25px; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.faq-card > b { margin-top: auto; color: var(--violet); font-size: .7rem; }
.faq-card > b span { margin-left: 6px; }
.faq-contact { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 35px; padding: 38px; border-radius: 20px; background: var(--violet); color: white; }
.faq-contact > span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--yellow); color: var(--ink); font: 700 2.4rem var(--display); transform: rotate(-5deg); }
.faq-contact h2 { margin-bottom: 6px; font: 700 2rem var(--display); }
.faq-contact p { max-width: 650px; margin: 0; color: #dedaff; font-size: .82rem; }
.faq-detail-hero { padding: 0 0 78px; background: var(--navy); color: white; }
.faq-detail-title { display: grid; grid-template-columns: 105px minmax(0, 900px); gap: 30px; align-items: start; }
.faq-detail-title > div:first-child { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 23px; background: var(--yellow); color: var(--ink); font: 700 2.8rem var(--display); transform: rotate(-4deg); }
.faq-detail-title small { display: block; margin: 3px 0 13px; color: var(--mint); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.faq-detail-title h1 { margin: 0; font: 700 clamp(3rem, 6vw, 5.4rem)/.94 var(--display); letter-spacing: -.055em; }
.faq-detail-layout { display: grid; grid-template-columns: 205px minmax(0, 720px) 220px; gap: 48px; padding-top: 75px; padding-bottom: 95px; }
.faq-answer-body > section:first-child { padding-top: 0; }
.faq-short-answer { margin-bottom: 15px; padding: 30px !important; border: 1px solid #cfc5ff !important; border-radius: 18px; background: var(--violet-soft); }
.faq-short-answer > span { display: block; margin-bottom: 9px; color: var(--violet); font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.faq-short-answer > p { margin: 0; color: var(--violet-dark) !important; font: 700 1.35rem/1.5 var(--display) !important; }
.faq-collection-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.faq-collection-links a { display: flex; min-height: 160px; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--wash); }
.faq-collection-links a > span { color: var(--violet); font-size: 1.25rem; }
.faq-collection-links a > h3 { margin: 12px 0; font: 700 1rem/1.2 var(--display); }
.faq-collection-links a > i { margin-top: auto; color: var(--violet); font-size: .67rem; font-style: normal; font-weight: 850; }
.faq-next { padding: 70px 0 85px; background: var(--navy); color: white; }
.faq-next .container > h2 { margin-bottom: 14px; color: var(--mint); font: 850 .68rem var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.faq-next .container > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #554d7d; }
.faq-next a { display: flex; min-height: 190px; flex-direction: column; padding: 28px; border-right: 1px solid #554d7d; }
.faq-next a:first-child { padding-left: 0; }
.faq-next small { color: #a9a2ce; font-size: .62rem; text-transform: uppercase; }
.faq-next h3 { margin-top: 12px; font: 700 1.35rem/1.2 var(--display); }
.faq-next a > span { margin-top: auto; color: var(--yellow); font-size: .7rem; font-weight: 850; }

/* Human-readable sitemap */
.sitemap-hero { padding: 0 0 80px; overflow: hidden; background: linear-gradient(135deg, var(--violet-soft), var(--paper)); }
.sitemap-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 510px; gap: 70px; align-items: end; }
.sitemap-hero h1 { margin: 0 0 24px; font: 700 clamp(4.4rem, 8vw, 7.5rem)/.86 var(--display); letter-spacing: -.07em; }
.sitemap-hero h1 em { color: var(--violet); font-weight: 400; }
.sitemap-hero-grid > div:first-child p { max-width: 680px; margin: 0; color: var(--muted); font-size: 1.05rem; }
.sitemap-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #d8d0f8; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); }
.sitemap-totals div { min-width: 0; padding: 24px 16px; border-right: 1px solid #d8d0f8; text-align: center; }
.sitemap-totals div:last-child { border-right: 0; }
.sitemap-totals strong, .sitemap-totals span { display: block; }
.sitemap-totals strong { color: var(--violet); font: 700 2.8rem/1 var(--display); }
.sitemap-totals span { margin-top: 8px; color: var(--muted); font-size: .62rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.sitemap-page { padding: 45px 0 115px; background: white; }
.sitemap-jump { display: flex; align-items: center; gap: 10px; padding-bottom: 45px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.sitemap-jump > span { flex: 0 0 auto; margin-right: 8px; color: var(--muted); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.sitemap-jump a { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--chip-radius); font-size: .72rem; font-weight: 800; }
.sitemap-jump a:hover { border-color: var(--violet); color: var(--violet); }
.sitemap-section { padding: 75px 0; border-bottom: 1px solid var(--ink); }
.sitemap-section > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: end; margin-bottom: 35px; }
.sitemap-section > header h2 { margin: 0; font: 700 clamp(2.7rem, 5vw, 4.4rem)/.95 var(--display); letter-spacing: -.05em; }
.sitemap-section > header p { max-width: 570px; margin: 0; color: var(--muted); }
.sitemap-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; align-items: start; }
.sitemap-knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-items: start; }
.sitemap-link-group { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.sitemap-link-group h3 { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding: 17px 19px; border-bottom: 1px solid var(--line); background: var(--wash); font: 700 1.15rem var(--display); }
.sitemap-link-group h3 span { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 50%; background: var(--violet); color: white; font: 800 .65rem var(--sans); }
.sitemap-link-group ul { margin: 0; padding: 7px 14px 13px; list-style: none; }
.sitemap-link-group li { border-bottom: 1px solid var(--line); }
.sitemap-link-group li:last-child { border-bottom: 0; }
.sitemap-link-group li a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 3px; }
.sitemap-link-group li a:hover b { color: var(--violet); }
.sitemap-link-group li a > span { color: var(--violet); text-align: center; }
.sitemap-link-group li b { font-size: .75rem; line-height: 1.35; }
.sitemap-link-group li i { color: var(--violet); font-size: .66rem; font-style: normal; }
.knowledge-group li a { grid-template-columns: minmax(0, 1fr) auto; padding-block: 12px; }
.knowledge-group li a:has(> span) { grid-template-columns: 27px minmax(0, 1fr) auto; }
.sitemap-hub-link { display: flex; justify-content: space-between; gap: 20px; margin-top: 15px; padding: 20px 22px; border-radius: 14px; background: var(--violet); color: white; font-size: .82rem; }
.sitemap-hub-link b { color: var(--yellow); }
.sitemap-company-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sitemap-company-grid a { min-height: 125px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
.sitemap-company-grid a:hover { border-color: var(--violet); background: var(--violet-soft); }
.sitemap-company-grid b, .sitemap-company-grid span { display: block; }
.sitemap-company-grid b { font: 700 1.15rem var(--display); }
.sitemap-company-grid span { margin-top: 8px; color: var(--muted); font-size: .72rem; }
.not-found { min-height: 650px; display: grid; place-items: center; padding: 90px 0; text-align: center; background: var(--wash); }.not-found .container > span { color: var(--violet); font-size: .72rem; font-weight: 900; letter-spacing: .2em; }.lost-symbols { margin: 15px 0; color: var(--violet); font: 700 4.5rem var(--display); }.not-found h1 { font: 700 clamp(3rem, 6vw, 5rem)/1 var(--display); }.not-found p { color: var(--muted); }.not-found .button { margin: 15px 5px; }

/* Footer, dialog and toast */
.site-footer { padding-top: 70px; background: #141122; color: white; }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 70px; padding-bottom: 55px; }.brand-footer { color: white; }.footer-intro p { max-width: 330px; margin-top: 22px; color: #9f9aaa; font-size: .82rem; }.footer-grid h2 { margin-bottom: 16px; color: #777185; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }.footer-grid > div:not(:first-child) a { display: block; padding: 4px 0; color: #cbc7d2; font-size: .77rem; }.footer-grid a:hover { color: var(--yellow); }.footer-bottom { display: flex; justify-content: space-between; padding: 20px 0 25px; border-top: 1px solid #312d3e; color: #787382; font-size: .68rem; }.footer-bottom a { margin-left: 20px; }
.search-dialog { position: fixed; z-index: 500; inset: 0; }.search-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15,12,28,.58); backdrop-filter: blur(5px); }.search-panel { position: relative; width: min(calc(100% - 30px), 690px); max-height: calc(100vh - 120px); margin: 80px auto 0; overflow: auto; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.28); }.search-input-row { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }.search-input-row > span { font-size: 1.5rem; }.search-input-row input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 1.05rem; }.search-input-row button { border: 1px solid var(--line); border-radius: 7px; background: var(--wash); color: var(--muted); font-size: .68rem; }.search-results { padding: 10px; }.search-results > p { margin: 10px; color: var(--muted); font-size: .8rem; }.search-results a, .search-results button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px; border: 0; border-radius: 10px; background: white; text-align: left; cursor: pointer; }.search-results a:hover, .search-results button:hover { background: var(--wash); }.search-results b { min-width: 65px; color: var(--violet); font-size: 1.3rem; }.search-results small { color: var(--muted); }
.symbol-board { position: fixed; z-index: 450; left: 50%; bottom: 18px; width: min(calc(100% - 32px), 900px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 70px; padding: 11px 12px 11px 16px; border: 1px solid #4a435e; border-radius: 17px; background: rgba(23,20,38,.97); color: white; box-shadow: 0 20px 55px rgba(17,12,38,.35); transform: translateX(-50%); backdrop-filter: blur(16px); }
.board-label { display: grid; grid-template-columns: 25px auto; align-items: center; column-gap: 7px; white-space: nowrap; }.board-label > span { grid-row: 1/3; color: var(--yellow); }.board-label b { font-size: .72rem; }.board-label small { color: #9892aa; font-size: .58rem; }
.board-items { display: flex; gap: 6px; align-items: center; min-height: 42px; padding: 4px; overflow-x: auto; border-radius: 10px; background: #2a2639; scrollbar-width: thin; }.board-items button { flex: 0 0 auto; display: grid; place-items: center; grid-auto-flow: column; min-width: 36px; height: 34px; padding: 0 7px; border: 0; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }.board-items button:hover { background: var(--yellow); }.board-items button::after { content: '×'; margin-left: 5px; color: var(--coral); font-size: .62rem; }
.board-actions { display: flex; gap: 6px; }.board-actions button { min-height: 38px; padding: 0 13px; border: 1px solid #5d566e; border-radius: 9px; background: transparent; color: #d7d3de; font-size: .67rem; font-weight: 800; cursor: pointer; }.board-actions button:first-child { border-color: var(--violet); background: var(--violet); color: white; }
.toast { position: fixed; z-index: 600; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 999px; background: var(--ink); color: white; font-size: .78rem; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%,20px); transition: .2s; box-shadow: var(--shadow); }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast > span:first-child { color: var(--mint); }

/* Evidence and page-specific utilities */
.editorial-boundary { margin: 24px 0 42px; padding: 16px 18px; border-left: 4px solid var(--yellow); background: #fff9df; color: var(--muted); font-size: .82rem; }
.editorial-boundary strong { color: var(--ink); }
.article-takeaways { margin: 25px 0 45px; padding: 24px; border-radius: 16px; background: var(--violet-soft); }
.article-takeaways > h2 { margin-bottom: 5px; font-size: 1.8rem; }
.article-takeaways > p { color: var(--muted); font-size: .76rem; }
.article-takeaways > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.article-takeaways article { padding: 14px; border-radius: 10px; background: white; }
.article-takeaways article > span { color: var(--violet); font-size: .6rem; font-weight: 900; }
.article-takeaways h3 { margin: 5px 0; font: 750 .92rem var(--display); }
.article-takeaways article p { margin: 0; color: var(--muted); font-size: .67rem; }
.article-body #copy-collections > p a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.hero-review-boundary { max-width: 760px; margin: 17px auto 0; padding: 12px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: inherit; font-size: .72rem; }
.evidence-table-wrap { margin: 24px 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.evidence-section table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .76rem; }
.evidence-section th, .evidence-section td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.evidence-section th { background: var(--wash); color: var(--ink); font-weight: 850; }
.evidence-section tr:last-child td { border-bottom: 0; }
.evidence-note { padding: 14px 16px; border-radius: 10px; background: var(--violet-soft); color: var(--muted); font-size: .76rem; }
.answer-map { margin: 34px 0 20px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--wash); }
.answer-map > h2 { margin-bottom: 16px; font-size: 1.7rem; }
.answer-map > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.answer-map article { padding: 15px; border-radius: 10px; background: white; }
.answer-map article > span { color: var(--violet); font-size: .62rem; font-weight: 900; }
.answer-map article b { display: block; margin: 6px 0; font: 750 .95rem var(--display); }
.answer-map article p { margin: 0; color: var(--muted); font-size: .68rem; }
.answer-map > p { margin: 18px 0 0; font-size: .78rem; }
.answer-map a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.topic-evidence { margin: 34px 0; padding: 23px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.topic-evidence > h3 { margin: 0 0 8px; font: 750 1.45rem var(--display); }
.topic-evidence > p { color: var(--muted); font-size: .8rem; }
.topic-evidence .semantic-table-wrap { margin-top: 18px; }
.topic-evidence-note { margin: 16px 0 0 !important; padding: 13px 15px; border-left: 4px solid var(--yellow); background: var(--wash); }
.faq-start { margin: 0 0 55px; padding: 24px; border-radius: 15px; background: var(--violet-soft); }
.faq-start > h2 { margin-bottom: 17px; font: 750 1.8rem var(--display); }
.faq-start ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.faq-start li { padding: 15px; border-radius: 10px; background: white; }
.faq-start h3 { margin-bottom: 6px; font: 750 1rem var(--display); }
.faq-start p { margin: 0; color: var(--muted); font-size: .7rem; }
.faq-start a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.special-tool { margin-top: 34px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.special-tool h3 { margin: 0 0 8px; font: 750 1.35rem var(--display); }
.special-tool > p { max-width: 760px; color: var(--muted); font-size: .78rem; }
.special-tool label { display: block; margin: 18px 0 7px; font-size: .7rem; font-weight: 850; }
.special-tool textarea, .special-tool input { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font: inherit; }
.inspection-summary, .tool-status { margin-top: 12px; color: var(--muted); font-size: .73rem; }
.codepoint-list { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 25px; color: var(--ink); font: 650 .73rem/1.5 var(--mono); }
.tool-input-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(150px, 1fr) auto; align-items: center; gap: 10px; }
.tool-input-row output { min-height: 48px; padding: 12px 15px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 9px; background: white; font: 750 1.1rem var(--mono); }
.tool-input-row button, .loading-preview button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--violet); color: white; font-weight: 800; cursor: pointer; }
.loading-preview { display: flex; align-items: center; gap: 15px; margin-top: 20px; padding: 18px; border-radius: 12px; background: white; }
.loading-preview [data-loading-frame] { min-width: 45px; color: var(--violet); font-size: 2rem; text-align: center; }
.loading-preview span:nth-child(2) { flex: 1; font-weight: 750; }

/* Crawlable collection pagination */
.collection-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.collection-pagination > a, .pagination-pages a, .pagination-pages strong { display: inline-grid; place-items: center; min-width: 38px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--violet-dark); font-size: .72rem; font-style: normal; font-weight: 850; }
.collection-pagination > a:hover, .pagination-pages a:hover { border-color: var(--violet); color: var(--violet); }
.pagination-pages { display: flex; align-items: center; gap: 6px; }
.pagination-pages strong { border-color: var(--violet); background: var(--violet); color: white; }
.pagination-context { max-width: 850px; }
.pagination-context a, .category-tool-link a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.category-tools-pair { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--wash); }
.category-tools-pair h3 { margin: 0 0 8px; font: 750 1.05rem var(--display); }
.category-tools-pair > p { margin: 0 0 16px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.tool-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool-pair-grid.tool-pair-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-pair-grid a { display: block; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: white; transition: .18s; }
.tool-pair-grid a:hover { border-color: #b8acef; transform: translateY(-2px); }
.tool-pair-grid span { display: block; margin-bottom: 6px; color: var(--violet); font-size: 1.3rem; }
.tool-pair-grid b { display: block; margin-bottom: 5px; font: 750 .85rem var(--display); }
.tool-pair-grid small { display: block; margin-bottom: 8px; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.tool-pair-grid i { color: var(--violet-dark); font-size: .7rem; font-style: normal; font-weight: 800; }
.tool-pair-more { margin: 14px 0 0; color: var(--muted); font-size: .75rem; }
.tool-pair-more a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.category-tool-link { margin-top: 22px; padding: 15px 17px; border-left: 4px solid var(--yellow); background: var(--wash); color: var(--muted); font-size: .78rem; }

/* Tool discovery hub */
.home-tools { background: var(--wash); }
.home-tool-grid, .tool-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.home-tool-grid > a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 115px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.home-tool-grid > a:hover { border-color: var(--violet); }
.home-tool-grid > a > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--violet-soft); color: var(--violet); font-size: 1.45rem; }
.home-tool-grid h3 { margin: 0 0 5px; font: 750 1.05rem var(--display); }
.home-tool-grid p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.home-tool-grid i { color: var(--violet); font-size: .7rem; font-style: normal; font-weight: 850; }
.tools-hero { padding-bottom: 90px; background: var(--navy); color: white; }
.tools-hero h1 { max-width: 760px; margin: 55px 0 20px; font: 700 clamp(4rem, 8vw, 7rem)/.88 var(--display); letter-spacing: -.065em; }
.tools-hero h1 em { color: var(--yellow); font-weight: 400; }
.tools-hero > .container > p { max-width: 700px; color: #c5c0d2; font-size: 1.05rem; line-height: 1.7; }
.tools-page { padding: 75px 0 100px; }
.tools-start, .tools-principles { margin-bottom: 75px; padding: 27px; border-radius: 15px; background: var(--violet-soft); }
.tools-start > h2, .tools-principles > h2 { margin-bottom: 8px; font: 750 clamp(2rem, 4vw, 3rem) var(--display); }
.tools-start > p { max-width: 800px; color: var(--muted); }
.tools-summary { margin: 15px 0; padding: 13px 15px; border-left: 4px solid var(--yellow); background: white; }
.tools-start > div, .tools-principles > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 24px; }
.tools-start article, .tools-principles article { padding: 20px; border-radius: 10px; background: white; }
.tools-start article > span { color: var(--violet); font-size: .65rem; font-weight: 900; }
.tools-start h3, .tools-principles h3 { margin: 8px 0; font: 750 1rem var(--display); }
.tools-start article p, .tools-principles article p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.tools-principles a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tools-principles > h3 { margin: 24px 0 9px; font: 750 1.1rem var(--display); }.tools-principles > ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.tool-directory { margin-bottom: 75px; }
.tool-directory-grid > article { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.tool-directory-grid > article > span { float: right; color: var(--violet); font-size: 2rem; }
.tool-directory-grid small { color: var(--violet); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tool-directory-grid h3 { margin: 10px 0; font: 750 1.25rem var(--display); }
.tool-directory-grid p { color: var(--muted); font-size: .75rem; }
.tool-directory-grid p a, .tool-directory-grid > article > a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Grouped reciprocal links from FAQ answers */
.faq-covered-collections { margin-top: 30px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.faq-covered-collections > h3 { margin: 0 0 6px; font: 750 1.25rem var(--display); }
.faq-covered-collections > p { margin: 0 0 18px; color: var(--muted); font-size: .75rem; }
.faq-covered-collections details { border-top: 1px solid var(--line); }
.faq-covered-collections summary { display: flex; justify-content: space-between; padding: 13px 0; cursor: pointer; font-size: .76rem; font-weight: 850; }
.faq-covered-collections summary span { color: var(--violet); }
.faq-covered-collections ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.faq-covered-collections a { color: var(--violet-dark); font-size: .73rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.mega-foot { display: flex; justify-content: space-between; gap: 20px; }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }.header-search { margin-left: auto; }.menu-button { display: block; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 15px; }.symbol-cloud { transform: scale(.84); }
  .popular-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .magazine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mag-card.mag-feature { grid-column: span 1; }.mag-feature img { height: 170px; }
  .category-symbol-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-symbol-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }.symbol-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 45px; }.article-layout { grid-template-columns: 170px minmax(0, 1fr); }.article-aside { display: none; }
  .faq-detail-layout { grid-template-columns: 170px minmax(0, 1fr); }.faq-detail-layout .article-aside { display: none; }
}

@media (max-width: 820px) {
  .section { padding: 72px 0; }.section-heading.split { display: block; }.section-heading.split > .text-link { display: inline-block; margin-top: 20px; }
  .home-hero, .hero-grid { min-height: auto; }.hero-grid { display: block; }.hero-copy { padding: 75px 0 35px; }.hero-copy h1 { font-size: clamp(3.8rem, 15vw, 6rem); }.hero-art { min-height: 470px; }.symbol-cloud { transform: scale(.78); }
  .popular-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.studio-grid { grid-template-columns: minmax(0, 1fr); gap: 55px; }.style-studio { padding: 75px 0; }
  .home-symbol-sections { grid-template-columns: minmax(0, 1fr); }.home-symbol-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  /* minmax(0, …) is required, not cosmetic: the single column is a grid item whose
     automatic minimum is its min-content size, and #plain-guide holds a table with
     min-width: 700px. A bare `1fr` lets that 700px floor the track, so the column —
     and the whole document — renders 750px wide inside a 375px viewport. */
  .category-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }.category-sidebar { display: none; }
  .authority-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; }.authority-grid { grid-template-columns: minmax(0, 1fr); }.authority-grid article, .authority-grid article + article { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .library-lead { grid-template-columns: minmax(0, 1fr); }.library-lead img { height: 340px; }.library-lead > span { padding: 35px; }.cluster-head { grid-template-columns: minmax(0, 1fr); gap: 15px; }.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .symbols-hero-grid, .symbols-hub-intro, .symbol-hub-group > header { grid-template-columns: minmax(0, 1fr); gap: 25px; }.symbols-hero-sample { max-width: 430px; }.library-start ol, .faq-start ol { grid-template-columns: minmax(0, 1fr); }
  .article-hero-grid { grid-template-columns: minmax(0, 1fr); }.article-hero-grid > img { max-width: 520px; }.article-layout { grid-template-columns: minmax(0, 1fr); }.article-toc { display: none; }
  .faq-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 45px; }.faq-hero-stat { max-width: 330px; }.faq-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.faq-detail-layout { grid-template-columns: minmax(0, 1fr); }.faq-detail-layout .article-toc { display: none; }
  .sitemap-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 45px; }.sitemap-totals { max-width: 510px; }.sitemap-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }.footer-intro { grid-column: 1/-1; }
  .home-tool-grid, .tool-directory-grid { grid-template-columns: minmax(0, 1fr); }.tools-start > div, .tools-principles > div { grid-template-columns: minmax(0, 1fr); }
  .copy-activity { grid-template-columns: minmax(0, 1fr); gap: 24px; }.copy-activity-privacy { margin-top: -8px; }
}

@media (max-width: 580px) {
  .container, .container.narrow { width: min(calc(100% - 28px), var(--container)); }.site-header, .nav-row { height: 64px; }.mobile-menu { top: 64px; }/* Icon-only at this width. The old rule kept the label in the flow and clipped a
   40px window over it, so the button rendered as a cut-off "S". Hide the label and
   the shortcut instead, and let the button be a real square tap target. */
/* Icon-only at this width, and deliberately independent of the markup: a browser
   holding a cached copy of the previous HTML has the label as a bare text node with
   no element to hide, so `font-size: 0` collapses it whatever shape it arrives in.
   The first child is the icon in both the old and current markup, so it is targeted
   structurally rather than by class and gets its size back. `overflow: hidden` is the
   last guard — nothing can spill out of the button again. */
.header-search { width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; overflow: hidden; font-size: 0; }.header-search-label, .header-search kbd { display: none; }.header-search > span:first-child, .header-search-icon { font-size: 1.15rem; line-height: 1; }.brand { font-size: 1.02rem; }.brand-mark { width: 31px; height: 31px; }
  .hero-copy { padding-top: 60px; }.hero-copy h1 { font-size: 3.65rem; }.hero-deck { font-size: .98rem; }.hero-search-wrap { min-height: 57px; box-shadow: 5px 5px 0 var(--yellow); }.hero-search-wrap kbd { display: none; }.quick-links { gap: 10px; }
  .hero-art { min-height: 390px; margin: -20px 0 15px; }.symbol-cloud { position: absolute; transform: scale(.64); }
  .popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.symbol-card { min-height: 115px; }.symbol-glyph { font-size: 2rem; }
  .popular-rotation-note { align-items: flex-start; line-height: 1.5; }.copy-activity { padding: 24px 20px; }.copy-activity dl { grid-template-columns: minmax(0, 1fr); }.copy-activity-privacy { margin-top: 0; }
  .home-copy-library { padding: 70px 0; }.home-symbol-section { padding: 17px; }.home-symbol-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }.home-symbol-section > header { display: block; }.home-symbol-section header a { display: inline-block; margin-top: 10px; }
  .style-row b { max-width: 245px; font-size: 1.25rem; }.category-grid { grid-template-columns: minmax(0, 1fr); }.category-card { min-height: 92px; }
  .magazine-grid { grid-template-columns: minmax(0, 1fr); }.trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.trust-grid > div:nth-child(2) { border-right: 0; }.trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(23,20,38,.25); }
  .home-authority { padding: 70px 0; }
  .breadcrumbs { margin-bottom: 35px; overflow: hidden; white-space: nowrap; }.category-hero { padding-top: 0; }.category-hero h1 { font-size: 3.5rem; }.category-showcase { gap: 7px; }.category-showcase span { width: 44px; height: 50px; border-radius: 12px; font-size: 1.35rem; }.category-showcase span:nth-child(n+7) { display: none; }.inventory-insights, .semantic-fact-grid, .simple-summary .reading-width > div, .answer-map > div, .article-takeaways > div, .home-paths ol { grid-template-columns: minmax(0, 1fr); }.special-tool { padding: 18px; }.tool-input-row { grid-template-columns: minmax(0, 1fr); }.loading-preview { align-items: flex-start; flex-wrap: wrap; }
  .category-layout { padding-top: 40px; }.collection-tools { display: block; }.filter-input { width: 100%; margin-top: 18px; }.category-symbol-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; grid-auto-flow: dense; }.category-symbol-grid button { height: 88px; gap: 5px; padding: 6px; }/* 42px, not 36: the site's own symbol faces are the tight ones, and when a glyph falls
   back to a system face its line box is nearly 2em, which the shorter box trimmed. */
.category-symbol-grid button span { height: 42px; font-size: 1.4rem; }.category-symbol-grid button span.emoji-glyph { font-size: 1.7rem; }
  /* A 4-column tile is ~64px of content, but a kaomoji is a whole sentence of code
     points — the widest here needs 166px, so `nowrap` + `overflow: hidden` was cutting
     11 of 64 faces in half at 375px (30 of 64 at 320px). Multi-cell glyphs take two
     columns and a smaller size so the face survives; `dense` backfills the single-cell
     gaps this leaves in mixed collections. Anything narrow keeps the 4-up layout. */
  .category-symbol-grid button:has(span.symbol-combo), .category-symbol-grid button:has(span.multiline-symbol) { grid-column: span 2; }
  /* Borders, dividers and spinner frames are a dozen code points or more — even two
     columns cut them off — so they take the whole row, and box art gets its lines back
     instead of being capped at 50px inside a fixed-height tile. */
  .category-symbol-grid button:has(span.symbol-wide) { grid-column: 1 / -1; }
  .category-symbol-grid button:has(span.multiline-symbol) { height: auto; min-height: 88px; }
  /* `normal`, not a number: box-drawing characters come from whichever face has them,
     and a fallback's line box runs taller than any leading tight enough to look right —
     which cropped the bottom rule off every frame. Deferring to the font's own metrics
     is the only value that cannot be wrong for a face we did not choose. */
  .category-symbol-grid button span.multiline-symbol { flex: 0 0 auto; max-height: none; line-height: normal; }
  .category-symbol-grid button span.symbol-combo, .category-symbol-grid button span.symbol-wide { font-size: .92rem; }
  /* Three glyphs at the single-symbol size measure up to 72px against 64px of tile. */
  .category-symbol-grid button span.symbol-trio { font-size: 1.15rem; }
  .category-symbol-grid button small { font-size: .68rem; }.content-section { padding: 55px 0; }.steps-row, .fact-grid, .related-grid, .format-breakdown, .use-case-grid, .example-grid, .taxonomy-grid, .support-grid { grid-template-columns: minmax(0, 1fr); }.unicode-reference { grid-template-columns: minmax(0, 1fr); }.grid-progress { align-items: stretch; flex-direction: column; }.grid-progress p { margin-right: 0; }
  .collection-pagination { align-items: stretch; flex-direction: column; }.collection-pagination > a { width: 100%; }.pagination-pages { justify-content: center; flex-wrap: wrap; }.home-tool-grid > a { grid-template-columns: 45px minmax(0, 1fr); }.home-tool-grid > a > span { width: 45px; height: 45px; }.home-tool-grid i { grid-column: 2; }.tools-hero { padding-bottom: 65px; }.tools-hero h1 { margin-top: 40px; font-size: 4rem; }.tools-page { padding-top: 55px; }.tools-start, .tools-principles { padding: 18px; }.faq-covered-collections ul { grid-template-columns: minmax(0, 1fr); }.mega-foot { display: block; }.mega-foot a + a { margin-top: 8px; }
  .library-hero { padding-bottom: 85px; }.library-hero h1 { font-size: 4.8rem; }.library-lead { top: -35px; }.library-lead img { height: 230px; }.library-lead > span { padding: 25px; }.library-lead h2 { font-size: 2.25rem; }.cluster-nav { margin-bottom: 45px; }.article-grid { grid-template-columns: minmax(0, 1fr); }.article-card { min-height: 440px; }
  .article-hero { padding-bottom: 65px; }.article-hero h1 { font-size: 3.15rem; }.article-hero-grid > img { transform: rotate(1deg); box-shadow: 8px 8px 0 var(--yellow); }.article-layout { padding-top: 55px; }.article-collection-grid { grid-template-columns: minmax(0, 1fr); }.next-reading .container > div { grid-template-columns: minmax(0, 1fr); }.next-reading a, .next-reading a:first-child { min-height: 155px; padding: 24px 0; border-right: 0; border-bottom: 1px solid #554d7d; }
  .symbols-hero h1 { font-size: 4rem; }.symbols-hero-sample { grid-template-columns: repeat(6, minmax(0, 1fr)); transform: none; }.symbols-hero-sample span { border-radius: 11px; font-size: 1.25rem; }.symbol-hub-grid { grid-template-columns: minmax(0, 1fr); }.symbol-hub-card { min-height: 230px; }.symbol-group-learning { align-items: flex-start; flex-direction: column; }
  .faq-hero { padding-bottom: 65px; }.faq-hero h1 { font-size: 4.25rem; }.faq-hero-stat { transform: none; }.faq-intro, .faq-group > header { grid-template-columns: minmax(0, 1fr); gap: 18px; }.faq-card-grid { grid-template-columns: minmax(0, 1fr); }.faq-card { min-height: 315px; }.faq-contact { grid-template-columns: minmax(0, 1fr); }.faq-detail-title { grid-template-columns: minmax(0, 1fr); }.faq-detail-title > div:first-child { width: 72px; height: 72px; font-size: 2.2rem; }.faq-detail-title h1 { font-size: 3.1rem; }.faq-collection-links, .faq-next .container > div { grid-template-columns: minmax(0, 1fr); }.faq-next a, .faq-next a:first-child { min-height: 145px; padding: 23px 0; border-right: 0; border-bottom: 1px solid #554d7d; }
  .sitemap-hero h1 { font-size: 4rem; }.sitemap-totals strong { font-size: 2.2rem; }.sitemap-totals div { padding: 19px 8px; }.sitemap-section > header { grid-template-columns: minmax(0, 1fr); gap: 15px; }.sitemap-group-grid, .sitemap-knowledge-grid, .sitemap-company-grid { grid-template-columns: minmax(0, 1fr); }.sitemap-hub-link { display: block; }.sitemap-hub-link b { display: block; margin-top: 7px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.footer-intro { grid-column: 1/-1; }.footer-grid > div:last-child { grid-column: 1/-1; }.footer-bottom { display: block; }.footer-bottom > span { display: block; margin-top: 8px; }.footer-bottom a { margin: 0 20px 0 0; }
  .symbol-board { bottom: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; }.board-label { display: none; }.board-items { min-width: 0; }.board-actions button { padding-inline: 10px; }.board-actions button:last-child { display: none; }
}

.tool-maker-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 28px; margin: 40px 0 55px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--wash); }
.tool-maker-feature small { color: var(--violet); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tool-maker-feature h2 { margin: 8px 0 12px; font: 700 2.1rem var(--display); letter-spacing: -.03em; }
.tool-maker-feature p { margin: 0 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.85; }
.tool-maker-feature ul { margin: 0 0 20px; padding-left: 20px; color: var(--muted); font-size: .82rem; line-height: 1.9; }
.tool-maker-preview { display: grid; gap: 9px; justify-items: center; }
.tool-maker-preview span { width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: 1.05rem; text-align: center; }
/* ---- Symbol Maker ---- */
.maker-hero { padding-bottom: 90px; background: var(--navy); color: white; }
.maker-hero h1 { max-width: 760px; margin: 55px 0 20px; font: 700 clamp(4rem, 8vw, 7rem)/.88 var(--display); letter-spacing: -.065em; }
.maker-hero h1 em { color: var(--yellow); font-weight: 400; }
.maker-hero > .container > p { max-width: 700px; color: #c5c0d2; font-size: 1.05rem; line-height: 1.7; }
.maker-hero-sample { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.maker-hero-sample span { padding: 10px 16px; border: 1px solid #48406b; border-radius: 11px; font-size: 1.05rem; }
.maker-page { padding: 55px 0 100px; }
.maker-summary { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.maker-summary > span { color: var(--violet); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.maker-summary h2 { margin: 7px 0 20px; font: 700 2rem var(--display); letter-spacing: -.03em; }
.maker-summary > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.maker-summary article { padding: 17px; border-radius: 12px; background: white; }
.maker-summary article b { color: var(--violet); font-size: .64rem; }
.maker-summary article h3 { margin: 7px 0 6px; font: 750 .98rem var(--display); }
.maker-summary article p, .maker-summary-note { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.75; }
.maker-summary-note { margin-top: 18px; }
.maker-summary-note a, .maker-section p a, .maker-checklist a { color: var(--violet-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.maker-studio { margin-top: 40px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; }
.maker-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.maker-field { margin-bottom: 18px; padding: 0; border: 0; }
.maker-field legend, .maker-field { display: block; color: var(--ink); font-size: .74rem; font-weight: 800; }
.maker-field input { width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font: 500 1rem var(--body); }
.maker-field input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.maker-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.maker-chips button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font: 700 .72rem var(--body); cursor: pointer; transition: .15s; }
.maker-chips button:hover { border-color: #b8acef; }
.maker-chips button.active { border-color: var(--violet); background: var(--violet); color: white; }
.maker-output { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--wash); }
.maker-output-label { color: var(--violet); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.maker-result { display: block; min-height: 76px; margin: 12px 0 16px; padding: 18px; border-radius: 12px; background: white; font-size: 1.4rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.maker-actions { display: flex; gap: 9px; }
.maker-actions button { flex: 1; padding: 12px; border: 0; border-radius: 11px; background: var(--violet); color: white; font: 800 .8rem var(--body); cursor: pointer; }
.maker-actions button.ghost { flex: 0 0 auto; padding: 12px 18px; border: 1px solid var(--line); background: white; color: var(--muted); }
.maker-readout { display: flex; gap: 22px; margin: 16px 0 0; }
.maker-readout dt { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.maker-readout dd { margin: 3px 0 0; color: var(--violet); font: 800 1.15rem var(--display); }
.maker-plain { margin: 14px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.7; }
.maker-section { margin-top: 55px; }
.maker-section > p, .pitfall-list p, .maker-checklist li { color: var(--muted); font-size: .92rem; line-height: 1.85; }
.maker-section h3 { margin: 26px 0 8px; font: 750 1.1rem var(--display); }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preset-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.preset-grid small { color: var(--violet); font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.preset-grid button { width: 100%; margin: 10px 0; padding: 16px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--wash); cursor: pointer; }
.preset-grid button:hover { border-color: var(--violet); }
.preset-text { display: block; font-size: 1.15rem; line-height: 1.5; overflow-wrap: anywhere; }
.preset-text.preset-multiline { white-space: pre; font-size: .95rem; }
.preset-grid h3 { margin: 0 0 5px; font: 750 .92rem var(--display); }
.preset-grid p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.65; }
.maker-table-wrap { overflow-x: auto; }
.maker-table-wrap table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.maker-table-wrap th, .maker-table-wrap td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.maker-table-wrap thead th { color: var(--violet); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.maker-table-wrap tbody th { font-weight: 750; white-space: nowrap; }
.frame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.frame-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.frame-demo { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.frame-grid h3 { margin: 0 0 3px; font: 750 .84rem var(--display); }
.frame-grid p { margin: 0; color: var(--muted); font-size: .7rem; }
.pitfall-list { margin: 0; padding: 0; list-style: none; }
.pitfall-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pitfall-list span { color: var(--violet); font: 800 1.1rem var(--display); }
.pitfall-list h3 { margin: 0 0 5px; font: 750 1rem var(--display); }
.pitfall-list p { margin: 0; }
.maker-section blockquote { margin: 26px 0 0; padding: 17px 20px; border-left: 4px solid var(--yellow); background: var(--wash); color: var(--muted); font-size: .88rem; line-height: 1.8; }
.maker-checklist { margin: 18px 0 0; padding-left: 20px; }
.maker-checklist li { margin-bottom: 9px; }
.maker-section details { padding: 15px 0; border-bottom: 1px solid var(--line); }
.maker-section summary { display: flex; justify-content: space-between; gap: 14px; font: 750 .95rem var(--display); cursor: pointer; list-style: none; }
.maker-section summary::-webkit-details-marker { display: none; }
.maker-section summary span { color: var(--violet); }
.maker-section details p { margin: 11px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.maker-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.maker-next-grid a { display: block; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: white; transition: .18s; }
.maker-next-grid a:hover { border-color: #b8acef; transform: translateY(-2px); }
.maker-next-grid b { display: block; margin-bottom: 6px; font: 750 .92rem var(--display); }
.maker-next-grid span { color: var(--muted); font-size: .75rem; line-height: 1.65; }

/* Responsive rules for the Symbol Maker and its tools-hub feature block.
   These live at the end of the file on purpose: the earlier media queries are
   declared above the base rules they would need to beat, so an override placed
   there loses to the later, equally specific desktop declaration. */
@media (max-width: 820px) {
  .tool-maker-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .maker-grid { grid-template-columns: minmax(0, 1fr); }
  .preset-grid, .frame-grid, .maker-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maker-summary > div { grid-template-columns: minmax(0, 1fr); }
  .tool-pair-grid, .tool-pair-grid.tool-pair-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SE-class phones. A 305px viewport leaves ~54px of tile, which is under the width of a
   ten-point divider even at two columns, of a fullwidth 〰〰〰, or of a pair of emoji — so
   the tiers each drop one step rather than the grid clipping them. */
@media (max-width: 380px) {
  .category-symbol-grid button span { font-size: 1.25rem; }
  .category-symbol-grid button span.emoji-glyph { font-size: 1.5rem; }
  .category-symbol-grid button:has(span.symbol-combo) { grid-column: 1 / -1; }
  /* Declared after .emoji-glyph on purpose. The tier classes and .emoji-glyph have equal
     specificity, so whichever comes last wins, and a wide sequence has to be sized by how
     much of it there is — an emoji divider at emoji size is what overflowed the tile. */
  .category-symbol-grid button span.symbol-combo, .category-symbol-grid button span.symbol-wide { font-size: .92rem; }
  .category-symbol-grid button span.symbol-trio { font-size: 1rem; }
}

@media (max-width: 580px) {
  .maker-hero h1 { font-size: 3.6rem; }
  .maker-hero-sample span { font-size: .95rem; }
  .maker-studio, .maker-summary, .tool-maker-feature { padding: 20px; }
  .preset-grid, .frame-grid, .maker-next-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-pair-grid, .tool-pair-grid.tool-pair-wide { grid-template-columns: minmax(0, 1fr); }
  .maker-result { font-size: 1.15rem; }
  .maker-actions { flex-direction: column; }
  .maker-actions button.ghost { flex: 1 1 auto; }
  .pitfall-list li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
}
.typing-methods { margin: 14px 0 18px; padding-left: 20px; color: var(--muted); font-size: .92rem; line-height: 1.9; }
.typing-methods strong { color: var(--ink); }
.typing-methods kbd, .prose-section kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--wash); font: 700 .8em var(--body); }
.source-list { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: .85rem; line-height: 1.9; }
.source-list a { color: var(--violet-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.key-points { margin: 18px 0; padding: 16px 20px; border-left: 4px solid var(--violet); border-radius: 0 12px 12px 0; background: var(--wash); }
.key-points > b { display: block; margin-bottom: 8px; color: var(--violet); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.key-points ul { margin: 0; padding-left: 18px; }
.key-points li { margin-bottom: 5px; color: var(--muted); font-size: .87rem; line-height: 1.75; }
.article-body p strong { color: var(--ink); font-weight: 700; }
.simple-stats { padding: 45px 0 0; }
.simple-stats h2 { margin-bottom: 8px; font: 700 clamp(1.7rem, 3vw, 2.3rem) var(--display); letter-spacing: -.03em; }
.simple-stats > div > p { margin: 0 0 20px; color: var(--muted); font-size: .9rem; }
.simple-stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.simple-stats dl > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.simple-stats dt { color: var(--violet); font: 800 1.5rem var(--display); }
.simple-stats dd { margin: 5px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
@media (max-width: 820px) { .simple-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }