:root {
  --page: #f5f5f1;
  --page-2: #efefe9;
  --surface: #ffffff;
  --surface-soft: #f9f9f6;
  --ink: #141517;
  --ink-2: #46484d;
  --muted: #777a80;
  --line: #dedfd9;
  --line-strong: #c9cbc5;
  --brand: #F74814;
  --accent-blue: #315dff;
  --accent-orange: #F74814;
  --accent-green: #20a474;
  --accent-purple: #785cf6;
  --accent-yellow: #d49a00;
  --accent-red: #e44b4b;
  --accent: var(--brand);
  --accent-soft: color-mix(in srgb, var(--accent) 11%, white);
  --accent-ink: color-mix(in srgb, var(--accent) 84%, black);
  --shadow: 0 24px 80px rgba(23, 28, 38, .08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Helvetica, Arial, sans-serif;
}

html[data-accent="blue"] { --accent: var(--accent-blue); }
html[data-accent="orange"] { --accent: var(--accent-orange); }
html[data-accent="green"] { --accent: var(--accent-green); }
html[data-accent="purple"] { --accent: var(--accent-purple); }
html[data-accent="yellow"] { --accent: var(--accent-yellow); }
html[data-accent="red"] { --accent: var(--accent-red); }

html[data-theme="dark"] {
  --page: #101113;
  --page-2: #151619;
  --surface: #181a1d;
  --surface-soft: #1d1f22;
  --ink: #f2f3f2;
  --ink-2: #c3c5c8;
  --muted: #858991;
  --line: #2d3035;
  --line-strong: #3a3e44;
  --shadow: 0 24px 80px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); border-radius: 8px; background: var(--ink); color: var(--page); padding: 10px 14px; font-size: 12px; }
.skip-link:focus { transform: translateY(0); }

.section-shell { width: min(1440px, calc(100% - 64px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent); background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: blur(20px) saturate(140%); }
.header-inner { width: min(1440px, calc(100% - 64px)); min-height: 74px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand-lockup { display: inline-flex; align-items: center; width: fit-content; min-height: 38px; }
.official-logo { display: block; width: auto; max-width: 180px; height: 32px; object-fit: contain; object-position: left center; }
.logo-fallback { display: inline-flex; align-items: center; font-size: 20px; font-weight: 720; letter-spacing: -.04em; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; color: var(--ink-2); }
.desktop-nav a { transition: color .2s ease; }
.desktop-nav a:hover { color: var(--ink); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.icon-button { width: 38px; height: 38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); cursor:pointer; }
.icon-button svg { font-size: 18px; }
.header-cta { display:inline-flex; align-items:center; min-height:40px; border-radius:999px; background:var(--ink); color:var(--page); padding:0 18px; font-size:12px; font-weight:650; }

.hero { padding: 94px 0 44px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:72px; align-items:center; min-height:590px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; font-weight:740; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow-pulse { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent); }
.hero h1 { max-width:960px; margin:22px 0 0; font-size:clamp(70px,8.3vw,132px); font-weight:670; line-height:.82; letter-spacing:-.075em; }
.accent-word { color:var(--accent); }
.hero-lede { max-width:700px; margin:34px 0 0; color:var(--ink-2); font-size:clamp(18px,1.55vw,25px); line-height:1.5; letter-spacing:-.025em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:0 21px; font-size:13px; font-weight:680; transition:transform .2s ease, background .2s ease, border .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--accent); color:white; }
.button-primary svg { font-size:17px; }
.button-secondary { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.hero-meta { display:flex; flex-wrap:wrap; gap:24px; margin-top:30px; color:var(--muted); font-size:11px; }
.hero-meta span { display:inline-flex; align-items:center; gap:7px; }
.hero-meta svg { font-size:16px; color:var(--accent); }

.hero-brand-card { position:relative; isolation:isolate; min-height:470px; display:grid; align-content:center; justify-items:center; overflow:hidden; border:1px solid var(--line); border-radius:36px; background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 44%), var(--surface); box-shadow:var(--shadow); }
.brand-card-glow { position:absolute; width:240px; height:240px; border-radius:50%; background:var(--accent); filter:blur(90px); opacity:.14; top:80px; }
.official-app-icon { position:relative; z-index:2; width:172px; height:172px; object-fit:contain; filter:drop-shadow(0 18px 28px rgba(20,25,35,.12)); }
.app-icon-fallback { position:relative; z-index:2; width:172px; height:172px; display:grid; place-items:center; border:1px dashed var(--line-strong); border-radius:38px; background:var(--surface-soft); color:var(--muted); }
.fallback-note { max-width:112px; display:grid; gap:5px; font-size:10px; line-height:1.3; text-align:center; }
.fallback-note strong { color:var(--ink); font-size:15px; letter-spacing:-.03em; }
.fallback-note small { color:var(--muted); font-size:9px; line-height:1.35; }
.brand-card-copy { position:relative; z-index:3; display:grid; justify-items:center; margin-top:24px; }
.brand-card-copy strong { font-size:30px; letter-spacing:-.05em; }
.brand-card-copy span { margin-top:5px; color:var(--muted); font-size:12px; }
.brand-card-orbits span { position:absolute; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink-2); font-family:Georgia,serif; box-shadow:0 8px 30px rgba(0,0,0,.05); }
.brand-card-orbits span:nth-child(1){width:66px;height:66px;left:38px;top:62px;font-size:24px;transform:rotate(-9deg)}
.brand-card-orbits span:nth-child(2){width:52px;height:52px;right:38px;top:104px;font-size:19px;transform:rotate(11deg)}
.brand-card-orbits span:nth-child(3){width:58px;height:58px;left:55px;bottom:56px;font-size:20px;transform:rotate(6deg)}
.brand-card-orbits span:nth-child(4){width:48px;height:48px;right:55px;bottom:70px;font-family:var(--mono);font-size:14px;transform:rotate(-8deg)}
.hero-rule { margin-top:62px; padding:18px 0 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.13em; }
.hero-rule span:nth-child(n+2) { text-align:center; }
.hero-rule span:last-child { text-align:right; }

.interface-section { padding:120px 0 130px; }
.section-heading h2 { margin:18px 0 0; font-size:clamp(52px,6vw,90px); line-height:.91; letter-spacing:-.065em; font-weight:650; }
.split-heading { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.6fr); gap:70px; align-items:end; }
.split-heading > p { margin:0 0 7px; color:var(--ink-2); font-size:17px; line-height:1.65; }
.preview-switcher { min-height:52px; margin-top:58px; display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); }
.preview-mode { min-height:52px; padding:0 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.preview-mode.active { border-bottom-color:var(--accent); color:var(--ink); font-weight:650; }
.preview-mode:disabled { cursor:not-allowed; opacity:.45; }
.preview-status { margin-left:auto; color:var(--muted); font-size:11px; }
.live-dot { width:7px;height:7px;display:inline-block;margin-left:5px;border-radius:50%;background:var(--line-strong); }
.live-dot.active { background:#2db67c; box-shadow:0 0 0 4px rgba(45,182,124,.12); }

.app-stage { margin-top:22px; }
.app-window { --accent: var(--accent-blue); overflow:hidden; border:1px solid var(--line-strong); border-radius:24px; background:#f6f6f4; box-shadow:0 34px 80px rgba(25,30,40,.12); color:#1b1c1e; }
.window-bar { height:47px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid #deded8; background:rgba(251,251,249,.94); }
.traffic-lights { display:flex; gap:7px; }
.traffic-lights i { width:11px;height:11px;border-radius:50%;background:#d6d6d1; }
.traffic-lights i:first-child{background:#ff5f57}.traffic-lights i:nth-child(2){background:#febc2e}.traffic-lights i:nth-child(3){background:#28c840}
.window-title { color:#6e7074; font-size:11px; font-weight:600; }
.window-actions { display:flex; justify-content:flex-end; gap:5px; }
.window-actions button { width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#777; }
.window-actions svg { font-size:14px; }
.workspace-shell { height:720px; display:grid; grid-template-columns:210px minmax(0,1fr) 260px; }
.app-sidebar { display:flex; flex-direction:column; padding:19px 14px 14px; border-right:1px solid #e0e0db; background:#f1f1ee; }
.app-brand { min-height:26px; display:flex; align-items:center; padding:0 6px; }
.app-brand img { max-width:128px; max-height:24px; object-fit:contain; object-position:left center; }
.app-brand-fallback { display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:720;letter-spacing:-.04em; }
.app-tagline { margin:7px 6px 22px; color:#91918c; font-size:8px; }
.sidebar-section { display:grid; gap:2px; margin-bottom:19px; }
.sidebar-section small { padding:0 8px 7px; color:#979790; font-size:7px; font-weight:700; letter-spacing:.12em; }
.side-item { width:100%; height:32px; display:flex; align-items:center; gap:9px; border:0; border-radius:8px; background:transparent; color:#5b5c5f; padding:0 8px; text-align:left; font-size:9px; cursor:pointer; }
.side-item svg { width:14px;height:14px; }
.side-item.active { background:#fff; color:#202124; box-shadow:0 1px 0 rgba(0,0,0,.03); }
.side-item.active svg { color:var(--accent); }
.sidebar-spacer { flex:1; }
.import-button { height:35px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:9px; background:var(--accent); color:#fff; font-size:9px; font-weight:650; }
.import-button svg { font-size:14px; }
.safe-library { display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:7px 4px; color:#767773; }
.safe-library > span { width:7px;height:7px;margin-top:2px;border-radius:50%;background:#33b478;box-shadow:0 0 0 3px rgba(51,180,120,.10); }
.safe-library div { min-width:0;display:grid; }
.safe-library strong { font-size:7.5px;font-weight:650;color:#565752; }
.safe-library small { margin-top:2px;font-size:6.2px;line-height:1.35; }

.font-library { min-width:0; overflow:hidden; background:#fafaf8; }
.library-header { height:83px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;border-bottom:1px solid #e6e6e1; }
.library-header p { margin:0 0 5px;color:#9c9d98;font-size:6.5px;font-weight:700;letter-spacing:.15em; }
.library-header h3 { margin:0;font-size:18px;letter-spacing:-.04em; }
.header-controls { display:flex;gap:6px;align-items:center; }
.search-field { width:180px;height:31px;display:flex;align-items:center;gap:7px;border:1px solid #dedfd9;border-radius:8px;background:#fff;padding:0 9px;color:#92938f; }
.search-field svg{font-size:13px}.search-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#252629;font-size:8px}.search-field input::placeholder{color:#a3a49f}
.square-control { width:31px;height:31px;display:grid;place-items:center;border:1px solid #dedfd9;border-radius:8px;background:#fff;color:#777872; }
.square-control svg { font-size:13px; }
.specimen-control { height:52px;display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid #e6e6e1;background:#f7f7f4; }
.specimen-control label{color:#9a9b96;font-size:6.5px;font-weight:700;letter-spacing:.12em}.specimen-control input{min-width:0;flex:1;border:0;background:transparent;outline:0;color:#3a3b3d;font-size:11px}.specimen-control span{color:#999a95;font-family:var(--mono);font-size:7px}
.font-grid { height:585px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; align-content:start; }
.font-card { min-height:166px; display:grid; grid-template-rows:auto 1fr auto; border:1px solid #e1e1dc; border-radius:12px; background:#fff; padding:14px; text-align:left; cursor:pointer; transition:border .2s ease, box-shadow .2s ease, transform .2s ease; }
.font-card:hover { transform:translateY(-1px);border-color:#c9cbc4;box-shadow:0 9px 22px rgba(0,0,0,.04); }
.font-card.selected { border-color:color-mix(in srgb,var(--accent) 48%,#cfd0cb); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent); }
.card-top { display:flex;justify-content:space-between;gap:12px;color:#434447;font-size:8px;font-weight:650}.card-top small{color:#9a9b96;font-weight:500}
.font-specimen { align-self:center;overflow:hidden;color:#17181a;font-size:31px;line-height:1.05;letter-spacing:-.045em;white-space:nowrap;text-overflow:ellipsis; }
.card-bottom { display:flex;align-items:center;gap:5px;color:#979893;font-size:7px}.card-bottom em{margin-left:auto;font-style:normal;color:#777872}.status-dot{width:6px;height:6px;border-radius:50%;background:#31af78}.inactive-dot{background:#b9bbb5}
.font-card.is-hidden { display:none; }

.font-inspector { overflow:auto; border-left:1px solid #e0e0db; background:#f4f4f1; }
.inspector-heading { padding:24px 18px 13px; }
.inspector-kicker{color:#9a9b96;font-size:6.5px;font-weight:700;letter-spacing:.14em}.inspector-heading h3{margin:7px 0 4px;font-size:16px;letter-spacing:-.04em}.inspector-heading p{margin:0;color:#8a8b86;font-size:8px}
.inspector-badges { display:flex;flex-wrap:wrap;gap:5px;padding:0 18px 17px;border-bottom:1px solid #dedfd9}.inspector-badges span{border:1px solid #d5d6d0;border-radius:999px;background:#fff;padding:4px 7px;color:#747570;font-size:6.5px}.inspector-badges .active-badge{border-color:color-mix(in srgb,var(--accent) 23%,#d5d6d0);background:color-mix(in srgb,var(--accent) 7%,#fff);color:var(--accent-ink)}
.inspector-section { padding:15px 18px;border-bottom:1px solid #dedfd9; }
.inspector-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;color:#92938e;font-size:7px}.inspector-row strong{color:#50514d;font-size:7px;font-weight:600}.section-label{display:flex;align-items:center;justify-content:space-between;color:#6c6d69;font-size:7px;font-weight:650;text-transform:uppercase;letter-spacing:.08em}.section-label strong{color:#a0a19b;font-size:8px}.style-stack{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.style-stack span{padding:5px 7px;border-radius:6px;background:#fff;border:1px solid #e0e1dc;color:#777872;font-size:6.5px}.inspector-note{margin:9px 0 0;color:#8d8e89;font-size:7px;line-height:1.6}.last-inspector-section{border-bottom:0}
.stage-caption { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 3px 0;color:var(--muted);font-size:11px}.stage-caption>span{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600}.stage-caption p{margin:0}.caption-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}

.live-stage { overflow:hidden;border:1px solid var(--line-strong);border-radius:24px;background:var(--surface);box-shadow:var(--shadow); }
.live-frame-toolbar { height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface-soft);font-size:10px}.live-frame-toolbar>div{display:flex;align-items:center;gap:8px}.live-frame-toolbar button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font-size:9px;cursor:pointer}.live-frame-toolbar svg{font-size:14px}.live-stage iframe{width:100%;height:720px;border:0;background:#f7f7f4}

.discovery-section { padding:130px 0; background:var(--page-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.centered-heading { max-width:900px;margin:0 auto;text-align:center; }.centered-heading .eyebrow{justify-content:center}.centered-heading h2{font-size:clamp(54px,6.1vw,90px)}.centered-heading p{max-width:740px;margin:25px auto 0;color:var(--ink-2);font-size:17px;line-height:1.65}
.discovery-board { margin-top:68px;overflow:hidden;border:1px solid var(--line-strong);border-radius:28px;background:var(--surface);box-shadow:var(--shadow); }
.discovery-topbar { min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px;border-bottom:1px solid var(--line)}.discovery-topbar small{display:block;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.15em}.discovery-topbar h3{margin:6px 0 0;font-size:23px;letter-spacing:-.04em}.discovery-actions{display:flex;gap:7px}.discovery-actions button{height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 12px;color:var(--muted);font-size:9px}.discovery-actions .save-search{border-color:var(--accent);background:var(--accent);color:#fff}
.filter-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:0; }.filter-card{min-height:155px;display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:13px;padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.filter-card:nth-child(3n){border-right:0}.filter-card.wide-filter-card{grid-column:span 1}.filter-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.filter-icon svg{font-size:18px}.filter-card span{display:block;color:var(--muted);font-size:7px;font-weight:750;letter-spacing:.13em}.filter-card strong{display:block;margin-top:6px;font-size:12px;letter-spacing:-.02em}.filter-card p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.5}.filter-card>button{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}.filter-card>button svg{font-size:12px}.filter-result-line{min-height:68px;display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--surface-soft);font-size:10px}.filter-result-line span{color:var(--accent);font-family:var(--mono);font-size:8px;letter-spacing:.15em}.filter-result-line strong{font-size:11px}.filter-result-line em{margin-left:auto;color:var(--muted);font-style:normal}

.themes-section { padding:140px 0; }
.themes-shell { display:grid;grid-template-columns:minmax(360px,.78fr) minmax(560px,1.22fr);gap:90px;align-items:center; }.themes-copy h2{margin:18px 0 0;font-size:clamp(54px,5.7vw,84px);line-height:.92;letter-spacing:-.065em}.themes-copy>p{max-width:560px;margin:26px 0 0;color:var(--ink-2);font-size:16px;line-height:1.7}
.theme-choice-list { margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px; }.accent-choice{min-height:52px;display:grid;grid-template-columns:17px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 12px;text-align:left;cursor:pointer}.accent-choice i{width:11px;height:11px;border-radius:50%;background:var(--choice-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--choice-color) 10%,transparent)}.accent-choice span{font-size:11px;font-weight:650}.accent-choice small{color:var(--muted);font-size:8px}.accent-choice.active{border-color:color-mix(in srgb,var(--choice-color) 55%,var(--line));box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-color) 8%,transparent)}.accent-choice[data-accent-choice="blue"]{--choice-color:var(--accent-blue)}.accent-choice[data-accent-choice="orange"]{--choice-color:var(--accent-orange)}.accent-choice[data-accent-choice="green"]{--choice-color:var(--accent-green)}.accent-choice[data-accent-choice="purple"]{--choice-color:var(--accent-purple)}.accent-choice[data-accent-choice="yellow"]{--choice-color:var(--accent-yellow)}.accent-choice[data-accent-choice="red"]{--choice-color:var(--accent-red)}
.theme-demo { --accent: var(--accent-blue); min-width:0; }.mini-window{overflow:hidden;border:1px solid var(--line-strong);border-radius:25px;background:#f7f7f4;box-shadow:0 35px 80px rgba(20,24,30,.12);color:#222326}.mini-titlebar{height:40px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid #deded9;background:#fbfbf9}.mini-titlebar>span{width:9px;height:9px;border-radius:50%;background:#d2d3ce}.mini-titlebar>b{margin-left:auto;margin-right:auto;transform:translateX(-18px);color:#93948f;font-size:8px;font-weight:600}.mini-layout{height:490px;display:grid;grid-template-columns:150px minmax(0,1fr) 170px}.mini-sidebar{display:flex;flex-direction:column;padding:16px 10px;border-right:1px solid #dfdfda;background:#efefec}.mini-logo{display:flex;align-items:center;padding:0 6px 18px;font-size:11px}.mini-logo img{display:block;max-width:94px;max-height:20px;object-fit:contain;object-position:left center}.mini-logo-fallback{font-size:10px;letter-spacing:-.03em}.mini-nav{height:29px;display:flex;align-items:center;gap:8px;border-radius:7px;padding:0 7px;color:#797a75;font-size:7px}.mini-nav i{width:10px;height:10px;border:1px solid currentColor;border-radius:3px}.mini-nav.active{background:#fff;color:#333438}.mini-nav.active i{border-color:var(--accent);background:var(--accent-soft)}.mini-accent-row{display:flex;gap:5px;margin:auto 6px 4px}.mini-accent-row i{width:8px;height:8px;border-radius:50%}.mini-accent-row i:nth-child(1){background:var(--accent-blue)}.mini-accent-row i:nth-child(2){background:var(--accent-orange)}.mini-accent-row i:nth-child(3){background:var(--accent-green)}.mini-accent-row i:nth-child(4){background:var(--accent-purple)}.mini-accent-row i:nth-child(5){background:var(--accent-yellow)}.mini-accent-row i:nth-child(6){background:var(--accent-red)}
.mini-main{padding:19px;background:#fafaf8}.mini-header{display:flex;align-items:center;justify-content:space-between}.mini-header small{display:block;color:#9a9b96;font-size:5px;font-weight:750;letter-spacing:.15em}.mini-header strong{display:block;margin-top:4px;font-size:14px}.mini-header button{width:30px;height:30px;border:0;border-radius:8px;background:var(--accent)}.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px}.mini-grid>div{min-height:132px;display:grid;align-content:space-between;border:1px solid #e0e0db;border-radius:10px;background:#fff;padding:11px}.mini-grid span{color:#888984;font-size:6px}.mini-grid b{overflow:hidden;font-size:24px;font-weight:520;letter-spacing:-.04em;white-space:nowrap}.mini-grid>div:nth-child(1) b{font-family:Georgia,serif}.mini-grid>div:nth-child(3) b{font-family:Trebuchet MS,sans-serif}.mini-grid>div:nth-child(4) b{font-family:Impact,sans-serif;font-weight:400}.mini-inspector{padding:20px 14px;border-left:1px solid #dfdfda;background:#f2f2ef}.mini-inspector small{display:block;color:#9a9b96;font-size:5px;font-weight:750;letter-spacing:.14em}.mini-inspector>strong{display:block;margin:6px 0 10px;font-size:12px}.mini-inspector>span{display:inline-block;margin:0 3px 5px 0;border:1px solid #d8d9d4;border-radius:999px;background:#fff;padding:4px 6px;color:#777873;font-size:5px}.mini-inspector hr{border:0;border-top:1px solid #dedfd9;margin:12px 0}.mini-inspector p{margin:10px 0 3px;color:#969792;font-size:5px}.mini-inspector b{font-size:6px}.mini-inspector .mini-state{color:var(--accent)}
.theme-label{display:grid;grid-template-columns:12px 1fr;align-items:center;gap:7px;margin-top:14px;padding:0 4px}.theme-label>span{width:9px;height:9px;border-radius:50%;background:var(--accent)}.theme-label strong{font-size:10px}.theme-label small{grid-column:2;color:var(--muted);font-size:8px;margin-top:-4px}

.safety-section { padding:135px 0;background:var(--ink);color:var(--page); }.safety-section .eyebrow{color:color-mix(in srgb,var(--page) 48%,transparent)}.safety-section .split-heading>p{color:color-mix(in srgb,var(--page) 66%,transparent)}.safety-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:12px;margin-top:65px}.safety-card{min-height:390px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid color-mix(in srgb,var(--page) 14%,transparent);border-radius:24px;background:color-mix(in srgb,var(--page) 4%,transparent);padding:25px}.large-safety-card{position:relative;overflow:hidden}.safety-visual{min-height:190px}.protection-visual{position:relative;display:grid;place-items:center}.shield-ring{width:112px;height:112px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--page) 16%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);color:var(--accent)}.shield-ring::before,.shield-ring::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--page) 9%,transparent);border-radius:50%}.shield-ring::before{width:170px;height:170px}.shield-ring::after{width:230px;height:230px}.shield-ring svg{font-size:45px}.protect-chip{position:absolute;border:1px solid color-mix(in srgb,var(--page) 16%,transparent);border-radius:999px;background:#18191c;padding:7px 10px;color:color-mix(in srgb,var(--page) 70%,transparent);font-family:var(--mono);font-size:7px;letter-spacing:.12em}.chip-one{left:12%;top:14%}.chip-two{right:9%;top:34%}.chip-three{left:20%;bottom:2%;color:var(--accent)}.safety-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.safety-icon svg{font-size:23px}.safety-copy>span{color:var(--accent);font-family:var(--mono);font-size:9px}.safety-copy h3{margin:10px 0 0;font-size:clamp(22px,2vw,32px);line-height:1.05;letter-spacing:-.045em}.safety-copy p{margin:14px 0 0;color:color-mix(in srgb,var(--page) 58%,transparent);font-size:12px;line-height:1.7}.safety-copy code{color:var(--page);font-family:var(--mono);font-size:.9em}

.closing-section { padding:150px 0 90px;overflow:hidden }.closing-shell{position:relative;min-height:620px;display:grid;place-items:center}.closing-content{position:relative;z-index:2;max-width:900px;text-align:center}.closing-content .eyebrow{justify-content:center}.closing-content h2{margin:22px 0 0;font-size:clamp(60px,7.3vw,110px);line-height:.88;letter-spacing:-.07em}.closing-content h2 span{color:var(--accent)}.closing-content p{margin:27px auto 0;color:var(--ink-2);font-size:17px}.closing-content .button{margin-top:29px}.closing-type span{position:absolute;color:color-mix(in srgb,var(--ink) 6%,transparent);font-family:Georgia,serif;font-size:140px;line-height:1}.closing-type span:nth-child(1){left:-2%;top:10%;transform:rotate(-12deg)}.closing-type span:nth-child(2){right:1%;top:4%;transform:rotate(9deg)}.closing-type span:nth-child(3){left:8%;bottom:2%;transform:rotate(8deg)}.closing-type span:nth-child(4){right:10%;bottom:8%;font-family:var(--mono);font-size:100px;transform:rotate(-10deg)}.closing-type span:nth-child(5){left:46%;top:-5%;font-family:Arial,sans-serif;font-size:80px;transform:rotate(4deg)}

.site-footer { border-top:1px solid var(--line); padding:32px 0 38px; }.footer-inner{display:flex;align-items:end;justify-content:space-between;gap:30px}.footer-brand{display:grid}.footer-brand .official-logo{height:28px}.footer-brand p{margin:8px 0 0;color:var(--muted);font-size:10px}.footer-meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:22px;color:var(--muted);font-size:9px}.footer-meta span+span{position:relative}.footer-meta span+span::before{content:"·";position:absolute;left:-13px;color:var(--line-strong)}

.asset-notice { position:fixed;z-index:150;right:24px;bottom:24px;width:min(520px,calc(100% - 48px));display:flex;gap:16px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:16px;background:var(--surface);box-shadow:0 22px 60px rgba(0,0,0,.14);padding:15px 16px 15px 17px }.asset-notice div{display:grid;gap:4px}.asset-notice strong{font-size:11px}.asset-notice span{color:var(--muted);font-size:9px;line-height:1.55}.asset-notice code{font-family:var(--mono);font-size:.95em;color:var(--ink)}.asset-notice button{width:26px;height:26px;flex:0 0 auto;border:0;border-radius:50%;background:var(--surface-soft);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}

[data-official-asset].asset-missing { display:none !important; }
[data-official-asset]:not(.asset-missing) + .logo-fallback,
[data-official-asset]:not(.asset-missing) + .app-icon-fallback,
.app-brand img:not(.asset-missing) + .app-brand-fallback,
.mini-logo img:not(.asset-missing) + .mini-logo-fallback { display:none; }

@media (max-width: 1180px) {
  .workspace-shell { grid-template-columns:180px minmax(0,1fr) 220px; height:650px; }
  .font-grid { height:515px; }
  .font-specimen{font-size:27px}.themes-shell{grid-template-columns:1fr;gap:60px}.theme-demo{max-width:920px}.safety-grid{grid-template-columns:1fr 1fr}.large-safety-card{grid-column:1/-1}.filter-grid{grid-template-columns:repeat(2,1fr)}.filter-card:nth-child(3n){border-right:1px solid var(--line)}.filter-card:nth-child(2n){border-right:0}
}

@media (max-width: 900px) {
  .section-shell,.header-inner{width:min(100% - 38px,1440px)}.desktop-nav{display:none}.header-inner{grid-template-columns:1fr auto}.header-actions{grid-column:2}.hero{padding-top:64px}.hero-grid{grid-template-columns:1fr;gap:48px;min-height:0}.hero-brand-card{min-height:390px;max-width:620px}.hero-rule{grid-template-columns:repeat(2,1fr);gap:10px}.hero-rule span{text-align:left!important}.split-heading{grid-template-columns:1fr;gap:28px}.split-heading>p{max-width:700px}.workspace-shell{grid-template-columns:165px minmax(0,1fr)}.font-inspector{display:none}.font-grid{grid-template-columns:1fr 1fr}.preview-status{display:none}.filter-grid{grid-template-columns:1fr}.filter-card,.filter-card:nth-child(2n),.filter-card:nth-child(3n){border-right:0}.safety-grid{grid-template-columns:1fr}.large-safety-card{grid-column:auto}.safety-card{min-height:320px}.footer-inner{align-items:flex-start;flex-direction:column}.footer-meta{justify-content:flex-start}
}

@media (max-width: 680px) {
  .site-header{position:relative}.header-inner{min-height:66px}.header-cta{display:none}.hero h1{font-size:clamp(62px,19vw,92px)}.hero-grid{gap:36px}.hero-brand-card{min-height:330px}.official-app-icon,.app-icon-fallback{width:140px;height:140px}.brand-card-orbits span:nth-child(1){left:24px;top:38px}.brand-card-orbits span:nth-child(2){right:24px;top:78px}.brand-card-orbits span:nth-child(3){left:28px;bottom:36px}.brand-card-orbits span:nth-child(4){right:28px;bottom:42px}.interface-section,.discovery-section,.themes-section,.safety-section{padding:92px 0}.section-heading h2,.themes-copy h2{font-size:clamp(49px,15vw,72px)}.preview-switcher{overflow:auto}.preview-mode{white-space:nowrap}.workspace-shell{grid-template-columns:1fr;height:570px}.app-sidebar{display:none}.library-header{padding:0 14px}.search-field{width:120px}.font-grid{height:435px;grid-template-columns:1fr;padding:10px}.font-card{min-height:138px}.font-specimen{font-size:29px}.stage-caption{align-items:flex-start;flex-direction:column;gap:6px}.discovery-board{border-radius:20px}.discovery-topbar{padding:0 16px}.filter-card{grid-template-columns:38px minmax(0,1fr) 26px;padding:18px 15px}.filter-result-line{align-items:flex-start;flex-direction:column;gap:5px;padding:16px}.filter-result-line em{margin-left:0}.theme-choice-list{grid-template-columns:1fr}.mini-layout{grid-template-columns:100px minmax(0,1fr)}.mini-inspector{display:none}.mini-window{border-radius:20px}.mini-grid{grid-template-columns:1fr}.mini-grid>div:nth-child(n+3){display:none}.mini-layout{height:410px}.closing-section{padding:100px 0 70px}.closing-shell{min-height:560px}.closing-content h2{font-size:clamp(54px,16vw,80px)}.closing-type span{font-size:90px}.asset-notice{right:16px;bottom:16px;width:calc(100% - 32px)}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {.reveal{opacity:1;transform:none}}