:root {
  color-scheme: dark;
  --color-bg: #09090b;
  --color-surface: #121216;
  --color-surface-muted: #1b1b22;
  --color-surface-raised: #18181e;
  --color-input: #0f0f13;
  --color-text: #f1eef0;
  --color-text-muted: #b7b0b4;
  --color-border: #2b292f;
  --color-primary: #c13a49;
  --color-primary-dark: #941f2e;
  --color-primary-soft: #32151b;
  --color-violet: #b06c98;
  --color-green: #91a27e;
  --color-danger: #f07a84;
  --color-focus: #e06a76;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 0.55rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --shadow-soft: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
  --editorial-nav-overlap: 4.25rem;
  --editorial-nav-height: 3.6rem;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--color-bg); scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
.scroll-indicator { position: fixed; top: 0; right: 0.28rem; z-index: 20; width: 0.36rem; height: 100vh; pointer-events: none; opacity: 0; transition: opacity 250ms ease; }
.scroll-indicator-thumb { position: absolute; top: 0; right: 0; display: block; width: 100%; min-height: 2.5rem; border-radius: 999px; background: rgba(224, 106, 118, 0.78); box-shadow: 0 0 0.7rem rgba(193, 58, 73, 0.4); }
html.is-scrolling .scroll-indicator { opacity: 1; }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
#app { min-height: 100svh; overflow: visible; transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.page-switch { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.35rem, 4vw, 1.75rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.5rem, 5vw, 2.15rem); line-height: 1.1; letter-spacing: -0.045em; }
h3 { font-size: 1.05rem; line-height: 1.2; }
p { color: var(--color-text-muted); }

.topbar, .page-shell, .bottom-nav { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0 1rem; border-bottom: 1px solid var(--color-border); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.page-shell { padding: var(--space-4) 0 6.5rem; }
.view { display: grid; gap: var(--space-5); }
.view[hidden] { display: none; }
.eyebrow { display: block; color: var(--color-text-muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-soft); }
.icon-button, .text-button { border: 0; color: var(--color-primary); background: transparent; }
.icon-button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); font-size: 1.4rem; }
.welcome-panel { display: flex; min-height: 12rem; align-items: flex-end; justify-content: space-between; padding: var(--space-5); border-color: #4a2028; background: linear-gradient(135deg, #1d1014 0%, #2b1219 58%, #3b1720 100%); color: white; overflow: hidden; }
.welcome-panel p { max-width: 34rem; margin-top: var(--space-3); color: #f3c4c8; }
.welcome-panel .eyebrow { color: #f0aeb5; }
.welcome-panel h2 { max-width: 24rem; margin-top: var(--space-2); }
.garden-mark { align-self: center; color: #e98992; font-size: 5rem; opacity: 0.85; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.section-heading h2 { margin-top: var(--space-1); }
.section-heading p { margin-top: var(--space-2); }
.briefing-grid, .interest-grid, .project-grid, .todo-list-page { display: grid; gap: var(--space-3); }
.briefing-card { display: flex; gap: var(--space-3); padding: var(--space-4); }
.briefing-card strong { display: block; margin-top: var(--space-1); font-size: 1.15rem; }
.briefing-card p { margin-top: var(--space-1); font-size: 0.9rem; }
.card-icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: #f0aeb5; }
.next-step { display: grid; gap: var(--space-4); padding: var(--space-5); }
.next-step p { max-width: 38rem; margin-top: var(--space-2); }
.button { min-height: 2.6rem; border: 0; border-radius: var(--radius-sm); padding: 0.55rem 1rem; background: var(--color-primary); color: white; font-weight: 700; }
.button:hover { background: var(--color-primary-dark); }
.button-quiet { border: 1px solid var(--color-border); background: var(--color-surface-raised); color: var(--color-text); }
.interest-card, .project-card { padding: var(--space-4); }
.interest-card { display: flex; justify-content: space-between; gap: var(--space-3); }
.interest-card h3 { margin-top: var(--space-1); }
.interest-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.danger { color: var(--color-danger); }
.rating { color: #e3b36f; white-space: nowrap; letter-spacing: -0.15em; }
.suggestions-panel { display: grid; gap: var(--space-4); }
.suggestion-grid { display: grid; gap: var(--space-3); }
.suggestion-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.suggestion-card h3 { margin-top: var(--space-1); }
.suggestion-card p { margin-top: var(--space-1); font-size: 0.86rem; }
.empty-state, .empty-copy { padding: var(--space-4); }
.empty-copy { padding-inline: 0; font-size: 0.9rem; }
.add-interest-form { display: grid; gap: var(--space-4); padding: var(--space-4); }
.form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.form-fields { display: grid; gap: var(--space-3); }
label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: 0.82rem; font-weight: 700; }
input, select { width: 100%; min-height: 2.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; color: var(--color-text); background: var(--color-input); }
input:focus, select:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent); outline-offset: 2px; border-color: var(--color-focus); }
.project-heading { display: flex; justify-content: space-between; gap: var(--space-3); }
.project-dot { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: var(--space-2); border-radius: 50%; background: var(--color-violet); }
.project-dot.green { background: var(--color-green); }
.project-heading h3 { margin-top: var(--space-1); }
.count-badge { height: fit-content; border-radius: 2rem; padding: 0.2rem 0.55rem; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }
.todo-list { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.todo-row { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: 0.92rem; font-weight: 500; }
.todo-row .done { color: var(--color-text-muted); text-decoration: line-through; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-top: var(--space-4); }
.todo-composer, .todo-toolbar { display: grid; gap: var(--space-3); padding: var(--space-4); }
.todo-composer .button { justify-self: start; }
.todo-form-fields, .todo-toolbar { display: grid; gap: var(--space-3); }
.todo-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); }
.todo-card.is-complete { background: var(--color-surface-muted); box-shadow: none; }
.todo-card-main { min-width: 0; flex: 1; }
.todo-check { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: 0.98rem; font-weight: 700; }
.todo-toggle { position: relative; display: inline-flex; width: 4.5rem; height: 2.15rem; flex: 0 0 auto; }
.todo-toggle input { position: absolute; inset: 0; z-index: 1; width: 100%; min-height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.todo-toggle-track { position: relative; display: block; width: 100%; height: 100%; border: 1px solid var(--color-border); border-radius: 2rem; padding: 0.25rem; background: var(--color-surface-muted); transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.todo-toggle-track::before { position: absolute; top: 50%; right: 0.45rem; color: var(--color-text-muted); content: "OFF"; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; transform: translateY(-50%); transition: color 180ms ease, opacity 180ms ease; }
.todo-toggle-thumb { position: absolute; top: 0.29rem; left: 0.29rem; width: 1.45rem; height: 1.45rem; border: 2px solid #514d53; border-radius: 50%; background: #d8d1d4; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.45); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease, border-color 180ms ease; }
.todo-toggle input:checked + .todo-toggle-track { border-color: var(--color-primary); background: var(--color-primary-dark); }
.todo-toggle input:checked + .todo-toggle-track::before { right: auto; left: 0.55rem; color: #fff1f2; content: "ON"; }
.todo-toggle input:checked + .todo-toggle-track .todo-toggle-thumb { border-color: #fff1f2; background: #fff1f2; transform: translateX(2.17rem); }
.todo-toggle input:checked + .todo-toggle-track { box-shadow: 0 0 0 0.2rem rgba(193, 58, 73, 0.12); }
.todo-toggle input:focus-visible + .todo-toggle-track { outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent); outline-offset: 2px; }
.todo-check .done { color: var(--color-text-muted); text-decoration: line-through; }
.todo-detail-row, .todo-people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.todo-detail-row { margin-left: 5.1rem; }
.todo-project, .todo-tag, .person-tag { border-radius: 2rem; padding: 0.18rem 0.5rem; font-size: 0.72rem; line-height: 1.25; }
.todo-project { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.todo-tag { background: var(--color-surface-muted); color: var(--color-text-muted); }
.person-tag { border: 1px solid var(--color-border); color: var(--color-text-muted); }
.todo-actions { display: flex; flex: 0 0 auto; gap: var(--space-3); }
.game-page { display: grid; gap: var(--space-3); }
.game-intro, .game-complete, .game-card { display: grid; gap: var(--space-4); padding: var(--space-5); }
.game-intro { grid-template-columns: auto 1fr; align-items: start; }
.game-theme-gaming { --game-accent: #d04b67; --game-accent-soft: #32151f; }
.game-theme-technology { --game-accent: #bd4b57; --game-accent-soft: #2b171b; }
.game-theme-creative { --game-accent: #d36b68; --game-accent-soft: #351b1c; }
.game-theme-professional { --game-accent: #c34d4b; --game-accent-soft: #321817; }
.game-theme-everyday { --game-accent: #d09a65; --game-accent-soft: #302117; }
.game-theme-gaming, .game-theme-technology, .game-theme-creative, .game-theme-professional, .game-theme-everyday { border-top: 0.3rem solid var(--game-accent); }
.game-intro h3, .game-complete h3, .game-card h3 { margin-top: var(--space-1); }
.game-intro p, .game-complete p, .game-note { max-width: 42rem; }
.games-launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.game-tile { position: relative; display: grid; min-height: 12rem; align-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease; }
.game-tile:hover { border-color: var(--color-primary); background: var(--color-surface-raised); transform: translateY(-0.15rem); }
.game-tile-icon { color: var(--color-primary); font-size: 3rem; line-height: 1; }
.game-tile-copy { display: grid; gap: 0.25rem; }
.game-tile-copy strong { font-size: 1rem; }
.game-tile-copy small { color: var(--color-text-muted); font-size: 0.76rem; line-height: 1.4; }
.game-tile-arrow { position: absolute; top: var(--space-3); right: var(--space-3); color: var(--color-text-muted); font-size: 1.2rem; }
.game-overlay { position: fixed; inset: 0; z-index: 20; overflow-y: auto; padding: var(--space-4); background: rgba(9, 9, 11, 0.98); }
.game-overlay-topline, .game-overlay-content { width: min(100%, 48rem); margin-inline: auto; }
.game-overlay-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); }
.game-overlay-content { padding-bottom: var(--space-6); }
.game-overlay-content .game-card { box-shadow: var(--shadow-strong); }
.wordle-attempts { font-size: 0.82rem; }
.wordle-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wordle-card { border-top: 0.3rem solid var(--color-primary); }
.wordle-status { border-radius: 2rem; padding: 0.25rem 0.55rem; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 800; }
.wordle-status.won { background: var(--color-primary-soft); color: #f0aeb5; }
.wordle-status.lost { color: var(--color-danger); }
.wordle-board { display: grid; gap: 0.35rem; width: min(100%, 20rem); margin-inline: auto; }
.wordle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.wordle-cell { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-input); color: var(--color-text); font-size: clamp(1.1rem, 5vw, 1.5rem); font-weight: 850; }
.wordle-cell.is-correct, .wordle-legend i.is-correct { border-color: #7c9a6a; background: #38502e; }
.wordle-cell.is-present, .wordle-legend i.is-present { border-color: #b28754; background: #5b4225; }
.wordle-cell.is-absent, .wordle-legend i.is-absent { border-color: #46434a; background: #29272d; color: #9b959a; }
.wordle-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.wordle-form input { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; }
.wordle-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: 0.72rem; }
.wordle-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.wordle-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border: 1px solid; border-radius: 0.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.game-intro .button, .game-complete .button { justify-self: start; }
.game-theme-summary { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--game-accent-soft); }
.game-theme-summary strong { color: var(--game-accent); }
.game-theme-summary p { font-size: 0.86rem; }
.game-progress { display: grid; gap: var(--space-2); }
.game-progress .progress-line { margin: 0; }
.game-card .progress-line span { background: var(--game-accent); }
.answer-grid { display: grid; gap: var(--space-2); }
.answer-choice { min-height: 3.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; background: var(--color-surface); color: var(--color-text); text-align: left; }
.answer-choice:hover, .answer-choice:focus-visible { border-color: var(--game-accent); background: var(--game-accent-soft); color: var(--game-accent); }
.game-note { font-size: 0.82rem; }
.memory-panel { display: grid; gap: var(--space-3); padding: var(--space-4); }
.memory-list { display: grid; gap: var(--space-3); }
.memory-row { display: grid; gap: var(--space-2); }
.memory-row textarea, .memory-form textarea { min-height: 5rem; resize: vertical; }
.memory-actions { display: flex; align-items: center; gap: var(--space-3); }
.memory-form { display: grid; gap: var(--space-2); }
.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: rgba(12, 12, 15, 0.96); box-shadow: 0 -0.75rem 2rem rgba(0, 0, 0, 0.45); backdrop-filter: blur(0.8rem); }
.nav-item { display: grid; min-height: 4rem; place-items: center; gap: 0.1rem; border: 0; background: transparent; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 700; }
.nav-item.is-selected { color: #f0aeb5; background: linear-gradient(180deg, transparent, var(--color-primary-soft)); box-shadow: inset 0 -2px 0 var(--color-primary); }
.nav-icon { font-size: 1.15rem; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: end center; padding: var(--space-3); background: rgba(0, 0, 0, 0.72); }
.onboarding-modal { width: min(100%, 34rem); padding: var(--space-5); }
.progress-line { height: 0.3rem; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); background: var(--color-surface-muted); }
.progress-line span { display: block; height: 100%; background: var(--color-primary); transition: width 180ms ease; }
.modal-topline { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.text-button { font-size: 0.78rem; font-weight: 700; }
.onboarding-modal h2 { margin-top: var(--space-3); }
.onboarding-modal > p { margin-top: var(--space-2); }
.choice-grid { display: grid; gap: var(--space-2); margin: var(--space-5) 0; }
.choice { display: flex; justify-content: space-between; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; background: var(--color-surface); color: var(--color-text); text-align: left; }
.choice.is-chosen { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); }
.choice-check { color: var(--color-primary); font-weight: 800; }
.modal-actions { display: flex; justify-content: space-between; gap: var(--space-2); }
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: var(--space-4); color-scheme: dark; background: #202124; font-family: Arial, Helvetica, sans-serif; }
.auth-card { width: min(100%, 20rem); display: grid; gap: 0.9rem; padding: 1.5rem; border: 1px solid #55575a; border-radius: 2px; background: #2b2d30; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28); }
.auth-card form { display: grid; gap: 0.75rem; }
.auth-card label { color: #b7b8b3; font-size: 0.8rem; font-weight: 400; }
.auth-card input { min-height: 2.25rem; border-color: #626469; border-radius: 2px; background: #1d1f21; color: #ededeb; }
.auth-card .button { justify-self: start; min-height: 2rem; border: 1px solid #707277; border-radius: 2px; padding: 0.35rem 0.75rem; background: #414348; color: #ededeb; font-size: 0.78rem; font-weight: 400; }
.auth-card .button:hover { background: #4d5055; }
.auth-shell.is-light { color-scheme: light; background: #ecebe6; }
.auth-shell.is-light .auth-card { border-color: #a6a59e; background: #f8f7f2; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.12); }
.auth-shell.is-light .auth-card label { color: #555650; }
.auth-shell.is-light .auth-card input { border-color: #aaa9a1; background: #fff; color: #292a28; }
.auth-shell.is-light .auth-card .button { border-color: #777871; background: #deded8; color: #292a28; }
.auth-shell.is-light .auth-card .button:hover { background: #d1d1ca; }
.auth-card .form-error { border-color: #825b5e; background: #432b2e; color: #f0c6c7; font-size: 0.8rem; }
.auth-shell.is-light .auth-card .form-error { border-color: #b48b8b; background: #f1dddd; color: #693737; }
.minimal-topbar, .minimal-page { width: min(100% - 2rem, 58rem); margin-inline: auto; }
.minimal-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 1.25rem 0 1rem; border-bottom: 1px solid var(--color-border); }
.minimal-actions { display: flex; align-items: center; gap: var(--space-3); }
.minimal-page { display: grid; gap: var(--space-4); padding: calc(var(--editorial-nav-overlap) + var(--space-5)) 0 4rem; }
.minimal-viewport { width: 100%; overflow: hidden; transition: height 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.minimal-track { display: flex; width: 300%; align-items: flex-start; transform: translate3d(var(--minimal-view-offset, 0%), 0, 0); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.minimal-slide { flex: 0 0 33.333333%; min-width: 0; overflow: hidden; }
.signal-page { width: min(100% - 2rem, 58rem); margin-inline: auto; padding: calc(var(--editorial-nav-overlap) + var(--space-5)) 0 4rem; }
.signal-page .settings-heading h2 { margin-top: var(--space-2); }
.signal-page .settings-heading p { max-width: 34rem; margin-top: var(--space-3); }
.signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.signal-card { min-height: 12rem; padding: var(--space-5); border: 1px solid var(--color-border); background: rgba(20, 19, 24, 0.72); }
.signal-card h3 { margin-top: var(--space-3); }
.signal-card p { margin-top: var(--space-2); }
.editorial-nav { position: sticky; top: 0; z-index: 6; display: grid; gap: 0; width: min(calc(100% - 2rem), 34rem); margin: 0 auto calc(var(--editorial-nav-overlap) * -1); padding: 0.42rem; border: 1px solid transparent; border-top: 0; border-radius: 0 0 1.1rem 1.1rem; background: transparent; box-shadow: none; backdrop-filter: none; transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease; }
.editorial-nav-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
html.is-away-from-top .editorial-nav { border-color: rgba(255, 255, 255, 0.15); background: linear-gradient(180deg, rgba(9, 10, 12, 0.97) 0%, rgba(48, 43, 47, 0.87) 100%); box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.35); backdrop-filter: blur(1rem) saturate(1.1); }
.editorial-brand, .editorial-nav-link, .editorial-menu { border: 0; background: transparent; color: var(--color-text); }
.editorial-brand { display: inline-flex; align-items: center; justify-self: start; gap: 0.55rem; min-width: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.brand-mark { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 1px solid #79303c; border-radius: 50%; color: #f0aeb5; font-size: 0.8rem; }
.editorial-nav nav { position: relative; display: flex; align-items: center; justify-self: center; gap: 0.2rem; padding: 0.22rem; border: 1px solid transparent; border-radius: 0.7rem; background: transparent; transition: background 240ms ease, border-color 240ms ease; }
html.is-away-from-top .editorial-nav nav { border-color: rgba(255, 255, 255, 0.08); background: rgba(25, 26, 29, 0.65); }
.editorial-nav nav::before { position: absolute; top: 0.22rem; bottom: 0.22rem; left: var(--nav-indicator-left, 0.22rem); width: var(--nav-indicator-width, 4rem); border-radius: 0.5rem; content: ''; background: #4b4d52; box-shadow: inset 0 1px rgba(255, 255, 255, 0.08); transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.editorial-nav-link, .editorial-menu { position: relative; z-index: 1; border-radius: 0.5rem; padding: 0.55rem 0.8rem; color: var(--color-text-muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; transition: color 160ms ease; }
.editorial-nav-link.is-active { color: #fff1f2; }
.editorial-nav-link:hover, .editorial-nav-link.is-active, .editorial-menu:hover { color: #f0aeb5; }
.editorial-nav-link .editorial-arrow { display: inline-block; margin-left: 0.2rem; transition: transform 160ms ease; }
.editorial-nav-link:hover .editorial-arrow { transform: translate(0.2rem, -0.2rem); }
.editorial-nav-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; justify-self: end; gap: 0.45rem; min-height: 2.35rem; overflow: hidden; border: 1px solid rgba(240, 174, 181, 0.42); border-radius: 999px; padding: 0.56rem 0.92rem 0.56rem 1rem; background: linear-gradient(135deg, #070709 0%, #15090e 48%, #551d2a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.45rem 1.2rem rgba(0, 0, 0, 0.26); color: #fff1f2; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.editorial-nav-cta::before { position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.14) 48%, transparent 68%); content: ''; transform: translateX(-135%); transition: transform 420ms ease; }
.editorial-nav-cta:hover { border-color: rgba(255, 211, 217, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0.6rem 1.45rem rgba(70, 14, 30, 0.34); transform: translateY(-1px); }
.editorial-nav-cta:hover::before { transform: translateX(135%); }
.editorial-nav-cta:focus-visible { outline: 2px solid #f0aeb5; outline-offset: 3px; }
.editorial-nav-cta .editorial-arrow { transition: transform 180ms ease; }
.editorial-nav-cta:hover .editorial-arrow { transform: translate(0.14rem, -0.14rem); }
.editorial-menu { display: none; }
.editorial-mobile-panel { display: none; }
.editorial-mobile-panel[hidden] { display: none; }
.editorial-landing { overflow: hidden; }
.editorial-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; min-height: max(40rem, calc(100svh + var(--editorial-nav-overlap) - var(--editorial-nav-height))); padding: clamp(5.5rem, 10vh, 9rem) clamp(1.25rem, 8vw, 9rem) clamp(4.5rem, 9vh, 8rem); overflow: hidden; border-radius: 1rem; background: linear-gradient(135deg, #09090b 0%, #12090d 38%, #3b1720 72%, #09090b 100%); background-size: 190% 190%; animation: hero-base-drift 15s ease-in-out infinite alternate; transform: translate3d(0, 0.75rem, 0) scale(0.975); transform-origin: center center; transition: transform 160ms linear, border-radius 160ms linear; }
html.is-away-from-top .editorial-hero { transform: translate3d(0, var(--hero-scroll-offset, 0px), 0) scale(1); border-radius: 0; }
.editorial-hero::before, .editorial-hero::after { position: absolute; inset: -45%; z-index: 0; content: ''; pointer-events: none; }
.editorial-hero::before { background: radial-gradient(circle at 82% 82%, rgba(178, 35, 57, 0.65) 0%, rgba(91, 21, 34, 0.42) 21%, transparent 48%), repeating-radial-gradient(ellipse at 76% 78%, transparent 0 3.2rem, rgba(191, 53, 73, 0.18) 3.45rem 3.7rem, transparent 4rem 6.8rem); filter: blur(0.2rem); animation: hero-ripple 7s ease-in-out infinite; }
.editorial-hero::after { background: repeating-radial-gradient(ellipse at 76% 78%, transparent 0 6rem, rgba(238, 112, 125, 0.11) 6.25rem 6.55rem, transparent 6.9rem 10rem); transform: rotate(-14deg); animation: hero-ripple-reverse 10s ease-in-out infinite; }
.editorial-hero-copy, .editorial-loop { position: relative; z-index: 1; }
.editorial-hero-copy { max-width: 52rem; }
.editorial-kicker { display: block; color: #e38b95; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.editorial-hero h1 { max-width: 10ch; margin-top: 1.25rem; color: #fbf4f5; font-size: clamp(3.3rem, 9vw, 9.5rem); font-weight: 450; letter-spacing: -0.085em; line-height: 0.88; }
.editorial-word { display: inline-block; color: #d25a68; transition: color 280ms ease, transform 280ms ease; }
.editorial-hero:hover .editorial-word { color: #f0aeb5; transform: translateX(0.12em); }
.editorial-hero p { max-width: 34rem; margin-top: 2rem; color: #d3b1b5; font-size: clamp(0.92rem, 1.5vw, 1.15rem); }
.editorial-link, .editorial-card-link { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 2rem; border: 0; border-bottom: 1px solid #b93649; padding: 0 0 0.55rem; background: transparent; color: #f0aeb5; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.editorial-arrow { display: inline-block; font-size: 1.2rem; line-height: 1; transition: transform 180ms ease; }
.editorial-link:hover .editorial-arrow, .editorial-card:hover .editorial-arrow { transform: translate(0.25rem, -0.25rem); }
.editorial-loop { position: relative; display: grid; width: clamp(12rem, 18vw, 18rem); aspect-ratio: 1; place-items: center; justify-self: end; overflow: hidden; border: 1px solid rgba(240, 174, 181, 0.28); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #7b2838 0%, #35131b 20%, #150a0e 52%, #09090b 72%); box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.5); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease; }
.editorial-loop::before, .editorial-loop::after { position: absolute; inset: 12%; border: 1px solid rgba(231, 137, 146, 0.35); border-radius: 45% 55% 60% 40%; content: ''; transform: rotate(28deg); animation: loop-drift 9s linear infinite; }
.editorial-loop::after { inset: 24%; border-color: rgba(240, 174, 181, 0.22); animation-direction: reverse; animation-duration: 6s; }
.editorial-loop:hover { border-color: #e06a76; transform: scale(1.04) rotate(-2deg); }
.loop-orbit { position: absolute; width: 58%; height: 16%; border: 1px solid rgba(240, 174, 181, 0.45); border-radius: 50%; transform: rotate(-36deg); animation: loop-orbit 5s ease-in-out infinite; }
.loop-orbit-two { width: 36%; height: 68%; transform: rotate(36deg); animation-delay: -2s; }
.loop-core { display: grid; width: 5.5rem; height: 5.5rem; place-items: center; border: 1px solid #e06a76; border-radius: 50%; background: #1b0b10; color: #f6dfe2; font-size: 1.1rem; letter-spacing: 0.15em; box-shadow: 0 0 3rem rgba(193, 58, 73, 0.55); }
.loop-caption { position: absolute; right: 12%; bottom: 13%; color: #d88b93; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; }
.editorial-field { display: grid; grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 1.35fr); gap: clamp(2rem, 8vw, 9rem); padding: clamp(5rem, 12vw, 12rem) clamp(1.25rem, 8vw, 9rem); background: #09090b; }
.editorial-field-intro h2 { max-width: 10ch; margin-top: 1rem; color: #f6edef; font-size: clamp(2.3rem, 5vw, 5rem); font-weight: 450; letter-spacing: -0.07em; line-height: 0.95; }
.editorial-card-grid { display: grid; gap: 1px; background: #33242a; }
.editorial-card { position: relative; display: grid; min-height: 16rem; align-content: space-between; padding: clamp(1.25rem, 3vw, 2.5rem); background: #121216; transition: background-color 260ms ease, transform 260ms ease; }
.editorial-card:hover { z-index: 1; background: #211116; transform: scale(1.025); }
.editorial-card-featured { background: #32151b; }
.editorial-index { color: #cb6975; font-size: 0.68rem; letter-spacing: 0.12em; }
.editorial-card h3 { max-width: 12ch; color: #f4e9eb; font-size: clamp(1.6rem, 3vw, 2.7rem); font-weight: 450; letter-spacing: -0.06em; line-height: 0.95; }
.editorial-card p { max-width: 28rem; margin-top: 1rem; color: #b9a3a7; font-size: 0.86rem; }
.editorial-card-link { justify-self: start; margin-top: 1.5rem; font-size: 0.65rem; }
.editorial-statement { display: grid; gap: 2rem; padding: clamp(5rem, 12vw, 12rem) clamp(1.25rem, 8vw, 9rem); background: #32151b; }
.editorial-statement p { max-width: 13ch; color: #f4dfe2; font-size: clamp(2.4rem, 6vw, 6.5rem); font-weight: 450; letter-spacing: -0.08em; line-height: 0.9; }
.editorial-statement .editorial-kicker { color: #d88892; }
[data-reveal]:not(.editorial-hero) { opacity: 0; transform: translateY(2rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal]:not(.editorial-hero).is-visible { opacity: 1; transform: translateY(0); }
@keyframes loop-drift { from { transform: rotate(28deg) scale(1); } 50% { transform: rotate(208deg) scale(1.1); } to { transform: rotate(388deg) scale(1); } }
@keyframes loop-orbit { from { transform: rotate(-36deg) translateX(-0.4rem); } 50% { transform: rotate(24deg) translateX(0.4rem); } to { transform: rotate(-36deg) translateX(-0.4rem); } }
@keyframes hero-ripple { 0%, 100% { transform: translate3d(-2%, -1%, 0) rotate(-3deg) scale(1.02); } 50% { transform: translate3d(3%, 2%, 0) rotate(9deg) scale(1.14); } }
@keyframes hero-ripple-reverse { 0%, 100% { transform: translate3d(2%, 1%, 0) rotate(-14deg) scale(1.02); } 50% { transform: translate3d(-3%, -2%, 0) rotate(-29deg) scale(1.16); } }
@keyframes hero-base-drift { 0% { background-position: 0% 0%; } 50% { background-position: 65% 35%; } 100% { background-position: 100% 100%; } }
@keyframes page-switch-forward { from { opacity: 0.4; transform: translateX(2.5rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-switch-backward { from { opacity: 0.4; transform: translateX(-2.5rem); } to { opacity: 1; transform: translateX(0); } }
.page-switch-forward { animation: page-switch-forward 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.page-switch-backward { animation: page-switch-backward 420ms cubic-bezier(0.22, 1, 0.36, 1); }
html.is-low-power .editorial-hero { animation: none; background-position: 42% 54%; }
html.is-low-power .editorial-hero::before { filter: none; animation-duration: 14s; opacity: 0.82; }
html.is-low-power .editorial-hero::after { animation-duration: 18s; opacity: 0.62; }
html.is-low-power .editorial-loop::before, html.is-low-power .editorial-loop::after { animation-duration: 14s; }
html.is-low-power .loop-orbit { animation-duration: 8s; }
html.is-low-power .card { box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.3); }
html.is-low-power .editorial-field, html.is-low-power .editorial-statement { content-visibility: auto; contain-intrinsic-size: auto 42rem; }
html.is-low-power.is-away-from-top .editorial-nav, html.is-low-power .bottom-nav { backdrop-filter: none; }
.minimal-hero { display: flex; min-height: min(28rem, 58vh); align-items: flex-end; justify-content: space-between; gap: var(--space-5); padding: clamp(1.5rem, 5vw, 3rem); border-color: #4a2028; background: linear-gradient(135deg, #09090b 0%, #160b0f 50%, #3b1720 100%); color: #fff7f8; }
.minimal-hero h2 { max-width: 24rem; margin-top: var(--space-2); color: #fff7f8; font-size: clamp(2rem, 6vw, 4rem); }
.minimal-hero p { max-width: 28rem; margin-top: var(--space-3); color: #e7c5c9; }
.minimal-hero .eyebrow { color: #ef9da7; }
.minimal-mark { align-self: center; color: #b93649; font-size: clamp(4rem, 14vw, 9rem); line-height: 1; opacity: 0.8; }
.minimal-support { display: grid; grid-template-columns: minmax(0, 16rem); }
.minimal-accent { padding: var(--space-4); border-color: #54232c; background: #32151b; }
.minimal-accent strong { display: block; margin-top: var(--space-2); color: #f5d4d7; font-size: 1.35rem; }
.minimal-accent p { margin-top: var(--space-1); color: #cdaeb2; font-size: 0.82rem; }
.settings-page { display: grid; gap: var(--space-4); max-width: 34rem; }
.settings-heading h2 { margin-top: var(--space-2); }
.settings-card { display: grid; gap: var(--space-4); padding: var(--space-5); }
.settings-card .button { justify-self: start; }
.form-success { border: 1px solid #3e704e; border-radius: var(--radius-sm); padding: var(--space-3); background: #16271b; color: #b9ddc0; font-size: 0.82rem; }
.security-card { gap: 0; overflow: hidden; padding: 0; }
.security-section { display: grid; grid-template-columns: 1fr minmax(12rem, 18rem); gap: var(--space-5); align-items: start; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.security-section h3 { margin-top: var(--space-2); }
.security-section p { margin-top: var(--space-2); font-size: 0.8rem; }
.security-section > label { align-self: center; }
.security-fields { display: grid; gap: var(--space-3); }
.security-actions { display: flex; justify-content: flex-end; padding: var(--space-4) var(--space-5); background: var(--color-surface-raised); }
.account-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.account-sidebar { position: sticky; top: var(--space-4); display: grid; gap: var(--space-5); padding: var(--space-4) 0; }
.account-sidebar strong { display: block; margin-top: var(--space-2); color: var(--color-text); font-size: 1.05rem; }
.account-sidebar nav { display: grid; gap: var(--space-2); }
.account-link { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; background: transparent; color: var(--color-text-muted); text-align: left; }
.account-link:hover, .account-link.is-active { border-color: #54232c; background: var(--color-primary-soft); color: #f0aeb5; }
.account-main { min-width: 0; }
.account-context { display: grid; gap: var(--space-4); max-width: 42rem; }
.account-context .settings-heading p { max-width: 34rem; margin-top: var(--space-2); }
.profile-card { display: grid; gap: var(--space-5); padding: var(--space-5); }
.profile-identity { display: grid; align-items: center; }
.profile-photo-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.profile-avatar { display: grid; width: 5rem; height: 5rem; overflow: hidden; place-items: center; border: 1px solid #6b2633; border-radius: 50%; background: var(--color-primary-soft); color: #f0aeb5; font-size: 1.25rem; font-weight: 800; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-dropzone { position: relative; display: grid; width: 5rem; height: 5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.profile-photo-dropzone::after { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.68); color: #fff; content: 'Change'; font-size: 0.72rem; font-weight: 800; opacity: 0; transition: opacity 140ms ease; }
.profile-photo-dropzone:hover::after, .profile-photo-dropzone.is-dragging::after, .profile-photo-dropzone:focus-visible::after { opacity: 1; }
.profile-photo-dropzone.is-dragging .profile-avatar { border-color: #f0aeb5; box-shadow: 0 0 0 0.25rem rgba(193, 58, 73, 0.25); }
.profile-photo-actions { display: flex; align-items: center; gap: var(--space-3); }
.profile-photo-field > .field-note { grid-column: 2; margin-top: -0.5rem; }
.profile-fields { display: grid; gap: var(--space-3); }
.profile-fields textarea { min-height: 7rem; resize: vertical; }
.auth-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.auth-tabs .is-active { border-bottom: 2px solid var(--color-primary); }
#auth-form { display: grid; gap: var(--space-3); }
.form-error { border: 1px solid #6c252f; border-radius: var(--radius-sm); padding: var(--space-3); background: #351418; color: #ffb3b8; font-size: 0.9rem; }
.account-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.account-summary { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3); border-left: 0.25rem solid var(--color-primary); background: var(--color-primary-soft); }
.account-summary p { color: var(--color-text); font-size: 0.9rem; }
.field-note { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 500; }
.global-chat { position: fixed; right: 1rem; bottom: 5rem; z-index: 8; display: grid; justify-items: end; gap: var(--space-2); }
.chat-launcher { position: relative; min-height: 2.75rem; border-radius: 2rem; box-shadow: var(--shadow-soft); }
.chat-badge { display: inline-grid; min-width: 1.2rem; height: 1.2rem; margin-left: var(--space-2); place-items: center; border: 2px solid var(--color-surface); border-radius: 50%; background: #df4f5c; color: white; font-size: 0.64rem; line-height: 1; }
.chat-popover { display: grid; width: min(calc(100vw - 2rem), 22rem); max-height: min(70vh, 34rem); gap: var(--space-3); padding: var(--space-3); box-shadow: var(--shadow-strong); }
.chat-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.chat-heading h2 { margin-top: var(--space-1); font-size: 1.2rem; }
.chat-heading .icon-button { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
.chat-messages { display: grid; min-height: 5rem; max-height: 18rem; overflow-y: auto; align-content: start; gap: var(--space-2); padding: var(--space-2); background: var(--color-surface-muted); border-radius: var(--radius-sm); }
.chat-message { color: var(--color-text); font-size: 0.85rem; overflow-wrap: anywhere; }
.chat-message strong { color: #f0aeb5; }
.chat-time { display: block; margin-top: 0.1rem; color: var(--color-text-muted); font-size: 0.65rem; }
.chat-empty { padding: var(--space-3); font-size: 0.8rem; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.chat-form .button { min-height: 2.6rem; }

@media (min-width: 38rem) {
  .topbar, .page-shell { width: min(100% - 3rem, 72rem); }
  .briefing-grid, .interest-grid, .suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-fields { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .todo-form-fields { grid-template-columns: 2fr 1fr 1fr; }
  .todo-toolbar { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
  .answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-backdrop { place-items: center; }
}

@media (min-width: 62rem) {
  .editorial-loop { align-self: start; justify-self: start; margin-top: clamp(1.5rem, 8vh, 5rem); margin-left: clamp(0rem, 2vw, 2rem); }
}

@media (max-width: 52rem) {
  .editorial-hero { grid-template-columns: 1fr; min-height: max(40rem, calc(100svh + var(--editorial-nav-overlap) - var(--editorial-nav-height))); gap: clamp(2rem, 8vw, 3.5rem); padding-block: clamp(5.5rem, 12vh, 8rem) clamp(4rem, 10vh, 7rem); }
  .editorial-loop { width: min(48vw, 16rem); justify-self: center; }
}

@media (max-width: 37.99rem) {
  :root { --editorial-nav-overlap: 2.35rem; --editorial-nav-height: 2.35rem; }
  .editorial-nav { top: 0; width: min(calc(100% - 2rem), 20rem); padding: max(0.42rem, env(safe-area-inset-top)) 0.75rem 0.42rem; border-radius: 0 0 1rem 1rem; }
  .editorial-nav-row { display: block; min-height: 1.45rem; }
  .editorial-brand { display: flex; width: 100%; align-items: center; justify-content: center; font-size: 0.68rem; }
  .editorial-brand .brand-mark { display: none; }
  .editorial-nav nav, .editorial-nav-cta { display: none; }
  .editorial-menu { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; border: 0; opacity: 0; }
  .editorial-menu.is-open { opacity: 1; padding: 0 0.45rem; background: transparent; color: var(--color-text-muted); font-size: 1.25rem; text-align: right; }
  .editorial-menu.is-open .menu-word { display: none; }
  .editorial-menu.is-open .menu-close { display: inline; }
  .editorial-mobile-panel { display: grid; gap: 0.35rem; margin: 0.55rem -0.33rem -0.33rem; padding: 0.85rem 0.6rem 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .editorial-mobile-link, .editorial-mobile-cta { border: 0; border-radius: 0.55rem; padding: 0.7rem 0.75rem; background: transparent; color: var(--color-text-muted); text-align: left; font-size: 0.8rem; }
  .editorial-mobile-link:hover, .editorial-mobile-cta:hover { background: rgba(255, 255, 255, 0.06); color: #f0aeb5; }
  .editorial-mobile-cta { margin-top: 0.35rem; border: 1px solid rgba(240, 174, 181, 0.42); background: linear-gradient(135deg, #070709 0%, #15090e 48%, #551d2a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fff1f2; font-weight: 750; text-align: center; text-transform: uppercase; }
  .editorial-hero { min-height: max(36rem, calc(100svh + var(--editorial-nav-overlap) - var(--editorial-nav-height))); padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); padding-top: clamp(4.75rem, 11vh, 6rem); padding-bottom: calc(clamp(3.5rem, 9vh, 5.5rem) + env(safe-area-inset-bottom)); transform: translate3d(0, 0.6rem, 0) scale(0.98); }
  html.is-away-from-top .editorial-hero { transform: translate3d(0, var(--hero-scroll-offset, 0px), 0) scale(1); }
  .editorial-hero h1 { font-size: clamp(3rem, 16vw, 5.25rem); }
  .editorial-hero p { margin-top: 1.5rem; }
  .editorial-loop { width: min(54vw, 15rem); justify-self: center; }
  .editorial-field { grid-template-columns: 1fr; }
  .signal-grid { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .account-sidebar { position: static; gap: var(--space-3); padding: 0; }
  .account-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-link { font-size: 0.78rem; }
  .security-section { grid-template-columns: 1fr; gap: var(--space-3); }
  .security-section > label { align-self: auto; }
}

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

@media (min-width: 62rem) {
  .topbar { padding-top: 2rem; }
  .page-shell { padding-top: var(--space-5); }
  .bottom-nav { right: auto; bottom: 1.5rem; left: 50%; width: min(100% - 3rem, 34rem); transform: translateX(-50%); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .global-chat { right: 1.5rem; bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }

/* The owner explicitly requested motion for the hero and page switch. Keep the rest of the UI reduced-motion safe. */
@media (prefers-reduced-motion: reduce) {
  .editorial-hero { animation-duration: 15s !important; animation-iteration-count: infinite !important; }
  .editorial-hero::before { animation: hero-ripple 7s ease-in-out infinite !important; }
  .editorial-hero::after { animation: hero-ripple-reverse 10s ease-in-out infinite !important; }
  .editorial-loop::before, .editorial-loop::after { animation-duration: 9s !important; animation-iteration-count: infinite !important; }
  .loop-orbit { animation-duration: 5s !important; animation-iteration-count: infinite !important; }
  .page-switch-forward, .page-switch-backward { animation-duration: 420ms !important; animation-iteration-count: 1 !important; }
  .minimal-viewport, .minimal-track { transition-duration: 0.01ms !important; }
  .editorial-nav nav::before { transition-duration: 380ms !important; }
}

/* The hero settle is an intentional part of the landing interaction. */
@media (prefers-reduced-motion: reduce) {
  .editorial-hero { transition-duration: 160ms !important; }
}