/* Fanke · orange, ink and clear glass. Material is reserved for short surfaces;
   long-form reading stays opaque. No bitmap textures or animated blur. */
:root {
  --fk-ink: #202126;
  --fk-muted: #606672;
  --fk-brand: #f05a32;
  --fk-orange: #cf3f20;
  --fk-orange-ink: #b33921;
  --fk-orange-hover: #b9341b;
  --fk-teal: var(--fk-orange); /* Compatibility for earlier action tokens. */
  --fk-line: #dce1e8;
  --fk-glass: rgba(255, 255, 255, .84);
  --fk-shadow: 0 8px 30px rgba(26, 31, 43, .045), inset 0 1px 0 rgba(255, 255, 255, .95);
  --refined-paper: #f5f6f9;
  --refined-surface: #ffffff;
  --refined-ink: var(--fk-ink);
  --refined-muted: var(--fk-muted);
  --refined-action: var(--fk-orange);
  --refined-action-hover: var(--fk-orange-hover);
  --refined-warm: var(--fk-orange);
  --refined-warm-ink: #ba3c21;
  --refined-line: var(--fk-line);
  --refined-soft: #f0f2f6;
  --accent: var(--fk-orange);
  --orange: var(--fk-orange);
  --orange-dark: var(--fk-orange-hover);
  --ink: var(--fk-ink);
  --muted: var(--fk-muted);
  --line: var(--fk-line);
  background: #f5f6f9;
  color: var(--fk-ink);
}
body, body.demo-mode {
  background: radial-gradient(ellipse 65% 480px at 100% 0, #f05a320a 0, transparent 76%),
    radial-gradient(ellipse 48% 520px at 0 8%, #e8ecf640 0, transparent 78%),
    #f5f6f9;
  color: var(--fk-ink);
  min-height: 100vh;
}
/* The edge highlight remains visible with backdrop filtering unavailable. */
.portal-header, .demo-header, .topbar, .sidebar {
  background: rgba(253, 254, 255, .9);
  border-color: rgba(156, 166, 184, .25);
  box-shadow: 0 3px 20px #42465204, inset 0 -1px 0 #ffffffc9;
}
.portal-header, .demo-header { position: sticky; top: 0; z-index: 20; }
.demo-header { padding-block: 18px; }
.demo-nav { gap: 5px; padding: 4px; border: 1px solid #d5d8e1; border-radius: 999px; background: #ffffff75; }
.demo-nav a { border-radius: 999px; color: var(--fk-muted); transition: color 160ms ease, background 160ms ease; }
.demo-nav a:hover { color: var(--fk-ink); background: #ffffffb8; }
.demo-nav a[aria-current=page] { color: var(--fk-ink); background: white; box-shadow: 0 2px 7px #2021260a, inset 0 0 0 1px #dde0e7; }
.demo-nav .demo-login-link { color: var(--fk-orange-ink) !important; background: #fff1ec; border-color: #f3c9bc; }
.portal-header nav>a.active { color: var(--fk-orange); }
.portal-header nav>a.active:after { background: var(--fk-orange); }
.nav-item.active { color: var(--fk-orange-ink); background: #fbeeea; }
.nav-item.active:before { background: var(--fk-orange); }
.demo-main, .portal-content { padding-top: 34px; }
.demo-main { max-width: 1240px; }
.demo-skip-link { z-index: 30; }

/* White material, an orange edge and fine geometry give the opening its identity. */
.demo-hero, .portal-welcome, .portal-auth-story,
.portal-book-cover, .demo-mode .portal-book-cover, .demo-review-head,
.portal-personal-intro, .portal-start-personal, .hero {
  color: var(--fk-ink);
  border: 1px solid #ffffff;
  background: radial-gradient(ellipse at 100% 0, #f05a3212, transparent 52%),
    linear-gradient(118deg, #ffffff 4%, #fafbfe 63%, #fff6f2);
  box-shadow: 0 14px 48px #20212606, inset 0 0 0 1px #dce1e87d, inset 0 2px 0 #fff;
  border-radius: 28px;
}
.demo-hero { position: relative; isolation: isolate; min-height: 300px; padding: 46px 48px; gap: 42px; grid-template-columns: minmax(0,1fr) 224px; }
.demo-hero-copy { position: relative; z-index: 1; min-width: 0; }
.demo-hero h1 { font-size: clamp(30px, 3.2vw, 43px); font-weight: 650; line-height: 1.38; letter-spacing: -.045em; margin-block: 18px 13px; text-wrap: balance; }
.demo-hero h1 > span { display: block; }
.demo-hero h1 > span:last-child { color: var(--fk-orange); }
.demo-hero p { max-width: 640px; }
.demo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.demo-hero-actions .portal-button { min-height: 46px; margin-top: 0; }
.demo-hero-actions .demo-studio-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 10px 16px; border: 1px solid #dce1e8; border-radius: 13px; background: #ffffffb8; color: var(--fk-ink); font-size: 13px; text-decoration: none; }
.demo-hero-actions .demo-studio-link:hover { color: var(--fk-orange); border-color: var(--fk-brand); background: #fff; }
.demo-studio-link > span { color: var(--fk-orange); transition: transform 160ms ease; }
.demo-studio-link:hover > span { transform: translate(2px, -2px); }
.demo-studio-label { display: flex; align-items: center; gap: 8px; color: var(--fk-muted); font: 10px/1.6 ui-monospace, monospace; letter-spacing: .12em; }
.demo-studio-label:before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--fk-brand); }
.demo-journey { display: flex; flex-wrap: wrap; gap: 14px 24px; list-style: none; margin: 28px 0 0; padding: 0; color: var(--fk-muted); font-size: 12px; }
.demo-journey li { display: flex; align-items: center; gap: 8px; }
.demo-journey li > span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #e6d6d0; border-radius: 50%; background: #fff; color: var(--fk-orange); font-size: 10px; font-variant-numeric: tabular-nums; }
.demo-preview-intro { color: #555a68 !important; }
.demo-mode .demo-review-answer details { color: var(--fk-muted); font-size: 14px; line-height: 1.85; }
.demo-mode .demo-review-answer details > summary { color: var(--fk-orange-ink); min-height: 44px; padding: 10px 0; cursor: pointer; }
.demo-mode .demo-review-answer details > ul { padding-left: 20px; margin: 8px 0; }
.demo-kicker, .portal-eyebrow, .portal-chapter-number, .eyebrow { color: #ba3c21; letter-spacing: .15em; }
.demo-hero-art { position: relative; width: 224px; height: 230px; isolation: isolate; }
.demo-hero-art:before {
  content: ''; position: absolute; inset: 12px 0 5px; z-index: -1; border-radius: 35%;
  background: radial-gradient(circle at 33% 20%, #fff 0, #ffffffde 35%, #ffe8deb8 80%);
  border: 1px solid #fff; box-shadow: 0 18px 40px #f05a3214, inset 0 0 0 6px #ffffff7a, 0 0 0 1px #f05a3226;
  transform: rotate(-9deg); pointer-events: none;
}
.demo-hero-art:after { content: ''; position: absolute; inset: -16px; z-index: -2; background-image: linear-gradient(#20212608 1px, transparent 1px), linear-gradient(90deg, #20212608 1px, transparent 1px); background-size: 26px 26px; border-radius: 50%; pointer-events: none; }
.demo-hero-art .coach-character { width: 174px; }
.portal-book-cover, .demo-mode .portal-book-cover { padding: 40px 44px; }
.portal-book-cover h1, .demo-mode .portal-book-cover h1 { font-weight: 600; color: var(--fk-ink); }
.portal-book-cover > p, .demo-mode .portal-book-cover p { color: #525765; }
.portal-cover-foot { border-color: #c6c8d073; }
.portal-school-logo, .demo-logo { background: #fff; border: 1px solid #fff; border-radius: 15px; box-shadow: 0 3px 13px #3c404b0c, inset 0 0 0 1px #dddfe6; }
.hero h2, .hero p { color: var(--fk-ink); }
.hero p { color: var(--fk-muted); }
.hero:before, .hero:after { border-color: #898f9f14; pointer-events: none; }

/* The deeper orange supports white text; the logo orange stays on accents. */
.portal-button, .btn, .automatic-stage .ae-button {
  color: #404450; background: #ffffffdf; border: 1px solid #ccd0da;
  border-radius: 13px; box-shadow: inset 0 1px 0 #fff;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.portal-button:hover, .btn:hover, .automatic-stage .ae-button:hover { background: #fff; border-color: #a7acb8; box-shadow: 0 4px 14px #4e53610b; }
.portal-button.primary, .portal-cover-actions .portal-button:last-child,
.demo-mode .portal-cover-actions button:last-child, .btn.primary,
.automatic-stage .ae-primary, .deploy-demo-link {
  color: #fff; background: linear-gradient(160deg, #cf3f20, #c83c21);
  border: 1px solid #bd391e; box-shadow: 0 5px 13px #a8492424, inset 0 1px 0 #ffffff38;
}
.portal-button.primary:hover, .portal-cover-actions .portal-button:last-child:hover,
.demo-mode .portal-cover-actions button:last-child:hover, .btn.primary:hover,
.automatic-stage .ae-primary:hover, .deploy-demo-link:hover {
  color: #fff; background: #b9341b; border-color: #a93017;
  box-shadow: 0 7px 18px #a849242a, inset 0 1px 0 #ffffff29;
}
.portal-button:active:not(:disabled), .btn:active:not(:disabled), .automatic-stage .ae-button:active:not(:disabled) { transform: translateY(1px); }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #cf3f20; outline-offset: 4px; }
.portal-text-button, .portal-back, .portal-teacher-link { color: #cf3f20; }
.portal-tag, .portal-tag.on-dark, .demo-mode .portal-tag.on-dark,
.portal-tag.reported, .portal-tag.confirmed, .demo-badge { color: #464a56; background: #eaebef; border: 1px solid #d8dbe3; border-radius: 7px; }
.portal-tag.training { color: #944b30; background: #fbebe7; border-color: #f0d5cd; }
.portal-tag.confirmed { color: #2d654d; background: #e5f2e8; border-color: #cce2d2; }
.portal-tag.reported { color: #385b79; background: #eaf0f6; border-color: #d6e1ed; }
.demo-project-region { color: #585e6d; }

/* Cards have a solid-enough base for text and a small, consistent glass edge. */
.portal-project-card, .demo-project, .portal-paper,
.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, .panel, .metric, .quick-card,
.student-card, .book-card, .program-card, .cloud-workspace-card {
  background: linear-gradient(145deg, #ffffffed, #ffffffc9);
  border: 1px solid #ffffff; border-radius: 21px;
  box-shadow: var(--fk-shadow), 0 0 0 1px #b1b5bf26;
}
.portal-project-card, .demo-project { padding: 27px; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.portal-project-card:hover, .demo-project:hover {
  background: #fff; border-color: #f05a3266; transform: translateY(-2px);
  box-shadow: 0 12px 28px #2021260a, inset 0 1px 0 #fff;
}
.portal-project-card:focus-within, .demo-project:focus-within { border-color: var(--fk-brand); }
.demo-project h3 { font-size: 19px; letter-spacing: -.02em; }
.demo-project .demo-degree { color: #5b6171; font-size: 12px; flex: none; }
.demo-project > p { color: #545968; }
.demo-project-tags { margin-bottom: 16px; }
.demo-card-format { padding: 13px 15px; border: 1px solid #dcdfe6; border-radius: 12px; background: linear-gradient(120deg, #eff0f3, #f7f8fa); }
.demo-card-format > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 7px; }
.demo-card-label { color: var(--fk-muted); font-size: 11px; }
.demo-format-state { color: #4d515e; font-size: 10px; line-height: 1.6; }
.demo-format-state:before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.demo-card-format strong { display: block; color: #3c3f49; font-size: 14px; font-weight: 550; line-height: 1.65; overflow-wrap: anywhere; }
.demo-card-format[data-format-state=current] { border-color: #f3d2c8; background: linear-gradient(120deg, #fff1ec, #fff9f6); }
.demo-card-format[data-format-state=current] :is(strong,.demo-format-state) { color: #b33921; }
.demo-card-format[data-format-state=missing], .demo-card-format[data-format-state=needs_review] { border-style: dashed; background: #f6f6f8; }
.demo-card-format[data-format-state=missing] :is(strong,.demo-format-state), .demo-card-format[data-format-state=needs_review] :is(strong,.demo-format-state) { color: var(--fk-muted); }
.demo-project > .demo-card-focus { margin: 16px 0 20px; font-size: 13px; }
.demo-project-actions { gap: 8px; padding-top: 15px; border-top: 1px solid #dee0e74f; }
.demo-project-actions .portal-button { font-size: 12px; }
.demo-project-actions .portal-button.primary { flex: 1; }
.demo-project-actions a { justify-content: space-between; }
.demo-project h3, .demo-project .demo-degree { overflow-wrap: anywhere; }
.demo-section-title h2 { color: var(--fk-ink); }
.demo-catalog-meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; }
.demo-catalog-meta button { min-height: 36px; padding: 6px 11px; font-size: 12px; background: #ffffffb8; }
.demo-results-count, .demo-preview-access { color: var(--fk-muted); font-size: 12px; }
.demo-catalog-empty { grid-column: 1 / -1; text-align: center; padding: 42px 24px; border: 1px dashed #c3c6cf; border-radius: 21px; background: #ffffffb8; }
.demo-catalog-empty h3 { margin: 12px 0 8px; font-size: 21px; }
.demo-catalog-empty p { color: var(--fk-muted); font-size: 14px; }
.demo-catalog-empty button { margin-top: 20px; }
.demo-catalog { gap: 21px; }
.demo-catalog-toolbar {
  padding: 12px; background: #ffffff94; border: 1px solid #fff; border-radius: 19px;
  box-shadow: inset 0 0 0 1px #cbcfda4d, 0 5px 20px #40444f04;
}
.demo-catalog-toolbar input, .demo-catalog-toolbar select,
:is(#portal-app,#portal-modal,#demo-root,#demo-dialog-root) :is(input,select,textarea) {
  color: #3e424d; border-color: #d4d7e0; background: #fffffff2; border-radius: 11px;
}
.demo-catalog-toolbar input:focus, .demo-catalog-toolbar select:focus { border-color: #cf3f20; box-shadow: 0 0 0 3px #f05a321a; }
.portal-project-format { background: #eff0f3; border: 1px solid #dee0e7; }
.portal-book-index { top: var(--fk-reading-offset,108px); border: 1px solid #ffffff; border-radius: 17px; background: #ffffff85; padding: 18px 12px; box-shadow: inset 0 0 0 1px #c6cad64a; }
.portal-chapter-link { padding: 11px 12px; border-radius: 9px; }
.portal-chapter-link:hover { background: #fff; color: #cf3f20; }
.portal-chapter-link[aria-current=location] { color: var(--fk-orange-ink); background: #fff1ec; box-shadow: inset 0 0 0 1px #f3d6cd; }
.portal-chapter-link[aria-current=location]>span { color: var(--fk-orange-ink); }
.portal-book-reading { background: #fffffff7; border: 1px solid #fff; border-radius: 23px; box-shadow: 0 8px 35px #40444f05, 0 0 0 1px #c2c5ce48; }
.portal-chapter { border-color: #dcdee5; scroll-margin-top: var(--fk-reading-offset,111px); }
.demo-mode .student-handbook:before { content: none; }
.portal-chapter h2 { letter-spacing: -.035em; }
.portal-chapter-intro { border-left: 3px solid var(--fk-brand); color: #555a69; }
.portal-reading-question { border-color: #e0e3e9; }
.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: linear-gradient(125deg, #f2f3f5, #f7f7f9); border: 1px solid #d9dce4; border-radius: 16px;
}
.student-flow-steps > li > span { background: #fff1ec; color: var(--fk-orange-ink); box-shadow: inset 0 1px 0 #fff; }
.student-sample-notice, .student-plain-notice, .portal-notice, .portal-reading-note, .demo-note { color: #75503a; background: #fbeeea; border-color: #efd2ca; border-radius: 13px; }
.portal-table-wrap th { background: #ecedf1; color: #424651; }
.portal-table-wrap tbody tr:nth-child(even) { background: #f7f7f9; }

/* The stage is calm and continuous. Its backdrop is static, never a blur loop. */
.automatic-stage, .demo-mode #demo-root:fullscreen { --ae-paper: var(--refined-paper); --ae-ink: var(--fk-ink); --ae-muted: var(--fk-muted); --ae-accent: var(--fk-orange); --ae-line: var(--fk-line); background: #f5f6f9; }
.automatic-stage .ae-atmosphere {
  background: radial-gradient(ellipse 58% 65% at 20% 20%, #e9edf570 0, transparent 80%),
    radial-gradient(ellipse 50% 65% at 98% 22%, #f05a320c 0, transparent 78%), #f9fafc;
}
.automatic-stage .ae-header { border-bottom: 1px solid #c6c8d04a; padding-bottom: 17px; }
.automatic-stage .ae-state-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid #d6d9e1; border-radius: 999px; background: #ffffffb8; color: #484c58; font-size: 11px; }
.automatic-stage .ae-state-label:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.automatic-stage.ae-recording .ae-state-label { color: var(--fk-orange-ink); background: #fff1ec; border-color: #f3c9bc; }
.automatic-stage .ae-clock { background: #ffffffb8; border: 1px solid #fff; border-radius: 16px; box-shadow: 0 4px 20px #42465108, inset 0 0 0 1px #ced2dc4d; }
.automatic-stage .ae-clock > strong { color: #cf3f20; }
.automatic-stage .ae-interviewer { position: relative; isolation: isolate; }
.automatic-stage .ae-interviewer:before { content: ''; position: absolute; z-index: -1; inset: 2px 6px 16px; border-radius: 50%; background: radial-gradient(circle at 35% 18%, #fff, #ffffff96 60%, #e6e8eda3); border: 1px solid #fff; box-shadow: 0 10px 30px #595f6e0a, inset 0 0 0 6px #ffffff40; pointer-events: none; }
.automatic-stage .ae-avatar-label { color: #4c515e; }
.automatic-stage .ae-question h2, .demo-mode .automatic-stage .ae-question h2 { color: #202126; }
.automatic-stage .ae-caption { background: #ffffffdf; border: 1px solid #d8dbe3; border-radius: 15px; color: #4b505d; }
.automatic-stage .ae-controls { background: #f8f9fae8; border-color: #d5d8e1; border-radius: 18px 18px 0 0; padding-inline: 12px; }
.automatic-stage .ae-quiet { background: transparent; border-color: transparent; box-shadow: none; }
.automatic-stage .ae-quiet:hover { background: #ebecf0; border-color: transparent; }
.demo-session-strip { color: #484d5a; background: #f9fafbe8; border-color: #d8dbe3; }
.automatic-stage .ae-fallback textarea { background: #ffffffed; border-color: #c9cdd8; box-shadow: inset 0 2px 5px #42465204; }
.portal-modal, .demo-dialog, .modal, .deploy-card { background: #fdfdfef5; border: 1px solid #fff; border-radius: 25px; box-shadow: 0 28px 90px #2d303724, inset 0 0 0 1px #caced94d; }
.portal-modal-backdrop, .demo-dialog::backdrop, .modal-backdrop { background: #2e313854; }
.portal-auth-form, .deploy-shell { background: transparent; }
.cloud-auth { border: 1px solid #fff; box-shadow: 0 20px 60px #4246510a, inset 0 1px 0 #fff; }
.cloud-auth-art { background: radial-gradient(ellipse at 100% 0, #f05a3214, transparent 65%), linear-gradient(135deg,#fff,#f3f5fa); }
.portal-person-monogram, .portal-live-avatar { color: #464a56; background: #e7e9ee; border-color: #d6d9e2; }
.demo-dialog-close { background: #ebecf0; color: #464a56; border: 1px solid #dadde4; }
.demo-dialog-actions { position: sticky; bottom: -1px; z-index: 2; padding: 16px 0 2px; background: #fdfdfef5; border-top: 1px solid #dddfe6; }
.ai-coach-launcher { box-shadow: 0 8px 25px #42465119, inset 0 1px 0 #ffffff70; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portal-header, .demo-header, .topbar, .sidebar { background: #fcfcfdab; -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
  .portal-book-index, .demo-catalog-toolbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .portal-modal, .demo-dialog, .modal { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
@media (max-width: 860px) {
  .demo-hero { padding: 33px; grid-template-columns: minmax(0,1fr) 170px; gap: 22px; min-height: 270px; }
  .demo-hero-art { width: 170px; height: 200px; }
  .demo-hero-art .coach-character { width: 145px; }
  .portal-book-cover, .demo-mode .portal-book-cover { padding: 30px; }
  .demo-nav { flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .demo-main, .portal-content { padding-top: 22px; }
  .demo-header { padding-block: 15px; gap: 12px; }
  .demo-nav { padding: 3px; gap: 0; }
  .demo-nav a { padding: 9px 11px; }
  .portal-button, .portal-button.small, .portal-text-button, .portal-chapter-link,
  .demo-nav a, .demo-dialog-close { min-height: 44px; }
  .demo-dialog-close { min-width: 44px; }
  .demo-hero { display: block; min-height: 0; padding: 30px 25px; border-radius: 23px; }
  .demo-hero h1 { font-size: 29px; }
  .demo-hero-art { display: none; }
  .demo-catalog-toolbar { padding: 10px; gap: 9px; border-radius: 16px; }
  .demo-catalog-toolbar input, .demo-catalog-toolbar select { font-size: 16px; }
  .portal-project-card, .demo-project { padding: 24px; }
  .portal-book-cover, .demo-mode .portal-book-cover { padding: 27px 24px; border-radius: 23px; }
  .portal-book-reading { border-radius: 19px; }
  .portal-book-index { padding: 7px; }
  .portal-chapter-link { padding: 9px; }
  .automatic-stage .ae-controls { padding-inline: 2px; }
  .automatic-stage .ae-header { padding-bottom: 12px; }
  .portal-modal, .demo-dialog, .modal { border-radius: 21px; }
}
@media (hover: none) { .portal-project-card:hover, .demo-project:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .demo-nav a, .portal-project-card, .demo-project, .portal-button, .btn, .automatic-stage .ae-button { transition: none; }
  .portal-project-card:hover, .demo-project:hover, .portal-button:active:not(:disabled), .btn:active:not(:disabled), .automatic-stage .ae-button:active:not(:disabled) { transform: none; }
  .demo-studio-link > span, .demo-studio-link:hover > span { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .portal-header, .demo-header, .topbar, .sidebar, .portal-book-index, .demo-catalog-toolbar,
  .portal-modal, .demo-dialog, .modal, .cloud-header, .cloud-sidebar, .cloud-feature-grid article { background: #fafbfc; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  body, body.demo-mode { background: white; }
  .portal-book-reading, .portal-book-cover, .demo-mode .portal-book-cover { background: white; box-shadow: none; }
  .portal-header, .demo-header, .portal-book-index { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Device checks stay outside the interview, with distinct sound / ASR states. */
.demo-device-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.demo-device-checks .demo-voice-audition { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; margin: 0; padding: 18px; border-color: #dde0e7; background: rgba(255,255,255,.82); }
.demo-device-checks .demo-voice-audition > button { align-self: flex-start; min-height: 44px; margin-top: auto; }
.demo-device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-device-actions button { min-height: 44px; }
.demo-device-checks p { line-height: 1.7; overflow-wrap: anywhere; }
#demo-recognition-check-phrase { color: #4c505d; font-size: 13px; }
#demo-recognition-check-transcript { max-height: 140px; overflow: auto; margin: 0; padding: 11px 13px; border: 1px solid #dadde4; border-radius: 11px; background: #f2f3f5; color: #383b45; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-device-checks [hidden] { display: none; }
.demo-setup-overview { padding: 17px 18px; border: 1px solid #d6d9e1; border-radius: 15px; background: linear-gradient(120deg,#eff0f4,#fafafb); margin: 18px 0; }
.demo-setup-overview > div { display: flex; align-items: center; justify-content: space-between; gap: 8px 15px; flex-wrap: wrap; }
.demo-setup-overview strong { color: var(--fk-ink); font-size: 14px; }
.demo-setup-overview > div > span, .demo-setup-overview > p { color: var(--fk-muted); font-size: 12px; }
.demo-setup-overview > p { margin-top: 8px; }
.demo-setup-flow { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8dbe3; color: #404450; font-size: 12px; }
.demo-setup-flow > summary { cursor: pointer; min-height: 28px; line-height: 1.8; }
.demo-setup-flow .demo-flow-summary { background: #ffffffa8; color: var(--fk-muted); border-color: #d8dbe3; }
#portal-recognition-check { grid-template-columns: minmax(0,1fr); gap: 12px; }
#portal-recognition-check :is(p,pre) { overflow-wrap: anywhere; }
#portal-recognition-check-transcript { white-space: pre-wrap; padding: 12px; margin: 0; border: 1px solid #d8dbe3; border-radius: 10px; background: #fff; color: var(--fk-ink); font-size: 13px; line-height: 1.7; max-height: 150px; overflow: auto; }
#portal-recognition-check [hidden] { display: none; }
@media (max-width: 600px) { .demo-device-checks { grid-template-columns: minmax(0, 1fr); } }

/* Recovery is a quiet, readable glass surface. The warm edge marks an action
   awaiting confirmation; submitted answers and interrupted drafts stay distinct. */
.automatic-stage .ae-end-recovery,
.demo-interrupted-draft, .portal-interrupted-draft, .portal-end-confirm {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #fff;
  background: linear-gradient(135deg, #fffffff5, #f9f9faed);
  border-radius: 21px;
  box-shadow: 0 10px 32px #3e424d09, inset 0 1px 0 #fff, 0 0 0 1px #c5c8d04d;
  overflow-wrap: anywhere;
}
.automatic-stage .ae-end-recovery {
  align-items: stretch;
  width: 100%;
  max-width: 740px;
  padding: clamp(20px, 3vw, 32px);
  margin: 10px auto 20px;
  border-top: 3px solid #c9cdd8;
  text-align: left;
}
.automatic-stage .ae-end-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  margin-bottom: 12px;
  border: 1px solid #edcec5;
  border-radius: 999px;
  background: #fbeeeb;
  color: #964c30;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
}
.automatic-stage .ae-end-recovery > h2 {
  margin: 0;
  color: #33363f;
  font-size: clamp(21px, 2.7vw, 28px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.automatic-stage .ae-end-recovery > p {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  color: #555a68;
  font-size: 13px;
  line-height: 1.85;
  text-align: left;
}
.automatic-stage .ae-end-recovery > .ae-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 22px 0 16px;
}
.automatic-stage .ae-end-actions .ae-button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
}
.automatic-stage .ae-end-actions .ae-quiet {
  border: 1px solid #d8dae2;
  background: #f0f2f4;
  color: #434753;
}
.automatic-stage .ae-end-recovery > .ae-end-pending {
  padding: 12px 14px;
  border: 1px solid #d7dae2;
  border-left: 3px solid #9398a7;
  border-radius: 12px;
  background: #f0f1f4;
  color: #434752;
}
.automatic-stage .ae-end-recovery > small {
  display: block;
  margin-top: 4px;
  color: #606676;
  font-size: 11px;
  line-height: 1.8;
}
.automatic-stage .ae-end-draft-preview {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 18px 0 0;
  border: 1px solid #dadde5;
  border-radius: 13px;
  background: #fcfcfc;
  text-align: left;
}
.automatic-stage .ae-end-draft-preview > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 14px;
  color: #484d59;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  cursor: pointer;
}
.automatic-stage .ae-end-draft-preview[open] > summary { border-bottom: 1px solid #e0e2e8; }
.automatic-stage .ae-end-draft-text,
.demo-interrupted-draft pre.demo-transcript,
.portal-interrupted-draft pre {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: min(320px, 44vh);
  margin: 0;
  padding: 15px 16px;
  border: 1px solid #dde0e7;
  border-radius: 12px;
  background: #f6f6f8;
  color: #3d414b;
  font: 13px/1.85 ui-monospace, "Cascadia Code", Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 4;
  overflow: auto;
  scrollbar-color: #bcbfc8 #f6f6f8;
}
.automatic-stage .ae-end-draft-preview > .ae-end-draft-text { border: 0; border-radius: 0 0 12px 12px; }
.ae-end-recovery audio, .demo-interrupted-draft audio, .portal-interrupted-draft audio {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 16px 0 0;
  border-radius: 12px;
}
.demo-interrupted-draft, .portal-interrupted-draft {
  padding: clamp(20px, 3vw, 28px);
  margin: 20px 0;
  border-left: 3px solid #d39b75;
  background: linear-gradient(125deg, #fef8f7f5, #fcfcfcf5);
}
.demo-interrupted-draft > header, .portal-interrupted-draft > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: #8d4e32;
  font-size: 11px;
  line-height: 1.7;
}
.demo-interrupted-draft h3, .portal-interrupted-draft h3 {
  margin: 17px 0 14px;
  color: #3b3f49;
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.demo-interrupted-draft .demo-service-note, .portal-interrupted-draft > p {
  margin-top: 14px;
  color: #646a7b;
  font-size: 12px;
  line-height: 1.8;
}
.portal-interrupted-draft > .portal-eyebrow { color: #925032; font-size: 10px; letter-spacing: .12em; }
.portal-interrupted-draft > h2 { margin: 12px 0; color: #3c404b; font-size: clamp(20px, 2.5vw, 25px); line-height: 1.5; }
.portal-network-recovery {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 18px;
  padding: 19px 22px;
  border: 1px solid #eccbc2;
  border-left: 3px solid #ce9470;
  border-radius: 16px;
  background: linear-gradient(115deg, #fbeeebf5, #fefaf9f5);
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px #7d563707;
  color: #6d503b;
  overflow-wrap: anywhere;
}
.portal-network-recovery > strong { display: block; color: #815036; font-size: 15px; line-height: 1.7; }
.portal-network-recovery > p { margin: 8px 0 12px; color: #715c47; font-size: 13px; line-height: 1.8; }
.portal-network-recovery .portal-button { min-height: 44px; max-width: 100%; white-space: normal; }
.portal-end-confirm { padding: 20px 22px; }
.portal-end-confirm :is(h2,h3) { color: #3a3d47; line-height: 1.5; }
.portal-end-confirm :is(p,li) { color: #5c6272; font-size: 13px; line-height: 1.85; }
.portal-end-confirm :is(.portal-modal-actions,.portal-answer-actions) { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-end-confirm .portal-end-summary { margin-top: 0; color: #424651; font-size: 14px; }
.portal-end-confirm .portal-button { min-width: 0; min-height: 44px; max-width: 100%; white-space: normal; }
.automatic-stage:has(.ae-end-recovery) .ae-scene { min-height: 0; padding: 18px 0 24px; justify-content: flex-start; }
.automatic-stage:has(.ae-end-recovery) .ae-clock { position: static; align-self: flex-end; margin: 0 0 8px; }
.automatic-stage:has(.ae-end-recovery) .ae-interviewer { position: relative; inset: auto; width: 110px; height: 124px; margin: 0 0 25px; opacity: 1; }
.automatic-stage:has(.ae-end-recovery) .ae-avatar.ae-mascot-avatar { width: 92px; height: 102px; }
.automatic-stage:has(.ae-end-recovery) .ae-voice-points { display: none; }
.automatic-stage:has(.ae-end-recovery) .ae-controls { position: static; inset: auto; width: 100%; max-width: none; margin: 8px auto 0; transform: none; }
@media (max-width: 480px) {
  .automatic-stage .ae-end-recovery { padding: 20px 16px; border-radius: 17px; }
  .automatic-stage .ae-end-recovery > h2 { font-size: 21px; }
  .automatic-stage .ae-end-recovery > .ae-end-actions { flex-direction: column; }
  .automatic-stage .ae-end-actions > .ae-button { width: 100%; }
  .automatic-stage .ae-end-draft-text, .demo-interrupted-draft pre.demo-transcript,
  .portal-interrupted-draft pre { padding: 12px; font-size: 12px; }
  .automatic-stage .ae-end-draft-text { max-height: min(240px, 34dvh); }
  .demo-interrupted-draft, .portal-interrupted-draft { padding: 20px 16px; border-radius: 17px; }
  .portal-network-recovery, .portal-end-confirm { padding: 17px 16px; border-radius: 15px; }
  .portal-end-confirm :is(.portal-modal-actions,.portal-answer-actions) { flex-direction: column; }
  .portal-end-confirm .portal-button { width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .automatic-stage .ae-end-recovery, .demo-interrupted-draft, .portal-interrupted-draft,
  .portal-network-recovery, .portal-end-confirm { background: #fdfdfe; }
}
@media print {
  .automatic-stage .ae-end-recovery, .demo-interrupted-draft, .portal-interrupted-draft { background: #fff; box-shadow: none; }
  .automatic-stage .ae-end-draft-text, .demo-interrupted-draft pre.demo-transcript,
  .portal-interrupted-draft pre { max-height: none; overflow: visible; }
}
/* Keep the active question primary when an earlier page's draft is preserved. */
.portal-command-conflict { padding: 18px 24px; }
.portal-conflict-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; cursor: pointer; list-style: none; color: #3f434e; }
.portal-conflict-summary::-webkit-details-marker { display: none; }
.portal-conflict-summary strong { flex: 1; font-size: 16px; line-height: 1.6; }
.portal-conflict-summary span { color: #7c664c; font-size: 13px; }
.portal-conflict-summary::after { content: '⌄'; color: #916f4e; }
.portal-command-conflict[open] > .portal-conflict-summary::after { content: '⌃'; }
.portal-conflict-summary:focus-visible { outline: 2px solid #cf3f20; outline-offset: 6px; border-radius: 6px; }
.portal-conflict-body { margin-top: 20px; min-width: 0; }
@media (max-width: 480px) { .portal-command-conflict { padding: 16px; } .portal-conflict-summary { gap: 4px 12px; } }