:root {
    color-scheme: light;
    --ink: #17251f;
    --muted: #56655e;
    --paper: #fbfaf6;
    --surface: #ffffff;
    --surface-soft: #f3f0e8;
    --line: #d8d8ce;
    --jade: #176b52;
    --jade-dark: #0d4b39;
    --jade-soft: #e3f2ec;
    --mango: #e69b27;
    --mango-soft: #fff0d2;
    --blue: #315f87;
    --blue-soft: #e8f1f8;
    --red: #a23a32;
    --red-soft: #fae9e7;
    --shadow: 0 16px 48px rgba(23, 37, 31, .10);
    /* Raised reading surfaces (feedback cards, packet preview). A literal light
       value here does not survive a dark appearance, which is how coach feedback
       came to render as light text on a bone-white card. */
    --surface-raised: #fffefb;
    /* Ink for tinted chips and warning lines, which sit on their own soft
       backgrounds and therefore need their own foreground token. */
    --chip-ink: #244d70;
    --warn-ink: #6c3e16;
    /* Filled-primary role. `--jade` serves two jobs — an accent/text colour and
       a filled background — and the dark theme re-values it for the first, which
       silently broke the second (white on a light jade fill). These tokens give
       the filled role its own theme-correct pair. Light values are exactly the
       jade the Studio already used, so light appearance is unchanged. */
    --primary-bg: #176b52;
    --primary-bg-hover: #0d4b39;
    --primary-ink: #ffffff;
    --focus-ring: #0b70c9;
    --radius: 18px;
    --vv-offset: 0px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
a { color: var(--jade-dark); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.16; }
p { line-height: 1.55; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 200; left: 12px; top: 12px; padding: 10px 14px; background: var(--ink); color: white; border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.exploration-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 16px;
    color: #50380d;
    background: var(--mango-soft);
    border-bottom: 1px solid #e5c47f;
    font-size: .88rem;
    text-align: center;
}
.banner-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--mango); }

.comparison-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 80px; }
.comparison-hero { display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: end; padding-bottom: 34px; }
.eyebrow { margin: 0 0 10px; color: var(--jade-dark); font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.comparison-hero h1 { max-width: 760px; margin-bottom: 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.3rem, 6vw, 5rem); letter-spacing: -.045em; }
.comparison-hero .lede { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 1.12rem; }
.comparison-note { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.comparison-note strong { display: block; margin-bottom: 5px; }
.comparison-note p { margin: 0; color: var(--muted); font-size: .93rem; }
.concept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.concept-card { display: flex; min-height: 390px; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 rgba(23,37,31,.04); }
.concept-card:hover { border-color: #9db6aa; box-shadow: var(--shadow); transform: translateY(-2px); }
.concept-number { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 26px; border-radius: 12px; background: var(--jade-soft); color: var(--jade-dark); font-weight: 900; }
.concept-card h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.concept-card p { color: var(--muted); }
.concept-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 3px 0 24px; }
.tag { padding: 5px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; font-weight: 700; }
.concept-card .button { width: 100%; margin-top: auto; }
.concept-card.finalist-card { grid-column: 1 / -1; min-height: 310px; border-color: #83aa97; background: linear-gradient(135deg, #fffefb 0%, var(--jade-soft) 100%); }
.finalist-badge { display: inline-flex; width: fit-content; margin: -12px 0 18px auto; padding: 6px 10px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-ink); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.journey-script { margin-top: 34px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: #16251f; color: white; }
.journey-script h2 { margin-bottom: 8px; }
.journey-script p { color: #cbd6d1; }
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 18px 0 0; padding-left: 24px; }
.task-grid li { padding: 4px 0; color: #eff5f2; }

.button, .icon-button, .segmented button, .phase-tab, .step-button, .move-card, .decision-button, .scope-choice {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: 11px;
    font-weight: 750;
}
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; text-decoration: none; }
.button.primary { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--primary-ink); }
.button.primary:hover { border-color: var(--primary-bg-hover); background: var(--primary-bg-hover); }
.button.secondary { border-color: #b6c9c0; background: var(--jade-soft); color: var(--jade-dark); }
.button.ghost { background: transparent; }
.button.danger { border-color: var(--red); background: var(--red); color: white; }
.button:disabled { cursor: not-allowed; opacity: .46; }
.icon-button { width: 44px; height: 44px; padding: 0; font-size: 1.1rem; }
.text-button { min-height: 44px; border: 0; background: transparent; color: var(--jade-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

.prototype-shell { min-height: 100vh; min-height: 100dvh; }
.prototype-header { position: sticky; z-index: 35; top: 0; border-bottom: 1px solid var(--line); background: rgba(251,250,246,.96); backdrop-filter: blur(14px); }
.prototype-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; width: min(1480px, calc(100% - 28px)); min-height: 72px; margin: 0 auto; }
/* (brand lockup + icon rules live in the brand-identity block below) */
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy small { color: var(--muted); }
.concept-switcher { display: flex; min-width: 0; justify-content: center; align-items: center; gap: 5px; }
.concept-switcher .switch-link { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: .86rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.concept-switcher .switch-link[aria-current="page"] { background: var(--jade-soft); color: var(--jade-dark); }
.prototype-actions { display: flex; gap: 7px; align-items: center; }
.header-select { min-height: 44px; max-width: 180px; padding: 7px 34px 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }

.orientation-bar { border-bottom: 1px solid var(--line); background: var(--surface); }
.orientation-inner { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; width: min(1480px, calc(100% - 28px)); min-height: 76px; margin: 0 auto; padding: 10px 0; }
.orientation-copy { display: flex; min-width: 0; gap: 15px; align-items: center; }
.orientation-text { min-width: 0; }
.location-pill { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--chip-ink); font-size: .8rem; font-weight: 850; }
.orientation-text strong { display: block; margin-bottom: 3px; }
.orientation-text span { display: block; overflow: hidden; color: var(--muted); font-size: .91rem; text-overflow: ellipsis; white-space: nowrap; }
.orientation-next { min-width: 200px; text-align: right; }
.orientation-next small { display: block; color: var(--muted); }
.orientation-next strong { display: block; }
.mobile-project-chip { display: none; }

.prototype-main { width: min(1480px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 120px; }
.workspace-grid { display: grid; grid-template-columns: minmax(220px, 270px) minmax(500px, 1fr) minmax(250px, 330px); gap: 18px; align-items: start; }
.workspace-grid.desk { grid-template-columns: minmax(520px, 1fr) minmax(280px, 370px); }
.workspace-grid.hybrid { grid-template-columns: minmax(540px, 1fr) minmax(270px, 340px); }
.workspace-grid.notebook-draft { grid-template-columns: minmax(560px, 1fr) minmax(300px, 390px); }
.notebook-grid { display: grid; grid-template-columns: minmax(220px, 255px) minmax(500px, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.notebook-card-panel { overflow: hidden; }
.notebook-card-list .journey-steps { max-height: calc(100dvh - 300px); }
.notebook-editor {
    min-height: 48vh;
    background-color: #fffef8;
    background-image: linear-gradient(to bottom, transparent 31px, rgba(49,95,135,.10) 32px);
    background-size: 100% 32px;
    line-height: 2rem;
}
.notebook-reference-row { display: block; width: 100%; min-height: 44px; color: var(--ink); text-align: left; }
.authorship-card { border-color: #a9c9ba; background: linear-gradient(150deg, #ffffff, var(--jade-soft)); }
.boundary-note { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.notebook-coach-history { border-top: 1px solid var(--line); background: var(--blue-soft); }
.action-meanings { grid-column: 1 / -1; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgba(23,37,31,.03); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 18px 12px; border-bottom: 1px solid var(--line); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 1rem; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.panel-body { padding: 16px 18px; }
.panel-kicker { color: var(--jade-dark); font-size: .73rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.phase-strip { display: flex; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); margin-bottom: 16px; }
.phase-tab { flex: 1; padding: 8px 12px; color: var(--muted); }
.phase-tab[aria-current="step"], .phase-tab[aria-current="page"] { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-dark); }
.phase-tab strong, .phase-tab span { display: block; }
.phase-tab span { margin-top: 3px; font-size: .74rem; font-weight: 650; }
.journey-steps { max-height: calc(100vh - 250px); overflow: auto; padding: 8px; }
.step-button { display: grid; grid-template-columns: 32px 1fr auto; width: 100%; min-height: 52px; margin-bottom: 5px; padding: 7px 8px; align-items: center; gap: 9px; text-align: left; }
.step-button[aria-current="step"] { border-color: var(--jade); background: var(--jade-soft); }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-soft); font-size: .82rem; }
.step-button[aria-current="step"] .step-number { background: var(--primary-bg); color: var(--primary-ink); }
.step-label strong, .step-label small { display: block; }
.step-label small { color: var(--muted); font-size: .75rem; }
.done-mark { color: var(--jade); font-weight: 900; }

.editor-panel { overflow: hidden; }
.editor-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fffefb; }
.draft-identity strong, .draft-identity span { display: block; }
.draft-identity span { margin-top: 2px; color: var(--muted); font-size: .83rem; }
.editor-actions { display: flex; gap: 7px; }
.edit-utility { display: inline-flex; align-items: center; gap: 4px; }
.edit-utility .icon-button { width: 44px; height: 44px; font-size: .94rem; }
.edit-menu { position: relative; }
.edit-menu > summary { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 750; list-style: none; }
.edit-menu > summary::-webkit-details-marker { display: none; }
.edit-menu[open] > summary { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-dark); }
.edit-menu-popover { position: absolute; z-index: 12; right: 0; top: calc(100% + 5px); display: grid; width: 148px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.edit-menu-popover button { min-height: 40px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; }
.edit-menu-popover button:hover { background: var(--surface-soft); }
.editor-wrap { position: relative; padding: 18px; }
.draft-editor { display: block; width: 100%; min-height: 52vh; max-height: 840px; padding: 22px; resize: vertical; border: 1px solid #c9cbc4; border-radius: 14px; background: #fffefa; color: var(--ink); font: 1.08rem/1.7 Georgia, "Times New Roman", serif; caret-color: var(--jade); }
.draft-editor::placeholder { color: #747e79; }
.editor-meta { display: flex; min-height: 42px; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px 0; color: var(--muted); font-size: .82rem; }
.autosave-message { display: flex; align-items: center; gap: 6px; }
.autosave-message::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); }
.editor-privacy { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--jade-soft); color: #214f3e; font-size: .85rem; }
.integrated-desk .editor-privacy { background: var(--surface-soft); color: var(--muted); }
.coach-entry { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-top: 1px solid #b8cbbf; background: var(--jade-soft); }
.coach-entry strong, .coach-entry span { display: block; }
.coach-entry span { margin-top: 3px; color: #345c4d; font-size: .82rem; }
.editor-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.stuck-inline { color: var(--muted); border-color: var(--line); }
.stuck-inline:hover { color: var(--ink); }
.footer-group { display: flex; gap: 8px; }

.support-stack { display: grid; gap: 14px; }
.move-list { display: grid; gap: 9px; }
.move-card { width: 100%; padding: 13px; text-align: left; }
.move-card:hover, .move-card[aria-pressed="true"] { border-color: var(--jade); background: var(--jade-soft); }
.move-card strong, .move-card span { display: block; }
.move-card span { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.integrated-move { padding: 14px; }
.integrated-move details { margin-top: 9px; color: var(--muted); font-size: .82rem; }
.integrated-move details > summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; }
.integrated-move details p { margin: 7px 0; }
.integrated-move .text-button { margin-top: 6px; text-align: left; }
.integrated-move .move-example { padding-top: 6px; border-top: 1px dashed var(--line); }
.move-example > summary { display: flex; width: fit-content; max-width: 100%; min-height: 44px; align-items: center; gap: 7px; margin: 2px 0; padding: 8px 13px; border: 1px solid var(--jade); border-radius: 999px; background: var(--jade-soft); color: var(--jade-dark); font-weight: 800; font-size: .82rem; cursor: pointer; list-style: none; }
.move-example > summary::-webkit-details-marker { display: none; }
.move-example > summary::before { content: "▸"; font-size: .82em; }
.move-example[open] > summary { margin-bottom: 7px; }
.move-example[open] > summary::before { content: "▾"; }
.move-example .example-boundary, .move-example .example-ownership { color: var(--ink); }
.move-example dl { display: grid; gap: 7px; margin: 10px 0; }
.move-example dl div { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.7fr); gap: 9px; }
.move-example dt { font-weight: 800; color: var(--ink); }
.move-example dd { margin: 0; }
.move-example .example-ownership { font-weight: 750; }
.support-distinction { margin: 0 0 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.support-distinction-lead { margin: 0 0 8px; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.support-distinction dl { display: grid; gap: 7px; margin: 0; }
.support-distinction dt { color: var(--ink); font-weight: 800; font-size: .84rem; }
.support-distinction dd { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.support-distinction-note { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.blank-start { display: grid; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.blank-start[hidden] { display: none; }
.blank-start > strong { color: var(--ink); font-size: .88rem; }
.blank-start .stuck-microtask { margin: 0; font-size: .88rem; }
.blank-start-boundary { margin: 0; color: var(--muted); font-size: .8rem; }
.blank-start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.planning-empty { margin: 3px 0; padding: 11px; border: 1px dashed #b8c0bc; border-radius: 10px; color: var(--muted); font-size: .82rem; }
.planning-reference, .knowledge-revisit { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fffefb; }
.planning-reference > summary, .knowledge-revisit > summary { min-height: 44px; padding: 10px 2px; font-weight: 800; cursor: pointer; }
.planning-reference .artifact-list { margin-top: 8px; }
.linked-passage { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.linked-passage blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--mango); font-family: Georgia, serif; }
.linked-passage small { color: var(--muted); }
.knowledge-onboarding { border-color: #b8c9e0; background: var(--blue-soft); }
.knowledge-onboarding small { display: block; margin-top: 12px; color: var(--chip-ink); }
.knowledge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.boundary-note { color: var(--muted); font-size: .86rem; }
.support-action.unavailable { align-items: flex-start; flex-direction: column; gap: 4px; }
.support-action.unavailable span { max-width: 100%; line-height: 1.45; }
.artifact-list { display: grid; gap: 8px; }
.artifact-row { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fffefb; }
.artifact-row strong { display: block; }
.artifact-row small { display: block; margin-top: 4px; color: var(--muted); }
.current-badge { display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 999px; background: var(--jade-soft); color: var(--jade-dark); font-size: .72rem; font-weight: 850; }
.support-action { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.support-action:last-child { border-bottom: 0; }
.support-action span { color: var(--muted); font-size: .82rem; }
.evidence-count { display: inline-flex; min-width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 999px; background: var(--surface-soft); font-size: .76rem; }
.feedback-choice-guide { margin-bottom: 16px; padding: 0 12px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.feedback-choice-guide > summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; font-weight: 800; }
.feedback-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.feedback-choice-grid > div { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.feedback-choice-grid strong, .feedback-choice-grid span { display: block; }
.feedback-choice-grid span { margin-top: 4px; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.feedback-choice-guide > p { margin: 11px 0 0; color: var(--muted); font-size: .84rem; }

.context-moves { margin-top: 16px; }
.context-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.context-card { min-height: 130px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.context-card h3 { font-size: .96rem; }
.context-card p { margin-bottom: 10px; color: var(--muted); font-size: .84rem; }

.passage-bar { position: fixed; z-index: 70; left: 50%; bottom: calc(12px + var(--vv-offset) + env(safe-area-inset-bottom)); display: flex; width: min(720px, calc(100% - 24px)); min-height: 62px; align-items: center; gap: 12px; padding: 9px 10px 9px 15px; transform: translateX(-50%); border: 1px solid #9bbcac; border-radius: 17px; background: #102c23; color: white; box-shadow: 0 18px 50px rgba(8,27,21,.32); }
.passage-bar[hidden] { display: none; }
.passage-copy { min-width: 0; flex: 1; }
.passage-copy strong { display: block; margin-bottom: 3px; font-size: .82rem; }
.passage-copy span { display: block; overflow: hidden; color: #d7e6df; font-size: .81rem; text-overflow: ellipsis; white-space: nowrap; }
.passage-bar .button { flex: 0 0 auto; }
.passage-bar .button.ghost { border-color: #547368; color: white; }
.passage-bar .icon-button { flex: 0 0 auto; border-color: #547368; background: transparent; color: white; }
.passage-move-choices .radio-card { text-align: left; }

.overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(14,25,20,.58); backdrop-filter: blur(4px); }
.dialog { width: min(680px, 100%); max-height: min(820px, calc(100dvh - 36px)); overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 26px 80px rgba(4,20,13,.28); }
.dialog.wide { width: min(980px, 100%); }
.dialog-header { position: sticky; z-index: 2; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 21px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dialog-header h2 { margin: 0; font-size: 1.25rem; }
.dialog-header p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.dialog-header .edit-utility { margin-left: auto; }
.dialog-body { padding: 21px; }
.dialog-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 9px; padding: 14px 21px; border-top: 1px solid var(--line); background: var(--surface); }
.dirty-confirm { margin-top: 18px; padding: 15px; border: 1px solid #d7a7a1; border-radius: 12px; background: var(--red-soft); }
.dirty-confirm p { margin: 5px 0 12px; color: var(--muted); font-size: .88rem; }
.dirty-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-section p { color: var(--muted); font-size: .88rem; }
.settings-select { width: 100%; min-height: 44px; padding: 8px 34px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.review-secondary-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-secondary-action small { max-width: 440px; color: var(--muted); }
.revision-cycle-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px; border: 1px solid #b8cbbf; border-radius: 13px; background: var(--jade-soft); }
.revision-cycle-entry strong, .revision-cycle-entry span { display: block; }
.revision-cycle-entry span { margin-top: 4px; color: var(--muted); font-size: .85rem; }
.revision-cycle-entry .button { flex: 0 0 auto; }
.contextual-invitation { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px; border: 1px solid #b8c9e0; border-radius: 13px; background: var(--blue-soft); }
.contextual-invitation p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }
.invitation-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.invitation-actions .text-button { max-width: 180px; text-align: left; }
.move-context-offer { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.move-context-offer > summary { min-height: 44px; padding: 10px 0; font-weight: 800; cursor: pointer; }
/* A3 disclosure. Reuses the existing offer-block visual language so the
   consent moment stays calm: the summary is the only thing on screen until
   the student opens it. 44px summary matches the touch target above. */
.a3-disclosure { margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.a3-disclosure > summary { min-height: 44px; padding: 10px 0; font-weight: 800; cursor: pointer; }
.a3-disclosure-list { margin: 6px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: .88rem; line-height: 1.5; }
.a3-help { display: grid; gap: 16px; }
.a3-help-section h3 { margin: 0 0 5px; font-size: .95rem; }
.a3-help-section p { margin: 0; font-size: .9rem; line-height: 1.55; }
.move-context-choice { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.move-context-preview { margin: 0; font-size: .82rem; white-space: pre-wrap; }
.revision-copy-note, .voice-constraint-note { padding: 11px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--ink); font-size: .88rem; }
.revision-focus-suggestion { margin-top: 4px; text-align: left; }
.compare-mobile-tabs { display: none; gap: 7px; margin: 0 0 10px; }
.compare-mobile-tabs button { flex: 1; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 750; }
.compare-mobile-tabs button[aria-selected="true"] { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-dark); }
.revision-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compare-pane { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.compare-pane h3 { margin-bottom: 4px; }
.compare-pane small { color: var(--muted); }
.compare-pane pre { max-height: 48vh; overflow: auto; margin: 12px 0 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: .98rem/1.6 Georgia, "Times New Roman", serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.snapshot-link { margin: 2px 0 10px; text-align: left; }
.snapshot-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.snapshot-facts div { padding: 10px; border-radius: 9px; background: var(--surface-soft); }
.snapshot-facts dt { color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; }
.snapshot-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.snapshot-text { max-height: 44vh; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fffefa; color: var(--ink); font: 1rem/1.55 Georgia, "Times New Roman", serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkpoint-note { color: var(--muted); font-size: .86rem; }
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field > label, .field > legend { font-weight: 800; }
.field textarea, .field input[type="text"] { width: 100%; min-height: 46px; padding: 11px; border: 1px solid #bfc5c1; border-radius: 10px; background: white; color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scope-choice { position: relative; display: block; min-height: 100px; padding: 12px; }
.scope-choice input { position: absolute; right: 10px; top: 10px; }
.scope-choice:has(input:checked) { border-color: var(--jade); background: var(--jade-soft); }
.scope-choice strong, .scope-choice span { display: block; padding-right: 24px; }
.scope-choice span { margin-top: 5px; color: var(--muted); font-size: .8rem; }
/* F1 — Ask Tu Pana question affordance. Deliberately compact: the default
   .field textarea is 140px, which would dominate the consent dialog and read
   as an obligation. Two calm rows that grow if the writer wants more. */
.coach-question textarea { min-height: 64px; }
.field > .field-label { font-weight: 800; }
.field-hint { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.question-request-note { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
.exact-preview { max-height: 190px; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #f8f7f2; color: #2c3933; font: .91rem/1.55 Georgia, serif; white-space: pre-wrap; }
.consent-box { display: flex; gap: 10px; padding: 13px; border: 1px solid #b8cbbf; border-radius: 11px; background: var(--jade-soft); color: #214f3e; line-height: 1.45; }
.consent-box input { width: 20px; height: 20px; flex: 0 0 auto; }
.transmission-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.transmission-facts div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.transmission-facts dt { color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.transmission-facts dd { margin: 4px 0 0; font-weight: 750; }
.choice-stack { display: grid; gap: 8px; }
.radio-card { display: flex; gap: 10px; min-height: 52px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.radio-card:has(input:checked) { border-color: var(--jade); background: var(--jade-soft); }
.radio-card.selected { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-dark); }
.appearance-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appearance-choices .radio-card { justify-content: center; text-align: center; }
.stuck-microtask { padding: 13px; border-left: 4px solid var(--jade); border-radius: 8px; background: var(--jade-soft); color: var(--jade-dark); font-weight: 750; }
.safe-summary { max-height: 260px; overflow: auto; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-entry-quote { margin: 0 0 16px; padding: 13px; border-left: 4px solid var(--jade); background: var(--jade-soft); color: var(--ink); white-space: pre-wrap; }
.voice-request-note { padding: 9px 11px; border-left: 3px solid var(--blue); background: var(--blue-soft); color: var(--ink); font-size: .86rem; }

html[data-appearance="dark"] { color-scheme: dark; --primary-bg: #55ae8a; --primary-bg-hover: #6fbf9b; --primary-ink: #0c1f19; --focus-ring: #5cb3ff; --surface-raised: #252d28; --chip-ink: #bcd8ef; --warn-ink: #f0c99a; --ink: #f0eee6; --muted: #c3c7bd; --paper: #1b211e; --surface: #252d28; --surface-soft: #303a33; --line: #58655d; --jade: #55ae8a; --jade-dark: #a7e0c8; --jade-soft: #243f35; --mango-soft: #4a3b20; --blue-soft: #263844; --red-soft: #4c2d2b; --shadow: 0 16px 48px rgba(0,0,0,.34); }
html[data-appearance="dark"] .prototype-header { background: rgba(27,33,30,.96); }
html[data-appearance="dark"] .draft-editor, html[data-appearance="dark"] .snapshot-text, html[data-appearance="dark"] .field textarea, html[data-appearance="dark"] .field input[type="text"], html[data-appearance="dark"] .header-select, html[data-appearance="dark"] .settings-select { background: #1d241f; color: var(--ink); border-color: var(--line); }
html[data-appearance="dark"] .editor-topline, html[data-appearance="dark"] .planning-reference, html[data-appearance="dark"] .artifact-row { background: var(--surface); }
html[data-appearance="dark"] .exact-preview { background: #202721; color: var(--ink); }
html[data-appearance="dark"] .editor-privacy, html[data-appearance="dark"] .coach-entry { color: var(--ink); }
html[data-appearance="dark"] .coach-entry span { color: var(--muted); }
html[data-appearance="dark"] .exploration-banner { color: #ffe8ad; border-color: #876b35; }
html[data-appearance="dark"] .location-pill { color: #d6eafd; }
html[data-appearance="dark"] .consent-box { color: var(--ink); }
@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] { color-scheme: dark; --primary-bg: #55ae8a; --primary-bg-hover: #6fbf9b; --primary-ink: #0c1f19; --focus-ring: #5cb3ff; --surface-raised: #252d28; --chip-ink: #bcd8ef; --warn-ink: #f0c99a; --ink: #f0eee6; --muted: #c3c7bd; --paper: #1b211e; --surface: #252d28; --surface-soft: #303a33; --line: #58655d; --jade: #55ae8a; --jade-dark: #a7e0c8; --jade-soft: #243f35; --mango-soft: #4a3b20; --blue-soft: #263844; --red-soft: #4c2d2b; --shadow: 0 16px 48px rgba(0,0,0,.34); }
    html[data-appearance="system"] .prototype-header { background: rgba(27,33,30,.96); }
    html[data-appearance="system"] .draft-editor, html[data-appearance="system"] .snapshot-text, html[data-appearance="system"] .field textarea, html[data-appearance="system"] .field input[type="text"], html[data-appearance="system"] .header-select, html[data-appearance="system"] .settings-select { background: #1d241f; color: var(--ink); border-color: var(--line); }
    html[data-appearance="system"] .editor-topline, html[data-appearance="system"] .planning-reference, html[data-appearance="system"] .artifact-row { background: var(--surface); }
    html[data-appearance="system"] .exact-preview { background: #202721; color: var(--ink); }
    html[data-appearance="system"] .editor-privacy, html[data-appearance="system"] .coach-entry, html[data-appearance="system"] .consent-box { color: var(--ink); }
    html[data-appearance="system"] .coach-entry span { color: var(--muted); }
    html[data-appearance="system"] .exploration-banner { color: #ffe8ad; border-color: #876b35; }
}

.review-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.review-nav { display: grid; align-content: start; gap: 7px; }
.review-nav button { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font-weight: 750; }
.review-nav button[aria-current="page"] { border-color: var(--jade); background: var(--jade-soft); }
.review-feed { display: grid; gap: 12px; }
.evidence-filters { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 3px; }
.evidence-filters button { flex: 0 0 auto; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 750; }
.evidence-filters button[aria-current="page"] { border-color: var(--jade); background: var(--jade-soft); color: var(--jade-dark); }
.evidence-archive { display: grid; gap: 10px; }
.evidence-entry { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.evidence-entry h3 { margin: 3px 0 8px; font-size: 1rem; }
.evidence-entry blockquote { margin: 9px 0; padding-left: 11px; border-left: 3px solid var(--mango); font-family: Georgia, serif; }
.evidence-date { color: var(--muted); font-size: .75rem; }
.move-request-note { padding: 10px; border-left: 3px solid var(--jade); background: var(--jade-soft); font-size: .86rem; }
.review-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.review-card h3 { font-size: 1rem; }
.review-meta { margin-bottom: 9px; color: var(--muted); font-size: .78rem; }
.review-card blockquote { margin: 10px 0; padding: 10px 13px; border-left: 4px solid var(--mango); background: var(--mango-soft); font-family: Georgia, serif; }
/* Refinement B — feedback information hierarchy. Typography and whitespace do
   the work; no new colour, border, badge, icon, panel, or animation is
   introduced, and body text is NOT shrunk to manufacture compactness. The
   quiet-disclosure grammar is the one already established by
   .critical-framework, reused rather than reinvented. */
.feedback-structured { margin: 11px 0; }
.feedback-heading { margin: 0 0 5px; color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; }
.feedback-heading + * { margin-top: 0; }
.feedback-observation { margin: 0 0 15px; font-weight: 600; }
.feedback-questions { margin: 0 0 13px; padding-left: 20px; }
.feedback-questions li { margin: 7px 0; }
.feedback-why > summary { min-height: 44px; padding: 10px 0; color: var(--muted); font-weight: 750; cursor: pointer; }
.feedback-why-body { margin: 0 0 6px; }
.critical-moment { margin-top: 13px; border: 1px solid #b8c9e0; border-radius: 11px; background: var(--blue-soft); }
.critical-moment > summary { min-height: 44px; padding: 12px; color: var(--chip-ink); font-weight: 850; cursor: pointer; }
.critical-moment-body { padding: 0 13px 13px; }
.critical-primary { font-weight: 750; }
.critical-risk { margin: 8px 0; color: var(--warn-ink); font-weight: 750; }
.critical-framework { margin-top: 10px; }
.critical-framework > summary { min-height: 44px; padding: 10px 0; font-weight: 750; cursor: pointer; }
.critical-framework ul { margin: 0; padding-left: 20px; }
.critical-framework li { margin: 8px 0; }
.critical-framework li.current { color: var(--chip-ink); }
.critical-decision-summary { padding: 13px; border: 1px solid #b8c9e0; border-radius: 11px; background: var(--blue-soft); }
.decision-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.decision-button { min-height: 44px; padding: 7px 10px; font-size: .78rem; }
.decision-button[aria-pressed="true"] { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--primary-ink); }
.mock-label { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 4px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--chip-ink); font-size: .7rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.empty-state { padding: 28px; border: 1px dashed #b8c0bc; border-radius: 14px; text-align: center; color: var(--muted); }

.reflection-intro { padding: 14px; border-radius: 13px; background: var(--blue-soft); color: var(--chip-ink); }
.evidence-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 18px; }
.evidence-chip { display: inline-flex; padding: 6px 9px; border: 1px solid #abc1d3; border-radius: 999px; background: var(--surface-raised); color: var(--chip-ink); font-size: .78rem; }
.reflection-prompt { margin-bottom: 18px; }
.reflection-prompt label { display: block; margin-bottom: 7px; font-weight: 800; }
.reflection-prompt textarea { display: block; width: 100%; min-height: 115px; padding: 12px; resize: vertical; border: 1px solid #bfc5c1; border-radius: 11px; }
.optional-label { color: var(--muted); font-size: .78rem; font-weight: 650; }

.finish-page { display: grid; gap: 16px; }
.finish-hero { padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, var(--jade-soft), #f6fbf9); }
.finish-hero h2 { font-family: Georgia, serif; font-size: 1.8rem; }
.finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.packet-section { padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.packet-section h3 { margin-bottom: 7px; }
.check-list { display: grid; gap: 8px; margin: 13px 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); }
.check-list li::before { content: "○"; color: var(--mango); font-weight: 900; }
.check-list li.done::before { content: "✓"; color: var(--jade); }
.packet-preview { max-height: 340px; overflow: auto; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); white-space: pre-wrap; }
.packet-tabs { display: flex; gap: 7px; margin-bottom: 12px; }

.danger-zone { margin-top: 24px; padding: 17px; border: 1px solid #dfaaa5; border-radius: 14px; background: var(--red-soft); }
.danger-zone h3 { color: #77251f; }
.danger-zone p { color: #6d4945; }
.delete-confirm { max-width: 280px; text-transform: uppercase; }

.focus-exit { display: none; position: fixed; z-index: 85; top: calc(10px + env(safe-area-inset-top)); right: 10px; }
body.focus-mode .exploration-banner,
body.focus-mode .prototype-header,
body.focus-mode .orientation-bar,
body.focus-mode .support-stack,
body.focus-mode .journey-panel,
body.focus-mode .context-moves,
body.focus-mode .editor-privacy,
body.focus-mode .blank-start,
body.focus-mode .editor-topline,
body.focus-mode .editor-footer { display: none; }
body.focus-mode .focus-exit { display: inline-flex; }
body.focus-mode .prototype-main { width: min(920px, calc(100% - 24px)); padding-top: 18px; }
body.focus-mode .workspace-grid { display: block; }
body.focus-mode .draft-editor { min-height: calc(100dvh - 96px); }

@media (max-width: 1500px) {
    .prototype-header-inner { grid-template-columns: auto 1fr; }
    .concept-switcher { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; }
    .prototype-actions { justify-content: flex-end; }
}

@media (max-width: 1100px) {
    .workspace-grid { grid-template-columns: 220px minmax(460px, 1fr); }
    .support-stack { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .workspace-grid.desk, .workspace-grid.hybrid { grid-template-columns: minmax(480px, 1fr) 300px; }
    .workspace-grid.notebook-draft { grid-template-columns: minmax(500px, 1fr) minmax(280px, 340px); }
    .notebook-grid { grid-template-columns: 220px minmax(480px, 1fr); }
    .notebook-grid > .support-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .comparison-hero { grid-template-columns: 1fr; }
    .concept-grid { grid-template-columns: 1fr; }
    .concept-card { min-height: 0; }
    .concept-card.finalist-card { grid-column: auto; }
    .task-grid { grid-template-columns: 1fr; }
    .prototype-header-inner { min-height: 64px; }
    .genre-select-wrap { display: none; }
    .orientation-inner { grid-template-columns: 1fr; gap: 5px; }
    [data-concept="integrated"] .orientation-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .mobile-project-chip { display: inline-flex; grid-column: 1 / -1; min-width: 0; max-width: 100%; min-height: 44px; align-items: center; gap: 6px; justify-self: start; padding: 5px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); text-align: left; }
    .mobile-project-chip span { color: var(--muted); font-size: .72rem; }
    .mobile-project-chip strong { min-width: 0; max-width: 100%; font-size: .78rem; overflow-wrap: anywhere; }
    .orientation-next { display: none; }
    .feedback-choice-grid { grid-template-columns: 1fr; }
    .move-example dl div { grid-template-columns: 1fr; gap: 2px; }
    .workspace-grid, .workspace-grid.desk, .workspace-grid.hybrid, .workspace-grid.notebook-draft { display: flex; flex-direction: column; }
    .notebook-grid { display: flex; flex-direction: column; }
    .notebook-card-panel { order: 1; width: 100%; }
    .notebook-card-list { order: 2; width: 100%; }
    .notebook-grid > .support-stack { order: 3; display: grid; grid-template-columns: 1fr; width: 100%; }
    .notebook-draft > .notebook-reference { display: none; }
    .editor-panel { order: 1; width: 100%; }
    .journey-panel { order: 2; width: 100%; }
    .support-stack { order: 3; display: grid; grid-template-columns: 1fr; width: 100%; }
    .draft-editor { min-height: 50dvh; }
    .notebook-editor { min-height: 42dvh; }
    .context-grid { grid-template-columns: 1fr; }
    .finish-grid { grid-template-columns: 1fr; }
    .review-layout { grid-template-columns: 1fr; }
    .review-nav { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .exploration-banner { align-items: flex-start; font-size: .78rem; }
    .comparison-shell { width: min(100% - 22px, 1180px); padding-top: 34px; }
    .comparison-hero h1 { font-size: 2.55rem; }
    .journey-script { padding: 19px; }
    .prototype-header-inner, .orientation-inner, .prototype-main { width: calc(100% - 18px); }
    .prototype-header-inner { grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
    .prototype-actions { min-width: 0; gap: 4px; }
    .prototype-actions .header-select:not(.genre-select) { min-width: 0; max-width: 160px; flex: 1 1 0; }
    .prototype-actions .settings-label { display: none; }
    .brand-icon { width: 44px; height: 37px; }
    .product-title { font-size: 0.98rem; white-space: normal; }
    .brand-copy { display: none; }
    .concept-switcher .switch-link { padding: 7px 9px; font-size: .77rem; }
    .orientation-bar { position: sticky; z-index: 30; top: 112px; }
    .orientation-copy { align-items: flex-start; gap: 8px; }
    .location-pill { margin-top: 2px; }
    .orientation-text span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .prototype-main { padding-top: 10px; }
    .phase-strip { overflow-x: auto; }
    .phase-tab { min-width: 120px; }
    .editor-topline { align-items: flex-start; }
    .editor-actions { flex-wrap: wrap; justify-content: flex-end; }
    .editor-wrap { padding: 9px; }
    .draft-editor { min-height: max(280px, calc(100dvh - 360px)); padding: 15px; font-size: 1rem; }
    .editor-footer { align-items: stretch; flex-direction: column-reverse; }
    .coach-entry { align-items: stretch; flex-direction: column; }
    .coach-entry .button { width: 100%; }
    .blank-start { padding: 11px 12px; }
    .blank-start-actions .button { width: 100%; }
    .footer-group { display: grid; grid-template-columns: 1fr 1fr; }
    .footer-group .button { width: 100%; }
    .passage-bar { min-height: 76px; align-items: stretch; flex-wrap: wrap; gap: 7px; }
    .passage-copy { flex-basis: calc(100% - 54px); }
    .passage-bar .button { flex: 1; }
    .scope-grid { grid-template-columns: 1fr; }
    .revision-cycle-entry { align-items: stretch; flex-direction: column; }
    .revision-cycle-entry .button { width: 100%; }
    .contextual-invitation { align-items: stretch; flex-direction: column; }
    .invitation-actions { display: grid; grid-template-columns: 1fr; justify-items: stretch; }
    .invitation-actions .button, .invitation-actions .text-button { width: 100%; max-width: none; min-height: 44px; }
    .compare-mobile-tabs { display: flex; }
    .revision-compare-grid { display: block; }
    .revision-compare-grid[data-compare-view="before"] .compare-current, .revision-compare-grid[data-compare-view="current"] .compare-before { display: none; }
    .compare-pane pre { max-height: 46dvh; }
    .appearance-choices { grid-template-columns: 1fr; }
    .transmission-facts { grid-template-columns: 1fr; }
    .scope-choice { min-height: 78px; }
    .dialog { max-height: calc(100dvh - 16px); border-radius: 17px; }
    .overlay { padding: 8px; }
    .dialog-header, .dialog-body { padding: 16px; }
    .dialog-footer { padding: 12px 16px; }
    .snapshot-facts { grid-template-columns: 1fr; }
    .review-nav { grid-template-columns: 1fr; }
    .decision-row { display: grid; grid-template-columns: 1fr 1fr; }
    [data-concept="journey"] .focus-btn { display: none !important; }
    [data-concept="hybrid"] .focus-btn { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .concept-card, .button, .move-card { transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
}

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

/* Provider failure surface — calm, truthful, inside the open dialog. */
.provider-error {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--warn-border, #b4552f);
    border-radius: 10px;
    background: var(--warn-bg, rgba(180, 85, 47, 0.08));
    overflow-wrap: anywhere;
}
.move-deeper { margin-top: 8px; }
.assignment-notice { font-style: italic; }

/* Refinement B — the secondary privacy layer, nested one disclosure deeper so
   the consent moment stays short without any material fact being dropped. */
.a3-more { margin: 10px 0 0; padding: 0 0 0 2px; border-top: 1px solid var(--line); }
.a3-more > summary { min-height: 44px; padding: 12px 0 6px; color: var(--muted); font-size: .88rem; font-weight: 750; cursor: pointer; }
.a3-more .a3-disclosure-list { font-size: .84rem; }

/* Refinement C — pending, ready, and the brief arrival highlight. Calm by
   construction: one status line, one persistent affordance, one soft ring. */
.coach-pending {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed #b8cbbf;
    border-radius: 10px;
    background: var(--jade-soft);
    color: var(--ink);
    font-weight: 750;
}
.feedback-ready-bar {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--jade);
    border-radius: 12px;
    background: var(--jade-soft);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.review-card.response-fresh { box-shadow: 0 0 0 2px var(--jade); }
@media (prefers-reduced-motion: no-preference) {
    .review-card.response-fresh { animation: responseFresh 2.4s ease-out forwards; }
    @keyframes responseFresh {
        0% { box-shadow: 0 0 0 3px var(--jade); }
        100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    }
}

/* Council structured report */
.council-summary { font-weight: 600; margin: 10px 0 4px; }
.council-finding { border-top: 1px solid var(--line, rgba(0,0,0,0.12)); padding-top: 10px; margin-top: 10px; }
.council-finding-head { margin-bottom: 4px; }
.corroborated-mark { color: var(--accent, #2f6f4f); font-weight: 700; }
.tentative-chip { font-size: 0.82em; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; opacity: 0.75; }
.council-anchor { font-style: italic; overflow-wrap: anywhere; }
.council-preserve, .council-disagreements { margin-top: 12px; }
.council-preserve h4, .council-disagreements h4 { margin-bottom: 6px; }
.council-partial-note, .council-dropped-note, .truncated-note { font-size: 0.9em; opacity: 0.85; }
.voice-note { font-size: 0.92em; }

/* ── Tu Pana brand identity (original laptop-and-coffee companion, ported
      verbatim from the legacy application's header logo) ── */
.brand-lockup { display: flex; gap: 12px; align-items: center; min-width: 0; }
.brand-icon { width: 52px; height: 44px; flex-shrink: 0; display: block; }
.brand-icon svg { width: 100%; height: 100%; overflow: visible; display: block; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.06rem; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; }
.tp-av-bg      { fill: #f4dfbd; opacity: 0.82; }
.tp-av-glow    { fill: #f0c783; opacity: 0.18; transform-origin: 120px 110px; animation: tpAvGlow 4.2s ease-in-out infinite; }
.tp-av-laptop  { fill: #5f8a65; stroke: #315642; stroke-width: 4; stroke-linejoin: round; }
.tp-av-screen  { fill: #fffaf0; stroke: #315642; stroke-width: 3.5; stroke-linejoin: round; }
.tp-av-screen-inner { fill: #f7ecd8; opacity: 0.68; }
.tp-av-base    { fill: #e8ddc8; stroke: #315642; stroke-width: 3.5; stroke-linejoin: round; }
.tp-av-trackpad { fill: #fffaf0; stroke: rgba(49,86,66,0.5); stroke-width: 2; }
.tp-av-key     { fill: rgba(49,86,66,0.38); }
.tp-av-line    { fill: none; stroke: #c68642; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 76; stroke-dashoffset: 76; animation: tpAvLine 4.8s ease-in-out infinite; }
.tp-av-line.l2 { stroke-dasharray: 62; stroke-dashoffset: 62; animation-delay: 0.42s; }
.tp-av-line.l3 { stroke-dasharray: 48; stroke-dashoffset: 48; animation-delay: 0.84s; }
.tp-av-cursor  { fill: #315642; animation: tpAvCursor 1s steps(1,end) infinite; }
.tp-av-spark   { fill: #d79638; opacity: 0.78; transform-origin: center; animation: tpAvSpark 2.8s ease-in-out infinite; }
.tp-av-cup     { fill: #fff7ea; stroke: #315642; stroke-width: 3.5; stroke-linejoin: round; }
.tp-av-coffee  { fill: #6b4329; opacity: 0.9; }
.tp-av-handle  { fill: none; stroke: #315642; stroke-width: 3.5; stroke-linecap: round; }
.tp-av-saucer  { fill: #eadfce; stroke: #315642; stroke-width: 3; }
.tp-av-steam   { fill: none; stroke: #8a6b4d; stroke-width: 3.2; stroke-linecap: round; opacity: 0.62; animation: tpAvSteam 3.4s ease-in-out infinite; }
.tp-av-steam.s2 { animation-delay: 0.45s; }
.tp-av-steam.s3 { animation-delay: 0.9s; }
@keyframes tpAvGlow { 0%,100% { transform: scale(0.96); opacity: 0.14; } 50% { transform: scale(1.05); opacity: 0.28; } }
@keyframes tpAvLine { 0%,18% { stroke-dashoffset: 76; } 45%,78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 76; } }
@keyframes tpAvCursor { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes tpAvSteam { 0% { transform: translateY(8px) scale(0.92); opacity: 0; } 35% { opacity: 0.55; } 70% { opacity: 0.4; } 100% { transform: translateY(-14px) scale(1.08); opacity: 0; } }
@keyframes tpAvSpark { 0%,100% { transform: scale(0.9) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1.12) rotate(8deg); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
    .tp-av-glow, .tp-av-line, .tp-av-cursor, .tp-av-steam, .tp-av-spark { animation: none; }
}

/* Genre selector: compact face when closed; the real select stays fully
   accessible (keyboard + AT read the full official assignment names). */
.genre-select-wrap { position: relative; display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; }
.genre-select-face { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--muted); border: 1px solid var(--line, rgba(0,0,0,0.16)); border-radius: 8px; padding: 3px 10px; max-width: 100%; overflow-wrap: anywhere; }
.genre-select-caret { font-size: 0.7rem; opacity: 0.7; }
.genre-select-wrap .genre-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.genre-select-wrap:focus-within .genre-select-face { outline: 2px solid var(--jade, #315642); outline-offset: 2px; }

/* Header controls never compress below their touch targets */
.prototype-actions .icon-button, .prototype-actions .header-select { flex-shrink: 0; }
.brand-lockup { flex: 1 1 auto; }
.prototype-actions { flex-shrink: 0; }

/* Mobile header: identity row wraps cleanly; the genre pill yields to the
   orientation chip (this block re-asserts
   the small-screen rules after the brand-identity block above). */
@media (max-width: 820px) {
    .prototype-header-inner { grid-template-columns: 1fr; row-gap: 4px; padding: 8px 0; min-height: 0; }
    .prototype-actions { justify-content: flex-start; }
    .genre-select-wrap { display: none; }
    .brand-lockup { min-width: 0; }
    .product-title { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Quick tour ── */
.tour-welcome {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding: 13px 15px;
    border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 12px;
    background: var(--tour-welcome-bg, rgba(244, 223, 189, 0.32));
}
.tour-welcome-copy { display: flex; flex-direction: column; gap: 3px; min-width: 220px; flex: 1 1 260px; }
.tour-welcome-copy span { color: var(--muted); font-size: 0.9rem; }
.tour-welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-appearance="dark"] .tour-welcome { background: rgba(244, 223, 189, 0.09); }
@media (prefers-color-scheme: dark) { html[data-appearance="system"] .tour-welcome { background: rgba(244, 223, 189, 0.09); } }

/* ── First-run welcome (a surface, never a gate) ──
   Every dimension here is content-driven. Nothing carries a fixed height, so
   long Spanish or stacked bilingual text lengthens the card instead of
   overflowing it. The brand mark gets a reserved block of its own: the artwork
   is drawn on a 260×220 canvas, and the header's `.brand-icon` box is only
   52×44, so sizing the inner <svg> alone made it paint outside its container
   and over the heading. The container is sized here, and the mark is the only
   thing allowed in that row. */
.first-run { display: flex; justify-content: center; padding: clamp(10px, 2.5vw, 26px) 0 12px; }
.first-run-card {
    display: flex; flex-direction: column; align-items: center;
    max-width: 40rem; width: 100%; min-width: 0; text-align: center;
    padding: clamp(20px, 4vw, 34px) clamp(18px, 4vw, 30px);
    border: 1px solid var(--line, rgba(0,0,0,0.14)); border-radius: 18px;
    background: var(--surface-raised, var(--surface));
}
/* The mark's protected area. Nothing else occupies this row. */
.first-run-mark {
    display: flex; justify-content: center; align-items: center;
    width: 100%; margin: 0 0 clamp(10px, 2vw, 16px);
}
.first-run-card .brand-icon {
    width: clamp(92px, 20vw, 128px);
    height: auto;
    aspect-ratio: 260 / 220;
    flex-shrink: 0;
}
.first-run-card .brand-icon svg { width: 100%; height: 100%; display: block; }
.first-run-card h2 { margin: 0 0 6px; max-width: 100%; overflow-wrap: anywhere; }
.first-run-project {
    margin: 0 0 clamp(10px, 2vw, 14px); color: var(--muted);
    font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
    max-width: 100%; overflow-wrap: anywhere;
}
.first-run-lead { margin: 0 0 clamp(16px, 3vw, 22px); max-width: 34rem; overflow-wrap: anywhere; }
.first-run-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    width: 100%; max-width: 30rem;
}
.first-run-actions .button { flex: 0 1 auto; min-height: 44px; }
.first-run-note {
    color: var(--muted); font-size: 0.88rem;
    margin: clamp(14px, 2.5vw, 20px) 0 0; max-width: 34rem; overflow-wrap: anywhere;
}

.tour-en { display: block; color: var(--muted); font-size: 0.88em; margin-top: 3px; }
.tour-en.inline { display: inline; margin: 0 0 0 6px; }
.tour-excerpt { font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; overflow-wrap: anywhere; }
.tour-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Guided Discovery: the conversation ── */
.gd-chapter {
    color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 10px;
}
.gd-chapter:focus-visible { outline: 2px solid var(--jade, #315642); outline-offset: 3px; }
.gd-transcript { display: flex; flex-direction: column; gap: 10px; }
.gd-turn, .gd-composing-row { display: flex; gap: 9px; align-items: flex-end; max-width: 100%; }
.gd-turn.me { justify-content: flex-end; }
.gd-avatar { flex: 0 0 34px; width: 34px; height: 34px; align-self: flex-end; }
.gd-avatar svg { width: 100%; height: 100%; display: block; }
/* Keeps consecutive messages aligned under the one bubble that shows the face. */
.gd-avatar-spacer { visibility: hidden; }
.gd-bubble {
    padding: 11px 14px; border-radius: 15px;
    border: 1px solid var(--line, rgba(0,0,0,0.14));
    background: var(--surface); color: var(--ink);
    border-bottom-left-radius: 5px;
    max-width: 46ch; overflow-wrap: anywhere;
}
.gd-bubble.wide { max-width: 100%; flex: 1 1 auto; padding: 0; border: 0; background: none; }
.gd-bubble.me {
    background: var(--tour-welcome-bg, rgba(244, 223, 189, 0.32));
    color: var(--ink);
    border-bottom-left-radius: 15px; border-bottom-right-radius: 5px;
    font-weight: 600;
}
.gd-bubble.quip { background: transparent; border-style: dashed; }
.gd-bubble.quip .gd-quip { color: var(--muted); font-style: italic; }
html[data-appearance="dark"] .gd-bubble.me { background: rgba(244, 223, 189, 0.10); }
@media (prefers-color-scheme: dark) { html[data-appearance="system"] .gd-bubble.me { background: rgba(244, 223, 189, 0.10); } }

.gd-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; cursor: pointer; }
.gd-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--jade, #315642); opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
    .gd-typing i { animation: gdBlink 1s infinite; }
    .gd-typing i:nth-child(2) { animation-delay: 0.16s; }
    .gd-typing i:nth-child(3) { animation-delay: 0.32s; }
    .gd-turn.gd-new { animation: gdRise 200ms ease-out both; }
}
@keyframes gdBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
@keyframes gdRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gd-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.gd-choice {
    min-height: 44px; padding: 10px 17px; border-radius: 999px;
    border: 1.5px solid var(--clay, #b85c1a); background: transparent;
    color: var(--clay, #b85c1a); font: inherit; font-weight: 600;
    cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere;
}
.gd-choice:hover { background: var(--clay, #b85c1a); color: #fff; }
.gd-choice:focus-visible { outline: 3px solid var(--jade, #315642); outline-offset: 2px; }
.gd-final { justify-content: flex-end; }

/* Continuation control: the student, not a timer, decides when the explanation
   after a live preview arrives. Quieter than a reply — it is a nudge onward,
   not a fork in the conversation. */
.gd-continue { border-style: dashed; font-weight: 600; }

/* "New message ↓" — shown only when the student has scrolled up to re-read.
   Pinned to the viewport so it cannot scroll away, and clear of the home bar. */
.gd-unread {
    position: fixed; z-index: 60;
    left: 50%; transform: translateX(-50%);
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    min-height: 44px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--primary-bg);
    background: var(--primary-bg); color: var(--primary-ink);
    font: inherit; font-weight: 650; cursor: pointer;
    box-shadow: 0 6px 20px rgba(4, 20, 13, 0.28);
}
.gd-unread:focus-visible { outline: 3px solid var(--clay, #b85c1a); outline-offset: 3px; }

.gd-demo {
    padding: 12px 14px;
    border: 1px dashed var(--line, rgba(0,0,0,0.22)); border-radius: 12px;
    background: var(--tour-demo-bg, rgba(0,0,0,0.025));
}
html[data-appearance="dark"] .gd-demo { background: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: dark) { html[data-appearance="system"] .gd-demo { background: rgba(255,255,255,0.04); } }
.gd-demo-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
.gd-suggestion { margin: 4px 0; font-style: italic; overflow-wrap: anywhere; }
.gd-compare-tabs { display: flex; gap: 6px; margin-bottom: 9px; }
.gd-compare-tabs button {
    min-height: 44px; padding: 6px 16px; border-radius: 999px;
    border: 1px solid var(--line, rgba(0,0,0,0.18)); background: transparent;
    color: inherit; font: inherit; cursor: pointer;
}
.gd-compare-tabs button[aria-selected="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }

/* ── Live annotated previews ── */
.gd-preview {
    margin: 0; border: 1px solid var(--line, rgba(0,0,0,0.16)); border-radius: 13px;
    overflow: hidden; background: var(--tour-demo-bg, rgba(0,0,0,0.02)); color: var(--ink);
}
html[data-appearance="dark"] .gd-preview { background: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: dark) { html[data-appearance="system"] .gd-preview { background: rgba(255,255,255,0.04); } }
.gd-preview-head {
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
    padding: 9px 12px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.12));
}
.gd-preview-badge {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
    background: var(--primary-bg); color: var(--primary-ink);
}
.gd-preview-caption { font-size: 0.86rem; color: var(--muted); flex: 1 1 12ch; }
/* The surface is a picture of the real component: it is rendered by the real
   renderer, but nothing inside it is operable. The conversation's own controls
   sit outside it. */
.gd-preview-surface {
    pointer-events: none; padding: 10px; max-height: 320px; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 76%, transparent);
    mask-image: linear-gradient(#000 76%, transparent);
}
.gd-preview-surface .panel { border: 0; box-shadow: none; background: none; }
.gd-preview-surface button[disabled] { opacity: 1; }
.gd-preview-expand {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px;
    border: 0; border-top: 1px solid var(--line, rgba(0,0,0,0.12));
    background: none; font: inherit; color: var(--jade, #315642); cursor: pointer;
}
.gd-preview--expanded .gd-preview-surface {
    max-height: none; -webkit-mask-image: none; mask-image: none;
}

@media (max-width: 640px) {
    .tour-welcome { flex-direction: column; align-items: stretch; }
    .tour-welcome-actions .button { width: 100%; }
    .first-run { padding: 8px 0 4px; }
    .first-run-actions { flex-direction: column; align-items: stretch; }
    .first-run-actions .button { width: 100%; flex: 0 0 auto; }
    .tour-nav { margin-left: 0; width: 100%; }
    .tour-nav .button { flex: 1 1 auto; }
    .gd-bubble { max-width: 100%; }
    .gd-avatar { flex-basis: 28px; width: 28px; height: 28px; }
    .gd-choice { width: 100%; text-align: center; }
    .gd-preview-surface { max-height: 260px; }
    /* The dialog footer stacks on a phone, so the pill has to clear more of it. */
    .gd-unread { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
    /* Enlarging on a phone gives the sample the full width of the sheet
       instead of shrinking it into an illegible thumbnail. */
    .gd-preview--expanded { margin-inline: -12px; border-radius: 0; }
    .gd-preview--expanded .gd-preview-surface { padding: 12px; }
}

/* Backup is a routine, safe, every-session action. It is deliberately styled
   as an ordinary settings section and kept OUT of .danger-zone, which holds
   only the type-DELETE destructive controls. */
.backup-section { border: 1px solid var(--line); border-radius: 14px; padding: 17px; background: var(--surface); }
.backup-section h3 { color: var(--ink); }

/* Bilingual limitation disclosure, beside the language control.
   Artifact PART 3 rule 2: disclosure, NOT a warning banner and NOT a
   barrier — no alert colouring, no error icon, no confirmation step. */
.bilingual-limitation-note {
    display: grid;
    gap: 4px;
    /* Fluid by default. A fixed ch-based max-width overflowed the header at
       200% zoom (WCAG 1.4.10 reflow), so the measure is capped only when
       there is room for it. */
    width: min(1480px, calc(100% - 28px));
    max-width: 100%;
    min-width: 0;
    margin: 6px auto 0;
    justify-items: end;
    text-align: right;
    color: var(--ink);
    font-size: .74rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
@media (max-width: 700px) { .bilingual-limitation-note { justify-items: start; text-align: left; width: calc(100% - 18px); } }