:root {
  --paper: #f3eee3;
  --paper-deep: #e9dfcf;
  --ink: #24312c;
  --ink-soft: #617068;
  --line: rgba(48, 66, 58, .14);
  --terracotta: #b96849;
  --terracotta-deep: #8f4933;
  --sage: #77866a;
  --sage-pale: #dce2d2;
  --blue: #62798a;
  --blue-pale: #dfe7e9;
  --gold: #d8a747;
  --white: #fffdf8;
  --shadow: 0 20px 60px rgba(52, 45, 34, .10);
  --serif: "Iowan Old Style", "Baskerville", "Songti SC", "STSong", serif;
  --sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(185,104,73,.32); outline-offset: 3px; }
.paper-grain { position: fixed; inset: 0; opacity: .25; pointer-events: none; z-index: 20; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0,1fr) 294px; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 34px 22px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(247,243,234,.78); backdrop-filter: blur(16px); z-index: 5; }
.brand { appearance: none; border: 0; background: none; padding: 0; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand strong { display: block; font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }
.brand small { display:block; color: var(--ink-soft); margin-top: 3px; font-size: 10px; letter-spacing: .1em; }
.nav-list { margin-top: 64px; display: grid; gap: 9px; }
.nav-item { appearance: none; border: 0; border-radius: 15px; background: transparent; padding: 13px 14px; display: grid; grid-template-columns: 34px 1fr; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item > span { grid-row: 1/3; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; }
.nav-item > span img { width: 100%; height: 100%; object-fit: contain; opacity: .72; transition: .2s ease; }
.nav-item b { font-weight: 600; letter-spacing: .08em; }
.nav-item small { color: var(--ink-soft); font-size: 10px; margin-top: 2px; }
.nav-item:hover { background: rgba(255,255,255,.54); transform: translateX(2px); }
.nav-item.active { background: var(--white); box-shadow: 0 6px 22px rgba(62,51,37,.08); }
.nav-item.active > span img { opacity: 1; transform: scale(1.06); }
.sidebar-foot { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.text-button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 4px; }

.main-view { min-width: 0; padding: 44px clamp(30px,5vw,74px) 84px; max-width: 1060px; width: 100%; margin: 0 auto; }
.context-rail { position: sticky; top: 0; height: 100vh; padding: 44px 26px; border-left: 1px solid var(--line); background: rgba(237,230,216,.52); overflow: auto; }
.mobile-nav { display: none; }
.eyebrow { margin: 0 0 13px; color: var(--terracotta-deep); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .serif { font-family: var(--serif); }
h1 { font-weight: 500; font-size: clamp(38px,5vw,66px); line-height: 1.07; letter-spacing: -.04em; margin-bottom: 20px; }
h2 { font-size: clamp(27px,3.2vw,42px); font-weight: 500; letter-spacing: -.025em; margin-bottom: 12px; }
h3 { font-size: 16px; }
.lede { color: var(--ink-soft); font-size: 15px; line-height: 1.85; max-width: 37em; }
.muted { color: var(--ink-soft); }
.tiny { font-size: 11px; color: var(--ink-soft); }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin: 58px 0 20px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0 0 5px; color: var(--ink-soft); font-size: 12px; }
.primary, .secondary, .ghost { border-radius: 999px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent; transition: .2s ease; font-weight: 600; }
.primary { background: var(--terracotta); color: white; box-shadow: 0 10px 28px rgba(155,77,50,.20); }
.primary:hover { background: var(--terracotta-deep); transform: translateY(-2px); }
.secondary { background: var(--white); border-color: var(--line); }
.secondary:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ui-icon { display:block; width:100%; height:100%; object-fit:contain; }
.button-with-icon { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.button-icon { width:20px; height:20px; flex:0 0 auto; object-fit:contain; }
.primary .button-icon { background:rgba(255,255,255,.82); border-radius:50%; padding:2px; }

.hero { position: relative; min-height: 430px; border-radius: 30px; overflow: hidden; background: #e9dfc9; box-shadow: var(--shadow); isolation: isolate; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; z-index: 2; width: 53%; padding: clamp(34px,6vw,70px); display: flex; min-height: 430px; flex-direction: column; justify-content: center; background: linear-gradient(90deg, rgba(248,244,235,.98) 0%, rgba(248,244,235,.92) 62%, rgba(248,244,235,0) 100%); }
.hero-copy h1 { max-width: 8em; }
.hero-copy .actions { margin-top: 14px; }
.trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--ink-soft); font-size: 10px; letter-spacing: .06em; }
.trust-row span::before { content: "·"; color: var(--terracotta); margin-right: 5px; font-size: 17px; vertical-align: -2px; }

.need-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.need-card { position: relative; overflow: hidden; border: 1px solid var(--line); min-height: 138px; border-radius: 20px; padding: 23px; text-align: left; cursor: pointer; background: rgba(255,253,248,.58); transition: .25s ease; }
.need-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(52,45,34,.08); border-color: rgba(185,104,73,.35); }
.need-card:first-child { grid-column: span 2; background: var(--blue-pale); }
.need-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; }
.need-card h3 { margin-bottom: 6px; font-family: var(--serif); font-size: 20px; font-weight: 500; }
.need-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.need-card .arrow { position: absolute; top: 25px; right: 24px; width:22px; height:22px; }
.need-card .next-icon { width:100%; height:100%; object-fit:contain; transform:rotate(180deg); }

.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.card { border: 1px solid var(--line); border-radius: 22px; padding: 24px; background: rgba(255,253,248,.67); }
.continue-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.course-card { appearance:none; width:100%; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:.2s ease; }
.course-card:hover { transform:translateY(-2px); border-color:rgba(185,104,73,.35); box-shadow:0 14px 32px rgba(52,45,34,.08); }
.progress-ring { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display:grid; place-items:center; background: conic-gradient(var(--sage) 0 20deg, var(--paper-deep) 20deg); position: relative; font-family: var(--serif); }
.progress-ring::after { content:""; position:absolute; inset:6px; background:var(--white); border-radius:50%; }
.progress-ring span { position: relative; z-index: 1; font-size: 12px; }
.course-ring { background:var(--sage-pale); }
.course-ring span { display:grid; line-height:1; gap:3px; }
.course-ring small { color:var(--ink-soft); font-family:var(--sans); font-size:9px; }
.memory-teaser { background: #394a43; color: #fffaf0; position: relative; overflow: hidden; }
.memory-teaser::after { content:"“"; position:absolute; right:18px; top:-24px; font-family:var(--serif); font-size:120px; color:rgba(255,255,255,.08); }
.memory-teaser p { font-family: var(--serif); font-size: 18px; line-height: 1.6; margin-bottom: 15px; }
.memory-teaser .tiny { color: rgba(255,255,255,.64); }

.rail-date { font-family: var(--serif); font-size: 25px; margin-bottom: 4px; }
.rail-rule { height: 1px; background: var(--line); margin: 24px 0; }
.rail-note { padding: 18px; border-radius: 18px; background: rgba(255,253,248,.62); }
.rail-note h3 { font-family: var(--serif); font-weight: 500; margin-bottom: 9px; }
.rail-note p { color: var(--ink-soft); font-size: 12px; line-height: 1.7; margin: 0; }
.xiaoman-mini { display: flex; gap: 12px; align-items:center; }
.xiaoman-mini img { width: 58px; height: 58px; object-fit: contain; }
.xiaoman-mini strong { display:block; font-family:var(--serif); font-weight:500; }
.xiaoman-mini small { color: var(--ink-soft); line-height:1.5; display:block; margin-top:4px; }

.page-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:42px; }
.back { appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-soft); padding:8px 0; }
.exercise-layout { display:grid; grid-template-columns: .9fr 1.1fr; gap:32px; align-items:start; }
.scene-image { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:26px; box-shadow:var(--shadow); }
.exercise-panel { padding: 16px 0; }
.step-count { display:flex; gap:6px; margin-bottom:26px; }
.step-count i { width:28px; height:3px; border-radius:9px; background:var(--paper-deep); }
.step-count i.on { background:var(--terracotta); }
.prompt-box { margin:24px 0; padding:20px; border-left:3px solid var(--terracotta); background:rgba(255,253,248,.58); border-radius:0 14px 14px 0; line-height:1.75; }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.choice { border:1px solid var(--line); background:rgba(255,253,248,.7); border-radius:999px; padding:10px 14px; cursor:pointer; }
.choice.selected { color:white; background:var(--sage); border-color:var(--sage); }
textarea, input[type=text] { width:100%; border:1px solid var(--line); background:rgba(255,253,248,.8); border-radius:16px; padding:16px; color:var(--ink); resize:vertical; }
textarea { min-height:120px; line-height:1.7; }
.field-label { display:block; font-size:12px; font-weight:700; margin:22px 0 8px; }
.exercise-panel .actions { margin-top:22px; }

.done-card { max-width:740px; margin:20px auto 0; text-align:center; }
.done-image { width:100%; max-height:310px; object-fit:cover; border-radius:26px; box-shadow:var(--shadow); }
.evidence-slip { position:relative; margin:-42px auto 28px; width:min(88%,560px); padding:28px; background:var(--white); box-shadow:0 16px 46px rgba(52,45,34,.14); transform:rotate(-.6deg); }
.evidence-slip::before { content:"本次记录"; display:block; color:var(--terracotta-deep); font-size:10px; letter-spacing:.18em; margin-bottom:12px; }
.evidence-slip p { font-family:var(--serif); font-size:21px; line-height:1.55; margin:0; }
.xiaoman-reply { display:flex; text-align:left; gap:14px; max-width:560px; margin:0 auto 24px; padding:16px; border-radius:18px; background:var(--sage-pale); }
.xiaoman-reply img { width:52px; height:52px; object-fit:contain; }
.xiaoman-reply p { margin:0; font-size:13px; line-height:1.7; }
.practice-feedback { max-width:560px; margin:0 auto 24px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,248,.62); }
.practice-feedback p { margin:0; font-size:13px; }
.practice-feedback small { display:block; margin-top:4px; color:var(--ink-soft); font-weight:400; }
.feedback-options { display:flex; flex:0 0 auto; gap:8px; }

.course-next-card { margin:24px 0 8px; padding:22px 24px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; border:1px solid rgba(185,104,73,.2); border-radius:22px; background:linear-gradient(130deg,rgba(251,227,209,.72),rgba(255,253,248,.65)); }
.course-next-card > span { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:var(--terracotta); color:white; font-family:var(--serif); font-size:13px; }
.course-next-card small { color:var(--terracotta-deep); font-size:10px; letter-spacing:.14em; }
.course-next-card h3 { margin:4px 0; font-family:var(--serif); font-size:22px; font-weight:500; }
.course-next-card p { margin:0; color:var(--ink-soft); font-size:12px; }

.course-shell { max-width:900px; margin:0 auto; }
.course-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; color:var(--ink-soft); font-size:11px; }
.course-progress { height:4px; margin-bottom:28px; overflow:hidden; border-radius:999px; background:rgba(48,66,58,.1); }
.course-progress i { display:block; height:100%; border-radius:inherit; background:var(--terracotta); transition:width .35s ease; }
.course-paper { position:relative; padding:clamp(30px,6vw,72px); border:1px solid rgba(91,77,57,.12); border-radius:5px 34px 34px 34px; background:rgba(255,253,248,.86); box-shadow:0 24px 70px rgba(52,45,34,.09); }
.course-paper::before { content:""; position:absolute; width:88px; height:24px; top:-10px; left:50%; transform:translateX(-50%) rotate(-1deg); background:rgba(229,214,183,.5); }
.course-kicker { display:flex; gap:10px; align-items:center; color:var(--terracotta-deep); font-size:10px; letter-spacing:.13em; }
.course-kicker span + span::before { content:"·"; margin-right:10px; }
.course-paper > h1 { max-width:13em; margin:14px 0 8px; font-size:clamp(36px,5vw,58px); }
.course-core { max-width:48em; margin:0; color:var(--ink-soft); font-family:var(--serif); font-size:17px; line-height:1.7; }
.course-rule { width:54px; height:2px; margin:30px 0 34px; background:var(--terracotta); }
.course-paper h2 { margin:0 0 22px; font-family:var(--serif); font-size:clamp(25px,3vw,34px); font-weight:500; line-height:1.35; }
.course-copy, .course-question { color:var(--ink); font-size:15px; line-height:1.9; }
.course-copy p, .course-question p { margin:0 0 1.1em; }
.course-copy h2, .course-copy h3, .course-copy h4 { margin:1.5em 0 .65em; font-family:var(--serif); font-weight:500; line-height:1.4; }
.course-copy h2 { font-size:27px; }
.course-copy h3 { font-size:23px; }
.course-copy h4 { font-size:19px; }
.course-copy ul, .course-copy ol { padding-left:1.4em; margin:1em 0 1.4em; }
.course-copy li { margin:.45em 0; }
.course-copy blockquote { margin:1.4em 0; padding:16px 20px; border-left:3px solid var(--sage); background:var(--sage-pale); color:var(--ink-soft); }
.course-copy hr { width:48px; height:1px; margin:34px auto; border:0; background:var(--line); }
.course-copy code { padding:2px 5px; border-radius:5px; background:var(--paper-deep); font-size:.9em; }
.course-question { margin:4px 0 25px; font-family:var(--serif); font-size:clamp(20px,2.4vw,27px); line-height:1.65; }
.course-options { display:grid; gap:10px; margin:22px 0; }
.course-option { width:100%; display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; padding:15px 17px; border:1px solid var(--line); border-radius:16px; background:rgba(248,244,235,.45); color:var(--ink); font:inherit; text-align:left; line-height:1.65; cursor:pointer; transition:.18s ease; }
.course-option:hover { transform:translateX(2px); border-color:rgba(48,66,58,.38); background:rgba(255,253,248,.92); }
.course-option.selected { border-color:var(--sage); background:var(--sage-pale); box-shadow:inset 3px 0 0 var(--sage); }
.course-option-mark { width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(48,66,58,.28); border-radius:50%; color:var(--sage); font-size:11px; line-height:1; }
.course-option.selected .course-option-mark { border-color:var(--sage); background:var(--sage); color:white; }
.course-feedback { margin:18px 0; padding:17px 19px; border-left:3px solid var(--sage); border-radius:0 14px 14px 0; background:var(--sage-pale); color:var(--ink-soft); font-size:13px; line-height:1.75; }
.course-feedback.retry { border-left-color:var(--terracotta); background:rgba(251,227,209,.65); }
.course-feedback p { margin:0 0 8px; }
.course-feedback p:last-child { margin-bottom:0; }
.course-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:38px; padding-top:24px; border-top:1px solid var(--line); }
.course-table-wrap { width:100%; margin:22px 0; overflow:auto; }
.course-table-wrap table { width:100%; min-width:480px; border-collapse:collapse; font-size:13px; }
.course-table-wrap th, .course-table-wrap td { padding:11px 13px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.course-table-wrap th { background:var(--paper-deep); }
.course-reading { font-size:15px; }
.course-loading, .course-complete { max-width:720px; min-height:60vh; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.course-loading h1, .course-complete h1 { max-width:10em; }
.course-loading-line { width:180px; height:3px; margin-top:26px; overflow:hidden; border-radius:999px; background:var(--line); }
.course-loading-line::after { content:""; display:block; width:45%; height:100%; background:var(--terracotta); animation:courseLoad 1.1s ease-in-out infinite alternate; }
.course-complete { align-items:center; text-align:center; }
.course-complete .lede { max-width:34em; }
.course-complete-mark { width:86px; height:86px; display:grid; place-items:center; margin-bottom:26px; border-radius:50%; background:var(--sage); color:white; font-family:var(--serif); font-size:42px; box-shadow:0 16px 40px rgba(48,66,58,.2); }
@keyframes courseLoad { from { transform:translateX(-10%) } to { transform:translateX(125%) } }

.path { position:relative; margin-top:32px; }
.path::before { content:""; position:absolute; left:23px; top:28px; bottom:28px; width:1px; background:var(--line); }
.path-item { position:relative; display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:center; padding:18px 0; }
.path-dot { width:47px; height:47px; border-radius:50%; display:grid; place-items:center; background:var(--paper-deep); z-index:1; font-family:var(--serif); }
.path-item.active .path-dot { background:var(--terracotta); color:white; }
.path-item.done .path-dot { background:var(--sage); color:white; }
.path-dot.icon-dot { padding:6px; background:var(--sage-pale); }
.path-dot.icon-dot .ui-icon { width:100%; height:100%; }
.path-item h3 { margin:0 0 4px; font-family:var(--serif); font-size:20px; font-weight:500; }
.path-item p { margin:0; color:var(--ink-soft); font-size:12px; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tool { min-height:150px; padding:20px; border-radius:20px; border:1px solid var(--line); background:rgba(255,253,248,.58); cursor:pointer; text-align:left; }
.tool:hover { border-color:var(--sage); }
.tool-icon { display:block; width:48px; height:48px; object-fit:contain; margin-bottom:18px; }
.tool h3 { margin-bottom:5px; }
.tool p { margin:0; color:var(--ink-soft); font-size:11px; line-height:1.5; }

.profile-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0; }
.stat { padding:20px; border-top:1px solid var(--line); }
.stat strong { display:block; font-family:var(--serif); font-size:34px; font-weight:400; }
.stat small { color:var(--ink-soft); }
.evidence-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.evidence-item { min-height:170px; display:flex; flex-direction:column; justify-content:space-between; padding:21px; background:var(--white); border-radius:6px 18px 18px 18px; box-shadow:0 8px 28px rgba(52,45,34,.06); }
.evidence-item p { font-family:var(--serif); font-size:17px; line-height:1.55; }
.evidence-item small { color:var(--ink-soft); }
.letter-card { display:grid; grid-template-columns:170px 1fr; overflow:hidden; padding:0; }
.letter-card img { width:100%; height:100%; object-fit:cover; }
.letter-copy { padding:26px; }
.letter-copy p { font-family:var(--serif); line-height:1.8; }
.review-pending h3 { margin-bottom:8px; font-family:var(--serif); font-size:20px; font-weight:500; }
.review-pending p { margin:0; color:var(--ink-soft); line-height:1.8; }
.review-sources { display:grid; gap:12px; margin-top:24px; }
.review-source { padding:16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.62); }
.review-source span { color:var(--terracotta-deep); font-size:10px; letter-spacing:.12em; }
.review-source p { margin:8px 0; font-family:var(--serif); font-size:17px; line-height:1.6; }
.review-source small { color:var(--ink-soft); }

.overlay { position:fixed; inset:0; z-index:50; background:rgba(28,36,32,.42); backdrop-filter:blur(12px); display:grid; place-items:center; padding:24px; animation:fade .25s ease; }
.welcome { width:min(1040px,100%); min-height:min(690px,calc(100vh - 48px)); display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border-radius:30px; overflow:hidden; box-shadow:0 30px 100px rgba(22,27,25,.26); }
.welcome-art { position:relative; min-height:500px; }
.welcome-art img { width:100%; height:100%; object-fit:cover; }
.welcome-copy { padding:clamp(38px,6vw,78px); display:flex; flex-direction:column; justify-content:center; }
.welcome-copy h1 { font-size:clamp(45px,6vw,74px); max-width:8em; }
.welcome-copy .actions { margin-top:18px; }
.onboard-step { font-size:10px; color:var(--ink-soft); letter-spacing:.15em; margin-bottom:24px; }
.sheet { width:min(580px,100%); max-height:min(760px,calc(100vh - 48px)); overflow:auto; padding:34px; background:var(--paper); border-radius:26px; box-shadow:var(--shadow); }
.sheet-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.close { appearance:none; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; padding:7px; }
.close .ui-icon { width:100%; height:100%; }
.privacy-list { display:grid; gap:14px; margin:26px 0; }
.privacy-item { display:flex; gap:13px; padding:15px; background:rgba(255,253,248,.55); border-radius:14px; }
.privacy-item span { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; }
.privacy-icon { width:34px; height:34px; object-fit:contain; }
.privacy-item p { margin:0; font-size:12px; line-height:1.7; color:var(--ink-soft); }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:80; padding:11px 18px; border-radius:999px; background:var(--ink); color:white; font-size:12px; opacity:0; pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.empty { text-align:center; padding:50px 20px; border:1px dashed var(--line); border-radius:20px; color:var(--ink-soft); }

@keyframes fade { from { opacity:0 } to { opacity:1 } }
@keyframes rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.main-view > * { animation:rise .35s ease both; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns:210px minmax(0,1fr); }
  .context-rail { display:none; }
}
@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { display:none; }
  .main-view { padding:26px 18px 108px; }
  .mobile-nav { position:fixed; z-index:12; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); padding:8px; border:1px solid rgba(48,66,58,.12); border-radius:20px; background:rgba(255,253,248,.9); backdrop-filter:blur(18px); box-shadow:0 12px 40px rgba(52,45,34,.16); }
  .mobile-nav-item { border:0; background:none; padding:7px 2px; display:grid; gap:2px; justify-items:center; color:var(--ink-soft); font-size:10px; }
  .mobile-nav-item span { width:28px; height:28px; display:grid; place-items:center; }
  .mobile-nav-item span img { width:100%; height:100%; object-fit:contain; opacity:.72; }
  .mobile-nav-item.active span img { opacity:1; transform:scale(1.08); }
  .mobile-nav-item.active { color:var(--terracotta-deep); }
  .hero { min-height:570px; border-radius:24px; }
  .hero > img { height:48%; top:auto; }
  .hero-copy { min-height:auto; width:100%; height:58%; padding:32px 26px; justify-content:flex-start; background:linear-gradient(180deg,rgba(248,244,235,1) 0%,rgba(248,244,235,.96) 70%,rgba(248,244,235,0) 100%); }
  h1 { font-size:42px; }
  .need-grid, .two-col, .exercise-layout, .evidence-grid { grid-template-columns:1fr; }
  .need-card:first-child { grid-column:auto; }
  .exercise-layout { gap:10px; }
  .scene-image { max-height:260px; }
  .done-image { max-height:245px; }
  .practice-feedback { align-items:stretch; flex-direction:column; }
  .feedback-options { width:100%; }
  .feedback-options .choice { flex:1; }
  .tool-grid { grid-template-columns:1fr 1fr; }
  .stat-row { grid-template-columns:repeat(3,1fr); }
  .stat { padding:14px 5px; }
  .stat strong { font-size:28px; }
  .letter-card { grid-template-columns:1fr; }
  .letter-card img { height:190px; }
  .welcome { grid-template-columns:1fr; min-height:calc(100vh - 24px); }
  .welcome-art { min-height:37vh; order:2; }
  .welcome-copy { padding:38px 27px 28px; }
  .welcome-copy h1 { font-size:46px; }
  .overlay { padding:12px; }
  .section-head { align-items:start; flex-direction:column; gap:8px; }
  .course-next-card { grid-template-columns:52px 1fr; padding:18px; }
  .course-next-card > span { width:52px; height:52px; font-size:11px; }
  .course-paper { padding:34px 22px; border-radius:4px 24px 24px 24px; }
  .course-paper > h1 { font-size:38px; }
  .course-core { font-size:15px; }
  .course-question { font-size:21px; }
  .course-option { padding:13px; }
  .course-actions { position:sticky; bottom:92px; z-index:3; margin:30px -10px -18px; padding:12px 10px; border:1px solid rgba(91,77,57,.1); border-radius:16px; background:rgba(255,253,248,.92); backdrop-filter:blur(14px); }
  .course-actions .primary { flex:1; }
  .course-complete { min-height:65vh; }
}

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