@import url('./coach-rig.css');

@import url('./cloud-workspace.css');
/* Shared learner presentation. Load after the existing feature styles so that
   visual changes never alter the interview driver or its visibility contract. */
:root {
  --refined-paper: #f7f7f4;
  --refined-surface: #ffffff;
  --refined-ink: #243545;
  --refined-muted: #596973;
  --refined-sage: #6b8587;
  --refined-action: #456466;
  --refined-action-hover: #354f51;
  --refined-line: #dde4e1;
  --refined-soft: #edf1ee;
  --refined-warm: #c57852;
  --refined-warm-ink: #975935;
  --accent: var(--refined-action);
  --orange: var(--refined-action);
  --orange-dark: var(--refined-action-hover);
  --ink: var(--refined-ink);
  --muted: var(--refined-muted);
  --line: var(--refined-line);
  --paper: var(--refined-surface);
  --radius: 16px;
  color: var(--refined-ink);
  background: var(--refined-paper);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Text keeps a useful contrast even on the softly tinted surfaces. */
:is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) :is(input, select, textarea) {
  color: var(--refined-ink);
  border-color: var(--refined-line);
  background: white;
  border-radius: 10px;
}
:is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) :is(input, textarea)::placeholder {
  color: #647079;
  opacity: 1;
}
:is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) :focus-visible {
  outline: 3px solid var(--refined-action);
  outline-offset: 4px;
}
:is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) ::selection {
  background: #dce7e3;
  color: var(--refined-ink);
}
:is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) [hidden] {
  display: none !important;
}
.portal-button {
  background: white;
  border-color: var(--refined-line);
  color: #385357;
  border-radius: 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 550;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.portal-button:hover {
  background: #f1f4f1;
  border-color: #a9bdb7;
}
.portal-button.primary,
.portal-cover-actions .portal-button:last-child,
.demo-mode .portal-cover-actions button:last-child {
  color: white;
  background: var(--refined-action);
  border-color: var(--refined-action);
}
.portal-button.primary:hover,
.portal-cover-actions .portal-button:last-child:hover,
.demo-mode .portal-cover-actions button:last-child:hover {
  background: var(--refined-action-hover);
  border-color: var(--refined-action-hover);
}
.portal-button.on-dark {
  color: #385357;
  border-color: #cddad3;
  background: white;
}
.portal-button.on-dark:hover {
  background: #f1f4f1;
}
.portal-button.small, .portal-title-actions .portal-button {
  font-size: 12px;
  min-height: 40px;
}
.portal-text-button, .portal-back, .portal-teacher-link {
  color: var(--refined-action);
}
.portal-text-button:hover, .portal-back:hover {
  color: var(--refined-action-hover);
}
.portal-eyebrow, .demo-kicker, .portal-chapter-number {
  color: var(--refined-warm-ink);
  font-size: 10px;
  letter-spacing: .12em;
}
.portal-tag, .portal-tag.on-dark, .demo-mode .portal-tag.on-dark,
.portal-tag.reported, .portal-tag.confirmed, .demo-badge {
  background: var(--refined-soft);
  color: #45605c;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.65;
}
.portal-tag.training {
  background: #f7eee7;
  color: #855132;
}
.portal-header, .demo-header {
  background: #ffffffed;
  border-color: var(--refined-line);
  box-shadow: none;
}
.portal-header { height: 76px; }
.portal-brand > span, .demo-brand > span {
  color: var(--refined-muted);
  border-color: var(--refined-line);
}
.portal-header nav > a,
.portal-account, .portal-account > span,
.demo-nav a {
  color: var(--refined-muted);
}
.portal-header nav > a.active, .portal-header nav > a:hover {
  color: var(--refined-action);
}
.portal-header nav > a.active:after {
  background: var(--refined-action);
}
.demo-nav a[aria-current=page] {
  color: var(--refined-action-hover);
  background: var(--refined-soft);
}
.portal-content, .demo-main {
  padding-top: 38px;
}
.portal-footer, .demo-footer {
  color: var(--refined-muted);
  border-color: var(--refined-line);
  font-size: 11px;
  letter-spacing: 0;
}
.portal-page-title h1, .portal-paper > h2, .portal-section-heading h2,
.portal-book-next h2, .demo-section-title h2,
.demo-plan h1, .demo-plan-card h2, .demo-review h1 {
  color: var(--refined-ink);
  font-weight: 600;
  letter-spacing: -.025em;
}
.portal-page-title p, .portal-subtle, .portal-small-note,
.portal-section-heading > span, .portal-section-heading > a,
.portal-empty p, .portal-book-next p, .demo-section-title p,
.demo-plan > p, .demo-plan-card > p {
  color: var(--refined-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* The cover is a quiet editorial surface, rather than a dark marketing banner. */
.portal-welcome, .portal-auth-story, .portal-book-cover,
.demo-mode .portal-book-cover, .demo-hero, .demo-review-head,
.portal-personal-intro, .portal-start-personal {
  color: var(--refined-ink);
  background: #eef2ee;
  background-image: none;
  border: 1px solid #dce4dc;
  border-radius: 20px;
  box-shadow: none;
}
.portal-welcome:after, .portal-auth-story:after {
  content: none;
}
.portal-welcome h2, .portal-auth-copy h1,
.portal-personal-intro h2, .portal-start-personal h2 {
  color: var(--refined-ink);
  font-size: clamp(27px, 2.7vw, 36px);
  letter-spacing: -.025em;
  font-weight: 600;
}
.portal-welcome p, .portal-auth-copy > p, .portal-auth-points,
.portal-personal-intro .portal-prose, .portal-personal-intro .portal-prose p,
.portal-start-personal p, .portal-auth-story > small,
.portal-cloud-overview .portal-bullets {
  color: var(--refined-muted);
}
.portal-welcome .portal-eyebrow, .portal-auth-copy .portal-eyebrow,
.portal-book-cover .portal-eyebrow, .portal-cloud-overview h3 {
  color: var(--refined-warm-ink);
}
.portal-cloud-overview { border-color: #d5dfd7; }
.portal-welcome-figure {
  border-color: #d5dfd7;
}
.portal-welcome-figure > strong { color: #4b6260; }
.portal-welcome-figure > span {
  border-color: #cfdcd4;
  color: var(--refined-action);
}
.portal-book-cover, .demo-mode .portal-book-cover {
  padding: 37px 42px;
  background: #eef2ee;
}
.portal-book-cover h1, .demo-mode .portal-book-cover h1 {
  color: var(--refined-ink);
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.025em;
}
.portal-book-cover > p, .demo-mode .portal-book-cover p,
.portal-cover-foot, .demo-mode .portal-cover-foot {
  color: var(--refined-muted);
  border-color: #d4dfd7;
  font-size: 13px;
}
.portal-cover-actions .portal-button, .demo-mode .portal-cover-actions button {
  color: var(--refined-action);
  background: white;
  border-color: #cfdbd4;
  min-height: 44px;
}
.portal-cover-actions .portal-button:hover, .demo-mode .portal-cover-actions button:hover {
  background: #f7f9f6;
  border-color: #aec2b7;
}
.portal-auth-form { background: var(--refined-paper); }
.portal-auth-form-inner > h2 { color: var(--refined-ink); }
.portal-auth-form-inner > p, .portal-auth-note,
.portal-auth-form label, .portal-auth-tabs button {
  color: var(--refined-muted);
}
.portal-auth-tabs button.active {
  color: var(--refined-action);
  border-color: var(--refined-action);
}

/* Cards use spacing and fine boundaries; hover never shifts the layout. */
.portal-project-card, .demo-project,
.portal-paper, .portal-book-reading, .portal-plan,
.portal-feedback, .portal-history-answer, .portal-personal-checks,
.demo-plan-card, .demo-overview article, .demo-review-answer,
.demo-history-row, .demo-metrics article, .portal-interviewer-card {
  border-color: var(--refined-line);
  background: white;
  border-radius: 16px;
  box-shadow: none;
}
.portal-project-card, .demo-project {
  padding: 28px;
  transition: border-color 160ms ease, background 160ms ease;
}
.portal-project-card:hover, .demo-project:hover {
  border-color: #afc1b7;
  background: #fdfefd;
  transform: none;
  box-shadow: none;
}
.portal-school-logo, .demo-logo {
  border-color: #e9eeea;
  border-radius: 12px;
}
.portal-project-card h2, .demo-project h3,
.portal-reading-question h4,
.portal-practice-project h3, .portal-personal-gaps article h3,
.portal-personal-checks article h3, .portal-plan h3,
.portal-interviewer-card h2,
.demo-review-answer h3 {
  color: var(--refined-ink);
  font-weight: 600;
}
.portal-project-card > a:hover h2 { color: var(--refined-action); }
.portal-project-school, .portal-project-degree,
.portal-project-format > span, .portal-project-format > strong,
.demo-project .demo-degree, .demo-project > p,
.demo-overview p, .demo-history-row p,
.demo-review-answer .demo-transcript {
  color: var(--refined-muted);
  font-size: 13px;
}
.portal-project-format {
  background: #f4f6f3;
  border-radius: 8px;
}
.portal-card-bottom { border-color: var(--refined-line); }
.portal-library-toolbar > span { color: var(--refined-muted); font-size: 12px; }
.portal-book-index { border-color: #d8e2da; }
.portal-chapter-link { color: var(--refined-muted); font-size: 13px; }
.portal-chapter-link > span { color: #677772; font-size: 10px; }
.portal-chapter-link:hover { color: var(--refined-action); }
.portal-book-reading { padding: 36px 42px; }
.portal-chapter { border-color: var(--refined-line); }
.portal-chapter h2 {
  color: var(--refined-ink);
  font-size: 24px;
  letter-spacing: -.02em;
}
.portal-chapter h3, .student-flow-steps h4, .student-arrangement-format > strong,
.student-preflight h3, .portal-index-next h3,
.demo-format-card h3, .demo-overview h3 {
  color: var(--refined-ink);
}
.portal-prose, .portal-prose p,
.portal-book-reading .portal-prose, .portal-book-reading .portal-prose p,
.portal-book-reading .portal-bullets,
.portal-plan .portal-prose, .portal-plan .portal-prose p,
.portal-feedback .portal-prose, .portal-feedback .portal-prose p,
.portal-feedback .portal-bullets, .portal-interviewer-card .portal-prose,
.portal-interviewer-card .portal-prose p, .portal-interviewer-card .portal-bullets {
  color: #40545e;
  font-size: 14px;
  line-height: 1.95;
}
.portal-chapter-intro {
  color: var(--refined-muted);
  border-left-color: #b5c8bc;
  font-size: 13px;
}
.portal-reading-question > span, .student-handbook .portal-reading-question > span,
.student-resource > span, .demo-overview span,
.demo-review-answer header {
  color: var(--refined-warm-ink);
  font-size: 11px;
}
.portal-reading-question details, .portal-reading-question details > .portal-prose,
.portal-rubric-improvement, .portal-index-next p,
.student-resource p, .student-knowledge-card p,
.student-flow-steps p, .student-arrangement-format p {
  color: var(--refined-muted);
  font-size: 13px;
  line-height: 1.9;
}
.portal-table-wrap { border-color: var(--refined-line); }
.portal-table-wrap th {
  background: #f1f4f0;
  color: #3f5657;
  font-size: 13px;
}
.portal-table-wrap td, .portal-book-reading td {
  color: #40545e;
  font-size: 13px;
}
.portal-table-wrap th, .portal-table-wrap td { border-color: #e4e9e4; }
.portal-table-wrap tbody tr:nth-child(even) { background: #fafbf9; }
.student-arrangement, .student-preparation-methods,
.student-knowledge-card > div, .student-preflight-checks,
.portal-protocol-preview, .portal-session-preflight,
.portal-person-direction, .portal-voice-preview,
.demo-voice-audition, .demo-prep-advice {
  background: #f1f4ef;
  border-color: #dce5d9;
  border-radius: 12px;
  color: #40545e;
}
.student-flow-steps > li > span {
  background: #e0e9e1;
  color: #3c6053;
  border-radius: 10px;
}
.student-flow-times span, .portal-protocol-preview h3,
.portal-protocol-preview li, .portal-protocol-preview li strong,
.portal-protocol-preview li span, .portal-protocol-preview > p,
.portal-voice-preview strong, .portal-voice-preview > details,
.portal-voice-preview > details p[lang],
.demo-prep-advice h3, .demo-service-note,
.demo-voice-audition p {
  color: #40545e;
}
.student-sample-notice, .student-plain-notice,
.portal-notice, .portal-reading-note, .demo-note {
  color: #6e523f;
  background: #f8f2eb;
  border-color: #ebe0d4;
  border-radius: 10px;
  font-size: 13px;
}
.portal-error, .demo-dialog-error { color: #944c3b; }
.student-preflight-icon {
  color: var(--refined-action);
  background: #e6ede6;
  border-radius: 20px;
}
.student-preflight-checks { color: #4d6265; }
.student-preflight-checks .done { color: #365e4b; }
.portal-checkbox, .demo-check, .demo-grid-two label,
.demo-option-line, .portal-modal label {
  color: var(--refined-muted);
  font-size: 13px;
}
.portal-checkbox input, .demo-option-line input, .demo-check input {
  accent-color: var(--refined-action);
}
.demo-check { border-color: #e4e9e3; }
.demo-check:has(input:checked) span { color: #64736b; }
.portal-feedback-heading h2, .portal-feedback-dimensions strong,
.portal-history-row strong, .portal-history-answer > summary,
.portal-feedback-evidence summary, .portal-feedback-evidence strong,
.portal-feedback-evidence blockquote, .portal-review-remaining p {
  color: #40545e;
}
.portal-feedback-dimensions > article, .portal-feedback-evidence {
  background: #f6f8f5;
  border-color: var(--refined-line);
}
.portal-feedback-note, .portal-history-row p { color: var(--refined-muted); }
.portal-feedback-score {
  background: #edf2ee;
  border-color: #dce5dc;
}
.portal-feedback-score strong, .demo-metrics strong { color: var(--refined-action); }
.portal-feedback-score span, .demo-metrics span { color: var(--refined-muted); }
.portal-history-icon {
  color: var(--refined-action);
  background: #edf2ee;
  border-color: var(--refined-line);
}

/* Fullscreen practice retains a single focal point and actual recording cues. */
.automatic-stage {
  --ae-ink: var(--refined-ink);
  --ae-muted: var(--refined-muted);
  --ae-accent: var(--refined-action);
  --ae-paper: var(--refined-paper);
  --ae-line: var(--refined-line);
  background: var(--refined-paper);
  padding-top: 26px;
}
.automatic-stage .ae-atmosphere { background: var(--refined-paper); }
.automatic-stage .ae-glow, .automatic-stage .ae-grain,
.automatic-stage .ae-light-line, .automatic-stage .ae-orbit {
  display: none;
}
.automatic-stage .ae-brand span {
  color: var(--refined-action);
  font-size: 10px;
  letter-spacing: .1em;
}
.automatic-stage .ae-brand strong { color: var(--refined-ink); font-size: 14px; }
.automatic-stage .ae-brand img { border: 1px solid #e7ece6; }
.automatic-stage .ae-progress span { letter-spacing: 0; }
.automatic-stage .ae-scene {
  min-height: 530px;
  padding: 48px 0 35px;
  max-width: 1040px;
}
.automatic-stage .ae-interviewer {
  width: 210px;
  height: 214px;
  margin: 0 0 36px;
}
.automatic-stage .ae-avatar.ae-mascot-avatar {
  width: 174px;
  height: 189px;
  transform: none;
  box-shadow: none;
}
.automatic-stage .ae-avatar-label {
  bottom: -16px;
  color: #506660;
  letter-spacing: .04em;
  font-size: 12px;
}
.automatic-stage .ae-state-label {
  font-size: 12px;
  letter-spacing: .035em;
  color: var(--refined-action);
  margin-bottom: 12px;
}
.automatic-stage .ae-conversation h1,
.automatic-stage .ae-start h1,
.automatic-stage .ae-pause h1,
.automatic-stage .ae-recovery h2 {
  font-size: clamp(24px, 2.35vw, 32px);
  font-weight: 550;
  letter-spacing: -.025em;
  line-height: 1.5;
}
.automatic-stage .ae-question {
  max-width: 780px;
  margin-top: 22px;
}
.automatic-stage .ae-question > span {
  color: var(--refined-muted);
  letter-spacing: .055em;
  font-size: 11px;
}
.automatic-stage .ae-question h2,
.demo-mode .automatic-stage .ae-question h2 {
  max-width: 780px;
  font-size: clamp(23px, 2.25vw, 30px);
  line-height: 1.58;
  font-weight: 450;
  letter-spacing: -.018em;
  color: var(--refined-ink);
}
.automatic-stage .ae-question-group{display:grid;gap:17px;margin:0;padding:0 0 0 25px;text-align:left;color:var(--refined-muted)}
.automatic-stage .ae-question-group li{padding-left:7px}
.automatic-stage .ae-question-group li::marker{font-size:13px;color:var(--refined-action);font-variant-numeric:tabular-nums}
.automatic-stage .ae-question-group h2,.demo-mode .automatic-stage .ae-question-group h2{font-size:clamp(19px,2vw,25px);line-height:1.52}
.automatic-stage .ae-clock {
  top: 34px;
  right: 0;
  padding: 12px 17px;
  background: #edf1ed;
  border: 1px solid #dce4dc;
  border-radius: 12px;
  gap: 3px;
  min-width: 95px;
}
.automatic-stage .ae-clock > strong {
  color: var(--refined-action);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.automatic-stage .ae-clock > span, .automatic-stage .ae-clock > small {
  color: var(--refined-muted);
  letter-spacing: 0;
  opacity: 1;
}
.automatic-stage .ae-clock-open > strong { font-size: 21px; }
.automatic-stage .ae-caption {
  border: 1px solid var(--refined-line);
  background: white;
  color: #40545e;
  border-radius: 12px;
  font-size: 14px;
}
.automatic-stage .ae-button {
  color: #385357;
  border-color: #ccd8d1;
  border-radius: 10px;
  background: white;
  letter-spacing: 0;
  box-shadow: none;
}
.automatic-stage .ae-button:hover {
  background: #edf2ed;
  border-color: #a9bfb2;
  transform: none;
}
.automatic-stage .ae-primary {
  color: white;
  background: var(--refined-action);
  border-color: var(--refined-action);
  min-height: 50px;
  padding: 13px 29px;
  box-shadow: none;
}
.automatic-stage .ae-primary:hover {
  background: var(--refined-action-hover);
  border-color: var(--refined-action-hover);
}
.automatic-stage .ae-quiet {
  color: var(--refined-muted);
  background: transparent;
  border-color: transparent;
}
.automatic-stage .ae-controls {
  color: var(--refined-muted);
  background: #f7f7f4f5;
  border-color: var(--refined-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.automatic-stage .ae-session-note { letter-spacing: 0; }
.automatic-stage .ae-start-options { margin-top: 26px; }
.automatic-stage .ae-start-options input { accent-color: var(--refined-action); }
.automatic-stage .ae-start .ae-permission-note {
  color: var(--refined-muted);
}
.automatic-stage .ae-voice-points {
  background: white;
  border-color: #d5dfd7;
  bottom: 0;
}
.automatic-stage .ae-voice-points i { background: var(--refined-action); }
.automatic-stage .ae-waiting-dots i { background: var(--refined-action); }
.automatic-stage .ae-fallback textarea {
  border-color: var(--refined-line);
  border-radius: 12px;
}
.coach-character {
  display:block;position:relative;width:100%;height:auto;aspect-ratio:1;
  flex-shrink:0;pointer-events:none;user-select:none;transform-origin:50% 82%;
}
.automatic-stage .ae-avatar .coach-character { margin-top:-1px; }
html[data-coach-motion-paused=true] .coach-character,
html[data-coach-motion-paused=true] .coach-character *,
[hidden] .coach-character,[hidden] .coach-character * {animation-play-state:paused!important}
.demo-mode #demo-root:fullscreen { background: var(--refined-paper); }
.demo-session-strip {
  background: #eef2ee;
  color: #446058;
  border-color: #d8e1d9;
  border-radius: 0 0 9px 9px;
  letter-spacing: 0;
}

/* Legacy practice layouts use the same surfaces without changing their states. */
.interview-experience, .interview-experience.ie-immersive {
  --ie-accent: var(--refined-action);
  --ie-orange: var(--refined-action);
  --ie-ink: var(--refined-ink);
  --ie-muted: var(--refined-muted);
  --ie-bg: var(--refined-paper);
  --ie-warm: var(--refined-paper);
  --ie-line: var(--refined-line);
  background: var(--refined-paper);
  color: var(--refined-ink);
}
.interview-experience .ie-atmosphere, .ie-immersive .ie-atmosphere {
  background: var(--refined-paper);
}
.interview-experience .ie-distant-star, .interview-experience .ie-scene-halo,
.interview-experience .ie-mascot-spark,
.interview-experience .ie-orbit-floor { display: none; }
.interview-experience .ie-question:before { content: none; }
.interview-experience .ie-question,
.ie-immersive .ie-question,
.ie-immersive .ie-clock-card,
.ie-immersive .ie-completion-hero,
.portal-live-question, .portal-interview-question {
  background: #eef2ee;
  color: var(--refined-ink);
  border: 1px solid #dce4dc;
  box-shadow: none;
  border-radius: 16px;
}
.interview-experience .ie-question h2, .ie-immersive .ie-question h2,
.portal-live-question h2, .portal-interview-question h2,
.ie-immersive .ie-completion-hero h1 {
  color: var(--refined-ink);
  font-weight: 550;
  letter-spacing: -.02em;
}
.ie-immersive .ie-clock-card:before { content: none; }
.interview-experience .ie-question-top > span,
.portal-live-speaker, .portal-interview-question > .portal-eyebrow {
  color: var(--refined-warm-ink);
}
.interview-experience .ie-question-top > strong,
.interview-experience .ie-question-translation,
.interview-experience .ie-question-controls > span,
.interview-experience .ie-question-controls .ie-button.quiet,
.portal-live-question .portal-text-button {
  color: var(--refined-muted);
}
.interview-experience .ie-question-controls {
  border-color: #d3dfd5;
}
.interview-experience .ie-question-controls .ie-button.quiet:hover {
  background: #e5ede5;
}
.portal-live-question > p, .portal-interview-question > p,
.portal-question-footer, .portal-live-speaker small,
.ie-immersive .ie-completion-hero > p {
  color: var(--refined-muted);
  border-color: #d5dfd7;
}
.ie-immersive .ie-button.primary {
  background: var(--refined-action);
  border-color: var(--refined-action);
  color: white;
  box-shadow: none;
}
.interview-experience .ie-button.primary:hover:not(:disabled) {
  color: white;
  background: var(--refined-action-hover);
  border-color: var(--refined-action-hover);
  transform: none;
  box-shadow: none;
}
.interview-experience .ie-button.primary:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}
.ie-immersive .ie-main-action {
  background: #ffffffed;
  border: 1px solid var(--refined-line);
  box-shadow: none;
  border-radius: 12px;
}

/* Dialogs stay visually light but keep a clear modal boundary. */
.portal-modal, .demo-dialog {
  background: white;
  color: var(--refined-ink);
  border: 1px solid var(--refined-line);
  border-radius: 18px;
  box-shadow: 0 24px 80px #2435451a;
}
.portal-modal-backdrop, .demo-dialog::backdrop {
  background: #2435454f;
  backdrop-filter: blur(4px);
}
.portal-modal > header h2, .demo-dialog-head h2 {
  color: var(--refined-ink);
  font-size: 23px;
  letter-spacing: -.02em;
}
.portal-modal-actions { border-color: var(--refined-line); }
.demo-dialog-close {
  color: #4f6763;
  background: #edf2ee;
  min-width: 40px;
  min-height: 40px;
}
.demo-mode { background: var(--refined-paper); color: var(--refined-ink); }
.demo-hero {
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 46px;
  padding: 42px;
}
.demo-hero h1 {
  color: var(--refined-ink);
  font-size: clamp(29px, 3vw, 40px);
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.4;
}
.demo-hero p { color: var(--refined-muted); font-size: 14px; }
.demo-hero-art {
  width: 220px;
  height: 235px;
  border-radius: 0;
  background: transparent;
}
.demo-hero-art > span {
  bottom: 0;
  background: transparent;
  border: 0;
  color: #506660;
  padding: 9px 0;
  font-size: 12px;
}
.demo-summary { color: var(--refined-muted); gap: 28px; }
.demo-summary strong { color: var(--refined-action); }
.demo-review-head { background: #eef2ee; }
.demo-review-head p { color: var(--refined-muted); }
.demo-review-answer details { color: var(--refined-action); }
.demo-empty {
  color: var(--refined-ink);
  background: white;
  border-color: var(--refined-line);
  border-radius: 16px;
}
.demo-empty p { color: var(--refined-muted); }
.portal-welcome h1 {font-size:clamp(27px,3vw,36px);line-height:1.45;font-weight:550;letter-spacing:-.025em;color:var(--refined-ink)}
.portal-welcome-character {width:150px;flex:none;align-self:center;margin-inline:35px 10px}
.automatic-stage:not(.ae-audio-only) .ae-conversation:has(.ae-question)>h1{display:none}
.automatic-stage:not(.ae-audio-only) .ae-conversation:has(.ae-question) .ae-question{margin-top:12px}
.deploy-shell{background:var(--refined-paper);color:var(--refined-ink)}.deploy-card{border-color:var(--refined-line);border-radius:22px;background:white;box-shadow:0 14px 44px #24354508}.deploy-card h1{color:var(--refined-ink);font-weight:550}.deploy-card p{color:var(--refined-muted)}.deploy-label{color:var(--refined-sage)}.deploy-mascot{background:none;width:150px;height:150px}.deploy-demo-link{background:var(--refined-action)}.deploy-demo-link:hover{background:var(--refined-action-hover)}
.demo-count { color: var(--refined-muted); }
#portal-toast, #demo-toast {
  color: white;
  background: #385357f5;
  box-shadow: 0 8px 28px #24354514;
  border-radius: 10px;
  font-size: 13px;
}

@media (max-width: 860px) {
  .portal-header { height: auto; min-height: 76px; }
  .portal-book-cover, .demo-mode .portal-book-cover { padding: 30px; }
  .portal-book-reading { padding: 28px; }
  .demo-hero { grid-template-columns: minmax(0,1fr) 165px; padding: 32px; gap: 22px; }
  .demo-hero-art { width: 165px; height: 190px; }
  .automatic-stage .ae-scene { min-height: 560px; padding: 72px 0 32px; }
  .automatic-stage .ae-interviewer { width: 190px; height: 195px; margin-bottom: 31px; }
  .automatic-stage .ae-avatar.ae-mascot-avatar { width: 159px; height: 174px; }
  .automatic-stage .ae-clock { top: 16px; padding: 9px 13px; }
}
@media (max-width: 620px) {
  .portal-welcome-character{display:none}
  .portal-content, .demo-main { padding-top: 26px; }
  .portal-welcome, .portal-book-cover, .demo-mode .portal-book-cover,
  .demo-hero { padding: 27px 24px; border-radius: 16px; }
  .demo-hero { display: block; }
  .demo-hero-art { display: none; }
  .demo-hero h1 { font-size: 29px; }
  .portal-project-card, .demo-project { padding: 25px; }
  .portal-book-reading { padding: 25px 22px; }
  .portal-chapter h2 { font-size: 22px; }
  .portal-book-cover h1, .demo-mode .portal-book-cover h1 { font-size: 27px; }
  .portal-cover-actions .portal-button, .demo-mode .portal-cover-actions button {
    font-size: 12px; min-height: 44px;
  }
  .portal-book-cover > p, .demo-mode .portal-book-cover p { font-size: 13px; }
  .portal-cover-foot { font-size: 12px; }
  .portal-chapter-link { font-size: 12px; }
  .portal-book-reading .portal-prose, .portal-book-reading .portal-prose p,
  .portal-book-reading .portal-bullets { font-size: 14px; }
  .portal-modal, .demo-dialog { border-radius: 16px; }
  .demo-dialog-head h2, .portal-modal > header h2 { font-size: 21px; }
  :is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) :is(input, select, textarea) {
    font-size: 16px;
  }
  .automatic-stage .ae-scene { min-height: 530px; padding-top: 67px; }
  .automatic-stage .ae-interviewer { width: 176px; height: 182px; margin-bottom: 30px; }
  .automatic-stage .ae-avatar.ae-mascot-avatar { width: 146px; height: 160px; }
  .automatic-stage .ae-avatar-label { font-size: 11px; bottom: -13px; }
  .automatic-stage .ae-conversation h1, .automatic-stage .ae-start h1,
  .automatic-stage .ae-pause h1, .automatic-stage .ae-recovery h2 { font-size: 24px; }
  .automatic-stage .ae-question h2, .demo-mode .automatic-stage .ae-question h2 {
    font-size: 23px; line-height: 1.55;
  }
  .automatic-stage .ae-clock { min-width: 82px; }
  .automatic-stage .ae-clock > strong { font-size: 22px; }
  .automatic-stage .ae-controls .ae-button { font-size: 11px; padding-inline: 10px; }
  .automatic-stage .ae-session-note { font-size: 10px; }
}
@media (max-height: 820px) and (min-width: 861px) {
  .automatic-stage .ae-scene { min-height: 470px; padding-top: 25px; }
  .automatic-stage .ae-interviewer { width: 176px; height: 183px; margin-bottom: 28px; }
  .automatic-stage .ae-avatar.ae-mascot-avatar { width: 150px; height: 164px; }
  .automatic-stage .ae-clock { top: 20px; }
  .automatic-stage:has(.ae-fallback) .ae-interviewer { width: 125px; height: 133px; margin-bottom: 21px; }
  .automatic-stage:has(.ae-fallback) .ae-avatar.ae-mascot-avatar { width: 108px; height: 118px; }
  .automatic-stage:has(.ae-fallback) .ae-scene { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) *,
  :is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) *::before,
  :is(#portal-app, #portal-modal, #demo-root, #demo-dialog-root) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .coach-character { transform: none !important; }
}

/* Text and written stages keep the submission area clear of the footer. */
.automatic-stage:has(.ae-fallback) .ae-controls{position:relative}
@media(max-width:620px){.automatic-stage:has(.ae-fallback) .ae-interviewer{width:132px;height:139px;margin-bottom:25px}.automatic-stage:has(.ae-fallback) .ae-avatar.ae-mascot-avatar{width:114px;height:125px}.automatic-stage:has(.ae-fallback) .ae-scene{padding-top:54px}.automatic-stage .ae-written textarea{height:140px;min-height:120px;max-height:30dvh}}

.app-shell .btn.primary{box-shadow:none}.app-shell .nav-item.active{background:var(--refined-soft);color:var(--refined-action)}.app-shell .nav-item.active .nav-number{background:#dce7e3;color:var(--refined-action)}
.written-practice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:24px 0}.written-practice-card{padding:26px;border:1px solid var(--refined-line);border-radius:16px;background:#f8faf7}.written-practice-card>span{font-size:10px;letter-spacing:1.4px;color:#68817b}.written-practice-card h3{margin:14px 0}.written-practice-card p{font-size:14px;line-height:1.8}.written-practice-card .portal-button{margin-top:12px}
.automatic-stage.ae-written-stage .ae-scene{padding:90px 48px 32px;min-height:calc(100dvh - 160px);justify-content:flex-start}.automatic-stage.ae-written-stage .ae-interviewer{position:absolute;left:22px;top:100px;width:88px;height:100px;margin:0;opacity:.8}.automatic-stage.ae-written-stage .ae-avatar.ae-mascot-avatar{width:78px;height:86px}.automatic-stage.ae-written-stage .ae-avatar-label,.automatic-stage.ae-written-stage .ae-voice-points{display:none}.automatic-stage.ae-written-stage .ae-conversation{max-width:920px;width:100%;text-align:left}.automatic-stage.ae-written-stage .ae-conversation h1{font-size:25px;margin-bottom:22px}.automatic-stage.ae-written-stage .ae-question{max-width:none;margin:0 0 20px;text-align:left}.automatic-stage.ae-written-stage .ae-question h2{font-size:22px;line-height:1.65}.automatic-stage.ae-written-stage .ae-fallback.ae-written{max-width:none;width:100%;margin-top:14px;gap:12px}.automatic-stage.ae-written-stage .ae-written textarea{height:clamp(240px,34dvh,480px);min-height:220px;max-height:none;font:16px/1.85 'Segoe UI',sans-serif;resize:vertical;text-align:left}.ae-writing-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;color:#5e716b;font-size:12px}.ae-writing-heading label{font-size:14px;font-weight:600}.automatic-stage.ae-written-stage .ae-status-detail{text-align:left;font-size:13px}
/* Written tasks need an unobstructed question area; the animated interviewer stays in spoken practice. */
.automatic-stage.ae-written-stage .ae-interviewer{display:none}
@media(max-width:860px){.automatic-stage.ae-written-stage .ae-scene{padding:90px 22px 28px}.automatic-stage.ae-written-stage .ae-question h2{font-size:19px}.automatic-stage.ae-written-stage .ae-written textarea{height:34dvh;min-height:220px}}