:root {
  color-scheme: light;
  --bg: #f3f0e8;
  --bg-deep: #ebe6db;
  --panel: rgba(255, 254, 250, .78);
  --panel-solid: #fffefa;
  --text: #132019;
  --text-soft: #34463c;
  --muted: #636e66;
  --line: rgba(19, 32, 25, .13);
  --line-strong: rgba(19, 32, 25, .22);
  --accent: #1e6043;
  --accent-soft: #dce9df;
  --button-text: #fffef9;
  --danger: #9a403d;
  --shadow: 0 28px 80px rgba(35, 47, 39, .11);
  --focus: rgba(30, 96, 67, .18);
  --sheen: rgba(255, 255, 255, .72);
  --ambient: rgba(30, 96, 67, .10);
  --glass: rgba(255, 254, 250, .88);
  --message-assistant: #fffefb;
  --message-user: #205f45;
  --message-user-text: #fffef9;
  --radius-large: 28px;
  --radius-medium: 18px;
  --touch: 46px;
  --header-height: 66px;
  --keyboard-inset: 0px;
  --visual-viewport-height: 100dvh;
  --serif: "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --share-bg: #fffaf3;
  --share-bg-deep: #f0e3d7;
  --share-text: #302923;
  --share-soft: #746a61;
  --share-line: rgba(74, 53, 40, .14);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-kerning: normal;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c121c;
  --bg-deep: #101824;
  --panel: rgba(20, 29, 43, .88);
  --panel-solid: #182334;
  --text: #f2eee8;
  --text-soft: #d5dbe5;
  --muted: #a8b1c0;
  --line: #303a4a;
  --line-strong: #3b4759;
  --accent: #dc936d;
  --accent-soft: #30211f;
  --button-text: #1b120e;
  --danger: #efa9a3;
  --shadow: 0 34px 90px rgba(0, 0, 0, .34);
  --focus: rgba(220, 147, 109, .2);
  --sheen: rgba(255, 255, 255, .055);
  --ambient: rgba(220, 147, 109, .09);
  --glass: rgba(16, 24, 36, .9);
  --message-assistant: #1a2535;
  --message-user: #743f2f;
  --message-user-text: #fffaf5;
  --share-bg: #111a26;
  --share-bg-deep: #0d141e;
  --share-text: #f4efe8;
  --share-soft: #aeb7c5;
  --share-line: rgba(242, 238, 232, .13);
}

:root[data-audience="youth"] {
  --bg: #fff7ef;
  --bg-deep: #f5eadf;
  --panel: rgba(255, 252, 247, .9);
  --panel-solid: #fffdf9;
  --text: #302b35;
  --text-soft: #514b58;
  --muted: #756d78;
  --line: rgba(91, 72, 90, .13);
  --line-strong: rgba(91, 72, 90, .22);
  --accent: #9f493b;
  --accent-soft: #f7ddd3;
  --focus: rgba(159, 73, 59, .22);
  --ambient: rgba(159, 73, 59, .12);
  --message-user: #954334;
  --message-assistant: #fffdf9;
  --radius-large: 32px;
  --radius-medium: 22px;
}

:root[data-audience="youth"][data-theme="dark"] {
  --bg: #111621;
  --bg-deep: #181d2a;
  --panel: rgba(28, 34, 48, .92);
  --panel-solid: #20283a;
  --text: #fff4ec;
  --text-soft: #e4dce3;
  --muted: #beb4c0;
  --line: #3d4354;
  --line-strong: #4c5366;
  --accent: #f0a080;
  --accent-soft: #392724;
  --focus: rgba(240, 160, 128, .22);
  --message-user: #8b493b;
  --message-assistant: #252e40;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--bg);
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top));
  scroll-padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}
body {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + env(safe-area-inset-top));
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  background:
    radial-gradient(circle at 14% 16%, var(--ambient) 0, transparent 28rem),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--accent) 6%, transparent) 0, transparent 32rem),
    linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 58%, var(--bg) 100%);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}
body.keyboard-visible { padding-bottom: 0; }

:where(
  .reflection-body,
  .proofread-review p,
  .share-card blockquote,
  .share-question p,
  .share-card footer,
  .privacy-copy,
  .legal-card p,
  .legal-card li,
  .history-item p,
  .auth-copy,
  .auth-existing p,
  .site-footer p
) {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-character;
  overflow-wrap: anywhere;
  hanging-punctuation: first last;
}

:where(:lang(ko), :lang(ja), :lang(zh-CN)) :where(
  .reflection-body,
  .share-card blockquote,
  .share-question p,
  .privacy-copy,
  .history-item p
) { word-break: keep-all; }
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  opacity: .16;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  pointer-events: none;
}
body::after {
  position: fixed;
  right: -18rem;
  bottom: -22rem;
  z-index: -1;
  width: 42rem;
  height: 42rem;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5rem color-mix(in srgb, var(--accent) 2%, transparent), 0 0 12rem color-mix(in srgb, var(--accent) 5%, transparent);
  content: "";
  pointer-events: none;
}
button, input, textarea { font: inherit; }
h1, h2, h3, .share-title { overflow-wrap: anywhere; text-wrap: balance; }
p, strong, span, blockquote, footer {
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-break: strict;
}
p, blockquote, footer { text-wrap: pretty; }
:root[data-language="en"] p, :root[data-language="en"] blockquote,
:root[data-language="fr"] p, :root[data-language="fr"] blockquote,
:root[data-language="de"] p, :root[data-language="de"] blockquote,
:root[data-language="hi"] p, :root[data-language="hi"] blockquote { hyphens: auto; word-break: normal; }
:root[data-language="en"] :is(h1, h2, h3, button),
:root[data-language="fr"] :is(h1, h2, h3, button),
:root[data-language="de"] :is(h1, h2, h3, button),
:root[data-language="hi"] :is(h1, h2, h3, button) { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
button { min-height: 44px; max-width: 100%; cursor: pointer; font: inherit; line-height: 1.2; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; left: max(1rem, env(safe-area-inset-left)); top: max(.5rem, env(safe-area-inset-top)); z-index: 100; display: inline-flex; min-height: 44px; padding: .65rem .9rem; border: 2px solid var(--accent); border-radius: 999px; align-items: center; background: var(--panel-solid); box-shadow: var(--shadow); color: var(--text); font-size: .8rem; font-weight: 800; text-decoration: none; transform: translateY(-180%); transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
.site-header :is(button, a, select):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.site-header {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  z-index: 20;
  display: grid;
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--header-height);
  padding-right: max(1rem, calc((100vw - 1320px) / 2));
  padding-left: max(1rem, calc((100vw - 1320px) / 2));
  margin: 0;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: clamp(.4rem, 1.2vw, 1rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, black 5%, transparent);
  backdrop-filter: blur(16px);
}
.site-header::after { position: absolute; right: 0; bottom: -1px; width: clamp(3rem, 12vw, 8rem); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); content: ""; }
.brand { display: inline-flex; min-width: 0; max-width: max-content; min-height: 44px; align-items: center; gap: .52rem; overflow: hidden; color: var(--text); font-size: .98rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo-frame { display: grid; width: 36px; height: 32px; padding: 2px; flex: 0 0 36px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, #071b45 18%, var(--line)); border-radius: 9px; background: #ffffff; box-shadow: 0 5px 16px color-mix(in srgb, #071b45 13%, transparent); }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.header-actions { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: flex-end; justify-self: end; flex-wrap: nowrap; gap: .3rem; white-space: nowrap; }
.header-actions > * { flex: 0 0 auto; }
.feedback-button { display: inline-flex; min-height: 44px; padding: .45rem .72rem; border: 1px solid var(--line-strong); border-radius: 999px; align-items: center; gap: .38rem; background: var(--panel); color: var(--text-soft); font-size: .72rem; font-weight: 760; text-decoration: none; }
.feedback-button:hover { border-color: var(--accent); background: var(--panel-solid); color: var(--accent); }
.feedback-button svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feedback-address { color: var(--muted); font-size: .66rem; font-weight: 620; }
.language-picker { position: relative; display: inline-flex; min-height: 44px; align-items: center; }
.language-current { display: none; }
.language-picker::after { position: absolute; right: .65rem; color: var(--muted); font-size: .62rem; content: "⌄"; pointer-events: none; }
.language-picker select { min-width: 92px; height: 44px; padding: 0 1.65rem 0 .72rem; border: 1px solid var(--line-strong); border-radius: 999px; appearance: none; background: var(--panel); color: var(--text-soft); font-size: .74rem; font-weight: 760; outline: none; }
.language-picker select:hover { border-color: var(--accent); color: var(--accent); }
.language-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
:root[data-language="en"] { --serif: Georgia, "Times New Roman", serif; font-family: Inter, "Segoe UI", Arial, sans-serif; }
:root[data-language="ja"] { --serif: "Yu Mincho", "Hiragino Mincho ProN", serif; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; }
:root[data-language="zh-CN"] { --serif: "Noto Serif SC", SimSun, serif; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:root[data-language="hi"] { --serif: "Noto Serif Devanagari", "Nirmala UI", serif; font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif; }
:root[data-language="fr"], :root[data-language="de"] { --serif: Georgia, "Times New Roman", serif; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.text-button, .theme-button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .84rem; font-weight: 700; }
.text-button { padding: .6rem .8rem; border: 1px solid transparent; }
.theme-button { display: inline-grid; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); align-items: center; justify-content: center; background: var(--panel); box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent); }
.theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.text-button:hover { border-color: var(--line-strong); background: var(--panel); color: var(--text); }
.login-button { display: inline-flex; max-width: 156px; padding: .55rem .75rem; align-items: center; gap: .4rem; overflow: hidden; border: 1px solid transparent; }
.login-button svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-button.is-authenticated { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--accent); }
.theme-button:hover { border-color: var(--accent); background: var(--panel-solid); color: var(--accent); }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; }
:root[data-theme="dark"] .theme-button { border-color: #303a4a; background: #151e2c; color: #f2eee8; }
:root[data-theme="dark"] .theme-button:hover { border-color: #dc936d; background: #182334; color: #dc936d; }

main { position: relative; z-index: 1; display: grid; width: min(calc(100% - 2rem), 1240px); min-width: 0; min-height: 0; max-width: 100%; margin: 0 auto; overflow: visible; flex: 1 0 auto; align-content: start; justify-items: center; }
.screen { width: 100%; min-width: 0; height: auto; max-width: 100%; max-height: none; padding: clamp(.65rem, 2vh, 1.6rem) 0; overflow: visible; animation: reveal .42s cubic-bezier(.2,.7,.2,1) both; }
.screen[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.hero { display: grid; height: auto; min-height: 0; text-align: center; place-items: center; }
.hero-inner { position: relative; display: grid; width: min(100%, 1040px); min-width: 0; max-width: 100%; padding: clamp(.6rem, 2vw, 1.35rem); justify-items: center; text-align: center; }
.hero-option-row { display: flex; margin-top: .35rem; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; }
.audience-mode-button { min-height: 44px; padding: .48rem .75rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--accent); font-size: .68rem; font-weight: 800; }
.audience-mode-button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel)); box-shadow: 0 0 0 3px var(--focus); }
.audience-mode-button[aria-pressed="true"]::before { margin-right: .28rem; content: "✓"; }
.audience-mode-status { width: fit-content; max-width: min(100%, 42rem); margin: .55rem auto 0; padding: .45rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--text-soft); font-size: .7rem; font-weight: 680; line-height: 1.5; text-wrap: pretty; }
.audience-mode-status[hidden] { display: none; }
:root[data-audience="youth"] .audience-mode-status { box-shadow: inset 0 1px 0 var(--sheen), 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-audience="youth"] body { background: radial-gradient(circle at 12% 18%, color-mix(in srgb, #ffbb78 22%, transparent) 0, transparent 18rem), radial-gradient(circle at 88% 76%, color-mix(in srgb, #8dc7c1 20%, transparent) 0, transparent 24rem), linear-gradient(155deg, var(--bg) 0%, var(--bg-deep) 58%, var(--bg) 100%); }
:root[data-audience="youth"] body::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 1px, transparent 1.5px); background-size: 28px 28px; opacity: .28; }
:root[data-audience="youth"] .site-header { border-bottom-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--panel-solid) 93%, #ffd8c9), color-mix(in srgb, var(--panel-solid) 94%, #d7eee9)); }
:root[data-audience="youth"] .hero-inner { isolation: isolate; overflow: clip; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 88%, #fff0d9), color-mix(in srgb, var(--panel-solid) 91%, #dff2ed)); box-shadow: inset 0 1px 0 var(--sheen), 0 28px 80px color-mix(in srgb, var(--accent) 14%, transparent); }
:root[data-audience="youth"] .hero-inner::before, :root[data-audience="youth"] .hero-inner::after { z-index: -1; width: clamp(8rem, 18vw, 13rem); height: clamp(8rem, 18vw, 13rem); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, #ffbc8c 24%, transparent), transparent 68%); }
:root[data-audience="youth"] .hero-inner::before { top: -6rem; left: -4rem; }
:root[data-audience="youth"] .hero-inner::after { top: auto; right: -4rem; bottom: -6rem; transform: none; background: radial-gradient(circle, color-mix(in srgb, #7fc9bf 20%, transparent), transparent 68%); }
:root[data-audience="youth"] .eyebrow { width: fit-content; padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--panel-solid) 80%, transparent); letter-spacing: .13em; }
:root[data-audience="youth"] #startTitle em { display: inline-block; margin-top: .08em; padding: .04em .24em .12em; border-radius: .35em; background: color-mix(in srgb, var(--accent) 10%, transparent); }
:root[data-audience="youth"] .audience-mode-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 72%, white); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 32%, transparent), 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--button-text); }
:root[data-audience="youth"] .step { width: fit-content; padding: .32rem .6rem; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
:root[data-audience="youth"] .dialogue-panel { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 90%, #fff1cd), color-mix(in srgb, var(--glass) 92%, #dff2ed)); }
:root[data-audience="youth"] .dialogue-head { background: linear-gradient(90deg, color-mix(in srgb, var(--panel-solid) 84%, #ffd8c9), color-mix(in srgb, var(--panel-solid) 86%, #d7eee9)); }
:root[data-audience="youth"] .message-assistant .message-bubble { border-color: color-mix(in srgb, #67a99f 25%, var(--line)); background: color-mix(in srgb, var(--message-assistant) 88%, #d7eee9); }
:root[data-audience="youth"] .reflection-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--panel) 94%, #fff1cd), var(--glass)); }
:root[data-audience="youth"] .perspective-map-item:nth-child(3n + 1) button { background: color-mix(in srgb, #ffd8c9 30%, var(--panel)); }
:root[data-audience="youth"] .perspective-map-item:nth-child(3n + 2) button { background: color-mix(in srgb, #d7eee9 28%, var(--panel)); }
:root[data-audience="youth"] .perspective-map-item:nth-child(3n + 3) button { background: color-mix(in srgb, #e7ddf5 26%, var(--panel)); }
:root[data-audience="youth"][data-theme="dark"] .perspective-map-item button { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
:root[data-audience="youth"] .hero-inner::before, :root[data-audience="youth"] .hero-inner::after { border-radius: 42% 58% 55% 45%; }
:root[data-audience="youth"] :where(.reflection-card, .share-card, .dialogue-panel, .auth-card, .legal-card, .history-item) { border-radius: 30px; }
:root[data-audience="youth"] :where(.primary-button, .secondary-button, .danger-button) { border-radius: 18px; }
:root[data-audience="youth"] .message-bubble { border-radius: 8px 20px 20px 20px; }
:root[data-audience="youth"] .message-user .message-bubble { border-radius: 20px 20px 8px 20px; }
.youth-safety-note { padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--text-soft); font-size: .78rem; line-height: 1.65; text-align: left; text-wrap: pretty; }
.youth-safety-note[hidden] { display: none; }
.youth-experience-banner { width: fit-content; max-width: min(100%, 52rem); margin: .55rem auto .1rem; padding: .52rem .78rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--text-soft); font-size: .78rem; font-weight: 760; line-height: 1.55; overflow-wrap: anywhere; text-align: center; text-wrap: pretty; }
.youth-experience-banner::before { margin-right: .38rem; color: var(--accent); content: "★"; }
.youth-experience-banner[hidden] { display: none; }
.hero-inner::before, .hero-inner::after { position: absolute; top: 50%; width: clamp(2rem, 8vw, 7rem); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 38%, transparent)); content: ""; }
.hero-inner::before { left: 0; }
.hero-inner::after { right: 0; transform: scaleX(-1); }
.eyebrow, .step { margin: 0 0 clamp(1rem, 2.2vh, 1.4rem); color: var(--accent); font-size: .66rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
.step { display: flex; max-width: 100%; margin-inline: auto; align-items: center; justify-content: center; gap: .65rem; text-align: center; }
.step::before, .step::after { width: clamp(.75rem, 5vw, 4.5rem); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); content: ""; flex: 0 1 4.5rem; }
.step::after { transform: scaleX(-1); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.eyebrow strong { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
h1, h2 { margin: 0; font-weight: 760; letter-spacing: -.052em; line-height: 1.08; word-break: keep-all; text-wrap: balance; }
h1 { font-size: clamp(28px, 3vw, 42px); }
h1 em { color: var(--accent); font-style: normal; text-shadow: 0 14px 42px color-mix(in srgb, var(--accent) 22%, transparent); }
h2 { font-size: clamp(20px, 2.25vw, 28px); }
.screen:not(.hero) > h2 { max-inline-size: min(100%, 28em); margin-inline: auto; overflow-wrap: anywhere; text-align: center; }
#startScreen h1 { line-height: 1.34; }
#nameScreen h2 { line-height: 1.42; }
#startScreen .hero-copy { width: min(100%, 62rem); margin-inline: auto; line-height: 1.95; text-align: center; text-align-last: center; text-justify: auto; white-space: pre-line; }
.hero-copy, .privacy-copy { margin: clamp(1.2rem, 2.8vh, 1.8rem) auto clamp(1.4rem, 3.2vh, 2.1rem); color: var(--muted); font-size: clamp(.9rem, 1.35vw, 1.02rem); line-height: 1.8; }
.hero-copy, .service-boundary { text-align: center; text-align-last: center; }

.primary-button, .secondary-button, .danger-button {
  min-height: 48px;
  padding: .72rem 1.05rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.primary-button { border: 1px solid color-mix(in srgb, var(--accent) 82%, white); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 20%, transparent); color: var(--button-text); }
.primary-button .button-arrow { display: inline-block; margin-left: .35rem; transition: transform .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, white 36%, transparent), 0 16px 38px color-mix(in srgb, var(--accent) 27%, transparent); }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(0) scale(.985); }
.primary-button:hover .button-arrow { transform: translateX(3px); }
.secondary-button { border: 1px solid var(--line-strong); background: linear-gradient(145deg, var(--sheen), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen); color: var(--text); }
.danger-button { border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: transparent; color: var(--danger); }
.secondary-button:hover, .danger-button:hover { transform: translateY(-2px); border-color: var(--accent); }
.primary-button:disabled { cursor: wait; opacity: .55; transform: none; }
.hero-button { min-width: min(100%, 225px); }

.trust-row { display: inline-flex; margin-top: clamp(1.2rem, 3vh, 1.8rem); padding: .2rem .45rem; border: 1px solid var(--line); border-radius: 999px; gap: .15rem; justify-content: center; flex-wrap: wrap; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: inset 0 1px 0 var(--sheen); }
.trust-row span { position: relative; padding: .4rem .65rem .4rem 1.25rem; color: var(--muted); font-size: .73rem; font-weight: 650; }
.trust-row span::before { position: absolute; left: .55rem; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); content: ""; transform: translateY(-50%); }
.service-boundary { max-width: 680px; margin: .55rem auto 0; color: var(--muted); font-size: .66rem; line-height: 1.5; text-wrap: balance; }
#startScreen .service-boundary { width: min(100%, 680px); margin-inline: auto; text-align: center; text-align-last: center; text-justify: auto; letter-spacing: normal; }
.legal-inline-button, .footer-legal-button { min-height: 44px; padding: .45rem .65rem; border: 0; border-radius: 999px; background: transparent; color: var(--accent); font-size: .67rem; font-weight: 780; text-decoration: underline; text-underline-offset: .2em; }
.legal-inline-button { margin-top: .18rem; }
.legal-inline-button:hover, .footer-legal-button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.form-screen, .result-screen, .auth-screen, .history-screen, .legal-screen { max-width: 960px; align-content: center; }
.form-screen, .result-screen, .share-screen, .auth-screen, .history-screen, .legal-screen { display: flex; min-height: 0; flex-direction: column; justify-content: flex-start; }
.form-screen form { display: grid; margin-top: 2.2rem; gap: 1.15rem; }
#nameForm { padding: clamp(.8rem, 2vw, 1.15rem); border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--panel-solid) 72%, transparent); box-shadow: inset 0 1px 0 var(--sheen), 0 22px 65px color-mix(in srgb, black 7%, transparent); }
.form-actions { display: grid; grid-template-columns: minmax(92px, .72fr) minmax(136px, 1.28fr); gap: .65rem; }
.field { display: grid; gap: .65rem; }
.field > span { color: var(--text); font-size: .9rem; font-weight: 730; }
.field em { color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 550; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 16px; outline: none;
  background: linear-gradient(145deg, var(--sheen), var(--panel)); color: var(--text); padding: 1rem 1.05rem; box-shadow: inset 0 1px 0 var(--sheen), 0 10px 28px color-mix(in srgb, var(--text) 3%, transparent);
}
.field input, .field textarea, .share-editor input, .share-editor textarea { caret-color: var(--accent); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field textarea { min-height: 118px; max-height: 40vh; resize: vertical; line-height: 1.7; }
#situationScreen { max-width: 1080px; }
#situationScreen form { width: 100%; min-width: 0; max-width: 100%; margin-top: .75rem; gap: .6rem; }
#situationScreen h2 { line-height: 1.42; }
#situationScreen .consent-row { line-height: 1.4; }
.dialogue-panel { position: relative; display: grid; width: 100%; min-width: 0; height: auto; max-width: 100%; min-height: 0; grid-template-rows: auto auto; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: var(--radius-large); overflow: visible; overflow-x: clip; overflow-y: visible; background: var(--glass); box-shadow: inset 0 1px 0 var(--sheen), 0 26px 74px color-mix(in srgb, black 12%, transparent); }
.dialogue-panel.is-ready { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: inset 0 1px 0 var(--sheen), 0 26px 74px color-mix(in srgb, var(--accent) 14%, transparent); }
.dialogue-head { position: relative; z-index: 2; display: grid; min-width: 0; min-height: 64px; max-width: 100%; padding: .55rem .7rem; grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 16rem); align-items: center; gap: .75rem; overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--glass) 88%, var(--panel-solid)); backdrop-filter: blur(18px); }
.dialogue-person { display: flex; min-width: 0; align-items: center; gap: .6rem; }
.dialogue-avatar, .message-avatar { display: grid; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 50%; place-items: center; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent), 0 7px 18px color-mix(in srgb, var(--accent) 20%, transparent); color: var(--button-text); font-family: var(--serif); font-weight: 800; }
.dialogue-avatar { width: 38px; height: 38px; font-size: .82rem; }
.dialogue-person > div { display: grid; min-width: 0; gap: .12rem; }
.dialogue-person strong { overflow: hidden; color: var(--text); font-size: .82rem; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.dialogue-person small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.dialogue-person i { display: inline-block; width: 5px; height: 5px; margin-right: .18rem; border-radius: 50%; background: #38a66b; box-shadow: 0 0 0 3px color-mix(in srgb, #38a66b 12%, transparent); }
.dialogue-continuity { min-width: 0; max-width: 16rem; margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: .68rem; font-weight: 720; line-height: 1.4; text-align: right; }
.dialogue-window { --dialogue-window-gutter: .75rem; position: relative; isolation: isolate; display: flex; width: 100%; min-width: 0; max-width: 100%; min-height: 0; padding: .55rem var(--dialogue-window-gutter) 0; flex-direction: column; justify-content: flex-start; gap: .34rem; overflow: visible; overscroll-behavior: auto; overflow-anchor: auto; background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32%), linear-gradient(160deg, color-mix(in srgb, var(--bg) 48%, transparent), color-mix(in srgb, var(--panel) 64%, transparent)); }
.dialogue-window > * { min-width: 0; max-width: 100%; flex: 0 0 auto; }
.dialogue-day { display: flex; margin: auto 0 .05rem; align-items: center; gap: .55rem; color: var(--muted); font-size: .7rem; }
.dialogue-day::before, .dialogue-day::after { height: 1px; background: var(--line); content: ""; flex: 1; }
.dialogue-transcript { display: grid; width: 100%; min-width: 0; max-width: 100%; min-height: min-content; flex: 0 0 auto; gap: .26rem; }
.dialogue-history-transcript { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: .55rem; }
.dialogue-history-transcript[hidden] { display: none; }
.dialogue-history-heading { width: fit-content; min-width: 0; max-width: 100%; margin: .1rem auto .15rem; padding: .3rem .65rem; overflow-wrap: anywhere; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-align: center; }
.previous-dialogue-record { display: grid; width: 100%; min-width: 0; max-width: 100%; padding: .25rem 0 .65rem; overflow: visible; border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent); gap: .28rem; content-visibility: auto; contain-intrinsic-size: auto 420px; }
.dialogue-previous-day { margin-top: .15rem; }
.message-history-result { margin-top: .15rem; }
.message-result-label { display: block; margin: 0 0 .2rem .1rem; color: var(--accent); font-size: .62rem; font-weight: 800; letter-spacing: .025em; }
.dialogue-summary { width: fit-content; min-width: 0; max-width: 100%; margin: 0 auto .08rem; padding: .24rem .55rem; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); font-size: .68rem; line-height: 1.35; text-align: center; }
.dialogue-day span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.chat-exchange { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: .2rem; }
.message-row { display: flex; width: 100%; min-width: 0; max-width: 100%; flex: 0 0 auto; align-items: flex-end; gap: .42rem; }
.message-user { justify-content: flex-end; }
.message-stack { display: grid; width: auto; min-width: 0; max-width: 620px; flex: 0 1 82%; gap: .18rem; }
.message-user .message-stack { justify-items: end; }
.message-stack > small { padding-left: .25rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
.message-bubble { width: fit-content; min-width: 0; max-width: 100%; padding: .64rem .78rem; overflow-wrap: anywhere; border: 1px solid var(--line); background: var(--message-assistant); box-shadow: 0 6px 18px color-mix(in srgb, black 5%, transparent); }
.message-bubble p { min-width: 0; max-width: 100%; margin: 0; overflow-wrap: anywhere; color: var(--text-soft); font-size: .78rem; font-weight: 620; line-height: 1.55; text-wrap: pretty; word-break: break-word; }
.message-assistant .message-bubble { border-radius: 6px 17px 17px 17px; }
.message-user .message-bubble { border-color: transparent; border-radius: 17px 6px 17px 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--message-user) 90%, white), var(--message-user)); }
.message-user .message-bubble p { color: var(--message-user-text); }
.message-avatar { width: 27px; height: 27px; font-size: .6rem; }
.message-compact .message-avatar { width: 20px; height: 20px; font-size: .5rem; }
.message-compact .message-bubble { padding: .35rem .55rem; }
.message-compact .message-bubble p { font-size: .78rem; line-height: 1.5; }
.message-time { min-width: 0; max-width: 100%; margin: 0 .12rem; overflow-wrap: anywhere; color: var(--muted); font-size: .6rem; line-height: 1.35; text-align: right; white-space: normal; }
.message-current { margin-top: .08rem; }
.message-current .message-stack { max-width: 720px; flex-basis: calc(100% - 2.25rem); }
.message-current .message-bubble { padding: .68rem .82rem; }
.message-current .message-bubble p { white-space: pre-line; }
.message-current .message-bubble p.is-long,
.message-current .message-bubble p.is-very-long,
.message-current .message-bubble p.is-ultra-long { font-size: .78rem; line-height: 1.5; }
.dialogue-typing { display: none; }
.dialogue-typing .message-bubble { display: flex; min-width: 54px; min-height: 34px; padding: .65rem .75rem; align-items: center; justify-content: center; gap: 4px; border-radius: 6px 17px 17px 17px; }
.dialogue-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: typing-dot 1s ease-in-out infinite; }
.dialogue-typing i:nth-child(2) { animation-delay: .14s; }
.dialogue-typing i:nth-child(3) { animation-delay: .28s; }
.dialogue-panel.is-thinking .dialogue-typing { display: flex; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dialogue-status { min-height: 1rem; margin: .1rem 0 0 2.2rem; color: var(--muted); font-size: .7rem; line-height: 1.42; }
.dialogue-panel.is-thinking .dialogue-status { color: var(--accent); }
.dialogue-panel.is-thinking .message-current { opacity: .58; }
.dialogue-composer { position: relative; z-index: 2; display: grid; min-width: 0; margin: .4rem calc(var(--dialogue-window-gutter) * -1) 0; padding: .6rem; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--glass) 94%, var(--panel-solid)); box-shadow: 0 -12px 30px color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); scroll-margin-block-end: max(.75rem, env(safe-area-inset-bottom)); }
.dialogue-answer { display: grid; min-width: 0; padding: .62rem .72rem .38rem; border: 1px solid var(--line-strong); border-radius: 17px; gap: .22rem; background: var(--panel); transition: border-color .2s ease, box-shadow .2s ease; }
.dialogue-answer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
#situationScreen #situationInput { width: 100%; height: 3.16em; min-height: 3.16em; max-height: 11.06em; padding: 0; border: 0; outline: 0; resize: none; overflow-y: auto; overscroll-behavior: contain; background: transparent; color: var(--text); caret-color: var(--accent); font-size: 15px; line-height: 1.58; }
#situationScreen #situationInput::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.dialogue-answer > small { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .68rem; }
.dialogue-answer b { color: var(--accent); font-weight: 800; }
.dialogue-next { display: inline-flex; min-width: 82px; min-height: 48px; padding: .65rem .78rem; border: 1px solid color-mix(in srgb, var(--accent) 70%, white); border-radius: 16px; align-items: center; justify-content: center; gap: .35rem; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 8px 20px color-mix(in srgb, var(--accent) 20%, transparent); color: var(--button-text); font-size: .7rem; font-weight: 800; }
.dialogue-next svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dialogue-next:hover:not(:disabled) { transform: translateY(-1px); }
.dialogue-next:disabled { cursor: wait; opacity: .55; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.field small { color: var(--muted); text-align: right; }
.consent-row { display: flex; width: 100%; min-width: 0; max-width: 100%; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line)); border-radius: 13px; gap: .7rem; align-items: flex-start; background: color-mix(in srgb, var(--accent) 3%, transparent); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.consent-row input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--accent); }
.consent-row > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

.notice { width: fit-content; max-width: 100%; min-height: 1.35rem; margin: 1rem auto; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 74%, transparent); color: var(--muted); font-size: .72rem; line-height: 1.45; text-align: center; }
.result-tabs { display: none; }
.reflection-card, .share-card { border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 96%, white), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); }
.source-review { display: grid; min-width: 0; margin-bottom: .85rem; padding: clamp(.8rem, 2vw, 1.15rem); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 94%, white), color-mix(in srgb, var(--accent) 4%, var(--panel))); box-shadow: inset 0 1px 0 var(--sheen), 0 18px 48px color-mix(in srgb, black 6%, transparent); gap: .7rem; }
.source-review-head { display: grid; justify-items: center; gap: .2rem; text-align: center; }
.source-review-head > span { color: var(--accent); font-size: .63rem; font-weight: 850; letter-spacing: .1em; }
.source-review-head h3 { margin: 0; color: var(--text); font-family: var(--serif); font-size: clamp(.95rem, 2vw, 1.18rem); line-height: 1.4; text-align: center; }
.source-review-head p { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: .7rem; line-height: 1.55; text-align: center; text-wrap: pretty; }
.source-review-details { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel-solid) 76%, transparent); }
.source-review-details summary { display: flex; min-height: 44px; padding: .62rem .75rem; align-items: center; justify-content: space-between; gap: .65rem; color: var(--text); cursor: pointer; font-size: .72rem; font-weight: 800; list-style-position: inside; }
.source-review-details summary em { color: var(--accent); font-size: .62rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.source-expression-list { display: grid; min-width: 0; padding: 0 .75rem .75rem; gap: .55rem; }
.source-expression-item { min-width: 0; padding: .66rem .72rem; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--panel) 82%, transparent); }
.source-expression-item small { display: block; margin-bottom: .25rem; color: var(--accent); font-size: .62rem; font-weight: 820; }
.source-expression-text { margin: 0; color: var(--text-soft); font-size: .72rem; line-height: 1.58; overflow-wrap: anywhere; text-align: left; unicode-bidi: plaintext; white-space: pre-wrap; word-break: break-word; }
.source-expression-empty { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; text-align: center; }
.reflection-card { position: relative; isolation: isolate; padding: clamp(.95rem, 2.2vh, 1.45rem); overflow: hidden; }
.reflection-card::after { position: absolute; right: -5rem; top: -6rem; z-index: -1; width: 15rem; height: 15rem; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%); content: ""; }
.reflection-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent), transparent 88%); content: ""; }
.reflection-card-head { display: flex; margin-bottom: .75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.reflection-card-head > span { color: var(--muted); font-size: .68rem; font-weight: 650; }
.card-label { margin: 0; color: var(--accent); font-size: .65rem; font-weight: 850; letter-spacing: .16em; }
.reflection-body { color: var(--text-soft); font-size: .92rem; line-height: 1.75; white-space: pre-wrap; }
#reflectionText.is-long { font-size: .9rem; line-height: 1.65; }
#reflectionText.is-very-long { font-size: .78rem; line-height: 1.5; }
#reflectionText.is-ultra-long { font-size: .7rem; line-height: 1.4; }
.reflection-highlights { display: grid; margin-top: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.insight-line, .dignity-line { display: grid; min-width: 0; padding: .7rem .75rem; border-left: 2px solid var(--accent); gap: .22rem; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.dignity-line { border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line)); border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.insight-line span, .dignity-line span { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .07em; }
.insight-line strong, .dignity-line strong { color: var(--text); font-family: var(--serif); font-size: .92rem; font-weight: 700; line-height: 1.5; letter-spacing: -.025em; }
.return-question { display: grid; margin-top: .75rem; padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 13px; gap: .22rem; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.return-question span { color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.return-question strong { color: var(--text); font-size: .82rem; line-height: 1.45; }
.understanding-field { min-height: 0; margin-top: 1.1rem; }
.understanding-field textarea { height: clamp(72px, 12vh, 110px); min-height: 64px; }
#resultScreen { max-width: 1000px; }
#resultScreen .reflection-card { min-height: 0; overflow: clip; }
#resultScreen .reflection-card-head { position: static; padding-block: .2rem; background: transparent; }
#resultScreen .reflection-card::-webkit-scrollbar { width: 8px; }
#resultScreen .reflection-card::-webkit-scrollbar-track { background: transparent; }
#resultScreen .reflection-card::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: padding-box; }
#resultScreen .result-compose { position: relative; z-index: 1; flex: 0 0 auto; }
.perspective-map { position: relative; z-index: 1; display: grid; min-width: 0; margin-top: .85rem; padding: clamp(.8rem, 2vw, 1.15rem); border: 1px solid color-mix(in srgb, #5f8b74 25%, var(--line)); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 92%, white), color-mix(in srgb, #5f8b74 5%, var(--panel))); box-shadow: inset 0 1px 0 var(--sheen), 0 18px 48px color-mix(in srgb, black 6%, transparent); gap: .7rem; }
.perspective-map > header { display: grid; justify-items: center; gap: .18rem; text-align: center; }
.perspective-map > header > span { color: #5f8b74; font-size: .63rem; font-weight: 850; letter-spacing: .12em; }
:root[data-theme="dark"] .perspective-map > header > span { color: #9fc5b3; }
.perspective-map h3 { margin: 0; color: var(--text); font-family: var(--serif); font-size: clamp(.95rem, 2vw, 1.18rem); line-height: 1.4; }
.perspective-map header p { max-width: 780px; margin: 0 auto; color: var(--muted); font-size: .7rem; line-height: 1.55; text-align: center; text-wrap: pretty; }
.perspective-map-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.perspective-map-item { min-width: 0; }
.perspective-map-item button { display: grid; width: 100%; min-height: 96px; padding: .72rem .78rem; border: 1px solid var(--line); border-radius: 17px; outline: none; align-content: start; gap: .28rem; background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--text); text-align: left; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.perspective-map-item button:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); transform: translateY(-1px); }
.perspective-map-item button:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.perspective-map-item button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent); }
.perspective-map-item strong { color: var(--accent); font-size: .72rem; font-weight: 840; letter-spacing: -.015em; }
.perspective-map-item small { color: var(--text-soft); font-size: .69rem; line-height: 1.5; text-align: justify; text-align-last: left; text-justify: inter-character; word-break: keep-all; }
.perspective-map-status { min-height: 1em; margin: 0; color: var(--accent); font-size: .64rem; line-height: 1.4; }
#resultScreen h2 { line-height: 1.32; }
#resultScreen .notice { margin-block: .75rem; line-height: 1.45; }
#resultScreen .reflection-card-head { margin-bottom: .6rem; line-height: 1.25; }
#resultScreen .reflection-body { line-height: 1.66; text-wrap: pretty; }
#resultScreen #reflectionText.is-long { line-height: 1.58; }
#resultScreen #reflectionText.is-very-long { line-height: 1.46; }
#resultScreen .insight-line strong, #resultScreen .dignity-line strong { line-height: 1.54; text-wrap: pretty; }
#resultScreen .return-question { margin-top: .6rem; }
#resultScreen .return-question strong { line-height: 1.52; text-wrap: pretty; }
#resultScreen .understanding-field { margin-top: .8rem; }
#resultScreen .understanding-field { padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 68%, transparent); }
#resultScreen .understanding-field textarea { line-height: 1.56; }
#resultScreen .understanding-field small { line-height: 1.4; }
.result-compose { min-width: 0; margin-top: .85rem; padding: clamp(.8rem, 2vw, 1.15rem); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 88%, white), color-mix(in srgb, var(--panel) 82%, transparent)); box-shadow: inset 0 1px 0 var(--sheen), 0 18px 48px color-mix(in srgb, black 7%, transparent); }
.result-compose-head { display: grid; justify-items: center; gap: .2rem; text-align: center; }
.result-compose-head > span { color: var(--accent); font-size: .63rem; font-weight: 850; letter-spacing: .12em; }
.result-compose-head h3 { margin: 0; color: var(--text); font-family: var(--serif); font-size: clamp(.95rem, 2vw, 1.18rem); line-height: 1.4; }
.result-compose-head p { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: .7rem; line-height: 1.5; text-align: center; text-wrap: pretty; }
.result-share-picker { display: grid; margin-top: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.result-share-picker button { display: grid; min-width: 0; min-height: 82px; padding: .62rem .68rem; border: 1px solid var(--line); border-radius: 15px; align-content: start; gap: .3rem; background: color-mix(in srgb, var(--panel-solid) 74%, transparent); color: var(--text); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.result-share-picker button[data-share-source="translation"] { min-height: 68px; grid-column: 1 / -1; }
.result-share-picker button:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); transform: translateY(-1px); }
.result-share-picker button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 0 0 0 3px var(--focus); }
.result-share-picker span { color: var(--accent); font-size: .66rem; font-weight: 850; }
.result-share-picker small { display: block; overflow: visible; color: var(--text-soft); font-size: .67rem; line-height: 1.42; text-wrap: pretty; }
.result-source-status { min-height: 1.05rem; margin: .45rem 0 0; color: var(--accent); font-size: .66rem; font-weight: 720; text-align: center; }
.youth-support-choice { display: grid; min-width: 0; margin-top: .8rem; padding: clamp(.75rem, 2vw, 1rem); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--panel-solid)), color-mix(in srgb, var(--panel) 90%, transparent)); gap: .35rem; text-align: center; }
.youth-support-choice[hidden] { display: none; }
.youth-support-kicker { color: var(--accent); font-size: .61rem; font-weight: 850; letter-spacing: .11em; }
.youth-support-choice h3 { max-width: 720px; margin: 0 auto; color: var(--text); font-family: var(--serif); font-size: clamp(.92rem, 2vw, 1.12rem); line-height: 1.45; text-wrap: pretty; }
.youth-support-choice > p { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: .78rem; line-height: 1.6; text-wrap: pretty; }
.youth-support-actions { display: grid; min-width: 0; margin-top: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.youth-support-actions button { min-width: 0; min-height: 44px; padding: .62rem .7rem; border: 1px solid var(--line-strong); border-radius: 14px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); color: var(--text); font-size: .78rem; font-weight: 820; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.youth-support-actions button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.youth-support-actions button:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.youth-support-choice .youth-support-boundary { color: var(--text-soft); font-size: .76rem; }
.youth-support-status { min-height: 1em; color: var(--accent) !important; font-weight: 760; }
.result-share-prompt { max-width: 680px; margin: .65rem auto 0; color: var(--muted); font-size: .72rem; line-height: 1.5; text-align: center; text-wrap: balance; }
#resultScreen .button-row { margin-top: .9rem; }
.button-row { display: flex; margin-top: 1.4rem; gap: .65rem; flex-wrap: wrap; }

.share-screen { text-align: center; }
.share-view-tabs { display: none; }
.share-workspace { display: grid; width: 100%; margin-top: .7rem; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 1rem; }
.share-workspace .share-card { margin: 0; }
.share-editor { display: grid; width: 100%; margin: 0; padding: .85rem; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 82%, transparent); box-shadow: inset 0 1px 0 var(--sheen), 0 18px 50px color-mix(in srgb, black 7%, transparent); gap: .55rem; text-align: left; }
.share-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.share-editor-head strong { color: var(--text); font-size: .78rem; }
.share-editor-head > span { color: var(--muted); font-size: .62rem; }
.share-field-tabs, .share-editor-back { display: none; }
.share-editor label { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: center; gap: .65rem; }
.share-editor label > span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.share-editor label > span em { color: var(--accent); font-size: .58rem; font-style: normal; }
.share-audience-choices { display: flex; min-width: 0; margin: 0 0 .35rem 105px; gap: .35rem; }
.share-audience-choices button { min-height: 44px; padding: .48rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: .65rem; font-weight: 760; }
.share-audience-choices button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--accent); }
.share-editor.is-self-recipient #shareRecipientInput { opacity: .58; }
.share-editor input, .share-editor textarea { width: 100%; min-height: 36px; padding: .48rem .65rem; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--panel); color: var(--text); font-size: .74rem; line-height: 1.45; resize: none; }
.share-editor input:focus, .share-editor textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.share-edit-help { margin: -.1rem 0 0 105px; color: var(--muted); font-size: .61rem; line-height: 1.4; }
.proofread-row { display: flex; margin-left: 105px; align-items: center; gap: .6rem; }
.proofread-button { min-height: 44px; padding: .45rem .72rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--accent); font-size: .7rem; font-weight: 800; }
.proofread-button:hover { border-color: var(--accent); }
.proofread-button:disabled { cursor: wait; opacity: .55; }
.proofread-row span { color: var(--muted); font-size: .59rem; }
.proofread-review { display: grid; margin-left: 105px; padding: .65rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); gap: .45rem; }
.proofread-review[hidden] { display: none; }
.proofread-review header, .proofread-review footer { display: flex; align-items: center; gap: .5rem; }
.proofread-review header { justify-content: space-between; }
.proofread-review header h3 { margin: 0; color: var(--accent); font-size: .68rem; }
.proofread-review header span { color: var(--muted); font-size: .58rem; }
.proofread-review > .proofread-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.proofread-modes button { min-height: 44px; padding: .45rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font-size: .62rem; font-weight: 800; }
.proofread-modes button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--accent); }
.proofread-review > .proofread-changes { padding: .35rem .45rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); font-size: .59rem; font-weight: 720; }
.proofread-review > div { display: grid; grid-template-columns: 72px 1fr; gap: .45rem; }
.proofread-review > div > span { color: var(--muted); font-size: .59rem; font-weight: 700; }
.proofread-review p { margin: 0; color: var(--text); font-size: .68rem; line-height: 1.5; }
.proofread-review footer { justify-content: flex-end; }
.proofread-apply, .proofread-dismiss { min-height: 44px; padding: .42rem .68rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.proofread-apply { border: 1px solid var(--accent); background: var(--accent); color: var(--button-text); }
.proofread-dismiss { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.share-card { position: relative; isolation: isolate; container-type: inline-size; width: 100%; margin: 0; padding: clamp(1.1rem, 2.8vh, 2.1rem); overflow: hidden; border-color: var(--share-line); border-radius: 30px; background: linear-gradient(145deg, var(--share-bg), var(--share-bg-deep)); color: var(--share-text); box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent), 0 28px 78px color-mix(in srgb, black 18%, transparent); text-align: left; }
.share-card::before { position: absolute; right: -5rem; top: -6rem; z-index: -1; width: 16rem; height: 16rem; border-radius: 48% 52% 58% 42%; background: radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%); content: ""; transform: rotate(18deg); }
.share-card::after { position: absolute; left: -4rem; bottom: -5rem; z-index: -1; width: 11rem; height: 11rem; border-radius: 55% 45% 48% 52%; background: radial-gradient(circle, color-mix(in srgb, #5f8b74 13%, transparent), transparent 68%); content: ""; }
.share-card-charms { position: absolute; right: 1.35rem; top: 1.3rem; display: flex; align-items: center; gap: .3rem; pointer-events: none; }
.share-card-charms i { display: block; width: 7px; height: 7px; background: var(--accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .8; }
.share-card-charms i:nth-child(2) { width: 4px; height: 4px; background: #5f8b74; transform: translateY(.55rem); }
.share-card-charms i:nth-child(3) { width: 5px; height: 5px; opacity: .48; transform: translate(-.15rem, -.35rem); }
.share-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-meta time { color: var(--share-soft); font-size: .62rem; font-weight: 650; letter-spacing: .03em; }
.share-brand { display: inline-flex; min-height: 44px; align-items: center; gap: .5rem; color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-decoration: none; }
.share-brand > span { width: .45rem; height: .45rem; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--share-bg), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); background: currentColor; }
.share-brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.share-kicker { margin: .7rem 0 0; padding: .52rem .72rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, var(--share-bg)); color: var(--accent); font-size: .66rem; font-weight: 800; line-height: 1.4; text-align: center; text-align-last: center; }
.share-card > .share-intro { margin: .75rem 0 .65rem; color: var(--share-soft); font-size: .76rem; line-height: 1.58; hanging-punctuation: first last; text-align: center; text-align-last: center; }
.share-title { display: block; margin: 0; color: color-mix(in srgb, #5f8b74 80%, var(--share-text)); font-size: .7rem; font-weight: 820; letter-spacing: .025em; text-align: center; }
.share-card blockquote { position: relative; margin: .65rem 0 1rem; padding: .8rem .85rem .8rem 1.1rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--share-line)); border-left: 3px solid color-mix(in srgb, var(--accent) 74%, transparent); border-radius: 6px 18px 18px 18px; background: color-mix(in srgb, var(--share-bg) 82%, transparent); color: var(--share-text); font-family: var(--serif); font-size: clamp(1.08rem, 3.1vw, 1.62rem); font-feature-settings: "kern" 1, "liga" 1; font-weight: 700; letter-spacing: -.035em; line-height: 1.5; hanging-punctuation: first last; orphans: 2; widows: 2; text-wrap: pretty; }
.share-card blockquote.is-long { font-size: clamp(1rem, 2.6vw, 1.35rem); line-height: 1.42; }
.share-card blockquote.is-very-long { font-size: clamp(.78rem, 2vw, 1rem); line-height: 1.35; }
.share-card blockquote.is-ultra-long { font-size: clamp(.68rem, 1.7vw, .82rem); line-height: 1.3; }
.share-question { position: relative; margin-bottom: 1rem; padding: .75rem .85rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 17px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.share-question::after { position: absolute; right: .7rem; top: .65rem; width: 9px; height: 9px; background: var(--accent); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); content: ""; opacity: .62; }
.share-question > span { display: block; color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-align: center; }
.share-question p { margin: .25rem 0 0; color: var(--share-text); font-size: .78rem; font-weight: 680; line-height: 1.48; orphans: 2; widows: 2; }
.share-card footer { padding-top: .85rem; border-top: 1px solid var(--share-line); color: var(--share-soft); font-size: .68rem; line-height: 1.58; hanging-punctuation: first last; orphans: 2; widows: 2; }
.share-card-cta { display: flex; width: fit-content; max-width: 100%; min-height: 44px; margin: .7rem auto 0; padding: .55rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; align-items: center; justify-content: center; gap: .3rem; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-size: .64rem; font-weight: 820; text-align: center; text-decoration: none; }
.share-card-cta:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.share-card-image { display: block; width: 100%; height: auto; border-radius: inherit; }
.share-card-image[hidden] { display: none; }
.share-card.has-rendered-preview { padding: 0; aspect-ratio: 4 / 5; background: transparent; }
.share-card.has-rendered-preview::before, .share-card.has-rendered-preview::after { display: none; }
.share-card.has-rendered-preview > :not(.share-card-image) { display: none; }
.share-card.has-rendered-preview .share-card-image { width: 100%; height: 100%; object-fit: contain; }
.share-card.is-rendering-preview > :not(.share-card-image) { visibility: hidden; }
.share-screen .button-row { justify-content: center; }
.share-action-notice { min-height: 1rem; margin: .45rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.4; text-align: center; }

.legal-screen { width: min(100%, 1000px); }
.legal-screen > .step { flex: 0 0 auto; margin-bottom: .55rem; }
.legal-card { display: grid; min-height: 0; max-height: none; padding: clamp(.65rem, 1.5vw, 1rem); grid-template-rows: auto auto auto; gap: .65rem; overflow: visible; border: 1px solid var(--line-strong); border-radius: 24px; background: color-mix(in srgb, var(--panel-solid) 90%, transparent); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); }
.legal-card-head { display: grid; min-width: 0; justify-items: center; gap: .55rem; text-align: center; }
.legal-card-head > div { width: 100%; }
.legal-card-head h2 { font-size: clamp(18px, 2vw, 25px); line-height: 1.25; text-align: center; }
.legal-card-head p { margin: .25rem 0 0; color: var(--muted); font-size: .65rem; text-align: center; text-align-last: center; }
.legal-card-head > span { flex: 0 0 auto; padding: .42rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); font-size: .62rem; font-weight: 800; }
.legal-scroll { min-height: 0; padding: .25rem .75rem .65rem .15rem; overflow: visible; }
.legal-scroll section { padding: .72rem 0; border-top: 1px solid var(--line); }
.legal-scroll section:first-child { border-top: 0; }
.legal-scroll h3 { margin: 0 0 .32rem; color: var(--text); font-size: .78rem; letter-spacing: -.015em; line-height: 1.45; }
.legal-scroll p { margin: .26rem 0; color: var(--text-soft); font-size: .7rem; line-height: 1.72; }
.legal-facts { display: grid; padding: .45rem .6rem; margin: .45rem 0 0; border: 1px solid var(--line); border-radius: 12px; gap: .24rem; background: color-mix(in srgb, var(--panel) 62%, transparent); list-style: none; }
.legal-facts li { color: var(--text-soft); font-size: .66rem; line-height: 1.55; }
.legal-facts b { display: inline-block; min-width: 5.1em; color: var(--text); font-weight: 800; }
.legal-scroll strong { color: var(--danger); }
.legal-scroll a { display: inline-flex; min-height: 44px; margin-top: .2rem; align-items: center; color: var(--accent); font-size: .68rem; font-weight: 760; text-underline-offset: .2em; }
.legal-authority-note { padding: .7rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.legal-actions { display: grid; grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr); gap: .55rem; }
.legal-actions button { min-height: 46px; padding-block: .65rem; font-size: .76rem; }

.history-toolbar { display: flex; min-height: 44px; margin-top: .55rem; align-items: center; justify-content: space-between; gap: .55rem; }
.history-toolbar > div { display: flex; gap: .4rem; }
.history-select-all, .history-select-one { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; color: var(--text-soft); font-size: .72rem; font-weight: 760; }
.history-select-all input, .history-select-one input { width: 18px; height: 18px; accent-color: var(--accent); }
.history-delete-selected { color: var(--danger); }
.history-list { display: grid; width: 100%; min-width: 0; min-height: 70px; margin: .75rem 0; gap: .55rem; overflow: visible; flex: 0 0 auto; align-content: stretch; overscroll-behavior-inline: contain; touch-action: pan-y; }
.history-list:focus-visible { border-radius: 18px; outline: 3px solid var(--focus); outline-offset: 3px; }
.history-item { display: grid; min-height: 0; max-height: none; padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; gap: .55rem; overflow: visible; background: linear-gradient(145deg, var(--panel-solid), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), 0 10px 30px color-mix(in srgb, black 5%, transparent); }
.history-item.is-selected { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: inset 0 1px 0 var(--sheen), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.history-item-head { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: .7rem; }
.history-item time { color: var(--muted); font-size: .72rem; }
.history-item p { margin: .45rem 0 0; line-height: 1.65; }
.history-item p.is-long { font-size: .84rem; line-height: 1.5; }
.history-item p.is-very-long { font-size: .75rem; line-height: 1.4; }
.history-section { padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.history-section h3 { margin: 0; color: var(--accent); font-size: .68rem; font-weight: 820; letter-spacing: .04em; }
.history-source { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.history-input-entry { margin-top: .5rem; }
.history-input-entry small { color: var(--muted); font-size: .62rem; font-weight: 760; }
.history-input-entry p, .history-legacy-input { white-space: pre-wrap; }
.history-result-entry { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.history-result-entry:first-of-type { padding-top: 0; border-top: 0; }
.history-result-entry small { color: var(--muted); font-size: .62rem; font-weight: 760; }
.history-result-entry p { white-space: pre-wrap; }
.history-question { display: block; margin-top: .35rem; color: var(--accent); font-size: .7rem; line-height: 1.4; }
.empty { padding: 1.8rem; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; }
.history-pager { display: flex; min-height: 32px; align-items: center; justify-content: center; gap: .8rem; color: var(--muted); font-size: .72rem; }
.history-pager[hidden] { display: none; }
.pager-button { min-width: 48px; min-height: 44px; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: .7rem; font-weight: 750; }
.pager-button:disabled { cursor: default; opacity: .35; }
.history-action-status { min-height: 1rem; margin: .1rem 0 0; color: var(--accent); font-size: .68rem; line-height: 1.4; text-align: center; }

.auth-screen { max-width: 1040px; padding-inline: clamp(.25rem, 1vw, .7rem); }
.auth-card { display: grid; margin-top: .8rem; padding: clamp(.9rem, 2vw, 1.35rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 94%, white), var(--panel)); box-shadow: inset 0 1px 0 var(--sheen), var(--shadow); gap: .8rem; }
.auth-intro { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: .65rem; text-align: center; }
.auth-intro > div { width: 100%; }
.auth-symbol { display: grid; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 20px; place-items: center; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 0 1px 0 var(--sheen); color: var(--accent); }
.auth-symbol svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.auth-intro h2 { line-height: 1.3; text-align: center; }
.auth-copy { max-width: 700px; margin: .4rem auto 0; color: var(--muted); font-size: .78rem; line-height: 1.58; }
.auth-steps { display: grid; margin: 0; padding: .55rem .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 4%, transparent); list-style: none; }
.auth-steps li { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-size: .66rem; font-weight: 700; }
.auth-steps li + li::before { position: absolute; left: 0; width: 1px; height: 20px; background: var(--line); content: ""; }
.auth-steps b { display: grid; width: 20px; height: 20px; border-radius: 50%; place-items: center; background: var(--accent); color: var(--button-text); font-size: .58rem; }
.auth-tabs { display: none; }
.auth-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.auth-form, .auth-existing { display: grid; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 18px; align-content: start; gap: .55rem; background: color-mix(in srgb, var(--panel-solid) 72%, transparent); }
.auth-form > strong, .auth-existing > strong { color: var(--text); font-size: .8rem; }
.auth-existing p { margin: 0 0 auto; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.auth-form .field { gap: .35rem; }
.auth-form .field > span { font-size: .68rem; }
.auth-form input { min-height: 44px; padding: .65rem .75rem; font-size: .82rem; }
.auth-form button, .auth-existing button { width: 100%; min-height: 46px; font-size: .76rem; }
.auth-notice { min-height: 1.15rem; margin: 0; color: var(--accent); font-size: .74rem; font-weight: 650; line-height: 1.45; text-align: center; }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.auth-privacy { max-width: 650px; margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.45; text-align: right; }
.auth-back { flex: 0 0 auto; min-height: 44px; padding: .35rem .6rem; }

@media (max-width: 700px), (max-height: 650px) {
  .result-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-footer { display: grid; width: min(calc(100% - 2rem), 1320px); margin: 0 auto; padding: .7rem 0 max(.8rem, env(safe-area-inset-bottom)); justify-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; line-height: 1.5; text-align: center; }
.site-footer p { width: min(100%, 72rem); margin: .16rem auto; text-align: center; text-align-last: center; text-wrap: pretty; }
.site-footer .footer-legal-button { min-height: 44px; padding-block: .35rem; vertical-align: middle; }

@media (max-width: 700px) {
  html { scrollbar-gutter: auto; }
  :root { --header-height: 60px; }
  main, .site-footer { width: min(calc(100% - 1rem), 100%); }
  .site-header { min-height: var(--header-height); padding-right: max(.5rem, env(safe-area-inset-right)); padding-left: max(.5rem, env(safe-area-inset-left)); column-gap: .35rem; }
  .brand { max-width: 9rem; }
  .header-actions { gap: .2rem; }
  .theme-button { width: 44px; height: 44px; justify-content: center; }
  .language-picker select { width: 58px; min-width: 58px; padding: 0 1.25rem 0 .5rem; font-size: .68rem; }
  .language-picker::after { right: .45rem; }
  .feedback-button, .login-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .feedback-button > span, .login-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #historyButton { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .screen { padding: clamp(.55rem, 1.7vh, 1rem) 0; }
  h1 { font-size: clamp(26px, 8vw, 34px); }
  h2 { font-size: clamp(19px, 6vw, 26px); }
  h1, h2 { line-height: 1.28; }
  .eyebrow { max-width: 100%; font-size: .56rem; letter-spacing: .13em; }
  .hero-copy { font-size: .82rem; line-height: 1.65; }
  .hero-copy br, h2 br { display: none; }
  .hero-copy { max-width: 33rem; }
  .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button-row > button { width: auto; min-height: 46px; padding: .7rem .75rem; font-size: .82rem; }
  .result-tabs { display: grid; width: 100%; margin: .25rem auto .55rem; padding: 3px; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
  .result-tabs button { min-height: 44px; padding: .45rem .35rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 780; }
  .result-tabs button[aria-selected="true"] { background: var(--panel-solid); box-shadow: 0 6px 18px color-mix(in srgb, black 8%, transparent); color: var(--accent); }
  .perspective-map-list { grid-template-columns: 1fr; }
  .perspective-map-item button { min-height: 82px; }
  .youth-support-actions { grid-template-columns: 1fr; }
  #resultScreen[data-result-view="reflection"] .reflection-highlights,
  #resultScreen[data-result-view="reflection"] .return-question,
  #resultScreen[data-result-view="insight"] .reflection-body,
  #resultScreen[data-result-view="insight"] .dignity-line,
  #resultScreen[data-result-view="insight"] .return-question,
  #resultScreen[data-result-view="dignity"] .reflection-body,
  #resultScreen[data-result-view="dignity"] .insight-line,
  #resultScreen[data-result-view="dignity"] .return-question,
  #resultScreen[data-result-view="question"] .reflection-body,
  #resultScreen[data-result-view="question"] .reflection-highlights { display: none; }
  #resultScreen[data-result-view="insight"] .reflection-highlights,
  #resultScreen[data-result-view="dignity"] .reflection-highlights { display: grid; margin-top: 0; grid-template-columns: 1fr; }
  .result-screen .reflection-card { min-height: 148px; }
  .result-screen .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-screen .button-row > button { padding-inline: .45rem; font-size: .74rem; }
  .result-screen .button-row #makeCardButton { grid-column: 1 / -1; }
  .share-screen .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .share-screen .button-row .primary-button { grid-column: 1 / -1; }
  .share-screen .button-row > button { min-height: 44px; padding-inline: .35rem; font-size: .7rem; }
  .share-screen .button-row #newRecordButton { grid-column: auto; }
  .share-view-tabs { display: grid; width: 100%; margin-top: .55rem; padding: 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
  .share-view-tabs button { min-height: 44px; padding: .45rem .65rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 780; }
  .share-view-tabs button[aria-selected="true"] { background: var(--panel-solid); box-shadow: 0 6px 18px color-mix(in srgb, black 8%, transparent); color: var(--accent); }
  .share-workspace { grid-template-columns: 1fr; gap: .55rem; }
  .share-screen[data-share-view="edit"] #sharePreviewPane { display: none; }
  .share-screen[data-share-view="preview"] #shareEditorPane { display: none; }
  .share-editor label { grid-template-columns: 1fr; gap: .25rem; }
  .share-audience-choices { margin-left: 0; }
  .share-editor-head > span { display: none; }
  .share-edit-help { margin-left: 0; }
  .proofread-row { margin-left: 0; }
  .proofread-review { margin-left: 0; }
  .share-screen.is-reviewing .share-editor > :not(.proofread-review) { display: none; }
  .reflection-card, .share-card { border-radius: 22px; }
  .hero-inner::before, .hero-inner::after { display: none; }
  .reflection-highlights { grid-template-columns: 1fr; }
  .dialogue-panel { height: auto; border-radius: 22px; }
  .dialogue-head { min-height: 58px; padding: .4rem .58rem; grid-template-columns: minmax(0, 1fr) minmax(7rem, 42%); gap: .45rem; }
  .dialogue-person { gap: .42rem; }
  .dialogue-avatar { width: 34px; height: 34px; }
  .dialogue-person small { display: none; }
  .dialogue-window { --dialogue-window-gutter: .55rem; padding-inline: var(--dialogue-window-gutter); }
  .message-stack { max-width: 620px; flex-basis: 86%; }
  .message-current .message-stack { max-width: 720px; flex-basis: calc(100% - 2.25rem); }
  #situationScreen #situationInput, .share-editor input, .share-editor textarea, .auth-form input { font-size: 16px; }
  .dialogue-composer { padding: .48rem; }
  .dialogue-next { min-width: 70px; min-height: 48px; padding-inline: .62rem; }
  .auth-choice-grid { grid-template-columns: 1fr; }
  .legal-screen { justify-content: flex-start; }
  .legal-screen > .step { display: none; }
  .legal-card { height: auto; padding: .55rem; border-radius: 18px; gap: .45rem; }
  .legal-card-head > span { display: none; }
  .legal-scroll { padding-right: .4rem; }
  .legal-scroll p { font-size: .69rem; line-height: 1.62; }
  .legal-actions { grid-template-columns: .75fr 1.25fr; gap: .4rem; }
  .legal-actions button { min-height: 44px; padding-inline: .45rem; font-size: .68rem; }
  .auth-tabs { display: grid; padding: 3px; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
  .auth-tabs button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 780; }
  .auth-tabs button[aria-selected="true"] { background: var(--panel-solid); box-shadow: 0 6px 18px color-mix(in srgb, black 8%, transparent); color: var(--accent); }
  .auth-screen[data-auth-view="login"] .auth-form,
  .auth-screen[data-auth-view="register"] .auth-existing { display: none; }
  .auth-card { gap: .55rem; }
  .auth-intro { gap: .65rem; }
  .auth-symbol { width: 48px; height: 48px; border-radius: 16px; }
  .auth-steps { padding-inline: .4rem; }
  .auth-steps li { gap: .25rem; font-size: .6rem; }
  .auth-footer { align-items: flex-start; }
}

@media (max-width: 700px) {
  body.keyboard-visible #situationScreen .dialogue-panel {
    height: auto;
  }
  body.keyboard-visible #situationScreen form { scroll-margin-block-end: max(.75rem, env(safe-area-inset-bottom)); }
  body.keyboard-visible .dialogue-composer { padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 1000px) {
  .feedback-address { display: none; }
}

@media (max-width: 520px) {
  .site-header { display: grid; min-height: var(--header-height); padding-right: max(.5rem, env(safe-area-inset-right)); padding-left: max(.5rem, env(safe-area-inset-left)); grid-template-columns: minmax(0, 1fr) max-content; justify-content: stretch; gap: 4px; }
  .brand { width: 72px; min-width: 72px; max-width: 72px; height: 44px; justify-self: start; justify-content: flex-start; gap: 2px; overflow: hidden; font-size: 7.2px; letter-spacing: -.04em; }
  .brand-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-logo-frame { width: 18px; height: 18px; padding: 1px; flex-basis: 18px; border-radius: 5px; box-shadow: none; }
  .header-actions { width: auto; min-width: 0; max-width: none; margin-left: auto; justify-content: flex-end; justify-self: end; gap: 2px; overflow: visible; }
  .language-picker, .language-picker select { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .feedback-button, .theme-button, #historyButton, .login-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .language-current { position: absolute; top: 50%; right: 14px; left: 4px; z-index: 1; display: block; overflow: hidden; color: var(--text-soft); font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1; text-align: center; transform: translateY(-50%); pointer-events: none; }
  .language-current::before { content: "KO"; }
  :root[data-language="en"] .language-current::before { content: "EN"; }
  :root[data-language="ja"] .language-current::before { content: "JA"; }
  :root[data-language="zh-CN"] .language-current::before { content: "ZH"; }
  :root[data-language="hi"] .language-current::before { content: "HI"; }
  :root[data-language="fr"] .language-current::before { content: "FR"; }
  :root[data-language="de"] .language-current::before { content: "DE"; }
  .language-picker select, .language-picker select:hover { padding: 0; color: transparent; -webkit-text-fill-color: transparent; }
  .language-picker select option { color: var(--text); -webkit-text-fill-color: var(--text); }
  .language-picker::after { right: 4px; z-index: 1; font-size: 8px; }
  .feedback-button { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .feedback-button > span:not(.feedback-address) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .login-button { width: 44px; padding: 0; justify-content: center; }
  .login-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #historyButton { display: inline-flex; padding: 0; align-items: center; justify-content: center; overflow: hidden; font-size: 0; white-space: nowrap; }
  #historyButton::before { font-size: .62rem; content: "기록"; }
  :root[data-language="en"] #historyButton::before { content: "Log"; }
  :root[data-language="ja"] #historyButton::before { content: "記録"; }
  :root[data-language="zh-CN"] #historyButton::before { content: "记录"; }
  :root[data-language="hi"] #historyButton::before { content: "रिकॉर्ड"; font-size: .48rem; }
  :root[data-language="fr"] #historyButton::before { content: "Notes"; font-size: .52rem; }
  :root[data-language="de"] #historyButton::before { content: "Notiz"; font-size: .52rem; }
  .result-share-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-toolbar { align-items: stretch; }
  .history-toolbar > div { flex: 1 1 auto; }
  .history-toolbar .pager-button { flex: 1 1 auto; padding-inline: .35rem; }
}

@media (max-width: 390px) {
  .brand { width: 72px; min-width: 72px; max-width: 72px; flex-basis: 72px; gap: 0; }
  .text-button { padding-inline: .55rem; font-size: .78rem; }
  .login-button { width: 44px; padding: 0; justify-content: center; }
  .login-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .eyebrow { font-size: .5rem; letter-spacing: .1em; }
  h1 { font-size: clamp(26px, 8vw, 32px); }
  .trust-row { gap: .05rem; }
  .trust-row span { padding-inline: 1rem .4rem; font-size: .68rem; }
  .trust-row span::before { left: .4rem; }
}

@media (max-width: 342px) {
  .site-header, .header-actions { gap: 0; }
  .brand { width: 60px; min-width: 60px; max-width: 60px; flex-basis: 60px; gap: 1px; font-size: 6.35px; }
  .brand-logo-frame { width: 14px; height: 16px; padding: 0; flex-basis: 14px; }
}

@media (max-height: 720px) and (max-width: 700px) {
  .screen.hero { padding-block: 1.4rem; }
  .eyebrow { margin-bottom: .7rem; }
  .hero-copy { margin-block: .8rem 1rem; line-height: 1.6; }
  .trust-row { margin-top: .75rem; }
  .service-boundary { margin-top: .35rem; font-size: .61rem; line-height: 1.4; }
  .site-footer { padding-block: .65rem max(.7rem, env(safe-area-inset-bottom)); }
}

@media (max-height: 820px) {
  :root { --header-height: 58px; }
  .site-header { min-height: var(--header-height); }
  .screen { padding-block: clamp(.75rem, 2.5vh, 1.4rem); }
  .step { margin-bottom: .55rem; }
  h2 { font-size: clamp(18px, 2.5vh, 24px); }
  .form-screen form { margin-top: 1rem; gap: .7rem; }
  .field { gap: .4rem; }
  .field input, .field textarea { padding: .72rem .85rem; border-radius: 13px; }
  .field textarea { min-height: 78px; }
  .dialogue-panel { height: auto; }
  #situationScreen #situationInput { height: 3.16em; min-height: 3.16em; padding: 0; font-size: 16px; line-height: 1.58; }
  .dialogue-status { font-size: .64rem; }
  .dialogue-next { min-height: 48px; }
  .consent-row { font-size: .76rem; line-height: 1.4; }
  .primary-button, .secondary-button, .danger-button { min-height: 46px; padding-block: .68rem; }
  .notice { margin: .6rem auto; font-size: .8rem; }
  .reflection-card { padding: .9rem; }
  .understanding-field { margin-top: .65rem; }
  .understanding-field textarea { height: clamp(64px, 10vh, 82px); }
  .button-row { margin-top: .7rem; }
  .share-card { margin-top: .65rem; padding: 1.1rem; }
  .share-card > p:not(.share-brand) { margin: 1rem 0 .7rem; }
  .share-card blockquote { margin: .8rem 0 1.1rem; }
  .privacy-copy { margin-block: .65rem; font-size: .85rem; line-height: 1.5; }
  .history-list { margin-block: .65rem; }
  .auth-card { margin-top: .55rem; padding: .75rem; gap: .55rem; }
  .auth-copy { margin-top: .25rem; font-size: .7rem; }
  .auth-notice { min-height: 1rem; }
  .site-footer { padding-block: .55rem max(.65rem, env(safe-area-inset-bottom)); }
}

@media (max-height: 650px) and (max-width: 700px) {
  :root { --header-height: 52px; }
  .site-header { min-height: var(--header-height); }
  .screen { padding-top: .55rem; padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
  .step { margin-bottom: .35rem; font-size: .68rem; }
  h2 { font-size: clamp(16px, 3.75vw, 20px); }
  .form-screen form { margin-top: .65rem; gap: .45rem; }
  .field > span { font-size: .78rem; }
  .field small { font-size: .68rem; }
  #situationScreen #situationInput { height: 2.96em; min-height: 2.96em; padding: 0; font-size: 16px; line-height: 1.48; }
  .dialogue-panel { height: auto; }
  .dialogue-head { min-height: 52px; }
  .dialogue-person strong { font-size: .72rem; }
  .dialogue-continuity { font-size: .62rem; }
  .message-current .message-bubble { padding: .5rem .62rem; }
  .message-bubble p { font-size: .78rem; line-height: 1.5; }
  .dialogue-status { font-size: .68rem; }
  .dialogue-next { min-height: 46px; padding: .45rem .55rem; font-size: .7rem; }
  .consent-row { font-size: .7rem; }
  .notice { min-height: 1rem; margin: .35rem auto; font-size: .7rem; }
  .reflection-card { padding: .65rem; }
  .card-label { margin-bottom: .4rem; }
  #reflectionText { font-size: .78rem; line-height: 1.55; }
  #resultScreen #reflectionText { line-height: 1.48; }
  .reflection-highlights { margin-top: .4rem; gap: .3rem; }
  .insight-line, .dignity-line { padding: .42rem .52rem; }
  .insight-line strong, .dignity-line strong { font-size: .7rem; line-height: 1.4; }
  #resultScreen .insight-line strong, #resultScreen .dignity-line strong { line-height: 1.42; }
  .return-question { margin-top: .45rem; padding-top: .4rem; }
  .return-question strong { font-size: .72rem; }
  #resultScreen .return-question strong { line-height: 1.44; }
  .understanding-field textarea { height: 58px; min-height: 58px; }
  .understanding-field small { display: none; }
  .result-share-prompt { margin-top: .35rem; font-size: .68rem; line-height: 1.4; }
  .share-card { padding: .75rem; }
  .share-editor { margin-top: .4rem; padding: .55rem; gap: .35rem; }
  .share-editor label { grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: .4rem; }
  .share-audience-choices { margin-left: 82px; }
  .share-edit-help, .share-editor-head > span { display: none; }
  .share-editor textarea { height: 58px; }
  .share-editor input, .share-editor textarea { min-height: 44px; padding: .45rem .55rem; font-size: 16px; }
  .share-screen[data-share-view="preview"] .share-card { width: min(100%, 288px); height: auto; margin: .25rem auto 0; aspect-ratio: 4 / 5; }
  .privacy-copy { margin-block: .4rem; font-size: .72rem; }
  .history-list { margin-block: .4rem; }
  .auth-intro { align-items: start; }
  .auth-symbol, .auth-steps { display: none; }
  .auth-copy { display: none; }
  .auth-form, .auth-existing { padding: .6rem; gap: .4rem; }
  .auth-privacy { font-size: .62rem; }
  .share-screen .share-view-tabs { margin-top: 0; }
  .share-screen[data-share-view="preview"] .share-action-notice { display: none; }
  .share-screen .button-row { margin-top: .4rem; }
}

@media (max-height: 650px) and (min-width: 701px) {
  .result-tabs { display: grid; width: min(100%, 520px); margin: .25rem auto .55rem; padding: 3px; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
  .result-tabs button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 780; }
  .result-tabs button[aria-selected="true"] { background: var(--panel-solid); color: var(--accent); }
  #resultScreen[data-result-view="reflection"] .reflection-highlights,
  #resultScreen[data-result-view="reflection"] .return-question,
  #resultScreen[data-result-view="insight"] .reflection-body,
  #resultScreen[data-result-view="insight"] .dignity-line,
  #resultScreen[data-result-view="insight"] .return-question,
  #resultScreen[data-result-view="dignity"] .reflection-body,
  #resultScreen[data-result-view="dignity"] .insight-line,
  #resultScreen[data-result-view="dignity"] .return-question,
  #resultScreen[data-result-view="question"] .reflection-body,
  #resultScreen[data-result-view="question"] .reflection-highlights { display: none; }
  #resultScreen[data-result-view="insight"] .reflection-highlights,
  #resultScreen[data-result-view="dignity"] .reflection-highlights { display: grid; margin-top: 0; grid-template-columns: 1fr; }
}

@media (max-height: 520px) {
  main { width: min(calc(100% - 1rem), 100%); }
  .screen { padding-top: .35rem; padding-bottom: max(.35rem, env(safe-area-inset-bottom)); }
  #situationScreen form { margin-top: .55rem; gap: .35rem; }
  .dialogue-panel { height: auto; max-height: none; }
  #situationScreen .consent-row { padding-block: .35rem; font-size: .68rem; }
  .composer-hint { display: none; }
  .dialogue-window { padding-block: .35rem; }
}

@media (max-width: 700px) {
  .form-screen, .result-screen, .share-screen, .auth-screen, .history-screen, .legal-screen { justify-content: flex-start; }
  .screen:not(.hero) { padding-top: .25rem; }
  .share-screen .share-view-tabs { margin-top: 0; }
  .share-screen[data-share-view="preview"] .share-card {
    width: min(100%, 288px);
    height: auto;
    margin: .25rem auto 0;
    aspect-ratio: 4 / 5;
  }
  .share-screen.is-reviewing > .button-row,
  .share-screen.is-reviewing > .share-action-notice { display: none; }
  .share-screen[data-share-view="edit"] > .button-row,
  .share-screen[data-share-view="edit"] > .share-action-notice { display: none; }
  .share-screen[data-share-view="preview"] #copyLinkButton,
  .share-screen[data-share-view="preview"] #newRecordButton { display: none; }
  .share-screen[data-share-view="preview"] .button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-field-tabs { display: grid; padding: 3px; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
  .share-field-tabs button { min-height: 44px; padding: .35rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 780; }
  .share-field-tabs button[aria-selected="true"] { background: var(--panel-solid); box-shadow: 0 6px 18px color-mix(in srgb, black 8%, transparent); color: var(--accent); }
  .share-editor-back { display: inline-flex; min-width: 44px; min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px; align-items: center; justify-content: center; background: transparent; color: var(--text); font-size: .7rem; font-weight: 800; }
  .share-editor { position: relative; }
  .share-editor-head { position: absolute; left: .55rem; top: .55rem; z-index: 2; }
  .share-editor-head strong, .share-editor-head > span { display: none; }
  .share-field-tabs { margin-left: 48px; }
  .share-editor label { grid-template-columns: 1fr; }
  .share-audience-choices { margin-left: 0; }
  .share-editor[data-editor-view="recipient"] [data-editor-panel]:not([data-editor-panel="recipient"]),
  .share-editor[data-editor-view="message"] [data-editor-panel]:not([data-editor-panel="message"]),
  .share-editor[data-editor-view="question"] [data-editor-panel]:not([data-editor-panel="question"]) { display: none; }
  .share-editor[data-editor-view="recipient"] .proofread-row { display: none; }
  .share-editor[data-editor-view="message"] #shareMessagePanel label > span { display: none; }
  .share-editor textarea { max-height: none; overflow: hidden; line-height: 1.3; resize: none; }
  #resultScreen .understanding-field { margin-top: .55rem; padding: .4rem; gap: .3rem; }
  #resultScreen .understanding-field textarea {
    min-height: 58px;
    max-height: none;
    padding: .4rem .5rem;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.35;
    resize: none;
  }
  #resultScreen .button-row { margin-top: .45rem; }
}

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