:root {
  color-scheme: light;
  --canvas: #f0f2ed;
  --canvas-deep: #e5e8e1;
  --surface: #fbfcf8;
  --surface-raised: #ffffff;
  --surface-soft: #e9ece5;
  --text: #171914;
  --text-hover: #292b25;
  --muted: #5f645b;
  --line: #d2d7cd;
  --accent: #e65d3f;
  --accent-hover: #c94b31;
  --accent-soft: #fee8df;
  --success: #236b4d;
  --warning: #8a4a24;
  --error: #a83e32;
  --accent-ink: #ffffff;
  --preview-canvas: #0c0d12;
  --preview-ink: #11131a;
  --article-text: #343830;
  --code-text: #7b321f;
  --line-hover: #8c9486;
  --line-upload: #aeb5aa;
  --line-quiet-hover: #9ca49a;
  --violet-bright: #8f6cff;
  --violet-deep: #17152e;
  --ember-bright: #ff8f5c;
  --ember-deep: #36111a;
  --tide-bright: #4fd8dd;
  --tide-deep: #0b2430;
  --moss-bright: #a4d47a;
  --moss-deep: #122119;
  --paper-bright: #e7ddca;
  --paper-deep: #585261;
  --mono-bright: #c6cad4;
  --mono-deep: #252832;
  --preview-white-05: rgba(255, 255, 255, .05);
  --preview-white-07: rgba(255, 255, 255, .07);
  --preview-white-09: rgba(255, 255, 255, .09);
  --preview-white-12: rgba(255, 255, 255, .12);
  --preview-white-13: rgba(255, 255, 255, .13);
  --preview-white-14: rgba(255, 255, 255, .14);
  --preview-white-16: rgba(255, 255, 255, .16);
  --preview-white-18: rgba(255, 255, 255, .18);
  --preview-white-25: rgba(255, 255, 255, .25);
  --preview-white-46: rgba(255, 255, 255, .46);
  --preview-white-48: rgba(255, 255, 255, .48);
  --preview-white-50: rgba(255, 255, 255, .5);
  --preview-white-60: rgba(255, 255, 255, .6);
  --preview-white-62: rgba(255, 255, 255, .62);
  --preview-white-70: rgba(255, 255, 255, .7);
  --preview-black-26: rgba(7, 8, 13, .26);
  --preview-black-34: rgba(8, 9, 14, .34);
  --preview-black-48: rgba(8, 9, 14, .48);
  --preview-shadow: rgba(0, 0, 0, .32);
  --grid-line: rgba(23, 25, 20, .025);
  --success-halo: rgba(35, 107, 77, .1);
  --shadow-soft: 0 18px 52px rgba(41, 48, 36, .1), 0 2px 8px rgba(41, 48, 36, .07);
  --shadow-float: 0 30px 90px rgba(31, 36, 27, .16), 0 4px 12px rgba(31, 36, 27, .12);
  --preview-veil-rgb: 6, 7, 12;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --content: 1360px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--canvas); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 86% 8%, var(--accent-soft), transparent 32%); opacity: .7; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }

.shell, .site-header, .site-footer, .article-shell { width: min(var(--content), calc(100% - 40px)); margin-inline: auto; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-family: "Avenir Next", "Segoe UI Variable Display", sans-serif; font-size: 1rem; font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand__mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: var(--text); color: var(--surface-raised); font-family: "SFMono-Regular", Consolas, monospace; box-shadow: 0 2px 7px rgba(35, 39, 31, .14); }
.site-header nav, .site-footer nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header nav a, .site-footer nav a { color: var(--muted); font-size: .875rem; font-weight: 560; text-decoration: none; transition: color 140ms ease-out; }
.site-header nav a:hover, .site-footer nav a:hover, .site-header nav a[aria-current="page"] { color: var(--text); }

.hero { min-height: 520px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: var(--space-20); align-items: end; padding-block: var(--space-24) var(--space-20); }
.hero__copy { max-width: 860px; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); color: var(--muted); font-size: .75rem; font-weight: 680; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 1px; background: var(--accent); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { margin-top: 0; color: var(--text); font-family: "Avenir Next", "Segoe UI Variable Display", sans-serif; letter-spacing: -.05em; text-wrap: pretty; }
h1 { max-width: 950px; margin-bottom: var(--space-6); font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 650; line-height: .96; }
h2 { margin-bottom: var(--space-5); font-size: clamp(1.75rem, 3vw, 2.65rem); font-weight: 620; line-height: 1.08; }
h3 { margin-bottom: var(--space-2); font-size: 1.125rem; font-weight: 620; line-height: 1.3; }
.hero__lede { max-width: 690px; margin: 0; color: var(--muted); font-size: 1.125rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-5); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; text-decoration: none; font-size: .9rem; font-weight: 700; transition: transform 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--primary { border-color: var(--text); background: var(--text); color: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(27, 29, 24, .12); }
.button--primary:hover { border-color: var(--text-hover); background: var(--text-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 7px 18px rgba(27, 29, 24, .16); }
.button--primary:disabled { cursor: wait; opacity: .62; transform: none; }
.button--quiet { background: transparent; color: var(--text); }
.button--quiet:hover { border-color: var(--line-quiet-hover); background: var(--surface); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-8) 0 0; padding: 0; color: var(--muted); list-style: none; font-size: .8rem; }
.hero__proof li::before { content: "·"; margin-right: var(--space-2); color: var(--success); }
.hero__note { align-self: end; padding: var(--space-6) 0 var(--space-2) var(--space-6); border-left: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.hero__note p { margin: 0; }
.hero__note .hero__note-label { margin-bottom: var(--space-3); color: var(--warning); font-size: .7rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.hero--library { min-height: 620px; }

.home-stage { min-height: calc(100dvh - 76px); display: grid; grid-template-columns: minmax(250px, 3fr) minmax(0, 9fr); gap: clamp(24px, 3vw, 40px); align-items: start; padding-block: clamp(16px, 3vh, 32px); }
.home-stage .hero--compact { min-width: 0; min-height: 0; display: block; padding: 0; }
.home-stage .hero__copy { max-width: 390px; }
.home-stage h1 { font-size: clamp(2.75rem, 4.25vw, 4.25rem); line-height: .98; }
.home-stage .hero__lede { font-size: .95rem; }
.home-stage .hero__note { max-width: 390px; margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.home-stage .hero__note .hero__note-label { color: var(--warning); }

.studio--hero { min-width: 0; padding: 0; }
.studio--hero > .section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface); }
.studio--hero > .section-heading .eyebrow { display: none; }
.studio--hero > .section-heading h2 { font-size: .9rem; letter-spacing: -.01em; }
.studio--hero > .section-heading > p { max-width: 420px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .65rem; text-align: right; }
.studio--hero .studio__layout { display: flex; flex-direction: column; gap: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-float); }
.studio--hero .controls { order: 2; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.studio--hero .specimen { order: 1; width: 100%; min-height: 0; aspect-ratio: 16 / 10; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; scroll-margin-block: var(--space-6); }

.theme-library, .topic-hub { padding-block: var(--space-20); }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.theme-card { width: 100%; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; background: var(--surface-raised); box-shadow: var(--shadow-soft); color: inherit; text-align: left; text-decoration: none; transition: transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out; }
.theme-card:hover { transform: translateY(-2px); border-color: var(--line-hover); box-shadow: var(--shadow-float); }
.theme-card__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-soft); }
.theme-card--violet .theme-card__art { background: radial-gradient(circle at 74% 20%, var(--violet-bright), transparent 26%), linear-gradient(135deg, var(--violet-deep), var(--surface-soft)); }
.theme-card--ember .theme-card__art { background: radial-gradient(circle at 24% 72%, var(--ember-bright), transparent 28%), linear-gradient(135deg, var(--ember-deep), var(--surface-soft)); }
.theme-card--tide .theme-card__art { background: radial-gradient(circle at 70% 34%, var(--tide-bright), transparent 24%), linear-gradient(135deg, var(--tide-deep), var(--surface-soft)); }
.theme-card--moss .theme-card__art { background: radial-gradient(circle at 28% 26%, var(--moss-bright), transparent 22%), linear-gradient(135deg, var(--moss-deep), var(--surface-soft)); }
.theme-card--paper .theme-card__art { background: radial-gradient(circle at 70% 30%, var(--paper-bright), transparent 30%), linear-gradient(135deg, var(--paper-deep), var(--surface-soft)); }
.theme-card--mono .theme-card__art { background: radial-gradient(circle at 34% 28%, var(--mono-bright), transparent 20%), linear-gradient(135deg, var(--mono-deep), var(--canvas)); }
.theme-card__meta { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.theme-card__meta strong { font-size: .9rem; }
.theme-card__meta small { color: var(--muted); font-size: .68rem; text-align: right; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.topic-grid > a { min-height: 240px; padding: var(--space-8); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.topic-grid > a > span { display: block; margin-bottom: var(--space-10); color: var(--accent-hover); font-family: "SFMono-Regular", Consolas, monospace; font-size: .7rem; }
.topic-grid h3 { margin-bottom: var(--space-3); font-size: 1.35rem; }
.topic-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.tool-details { padding-block: var(--space-20); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.detail-grid article { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.detail-grid code { display: inline-block; margin-bottom: var(--space-6); }
.detail-grid p, .tool-explainer p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }
.tool-explainer { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--space-12); margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.tool-explainer h3 { font-size: 1.35rem; }
.tool-explainer p + p { margin-top: var(--space-4); }
.tool-explainer a { color: var(--accent-hover); text-underline-offset: 4px; }

.studio { padding-block: var(--space-20); }
.section-heading { display: grid; grid-template-columns: 7fr 4fr; gap: var(--space-16); align-items: end; margin-bottom: var(--space-10); }
.section-heading h2 { max-width: 760px; margin-bottom: 0; }
.section-heading > p { margin: 0; color: var(--muted); font-size: .95rem; }
.studio__layout { display: grid; grid-template-columns: minmax(290px, 4fr) minmax(0, 8fr); gap: var(--space-5); align-items: stretch; }
.controls { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.controls__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 680; }
.status-dot { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font-size: .7rem; text-transform: uppercase; }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--success-halo); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--muted); font-size: .8rem; font-weight: 620; }
.field input, .field select { width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); }
.field input:hover, .field input:focus, .field select:hover, .field select:focus { border-color: var(--line-hover); }
.upload { min-height: 112px; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px dashed var(--line-upload); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-raised); transition: border-color 140ms ease-out, background-color 140ms ease-out; }
.upload:hover, .upload:focus-within { border-color: var(--accent); background: var(--surface-soft); }
.upload__icon { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--accent-hover); font-size: 1.25rem; }
.upload strong { align-self: end; font-size: .85rem; }
.upload small { color: var(--muted); font-size: .7rem; }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.preset-group { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.preset-group legend { margin-bottom: var(--space-3); color: var(--muted); font-size: .8rem; font-weight: 620; }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.preset { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-raised); }
.preset:has(input:checked) { border-color: var(--accent); background: var(--surface-soft); }
.preset:has(input:focus-visible) { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.preset input { position: absolute; opacity: 0; }
.preset__swatch { width: 34px; height: 34px; border-radius: 6px; }
.preset--violet .preset__swatch { background: linear-gradient(135deg, var(--violet-bright), var(--violet-deep)); }
.preset--ember .preset__swatch { background: linear-gradient(135deg, var(--ember-bright), var(--ember-deep)); }
.preset--tide .preset__swatch { background: linear-gradient(135deg, var(--tide-bright), var(--tide-deep)); }
.preset--moss .preset__swatch { background: linear-gradient(135deg, var(--moss-bright), var(--moss-deep)); }
.preset strong, .preset small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset strong { font-size: .7rem; }
.preset small { color: var(--muted); font-size: .65rem; }
.range-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--muted); font-size: .8rem; font-weight: 620; }
.range-field > span { display: flex; justify-content: space-between; }
.range-field output { color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: .72rem; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.color-field { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); color: var(--muted); font-size: .8rem; font-weight: 620; }
.color-field input { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.color-field code { color: var(--text); font-size: .7rem; }
.export { width: 100%; }
.generator-status { min-height: 38px; margin: var(--space-3) 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.generator-status[data-tone="success"] { color: var(--success); }
.generator-status[data-tone="error"] { color: var(--error); }

.specimen { position: relative; min-height: 690px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--preview-canvas); box-shadow: 0 28px 90px var(--preview-shadow); isolation: isolate; color: var(--preview-text); }
.specimen__art, .specimen__veil { position: absolute; inset: -20px; pointer-events: none; }
.specimen__art { z-index: -3; background-position: center; background-size: cover; filter: blur(var(--preview-blur)); transform: scale(1.04); transition: opacity 240ms cubic-bezier(.16, 1, .3, 1); will-change: transform, filter; }
.specimen__veil { z-index: -2; background: rgba(var(--preview-veil-rgb), var(--preview-overlay)); }
.specimen__motion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.specimen__motion i { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; background: var(--preview-accent); box-shadow: 0 0 14px var(--preview-accent); }
.specimen__motion i:nth-child(1) { left: 8%; top: 18%; animation-delay: -1s; }
.specimen__motion i:nth-child(2) { left: 27%; top: 72%; animation-delay: -3.4s; }
.specimen__motion i:nth-child(3) { left: 48%; top: 24%; animation-delay: -5.2s; }
.specimen__motion i:nth-child(4) { left: 68%; top: 66%; animation-delay: -2.1s; }
.specimen__motion i:nth-child(5) { left: 86%; top: 16%; animation-delay: -4.3s; }
.specimen__motion i:nth-child(6) { left: 92%; top: 82%; animation-delay: -6.5s; }
.specimen[data-motion="particles"] .specimen__motion i { animation: preview-particle 7s ease-in-out infinite; }
.specimen[data-motion="breathe"] .specimen__art { animation: preview-breathe 7s ease-in-out infinite; }
.specimen[data-motion="drift"] .specimen__art { animation: preview-drift 15s ease-in-out infinite alternate; }
.specimen[data-motion="still"] .specimen__art { animation: none; }
.specimen__window { position: absolute; inset: var(--space-5); overflow: hidden; border: 1px solid var(--preview-white-16); border-radius: var(--radius-md); background: var(--preview-black-34); backdrop-filter: blur(10px); }
.window-bar { height: 46px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--space-4); border-bottom: 1px solid var(--preview-white-12); color: var(--preview-white-70); font-size: .68rem; font-weight: 620; }
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--preview-white-25); }
.window-mode { max-width: 120px; justify-self: end; overflow: hidden; padding: 3px 8px; border: 1px solid var(--preview-white-16); border-radius: 999px; white-space: nowrap; text-overflow: ellipsis; }
.workspace { height: calc(100% - 46px); display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.workspace__side { display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); border-right: 1px solid var(--preview-white-12); background: var(--preview-black-26); }
.workspace__brand { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-2) var(--space-5); font-size: .78rem; font-weight: 720; }
.workspace__side > button { min-height: 36px; border: 1px solid var(--preview-white-14); border-radius: 7px; background: var(--preview-white-07); color: inherit; font-size: .68rem; font-weight: 680; text-align: left; padding: 0 var(--space-3); }
.workspace__side nav { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.workspace__side nav button { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: 6px; background: transparent; color: var(--preview-white-62); font-size: .64rem; text-align: left; }
.workspace__side nav button.is-active { background: var(--preview-white-09); color: inherit; }
.workspace__project { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); margin-top: auto; padding: var(--space-3) var(--space-2); border-top: 1px solid var(--preview-white-12); font-size: .62rem; }
.workspace__project small { grid-column: 2; color: var(--preview-white-48); }
.project-dot { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.workspace__main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); }
.workspace__intro { width: min(100%, 520px); }
.mini-label { margin: 0 0 var(--space-3); color: var(--preview-white-46); font-size: .6rem; font-weight: 720; letter-spacing: .12em; }
.workspace__intro h3 { margin-bottom: var(--space-3); color: inherit; font-size: clamp(1.5rem, 3vw, 2.35rem); }
.workspace__intro > p:last-child { max-width: 430px; margin: 0; color: var(--preview-white-62); font-size: .76rem; }
.suggestion-grid { width: min(100%, 520px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2); margin-top: var(--space-6); }
.suggestion-grid button { display: grid; gap: var(--space-2); min-height: 108px; padding: var(--space-3); border: 1px solid var(--preview-white-13); border-radius: 9px; background: var(--preview-white-05); color: inherit; text-align: left; }
.suggestion-grid span { color: var(--preview-accent); font-size: .58rem; font-weight: 720; text-transform: uppercase; }
.suggestion-grid strong { font-size: .7rem; line-height: 1.4; }
.suggestion-grid small { align-self: end; color: var(--preview-white-46); font-size: .57rem; }
.composer { width: min(100%, 520px); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--preview-white-18); border-radius: 12px; background: var(--preview-black-48); }
.composer p { min-height: 46px; margin: 0; color: var(--preview-white-50); font-size: .7rem; }
.composer > div { display: flex; align-items: center; gap: var(--space-3); color: var(--preview-white-60); font-size: .6rem; }
.composer button { width: 27px; height: 27px; margin-left: auto; border: 0; border-radius: 7px; background: var(--preview-text); color: var(--preview-ink); }

@keyframes preview-particle {
  0%, 100% { opacity: .12; transform: translate3d(0, 10px, 0) scale(.75); }
  50% { opacity: .8; transform: translate3d(6px, -12px, 0) scale(1); }
}

@keyframes preview-breathe {
  0%, 100% { filter: blur(var(--preview-blur)) saturate(1); transform: scale(1.04); }
  50% { filter: blur(var(--preview-blur)) saturate(1.12); transform: scale(1.075); }
}

@keyframes preview-drift {
  from { transform: scale(1.09) translate3d(-1.6%, .6%, 0); }
  to { transform: scale(1.09) translate3d(1.6%, -.8%, 0); }
}

.how-it-works { padding-block: var(--space-20); }
.section-heading--compact { grid-template-columns: 1fr; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.steps li { padding: var(--space-6) var(--space-8) var(--space-6) 0; border-right: 1px solid var(--line); }
.steps li + li { padding-left: var(--space-8); }
.steps li:last-child { border-right: 0; }
.steps li > span { display: block; margin-bottom: var(--space-10); color: var(--accent-hover); font-family: "SFMono-Regular", Consolas, monospace; font-size: .72rem; }
.steps p { margin: 0; color: var(--muted); font-size: .9rem; }
.source-callout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); margin-block: var(--space-16) var(--space-24); padding: var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.source-callout h2 { margin-bottom: 0; }
.source-callout p { margin-top: 0; color: var(--muted); }
.text-link { display: inline-flex; gap: var(--space-2); color: var(--text); font-size: .9rem; font-weight: 680; text-underline-offset: 5px; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: start; padding-block: var(--space-10); border-top: 1px solid var(--line); }
.brand--footer { margin-bottom: var(--space-2); }
.site-footer p { margin: 0; color: var(--muted); font-size: .8rem; }
.site-footer .disclaimer { grid-column: 1 / -1; max-width: 800px; padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: .7rem; }

.article-shell { max-width: 1120px; }
.article-hero { padding: var(--space-24) 0 var(--space-16); border-bottom: 1px solid var(--line); }
.article-hero h1 { max-width: 950px; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; }
.article-deck { max-width: 800px; margin: 0; color: var(--muted); font-size: 1.125rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-8); color: var(--muted); font-size: .75rem; }
.article-meta span::before { content: "•"; margin-right: var(--space-2); color: var(--accent); }
.article-layout { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: var(--space-16); justify-content: space-between; padding-block: var(--space-16) var(--space-24); }
.toc { position: sticky; top: var(--space-6); align-self: start; display: grid; gap: var(--space-2); padding-left: var(--space-4); border-left: 1px solid var(--line); }
.toc strong { margin-bottom: var(--space-2); font-size: .75rem; }
.toc a { color: var(--muted); font-size: .75rem; text-decoration: none; }
.toc a:hover { color: var(--text); }
.article-body section { min-width: 0; scroll-margin-top: var(--space-8); margin-bottom: var(--space-16); }
.article-body { min-width: 0; }
.article-body h2 { margin-bottom: var(--space-6); }
.article-body h3 { letter-spacing: -.02em; }
.article-body p, .article-body li, .article-body dd { color: var(--article-text); }
.article-body a { color: var(--accent-hover); text-underline-offset: 4px; }
code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-raised); color: var(--code-text); font-family: "SFMono-Regular", Consolas, monospace; font-size: .82em; }
.callout { margin-block: var(--space-8); padding: var(--space-5); border-left: 2px solid var(--warning); background: var(--surface); }
.callout strong { color: var(--warning); font-size: .8rem; }
.callout p { margin: var(--space-2) 0 0; }
.check-list { display: grid; gap: var(--space-3); padding-left: 0; list-style: none; }
.check-list li { position: relative; padding-left: var(--space-6); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); }
.step-kicker { margin-bottom: var(--space-2); color: var(--accent-hover) !important; font-size: .72rem; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.article-steps { display: grid; gap: var(--space-3); margin: var(--space-8) 0; padding: 0; list-style: none; }
.article-steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.article-steps li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-soft); color: var(--accent-hover); font-family: "SFMono-Regular", Consolas, monospace; font-size: .7rem; }
.article-steps h3 { margin: 0 0 var(--space-2); }
.article-steps p { margin: 0; }
.faq { display: grid; gap: var(--space-3); }
.faq > div { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.faq dt { color: var(--text); font-weight: 680; }
.faq dd { margin: var(--space-2) 0 0; }
.article-cta { padding: var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.article-cta .button { color: var(--accent-ink); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.related-grid a { display: grid; gap: var(--space-3); min-height: 150px; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.related-grid a:hover { border-color: var(--line-hover); }
.related-grid strong { color: var(--text); font-size: .88rem; line-height: 1.4; }
.related-grid span { color: var(--muted); font-size: .76rem; line-height: 1.55; }
.ranked-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ranked-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ranked-list li > span { color: var(--accent-hover); font-family: "SFMono-Regular", Consolas, monospace; font-size: .72rem; }
.ranked-list h3 { margin-bottom: var(--space-2); }
.ranked-list p { margin: 0; }
.comparison-table { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.comparison-table:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.comparison-hint { display: none; margin: calc(var(--space-3) * -1) 0 var(--space-2); color: var(--muted); font-size: .75rem; font-weight: 650; text-align: right; }
.comparison-table table { width: 100%; min-width: 680px; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: var(--space-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--article-text); font-size: .8rem; line-height: 1.5; text-align: left; vertical-align: top; }
.comparison-table thead th { color: var(--text); background: var(--surface-raised); }
.comparison-table tbody th { width: 24%; color: var(--text); }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }

@media (max-width: 900px) {
  .home-stage { min-height: 0; grid-template-columns: 1fr; padding-block: var(--space-16); }
  .home-stage .hero__copy, .home-stage .hero__note { max-width: 720px; }
  .hero { grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
  .hero__note { max-width: 560px; }
  .section-heading, .studio__layout, .source-callout { grid-template-columns: 1fr; }
  .studio__layout { gap: var(--space-4); }
  .controls { order: initial; }
  .studio--hero .controls { border-right: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .studio--hero .specimen { border-left: 1px solid var(--line); border-radius: 0; }
  .specimen { min-height: 620px; }
  .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .toc strong { grid-column: 1 / -1; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: 1fr; }
  .detail-grid, .tool-explainer { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .comparison-hint { display: block; }
}

@media (max-width: 640px) {
  .shell, .site-header, .site-footer, .article-shell { width: min(100% - 28px, var(--content)); }
  .site-header { align-items: flex-start; flex-direction: column; padding-block: var(--space-4); }
  .site-header nav { width: 100%; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-1); }
  .site-header nav a { white-space: nowrap; }
  .hero { min-height: auto; padding-block: var(--space-16); }
  h1 { font-size: clamp(2.75rem, 13vw, 4.25rem); }
  .hero__actions .button { width: 100%; }
  .studio, .how-it-works { padding-block: var(--space-16); }
  .theme-library, .topic-hub { padding-block: var(--space-16); }
  .tool-details { padding-block: var(--space-16); }
  .section-heading { gap: var(--space-6); }
  .presets { grid-template-columns: 1fr; }
  .specimen { min-height: 580px; }
  .specimen__window { inset: var(--space-2); }
  .workspace { grid-template-columns: 1fr; }
  .workspace__side { display: none; }
  .workspace__main { padding: var(--space-4); }
  .suggestion-grid { grid-template-columns: 1fr; }
  .suggestion-grid button:first-child { display: none; }
  .studio--hero .window-bar { height: 34px; padding-inline: var(--space-3); }
  .studio--hero .workspace { height: calc(100% - 34px); }
  .studio--hero .workspace__main { align-items: stretch; justify-content: flex-start; padding: 10px var(--space-4); }
  .studio--hero .workspace__intro { width: 100%; }
  .studio--hero .workspace__intro .mini-label { margin-bottom: var(--space-1); }
  .studio--hero .workspace__intro h3 { margin-bottom: var(--space-1); font-size: 1.2rem; line-height: 1.05; }
  .studio--hero .workspace__intro > p:last-child { max-width: none; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .studio--hero .suggestion-grid { display: none; }
  .studio--hero .composer { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); }
  .studio--hero .composer p { min-height: 18px; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .studio--hero .composer > div { display: none; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: var(--space-6) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
  .steps li > span { margin-bottom: var(--space-5); }
  .source-callout { gap: var(--space-6); margin-block: var(--space-10) var(--space-16); padding: var(--space-6); }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .site-footer .disclaimer { grid-column: 1; }
  .article-hero { padding-block: var(--space-16) var(--space-10); }
  .article-layout { padding-block: var(--space-10) var(--space-16); }
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-steps li { grid-template-columns: 1fr; }
  .ranked-list li { grid-template-columns: 1fr; }
  .article-cta { padding: var(--space-6); }
  .theme-grid, .topic-grid { grid-template-columns: 1fr; }
  .theme-card__meta { align-items: start; flex-direction: column; }
  .theme-card__meta small { text-align: left; }
  .topic-grid > a { min-height: auto; padding: var(--space-6); }
  .topic-grid > a > span { margin-bottom: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}