@layer base, layout, components, responsive;

@layer base {
  :root { color-scheme: light; --paper: #f5f3ed; --white: #fffefa; --ink: #252722; --muted: #6c6d64; --line: #deded4; --coral: #e86945; --coral-dark: #a63c20; --soft-coral: #f6e3d9; --green: #dde6da; --radius: 1.25rem; --font: "Segoe UI", Arial, sans-serif; }
  html { box-sizing: border-box; scroll-behavior: smooth; scrollbar-gutter: stable; }
  :where(body, main, header, footer, nav, section, article, aside, div, form, input, textarea, select, button, a, p, h1, h2, h3, ul, ol, li, dialog, details, summary, span, label) { box-sizing: inherit; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
  h1, h2, h3, p { margin-block: 0; }
  h1, h2, h3 { line-height: 1.1; font-weight: 550; letter-spacing: -.045em; }
  h1 { font-size: clamp(2.75rem, 1.8rem + 3.2vw, 5.5rem); }
  h2 { font-size: clamp(2rem, 1.3rem + 1.7vw, 3.25rem); }
  h3 { font-size: 1.4rem; letter-spacing: -.025em; }
  em { color: var(--coral-dark); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
  p { overflow-wrap: anywhere; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  button:disabled { cursor: not-allowed; }
  :where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 4px; }
  main:focus { outline: none; }
  :where(button, a) { touch-action: manipulation; }
  [hidden] { display: none !important; }
  ::selection { background: #edc5ae; color: #252722; }
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .muted, .small-text { color: var(--muted); }
  .small-text { font-size: .85rem; }
}

@layer layout {
  .page-wrap { inline-size: min(100% - 6rem, 1320px); margin-inline: auto; }
  .section { padding-block: 5rem; }
  .page-content { padding-block: 4.5rem 7rem; min-block-size: 65dvh; }
  .site-header { position: relative; z-index: 10; background: var(--paper); border-block-end: 1px solid var(--line); }
  .header-inner { inline-size: min(100% - 6rem, 1420px); margin-inline: auto; min-block-size: 96px; display: flex; align-items: center; gap: 2.5rem; }
  .brand { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; font-size: 1.8rem; font-weight: 750; line-height: 1; letter-spacing: -.065em; }
  .brand-symbol { font-size: 2.5rem; font-weight: 400; color: var(--coral-dark); line-height: 1; }
  .brand-dot { color: var(--coral-dark); }
  .primary-nav { display: flex; align-items: center; gap: 2rem; margin-inline-start: auto; }
  .primary-nav a, .account-link { font-size: .9rem; line-height: 1.2; padding-block: .8rem; white-space: nowrap; }
  .primary-nav a[aria-current] { color: var(--coral-dark); }
  .header-actions { display: flex; align-items: center; gap: 1.4rem; }
  .account-link { display: inline-flex; align-items: center; gap: .8rem; }
  .stage-badge { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .65rem; font-size: .65rem; letter-spacing: .01em; white-space: nowrap; }
  .stage-badge > span { inline-size: .35rem; block-size: .35rem; background: #78866c; border-radius: 50%; }
  .menu-toggle { display: none; }
  .mobile-nav { border-block-start: 1px solid var(--line); padding: 1rem 1.5rem 1.5rem; }
  .mobile-nav a { display: block; padding-block: .65rem; }
  .skip-link { position: fixed; inset-inline-start: 1rem; inset-block-start: -8rem; z-index: 100; background: var(--ink); color: var(--white); padding: 1rem; border-radius: .5rem; }
  .skip-link:focus { inset-block-start: 1rem; }
  .site-footer { padding: 3rem max(3rem, calc((100% - 1320px) / 2)); border-block-start: 1px solid var(--line); }
  .footer-top { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; padding-block-end: 2rem; }
  .footer-top p { color: var(--muted); font-size: .95rem; }
  .domain-link { margin-inline-start: auto; font-size: 1.1rem; }
  .domain-link span { margin-inline-start: 1rem; }
  .footer-bottom { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; font-size: .75rem; color: var(--muted); }
  .footer-bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
  .footer-note { margin-inline-start: auto; }
}

@layer components {
  .eyebrow, .mini-label { display: block; font-size: .68rem; letter-spacing: .13em; font-weight: 600; line-height: 1.5; }
  .eyebrow { color: var(--muted); margin-block-end: 1.4rem; }
  .mini-label { letter-spacing: .08em; }
  .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .button { min-block-size: 52px; border: 1px solid transparent; border-radius: .5rem; padding: .8rem 1.2rem; display: inline-flex; justify-content: space-between; align-items: center; gap: 1.6rem; font-size: .9rem; font-weight: 550; line-height: 1.35; transition: background .2s, transform .2s; }
  .button.primary { background: var(--ink); color: var(--white); }
  .button.primary:hover:not(:disabled) { background: #464940; transform: translateY(-2px); }
  .button.secondary { background: transparent; border-color: #bfc0b4; }
  .button.secondary:hover:not(:disabled) { background: #eae8df; }
  .button.danger { background: #99351f; color: white; }
  .button.unavailable { background: #e9e7de; color: #707166; inline-size: 100%; }
  .text-link, .text-button { font-size: .85rem; font-weight: 550; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35rem; }
  .text-link span { margin-inline-start: .9rem; }
  .text-button { border: 0; padding: .5rem 0; background: transparent; text-align: start; }
  .icon-button { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; background: transparent; border: 1px solid var(--line); border-radius: .5rem; font-size: 1.4rem; line-height: 1; }
  .icon-button:hover:not(:disabled) { background: #eeece4; }
  .hero { min-block-size: 670px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 2rem; align-items: center; padding-block: 3.25rem 4.5rem; }
  .hero h1 { font-size: clamp(4rem, 3rem + 3vw, 6.6rem); line-height: 1.02; letter-spacing: -.065em; }
  .hero .eyebrow { margin-block-end: 2rem; }
  .hero-description { max-inline-size: 400px; font-size: 1.05rem; line-height: 1.7; color: var(--muted); margin-block: 1.7rem 2rem; }
  .hero-footnote { margin-block-start: 1.5rem; font-size: .72rem; color: var(--muted); }
  .hero-art { position: relative; isolation: isolate; min-inline-size: 0; aspect-ratio: 1.04; border-radius: 50% 50% .7rem .7rem; background: radial-gradient(ellipse at 38% 28%, #fff7d4, transparent 60%), linear-gradient(145deg, #e8e4d7, #efbdae 65%, #e9e6d8); overflow: clip; }
  .art-sun { position: absolute; inline-size: 44%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #ffb068, #e76843); inset-inline-start: 29%; inset-block-start: 10%; box-shadow: 0 0 80px #f8d0aa; }
  .art-orbit { position: absolute; border: 1px solid #caa798; border-radius: 50%; inline-size: 120%; aspect-ratio: 1; transform: rotate(-25deg) scaleY(.36); inset-inline-start: -10%; inset-block-start: 8%; }
  .orbit-two { transform: rotate(47deg) scaleY(.52); }
  .art-sculpture { position: absolute; inset-block-start: 31%; inset-inline-start: 16%; inline-size: 65%; aspect-ratio: 1.6; transform: rotate(-27deg); filter: drop-shadow(20px 22px 14px #8f78635c); }
  .art-sculpture span { display: block; position: absolute; inline-size: 100%; block-size: 60%; border-radius: 50%; background: linear-gradient(180deg, #f7f2e7, #b7bdab 45%, #696f61 72%, #dae0c9); border: 1px solid #b3b9a3; }
  .art-sculpture span:nth-child(1) { inset-block-start: 0; }
  .art-sculpture span:nth-child(2) { inset-block-start: 18%; }
  .art-sculpture span:nth-child(3) { inset-block-start: 36%; }
  .art-sculpture span:nth-child(4) { inset-block-start: 54%; background: linear-gradient(180deg, #f9f6ed, #ccd2ba 55%, #979f8a); }
  .art-note { position: absolute; background: #fffdf4ee; border: 1px solid #ffffff; padding: 1rem 1.1rem; border-radius: .5rem; box-shadow: 0 15px 35px #896c5421; min-inline-size: 45%; }
  .art-note span { display: block; color: var(--muted); font-size: .55rem; letter-spacing: .09em; margin-block-end: .6rem; }
  .art-note b { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; }
  .note-top { inset-inline-start: 7%; inset-block-start: 12%; transform: rotate(-8deg); }
  .note-bottom { inset-inline-end: 6%; inset-block-end: 15%; transform: rotate(5deg); }
  .art-note i { display: inline-block; margin-inline-start: .8rem; font-size: 1.4rem; font-style: normal; color: var(--coral-dark); }
  .art-caption { position: absolute; inset-block-end: 1.4rem; inset-inline-start: 0; inline-size: 100%; text-align: center; letter-spacing: .1em; font-size: .48rem; color: #6f6355; }
  .category-strip { border-block: 1px solid var(--line); }
  .category-strip > div { display: flex; flex-wrap: wrap; }
  .category-strip a { flex: 1 1 150px; padding: 1.5rem .9rem; display: flex; align-items: center; gap: .8rem; font-size: .88rem; }
  .category-strip a:hover { color: var(--coral-dark); }
  .category-strip a span:first-child { color: var(--muted); font-size: .6rem; }
  .category-strip a span:last-child { margin-inline-start: auto; }
  .section-heading { display: flex; gap: 2rem; justify-content: space-between; align-items: flex-end; margin-block-end: 2.5rem; }
  .section-heading .eyebrow { margin-block-end: 1rem; }
  .section-heading > p { color: var(--muted); font-size: .9rem; }
  .inspiration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .inspiration-card { min-inline-size: 0; }
  .inspiration-art { aspect-ratio: 1.05; display: grid; place-content: center; position: relative; border-radius: .7rem; background: #e9c4a4; overflow: clip; }
  .inspiration-art > span { font-family: Georgia, serif; font-size: 8rem; line-height: 1; transform: rotate(-15deg); color: #f4f0dd; text-shadow: 15px 13px 0 #b86a49; }
  .inspiration-art small { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem; font-size: .55rem; letter-spacing: .14em; }
  .theme-type .inspiration-art { background: #dce1d2; }
  .theme-type .inspiration-art > span { color: #394535; text-shadow: 3px 3px 0 #f6f2e8; font-size: 6rem; transform: rotate(-8deg); }
  .theme-motion .inspiration-art { background: radial-gradient(ellipse at 60% 40%, #f8f0cc, #dd957a); }
  .theme-motion .inspiration-art > span { font-size: 5rem; color: #bd4e32; text-shadow: -26px 0 0 #f5e9d8, 26px 0 0 #833f35; }
  .theme-wave .inspiration-art { background: #d3dbdb; }
  .theme-wave .inspiration-art > span { font-family: Georgia, serif; font-size: 11rem; color: #4c6569; text-shadow: 12px 12px 0 #f6f3e8; transform: rotate(12deg); }
  .inspiration-copy { padding: 1.3rem .1rem; }
  .inspiration-copy h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -.03em; }
  .inspiration-copy p { color: var(--muted); font-size: .82rem; margin-block: .65rem 1rem; }
  .tool-grid, .draft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
  .tool-card { display: flex; flex-direction: column; min-inline-size: 0; padding: 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: .8rem; }
  .tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.6rem; }
  .tool-icon { inline-size: 48px; block-size: 48px; display: inline-grid; place-items: center; background: #eeede4; border-radius: .7rem; font-size: 1.7rem; flex: 0 0 auto; line-height: 1; }
  .tool-icon.small { inline-size: 34px; block-size: 34px; font-size: 1.2rem; }
  .category-text { background: #e4e8dc; color: #43523a; }
  .category-image { background: #f6dfcf; color: #a04a2d; }
  .category-video { background: #e7ded5; color: #72543c; }
  .category-audio { background: #dce7e6; color: #3d6461; }
  .category-assistants { background: #eeead6; color: #78632f; }
  .provider-name { color: var(--muted); font-size: .7rem; text-align: end; overflow-wrap: anywhere; }
  .tool-card h3 { font-size: 1.25rem; overflow-wrap: anywhere; }
  .tool-card > p { color: var(--muted); font-size: .83rem; margin-block: .8rem 1.5rem; }
  .tool-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-block-start: auto; }
  .availability { font-size: .65rem; color: var(--muted); }
  .round-link { display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto; }
  .round-link:hover { background: var(--soft-coral); }
  .section-caption { font-size: .75rem; color: var(--muted); margin-block-start: 1.5rem; }
  .studio-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3.5rem; background: #e7eadd; border-radius: var(--radius); }
  .studio-callout > div > p { max-inline-size: 380px; font-size: .9rem; color: #5e6557; margin-block: 1.5rem 2rem; }
  .steps { padding: 0; margin: 0; list-style: none; align-self: center; }
  .steps li { display: flex; gap: 1.3rem; align-items: flex-start; padding-block: 1.4rem; }
  .steps li:not(:last-child) { border-block-end: 1px solid #c8cebc; }
  .steps li > span { color: #5e6557; font-size: .75rem; padding-block-start: .2rem; }
  .steps h3 { font-size: 1.25rem; }
  .steps p { margin-block-start: .5rem; color: #5e6557; font-size: .85rem; }
  .page-heading { display: flex; align-items: flex-end; gap: 2rem; justify-content: space-between; margin-block-end: 3.5rem; }
  .page-heading h1 { line-height: 1.07; }
  .page-heading p { margin-block-start: 1.7rem; color: var(--muted); max-inline-size: 560px; font-size: .95rem; }
  .page-heading > .button { flex: 0 0 auto; }
  .catalog-toolbar { display: flex; align-items: center; gap: 2rem; margin-block-end: 1.5rem; }
  .search-field { display: flex; align-items: center; gap: .8rem; border: 1px solid #bfc0b4; border-radius: .5rem; padding-inline: 1rem; inline-size: min(100%, 490px); background: var(--white); }
  .search-field > span[aria-hidden] { font-size: 1.7rem; }
  .search-field input { inline-size: 100%; min-inline-size: 0; background: transparent; border: none; padding-block: .9rem; font-size: .9rem; }
  .search-field:focus-within { outline: 3px solid var(--coral-dark); outline-offset: 3px; }
  .search-field input:focus-visible { outline: none; }
  .catalog-note { font-size: .75rem; color: var(--muted); margin-inline-start: auto; }
  .filter-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 1.7rem; }
  .filter-chip { padding: .65rem 1rem; min-block-size: 44px; border: 1px solid var(--line); background: transparent; border-radius: 999px; font-size: .82rem; line-height: 1.2; }
  .filter-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .filter-chip:hover:not([aria-pressed="true"]) { background: #eae8df; }
  .result-count { color: var(--muted); font-size: .73rem; margin-block-end: 1rem; }
  .catalog-empty { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; border-block: 1px solid var(--line); }
  .catalog-empty h2 { font-size: 1.8rem; }
  .catalog-empty p { margin-block: .7rem 1rem; color: var(--muted); }
  .subtle-callout { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; border-block: 1px solid var(--line); margin-block-start: 3rem; padding-block: 1.8rem; }
  .subtle-callout > span { font-size: 2rem; color: var(--coral-dark); }
  .subtle-callout > p { flex: 1 1 300px; font-size: .85rem; color: var(--muted); }
  .subtle-callout strong { color: var(--ink); }
  .notice { background: #f6e9dd; border: 1px solid #dfc4ad; border-radius: .7rem; padding: 1.2rem; font-size: .85rem; margin-block-end: 1.5rem; }
  .notice p { margin-block-start: .4rem; }
  .workspace-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .8fr); gap: 2rem; align-items: start; }
  .editor-panel { padding: 2rem; border: 1px solid var(--line); background: var(--white); border-radius: .9rem; min-inline-size: 0; }
  .panel-heading { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding-block-end: 1.7rem; border-block-end: 1px solid var(--line); margin-block-end: 1.5rem; }
  .panel-heading h2 { font-size: 1.5rem; }
  .save-state { color: var(--muted); font-size: .63rem; text-align: end; }
  .field-label { display: flex; gap: .75rem; justify-content: space-between; align-items: baseline; font-size: .8rem; font-weight: 550; margin-block: 1.5rem .55rem; }
  .field-label > span { color: var(--muted); font-size: .68rem; font-weight: 400; }
  .text-input { inline-size: 100%; min-inline-size: 0; border: 1px solid #c8c9bd; border-radius: .45rem; background: var(--white); padding: .8rem 1rem; font-size: .88rem; }
  .prompt-input { inline-size: 100%; min-block-size: 260px; resize: vertical; border: 1px solid #c8c9bd; border-radius: .45rem; background: var(--white); padding: 1.1rem; line-height: 1.7; font-size: .95rem; }
  .selected-tool-info { display: flex; align-items: flex-start; gap: .7rem; margin-block-start: .85rem; }
  .selected-tool-info p { color: var(--muted); font-size: .72rem; }
  .editor-notes { margin-block-start: 1rem; }
  .editor-notes summary { cursor: pointer; color: var(--muted); font-size: .8rem; padding-block: .5rem; }
  .notes-input { margin-block-start: .7rem; resize: vertical; }
  .editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 1.6rem; }
  .privacy-note { color: var(--muted); font-size: .68rem; margin-block-start: 1.5rem; }
  .form-message { font-size: .78rem; margin-block-start: .9rem; }
  .form-message:empty { display: none; }
  .form-message.is-error { color: #a12b1c; }
  .workspace-aside { display: grid; gap: 1.5rem; min-inline-size: 0; }
  .connection-panel { padding: 1.7rem; background: #e8eadd; border-radius: .9rem; }
  .connection-panel h2 { font-size: 2rem; margin-block: 1rem 1.4rem; }
  .connection-panel > p:not(.status-line) { font-size: .8rem; color: #5e6557; margin-block: 1rem; }
  .connection-panel .small-text { font-size: .68rem !important; }
  .connection-panel .text-button { font-size: .72rem; }
  .status-line { display: flex; align-items: flex-start; gap: .5rem; font-size: .74rem; line-height: 1.5; color: #64695c; }
  .status-dot { inline-size: .4rem; block-size: .4rem; margin-block-start: .36rem; border-radius: 50%; background: #7a806d; flex: 0 0 auto; }
  .prompt-advice { padding: 1.5rem .4rem; }
  .prompt-advice h3 { font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
  .prompt-advice .eyebrow { margin-block-end: 1rem; }
  .prompt-advice ul { padding-inline-start: 1rem; font-size: .8rem; color: var(--muted); margin-block: 1.2rem 1.5rem; }
  .prompt-advice li { padding-block: .25rem; }
  .empty-state { padding: 4rem 1.5rem; text-align: center; border: 1px solid var(--line); border-radius: .9rem; }
  .empty-symbol { display: block; color: var(--coral-dark); font-size: 3rem; margin-block-end: 1.5rem; }
  .empty-state h2 { font-size: 2rem; }
  .empty-state p { max-inline-size: 550px; margin: 1rem auto 1.7rem; color: var(--muted); font-size: .9rem; }
  .draft-card { display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid var(--line); background: var(--white); border-radius: .8rem; min-inline-size: 0; }
  .draft-card-top { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; color: var(--muted); margin-block-end: 1.4rem; }
  .draft-card-top .mini-label { font-size: .57rem; }
  .draft-card-top time { font-size: .63rem; white-space: nowrap; }
  .draft-card h2 { font-size: 1.5rem; letter-spacing: -.03em; overflow-wrap: anywhere; }
  .draft-excerpt { color: var(--muted); margin-block: 1rem; font-size: .83rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-clamp: 4; overflow: clip; }
  .draft-tool { color: var(--muted); font-size: .65rem; margin-block-start: auto; padding-block-start: .6rem; }
  .draft-actions { display: flex; align-items: center; gap: .5rem; margin-block-start: 1.4rem; }
  .draft-actions .text-link { margin-inline-end: auto; }
  .draft-actions .icon-button { border: 0; }
  .account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .account-panel { padding: 2rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--white); display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; }
  .account-panel h2 { font-size: 1.65rem; margin-block: 1.4rem 1rem; }
  .account-panel > p:not(.status-line) { font-size: .85rem; color: var(--muted); margin-block: 1rem 1.5rem; }
  .account-panel .text-link { margin-block-start: auto; }
  .balance-placeholder { font-size: 3rem; line-height: 1; color: var(--muted); }
  .lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
  .lesson-card { border-block-start: 1px solid var(--ink); padding-block: 1.5rem; min-inline-size: 0; }
  .lesson-number { display: block; font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: #aab39d; margin-block-end: 2rem; }
  .lesson-card h2 { font-size: 1.85rem; margin-block: 1.2rem; }
  .lesson-card > p, .lesson-card details { font-size: .85rem; color: var(--muted); }
  .lesson-card details { margin-block: 1.3rem; }
  .lesson-card summary { cursor: pointer; color: var(--ink); padding-block: .5rem; }
  .lesson-card details p, .lesson-card details ul { margin-block-start: .7rem; }
  .community-banner { display: flex; justify-content: center; align-items: center; gap: 5rem; padding: 3.5rem; border-radius: 1rem; background: #edc9b5; margin-block-end: 2.5rem; }
  .community-mark { color: #a9472a; font-size: clamp(7rem, 18vw, 15rem); line-height: 1; }
  .community-banner h2 { font-size: clamp(2rem, 3vw, 3.5rem); }
  .community-banner p { margin-block-start: 1.2rem; max-inline-size: 400px; color: #77513e; font-size: .9rem; }
  .community-banner .eyebrow { color: #77513e; }
  .partner-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .partner-art { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; aspect-ratio: 1.1; background: #dfe4d6; border-radius: 50% 50% 1rem 1rem; padding: 2rem; }
  .partner-art span { font-size: 7rem; line-height: 1; color: #58674b; }
  .partner-art span:nth-child(2) { color: #b85535; font-size: 10rem; }
  .prose-panel p { color: var(--muted); margin-block: 1.5rem; font-size: .9rem; }
  .faq-layout { max-inline-size: 1000px; }
  .faq-list details { border-block-start: 1px solid var(--line); padding-block: 1.4rem; }
  .faq-list details:last-child { border-block-end: 1px solid var(--line); }
  .faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; cursor: pointer; font-size: 1.05rem; line-height: 1.5; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary > span { color: var(--coral-dark); font-size: 1.3rem; line-height: 1.2; }
  .faq-list details[open] summary > span { transform: rotate(45deg); }
  .faq-list details p { color: var(--muted); max-inline-size: 750px; margin-block-start: 1.2rem; font-size: .9rem; }
  .toast { position: fixed; z-index: 50; inset-inline: 1rem; inset-block-end: 1.5rem; margin-inline: auto; inline-size: fit-content; max-inline-size: min(100% - 2rem, 560px); padding: 1rem 1.4rem; background: var(--ink); color: var(--white); box-shadow: 0 8px 30px #25272230; border-radius: .7rem; font-size: .85rem; }
  .confirmation-dialog { border: 1px solid var(--line); border-radius: 1rem; background: var(--white); color: var(--ink); inline-size: min(100% - 2rem, 480px); padding: 2rem; }
  .confirmation-dialog::backdrop { background: #25272270; }
  .confirmation-dialog h2 { font-size: 2rem; margin-block-end: 1rem; }
  .confirmation-dialog p { font-size: .9rem; margin-block: .8rem; overflow-wrap: anywhere; }
  .confirmation-dialog .button-row { margin-block-start: 1.5rem; }
  .loading-state { max-inline-size: 1000px; margin-inline: auto; min-block-size: 60dvh; padding: 6rem 2rem; }
  .loading-state h1 { font-size: 2.5rem; }
  .noscript-message { margin: 2rem; padding: 1rem; border: 1px solid var(--line); }
}

@layer responsive {
  @media (max-width: 1150px) {
    .header-inner { gap: 1.5rem; }
    .primary-nav { gap: 1.3rem; }
    .stage-badge { display: none; }
    .hero { min-block-size: 580px; }
    .hero h1 { font-size: clamp(3.9rem, 6.6vw, 6rem); }
    .hero-art { aspect-ratio: .84; }
    .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .inspiration-art { aspect-ratio: 1.5; }
    .workspace-layout { gap: 1.3rem; }
    .editor-panel { padding: 1.5rem; }
    .account-panel { padding: 1.5rem; }
  }
  @media (max-width: 850px) {
    .page-wrap, .header-inner { inline-size: calc(100% - 3rem); }
    .header-inner { min-block-size: 80px; }
    .primary-nav { display: none; }
    .header-actions { margin-inline-start: auto; }
    .menu-toggle { display: inline-grid; }
    .stage-badge { display: inline-flex; }
    .hero { gap: 1.3rem; min-block-size: unset; padding-block: 3rem; }
    .hero h1 { font-size: clamp(3.4rem, 7vw, 5rem); }
    .hero-art { aspect-ratio: .7; }
    .hero-description { font-size: .9rem; }
    .hero .button-row { align-items: stretch; }
    .hero .button { inline-size: 100%; }
    .hero-footnote { display: none; }
    .art-note { min-inline-size: 65%; }
    .art-note b { font-size: 1rem; }
    .art-caption { font-size: .4rem; }
    .section { padding-block: 3.5rem; }
    .category-strip a { flex: 1 1 30%; padding-block: 1rem; }
    .studio-callout { padding: 2.5rem; gap: 2rem; }
    .workspace-layout { grid-template-columns: minmax(0, 1fr); }
    .workspace-aside { grid-template-columns: 1fr 1fr; }
    .account-grid, .lesson-grid { grid-template-columns: minmax(0, 1fr); }
    .lesson-card { display: block; }
    .lesson-card h2 br { display: none; }
    .lesson-number { margin-block-end: 1rem; }
    .account-panel { padding: 2rem; }
    .account-panel h2 { margin-block-start: 1rem; }
    .community-banner { gap: 2rem; padding: 2.5rem; }
    .partner-layout { gap: 2rem; }
    .partner-art span { font-size: 4rem; }
    .partner-art span:nth-child(2) { font-size: 6rem; }
    .site-footer { padding-inline: 1.5rem; }
    .footer-top { gap: 1.5rem; }
    .footer-bottom { font-size: .7rem; }
    .footer-note { display: none; }
  }
  @media (max-width: 600px) {
    .page-wrap, .header-inner { inline-size: calc(100% - 2.5rem); }
    .header-inner { min-block-size: 76px; gap: .8rem; }
    .brand { font-size: 1.5rem; gap: .35rem; }
    .brand-symbol { font-size: 2rem; }
    .header-actions { gap: .8rem; }
    .account-link { font-size: .75rem; gap: .4rem; }
    .stage-badge { display: none; }
    .hero { grid-template-columns: minmax(0, 1fr); padding-block: 2.6rem 2rem; gap: 2rem; }
    .hero .eyebrow { margin-block-end: 1.5rem; }
    .hero h1 { font-size: clamp(3.6rem, 15vw, 5rem); }
    .hero-description { max-inline-size: 360px; font-size: 1rem; margin-block: 1.5rem 1.7rem; }
    .hero .button-row { gap: .65rem; }
    .hero .button { flex: 1 1 150px; inline-size: auto; gap: .5rem; font-size: .8rem; padding-inline: 1rem; }
    .hero-art { aspect-ratio: 1.1; border-radius: 45% 45% .7rem .7rem; }
    .art-note { min-inline-size: 50%; padding: .8rem; }
    .art-note b { font-size: 1.05rem; }
    .note-bottom { inset-block-end: 15%; }
    .category-strip a { flex-basis: 45%; font-size: .78rem; padding-inline: .35rem; }
    .category-strip a span:first-child { font-size: .55rem; }
    .section { padding-block: 2.6rem; }
    .section-heading { display: block; margin-block-end: 1.8rem; }
    .section-heading > p, .section-heading > a { display: block; margin-block-start: 1.1rem; }
    .section-heading h2 { font-size: 2rem; }
    .inspiration-grid { gap: 1rem; }
    .inspiration-art { aspect-ratio: 1; }
    .inspiration-art > span { font-size: 6rem; }
    .theme-type .inspiration-art > span { font-size: 4rem; }
    .theme-motion .inspiration-art > span { font-size: 3rem; text-shadow: -14px 0 0 #f5e9d8, 14px 0 0 #833f35; }
    .theme-wave .inspiration-art > span { font-size: 8rem; }
    .inspiration-art small { font-size: .45rem; inset-inline-start: .65rem; inset-block-end: .65rem; }
    .inspiration-copy h3 { font-size: 1rem; }
    .inspiration-copy p { font-size: .75rem; }
    .inspiration-copy .text-link { font-size: .72rem; }
    .tool-card { padding: 1.4rem; }
    .studio-callout { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; gap: 1.5rem; }
    .studio-callout h2 { font-size: 2.2rem; }
    .page-content { padding-block: 3rem 4rem; }
    .page-heading { display: block; margin-block-end: 2.4rem; }
    .page-heading h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); }
    .page-heading p { margin-block-start: 1.4rem; font-size: .9rem; }
    .page-heading > .button { margin-block-start: 1.5rem; }
    .catalog-toolbar { display: block; }
    .catalog-note { display: none; }
    .search-field { inline-size: 100%; }
    .search-field input { font-size: .83rem; }
    .filter-row { gap: .45rem; }
    .filter-chip { font-size: .75rem; padding-inline: .85rem; }
    .subtle-callout { gap: 1rem; margin-block-start: 2rem; }
    .subtle-callout > p { flex-basis: calc(100% - 4rem); }
    .subtle-callout > a { margin-inline-start: 3rem; }
    .editor-panel { padding: 1.3rem; }
    .panel-heading { align-items: flex-start; padding-block-end: 1.3rem; }
    .panel-heading h2 { font-size: 1.3rem; }
    .save-state { max-inline-size: 100px; font-size: .6rem; }
    .prompt-input { font-size: 1rem; padding: .85rem; }
    .text-input { font-size: 1rem; padding: .75rem; }
    .editor-actions { gap: 1.2rem; }
    .editor-actions .button { inline-size: 100%; }
    .workspace-aside { grid-template-columns: minmax(0, 1fr); }
    .connection-panel { padding: 1.5rem; }
    .prompt-advice { padding: 1rem .3rem; }
    .account-panel { padding: 1.5rem; }
    .empty-state { padding: 3rem 1.2rem; }
    .empty-state h2 { font-size: 1.7rem; }
    .empty-state p { font-size: .82rem; }
    .community-banner { flex-direction: column; align-items: flex-start; gap: 1.8rem; padding: 2rem; }
    .community-mark { font-size: 7rem; }
    .partner-layout { grid-template-columns: minmax(0, 1fr); }
    .partner-art { aspect-ratio: 1.5; gap: .5rem; padding: 1rem; }
    .partner-art span { font-size: 4.5rem; }
    .partner-art span:nth-child(2) { font-size: 7rem; }
    .faq-list summary { font-size: .95rem; }
    .faq-list details p { font-size: .85rem; }
    .site-footer { padding-block: 2.5rem; }
    .footer-top { gap: 1rem; }
    .footer-top p { flex-basis: calc(100% - 7rem); font-size: .8rem; }
    .domain-link { margin-inline-start: 0; font-size: .9rem; }
    .footer-bottom { gap: 1rem; }
    .footer-bottom nav { gap: .8rem 1rem; }
    .confirmation-dialog { padding: 1.5rem; }
    .confirmation-dialog h2 { font-size: 1.7rem; }
    .confirmation-dialog .button-row { flex-direction: column; align-items: stretch; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } .button.primary:hover:not(:disabled) { transform: none; } }
}