/* Generated from design/design-tokens.json. Run node scripts/sync-tokens.mjs. */
.sm-home {
  --sm-paper: #F5F2EA;
  --sm-ink: #242420;
  --sm-brand: #D94B35;
  --sm-action: #C73D29;
  --sm-action-hover: #AD3120;
  --sm-white: #FFFFFF;
  --sm-border: #D8D3C9;
  --sm-muted: #66635C;
  --sm-tint: #FCECE7;
  --sm-error: #A52B1C;
  --sm-error-bg: #FFF1ED;
  --sm-notice-bg: #F2F0E9;
  --sm-font-sans: 'DM Sans', Arial, Helvetica, sans-serif;
  --sm-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sm-max-width: 1312px;
  --sm-gutter: 64px;
  --sm-gutter-narrow: 48px;
  --sm-gutter-tablet: 24px;
  --sm-gutter-mobile: 16px;
  --sm-header-height: 64px;
  --sm-header-height-mobile: 60px;
  --sm-logo-width: 184px;
  --sm-logo-width-mobile: 143px;
  --sm-hero-title: 54px;
  --sm-hero-title-tablet: 44px;
  --sm-hero-title-mobile: 36px;
  --sm-hero-title-compact: 31px;
  --sm-hero-description: 20px;
  --sm-body: 16px;
  --sm-small: 14px;
  --sm-caption: 12px;
  --sm-toolbar-height: 56px;
  --sm-pane-padding-x: 22px;
  --sm-pane-padding-y: 18px;
  --sm-textarea-height: 140px;
  --sm-textarea-height-mobile: 112px;
  --sm-textarea-height-short: 88px;
  --sm-upload-height: 80px;
  --sm-upload-height-mobile: 72px;
  --sm-action-height: 48px;
  --sm-action-width: 218px;
  --sm-radius-workspace: 12px;
  --sm-radius-control: 10px;
  --sm-radius-card: 9px;
  --sm-radius-dialog: 18px;
  --sm-transition: 140ms ease;
  --sm-focus-width: 3px;
  --sm-focus-offset: 3px;
}

/* Homepage only. The original tool-page styles remain scoped to their own UI. */
.sm-home {
  min-height: 100svh;
  background: var(--sm-paper);
  color: var(--sm-ink);
  font-family: var(--sm-font-sans);
  font-size: var(--sm-body);
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.sm-home *, .sm-home *::before, .sm-home *::after { box-sizing: border-box; }
.sm-home :is(h1,h2,h3,p,ul) { margin: 0; }
.sm-home img { display: block; max-width: 100%; height: auto; }
.sm-home button, .sm-home input, .sm-home select, .sm-home textarea { font: inherit; color: inherit; }
.sm-home button { appearance: none; cursor: pointer; touch-action: manipulation; }
.sm-home button:disabled { cursor: not-allowed; }
.sm-home a { color: inherit; text-decoration: none; }
.sm-home :is(button,a,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: var(--sm-focus-width) solid var(--sm-action);
  outline-offset: var(--sm-focus-offset);
}
.sm-home [hidden] { display: none !important; }
.sm-home .sm-container { width: min(var(--sm-max-width), calc(100% - var(--sm-gutter) * 2)); margin-inline: auto; }
.sm-home .sm-skip-link { position: fixed; z-index: 100; top: 10px; left: 16px; padding: 10px 16px; color: var(--sm-white); background: var(--sm-ink); border-radius: 6px; transform: translateY(-160%); }
.sm-home .sm-skip-link:focus { transform: translateY(0); }
.sm-home .sm-inline-arrow { display: inline-block; vertical-align: -2px; flex: 0 0 auto; }
.sm-home .sm-icon { flex: 0 0 auto; vertical-align: middle; }

/* Header and compact purpose statement. */
.sm-home .sm-header { min-height: var(--sm-header-height); border-bottom: 1px solid var(--sm-border); display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.sm-home .sm-header > .sm-container { min-height: var(--sm-header-height); display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.sm-home .sm-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.sm-home .sm-brand img { width: var(--sm-logo-width); height: auto; }
.sm-home .sm-nav { display: flex; align-items: stretch; align-self: stretch; gap: 42px; }
.sm-home .sm-nav a { position: relative; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }
.sm-home .sm-nav a.is-active { font-weight: 700; }
.sm-home .sm-nav a.is-active::after { content: ''; position: absolute; height: 3px; bottom: 11px; inset-inline: 0; background: var(--sm-brand); }
.sm-home .sm-nav a:hover { color: var(--sm-action); }
.sm-home .sm-free-badge { flex: 0 0 auto; border: 1px solid var(--sm-border); border-radius: 6px; padding: 5px 10px; font-size: 12px; line-height: 18px; }
.sm-home .sm-menu-button { display: none; border: 1px solid var(--sm-border); border-radius: 8px; background: transparent; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 10px; }
.sm-home .sm-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 26px 0 28px; }
.sm-home .sm-eyebrow { display: block; font-size: 12px; line-height: 14px; letter-spacing: .085em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.sm-home .sm-hero-title { font-size: var(--sm-hero-title); line-height: 1.02; font-weight: 700; letter-spacing: -.044em; }
.sm-home .sm-hero-title h1 { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; }
.sm-home .sm-hero-title em { display: block; font-family: var(--sm-font-serif); font-size: 1.14em; font-weight: 400; font-style: italic; line-height: .89; letter-spacing: -.018em; margin-top: 3px; color: var(--sm-brand); }
.sm-home .sm-hero-description { border-left: 1px solid var(--sm-border); padding-left: 44px; }
.sm-home .sm-hero-description > :first-child { font-size: var(--sm-hero-description); line-height: 27px; letter-spacing: -.015em; font-weight: 600; }
.sm-home .sm-hero-description > :last-child:not(:first-child) { display: block; margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--sm-muted); font-weight: 400; }

/* Input workspace. Every initial action is kept in the same compact area. */
.sm-home .sm-workspace-container { scroll-margin-top: 18px; }
.sm-home .sm-workspace { border: 1px solid var(--sm-border); border-radius: var(--sm-radius-workspace); background: var(--sm-white); scroll-margin-top: 18px; }
.sm-home .sm-toolbar { min-height: var(--sm-toolbar-height); display: flex; align-items: center; gap: 16px; padding: 10px 22px; border-bottom: 1px solid var(--sm-border); }
.sm-home .sm-tone-label { font-size: 15px; font-weight: 700; }
.sm-home .sm-tone-list { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sm-home .sm-tone-button { min-height: 34px; padding: 5px 18px; border: 1px solid var(--sm-border); border-radius: 10px; background: transparent; font-size: 14px; line-height: 22px; font-weight: 500; transition: background-color var(--sm-transition), border-color var(--sm-transition), color var(--sm-transition); }
.sm-home .sm-tone-button:hover { border-color: var(--sm-brand); background: var(--sm-tint); }
.sm-home .sm-tone-button[aria-pressed='true'] { border-color: var(--sm-brand); background: var(--sm-tint); color: var(--sm-action); }
.sm-home .sm-more-styles { display: inline-flex; align-items: center; gap: 12px; min-width: 0; max-width: 240px; min-height: 32px; padding: 4px 8px 4px 24px; border: 0; border-left: 1px solid var(--sm-border); background: transparent; font-size: 14px; font-weight: 600; }
.sm-home .sm-more-styles > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sm-home .sm-more-styles .sm-icon { width: 15px; height: 15px; }
.sm-home .sm-options-button { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 0 6px 6px; border: 0; min-height: 34px; background: transparent; font-size: 14px; flex: 0 0 auto; }
.sm-home :is(.sm-options-button,.sm-more-styles):hover { color: var(--sm-action); }
.sm-home .sm-workspace-grid { display: grid; grid-template-columns: 56% 44%; align-items: stretch; }
.sm-home :is(.sm-input-pane,.sm-result-pane) { min-width: 0; padding: var(--sm-pane-padding-y) var(--sm-pane-padding-x); }
.sm-home .sm-input-pane { border-radius: 0 0 0 var(--sm-radius-workspace); transition: background-color var(--sm-transition); }
.sm-home .sm-input-pane.sm-is-dragging { background: var(--sm-tint); box-shadow: inset 0 0 0 2px var(--sm-brand); }
.sm-home .sm-pane-header { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.sm-home .sm-pane-title { font-size: 14px; line-height: 20px; text-transform: uppercase; font-weight: 700; letter-spacing: .005em; }
.sm-home .sm-text-actions { display: inline-flex; gap: 10px; align-items: center; }
.sm-home .sm-paste-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--sm-border); background: var(--sm-white); border-radius: 6px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.sm-home .sm-paste-button .sm-icon { width: 17px; height: 17px; }
.sm-home .sm-paste-button:hover { border-color: var(--sm-ink); }
.sm-home .sm-clear-button { border: 0; background: transparent; padding: 5px 0; font-size: 12px; color: var(--sm-muted); }
.sm-home .sm-clear-button:hover { color: var(--sm-action); text-decoration: underline; }
.sm-home .sm-textarea-wrap { position: relative; }
.sm-home .sm-textarea { display: block; width: 100%; height: var(--sm-textarea-height); min-height: var(--sm-textarea-height); resize: vertical; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-control); background: transparent; padding: 12px 14px; font-size: 17px; line-height: 1.5; outline-offset: 2px; }
.sm-home .sm-textarea::placeholder { color: var(--sm-muted); opacity: 1; }
.sm-home .sm-textarea[aria-invalid='true'] { border-color: var(--sm-error); }
.sm-home .sm-input-hint { position: absolute; top: 42px; left: 15px; right: 15px; pointer-events: none; color: var(--sm-muted); font-size: 14px; line-height: 20px; }
.sm-home .sm-upload-button { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: var(--sm-upload-height); margin-top: 14px; padding: 10px 16px; border: 1px solid var(--sm-brand); border-radius: var(--sm-radius-control); background: var(--sm-tint); transition: background-color var(--sm-transition), border-color var(--sm-transition); }
.sm-home .sm-upload-button:hover { background: #F9E0D8; border-color: var(--sm-action-hover); }
.sm-home .sm-upload-icon { width: 31px; height: 31px; color: var(--sm-action); stroke-width: 1.8; }
.sm-home .sm-upload-copy { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.sm-home .sm-upload-copy strong { font-size: 23px; line-height: 29px; font-weight: 700; letter-spacing: -.022em; }
.sm-home .sm-upload-copy small { font-size: 13px; line-height: 20px; }
.sm-home .sm-file-note { margin-top: 8px; font-size: 12px; color: var(--sm-muted); overflow-wrap: anywhere; }
.sm-home .sm-file-note span { font-weight: 600; }
.sm-home .sm-input-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.sm-home .sm-counter-group { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sm-home .sm-counter { font-size: 12px; line-height: 18px; color: var(--sm-muted); white-space: nowrap; }
.sm-home .sm-over-limit { color: var(--sm-error); font-weight: 700; }
.sm-home .sm-language { border-left: 1px solid var(--sm-border); padding-left: 18px; color: var(--sm-muted); font-size: 12px; white-space: nowrap; }
.sm-home .sm-rewrite-button { min-width: var(--sm-action-width); min-height: var(--sm-action-height); display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--sm-radius-control); background: var(--sm-action); color: var(--sm-white); font-size: 17px; line-height: 24px; font-weight: 700; transition: background-color var(--sm-transition); white-space: nowrap; }
.sm-home .sm-rewrite-button .sm-icon { width: 23px; height: 23px; }
.sm-home .sm-rewrite-button:hover:not(:disabled) { background: var(--sm-action-hover); }
.sm-home .sm-rewrite-button:disabled { background: #E7D5CF; color: #5E4B44; }
.sm-home .sm-notice, .sm-home .sm-error { margin-top: 12px; padding: 10px 12px; border-radius: 7px; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.sm-home .sm-notice { background: var(--sm-notice-bg); color: var(--sm-ink); }
.sm-home .sm-error { border-left: 3px solid var(--sm-error); color: var(--sm-error); background: var(--sm-error-bg); }
.sm-home .sm-notice:empty, .sm-home .sm-error:empty { display: none; }
.sm-home .sm-result-pane { border-left: 1px solid var(--sm-border); border-radius: 0 0 var(--sm-radius-workspace) 0; }
.sm-home .sm-result-pane > .sm-pane-header { padding-bottom: 10px; margin-bottom: 0; border-bottom: 1px solid var(--sm-border); }
.sm-home .sm-result-label { color: var(--sm-muted); font-size: 11px; }
.sm-home .sm-empty-result { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 0; }
.sm-home .sm-empty-mark { width: 40px; height: auto; margin-bottom: 13px; }
.sm-home .sm-empty-result h3 { font-family: var(--sm-font-serif); font-size: 31px; line-height: 1.15; font-weight: 400; letter-spacing: -.025em; }
.sm-home .sm-empty-result p { margin-top: 9px; color: var(--sm-muted); font-size: 14px; line-height: 21px; }
.sm-home :is(.sm-link-button,.sm-text-link) { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--sm-action); font-size: 15px; line-height: 22px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.sm-home .sm-empty-result .sm-link-button { margin-top: 19px; min-height: 36px; }
.sm-home :is(.sm-link-button,.sm-text-link):hover { color: var(--sm-action-hover); }
.sm-home .sm-privacy-notice { margin-top: 10px; padding: 0 4px; font-size: 12px; line-height: 18px; color: var(--sm-muted); }
.sm-home .sm-privacy-notice a { color: var(--sm-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Genuine service states, rendered only after interaction. */
.sm-home .sm-loading { min-height: 290px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 9px; padding: 22px 0; }
.sm-home .sm-loading h3 { font-family: var(--sm-font-serif); font-size: 29px; line-height: 1.2; font-weight: 400; }
.sm-home .sm-loading p { color: var(--sm-muted); font-size: 14px; }
.sm-home .sm-spinner { width: 28px; height: 28px; border: 2px solid var(--sm-border); border-top-color: var(--sm-action); border-radius: 50%; margin-bottom: 8px; animation: sm-spin 900ms linear infinite; }
.sm-home .sm-cancel-button { border: 1px solid var(--sm-border); background: var(--sm-white); border-radius: 7px; min-height: 40px; padding: 8px 14px; margin-top: 9px; font-size: 13px; }
.sm-home .sm-stale-notice { border-left: 3px solid #916A32; background: #FAF2E2; font-size: 12px; line-height: 18px; padding: 9px 11px; margin-top: 12px; }
.sm-home .sm-result-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 14px 0 12px; }
.sm-home .sm-result-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 53px; padding: 7px 10px; border: 1px solid var(--sm-border); border-radius: 8px; background: var(--sm-white); text-align: left; }
.sm-home .sm-result-tab strong { font-size: 13px; line-height: 18px; font-weight: 600; }
.sm-home .sm-result-tab small { font-size: 10px; line-height: 14px; color: var(--sm-muted); }
.sm-home .sm-result-tab[aria-selected='true'] { border-color: var(--sm-brand); background: var(--sm-tint); }
.sm-home .sm-result-text { min-height: 104px; max-height: 340px; padding: 4px 0 12px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.65; }
.sm-home .sm-result-editor { display: block; width: 100%; min-height: 160px; resize: vertical; border: 1px solid var(--sm-border); border-radius: 7px; padding: 10px 12px; font-size: 16px; line-height: 1.65; }
.sm-home .sm-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sm-home .sm-copy-button, .sm-home .sm-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--sm-border); border-radius: 7px; background: var(--sm-white); font-size: 13px; line-height: 20px; }
.sm-home .sm-copy-button { background: var(--sm-ink); border-color: var(--sm-ink); color: var(--sm-white); font-weight: 600; }
.sm-home .sm-copy-button:hover { background: #414139; }
.sm-home .sm-secondary-button:hover:not(:disabled), .sm-home .sm-cancel-button:hover { border-color: var(--sm-ink); background: var(--sm-paper); }
.sm-home .sm-secondary-button:disabled { opacity: .5; }
.sm-home .sm-result-warning { margin-top: 14px; padding: 10px 12px; border: 1px solid #DABF99; border-radius: 7px; background: #FAF2E2; font-size: 12px; line-height: 18px; }
.sm-home .sm-result-warning ul, .sm-home .sm-result-details ul { padding-left: 18px; }
.sm-home .sm-result-details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--sm-border); font-size: 13px; line-height: 21px; }
.sm-home .sm-result-details summary { cursor: pointer; min-height: 32px; font-weight: 600; }
.sm-home .sm-result-caption { margin-top: 12px; font-size: 11px; line-height: 17px; color: var(--sm-muted); }

/* Explicitly labelled illustrative examples and real task entry points. */
.sm-home .sm-examples { margin-top: 27px; border-top: 1px solid var(--sm-border); padding-top: 18px; }
.sm-home .sm-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.sm-home .sm-section-heading h2, .sm-home .sm-examples > h2 { font-size: 36px; line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.sm-home .sm-section-heading h2 em, .sm-home .sm-examples > h2 em { font-family: var(--sm-font-serif); font-weight: 400; font-style: italic; color: var(--sm-brand); font-size: 1.1em; letter-spacing: -.018em; }
.sm-home .sm-original { display: flex; align-items: baseline; gap: 14px; padding: 7px 18px; margin: 14px 0 16px; background: #ECE8DF; border-radius: 7px; font-size: 14px; line-height: 21px; }
.sm-home .sm-original strong { font-weight: 700; flex: 0 0 auto; }
.sm-home .sm-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.sm-home .sm-example-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 117px; padding: 13px 20px 9px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-card); background: rgba(255,255,255,.7); }
.sm-home .sm-example-card h3 { font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.025em; }
.sm-home .sm-example-card p { margin: 3px 0 6px; font-size: 14px; line-height: 21px; }
.sm-home .sm-example-card .sm-link-button { margin-top: auto; min-height: 28px; font-size: 13px; line-height: 20px; }
.sm-home .sm-example-note { margin-top: 10px; text-align: right; font-size: 12px; line-height: 18px; color: var(--sm-muted); }
.sm-home .sm-example-note em { font-family: var(--sm-font-serif); font-size: 1.2em; }
.sm-home .sm-tasks { margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--sm-border); }
.sm-home .sm-tasks .sm-section-heading h2 { font-size: 32px; line-height: 1.15; }
.sm-home .sm-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 32px; }
.sm-home .sm-task { display: flex; align-items: center; gap: 18px; min-height: 65px; padding: 10px 8px 10px 0; border-top: 1px solid var(--sm-border); }
.sm-home .sm-task:nth-child(-n+2) { border-top: 0; }
.sm-home .sm-task-number { padding: 0 20px 0 10px; border-right: 1px solid var(--sm-border); color: var(--sm-action); font-size: 14px; line-height: 34px; }
.sm-home .sm-task-copy { min-width: 0; }
.sm-home .sm-task-copy strong, .sm-home .sm-task-copy h3 { display: block; font-size: 17px; line-height: 22px; letter-spacing: -.02em; font-weight: 700; }
.sm-home .sm-task-copy p, .sm-home .sm-task-copy small, .sm-home .sm-task-copy > span { display: block; font-size: 13px; line-height: 20px; color: var(--sm-muted); }
.sm-home .sm-task > :last-child:not(.sm-task-copy) { margin-left: auto; flex: 0 0 auto; font-size: 23px; }
.sm-home .sm-task:hover .sm-task-copy strong, .sm-home .sm-task:hover .sm-task-copy h3 { color: var(--sm-action); }
.sm-home .sm-footer { margin-top: 25px; border-top: 1px solid var(--sm-border); padding: 18px 0 25px; display: flex; align-items: center; gap: 26px; font-size: 12px; line-height: 18px; }
.sm-home .sm-footer .sm-brand img { width: 172px; }
.sm-home .sm-footer > p { border-left: 1px solid var(--sm-border); padding-left: 26px; }
.sm-home .sm-footer nav { display: flex; gap: 25px; margin-left: auto; }
.sm-home .sm-footer nav a { padding: 8px 0; }
.sm-home .sm-footer nav a:hover { color: var(--sm-action); text-decoration: underline; text-underline-offset: 3px; }
.sm-home .sm-footer > small { color: var(--sm-muted); border-left: 1px solid var(--sm-border); padding-left: 22px; font-size: 12px; }

/* Native dialogs retain native Escape handling and focus trapping. */
.sm-home .sm-dialog { width: min(680px, calc(100vw - 48px)); max-width: 680px; max-height: min(800px, calc(100dvh - 64px)); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-dialog); background: var(--sm-white); color: var(--sm-ink); padding: 0; margin: auto; overflow: hidden; box-shadow: 0 20px 70px rgba(36,36,32,.16); }
.sm-home .sm-dialog[open] { display: flex; flex-direction: column; }
.sm-home .sm-dialog::backdrop { background: rgba(36,36,32,.42); }
.sm-home .sm-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 23px 24px 18px; border-bottom: 1px solid var(--sm-border); flex-shrink: 0; }
.sm-home .sm-dialog-kicker { display: block; color: var(--sm-muted); font-size: 11px; line-height: 17px; text-transform: uppercase; letter-spacing: .075em; margin-bottom: 3px; }
.sm-home .sm-dialog-header h2 { font-size: 24px; line-height: 30px; letter-spacing: -.035em; font-weight: 700; }
.sm-home .sm-dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--sm-border); background: var(--sm-white); border-radius: 9px; flex: 0 0 auto; }
.sm-home .sm-dialog-close:hover { background: var(--sm-paper); }
.sm-home .sm-dialog-body { padding: 20px 24px; overflow: auto; min-height: 0; overscroll-behavior: contain; }
.sm-home .sm-search-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.sm-home .sm-style-search { display: block; width: 100%; min-height: 46px; border: 1px solid var(--sm-border); border-radius: 9px; background: var(--sm-white); padding: 10px 12px; font-size: 16px; }
.sm-home .sm-search-count { margin: 10px 0 12px; font-size: 12px; line-height: 18px; color: var(--sm-muted); }
.sm-home .sm-style-list { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.sm-home .sm-style-choice { display: flex; width: 100%; min-height: 67px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--sm-border); border-radius: 8px; padding: 10px 12px; text-align: left; background: var(--sm-white); }
.sm-home .sm-style-choice strong { display: block; font-size: 13px; line-height: 18px; font-weight: 600; }
.sm-home .sm-style-choice small { display: block; font-size: 11px; line-height: 16px; color: var(--sm-muted); margin-top: 3px; }
.sm-home .sm-style-choice:hover, .sm-home .sm-style-choice[aria-pressed='true'] { border-color: var(--sm-brand); background: var(--sm-tint); }
.sm-home .sm-dialog-footer { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--sm-border); background: var(--sm-paper); }
.sm-home .sm-dialog-footer > a { font-size: 13px; line-height: 21px; color: var(--sm-action); text-decoration: underline; text-underline-offset: 3px; }
.sm-home .sm-dialog-footer .sm-rewrite-button { min-width: 130px; font-size: 15px; }
.sm-home .sm-options-dialog { max-width: 600px; }
.sm-home .sm-form-field { display: block; margin-bottom: 17px; }
.sm-home .sm-form-field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.sm-home .sm-form-field select { display: block; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--sm-border); border-radius: 8px; background: var(--sm-white); font-size: 16px; }
.sm-home .sm-check-field { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 22px; }
.sm-home .sm-check-field input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sm-action); flex-shrink: 0; }
.sm-home .sm-check-field strong { display: block; font-weight: 600; }
.sm-home .sm-check-field small { display: block; margin-top: 3px; color: var(--sm-muted); font-size: 12px; line-height: 18px; }
.sm-home .sm-options-note { margin-top: 18px; padding: 11px 13px; background: var(--sm-paper); border-radius: 7px; color: var(--sm-muted); font-size: 12px; line-height: 18px; }
.sm-home .sm-mobile-nav { display: grid; gap: 4px; padding: 12px 20px; }
.sm-home .sm-mobile-nav a { min-height: 48px; display: flex; align-items: center; padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.sm-home .sm-mobile-nav a:hover { background: var(--sm-tint); color: var(--sm-action); }
.sm-home .sm-menu-note { margin: 6px 24px 22px; font-size: 13px; line-height: 20px; color: var(--sm-muted); }

@keyframes sm-spin { to { transform: rotate(360deg); } }

@media (max-width: 1280px) {
  .sm-home { --sm-gutter: var(--sm-gutter-narrow); }
  .sm-home .sm-header, .sm-home .sm-header > .sm-container { gap: 20px; }
  .sm-home .sm-nav { gap: 32px; }
  .sm-home .sm-hero { gap: 44px; }
  .sm-home .sm-hero-description { padding-left: 32px; }
  .sm-home .sm-toolbar { gap: 12px; }
  .sm-home .sm-tone-button { padding-inline: 14px; }
  .sm-home .sm-more-styles { padding-left: 18px; }
  .sm-home .sm-counter-group { gap: 12px; }
  .sm-home .sm-language { padding-left: 12px; }
  .sm-home .sm-footer { gap: 20px; }
  .sm-home .sm-footer > p { padding-left: 20px; }
}
@media (max-width: 900px) {
  .sm-home { --sm-gutter: var(--sm-gutter-tablet); }
  .sm-home .sm-nav { gap: 24px; }
  .sm-home .sm-free-badge { display: none; }
  .sm-home .sm-hero { gap: 30px; }
  .sm-home .sm-hero-title { font-size: var(--sm-hero-title-tablet); }
  .sm-home .sm-hero-description { padding-left: 24px; }
  .sm-home .sm-hero-description > :first-child { font-size: 17px; line-height: 23px; }
  .sm-home .sm-toolbar { padding-inline: 16px; gap: 10px; }
  .sm-home .sm-tone-label { display: none; }
  .sm-home .sm-tone-list { gap: 6px; }
  .sm-home .sm-tone-button { font-size: 13px; padding-inline: 12px; }
  .sm-home .sm-more-styles { padding-left: 14px; gap: 6px; font-size: 13px; }
  .sm-home .sm-options-button { font-size: 13px; gap: 5px; }
  .sm-home .sm-language { display: none; }
  .sm-home .sm-rewrite-button { min-width: 182px; }
  .sm-home .sm-upload-copy strong { font-size: 21px; }
  .sm-home .sm-upload-button { gap: 12px; }
  .sm-home .sm-upload-icon { width: 26px; height: 26px; }
  .sm-home .sm-empty-result h3 { font-size: 28px; }
  .sm-home .sm-section-heading h2, .sm-home .sm-examples > h2 { font-size: 32px; }
  .sm-home .sm-example-card { padding-inline: 14px; }
  .sm-home .sm-task { gap: 12px; }
  .sm-home .sm-task-number { padding-inline: 8px 14px; }
  .sm-home .sm-footer { flex-wrap: wrap; gap: 16px 24px; }
  .sm-home .sm-footer nav { margin-left: auto; }
  .sm-home .sm-footer > small { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .sm-home { --sm-gutter: var(--sm-gutter-mobile); }
  .sm-home .sm-header, .sm-home .sm-header > .sm-container { min-height: var(--sm-header-height-mobile); }
  .sm-home .sm-header, .sm-home .sm-header > .sm-container { gap: 10px; }
  .sm-home .sm-brand img { width: var(--sm-logo-width-mobile); }
  .sm-home .sm-nav { display: none; }
  .sm-home .sm-free-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; font-size: 10px; line-height: 16px; white-space: nowrap; }
  .sm-home .sm-menu-button { display: inline-flex; }
  .sm-home .sm-hero { grid-template-columns: 1fr; gap: 0; padding: 23px 0 18px; }
  .sm-home .sm-eyebrow { font-size: 10px; line-height: 14px; letter-spacing: .08em; }
  .sm-home .sm-hero-title { font-size: var(--sm-hero-title-mobile); letter-spacing: -.042em; }
  .sm-home .sm-hero-description { margin-top: 13px; padding-left: 0; border-left: 0; }
  .sm-home .sm-hero-description > :first-child { font-size: 14px; line-height: 1.45; font-weight: 500; letter-spacing: 0; }
  .sm-home .sm-hero-description > :last-child:not(:first-child) { display: none; }
  .sm-home .sm-workspace { border-radius: 10px; }
  .sm-home .sm-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 14px 10px; }
  .sm-home .sm-tone-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr .9fr 1fr; gap: 6px; }
  .sm-home .sm-tone-button { min-height: 40px; padding: 8px 6px; font-size: 12px; line-height: 22px; border-radius: 8px; }
  .sm-home .sm-more-styles { max-width: 100%; min-height: 36px; padding: 6px 0; border-left: 0; gap: 8px; justify-self: start; font-size: 13px; }
  .sm-home .sm-options-button { min-height: 36px; padding: 6px 0 6px 8px; font-size: 13px; }
  .sm-home .sm-workspace-grid { grid-template-columns: 1fr; }
  .sm-home .sm-input-pane, .sm-home .sm-result-pane { padding: 14px; }
  .sm-home .sm-input-pane { border-radius: 0 0 10px 10px; }
  .sm-home .sm-pane-header { min-height: 34px; margin-bottom: 9px; gap: 8px; }
  .sm-home .sm-pane-title { font-size: 12px; line-height: 18px; }
  .sm-home .sm-paste-button { min-height: 34px; font-size: 12px; padding-inline: 9px; }
  .sm-home .sm-clear-button { min-height: 34px; }
  .sm-home .sm-text-actions { gap: 8px; }
  .sm-home .sm-textarea { height: var(--sm-textarea-height-mobile); min-height: var(--sm-textarea-height-mobile); font-size: 16px; line-height: 1.5; padding: 11px 12px; border-radius: 8px; }
  .sm-home .sm-input-hint { left: 13px; right: 13px; top: 39px; font-size: 12px; line-height: 18px; }
  .sm-home .sm-upload-button { min-height: var(--sm-upload-height-mobile); margin-top: 12px; padding: 9px 12px; gap: 12px; border-radius: 8px; }
  .sm-home .sm-upload-icon { width: 27px; height: 27px; }
  .sm-home .sm-upload-copy strong { font-size: 20px; line-height: 25px; }
  .sm-home .sm-upload-copy small { font-size: 11px; line-height: 18px; }
  .sm-home .sm-input-footer { gap: 10px; margin-top: 15px; }
  .sm-home .sm-counter { font-size: 10px; line-height: 16px; }
  .sm-home .sm-rewrite-button { min-width: 164px; min-height: 48px; padding: 10px 12px; font-size: 15px; gap: 8px; border-radius: 8px; }
  .sm-home .sm-rewrite-button .sm-icon { width: 20px; height: 20px; }
  .sm-home .sm-notice, .sm-home .sm-error { font-size: 12px; line-height: 18px; margin-top: 10px; }
  .sm-home .sm-result-pane { border-left: 0; border-top: 1px solid var(--sm-border); border-radius: 0 0 10px 10px; scroll-margin-top: 18px; }
  .sm-home .sm-result-pane[data-state='empty'] { display: none; }
  .sm-home .sm-loading { min-height: 225px; }
  .sm-home .sm-result-text { max-height: 380px; }
  .sm-home .sm-result-tab { padding-inline: 8px; }
  .sm-home .sm-result-actions { gap: 8px; }
  .sm-home .sm-copy-button, .sm-home .sm-secondary-button { min-height: 44px; }
  .sm-home .sm-privacy-notice { margin-top: 10px; padding: 0 1px; font-size: 11px; line-height: 16px; }
  .sm-home .sm-examples { margin-top: 27px; padding-top: 18px; }
  .sm-home .sm-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 13px; }
  .sm-home .sm-section-heading h2, .sm-home .sm-examples > h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.036em; }
  .sm-home .sm-section-heading h2 em, .sm-home .sm-examples > h2 em { display: block; }
  .sm-home .sm-original { padding: 9px 12px; gap: 9px; margin: 14px 0 12px; font-size: 12px; line-height: 18px; }
  .sm-home .sm-example-grid { grid-template-columns: 1fr; gap: 10px; }
  .sm-home .sm-example-card { min-height: 122px; padding: 12px 16px 8px; }
  .sm-home .sm-example-card h3 { font-size: 16px; line-height: 22px; }
  .sm-home .sm-example-card p { font-size: 14px; line-height: 21px; }
  .sm-home .sm-example-card .sm-link-button { min-height: 36px; font-size: 13px; }
  .sm-home .sm-example-note { text-align: left; margin-top: 12px; font-size: 11px; line-height: 17px; }
  .sm-home .sm-tasks { margin-top: 24px; padding-top: 19px; }
  .sm-home .sm-tasks .sm-section-heading h2 { font-size: 29px; line-height: 1.1; }
  .sm-home .sm-tasks .sm-text-link { min-height: 36px; font-size: 14px; }
  .sm-home .sm-task-grid { grid-template-columns: 1fr; }
  .sm-home .sm-task { min-height: 76px; padding: 12px 4px 12px 0; gap: 12px; }
  .sm-home .sm-task:nth-child(2) { border-top: 1px solid var(--sm-border); }
  .sm-home .sm-task-number { padding-inline: 5px 13px; font-size: 12px; line-height: 36px; }
  .sm-home .sm-task-copy strong, .sm-home .sm-task-copy h3 { font-size: 16px; line-height: 21px; }
  .sm-home .sm-task-copy p, .sm-home .sm-task-copy small, .sm-home .sm-task-copy > span { font-size: 12px; line-height: 18px; }
  .sm-home .sm-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 25px; padding: 20px 0 max(24px, env(safe-area-inset-bottom)); }
  .sm-home .sm-footer .sm-brand img { width: 143px; }
  .sm-home .sm-footer > p { padding-left: 12px; font-size: 11px; line-height: 16px; }
  .sm-home .sm-footer nav { margin-left: 0; gap: 18px; font-size: 11px; }
  .sm-home .sm-footer nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 0; }
  .sm-home .sm-footer > small { text-align: right; font-size: 10px; }
  .sm-home .sm-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .sm-home .sm-dialog-header { padding: 18px 16px 14px; gap: 12px; }
  .sm-home .sm-dialog-header h2 { font-size: 23px; line-height: 28px; }
  .sm-home .sm-dialog-body { padding: 16px; }
  .sm-home .sm-style-list { grid-template-columns: 1fr; }
  .sm-home .sm-style-choice { min-height: 64px; }
  .sm-home .sm-dialog-footer { padding: 14px 16px max(16px, env(safe-area-inset-bottom)); gap: 12px; }
  .sm-home .sm-dialog-footer .sm-rewrite-button { min-width: 112px; }
  .sm-home .sm-menu-note { margin-inline: 20px; }
}
@media (max-width: 359px) {
  .sm-home .sm-header .sm-brand img { width: 128px; }
  .sm-home .sm-header, .sm-home .sm-header > .sm-container { gap: 8px; }
  .sm-home .sm-hero-title { font-size: var(--sm-hero-title-compact); }
  .sm-home .sm-tone-button { font-size: 11px; padding-inline: 4px; }
  .sm-home .sm-input-pane, .sm-home .sm-result-pane { padding: 12px; }
  .sm-home .sm-input-hint { display: none; }
  .sm-home .sm-input-footer { gap: 7px; }
  .sm-home .sm-counter-group { flex: 1 1 0; }
  .sm-home .sm-rewrite-button { flex: 0 0 auto; min-width: 150px; font-size: 14px; padding-inline: 10px; }
  .sm-home .sm-counter { min-width: 0; font-size: 9px; white-space: normal; overflow-wrap: anywhere; }
  .sm-home .sm-upload-copy strong { font-size: 18px; }
  .sm-home .sm-upload-icon { width: 24px; height: 24px; }
  .sm-home .sm-upload-button { gap: 10px; }
  .sm-home .sm-original { align-items: flex-start; }
  .sm-home .sm-footer nav { gap: 12px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .sm-home .sm-hero { padding: 16px 0 14px; }
  .sm-home .sm-hero-title { font-size: var(--sm-hero-title-compact); }
  .sm-home .sm-hero-description { margin-top: 10px; }
  .sm-home .sm-textarea { height: var(--sm-textarea-height-short); min-height: var(--sm-textarea-height-short); }
  .sm-home .sm-toolbar { padding-top: 10px; padding-bottom: 8px; row-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-home, .sm-home *, .sm-home *::before, .sm-home *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Rebuild addition: remaining daily rewrites from /api/transform/usage. */
.sm-home .sm-usage { border-left: 1px solid var(--sm-border); padding-left: 18px; color: var(--sm-muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 1280px) { .sm-home .sm-usage { padding-left: 12px; } }
@media (max-width: 767px) { .sm-home .sm-usage { display: none; } }

/* SayMorph is light-only: keep native controls light under a dark OS theme. */
:root{color-scheme:light}

/* Content sections added after round-1 review (how-to, real run, FAQ). */
.sm-home .sm-run-title { margin-top: 18px; font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.025em; }
.sm-home .sm-run { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 10px; }
.sm-home .sm-run > div { padding: 12px 20px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-card); background: rgba(255,255,255,.7); }
.sm-home .sm-run dt { font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .075em; color: var(--sm-muted); }
.sm-home .sm-run dd { margin: 3px 0 0; font-size: 14px; line-height: 21px; }
.sm-home .sm-run-note { text-align: left; }
.sm-home .sm-howto, .sm-home .sm-faq { margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--sm-border); }
.sm-home .sm-howto .sm-section-heading h2, .sm-home .sm-faq .sm-section-heading h2 { font-size: 32px; line-height: 1.15; }
.sm-home .sm-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: sm-step; }
.sm-home .sm-steps li { counter-increment: sm-step; padding: 13px 20px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-card); background: rgba(255,255,255,.7); }
.sm-home .sm-steps li::before { content: counter(sm-step, decimal-leading-zero); display: block; color: var(--sm-action); font-size: 14px; line-height: 22px; }
.sm-home .sm-steps h3 { font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.025em; }
.sm-home .sm-steps p { margin-top: 3px; font-size: 14px; line-height: 21px; color: var(--sm-muted); }
.sm-home .sm-faq-list details { border-top: 1px solid var(--sm-border); }
.sm-home .sm-faq-list details:first-child { border-top: 0; }
.sm-home .sm-faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; }
.sm-home .sm-faq-list summary::-webkit-details-marker { display: none; }
.sm-home .sm-faq-list summary::after { content: '+'; color: var(--sm-action); font-size: 22px; line-height: 1; }
.sm-home .sm-faq-list details[open] summary::after { content: '–'; }
.sm-home .sm-faq-list summary h3 { font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.02em; }
.sm-home .sm-faq-list details p { padding: 0 0 14px; font-size: 14px; line-height: 21px; color: var(--sm-muted); max-width: 760px; }
.sm-home .sm-footer > p a { text-decoration: underline; text-underline-offset: 3px; }
.sm-home .sm-footer nav { flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 767px) {
  .sm-home .sm-run, .sm-home .sm-steps { grid-template-columns: 1fr; gap: 10px; }
  .sm-home .sm-howto .sm-section-heading h2, .sm-home .sm-faq .sm-section-heading h2 { font-size: 26px; }
  .sm-home .sm-footer nav { grid-column: 1 / -1; flex-wrap: wrap; gap: 0 16px; }
}
.sm-home .sm-related { margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--sm-border); }
.sm-home .sm-related .sm-section-heading h2 { font-size: 32px; line-height: 1.15; }
.sm-home .sm-related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.sm-home .sm-related-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--sm-border); border-radius: 10px; color: inherit; text-decoration: none; }
.sm-home .sm-related-list a:hover { border-color: currentColor; }
@media (max-width: 767px) { .sm-home .sm-related-list { grid-template-columns: 1fr; } }
.sm-home .sm-footer { flex-wrap: wrap; }
.sm-home .sm-footer > p.sm-footer-sources { order: 10; flex: 1 1 100%; grid-column: 1 / -1; border-left: 0; padding-left: 0; margin: 0; color: var(--sm-muted); }