:root {
  --trainer-panel: rgba(255,255,255,.038);
  --trainer-panel-strong: rgba(255,255,255,.065);
  --trainer-ink: #171512;
  --trainer-success: #8fd39a;
}

button, textarea { font: inherit; }
button { border-radius: 0; }
.documentation-page { background: radial-gradient(circle at 78% 4%, rgba(216,112,44,.13), transparent 27%), linear-gradient(180deg, #0b0c0d, #0e0f10 48%, #0b0c0d); }
.trainer-header { width: min(1360px, calc(100% - 48px)); min-height: 88px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid rgba(231,223,209,.09); }
.trainer-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.save-indicator { color: rgba(231,223,209,.5); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; }
.save-indicator::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--trainer-success); box-shadow: 0 0 12px rgba(143,211,154,.55); vertical-align: .05rem; }
.save-indicator.saving::before { background: var(--orange-bright); }
.quiet-button { min-height: 2.65rem; border: 1px solid rgba(231,223,209,.14); background: rgba(0,0,0,.16); color: var(--paper-muted); padding: .68rem .8rem; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.quiet-button:hover { color: var(--orange-bright); border-color: rgba(247,163,90,.45); background: rgba(216,112,44,.07); }
.trainer-shell { width: min(1360px, calc(100% - 48px)); margin: 0 auto; padding: 4rem 0 7rem; }
.trainer-route-nav { display: flex; justify-content: flex-end; gap: 1.4rem; margin: -1rem 0 2.5rem; border-bottom: 1px solid rgba(231,223,209,.09); }
.route-card { min-width: min(280px, 100%); min-height: 3.7rem; display: inline-flex; align-items: center; gap: .7rem; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--paper); padding: .55rem 0; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, color .2s; }
.route-card:hover { transform: translateX(3px); border-color: rgba(247,163,90,.52); color: var(--orange-bright); }
.route-card[hidden] { display: none; }
.route-card .route-icon { width: 2rem; height: 2rem; flex: 0 0 2rem; display: grid; place-items: center; border: 1px solid rgba(247,163,90,.28); border-radius: 999px; color: var(--orange-bright); background: transparent; font-size: .9rem; }
.route-card span:last-child { min-width: 0; }
.route-card small, .route-card strong { display: block; }
.route-card small { margin-bottom: .24rem; color: var(--paper-muted); font-size: .55rem; letter-spacing: .11em; text-transform: uppercase; }
.route-card strong { color: var(--paper); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.route-home { min-width: 280px; }
.trainer-hero { min-height: 470px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .34fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; border-bottom: 1px solid rgba(231,223,209,.1); }
.trainer-hero h1 { max-width: 880px; }
.privacy-card { align-self: end; margin-bottom: 4.8rem; padding: .2rem 0 .2rem 1.15rem; border: 0; border-left: 2px solid rgba(247,163,90,.46); background: transparent; }
.privacy-card strong { display: block; margin-bottom: .65rem; color: var(--orange-bright); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.privacy-card p { margin: 0; color: var(--paper-muted); font-size: .84rem; line-height: 1.55; }
.choice-section, .case-catalog, .saved-section { padding: 5.5rem 0 0; }
.compact-section { padding-top: 3rem; }
.section-line { display: flex; justify-content: space-between; align-items: end; gap: 2.5rem; margin-bottom: 2rem; }
.section-line > div { display: flex; align-items: baseline; gap: 1rem; }
.section-line h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
.section-line > p { max-width: 390px; margin: 0; color: var(--paper-muted); line-height: 1.55; font-size: .88rem; text-align: right; }
.small-line h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.step-number { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; letter-spacing: .12em; }
.department-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; border: 0; background: transparent; }
.department-card, .mode-card, .area-card { position: relative; border: 0; border-top: 1px solid rgba(231,223,209,.16); background: transparent; color: var(--paper); text-align: left; cursor: pointer; overflow: hidden; transition: background .2s, border-color .2s; }
.department-card { min-height: 210px; padding: 1.45rem; }
.department-card::before, .mode-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 18%, rgba(216,112,44,.16), transparent 44%); opacity: 0; transition: opacity .25s; }
.department-card:hover::before, .mode-card:hover::before, .department-card.selected::before, .mode-card.selected::before { opacity: 1; }
.department-card.selected, .mode-card.selected, .area-card.selected { border-color: rgba(247,163,90,.8); box-shadow: none; background: linear-gradient(180deg, rgba(216,112,44,.075), transparent 74%); }
.department-card[disabled], .area-card[disabled] { cursor: default; opacity: .62; }
.department-card .card-tag, .mode-card .card-tag { display: block; color: var(--orange); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.department-card h3 { margin: 2.6rem 0 .7rem; }
.department-card p, .mode-card p, .area-card p { max-width: 440px; margin: 0; color: var(--paper-muted); line-height: 1.55; font-size: .86rem; }
.availability { position: absolute; top: 1.2rem; right: 1.2rem; border: 0; padding: .35rem 0; color: rgba(231,223,209,.5); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.department-card.selected .availability { border-color: rgba(143,211,154,.5); color: var(--trainer-success); }
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.area-card { min-height: 115px; padding: 1rem 0; }
.area-card strong { display: block; margin-bottom: .45rem; color: var(--paper); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.mode-card { min-height: 220px; padding: 1.25rem 0; }
.mode-card .mode-number { position: absolute; top: 1.1rem; right: 1.1rem; color: rgba(231,223,209,.22); font-family: var(--font-display); font-size: 3.3rem; line-height: 1; }
.mode-card h3 { margin: 3.7rem 0 .65rem; font-size: 2.3rem; }
.mode-card .mode-note { display: inline-block; margin-top: 1.2rem; color: var(--orange-bright); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.case-list, .saved-list { display: grid; gap: .75rem; }
.case-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; min-height: 160px; padding: 1.4rem 0; border: 0; border-top: 1px solid rgba(231,223,209,.14); background: transparent; }
.case-card .case-kicker { margin: 0 0 .55rem; color: var(--orange); font-size: .62rem; letter-spacing: .13em; font-weight: 750; }
.case-card h3 { margin-bottom: .65rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.case-card p { max-width: 740px; color: var(--paper-muted); line-height: 1.55; font-size: .88rem; }
.case-facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.case-facts span { position: relative; padding: .25rem .55rem .25rem 0; color: rgba(231,223,209,.58); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.case-facts span + span::before { content: '·'; margin-right: .55rem; color: rgba(247,163,90,.48); }
.action-button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.15rem; border: 1px solid rgba(247,163,90,.5); background: var(--orange); color: #1b110b; padding: .8rem 1rem; font-size: .65rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; transition: transform .2s, background .2s; }
.action-button:hover { transform: translateY(-2px); background: var(--orange-bright); }
.action-button.secondary { color: var(--orange-bright); background: rgba(216,112,44,.08); }
.action-button.secondary:hover { background: rgba(216,112,44,.16); }
.action-button.ghost { border-color: rgba(231,223,209,.16); color: var(--paper-muted); background: transparent; }
.empty-state { border: 1px dashed rgba(231,223,209,.15); padding: 1.2rem; color: var(--paper-muted); line-height: 1.6; }
.empty-state strong { color: var(--paper); }
.saved-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; padding: 1rem 0; border: 0; border-top: 1px solid rgba(231,223,209,.12); background: transparent; }
.saved-card .saved-index { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(247,163,90,.3); color: var(--orange-bright); font-family: var(--font-display); font-size: 1.25rem; }
.saved-card strong { display: block; margin-bottom: .25rem; }
.saved-card p { margin: 0; color: var(--paper-muted); font-size: .76rem; }
.status-chip { display: inline-flex; align-items: center; gap: .45rem; color: var(--paper-muted); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-chip[data-status="draft"] { color: #ffe08a; }
.status-chip[data-status="submitted"], .status-chip[data-status="reviewed"] { color: var(--orange-bright); }
.status-chip[data-status="revised"] { color: var(--trainer-success); }
.saved-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }

/* Exercise */
.exercise-view { max-width: 1360px; margin: 0 auto; }
.exercise-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: .8rem 0 2rem; }
.exercise-heading h1 { margin: 0; font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
.exercise-meta { margin: 0 0 .8rem; color: var(--orange); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.exercise-progress { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.progress-step { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(231,223,209,.12); padding: .5rem .58rem; color: rgba(231,223,209,.45); font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; transition: color .28s, border-color .28s, box-shadow .28s; }
.progress-step::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(143,211,154,.16), rgba(143,211,154,.055)); transform: scaleX(0); transform-origin: left; }
.progress-step::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; opacity: .85; }
.progress-step.active { border-color: rgba(247,163,90,.52); color: var(--orange-bright); box-shadow: 0 0 0 1px rgba(216,112,44,.06), inset 0 0 24px rgba(216,112,44,.045); }
.progress-step.active::before { background: linear-gradient(90deg, rgba(216,112,44,.18), rgba(216,112,44,.035)); animation: progress-charge .58s cubic-bezier(.2,.78,.24,1) both; }
.progress-step.active::after { animation: progress-outline .72s .08s cubic-bezier(.2,.78,.24,1) both; }
.progress-step.done { border-color: rgba(143,211,154,.32); color: var(--trainer-success); }
.progress-step.done::before { animation: progress-charge .58s cubic-bezier(.2,.78,.24,1) both; }
.progress-step.done.active::before { background: linear-gradient(90deg, rgba(216,112,44,.18), rgba(216,112,44,.035)); }
.progress-step > span { position: relative; }
.exercise-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 1px; padding: .45rem 0; border: 0; border-top: 1px solid rgba(231,223,209,.1); border-bottom: 1px solid rgba(231,223,209,.1); background: rgba(11,12,13,.92); backdrop-filter: blur(16px); overflow-x: auto; }
.exercise-tab { position: relative; overflow: hidden; flex: 1 0 auto; min-height: 2.8rem; border: 0; background: rgba(255,255,255,.025); color: var(--paper-muted); padding: .7rem .8rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .22s, background .22s; }
.exercise-tab::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .32rem; height: 1px; background: linear-gradient(90deg, transparent, var(--orange-bright), transparent); transform: scaleX(0); opacity: 0; transition: transform .38s cubic-bezier(.2,.78,.24,1), opacity .2s; }
.exercise-tab:hover, .exercise-tab.active { color: var(--orange-bright); background: rgba(216,112,44,.09); }
.exercise-tab.active::after { transform: scaleX(1); opacity: 1; }
.exercise-tab[disabled] { cursor: default; opacity: .3; }
.exercise-tab.tab-trail-source { z-index: 5; animation: tab-source-charge .78s cubic-bezier(.16,.8,.24,1) both; }
.exercise-tab.tab-unlock-burst { z-index: 7; animation: tab-unlock-pop .9s cubic-bezier(.16,.84,.22,1) both; }
.tab-energy-trail { position: absolute; z-index: 6; left: var(--trail-left); top: var(--trail-top); width: var(--trail-width); height: 2px; pointer-events: none; transform: translateY(-50%) scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgba(247,163,90,.15), rgba(247,163,90,.92) 64%, #fff4da); box-shadow: 0 0 7px rgba(247,163,90,.75), 0 0 20px rgba(216,112,44,.42); animation: tab-energy-line .72s cubic-bezier(.18,.76,.18,1) both; }
.tab-energy-trail::before { content: ''; position: absolute; inset: -5px -2px; background: linear-gradient(90deg, transparent, rgba(247,163,90,.38), rgba(255,244,218,.7)); filter: blur(5px); opacity: .85; }
.tab-energy-trail i { position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff4da; box-shadow: 0 0 8px #fff4da, 0 0 17px rgba(247,163,90,.95), 0 0 34px rgba(216,112,44,.72); transform: translate(0,-50%) scale(.25); animation: tab-energy-comet .78s cubic-bezier(.18,.76,.18,1) both; }
.tab-unlock-effects { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.tab-burst-ring { position: absolute; inset: 3px; border: 1px solid rgba(255,229,191,.9); box-shadow: inset 0 0 16px rgba(247,163,90,.18), 0 0 14px rgba(216,112,44,.48); opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); animation: tab-ring-draw .92s .18s cubic-bezier(.16,.84,.22,1) both; }
.tab-burst-ring.secondary { inset: 7px; border-color: rgba(247,163,90,.45); animation-delay: .3s; animation-duration: .78s; }
.tab-unlock-effects > i { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #ffe6bd; box-shadow: 0 0 6px rgba(255,230,189,.95), 0 0 11px rgba(247,163,90,.7); opacity: 0; animation: tab-spark-flight .82s calc(260ms + var(--spark-delay)) cubic-bezier(.12,.72,.24,1) both; }
.tab-unlock-effects > i:nth-of-type(3n) { width: 2px; height: 2px; background: var(--trainer-success); box-shadow: 0 0 7px rgba(143,211,154,.72); }
#exercise-content { position: relative; isolation: isolate; }
#exercise-content::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: .28rem; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--orange-bright) 18%, var(--orange) 50%, transparent); opacity: 0; transform: scaleX(.05); transform-origin: left; }
#exercise-content::after { content: ''; position: absolute; z-index: -1; top: -1rem; left: 8%; width: 84%; height: 15rem; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(216,112,44,.24), rgba(216,112,44,.07) 38%, transparent 72%); opacity: 0; transform: translateY(-24px) scale(.78); }
#exercise-content.stage-enter::before { animation: stage-accent-sweep .96s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter::after { animation: stage-glow-in .92s cubic-bezier(.16,.8,.24,1) both; }
.exercise-panel { position: relative; padding-top: 2rem; }
.exercise-panel::before { content: ''; position: absolute; inset: 1.05rem 0 auto; height: 11rem; pointer-events: none; border: 1px solid rgba(247,163,90,.42); box-shadow: inset 0 0 45px rgba(216,112,44,.055), 0 0 42px rgba(216,112,44,.08); opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.exercise-panel::after { content: ''; position: absolute; top: 2rem; left: -1px; width: 2px; height: min(8rem, 28vh); pointer-events: none; background: linear-gradient(var(--orange-bright), rgba(216,112,44,.45), transparent); opacity: 0; transform: scaleY(0); transform-origin: top; }
#exercise-content.stage-enter > .exercise-panel { animation: stage-panel-in .64s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter > .exercise-panel::before { animation: stage-frame-draw 1.08s .03s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter > .exercise-panel::after { animation: stage-rail-draw .78s .08s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter .source-intro,
#exercise-content.stage-enter .writing-layout,
#exercise-content.stage-enter .annotation-legend,
#exercise-content.stage-enter .self-layout,
#exercise-content.stage-enter .logic-panel { animation: stage-item-in .66s .08s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter .source-grid > .source-card { animation: stage-item-in .58s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter[data-stage="compare"] .comparison-grid > .comparison-column { animation: reveal-column-in .72s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter[data-stage="write"] .documentation-field { animation: stage-item-in .54s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter[data-stage="self"] .check-row { animation: reflection-row-in .5s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter[data-stage="self"] .reflection-summary { animation: summary-pop-in .68s .16s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter[data-stage="logic"] .logic-flow > .logic-node { animation: logic-node-in .6s cubic-bezier(.16,.8,.24,1) both; }
#exercise-content.stage-enter .source-grid > :nth-child(1),
#exercise-content.stage-enter .comparison-grid > :nth-child(1),
#exercise-content.stage-enter .logic-flow > :nth-child(1) { animation-delay: .08s; }
#exercise-content.stage-enter .source-grid > :nth-child(2),
#exercise-content.stage-enter .comparison-grid > :nth-child(2),
#exercise-content.stage-enter .logic-flow > :nth-child(2) { animation-delay: .13s; }
#exercise-content.stage-enter .source-grid > :nth-child(3),
#exercise-content.stage-enter .comparison-grid > :nth-child(3),
#exercise-content.stage-enter .logic-flow > :nth-child(3) { animation-delay: .18s; }
#exercise-content.stage-enter .source-grid > :nth-child(4),
#exercise-content.stage-enter .logic-flow > :nth-child(4) { animation-delay: .23s; }
#exercise-content.stage-enter .source-grid > :nth-child(5),
#exercise-content.stage-enter .logic-flow > :nth-child(5) { animation-delay: .28s; }
#exercise-content.stage-enter[data-stage="write"] .documentation-field:nth-child(1) { animation-delay: .12s; }
#exercise-content.stage-enter[data-stage="write"] .documentation-field:nth-child(2) { animation-delay: .18s; }
#exercise-content.stage-enter[data-stage="write"] .documentation-field:nth-child(3) { animation-delay: .24s; }
#exercise-content.stage-enter[data-stage="write"] .documentation-field:nth-child(4) { animation-delay: .3s; }
#exercise-content.stage-enter[data-stage="self"] .check-category:nth-of-type(1) .check-row { animation-delay: .1s; }
#exercise-content.stage-enter[data-stage="self"] .check-category:nth-of-type(2) .check-row { animation-delay: .17s; }
#exercise-content.stage-enter[data-stage="self"] .check-category:nth-of-type(3) .check-row { animation-delay: .24s; }
.source-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.35fr); gap: 1rem; margin-bottom: 1rem; }
.source-instruction, .mode-callout { padding: 1rem 0; border: 0; border-top: 1px solid rgba(231,223,209,.12); background: transparent; }
.source-instruction strong, .mode-callout strong, .panel-label { display: block; margin-bottom: .55rem; color: var(--orange-bright); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }
.source-instruction p, .mode-callout p { margin: 0; color: var(--paper-muted); line-height: 1.6; font-size: .86rem; }
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; align-items: start; }
.source-card { border: 0; border-top: 1px solid rgba(231,223,209,.14); background: transparent; padding: 1rem 0; }
.source-card.wide { grid-column: 1 / -1; }
.source-card h2 { margin-bottom: 1rem; font-size: clamp(1.55rem, 2.2vw, 2.2rem); }
.source-card ul { margin: 0; padding-left: 1.05rem; }
.source-card li { margin-bottom: .55rem; color: var(--paper-muted); line-height: 1.55; font-size: .87rem; }
.interview-source-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px, 360px); gap: 1rem; align-items: start; }
.interview-source-main { min-width: 0; }
.interview-note-panel { position: sticky; top: 5.3rem; max-height: calc(100vh - 6.5rem); overflow: auto; border: 1px solid rgba(247,163,90,.24); background: linear-gradient(155deg, rgba(216,112,44,.11), rgba(12,13,15,.96) 32%); padding: 1rem; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.interview-note-panel h2, .interview-note-comparison h2 { margin-bottom: .7rem; font-size: clamp(1.55rem, 2.4vw, 2rem); }
.interview-note-panel p { color: var(--paper-muted); line-height: 1.55; font-size: .82rem; }
.interview-note-panel.locked::before { content: ''; display: block; width: 38px; height: 2px; margin-bottom: 1rem; background: var(--orange); box-shadow: 0 0 14px rgba(247,163,90,.52); }
.interview-note-panel.confirm { border-color: rgba(247,163,90,.52); box-shadow: 0 0 0 1px rgba(247,163,90,.08), 0 22px 60px rgba(0,0,0,.3); }
.interview-note-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.interview-note-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.interview-note-panel textarea { width: 100%; min-height: 360px; resize: vertical; border: 1px solid rgba(231,223,209,.16); background: rgba(0,0,0,.34); color: var(--paper); padding: .85rem; line-height: 1.55; font: inherit; font-size: .85rem; }
.interview-note-panel textarea:focus { outline: 1px solid rgba(247,163,90,.78); outline-offset: 2px; border-color: rgba(247,163,90,.45); }
.interview-note-panel textarea:disabled { opacity: .72; cursor: not-allowed; }
.interview-note-save { margin: .6rem 0 0; color: rgba(231,223,209,.43) !important; font-size: .7rem !important; }
.interview-note-list { margin: 1rem 0 0; padding-left: 1.05rem; }
.interview-note-list li { margin-bottom: .65rem; color: rgba(231,223,209,.76); line-height: 1.5; font-size: .78rem; }
.interview-transcript { display: grid; gap: .55rem; }
.transcript-turn { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: .8rem; padding: .75rem .85rem; border-left: 2px solid rgba(231,223,209,.14); background: rgba(0,0,0,.18); }
.transcript-turn.doctor { border-left-color: rgba(247,163,90,.62); }
.transcript-turn.patient { border-left-color: rgba(143,211,154,.45); }
.transcript-turn strong { padding-top: .12rem; color: var(--orange-bright); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.transcript-turn.patient strong { color: var(--trainer-success); }
.transcript-turn p { margin: 0; color: rgba(231,223,209,.82); line-height: 1.62; font-size: .87rem; }
.transcript-observation { margin: .2rem 0; padding: .7rem .85rem; border: 1px dashed rgba(231,223,209,.15); color: rgba(231,223,209,.54); font-size: .78rem; font-style: italic; line-height: 1.55; }
.measurement-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-bottom: 1rem; background: rgba(231,223,209,.1); border: 1px solid rgba(231,223,209,.1); }
.measurement { padding: .7rem; background: #101113; }
.measurement span { display: block; margin-bottom: .3rem; color: rgba(231,223,209,.5); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
.measurement strong { color: var(--paper); font-size: .82rem; }
.source-timeline { display: grid; gap: 1px; background: rgba(231,223,209,.09); border: 1px solid rgba(231,223,209,.09); }
.timeline-row { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 1rem; padding: .75rem; background: #101113; }
.timeline-row time { color: var(--orange-bright); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
.timeline-row p { margin: 0; color: var(--paper-muted); line-height: 1.5; font-size: .84rem; }
.source-footer-actions { display: flex; justify-content: flex-end; padding-top: 1rem; }
.writing-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 1rem; align-items: start; }
.writing-layout.blind-layout { grid-template-columns: 1fr; }
.editor-panel, .guidance-panel, .comparison-column, .self-panel, .logic-panel { border: 0; border-top: 1px solid rgba(231,223,209,.14); background: transparent; }
.editor-panel { padding: 1.1rem 0 0; }
.editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.editor-heading h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.editor-heading p { max-width: 520px; color: var(--paper-muted); font-size: .8rem; line-height: 1.5; }
.editor-status { color: rgba(231,223,209,.48); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.editor-tools { display: grid; justify-items: end; gap: .55rem; }
.source-peek-button { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(247,163,90,.45); background: rgba(216,112,44,.1); color: var(--orange-bright); padding: .65rem .8rem; font-size: .61rem; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.source-peek-button:hover { border-color: var(--orange-bright); background: rgba(216,112,44,.18); }
.documentation-field { display: grid; gap: .5rem; margin-bottom: 1rem; }
.documentation-field label { display: flex; justify-content: space-between; gap: 1rem; color: var(--orange-bright); font-size: .65rem; letter-spacing: .11em; font-weight: 750; text-transform: uppercase; }
.field-count { color: rgba(231,223,209,.4); font-weight: 500; }
.documentation-field textarea { width: 100%; min-height: var(--field-height, 180px); resize: vertical; border: 1px solid rgba(231,223,209,.16); background: rgba(0,0,0,.32); color: var(--paper); padding: .9rem; line-height: 1.6; font-size: .92rem; }
.documentation-field textarea:focus { outline: 1px solid rgba(247,163,90,.78); outline-offset: 2px; border-color: rgba(247,163,90,.45); }
.editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .3rem; }
.editor-actions p { margin: 0; color: rgba(231,223,209,.48); font-size: .73rem; line-height: 1.45; }
.guidance-panel { position: sticky; top: 5.3rem; padding: 1.1rem 0 0; }
.guidance-panel h2 { margin-bottom: 1rem; font-size: 1.75rem; }
.objective-list { margin: 0; padding: 0; list-style: none; counter-reset: objective; }
.objective-list li { counter-increment: objective; position: relative; padding: .75rem 0 .75rem 2rem; border-top: 1px solid rgba(231,223,209,.08); color: var(--paper-muted); line-height: 1.45; font-size: .8rem; }
.objective-list li::before { content: counter(objective, decimal-leading-zero); position: absolute; left: 0; top: .78rem; color: var(--orange); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .6rem; }
.repair-banner { margin-bottom: 1rem; border: 1px solid rgba(247,163,90,.28); background: rgba(216,112,44,.08); padding: .9rem; color: var(--paper-muted); line-height: 1.55; font-size: .84rem; }
.comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; align-items: start; }
.comparison-grid.has-revision { grid-template-columns: repeat(3,minmax(0,1fr)); }
.comparison-column { min-width: 0; }
.comparison-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 78px; padding: 1rem 0; border-bottom: 1px solid rgba(231,223,209,.1); }
.comparison-header h2 { font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.comparison-header p { margin: .35rem 0 0; color: var(--paper-muted); font-size: .72rem; }
.comparison-body { padding: 1rem 0; }
.note-section + .note-section { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(231,223,209,.1); }
.note-section h3 { margin-bottom: .75rem; color: var(--orange); font-family: var(--font-sans); font-size: .62rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.note-section p { white-space: pre-wrap; color: rgba(231,223,209,.82); line-height: 1.67; font-size: .87rem; }
.expert-column { position: relative; overflow: hidden; }
.expert-column::after { content: ''; position: absolute; pointer-events: none; inset: 0; border: 1px solid rgba(247,163,90,.24); box-shadow: inset 0 0 55px rgba(216,112,44,.04); opacity: .55; }
#expert-note.expert-note-revealing .expert-reveal-heading { animation: expert-heading-reveal .66s var(--reveal-delay) cubic-bezier(.16,.8,.24,1) both; }
#expert-note.expert-note-revealing .expert-reveal-line { position: relative; animation: expert-text-reveal 1.06s var(--reveal-delay) cubic-bezier(.16,.78,.2,1) both; }
#expert-note.expert-note-revealing .expert-reveal-line::after { content: ''; position: absolute; z-index: 4; top: .05em; bottom: .05em; left: 0; width: 1px; pointer-events: none; background: linear-gradient(transparent, rgba(255,239,213,.95) 18%, rgba(247,163,90,.95) 78%, transparent); box-shadow: 0 0 8px rgba(247,163,90,.8); opacity: 0; animation: expert-caret-sweep .96s var(--reveal-delay) cubic-bezier(.2,.72,.2,1) both; }
.user-note { min-height: 70px; padding: .75rem; border-left: 1px solid rgba(231,223,209,.14); background: rgba(0,0,0,.14); }
.annotation-wrap { position: relative; display: inline; }
.annotation-mark { display: inline; border: 0; border-bottom: 1px dashed var(--orange-bright); background: rgba(216,112,44,.1); color: inherit; padding: 0 .08em; cursor: help; line-height: inherit; text-align: left; }
.annotation-mark::after { content: '•'; margin-left: .2rem; color: var(--orange-bright); font-size: .76em; vertical-align: super; }
.annotation-bubble { position: absolute; z-index: 30; left: 0; bottom: calc(100% + .7rem); width: min(320px, 70vw); padding: .8rem; border: 1px solid rgba(247,163,90,.45); background: #1a1713; color: var(--paper); box-shadow: 0 18px 46px rgba(0,0,0,.48); font-size: .75rem; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .16s, transform .16s, visibility .16s; pointer-events: none; }
.annotation-wrap:hover .annotation-bubble, .annotation-wrap.open .annotation-bubble, .show-all-annotations .annotation-bubble { opacity: 1; visibility: visible; transform: translateY(0); }
.show-all-annotations .annotation-wrap { display: block; margin: .75rem 0; padding: .7rem; border-left: 2px solid var(--orange); background: rgba(216,112,44,.055); }
.show-all-annotations .annotation-bubble { position: static; display: block; width: auto; margin-top: .55rem; box-shadow: none; pointer-events: auto; }
.annotation-legend { margin: 0 0 1rem; padding: .75rem; border: 1px solid rgba(247,163,90,.2); color: var(--paper-muted); font-size: .78rem; line-height: 1.5; }
.interview-note-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-bottom: 1rem; }
.interview-note-comparison.expert-only { grid-template-columns: 1fr; }
.interview-note-comparison > article { min-width: 0; max-height: 520px; overflow: auto; border: 1px solid rgba(231,223,209,.12); background: var(--trainer-panel); padding: 1rem; }
.interview-note-comparison .user-note { white-space: pre-wrap; color: rgba(231,223,209,.82); line-height: 1.6; font-size: .85rem; }
.expert-interview-note { position: relative; box-shadow: inset 0 0 50px rgba(216,112,44,.035); }
.expert-interview-note ul { margin: 0; padding-left: 1.05rem; }
.expert-interview-note li { margin-bottom: .6rem; color: rgba(231,223,209,.76); line-height: 1.5; font-size: .78rem; }
.interview-note-comparison.expert-note-revealing .expert-reveal-line { animation: expert-text-reveal .76s var(--reveal-delay) cubic-bezier(.16,.78,.2,1) both; }
.self-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 1rem; align-items: start; }
.self-panel { padding: 1.1rem 0 0; }
.self-panel > h2 { margin-bottom: .7rem; }
.self-intro { color: var(--paper-muted); line-height: 1.55; font-size: .87rem; }
.check-category { margin-top: 1.4rem; }
.check-category h3 { margin-bottom: .7rem; color: var(--orange); font-family: var(--font-sans); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.check-row { display: grid; grid-template-columns: 23px minmax(0,1fr); gap: .7rem; align-items: start; padding: .72rem 0; border-top: 1px solid rgba(231,223,209,.08); color: rgba(231,223,209,.83); font-size: .84rem; line-height: 1.5; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: .1rem 0 0; accent-color: var(--orange); }
.reflection-summary { position: sticky; top: 5.3rem; border: 1px solid rgba(247,163,90,.26); background: linear-gradient(145deg, rgba(216,112,44,.11), rgba(255,255,255,.025)); padding: 1rem; }
.reflection-summary strong { display: block; color: var(--orange-bright); font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; }
.reflection-summary p { color: var(--paper-muted); line-height: 1.5; font-size: .78rem; }
.reflection-actions { display: grid; gap: .55rem; margin-top: .8rem; }
.reflection-actions .action-button, .reflection-actions .quiet-button { width: 100%; }
.logic-panel { padding: clamp(1rem,2vw,1.5rem) 0 0; }
.logic-panel > p { max-width: 760px; color: var(--paper-muted); line-height: 1.6; }
.logic-flow { max-width: 880px; margin: 2rem auto 0; }
.logic-node { position: relative; padding: 1rem 0 1rem 4rem; border: 0; border-top: 1px solid rgba(231,223,209,.13); background: transparent; }
.logic-node + .logic-node { margin-top: 1.7rem; }
.logic-node + .logic-node::before { content: ''; position: absolute; left: 2rem; bottom: 100%; width: 1px; height: 1.7rem; background: linear-gradient(var(--orange), rgba(216,112,44,.2)); }
.logic-node + .logic-node::after { content: '↓'; position: absolute; left: 1.74rem; top: -1.25rem; color: var(--orange-bright); font-size: .85rem; }
.logic-index { position: absolute; left: 1rem; top: 1rem; color: var(--orange); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; }
.logic-node strong { display: block; margin-bottom: .35rem; color: var(--paper); }
.logic-node p { margin: 0; color: var(--paper-muted); line-height: 1.5; font-size: .82rem; }
.revision-note { margin-bottom: 1rem; padding: .8rem; border: 1px solid rgba(143,211,154,.25); color: var(--paper-muted); font-size: .8rem; line-height: 1.5; }
.revision-note strong { color: var(--trainer-success); }
.drawer-open { overflow: hidden; }
.source-drawer { position: fixed; z-index: 80; inset: 0; }
.source-drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); cursor: default; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 94vw); display: flex; flex-direction: column; border-left: 1px solid rgba(247,163,90,.32); background: #0e0f10; box-shadow: -28px 0 80px rgba(0,0,0,.52); animation: drawer-in .24s cubic-bezier(.2,.75,.25,1); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem; border-bottom: 1px solid rgba(231,223,209,.11); background: radial-gradient(circle at 82% 16%, rgba(216,112,44,.13), transparent 42%); }
.drawer-header .panel-label { margin-bottom: .35rem; }
.drawer-header h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.drawer-close { width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; border: 1px solid rgba(231,223,209,.18); background: rgba(255,255,255,.035); color: var(--paper); font-size: 1.55rem; line-height: 1; cursor: pointer; }
.drawer-close:hover { border-color: rgba(247,163,90,.6); color: var(--orange-bright); }
.drawer-intro { margin: 0; padding: .9rem 1.2rem; border-bottom: 1px solid rgba(231,223,209,.08); color: var(--paper-muted); line-height: 1.5; font-size: .8rem; }
.drawer-body { min-height: 0; flex: 1; overflow-y: auto; padding: .8rem 1.2rem 1.2rem; }
.peek-section { border: 1px solid rgba(231,223,209,.12); background: rgba(255,255,255,.027); }
.peek-section + .peek-section { margin-top: .6rem; }
.peek-section summary { min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; list-style: none; color: var(--paper); font-family: var(--font-display); font-size: 1.18rem; cursor: pointer; }
.peek-section summary::-webkit-details-marker { display: none; }
.peek-section summary i { position: relative; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border: 1px solid rgba(247,163,90,.28); }
.peek-section summary i::before, .peek-section summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: var(--orange-bright); transform: translate(-50%,-50%); }
.peek-section summary i::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .18s; }
.peek-section[open] summary i::after { transform: translate(-50%,-50%) rotate(0deg); }
.peek-content { padding: 0 .9rem .9rem; border-top: 1px solid rgba(231,223,209,.08); }
.peek-content ul { margin: .85rem 0 0; padding-left: 1rem; }
.peek-content li { margin-bottom: .55rem; color: var(--paper-muted); line-height: 1.5; font-size: .82rem; }
.peek-content .measurement-grid { margin: .85rem 0 0; }
.peek-content .source-timeline { margin-top: .85rem; }
.drawer-footer { padding: .85rem 1.2rem; border-top: 1px solid rgba(231,223,209,.11); background: #0b0c0d; }
.drawer-footer .action-button { width: 100%; }
@keyframes drawer-in { from { transform: translateX(28px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
@keyframes progress-charge {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes progress-outline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: .85; }
}
@keyframes tab-source-charge {
  0% { color: var(--paper-muted); background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 rgba(216,112,44,0); }
  42% { color: var(--orange-bright); background: rgba(216,112,44,.13); box-shadow: inset 0 0 26px rgba(216,112,44,.18), 0 0 18px rgba(216,112,44,.14); }
  100% { color: rgba(247,163,90,.7); background: rgba(216,112,44,.055); box-shadow: inset 0 0 0 rgba(216,112,44,0); }
}
@keyframes tab-energy-line {
  0% { opacity: 0; transform: translateY(-50%) scaleX(0); }
  18% { opacity: 1; }
  74% { opacity: 1; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}
@keyframes tab-energy-comet {
  0% { opacity: 0; transform: translate(-100%,-50%) scale(.2); }
  22% { opacity: 1; }
  72% { opacity: 1; transform: translate(0,-50%) scale(1); }
  100% { opacity: 0; transform: translate(0,-50%) scale(1.5); }
}
@keyframes tab-unlock-pop {
  0% { color: rgba(231,223,209,.45); background: rgba(255,255,255,.025); transform: translateY(0) scale(.985); box-shadow: 0 0 0 rgba(216,112,44,0); }
  40% { color: #ffe6bd; background: rgba(216,112,44,.2); transform: translateY(-1px) scale(1.018); box-shadow: inset 0 0 32px rgba(247,163,90,.16), 0 0 28px rgba(216,112,44,.28); }
  52% { transform: translateX(-1px) scale(1.012); }
  62% { transform: translateX(1px) scale(1.008); }
  72% { transform: translateX(-.5px) scale(1.004); }
  100% { color: var(--orange-bright); background: rgba(216,112,44,.09); transform: translate(0) scale(1); box-shadow: inset 0 0 0 rgba(216,112,44,0), 0 0 0 rgba(216,112,44,0); }
}
@keyframes tab-ring-draw {
  0% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(.92); }
  24% { opacity: .95; }
  70% { opacity: .72; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); }
  100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1.04); }
}
@keyframes tab-spark-flight {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  20% { opacity: .95; }
  72% { opacity: .75; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1) rotate(35deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.2) rotate(60deg); }
}
@keyframes stage-accent-sweep {
  0% { opacity: 0; transform: scaleX(.02); }
  26% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes stage-glow-in {
  0% { opacity: 0; transform: translateY(-24px) scale(.78); }
  42% { opacity: 1; }
  100% { opacity: .28; transform: translateY(0) scale(1); }
}
@keyframes stage-rail-draw {
  0% { opacity: 0; transform: scaleY(0); }
  45% { opacity: 1; }
  100% { opacity: .45; transform: scaleY(1); }
}
@keyframes stage-frame-draw {
  0% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: scale(.985); }
  18% { opacity: .9; }
  70% { opacity: .78; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); }
  100% { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1.006); }
}
@keyframes stage-panel-in {
  from { opacity: 0; transform: translateY(32px) scale(.975); filter: blur(9px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes stage-item-in {
  from { opacity: 0; transform: translateY(15px) scale(.99); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-column-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(20px) scale(.975); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
}
@keyframes expert-heading-reveal {
  from { opacity: 0; transform: translateY(7px); letter-spacing: .19em; filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); letter-spacing: .12em; filter: blur(0); }
}
@keyframes expert-text-reveal {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(7px); filter: blur(3px); }
  26% { opacity: .45; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); filter: blur(0); }
}
@keyframes expert-caret-sweep {
  0% { left: 0; opacity: 0; }
  18% { opacity: .9; }
  82% { opacity: .75; }
  100% { left: 100%; opacity: 0; }
}
@keyframes reflection-row-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes summary-pop-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); box-shadow: 0 0 0 rgba(216,112,44,0); }
  65% { opacity: 1; transform: translateY(0) scale(1.015); box-shadow: 0 18px 55px rgba(216,112,44,.16); }
  to { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(216,112,44,0); }
}
@keyframes logic-node-in {
  from { opacity: 0; transform: translateX(-22px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; max-width: min(360px, calc(100% - 2rem)); padding: .8rem 1rem; border: 1px solid rgba(247,163,90,.48); background: #1a1713; color: var(--paper); box-shadow: 0 18px 50px rgba(0,0,0,.5); font-size: .78rem; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s; }
.toast.visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 960px) {
  .writing-layout, .self-layout { grid-template-columns: 1fr; }
  .guidance-panel, .reflection-summary, .interview-note-panel { position: static; max-height: none; }
  .interview-source-layout { grid-template-columns: 1fr; }
  .source-intro { grid-template-columns: 1fr; }
  .measurement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .trainer-route-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; }
  .route-card, .route-home { min-width: 0; }
  .trainer-hero { min-height: 0; grid-template-columns: 1fr; padding: 2.5rem 0 3rem; gap: 1.5rem; }
  .privacy-card { align-self: auto; margin: 0; }
  .department-grid, .mode-grid, .source-grid, .comparison-grid, .comparison-grid.has-revision, .interview-note-comparison { grid-template-columns: 1fr; }
  .source-card.wide { grid-column: auto; }
  .choice-section, .case-catalog, .saved-section { padding-top: 4rem; }
  .exercise-heading { display: block; }
  .exercise-progress { justify-content: flex-start; margin-top: 1.2rem; }
  .case-card { grid-template-columns: 1fr; }
  .case-card .action-button { width: 100%; }
  .annotation-wrap:hover .annotation-bubble { opacity: 0; visibility: hidden; }
  .annotation-wrap.open .annotation-bubble, .show-all-annotations .annotation-bubble { opacity: 1; visibility: visible; }
  .annotation-bubble { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
  .show-all-annotations .annotation-bubble { position: static; }
  .transcript-turn { grid-template-columns: 1fr; gap: .35rem; }
}

@media (max-width: 600px) {
  .trainer-header, .trainer-shell { width: min(100% - 32px, 1360px); }
  .trainer-header { min-height: 82px; }
  .save-indicator { display: none; }
  .trainer-header-actions { gap: .35rem; }
  .quiet-button { padding: .6rem; font-size: .55rem; }
  .trainer-shell { padding-top: 1rem; padding-bottom: 4rem; }
  .trainer-route-nav { grid-template-columns: 1fr; gap: .45rem; margin: 0 0 1.5rem; }
  .route-card, .route-home { min-height: 3.85rem; width: 100%; }
  .route-card .route-icon { width: 2.3rem; height: 2.3rem; flex-basis: 2.3rem; }
  .route-card strong { font-size: .69rem; }
  .trainer-hero { padding: 1.6rem 0 2.2rem; }
  .trainer-hero h1 { margin-bottom: 1.2rem; font-size: clamp(2.7rem, 13vw, 3.7rem); }
  .trainer-hero .content-lead { font-size: .92rem; line-height: 1.58; }
  .privacy-card { padding: .9rem; }
  .section-line { display: block; }
  .section-line > p { margin-top: .8rem; text-align: left; }
  .choice-section, .case-catalog, .saved-section { padding-top: 3rem; }
  .section-line { margin-bottom: 1.25rem; }
  .section-line h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .department-card { min-height: 150px; padding: 1rem; }
  .department-card h3 { margin: 2.1rem 0 .45rem; font-size: 2rem; }
  .department-card p { font-size: .8rem; }
  .availability { top: .8rem; right: .8rem; }
  .mode-card { min-height: 160px; padding: 1rem; }
  .mode-card h3 { margin: 2.3rem 0 .45rem; font-size: 1.95rem; }
  .mode-card .mode-number { top: .8rem; right: .8rem; font-size: 2.35rem; }
  .mode-card p { font-size: .79rem; }
  .mode-card .mode-note { margin-top: .65rem; }
  .area-grid { grid-template-columns: 1fr; }
  .saved-card { grid-template-columns: auto minmax(0,1fr); }
  .saved-actions { grid-column: 1 / -1; }
  .saved-actions .quiet-button { flex: 1; }
  .exercise-heading { padding-top: .2rem; }
  .exercise-heading h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
  .exercise-meta { font-size: .57rem; line-height: 1.5; }
  .exercise-progress { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: .25rem; }
  .progress-step { flex: 0 0 auto; }
  .exercise-tabs { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; }
  .exercise-tab { font-size: .56rem; }
  .measurement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .timeline-row { grid-template-columns: 62px minmax(0,1fr); gap: .65rem; }
  .editor-panel, .guidance-panel, .comparison-body, .self-panel, .logic-panel { padding: .85rem; }
  .editor-heading, .editor-actions { display: block; }
  .editor-tools { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; }
  .editor-status { display: block; margin-top: 0; }
  .source-peek-button { min-height: 2.55rem; }
  .documentation-field textarea { min-height: clamp(160px, var(--field-height, 220px), 280px); font-size: .9rem; }
  .editor-actions .action-button { width: 100%; margin-top: .8rem; }
  .comparison-header { min-height: 0; }
  .drawer-panel { width: 100%; border-left: 0; }
  .drawer-header { padding: .8rem 1rem; }
  .drawer-header h2 { font-size: 2rem; }
  .drawer-intro { padding: .7rem 1rem; font-size: .76rem; }
  .drawer-body { padding: .65rem 1rem 1rem; }
  .drawer-footer { padding: .7rem 1rem; }
  .peek-section summary { min-height: 3.25rem; font-size: 1.05rem; }
  .peek-content .measurement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #exercise-content *,
  #exercise-content::before,
  #exercise-content::after,
  .exercise-panel::after,
  .exercise-panel::before,
  .progress-step,
  .progress-step::before,
  .progress-step::after,
  .exercise-tab,
  .exercise-tab::after,
  .tab-energy-trail,
  .tab-energy-trail i,
  .tab-unlock-effects,
  .tab-unlock-effects *,
  #expert-note .expert-reveal-heading,
  #expert-note .expert-reveal-line,
  #expert-note .expert-reveal-line::after,
  .interview-note-comparison .expert-reveal-line { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .progress-step.done::before,
  .progress-step.active::before,
  .progress-step.active::after { transform: scaleX(1); }
  #expert-note .expert-reveal-heading,
  #expert-note .expert-reveal-line,
  .interview-note-comparison .expert-reveal-line { opacity: 1 !important; clip-path: none !important; transform: none !important; filter: none !important; }
  .tab-energy-trail,
  .tab-unlock-effects { display: none !important; }
}

@media print {
  .trainer-header, .exercise-tabs, .editor-actions, .quiet-button, .action-button, .toast { display: none !important; }
  .documentation-page { background: #fff; color: #111; }
  .trainer-shell { width: 100%; padding: 0; }
  .exercise-panel { padding: 0; }
  .comparison-grid { grid-template-columns: 1fr 1fr; }
  .comparison-column, .note-section, .user-note { border-color: #ccc; background: #fff; color: #111; }
  .note-section p, .comparison-header p { color: #222; }
}