:root {
    color-scheme: light;
    --ink: #18323a;
    --ink-soft: #50666f;
    --paper: #f7fbff;
    --surface: #ffffff;
    --surface-soft: #f9fcff;
    --surface-muted: #eef8fb;
    --surface-raised: #ffffff;
    --mist: #eaf7ff;
    --line: #cfe2df;
    --teal: #2fbf9f;
    --teal-deep: #177f70;
    --mint: #5bd6b6;
    --amber: #ffd166;
    --coral: #ff7a59;
    --violet: #5b568f;
    --teal-soft: #e8f8f4;
    --teal-soft-strong: #dff4ec;
    --teal-ink: #155a57;
    --amber-soft: #fff8e8;
    --amber-soft-strong: #fff3d4;
    --amber-ink: #6e5510;
    --danger-soft: #fff0ed;
    --danger-soft-strong: #ffe8e8;
    --danger-ink: #8a1f2d;
    --violet-soft: #f0f2ff;
    --violet-ink: #384b9a;
    --page-muted: #edf8fb;
    --page-warm: #fff8ed;
    --lavender-soft: #f4f1ff;
    --code-ink: #edf8f2;
    --control-contrast: #ffffff;
    --action: #17343a;
    --action-hover: #244f55;
    --footer-bg: #18323a;
    --white: #ffffff;
    --shadow: 0 18px 46px rgba(23, 52, 58, 0.14);
    --control-hover-shadow: 0 10px 22px rgba(23, 52, 58, 0.16);
    --control-active-shadow: 0 4px 10px rgba(23, 52, 58, 0.12);
    --control-focus-ring: rgba(42, 167, 162, 0.28);
    --radius: 8px;
}

/* English placement self-test */
.english-test-shell {
    min-height: 70vh;
    padding: 0 0 76px;
    background: color-mix(in srgb, var(--paper) 86%, var(--teal-soft));
}

.english-test-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.8fr);
    align-items: end;
    gap: 34px;
    padding: 34px 0 26px;
    border-bottom: 1px solid var(--line);
}

.english-test-hero h1 {
    max-width: 780px;
    margin: 6px 0 14px;
    color: var(--ink);
    font-size: 2.75rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.english-test-hero > div > p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.04rem;
    line-height: 1.7;
}

.english-test-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.english-test-facts div {
    min-width: 0;
    padding: 18px;
    text-align: center;
}

.english-test-facts div + div {
    border-left: 1px solid var(--line);
}

.english-test-facts dt {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.english-test-facts dd {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.english-test-layout,
.english-result-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.72fr);
    align-items: start;
    gap: 26px;
    padding-top: 30px;
}

.english-test-main,
.english-result-main,
.english-test-aside,
.english-result-aside {
    min-width: 0;
}

.english-test-main form {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(23, 52, 58, 0.08);
}

.english-test-progress {
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.english-test-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 800;
}

.english-test-progress strong {
    color: var(--teal-deep);
}

.english-progress-track,
.english-score-track {
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 62%, var(--surface-muted));
}

.english-progress-track > span,
.english-score-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
    transition: width 180ms ease;
}

.english-question-list {
    min-height: 470px;
}

.english-test-question {
    min-width: 0;
    min-height: 470px;
    margin: 0;
    padding: 34px;
    border: 0;
}

.english-test-question[hidden] {
    display: none;
}

.english-test-question legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: var(--ink-soft);
}

.english-test-question legend > span {
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--control-contrast);
    background: var(--teal-deep);
    font-size: 0.82rem;
    font-weight: 900;
    place-items: center;
}

.english-test-question legend small,
.english-review-meta span {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.english-test-question h2 {
    max-width: 760px;
    margin: 24px 0;
    color: var(--ink);
    font-size: 1.52rem;
    line-height: 1.35;
    letter-spacing: 0;
}

.english-test-question blockquote,
.english-review-item blockquote {
    margin: 22px 0 0;
    padding: 17px 19px;
    border-left: 4px solid var(--amber);
    color: var(--ink);
    background: var(--amber-soft);
    font-size: 0.95rem;
    font-style: normal;
    line-height: 1.65;
}

.english-answer-options {
    display: grid;
    gap: 10px;
}

.english-answer-options label {
    display: grid;
    grid-template-columns: 22px 32px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 11px 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.english-answer-options label:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.english-answer-options label:has(input:checked) {
    border-color: var(--teal-deep);
    background: var(--teal-soft);
    box-shadow: inset 4px 0 0 var(--teal-deep);
}

.english-answer-options input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--teal-deep);
}

.english-option-letter {
    display: grid;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 900;
    place-items: center;
}

.english-answer-options label:has(input:checked) .english-option-letter {
    border-color: var(--teal-deep);
    color: var(--control-contrast);
    background: var(--teal-deep);
}

.english-test-question.has-error .english-answer-options {
    padding: 5px;
    border: 1px solid var(--coral);
    border-radius: 8px;
}

.english-question-error,
.english-test-error {
    color: var(--danger-ink);
    background: var(--danger-soft);
    font-weight: 800;
}

.english-question-error {
    margin: 12px 0 0;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.84rem;
}

.english-test-error {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--coral) 55%, var(--line));
    border-radius: 8px;
}

.english-test-nav {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr minmax(155px, auto);
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

.english-test-nav > span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
}

.english-test-nav .button:last-child {
    grid-column: 3;
}

.english-test-nav .button[hidden] {
    display: none;
}

.english-test-nav button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.english-noscript-submit {
    margin: 0 34px 34px;
}

.english-test-aside,
.english-result-aside {
    display: grid;
    gap: 16px;
}

.english-test-guidance,
.english-latest-result,
.english-pal-sharing-note,
.vibe-quiz-pal-card,
.english-sharing-panel,
.english-history-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vibe-quiz-pal-card {
    overflow: hidden;
    padding: 0;
}

.vibe-quiz-pal-card > a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 142px;
    color: inherit;
    text-decoration: none;
}

.vibe-quiz-pal-card > a > img {
    width: 100%;
    height: 100%;
    min-height: 142px;
    object-fit: cover;
}

.vibe-quiz-pal-copy {
    display: flex;
    min-width: 0;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
}

.vibe-quiz-pal-copy > small {
    color: var(--teal-deep);
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
}

.vibe-quiz-pal-copy > strong {
    margin-top: 5px;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.25;
}

.vibe-quiz-pal-copy > span {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vibe-quiz-pal-copy > b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--teal-deep);
    font-size: 0.75rem;
}

.vibe-quiz-pal-card > a:hover,
.vibe-quiz-pal-card > a:focus-visible {
    background: var(--teal-soft);
}

.vibe-quiz-pal-card > a:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: -3px;
}

.english-test-guidance h2,
.english-latest-result h2,
.english-sharing-panel h2,
.english-history-panel h2,
.english-pal-sharing-note h2 {
    margin: 5px 0 10px;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.3;
}

.english-test-guidance ul {
    display: grid;
    gap: 11px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.english-test-guidance li {
    position: relative;
    padding-left: 22px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.english-test-guidance li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    content: "";
}

.english-pal-sharing-note {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    background: var(--teal-soft);
}

.english-pal-sharing-note img {
    margin-top: 3px;
}

.english-pal-sharing-note p,
.english-latest-result p,
.english-sharing-panel p,
.english-disclaimer {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

.english-latest-result > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0;
}

.english-latest-result > div strong {
    color: var(--teal-deep);
    font-size: 2rem;
}

.english-latest-result > div span {
    color: var(--ink);
    font-weight: 800;
}

.english-latest-result .text-link {
    display: inline-flex;
    margin-top: 12px;
}

.english-disclaimer {
    padding: 2px 4px;
    font-size: 0.78rem;
}

.english-result-main {
    display: grid;
    gap: 18px;
}

.english-result-summary {
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(23, 52, 58, 0.08);
}

.english-grade-mark {
    position: relative;
    display: grid;
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: conic-gradient(var(--teal) calc(var(--score) * 1%), color-mix(in srgb, var(--line) 65%, var(--surface-muted)) 0);
    place-content: center;
    text-align: center;
}

.english-grade-mark::before {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--surface);
    content: "";
}

.english-grade-mark span,
.english-grade-mark small {
    position: relative;
    z-index: 1;
}

.english-grade-mark span {
    color: var(--ink);
    font-size: 2.8rem;
    font-weight: 950;
    line-height: 1;
}

.english-grade-mark small {
    margin-top: 6px;
    color: var(--ink-soft);
    font-weight: 900;
}

.english-result-copy h2 {
    margin: 4px 0 10px;
    color: var(--ink);
    font-size: 1.8rem;
    letter-spacing: 0;
}

.english-result-copy > p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.65;
}

.english-result-score {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 11px;
    border-radius: 6px;
    color: var(--teal-ink);
    background: var(--teal-soft);
}

.english-result-score strong {
    font-size: 1.15rem;
}

.english-result-score span {
    font-size: 0.8rem;
    font-weight: 800;
}

.english-level-scale {
    display: grid;
    grid-template-columns: repeat(var(--level-count, 6), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    list-style: none;
}

.english-level-scale li {
    position: relative;
    min-width: 0;
    padding: 13px 7px;
    color: var(--ink-soft);
    background: var(--surface);
    text-align: center;
}

.english-level-scale li + li {
    border-left: 1px solid var(--line);
}

.english-level-scale li.is-reached {
    color: var(--teal-ink);
    background: var(--teal-soft);
}

.english-level-scale li.is-current {
    color: var(--control-contrast);
    background: var(--teal-deep);
}

.english-level-scale span,
.english-level-scale small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.english-level-scale span {
    font-weight: 950;
}

.english-level-scale small {
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 800;
}

.english-breakdown,
.english-next-step,
.english-answer-review {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.english-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.english-section-heading h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.3;
}

.english-section-heading > span {
    color: var(--teal-deep);
    font-size: 0.82rem;
    font-weight: 900;
}

.english-score-list {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.english-score-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.english-score-row > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.english-score-row strong {
    color: var(--ink);
}

.english-score-row span {
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.english-band-grid {
    display: grid;
    grid-template-columns: repeat(var(--band-count, 6), minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.english-band-grid > div {
    --band-color: var(--teal);
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
}

.english-band-grid > div:nth-child(2) { --band-color: var(--mint); }
.english-band-grid > div:nth-child(3) { --band-color: var(--amber); }
.english-band-grid > div:nth-child(4) { --band-color: var(--coral); }
.english-band-grid > div:nth-child(5) { --band-color: var(--violet); }
.english-band-grid > div:nth-child(6) { --band-color: var(--teal-deep); }

.english-band-grid strong,
.english-band-grid > div > span {
    display: block;
}

.english-band-grid strong {
    color: var(--ink);
    font-size: 1rem;
}

.english-band-grid > div > span {
    margin: 2px 0 10px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.english-band-grid i {
    display: block;
    overflow: hidden;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
}

.english-band-grid i span {
    display: block;
    height: 100%;
    background: var(--band-color);
}

.english-next-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    background: var(--amber-soft);
}

.english-next-step h2 {
    margin: 4px 0 7px;
    color: var(--ink);
    font-size: 1.12rem;
}

.english-next-step p:last-child {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.english-answer-review {
    padding: 0;
}

.english-answer-review summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 24px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.english-answer-review summary::-webkit-details-marker {
    display: none;
}

.english-answer-review summary span,
.english-answer-review summary strong,
.english-answer-review summary small {
    display: block;
}

.english-answer-review summary small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-weight: 500;
}

.english-answer-review summary b {
    color: var(--teal-deep);
}

.english-review-list {
    border-top: 1px solid var(--line);
}

.english-review-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 15px;
    padding: 22px 24px;
}

.english-review-item + .english-review-item {
    border-top: 1px solid var(--line);
}

.english-review-number {
    display: grid;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--control-contrast);
    background: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    place-items: center;
}

.english-review-item.is-incorrect .english-review-number {
    background: var(--coral);
}

.english-review-meta {
    display: flex;
    gap: 10px;
    color: var(--ink-soft);
}

.english-review-item h3 {
    margin: 8px 0 14px;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.45;
}

.english-review-item dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.english-review-item dl div {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--surface-muted);
}

.english-review-item dt {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.english-review-item dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-weight: 800;
}

.english-review-item > div:last-child > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.55;
}

.english-review-item blockquote {
    margin-top: 10px;
    font-size: 0.86rem;
}

.english-sharing-panel > img {
    margin-bottom: 14px;
}

.english-sharing-panel.is-saved {
    border-color: color-mix(in srgb, var(--mint) 65%, var(--line));
    background: var(--teal-soft);
}

.english-sharing-panel .button {
    width: 100%;
    margin-top: 17px;
}

.english-result-actions {
    display: grid;
    gap: 9px;
}

.english-result-actions .button {
    width: 100%;
}

.english-history-panel ol {
    display: grid;
    gap: 7px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.english-history-panel li a {
    display: grid;
    grid-template-columns: 38px 46px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface-soft);
    text-decoration: none;
}

.english-history-panel li.is-current a,
.english-history-panel li a:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.english-history-panel li strong {
    color: var(--teal-deep);
}

.english-history-panel li span,
.english-history-panel li time {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 800;
}

.english-history-panel li time {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .english-test-hero,
    .english-test-layout,
    .english-result-layout {
        grid-template-columns: 1fr;
    }

    .english-test-hero {
        gap: 26px;
    }

    .english-test-hero h1 {
        font-size: 2.5rem;
    }

    .english-test-facts {
        max-width: 620px;
    }

    .english-test-aside,
    .english-result-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .english-result-actions,
    .english-disclaimer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .english-test-shell {
        padding-bottom: 50px;
    }

    .english-test-hero {
        padding: 28px 0 22px;
    }

    .english-test-hero h1 {
        font-size: 2rem;
    }

    .english-test-layout,
    .english-result-layout {
        padding-top: 20px;
    }

    .english-test-aside,
    .english-result-aside {
        grid-template-columns: 1fr;
    }

    .english-result-actions,
    .english-disclaimer {
        grid-column: auto;
    }

    .english-test-question {
        min-height: 500px;
        padding: 26px 20px;
    }

    .english-question-list {
        min-height: 500px;
    }

    .english-test-question h2 {
        font-size: 1.28rem;
    }

    .english-answer-options label {
        grid-template-columns: 20px 30px minmax(0, 1fr);
        gap: 9px;
        min-height: 62px;
        padding: 10px 11px;
    }

    .english-test-nav {
        grid-template-columns: 1fr 1fr;
        padding: 15px 20px;
    }

    .english-test-nav > span {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .english-test-nav .button:last-child {
        grid-column: 2;
    }

    .english-result-summary {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 26px 20px;
        text-align: center;
    }

    .english-level-scale {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .english-level-scale li:nth-child(4) {
        border-left: 0;
    }

    .english-level-scale li:nth-child(n+4) {
        border-top: 1px solid var(--line);
    }

    .english-score-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .english-band-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .english-review-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        padding: 19px 16px;
    }

    .english-review-item dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .english-test-facts div {
        padding: 14px 7px;
    }

    .english-test-facts dt {
        font-size: 1rem;
    }

    .english-test-facts dd {
        font-size: 0.62rem;
    }

    .english-test-progress {
        padding: 16px 18px;
    }

    .english-result-copy h2 {
        font-size: 1.48rem;
    }

    .english-breakdown,
    .english-next-step {
        padding: 19px 16px;
    }

    .english-band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Public hierarchy, subject discovery, and revision pages */
.site-breadcrumb-band {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
}

.site-breadcrumbs {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 11px 0;
    font-size: 0.82rem;
}

.site-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.site-breadcrumbs li:not(:last-child)::after {
    content: "/";
    color: var(--ink-soft);
    opacity: 0.55;
}

.site-breadcrumbs span[aria-current="page"] {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.interest-directory-hero,
.reflection-directory-hero {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 76%, var(--teal-soft));
}

.interest-track-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.interest-track-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.interest-track-card h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.2;
}

.interest-track-card p {
    position: relative;
    z-index: 1;
    min-height: 2.9em;
    margin: 10px 0 18px;
}

.interest-track-card strong {
    position: relative;
    z-index: 1;
    color: var(--teal-deep);
    font-size: 0.87rem;
}

.interest-detail-hero {
    position: relative;
    border-bottom: 5px solid var(--interest-accent);
    background: color-mix(in srgb, var(--interest-accent) 10%, var(--surface));
}

.interest-detail-hero .section-inner {
    max-width: 940px;
    margin-left: max(24px, calc((100vw - 1180px) / 2));
}

.interest-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.interest-pal-card .profile-card-body > p:not(.archetype) {
    min-height: 3.8em;
}

.topic-directory-hero {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--violet-soft));
}

.topic-directory-hero.is-category-landing {
    border-bottom: 4px solid var(--topic-accent);
    background: color-mix(in srgb, var(--topic-accent) 9%, var(--surface));
}

.topic-directory-hero .section-inner {
    display: grid;
    gap: 17px;
}

.topic-directory-hero .section-inner > p:not(.eyebrow) {
    max-width: 800px;
    margin: 0;
}

.topic-category-starts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    max-width: 980px;
}

.topic-category-starts strong {
    color: var(--ink);
    font-size: 0.78rem;
}

.topic-category-starts a {
    color: var(--teal-deep);
    font-size: 0.8rem;
    font-weight: 850;
    text-underline-offset: 3px;
}

.topic-category-starts a:hover {
    color: var(--ink);
}

.topic-search-form {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(220px, 0.65fr) auto auto;
    align-items: end;
    gap: 10px;
    max-width: 980px;
}

.topic-search-form label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.topic-search-form label > div {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
}

.topic-search-form input,
.topic-search-form select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
}

.topic-search-form input {
    min-height: 42px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.topic-search-form select {
    padding: 0 36px 0 13px;
}

.topic-search-form label > div:focus-within,
.topic-search-form select:focus {
    border-color: var(--teal);
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 1px;
}

.topic-search-form .button {
    min-height: 46px;
}

.topic-category-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.topic-category-heading h2,
.topic-category-heading p {
    margin: 0;
}

.topic-category-heading h2 {
    margin-top: 5px;
}

.topic-category-heading > span {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.topic-category-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 38px;
}

.topic-category-nav a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 68px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--topic-category-color, var(--teal));
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.topic-category-nav a:hover {
    border-color: var(--topic-category-color, var(--teal));
    box-shadow: var(--control-hover-shadow);
    transform: translateY(-2px);
}

.topic-category-nav a.is-active {
    border-color: var(--topic-category-color, var(--teal));
    background: color-mix(in srgb, var(--topic-category-color, var(--teal)) 8%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--topic-category-color, var(--teal)) 32%, transparent);
}

.topic-category-nav img {
    width: 24px;
    height: 24px;
    padding: 3px;
}

.topic-category-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.topic-category-copy strong,
.topic-category-copy em {
    min-width: 0;
}

.topic-category-copy strong {
    line-height: 1.18;
}

.topic-category-copy em {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-category-nav small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 25px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--surface-muted);
    font-size: 0.7rem;
    font-weight: 900;
}

.topic-category-dot {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--topic-category-color);
}

.topic-directory-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.topic-directory-toolbar h2,
.topic-directory-toolbar p {
    margin: 0;
}

.topic-directory-toolbar h2 {
    margin-top: 5px;
    scroll-margin-top: 105px;
}

.topic-directory-toolbar > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 900;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.topic-pagination {
    margin-top: 28px;
}

.topic-card {
    display: flex;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--topic-accent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 25px rgba(23, 52, 58, 0.06);
    flex-direction: column;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.topic-card:hover {
    border-color: color-mix(in srgb, var(--topic-accent) 54%, var(--line));
    box-shadow: var(--control-hover-shadow);
    transform: translateY(-3px);
}

.topic-card-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--topic-accent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.topic-card-heading > a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.topic-card-heading > a:hover {
    color: var(--ink);
}

.topic-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--topic-accent) 14%, var(--surface));
}

.topic-card h2 {
    margin: 14px 0 8px;
    font-size: 1.22rem;
    line-height: 1.18;
}

.topic-card h2 a {
    color: var(--ink);
    text-decoration: none;
}

.topic-card h2 a:hover {
    color: var(--teal-deep);
}

.topic-card > p {
    display: -webkit-box;
    min-height: 4.65em;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.topic-card-outcomes {
    display: grid;
    gap: 7px;
    min-height: 4.4em;
    margin: 14px 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.35;
    list-style: none;
}

.topic-card-outcomes li {
    display: -webkit-box;
    position: relative;
    overflow: hidden;
    padding-left: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.topic-card-outcomes li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 7px;
    height: 7px;
    border: 2px solid var(--topic-accent);
    border-radius: 50%;
    content: "";
}

.topic-card-meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 3.4em;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.73rem;
    font-weight: 800;
}

.topic-card-meta a {
    color: var(--teal-deep);
}

.topic-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
}

.topic-card-link span {
    color: var(--topic-accent);
    transition: transform 160ms ease;
}

.topic-card-link:hover span {
    transform: translateX(3px);
}

.topic-empty {
    padding: 42px 22px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
    background: var(--surface);
}

.topic-empty h2 {
    margin: 13px 0 7px;
}

.topic-empty p {
    max-width: 560px;
    margin: 0 auto 18px;
    color: var(--ink-soft);
}

.topic-directory-note .section-inner {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 30px;
}

.topic-directory-note .section-inner > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topic-directory-note .section-inner > div > img {
    box-sizing: content-box;
    padding: 11px;
    border-radius: 8px;
    background: var(--surface);
}

.topic-directory-note h2,
.topic-directory-note p {
    margin: 0;
}

.topic-directory-note h2 {
    margin-top: 5px;
    font-size: 1.45rem;
}

.topic-directory-note .section-inner > p {
    color: var(--ink-soft);
    line-height: 1.65;
}

.topic-detail-hero {
    position: relative;
    border-bottom: 5px solid var(--topic-accent);
    background: color-mix(in srgb, var(--topic-accent) 10%, var(--surface));
}

.topic-detail-hero .section-inner {
    display: grid;
    max-width: 1040px;
    margin-left: max(24px, calc((100vw - 1180px) / 2));
    gap: 16px;
}

.topic-detail-hero .section-inner > p:not(.eyebrow) {
    max-width: 780px;
    margin: 0;
}

.topic-detail-hero .eyebrow a {
    color: inherit;
    text-underline-offset: 3px;
}

.topic-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.topic-detail-hero .topic-hero-note {
    max-width: 760px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.5;
}

.topic-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
    margin: 7px 0 0;
    border: 1px solid color-mix(in srgb, var(--topic-accent) 32%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.topic-hero-facts > div {
    min-width: 0;
    padding: 13px 16px;
}

.topic-hero-facts > div + div {
    border-left: 1px solid var(--line);
}

.topic-hero-facts dt {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.topic-hero-facts dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 900;
}

.topic-hero-facts a {
    color: var(--teal-deep);
}

.topic-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.62fr);
    align-items: start;
    gap: 26px;
}

.topic-overview-copy h2 {
    margin: 6px 0 12px;
    font-size: 2rem;
}

.topic-overview-copy > p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.75;
}

.topic-overview-copy h3 {
    margin: 30px 0 14px;
    font-size: 1.2rem;
}

.topic-outcome-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic-outcome-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
}

.topic-outcome-list li > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--control-contrast);
    background: var(--topic-accent);
    font-size: 0.76rem;
    font-weight: 900;
}

.topic-outcome-list p {
    margin: 0;
    color: var(--ink);
    line-height: 1.4;
}

.topic-question-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 17px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--topic-accent) 38%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--topic-accent) 8%, var(--surface));
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.07);
}

.topic-question-panel > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.topic-question-panel > div > img {
    box-sizing: content-box;
    padding: 9px;
    border-radius: 8px;
    background: var(--surface);
}

.topic-question-panel h2,
.topic-question-panel p {
    margin: 0;
}

.topic-question-panel h2 {
    margin-top: 3px;
    font-size: 1.3rem;
}

.topic-question-panel ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topic-question-panel li {
    padding: 12px;
    border-left: 3px solid var(--topic-accent);
    color: var(--ink-soft);
    background: var(--surface);
    font-size: 0.88rem;
    line-height: 1.5;
}

.topic-route-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.topic-route-grid article {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.topic-route-grid article > span {
    color: var(--topic-accent);
    font-size: 1.25rem;
    font-weight: 900;
}

.topic-route-grid h3,
.topic-route-grid p {
    margin: 0;
}

.topic-route-grid h3 {
    font-size: 1rem;
}

.topic-route-grid p {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.topic-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.topic-resource-card {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 9px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.topic-resource-card > span {
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.topic-resource-card h3,
.topic-resource-card p {
    margin: 0;
}

.topic-resource-card p,
.topic-resource-card small {
    color: var(--ink-soft);
}

.topic-resource-card .button {
    justify-self: start;
    margin-top: 6px;
}

.topic-pal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.topic-pal-section .section-heading > div > p:last-child {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--ink-soft);
}

#topic-pals-title {
    scroll-margin-top: 128px;
}

.topic-pal-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
}

.topic-pal-card .profile-card-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.topic-pal-card .profile-card-body > p:not(.archetype) {
    min-height: 3.8em;
}

.topic-pal-grid .topic-pal-card .profile-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
    margin-top: auto;
    padding-top: 14px;
}

.topic-pal-card .profile-card-actions .card-action-link,
.topic-pal-card .profile-card-actions .card-action-button:not(.icon-only) {
    flex: 1 1 0;
    min-width: 0;
}

.topic-pal-card .profile-card-actions .card-action-button.icon-only {
    flex: 0 0 38px;
    width: 38px;
}

.topic-conversion-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.topic-conversion-panel h2,
.topic-conversion-panel p {
    margin: 0;
}

.topic-conversion-panel h2 {
    margin-top: 5px;
    font-size: 1.4rem;
}

.topic-conversion-panel > div:first-child > p:last-child {
    max-width: 720px;
    margin-top: 8px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.topic-conversion-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 430px;
}

.topic-conversion-actions small {
    width: 100%;
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-align: right;
}

.topic-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.topic-related-grid > a {
    display: flex;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--topic-accent);
    border-radius: 8px;
    color: inherit;
    background: var(--surface);
    text-decoration: none;
    flex-direction: column;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.topic-related-grid > a:hover {
    border-color: color-mix(in srgb, var(--topic-accent) 56%, var(--line));
    box-shadow: var(--control-hover-shadow);
    transform: translateY(-3px);
}

.topic-related-grid span {
    color: var(--topic-accent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.topic-related-grid h3 {
    margin: 10px 0 7px;
}

.topic-related-grid p {
    margin: 0 0 15px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.topic-related-grid strong {
    margin-top: auto;
    color: var(--teal-deep);
    font-size: 0.84rem;
}

@media (max-width: 980px) {
    .topic-search-form {
        grid-template-columns: minmax(0, 1.25fr) minmax(210px, 0.75fr);
    }

    .topic-search-form .button {
        width: 100%;
    }

    .topic-category-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .topic-grid,
    .topic-route-grid,
    .topic-pal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-overview-layout,
    .topic-directory-note .section-inner,
    .topic-conversion-panel {
        grid-template-columns: 1fr;
    }

    .topic-question-panel {
        position: static;
    }

    .topic-conversion-actions {
        justify-content: flex-start;
        max-width: none;
    }

    .topic-conversion-actions small {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .topic-search-form,
    .topic-grid,
    .topic-route-grid,
    .topic-resource-grid,
    .topic-pal-grid,
    .topic-related-grid,
    .topic-hero-facts {
        grid-template-columns: 1fr;
    }

    .topic-search-form .button,
    .topic-search-reset {
        width: 100%;
    }

    .topic-directory-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic-category-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic-category-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-category-nav a {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .topic-category-nav small {
        grid-column: 2;
        justify-self: start;
    }

    .topic-category-copy em {
        white-space: normal;
    }

    .topic-card > p,
    .topic-card-outcomes,
    .topic-card-meta {
        min-height: 0;
    }

    .topic-detail-hero .section-inner {
        margin-left: auto;
    }

    .topic-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .topic-category-starts {
        align-items: flex-start;
        flex-direction: column;
    }

    .topic-conversion-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .topic-conversion-actions .button {
        width: 100%;
    }

    .topic-hero-facts > div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .topic-overview-copy h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 420px) {
    .topic-category-nav {
        grid-template-columns: 1fr;
    }
}

.reflection-set-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.reflection-set-grid-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.reflection-set-card {
    display: flex;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.06);
    flex-direction: column;
}

.reflection-set-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.reflection-set-card-top strong {
    color: var(--teal-deep);
}

.reflection-set-card h2,
.reflection-set-card h3 {
    margin: 17px 0 0;
    font-size: 1.25rem;
    line-height: 1.18;
}

.reflection-set-card h2 a,
.reflection-set-card h3 a {
    color: var(--ink);
}

.reflection-set-card > p {
    margin: 10px 0 20px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.reflection-set-card > .button,
.reflection-set-card > .text-link,
.reflection-set-card > .activity-card-link {
    margin-top: auto;
}

.reflection-set-meta {
    display: grid;
    gap: 8px;
    margin: auto 0 18px;
}

.reflection-set-meta div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    font-size: 0.82rem;
}

.reflection-set-meta dt {
    color: var(--ink-soft);
    font-weight: 900;
}

.reflection-set-meta dd {
    margin: 0;
    color: var(--ink);
}

.reflection-quality-inner,
.reflection-review-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 56px;
    align-items: center;
}

.reflection-quality-inner h2,
.reflection-review-inner h2 {
    margin: 6px 0 0;
}

.reflection-quality-inner > p,
.reflection-review-inner p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

.reflection-hero {
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--teal-soft) 72%, var(--surface));
}

.reflection-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
    gap: 54px;
    align-items: center;
}

.reflection-hero h1 {
    max-width: 780px;
    margin: 8px 0 14px;
    font-size: 3.9rem;
    line-height: 1.04;
    letter-spacing: 0;
}

.reflection-hero h1 + p {
    max-width: 700px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.65;
}

.reflection-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.reflection-hero-meta span {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.79rem;
    font-weight: 900;
}

.reflection-progress-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 16px 34px rgba(23, 52, 58, 0.08);
}

.reflection-progress-panel > span {
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.reflection-progress-panel strong {
    display: block;
    margin: 7px 0 12px;
    color: var(--ink);
    font-size: 2rem;
}

.reflection-progress-panel progress {
    display: block;
    width: 100%;
    height: 10px;
    accent-color: var(--teal);
}

.reflection-progress-panel p {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.reflection-toolbar-band {
    position: sticky;
    z-index: 5;
    top: 70px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
}

.reflection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.reflection-toolbar p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.83rem;
}

.reflection-toolbar > div {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.flashcard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flashcard {
    min-width: 0;
}

.flashcard article {
    display: flex;
    height: 100%;
    min-height: 310px;
    padding: 24px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--amber);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.07);
    flex-direction: column;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.flashcard.is-known article {
    border-color: color-mix(in srgb, var(--teal) 64%, var(--line));
    border-top-color: var(--teal);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--teal) 14%, transparent);
}

.flashcard-number {
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.flashcard h3 {
    margin: 14px 0 20px;
    font-size: 1.28rem;
    line-height: 1.35;
}

.flashcard-answer {
    margin-top: auto;
    padding: 17px;
    border-left: 4px solid var(--teal);
    border-radius: 0 7px 7px 0;
    background: var(--surface-soft);
}

.flashcard-answer span {
    display: block;
    margin-bottom: 6px;
    color: var(--teal-deep);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.flashcard-answer p {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.55;
}

.flashcard-known {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 7px;
    min-height: 38px;
    margin-top: 18px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
}

.flashcard-known:hover,
.flashcard-known[aria-pressed="true"] {
    border-color: var(--teal);
    color: var(--teal-deep);
    background: var(--teal-soft);
}

.reflection-reference-list {
    display: grid;
    gap: 9px;
}

.reflection-reference-list a {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--teal-deep);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 900;
}

@media (max-width: 1080px) {
    .reflection-set-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .interest-track-grid,
    .reflection-set-grid,
    .reflection-set-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reflection-hero-inner,
    .reflection-quality-inner,
    .reflection-review-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .reflection-toolbar-band {
        position: static;
    }
}

@media (max-width: 640px) {
    .site-breadcrumbs {
        width: min(100% - 32px, 1180px);
    }

    .site-breadcrumbs span[aria-current="page"] {
        max-width: 220px;
    }

    .interest-track-grid,
    .reflection-set-grid,
    .reflection-set-grid-compact,
    .flashcard-grid {
        grid-template-columns: 1fr;
    }

    .interest-detail-hero .section-inner {
        margin-left: auto;
    }

    .reflection-hero {
        padding: 44px 0;
    }

    .reflection-hero h1 {
        font-size: 2.3rem;
    }

    .reflection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .reflection-toolbar > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reflection-toolbar .button {
        width: 100%;
        padding-inline: 9px;
    }

    .flashcard article {
        min-height: 0;
    }
}

/* Account message center */
.message-center-shell {
    min-height: 70vh;
    padding: 34px 0 72px;
    background: var(--surface-soft);
}

.message-center-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding: 8px 0 28px;
}

.message-center-hero h1 {
    margin: 5px 0 8px;
    color: var(--ink);
    font-size: 2.5rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.message-center-hero > div:first-child > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.message-center-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.message-center-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--surface);
    font-size: 0.76rem;
    font-weight: 800;
}

.message-center-summary > span strong {
    color: var(--ink);
    font-size: 1rem;
}

.message-center-layout {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    min-height: 690px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 18px 46px rgba(23, 52, 58, 0.08);
}

.message-center-inbox {
    min-width: 0;
    padding: 18px 12px;
    border-right: 1px solid var(--line);
    background: var(--surface-soft);
}

.message-center-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 8px 14px;
}

.message-center-inbox-head h2 {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 1.08rem;
}

.message-center-inbox-head > span {
    display: grid;
    min-width: 29px;
    height: 29px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--teal-deep);
    background: var(--teal-soft);
    font-size: 0.74rem;
    font-weight: 900;
    place-items: center;
}

.message-center-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 4px 12px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.message-center-search:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}

.message-center-search input {
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.message-center-conversations {
    display: grid;
    max-height: 590px;
    overflow-y: auto;
    gap: 3px;
    scrollbar-width: thin;
}

.message-center-conversation {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: inherit;
}

.message-center-conversation:hover {
    border-color: var(--line);
    background: var(--surface);
}

.message-center-conversation.is-active {
    border-color: color-mix(in srgb, var(--teal) 56%, var(--line));
    background: var(--teal-soft);
    box-shadow: inset 3px 0 0 var(--teal-deep);
}

.message-center-conversation[hidden] {
    display: none;
}

.message-center-conversation > img {
    width: 46px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
}

.message-center-conversation > span {
    display: grid;
    min-width: 0;
}

.message-center-conversation strong,
.message-center-conversation small,
.message-center-conversation time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-center-conversation strong {
    color: var(--ink);
    font-size: 0.86rem;
}

.message-center-conversation small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.73rem;
}

.message-center-conversation time {
    margin-top: 4px;
    color: var(--teal-deep);
    font-size: 0.64rem;
    font-weight: 800;
}

.message-center-conversation > b {
    min-width: 23px;
    padding: 4px 5px;
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--surface-muted);
    font-size: 0.64rem;
    text-align: center;
}

.message-center-filter-empty,
.message-center-inbox-empty {
    margin: 12px 6px;
    padding: 18px 12px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

.message-center-thread {
    display: flex;
    min-width: 0;
    background: var(--surface);
    flex-direction: column;
}

.message-center-thread-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.message-center-thread-avatar,
.message-center-thread-avatar img {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 7px;
}

.message-center-thread-avatar img {
    object-fit: cover;
}

.message-center-thread-head h2 {
    margin: 2px 0 2px;
    color: var(--ink);
    font-size: 1.16rem;
}

.message-center-thread-head h2 a {
    color: inherit;
}

.message-center-thread-head > div:nth-child(2) > p:last-child {
    overflow: hidden;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-center-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-center-page-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.message-center-page-nav a:last-child {
    text-align: right;
}

.message-center-message-list {
    display: flex;
    min-height: 520px;
    padding: 28px 24px;
    gap: 16px;
    background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
    flex: 1;
    flex-direction: column;
}

.message-center-message {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: end;
    gap: 9px;
    max-width: min(78%, 760px);
}

.message-center-message.is-user {
    display: flex;
    align-self: flex-end;
}

.message-center-message.is-activity {
    display: flex;
    width: fit-content;
    max-width: min(92%, 660px);
    align-self: center;
}

.message-center-message.is-activity > div {
    min-width: 0;
}

.message-center-message.is-activity .message-center-message-copy {
    padding: 8px 11px;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 7px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--teal-soft) 52%, var(--surface));
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.4;
    box-shadow: none;
}

.message-center-message.is-activity footer {
    justify-content: center;
}

.message-center-message-avatar,
.message-center-message-avatar img {
    display: block;
    width: 34px;
    height: 38px;
    border-radius: 5px;
}

.message-center-message-avatar img {
    object-fit: cover;
}

.message-center-message-copy {
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 8px 2px;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.6;
    box-shadow: 0 6px 15px rgba(23, 52, 58, 0.05);
}

.message-center-message.is-user .message-center-message-copy {
    border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
    border-radius: 8px 8px 2px 8px;
    background: var(--teal-soft);
}

.message-center-message-copy p {
    margin: 0;
}

.message-center-message-copy p + p,
.message-center-message-copy p + figure,
.message-center-message-copy figure + p {
    margin-top: 12px;
}

.message-center-message-copy code:not([data-activity-code]) {
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--teal-deep);
    background: var(--surface-muted);
    font-size: 0.9em;
}

.message-center-code {
    max-width: 100%;
    margin: 12px 0 0;
}

.message-center-message footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 3px 0;
    color: var(--ink-soft);
    font-size: 0.64rem;
}

.message-center-message footer span {
    color: var(--ink);
    font-weight: 900;
}

.message-center-message footer small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--teal-deep);
    font-weight: 800;
}

.message-center-message footer time {
    margin-left: auto;
}

.message-center-thread-empty {
    display: grid;
    min-height: 560px;
    padding: 40px;
    align-content: center;
    justify-items: center;
    color: var(--ink-soft);
    text-align: center;
}

.message-center-thread-empty > img {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 50%;
    background: var(--teal-soft);
}

.message-center-thread-empty h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.2rem;
}

.message-center-thread-empty p {
    margin: 7px 0 18px;
}

.message-center-thread-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 9px 20px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 800;
}

.message-center-thread-footer form {
    margin: 0;
}

.message-center-thread-footer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    color: var(--danger-ink);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.message-center-empty {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.message-center-empty > div:first-child {
    max-width: 620px;
}

.message-center-empty h2 {
    margin: 5px 0 24px;
    color: var(--ink);
    font-size: 1.5rem;
}

.message-center-starters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.message-center-starters article {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-soft);
}

.message-center-starters article > a,
.message-center-starters article > a img {
    display: block;
    width: 82px;
    height: 116px;
}

.message-center-starters article > a img {
    object-fit: cover;
}

.message-center-starters article > div {
    display: flex;
    min-width: 0;
    padding: 12px;
    flex-direction: column;
}

.message-center-starters h3 {
    margin: 0;
    font-size: 0.94rem;
}

.message-center-starters h3 a {
    color: var(--ink);
}

.message-center-starters p {
    display: -webkit-box;
    overflow: hidden;
    margin: 4px 0 8px;
    color: var(--ink-soft);
    font-size: 0.7rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.message-center-starters button {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    border: 0;
    color: var(--teal-deep);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 980px) {
    .message-center-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .message-center-summary {
        justify-content: flex-start;
    }

    .message-center-layout {
        grid-template-columns: 1fr;
    }

    .message-center-inbox {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .message-center-conversations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 270px;
    }

    .message-center-starters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .message-center-shell {
        padding: 22px 0 48px;
    }

    .message-center-hero h1 {
        font-size: 2rem;
    }

    .message-center-summary > span {
        flex: 1;
        justify-content: center;
    }

    .message-center-summary .button {
        width: 100%;
    }

    .message-center-layout {
        overflow: visible;
    }

    .message-center-conversations {
        grid-template-columns: 1fr;
        max-height: 260px;
    }

    .message-center-thread-head {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 14px;
    }

    .message-center-thread-avatar,
    .message-center-thread-avatar img {
        width: 52px;
        height: 52px;
    }

    .message-center-thread-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .message-center-thread-actions .button {
        width: 100%;
    }

    .message-center-page-nav {
        padding: 9px 14px;
        font-size: 0.66rem;
    }

    .message-center-message-list {
        min-height: 440px;
        padding: 20px 12px;
    }

    .message-center-message {
        max-width: 94%;
    }

    .message-center-message-copy {
        padding: 11px 12px;
        font-size: 0.88rem;
    }

    .message-center-message footer {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .message-center-message footer time {
        width: 100%;
        margin-left: 0;
    }

    .message-center-thread-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .message-center-empty {
        padding: 22px 16px;
    }

    .message-center-starters {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8f3f0;
    --ink-soft: #a9c1bd;
    --paper: #0e1719;
    --surface: #162427;
    --surface-soft: #192a2d;
    --surface-muted: #1b2d30;
    --surface-raised: #203437;
    --mist: #1a3230;
    --line: #365154;
    --teal: #49bdb6;
    --teal-deep: #83ddd4;
    --mint: #63d6aa;
    --amber: #efba63;
    --coral: #ff8475;
    --violet: #929ff2;
    --teal-soft: #173a37;
    --teal-soft-strong: #1e4944;
    --teal-ink: #91e4db;
    --amber-soft: #372e1e;
    --amber-soft-strong: #46381e;
    --amber-ink: #f0c96f;
    --danger-soft: #3b2223;
    --danger-soft-strong: #4a2628;
    --danger-ink: #ffaaa1;
    --violet-soft: #292b48;
    --violet-ink: #b8c0ff;
    --page-muted: #132528;
    --page-warm: #25241e;
    --lavender-soft: #27263b;
    --code-ink: #edf8f2;
    --control-contrast: #ffffff;
    --action: #25756f;
    --action-hover: #2f8f87;
    --footer-bg: #091214;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

html[data-theme="true-dark"] {
    color-scheme: dark;
    --ink: #f2f2f3;
    --ink-soft: #b8b8bf;
    --paper: #0f0f10;
    --surface: #1b1b1f;
    --surface-soft: #202024;
    --surface-muted: #28282d;
    --surface-raised: #303036;
    --mist: #232327;
    --line: #414148;
    --teal: #5b9cf5;
    --teal-deep: #9bc2ff;
    --mint: #64cf95;
    --amber: #e8b35e;
    --coral: #f27c75;
    --violet: #a89af4;
    --teal-soft: #1c2d45;
    --teal-soft-strong: #243b59;
    --teal-ink: #b8d4ff;
    --amber-soft: #362d20;
    --amber-soft-strong: #45391f;
    --amber-ink: #f2cb7d;
    --danger-soft: #3a2325;
    --danger-soft-strong: #48292c;
    --danger-ink: #ffaaa5;
    --violet-soft: #2d2943;
    --violet-ink: #d0c7ff;
    --page-muted: #171719;
    --page-warm: #1d1d20;
    --lavender-soft: #242429;
    --code-ink: #f1f1f2;
    --control-contrast: #ffffff;
    --action: #2563d9;
    --action-hover: #3478ea;
    --footer-bg: #09090a;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
}

html[data-theme="true-dark"] :is(
    .dashboard-shell,
    .call-history-shell,
    .account-shell
) {
    background: linear-gradient(135deg, var(--page-muted), var(--surface-soft) 52%, var(--surface-muted));
}

html[data-theme="balanced"] {
    color-scheme: light;
    --ink: #1b383d;
    --ink-soft: #506a6e;
    --paper: #e8f0ee;
    --surface: #f8fbfa;
    --surface-soft: #f1f6f4;
    --surface-muted: #e3eeea;
    --surface-raised: #ffffff;
    --mist: #dcebe5;
    --line: #b8cec7;
    --teal: #298f87;
    --teal-deep: #176e68;
    --mint: #4dbd91;
    --amber: #e6a53f;
    --coral: #dc6658;
    --violet: #6673c9;
    --teal-soft: #dcefeb;
    --teal-soft-strong: #cfe7e1;
    --teal-ink: #145b56;
    --amber-soft: #fbf3df;
    --amber-soft-strong: #f6e8c5;
    --amber-ink: #69500d;
    --danger-soft: #f9e9e6;
    --danger-soft-strong: #f4dcda;
    --danger-ink: #7d2630;
    --violet-soft: #e9eaf6;
    --violet-ink: #3f4b91;
    --page-muted: #dfeae7;
    --page-warm: #f2eee2;
    --lavender-soft: #eeeaf6;
    --action: #244d52;
    --action-hover: #316269;
    --footer-bg: #243d41;
    --shadow: 0 16px 38px rgba(27, 56, 61, 0.13);
}

html[data-theme="slate-balanced"] {
    color-scheme: light;
    --ink: #1b3039;
    --ink-soft: #526873;
    --paper: #e7edf2;
    --surface: #f8fafc;
    --surface-soft: #f0f4f7;
    --surface-muted: #e3eaf0;
    --surface-raised: #ffffff;
    --mist: #dce8eb;
    --line: #bccbd4;
    --teal: #2b7481;
    --teal-deep: #1a5865;
    --mint: #48ad8d;
    --amber: #dfa747;
    --coral: #d7665b;
    --violet: #5868c7;
    --teal-soft: #deecef;
    --teal-soft-strong: #cfe2e6;
    --teal-ink: #174f5a;
    --amber-soft: #f9f1df;
    --amber-soft-strong: #f3e5c3;
    --amber-ink: #66500f;
    --danger-soft: #f8e9e7;
    --danger-soft-strong: #f1dcda;
    --danger-ink: #7b2830;
    --violet-soft: #e7e9f7;
    --violet-ink: #39478f;
    --page-muted: #dfe8ed;
    --page-warm: #f1eee6;
    --lavender-soft: #ece9f5;
    --action: #274d61;
    --action-hover: #35677c;
    --footer-bg: #213540;
    --shadow: 0 16px 38px rgba(27, 48, 57, 0.14);
}

html[data-theme="violet-light"] {
    color-scheme: light;
    --ink: #2d1748;
    --ink-soft: #67537d;
    --paper: #f8f6fc;
    --surface: #ffffff;
    --surface-soft: #fcfaff;
    --surface-muted: #f4effc;
    --surface-raised: #ffffff;
    --mist: #eee7fa;
    --line: #ddd3f0;
    --teal: #621dd8;
    --teal-deep: #4c12ad;
    --mint: #3fb58e;
    --amber: #e9a83f;
    --coral: #e56862;
    --violet: #7950de;
    --teal-soft: #f0e9fc;
    --teal-soft-strong: #e7dcfa;
    --teal-ink: #49109f;
    --amber-soft: #fff6e5;
    --amber-soft-strong: #ffedca;
    --amber-ink: #6c500c;
    --danger-soft: #fcecea;
    --danger-soft-strong: #f8dfde;
    --danger-ink: #842832;
    --violet-soft: #ede7fb;
    --violet-ink: #4e249d;
    --page-muted: #f0ebf8;
    --page-warm: #fbf4e8;
    --lavender-soft: #f2ebff;
    --action: #621dd8;
    --action-hover: #4d13b2;
    --footer-bg: #2a173f;
    --shadow: 0 18px 44px rgba(72, 31, 128, 0.15);
}

html[data-theme="violet-dark"] {
    color-scheme: dark;
    --ink: #f2ebfb;
    --ink-soft: #c5b5d7;
    --paper: #130d1e;
    --surface: #1d142b;
    --surface-soft: #241934;
    --surface-muted: #2a1e3a;
    --surface-raised: #312246;
    --mist: #2b1d40;
    --line: #4d3b62;
    --teal: #a47bed;
    --teal-deep: #d4bcff;
    --mint: #5bd2a5;
    --amber: #eab660;
    --coral: #f27b72;
    --violet: #b99af5;
    --teal-soft: #2c1c48;
    --teal-soft-strong: #3a245f;
    --teal-ink: #d8c3ff;
    --amber-soft: #352b1c;
    --amber-soft-strong: #44361e;
    --amber-ink: #f0c76d;
    --danger-soft: #3a2028;
    --danger-soft-strong: #48262f;
    --danger-ink: #ffaaa6;
    --violet-soft: #302044;
    --violet-ink: #dac7ff;
    --page-muted: #1c122b;
    --page-warm: #282119;
    --lavender-soft: #2b1d3d;
    --action: #621dd8;
    --action-hover: #7c39e8;
    --footer-bg: #0c0713;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

html[data-theme="ocean-light"] {
    color-scheme: light;
    --ink: #123842;
    --ink-soft: #456a73;
    --paper: #f3f9fa;
    --surface: #ffffff;
    --surface-soft: #f8fcfd;
    --surface-muted: #edf7f8;
    --surface-raised: #ffffff;
    --mist: #e1f1f3;
    --line: #c7dfe4;
    --teal: #057496;
    --teal-deep: #045b76;
    --mint: #43b990;
    --amber: #eba944;
    --coral: #e36b5e;
    --violet: #6572d0;
    --teal-soft: #e2f2f5;
    --teal-soft-strong: #d4eaef;
    --teal-ink: #034f68;
    --amber-soft: #fff6e5;
    --amber-soft-strong: #ffedca;
    --amber-ink: #6b500d;
    --danger-soft: #fcecea;
    --danger-soft-strong: #f7dfdd;
    --danger-ink: #832832;
    --violet-soft: #eaecfa;
    --violet-ink: #3e4b97;
    --page-muted: #e5f2f4;
    --page-warm: #faf4e8;
    --lavender-soft: #f0edfa;
    --action: #057496;
    --action-hover: #045c78;
    --footer-bg: #123843;
    --shadow: 0 18px 44px rgba(5, 80, 103, 0.14);
}

html[data-theme="ocean-dark"] {
    color-scheme: dark;
    --ink: #e8f5f7;
    --ink-soft: #acc6cc;
    --paper: #08191e;
    --surface: #0f272d;
    --surface-soft: #132e35;
    --surface-muted: #17363e;
    --surface-raised: #1c414a;
    --mist: #14333a;
    --line: #31545d;
    --teal: #38a8be;
    --teal-deep: #8fd8e7;
    --mint: #58cfa2;
    --amber: #e9b35b;
    --coral: #ef7a6e;
    --violet: #8e9ae8;
    --teal-soft: #113a45;
    --teal-soft-strong: #164b58;
    --teal-ink: #9cdeeb;
    --amber-soft: #342a1b;
    --amber-soft-strong: #42361e;
    --amber-ink: #efc66d;
    --danger-soft: #382226;
    --danger-soft-strong: #46272c;
    --danger-ink: #ffa8a0;
    --violet-soft: #252b45;
    --violet-ink: #bbc4ff;
    --page-muted: #0d252b;
    --page-warm: #24221b;
    --lavender-soft: #242638;
    --action: #057496;
    --action-hover: #0789af;
    --footer-bg: #041014;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
    letter-spacing: 0;
}

img {
    display: block;
    max-width: 100%;
}

html[data-theme-tone="dark"] img[src^="/images/icons/"]:not([src$="/logo.svg"]):not([src$="/google.svg"]):not([src$="/favicon.svg"]) {
    filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(360%) hue-rotate(118deg) brightness(101%);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--teal-deep);
}

button,
input,
textarea,
select {
    font: inherit;
}

:where(input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select) {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(23, 52, 58, 0.04);
}

:where(input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select):focus {
    outline: 3px solid rgba(42, 167, 162, 0.2);
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(42, 167, 162, 0.08), 0 12px 24px rgba(23, 52, 58, 0.08);
}

select {
    appearance: none;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--teal-deep) 50%),
        linear-gradient(135deg, var(--teal-deep) 50%, transparent 50%),
        linear-gradient(180deg, var(--surface), var(--surface-soft));
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, 100% 100%;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(42, 167, 162, 0.48);
    background: linear-gradient(180deg, var(--surface), var(--surface-muted));
    box-shadow: 0 5px 12px rgba(23, 52, 58, 0.08);
    cursor: pointer;
}

input[type="checkbox"] {
    border-radius: 5px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]::after,
input[type="radio"]::after {
    content: "";
    transform: scale(0);
    transition: transform 120ms ease;
}

input[type="checkbox"]::after {
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-bottom: 2px solid var(--white);
    border-left: 2px solid var(--white);
    transform: rotate(-45deg) scale(0);
}

input[type="radio"]::after {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--control-contrast);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: var(--teal-deep);
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
}

input[type="checkbox"]:checked::after {
    transform: rotate(-45deg) scale(1);
}

input[type="radio"]:checked::after {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid rgba(42, 167, 162, 0.2);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 30;
    transform: translateY(-160%);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--white);
    background: var(--action);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 14px max(24px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    background: rgba(247, 251, 247, 0.94);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(23, 52, 58, 0.05);
}

.brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 1.1rem;
}

.header-search {
    position: relative;
    flex: 1 1 360px;
    max-width: 430px;
}

.header-search-box {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 8px 22px rgba(23, 52, 58, 0.05);
}

.header-search-box:focus-within {
    border-color: var(--teal);
    outline: 3px solid rgba(42, 167, 162, 0.16);
}

.header-search-box > img {
    opacity: 0.74;
}

.header-search input {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    font-size: 0.94rem;
    font-weight: 800;
}

.header-search input::placeholder {
    color: #6b8589;
}

.header-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: var(--mist);
    cursor: pointer;
}

.header-search button:hover {
    background: var(--teal-soft-strong);
}

.header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(23, 52, 58, 0.22);
}

.header-search-results[hidden] {
    display: none;
}

.header-search-list {
    display: grid;
    max-height: min(520px, calc(100svh - 160px));
    overflow-y: auto;
}

.header-search-result {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.header-search-result:hover,
.header-search-result.is-active {
    color: var(--ink);
    background: var(--surface-muted);
}

.header-search-thumb,
.header-search-kind {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--mist);
}

.header-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.header-search-kind {
    color: var(--ink);
    background: var(--amber-soft-strong);
    font-weight: 900;
}

.header-search-result-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.header-search-type {
    color: var(--teal-deep);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.header-search-result strong,
.header-search-result-copy > span:not(.header-search-type),
.header-search-result em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result strong {
    color: var(--ink);
    line-height: 1.15;
}

.header-search-result-copy > span:not(.header-search-type) {
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.header-search-result em {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-style: normal;
}

.header-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.header-search-tags span {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.72rem;
    font-weight: 900;
}

.header-search-all,
.header-search-empty {
    display: grid;
    gap: 2px;
    padding: 12px;
    color: var(--ink);
    background: var(--amber-soft);
    font-weight: 900;
}

.header-search-all:hover {
    color: var(--ink);
    background: var(--amber-soft-strong);
}

.header-search-empty span {
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--ink-soft);
    font-weight: 800;
}

.site-nav a:hover {
    color: var(--ink);
    background: var(--mist);
}

.site-nav .nav-favorites-link {
    position: relative;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
}

.site-nav .nav-favorites-link:hover,
.site-nav .nav-favorites-link.is-active {
    border-color: color-mix(in srgb, var(--coral) 48%, var(--line));
    background: color-mix(in srgb, var(--coral) 9%, var(--surface));
}

.nav-favorites-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.nav-favorites-count {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--paper);
    border-radius: 999px;
    color: #fff;
    background: var(--coral);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1;
}

.nav-favorites-count[hidden] {
    display: none;
}

.site-nav .nav-history-link {
    position: relative;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
}

.site-nav .nav-history-link:hover,
.site-nav .nav-history-link.is-active {
    border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
    background: color-mix(in srgb, var(--teal) 11%, var(--surface));
}

.site-nav .nav-settings-link {
    position: relative;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
}

.site-nav .nav-settings-link:hover,
.site-nav .nav-settings-link.is-active {
    border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
    background: color-mix(in srgb, var(--teal) 11%, var(--surface));
}

.nav-history-text,
.nav-settings-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

html[data-theme-tone="dark"] .nav-history-link img,
html[data-theme-tone="dark"] .nav-settings-link img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.nav-user-menu,
.nav-account,
.nav-account-signout button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-user-menu {
    position: relative;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    box-shadow: 0 8px 20px rgba(23, 52, 58, 0.06);
}

.site-nav .nav-user-menu .nav-account {
    min-height: 36px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.site-nav .nav-user-menu .nav-account:hover,
.nav-user-menu.is-open .nav-account {
    background: var(--mist);
}

.nav-account-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.nav-account-chevron {
    width: 8px;
    height: 8px;
    margin: -4px 1px 0 2px;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.nav-user-menu.is-open .nav-account-chevron {
    margin-top: 3px;
    transform: rotate(225deg);
}

.nav-plan-badge {
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--teal-deep);
    background: var(--teal-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.nav-account-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 80;
    width: min(310px, calc(100vw - 32px));
    max-height: min(640px, calc(100svh - 92px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 24px 54px rgba(23, 52, 58, 0.2);
}

.nav-account-dropdown[hidden] {
    display: none;
}

.nav-account-summary {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 9px 11px;
    border-bottom: 1px solid var(--line);
}

.nav-account-summary > img,
.nav-account-summary-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.nav-account-summary > img {
    object-fit: cover;
}

.nav-account-summary-initial {
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 0.9rem;
    font-weight: 900;
}

.nav-account-summary > span:last-child,
.nav-account-links a > span:last-child,
.nav-account-signout button > span:last-child {
    min-width: 0;
}

.nav-account-summary strong,
.nav-account-summary small,
.nav-account-links strong,
.nav-account-links small,
.nav-account-signout strong,
.nav-account-signout small {
    display: block;
}

.nav-account-summary strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-summary small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-links {
    display: grid;
    gap: 2px;
    padding: 7px 0;
}

.site-nav .nav-account-dropdown .nav-account-links a,
.nav-account-signout button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    justify-content: initial;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
    background: transparent;
    text-align: left;
}

.site-nav .nav-account-dropdown .nav-account-links a:hover,
.site-nav .nav-account-dropdown .nav-account-links a.is-current {
    border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
    color: var(--ink);
    background: var(--surface-muted);
}

.nav-account-link-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 7px;
    background: var(--surface-soft);
}

.nav-account-links strong,
.nav-account-signout strong {
    color: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
}

.nav-account-links small,
.nav-account-signout small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-signout {
    margin: 0;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.nav-account-signout button {
    border-color: color-mix(in srgb, var(--coral) 18%, transparent);
    font: inherit;
    cursor: pointer;
}

.nav-account-signout button:hover {
    border-color: color-mix(in srgb, var(--coral) 40%, var(--line));
    color: var(--danger-ink);
    background: var(--danger-soft);
}

.site-nav .nav-call-credits {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.site-nav .nav-call-credits:hover {
    color: #103f39;
    background: var(--teal-soft-strong);
}

.site-nav .nav-admin-link {
    color: #3f4d57;
    background: var(--surface-muted);
}

.site-nav .nav-admin-link:hover {
    color: #1f2b31;
    background: var(--surface-muted);
}

.nav-call-credits img {
    filter: none;
}

.nav-account img,
.nav-account-initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.nav-account img {
    object-fit: cover;
}

.nav-account-initial {
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 0.75rem;
    font-weight: 900;
}

.nav-account strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 900;
}

.site-nav .nav-cta {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
}

.site-flashes {
    display: grid;
    gap: 8px;
    width: min(1180px, calc(100% - 48px));
    margin: 14px auto 0;
}

.site-flash {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
    font-weight: 900;
}

.site-flash.is-success {
    border-color: rgba(42, 167, 162, 0.36);
    background: var(--teal-soft);
}

.site-flash.is-error {
    border-color: rgba(242, 109, 91, 0.42);
    background: var(--danger-soft);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: var(--action);
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(440px, calc(100svh - 160px), 680px);
    overflow: hidden;
    background: var(--surface-soft);
}

.hero-media {
    position: absolute;
    inset: 0;
}

.hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(247, 251, 247, 0.98) 0%, rgba(247, 251, 247, 0.9) 42%, rgba(247, 251, 247, 0.16) 78%),
        linear-gradient(180deg, rgba(42, 167, 162, 0.12), rgba(246, 180, 75, 0.08));
}

.hero-content {
    position: relative;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 58px 0;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-content h1 {
    max-width: 560px;
    margin: 0;
    font-size: 4.7rem;
    line-height: 0.95;
    letter-spacing: 0;
}

.hero-copy {
    max-width: 590px;
    margin: 22px 0 0;
    color: var(--ink-soft);
    font-size: 1.22rem;
}

.hero-actions,
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 900;
    line-height: 1.1;
    cursor: pointer;
}

.button-primary {
    color: var(--white);
    background: var(--action);
}

.button-primary img {
    filter: brightness(0) invert(1);
}

.button-primary:hover {
    color: var(--white);
    background: var(--action-hover);
}

.button-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.button-secondary:hover {
    color: var(--ink);
    background: var(--mist);
}

.button[data-pal-call],
.card-action-button[data-pal-call] {
    color: var(--white);
    background: #1fae72;
    border-color: #1fae72;
    box-shadow: 0 8px 18px rgba(31, 174, 114, 0.22);
}

.button[data-pal-call]:hover,
.card-action-button[data-pal-call]:hover {
    color: var(--white);
    background: #168c5d;
    border-color: #168c5d;
}

.button[data-pal-call] img,
.card-action-button[data-pal-call] img {
    filter: brightness(0) invert(1);
}

.button:disabled {
    color: var(--ink);
    background: var(--surface-muted);
    border-color: var(--line);
    cursor: default;
    opacity: 0.86;
}

.button:disabled img {
    filter: none;
    opacity: 0.78;
}

.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 640px;
    margin-top: 30px;
}

.hero-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(23, 52, 58, 0.12);
    border-radius: 7px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    font-weight: 800;
}

.hero-metrics strong {
    color: var(--ink);
    font-size: 1.15rem;
}

.dashboard-shell {
    padding: 26px 0 50px;
    background:
        linear-gradient(135deg, var(--page-muted), var(--amber-soft) 46%, var(--lavender-soft));
}

.dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 12px;
}

.dashboard-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: 2.45rem;
    line-height: 1.06;
    letter-spacing: 0;
}

.dashboard-hero p {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
}

.dashboard-actions,
.dashboard-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.dashboard-metrics article,
.dashboard-panel,
.dashboard-path-card,
.dashboard-pal-row,
.dashboard-suggested-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.08);
}

.dashboard-metrics article {
    min-width: 0;
    padding: 11px 13px;
}

.dashboard-metrics span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-metrics p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.dashboard-grid {
    display: grid;
    grid-template-areas:
        "plan paths"
        "quick paths"
        "favorites favorites";
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.38fr);
    gap: 12px;
    align-items: start;
}

.dashboard-panel {
    min-width: 0;
    padding: 14px;
}

.dashboard-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.dashboard-panel-head h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.dashboard-panel-links,
.account-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.dashboard-plan-panel {
    grid-area: plan;
    border-left: 4px solid var(--plan-accent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 9%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent) 58%),
        var(--surface);
}

.dashboard-plan-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.dashboard-plan-list div {
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.dashboard-plan-list div:nth-child(3) {
    grid-column: 1 / -1;
}

.dashboard-plan-list dt {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-plan-list dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 900;
}

.dashboard-call-meter {
    height: 7px;
    overflow: hidden;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--teal-soft);
}

.dashboard-call-meter span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1fae72, var(--amber));
}

.dashboard-paths-panel {
    grid-area: paths;
    align-self: stretch;
}

.dashboard-path-list,
.dashboard-pal-list {
    display: grid;
    gap: 8px;
}

.dashboard-path-card {
    padding: 10px;
}

.dashboard-path-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    margin-top: 8px;
}

.dashboard-path-actions .button {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
}

.dashboard-path-actions .dashboard-path-detail-button {
    padding: 7px;
}

.dashboard-path-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.dashboard-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--teal-soft);
    font-weight: 900;
}

.dashboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-path-main span,
.dashboard-suggested-card h3,
.dashboard-pal-row h3 {
    display: block;
}

.dashboard-path-main > div > span {
    color: var(--teal-deep);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-path-main h3,
.dashboard-pal-row h3,
.dashboard-suggested-card h3,
.dashboard-empty h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0;
}

.dashboard-path-main p,
.dashboard-pal-row p,
.dashboard-suggested-card p,
.dashboard-empty p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.dashboard-path-card .workspace-progress-line {
    height: 7px;
    margin-top: 8px;
}

.dashboard-path-card .workspace-path-meta {
    justify-content: space-between;
    margin-top: 6px;
}

.dashboard-path-card .workspace-path-meta span {
    padding: 3px 7px;
    font-size: 0.72rem;
}

.dashboard-quick-panel {
    grid-area: quick;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-action-grid a {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 95%, transparent);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
}

.dashboard-action-grid a > img {
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.dashboard-action-grid a:hover {
    border-color: rgba(42, 167, 162, 0.4);
    background: var(--teal-soft);
}

.dashboard-action-grid strong,
.dashboard-action-grid span {
    overflow-wrap: anywhere;
}

.dashboard-action-grid span {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 800;
}

.dashboard-favorites-panel {
    grid-area: favorites;
}

.dashboard-favorites-panel .dashboard-pal-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-pal-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 8px;
    box-shadow: none;
}

.dashboard-pal-image,
.dashboard-pal-image img {
    width: 46px;
    height: 46px;
}

.dashboard-pal-image {
    overflow: hidden;
    border-radius: 8px;
    background: var(--mist);
}

.dashboard-pal-image img {
    object-fit: cover;
    object-position: center top;
}

.dashboard-empty {
    padding: 13px;
    border: 1px dashed rgba(42, 167, 162, 0.38);
    border-radius: 8px;
    background: var(--surface-soft);
}

.dashboard-empty.compact {
    padding: 10px;
}

.dashboard-empty .button {
    margin-top: 8px;
}

.dashboard-discovery-panel {
    margin-top: 12px;
}

.dashboard-suggested-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-suggested-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
}

.dashboard-suggested-card > a {
    display: block;
    width: 82px;
    height: 100%;
    min-height: 108px;
    overflow: hidden;
    background: var(--mist);
}

.dashboard-suggested-card > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.dashboard-suggested-card > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 9px;
}

.dashboard-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 7px;
}

.dashboard-card-actions .card-action-link,
.dashboard-card-actions .card-action-button {
    flex: 0 1 auto;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 0.78rem;
}

.dashboard-card-actions .card-action-button img {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.call-history-shell {
    padding: 46px 0 76px;
    background:
        linear-gradient(135deg, var(--page-muted), var(--amber-soft) 50%, var(--paper));
}

.call-history-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 20px;
}

.call-history-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: 3.05rem;
    line-height: 1.04;
    letter-spacing: 0;
}

.call-history-hero p {
    max-width: 700px;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 1.06rem;
}

.call-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.call-history-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.call-history-metrics article,
.call-history-panel,
.call-history-row,
.call-history-empty {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.08);
}

.call-history-metrics article {
    min-width: 0;
    padding: 17px;
}

.call-history-metrics span {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 1.62rem;
    font-weight: 900;
    line-height: 1;
}

.call-history-metrics p {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-weight: 900;
}

.call-history-panel {
    padding: 20px;
}

.call-history-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.call-history-panel-head h2 {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.call-history-list {
    display: grid;
    gap: 10px;
}

.call-history-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    box-shadow: none;
}

.call-history-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--teal-soft);
    font-weight: 900;
}

.call-history-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.call-history-main h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0;
}

.call-history-main p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.call-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.call-history-tags span {
    padding: 5px 8px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--amber-soft);
    font-size: 0.8rem;
    font-weight: 900;
}

.call-history-duration {
    min-width: 92px;
    padding: 10px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 8px;
    background: var(--surface-soft);
    text-align: right;
}

.call-history-duration strong,
.call-history-duration span {
    display: block;
}

.call-history-duration strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.call-history-duration span {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.call-history-empty {
    padding: 28px;
    text-align: center;
}

.call-history-empty h3 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: 0;
}

.call-history-empty p {
    max-width: 560px;
    margin: 8px auto 0;
    color: var(--ink-soft);
}

.call-history-empty .button {
    margin-top: 16px;
}

.help-hero .section-inner {
    display: grid;
    gap: 18px;
}

.help-hero-actions,
.help-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.help-hero > .section-inner > p:not(.eyebrow) {
    max-width: 780px;
}

.help-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin: 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 800;
    list-style: none;
}

.help-hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.help-topic-section {
    padding-bottom: 32px;
}

.help-section[id] {
    scroll-margin-top: 92px;
}

.help-topic-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.help-topic-nav a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.help-topic-nav a:hover {
    border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
    box-shadow: var(--control-hover-shadow);
    transform: translateY(-2px);
}

.help-topic-nav a:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 2px;
}

.help-topic-nav img {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 8px;
    background: var(--teal-soft);
}

.help-topic-nav span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.help-topic-nav strong {
    line-height: 1.2;
}

.help-topic-nav small {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.help-card,
.help-panel,
.help-faq details,
.help-support-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(23, 52, 58, 0.07);
}

.help-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 18px;
}

.help-card > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-deep);
    font-weight: 900;
}

.help-card h3,
.help-card p,
.help-panel h2,
.help-support-panel h2,
.help-support-panel p {
    margin: 0;
}

.help-card h3,
.help-panel h2,
.help-support-panel h2 {
    line-height: 1.15;
}

.help-card p,
.help-list,
.help-faq p,
.help-support-panel p {
    color: var(--ink-soft);
}

.help-mode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.help-mode-card {
    --help-mode-accent: var(--teal);
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 17px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--help-mode-accent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 25px rgba(23, 52, 58, 0.06);
}

.help-mode-card:nth-child(2) {
    --help-mode-accent: var(--coral);
}

.help-mode-card:nth-child(3) {
    --help-mode-accent: var(--violet);
}

.help-mode-card:nth-child(4) {
    --help-mode-accent: var(--amber);
}

.help-mode-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--help-mode-accent) 14%, var(--surface));
}

.help-mode-card > span,
.help-panel-heading span {
    color: var(--help-mode-accent, var(--teal-deep));
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.help-mode-card h3,
.help-mode-card p,
.help-panel-featured p,
.help-room-tools p,
.help-inline-note p {
    margin: 0;
}

.help-mode-card h3 {
    font-size: 1.12rem;
    line-height: 1.2;
}

.help-mode-card p,
.help-panel-featured p,
.help-room-tools p,
.help-inline-note p {
    color: var(--ink-soft);
    line-height: 1.55;
}

.help-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.help-detail-layout {
    margin-top: 0;
}

.help-panel {
    padding: 22px;
}

.help-panel-featured {
    display: grid;
    align-content: start;
    gap: 16px;
    border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 52%, var(--surface));
}

.help-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.help-panel-heading > img {
    box-sizing: content-box;
    padding: 10px;
    border-radius: 8px;
    background: var(--surface);
}

.help-panel-heading > div {
    display: grid;
    gap: 4px;
}

.help-panel-heading h2 {
    margin: 0;
}

.help-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding-left: 20px;
}

.help-list strong {
    color: var(--ink);
}

.help-room-layout {
    display: grid;
    grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.45fr);
    gap: 16px;
    align-items: stretch;
}

.help-room-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.help-room-tools article {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.help-room-tools strong {
    color: var(--ink);
}

.help-room-tools p {
    font-size: 0.88rem;
}

.help-inline-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 15px 17px;
    border-left: 4px solid var(--amber);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
}

.help-inline-note img {
    flex: 0 0 auto;
    margin-top: 2px;
}

.help-panel-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.help-data-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.help-data-strip > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.help-data-strip img {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 7px;
    background: var(--teal-soft);
}

.help-data-strip span {
    display: grid;
    gap: 3px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.help-data-strip strong {
    color: var(--ink);
}

.help-faq {
    display: grid;
    gap: 10px;
}

.help-faq details {
    overflow: hidden;
}

.help-faq summary {
    cursor: pointer;
    padding: 16px 18px;
    color: var(--ink);
    font-weight: 900;
    transition: background-color 160ms ease, color 160ms ease;
}

.help-faq summary:hover {
    color: var(--teal-deep);
    background: var(--surface-muted);
}

.help-faq p {
    margin: 0;
    padding: 0 18px 18px;
    line-height: 1.6;
}

.help-support-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px;
    border-color: rgba(42, 167, 162, 0.26);
    background: color-mix(in srgb, var(--teal-soft) 64%, var(--surface));
}

.help-support-panel .eyebrow {
    margin-bottom: 8px;
}

.contact-hero .section-inner {
    display: grid;
    gap: 16px;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
    gap: 18px;
    align-items: start;
}

.contact-form,
.contact-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(23, 52, 58, 0.07);
}

.contact-form {
    display: grid;
    gap: 16px;
    padding: 24px;
}

.contact-form-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.contact-form-head h2,
.contact-panel h2,
.contact-form-head p,
.contact-panel p {
    margin: 0;
}

.contact-form-head h2,
.contact-panel h2 {
    line-height: 1.15;
}

.contact-form-head > span,
.contact-note,
.contact-panel p,
.contact-panel li {
    color: var(--ink-soft);
}

.contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.contact-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 900;
}

.contact-form label em {
    color: #a83224;
    font-size: 0.84rem;
    font-style: normal;
    font-weight: 800;
}

.contact-form textarea {
    resize: vertical;
}

.contact-error {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(168, 50, 36, 0.26);
    border-radius: 7px;
    color: var(--danger-ink);
    background: var(--danger-soft);
    font-weight: 900;
}

.contact-note {
    margin: -4px 0 0;
    font-size: 0.9rem;
}

.contact-submit {
    justify-self: start;
}

.contact-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-side {
    display: grid;
    gap: 14px;
}

.contact-panel {
    display: grid;
    gap: 11px;
    padding: 20px;
}

.contact-panel ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.contact-panel .button {
    justify-self: start;
}

.contact-panel-muted {
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.9), rgba(255, 255, 255, 0.96)),
        var(--white);
}

.section {
    padding: 76px 0;
}

.section-muted {
    background: var(--page-muted);
}

.section-intro {
    padding-top: 46px;
}

.section-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.section-inner.narrow {
    width: min(760px, calc(100% - 48px));
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 54px;
    align-items: start;
}

.split h2,
.section-heading h2,
.page-hero h1,
.profile-summary h1 {
    margin: 0;
    font-size: 2.55rem;
    line-height: 1.06;
    letter-spacing: 0;
}

.split p,
.page-hero p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.text-link {
    color: var(--teal-deep);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.track-grid,
.profile-grid,
.feature-grid,
.article-grid,
.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.profile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.directory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.directory-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 900;
}

.directory-results-bar p {
    margin: 0;
}

.directory-results-bar span {
    color: var(--teal-deep);
}

.profile-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.track-card,
.profile-card,
.feature-card,
.article-card,
.detail-panel,
.empty-state {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.07);
}

.track-card,
.profile-card,
.feature-card,
.article-card {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.track-card:hover,
.profile-card:hover,
.feature-card:hover,
.article-card:hover {
    border-color: rgba(42, 167, 162, 0.38);
    box-shadow: 0 18px 38px rgba(23, 52, 58, 0.11);
    transform: translateY(-2px);
}

.track-card {
    position: relative;
    min-height: 180px;
    padding: 22px;
    overflow: hidden;
}

.track-card span {
    display: block;
    width: 42px;
    height: 8px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: var(--track-color);
}

.track-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -38px;
    width: 110px;
    height: 110px;
    border: 24px solid color-mix(in srgb, var(--track-color) 28%, transparent);
    border-radius: 50%;
}

.track-card h3,
.profile-card h2,
.profile-card h3,
.article-card h2,
.article-card h3,
.feature-card h3,
.detail-panel h2 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0;
}

.track-card p,
.profile-card p,
.feature-card p,
.article-card p,
.detail-panel p {
    margin: 10px 0 0;
    color: var(--ink-soft);
}

.profile-card {
    overflow: hidden;
}

.profile-card-media {
    position: relative;
}

.profile-card-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--mist);
}

.profile-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 220ms ease;
}

.profile-card:hover .profile-card-image img {
    transform: scale(1.025);
}

.directory-grid .profile-card-image {
    aspect-ratio: 1 / 1;
}

.profile-card-body {
    padding: 18px;
}

.directory-grid .profile-card-body {
    padding: 14px;
}

.profile-card-topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.profile-card h2,
.profile-card h3 {
    font-size: 1.2rem;
}

.directory-grid .profile-card h2 {
    font-size: 1.05rem;
}

.profile-card-topline span {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--amber-soft-strong);
    font-weight: 900;
    text-align: center;
}

.profile-card .archetype {
    color: var(--teal-deep);
    font-weight: 900;
}

.directory-grid .profile-card .archetype {
    display: -webkit-box;
    min-height: 2.35em;
    overflow: hidden;
    font-size: 0.9rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pal-card-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.pal-card-quick span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 6px;
    color: var(--ink);
    background: var(--amber-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.directory-grid .pal-card-quick {
    gap: 6px;
    margin-top: 9px;
}

.directory-grid .pal-card-quick span {
    min-width: 0;
    max-width: 100%;
    min-height: 26px;
    overflow: hidden;
    padding: 4px 7px;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card-copy {
    display: -webkit-box;
    min-height: 2.9em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.directory-grid .profile-card-copy {
    margin-top: 9px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.pal-meta,
.profile-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.pal-meta span,
.profile-facts span {
    padding: 6px 9px;
    border: 1px solid rgba(23, 52, 58, 0.12);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--surface-raised);
    font-size: 0.86rem;
    font-weight: 900;
}

.profile-facts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-facts strong {
    color: inherit;
    font: inherit;
}

.profile-facts img {
    flex: 0 0 auto;
}

.profile-country-flag {
    width: 22px;
    height: 16px;
    border: 1px solid rgba(23, 52, 58, 0.12);
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(23, 52, 58, 0.12);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tag-row span {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.86rem;
    font-weight: 900;
}

.tag-row.large span {
    padding: 8px 11px;
    font-size: 0.94rem;
}

.directory-grid .tag-row {
    gap: 6px;
    margin-top: 10px;
}

.directory-grid .tag-row span {
    padding: 4px 7px;
    font-size: 0.75rem;
}

.pal-directory-grid .profile-card,
.home-pal-grid .profile-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.pal-directory-grid .profile-card-body,
.home-pal-grid .profile-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.pal-directory-grid .profile-card-topline {
    min-height: 40px;
}

.pal-directory-grid .profile-card-topline h2 {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pal-directory-grid .pal-card-quick,
.pal-directory-grid .tag-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 26px;
}

.pal-directory-grid .pal-card-quick span,
.pal-directory-grid .tag-row span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.directory-grid .profile-card-actions {
    gap: 7px;
    margin-top: 12px;
}

.pal-directory-grid .profile-card-actions,
.home-pal-grid .profile-card-actions {
    display: flex;
    flex-wrap: nowrap;
    margin-top: auto;
    padding-top: 12px;
}

.directory-grid.pal-directory-grid .profile-card-actions .card-action-link,
.directory-grid.pal-directory-grid .profile-card-actions .card-action-button:not(.icon-only) {
    flex: 1 1 0;
    min-width: 0;
}

.directory-grid.pal-directory-grid .profile-card-actions .card-action-button.icon-only {
    flex: 0 0 38px;
    width: 38px;
}

.profile-grid.home-pal-grid .profile-card-actions .card-action-link,
.profile-grid.home-pal-grid .profile-card-actions .card-action-button:not(.icon-only) {
    flex: 1 1 0;
    min-width: 0;
}

.profile-grid.home-pal-grid .profile-card-actions .card-action-button.icon-only {
    flex: 0 0 38px;
    width: 38px;
}

.card-action-link,
.card-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.profile-card-actions .card-action-button {
    flex: 1 1 104px;
}

.directory-grid .card-action-link,
.directory-grid .card-action-button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.86rem;
}

.directory-grid .profile-card-actions .card-action-button:not(.icon-only),
.directory-grid .card-action-link {
    flex: 1 1 74px;
}

.favorite-form {
    margin: 0;
}

.favorite-form-card {
    flex: 0 0 38px;
    min-width: 38px;
}

.favorite-form-card .card-action-button {
    width: 100%;
}

.profile-card-media .favorite-form-card {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    flex: 0 0 auto;
    min-width: 0;
}

.profile-card-media .favorite-action-card.card-action-button.icon-only {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.72);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.2);
}

.profile-card-media .favorite-action-card:hover {
    background: var(--surface);
}

.favorite-action {
    position: relative;
}

.favorite-action[disabled] {
    cursor: progress;
    opacity: 0.72;
}

.favorite-action-card {
    color: #17343a;
}

.favorite-bookmark-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    overflow: visible;
}

.favorite-bookmark-fill {
    fill: transparent;
    transition: fill 160ms ease;
}

.favorite-bookmark-outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linejoin: round;
}

.favorite-action.is-favorite {
    color: var(--teal-ink);
    background: var(--teal-soft);
    border-color: rgba(42, 167, 162, 0.4);
}

.favorite-action.is-favorite .favorite-bookmark-fill {
    fill: currentColor;
}

.favorite-action.is-favorite:hover {
    color: var(--ink);
    background: var(--teal-soft-strong);
}

.card-action-link {
    flex: 0 0 auto;
    color: var(--white);
    background: var(--action);
    border-color: var(--action);
}

.card-action-link:hover {
    color: var(--white);
    background: var(--action-hover);
}

.card-action-button:hover {
    background: var(--mist);
}

.card-action-button.learning-action {
    color: var(--teal-ink);
    background: var(--teal-soft);
    border-color: rgba(42, 167, 162, 0.34);
}

.card-action-button.learning-action:hover {
    color: var(--ink);
    background: var(--teal-soft-strong);
}

.card-action-button.icon-only {
    flex: 0 0 38px;
    width: 38px;
    padding: 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-weight: 900;
}

.pagination a:hover,
.pagination .is-active {
    color: var(--white);
    background: var(--action);
    border-color: var(--action);
}

.pagination .is-disabled,
.pagination .pagination-gap {
    color: rgba(23, 52, 58, 0.45);
    background: var(--surface-raised);
}

.feature-card,
.article-card,
.detail-panel {
    padding: 24px;
}

.feature-card img,
.article-card span {
    margin-bottom: 18px;
}

.article-card span,
.detail-kicker {
    display: inline-flex;
    color: var(--coral);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.page-hero {
    padding: 76px 0 52px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, var(--page-muted), var(--page-warm) 70%, var(--paper));
}

.page-hero.compact h1 {
    max-width: 860px;
}

.page-hero.compact p {
    max-width: 780px;
    margin-top: 14px;
}

.favorites-hero-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 26px;
}

.page-hero.favorites-hero {
    padding: 28px 0 24px;
}

.favorites-hero h1 {
    font-size: 2.05rem;
}

.page-hero.favorites-hero p {
    margin-top: 8px;
    font-size: 0.98rem;
}

.favorites-hero-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.favorites-section {
    padding: 24px 0 42px;
    background: var(--page-muted);
}

.favorites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.favorites-toolbar h2 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.favorites-toolbar > p {
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--teal-deep);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 900;
}

.favorites-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.favorites-grid .profile-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-width: 0;
}

.favorites-grid .profile-card-media {
    min-height: 100%;
}

.favorites-grid .profile-card-image {
    height: 100%;
    aspect-ratio: auto;
}

.favorites-grid .profile-card-body {
    min-width: 0;
    padding: 12px;
}

.favorites-grid .profile-card h2 {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-grid .profile-card .archetype {
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
}

.favorites-grid .pal-card-quick,
.favorites-grid .tag-row {
    margin-top: 8px;
}

.favorites-grid .pal-card-quick,
.favorites-grid .tag-row,
.favorites-grid .profile-card-actions {
    flex-wrap: nowrap;
}

.favorites-grid .pal-card-quick span,
.favorites-grid .tag-row span {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-grid .profile-card-actions {
    margin-top: 10px;
}

.favorites-grid .profile-card-actions .card-action-button.icon-only {
    flex: 0 0 36px;
}

.favorites-grid[hidden],
.favorites-empty[hidden] {
    display: none;
}

.favorites-empty {
    margin-top: 0;
}

.favorites-empty > img {
    margin-bottom: 10px;
}

.favorites-empty h2 {
    margin: 0;
}

.favorites-empty p {
    margin: 10px 0 20px;
    color: var(--ink-soft);
}

.pricing-hero {
    padding: 44px 0 38px;
    text-align: center;
    background: color-mix(in srgb, var(--teal-soft) 56%, var(--surface));
}

.pricing-hero-inner {
    display: grid;
    justify-items: center;
}

.pricing-hero .eyebrow,
.pricing-hero h1,
.pricing-hero p {
    margin-inline: auto;
}

.pricing-active-plan {
    --plan-accent: var(--teal);
    display: grid;
    gap: 4px;
    max-width: 720px;
    margin: 16px auto 0;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 42%, var(--line));
    border-left: 6px solid var(--plan-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    text-align: left;
}

.pricing-active-plan span,
.pricing-current-marker,
.account-plan-summary > span {
    color: color-mix(in srgb, var(--plan-accent) 72%, var(--ink));
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pricing-active-plan strong,
.account-plan-summary strong {
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1.2;
}

.pricing-active-plan p {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 800;
}

.plan-pending-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 4px 0 0;
    padding: 6px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--plan-accent) 12%, var(--surface));
    color: color-mix(in srgb, var(--plan-accent) 70%, var(--ink));
    font-size: 0.8rem;
    font-weight: 900;
}

.pricing-plan-dates,
.account-plan-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}

.pricing-plan-dates div,
.account-plan-dates div {
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.pricing-plan-dates dt,
.account-plan-dates dt {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pricing-plan-dates dd,
.account-plan-dates dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-weight: 900;
}

.pricing-section {
    padding-top: 40px;
    background: var(--surface-soft);
}

.ad-landing-hero {
    min-height: min(760px, calc(100svh - 36px));
    color: var(--ink);
    background:
        linear-gradient(90deg, rgba(247, 251, 247, 0.98) 0%, rgba(247, 251, 247, 0.92) 46%, rgba(247, 251, 247, 0.36) 100%),
        url("/images/hero-vibepal.jpg") 68% center / cover no-repeat,
        var(--mist);
}

.ad-landing-shade {
    min-height: inherit;
    background:
        linear-gradient(180deg, rgba(42, 167, 162, 0.12), rgba(246, 180, 75, 0.08)),
        linear-gradient(90deg, rgba(247, 251, 247, 0.18), rgba(255, 255, 255, 0.12));
}

.ad-landing-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.62fr);
    gap: 42px;
    align-items: center;
    min-height: inherit;
    padding-top: 42px;
    padding-bottom: 42px;
}

.ad-landing-copy {
    display: grid;
    gap: 18px;
    max-width: 760px;
}

.ad-landing-copy h1 {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(3.7rem, 8vw, 7.8rem);
    line-height: 0.88;
    letter-spacing: 0;
}

.ad-landing-copy > p:not(.eyebrow) {
    max-width: 660px;
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1.08rem, 2vw, 1.34rem);
    line-height: 1.48;
    font-weight: 760;
}

.ad-landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ad-landing-actions .button {
    min-height: 46px;
    padding: 12px 16px;
}

.ad-landing-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ad-landing-proof span {
    padding: 7px 10px;
    border: 1px solid rgba(42, 167, 162, 0.28);
    border-radius: 999px;
    color: var(--teal-ink);
    background: rgba(232, 248, 244, 0.82);
    font-size: 0.82rem;
    font-weight: 950;
}

.ad-landing-pal-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-self: end;
}

.ad-landing-tutor {
    position: relative;
    display: block;
    min-height: 196px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 22px 46px rgba(23, 52, 58, 0.18);
    transform: rotate(var(--tilt));
}

.ad-landing-tutor:nth-child(2),
.ad-landing-tutor:nth-child(3) {
    transform: translateY(18px) rotate(var(--tilt));
}

.ad-landing-tutor img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center top;
}

.ad-landing-tutor span {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    font-size: 0.86rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(23, 52, 58, 0.12);
}

.ad-landing-section {
    background: var(--surface-soft);
}

.ad-example-grid,
.ad-plan-grid {
    display: grid;
    gap: 14px;
}

.ad-example-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ad-example-card {
    display: grid;
    gap: 9px;
    min-height: 218px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.94), rgba(255, 248, 232, 0.72)),
        var(--white);
    box-shadow: 0 16px 34px rgba(23, 52, 58, 0.08);
}

.ad-example-card span {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.ad-example-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1.16;
}

.ad-example-card p,
.ad-landing-note {
    margin: 0;
    color: var(--ink-soft);
}

.ad-example-card p {
    font-size: 0.96rem;
    line-height: 1.48;
}

.ad-landing-flow {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.ad-landing-flow h2 {
    margin: 8px 0 0;
    font-size: clamp(2rem, 4vw, 3.45rem);
    line-height: 0.98;
}

.ad-flow-list {
    display: grid;
    gap: 10px;
}

.ad-flow-list div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 8px;
    background: var(--surface);
}

.ad-flow-list strong {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--teal), var(--violet));
    font-size: 1rem;
}

.ad-flow-list p {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 800;
    line-height: 1.42;
}

.ad-plan-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ad-plan-card {
    min-height: 100%;
}

.ad-landing-note {
    margin-top: 14px;
    font-size: 0.92rem;
    font-weight: 800;
}

.ad-landing-final .split {
    align-items: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    padding-top: 26px;
}

.pricing-card {
    --plan-accent: var(--teal);
    position: relative;
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 42%, var(--line));
    border-top: 5px solid var(--plan-accent);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 9%, var(--surface)), var(--surface) 34%),
        var(--white);
    box-shadow: 0 16px 36px rgba(23, 52, 58, 0.09);
}

.pricing-card.is-featured {
    box-shadow: 0 18px 42px rgba(23, 52, 58, 0.14);
}

.pricing-card.is-current {
    outline: 3px solid color-mix(in srgb, var(--plan-accent) 22%, transparent);
    box-shadow: 0 18px 42px rgba(23, 52, 58, 0.14);
}

.pricing-card-head {
    display: grid;
    gap: 7px;
}

.pricing-card-head span {
    justify-self: start;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 48%, var(--line));
    border-radius: 999px;
    color: color-mix(in srgb, var(--plan-accent) 74%, var(--ink));
    background: color-mix(in srgb, var(--plan-accent) 12%, var(--surface));
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pricing-card h2,
.pricing-value-grid h3 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: 0;
}

.pricing-card h2 {
    font-size: 1.44rem;
}

.pricing-card-head p,
.pricing-best,
.pricing-note,
.pricing-value-grid p {
    margin: 0;
    color: var(--ink-soft);
}

.pricing-card-head p {
    font-size: 0.88rem;
    line-height: 1.35;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
}

.pricing-price strong {
    color: var(--ink);
    font-size: 2.35rem;
    line-height: 0.94;
    letter-spacing: 0;
}

.pricing-price span {
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 900;
}

.pricing-current-marker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--plan-accent) 12%, var(--surface));
}

.pricing-pending-marker {
    background: var(--amber-soft);
}

.pricing-best {
    padding: 9px;
    border-radius: 7px;
    background: var(--surface-muted);
    font-size: 0.84rem;
    line-height: 1.3;
}

.pricing-best strong {
    color: var(--ink);
}

.pricing-usage,
.features-usage {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--plan-accent) 7%, var(--surface-soft));
}

.pricing-usage h3,
.features-usage h4 {
    margin: 0;
    color: color-mix(in srgb, var(--plan-accent) 68%, var(--ink));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
}

.pricing-usage ul,
.features-usage ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-usage li,
.features-usage li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: baseline;
    min-height: 24px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.pricing-usage span,
.features-usage span {
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
}

.pricing-usage strong,
.features-usage strong {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.pricing-feature-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-feature-list li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.28;
}

.pricing-feature-list img {
    margin-top: 2px;
}

.pricing-card .button {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
}

.pricing-card-simple {
    grid-template-rows: minmax(82px, auto) 58px 32px 58px minmax(116px, 1fr) 30px 44px;
    gap: 10px;
    padding: 21px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(23, 52, 58, 0.08);
}

.pricing-card-simple.is-featured {
    border-color: color-mix(in srgb, var(--plan-accent) 70%, var(--line));
    background: color-mix(in srgb, var(--plan-accent) 7%, var(--surface));
    box-shadow: 0 18px 38px color-mix(in srgb, var(--plan-accent) 15%, transparent);
}

.pricing-popular-ribbon {
    position: absolute;
    right: -1px;
    bottom: calc(100% + 1px);
    left: -1px;
    display: grid;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 8px 8px 0 0;
    color: #fff;
    background: var(--plan-accent);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    place-items: center;
}

.pricing-card-simple .pricing-card-head {
    align-content: start;
    min-height: 82px;
}

.pricing-card-simple .pricing-price {
    align-self: stretch;
    min-height: 58px;
    padding: 5px 0 8px;
}

.pricing-card-simple .pricing-price strong {
    font-size: 2.35rem;
}

.pricing-card-status {
    display: flex;
    align-items: center;
    min-height: 30px;
}

.pricing-plan-fit {
    color: color-mix(in srgb, var(--plan-accent) 76%, var(--ink));
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.pricing-card-action {
    display: flex;
    align-items: stretch;
    min-height: 44px;
}

.pricing-card-action .button {
    height: 44px;
}

.pricing-card-simple.is-featured .pricing-card-action .button-primary {
    border-color: var(--plan-accent);
    background: var(--plan-accent);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--plan-accent) 22%, transparent);
}

.pricing-voice-allowance,
.pricing-ai-allowance {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 28%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--plan-accent) 7%, var(--surface-soft));
}

.pricing-ai-allowance {
    border-color: color-mix(in srgb, var(--plan-accent) 18%, var(--line));
    background: color-mix(in srgb, var(--lavender-soft) 72%, var(--surface));
}

.pricing-voice-allowance img,
.pricing-ai-allowance img {
    opacity: 0.8;
}

.pricing-voice-allowance div,
.pricing-ai-allowance div {
    display: grid;
    gap: 1px;
}

.pricing-voice-allowance strong,
.pricing-ai-allowance strong {
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.2;
}

.pricing-voice-allowance span,
.pricing-ai-allowance span {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
}

.pricing-card-simple .button {
    margin-top: auto;
}

.pricing-card-simple .pricing-best {
    align-self: stretch;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    background: var(--surface-soft);
    line-height: 1.4;
}

.pricing-billing-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 16px auto 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(23, 52, 58, 0.08);
}

.pricing-billing-switch a {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
}

.pricing-billing-switch a:hover,
.pricing-billing-switch a:focus-visible {
    color: var(--ink);
    background: var(--surface-soft);
}

.pricing-billing-switch a.is-active {
    color: #fff;
    background: var(--teal-deep);
}

.pricing-billing-switch span {
    padding: 3px 6px;
    border-radius: 5px;
    color: var(--ink);
    background: var(--amber-soft);
    font-size: 0.67rem;
    white-space: nowrap;
}

.pricing-feature-notice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    max-width: 720px;
    margin: 18px auto 0;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    border-radius: 8px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--teal-soft) 62%, var(--surface));
    text-align: left;
}

.pricing-feature-notice p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.pricing-feature-notice strong {
    color: var(--ink);
}

.pricing-period-summary {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.pricing-period-summary div {
    display: grid;
    gap: 3px;
}

.pricing-period-summary span {
    color: var(--teal-deep);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pricing-period-summary strong {
    color: var(--ink);
    font-size: 1rem;
}

.pricing-period-summary p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 800;
    text-align: right;
}

.pricing-price-detail {
    min-height: 32px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
}

.pricing-feature-list-compact {
    align-content: start;
    gap: 6px;
    padding-top: 2px;
}

.pricing-feature-list-compact li {
    font-size: 0.79rem;
}

.pricing-feature-list-compact li.is-unavailable {
    color: var(--ink-soft);
}

.pricing-feature-list-compact li.is-unavailable img {
    opacity: 0.58;
}

.pricing-comparison {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.pricing-comparison .section-heading {
    align-items: end;
}

.pricing-comparison .section-heading > p {
    max-width: 320px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: right;
}

.pricing-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.pricing-comparison-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: var(--ink);
    font-size: 0.84rem;
}

.pricing-comparison-table th,
.pricing-comparison-table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.pricing-comparison-table th:first-child,
.pricing-comparison-table td:first-child {
    width: 31%;
    text-align: left;
}

.pricing-comparison-table thead th {
    color: var(--ink);
    background: var(--surface-soft);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pricing-comparison-table tbody th {
    font-weight: 900;
}

.pricing-comparison-table tbody td {
    color: var(--ink-soft);
    font-weight: 800;
}

.pricing-comparison-table tbody td strong {
    color: var(--ink);
}

.pricing-comparison-table tbody td.is-unavailable {
    color: color-mix(in srgb, var(--ink-soft) 62%, transparent);
}

.pricing-comparison-table tbody tr:last-child th,
.pricing-comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-terms {
    display: grid;
    grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.8fr);
    gap: 28px;
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.pricing-terms h2,
.pricing-terms .eyebrow {
    margin: 0;
}

.pricing-terms h2 {
    margin-top: 5px;
    font-size: 1.3rem;
}

.pricing-terms dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    margin: 0;
}

.pricing-terms dl > div {
    padding: 13px 0;
    border-top: 1px solid var(--line);
}

.pricing-terms dl > div:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
}

.pricing-terms dt {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 950;
}

.pricing-terms dd {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.5;
}

.pricing-simple-note {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: center;
}

.pricing-simple-note strong {
    color: var(--ink);
}

.pricing-shared {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr);
    gap: 20px;
    align-items: center;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.pricing-shared-wide {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pricing-shared h2,
.pricing-shared .eyebrow {
    margin: 0;
}

.pricing-shared h2 {
    margin-top: 4px;
    font-size: 1.25rem;
}

.pricing-shared-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-shared-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.3;
}

.pricing-shared-list img {
    opacity: 0.76;
}

.pricing-select-form {
    margin: 0;
}

.pricing-select-form button:disabled {
    color: var(--ink);
    background: var(--surface-muted);
    border-color: color-mix(in srgb, var(--plan-accent) 36%, var(--line));
    cursor: default;
}

.pricing-select-form button:disabled img {
    filter: none;
    opacity: 0.78;
}

.pricing-card.is-featured .button img {
    filter: brightness(0) invert(1);
}

.pricing-card.is-featured.is-current .button img {
    filter: none;
}

.plan-change-hero .pricing-hero-actions {
    margin-top: 24px;
}

.plan-change-section {
    background: var(--surface-soft);
}

.plan-change-grid,
.plan-change-detail {
    display: grid;
    gap: 18px;
}

.plan-change-summary-simple {
    align-content: center;
}

.plan-change-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.plan-change-card,
.plan-change-summary,
.plan-change-action {
    --plan-accent: var(--teal);
    border: 1px solid color-mix(in srgb, var(--plan-accent) 38%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 8%, var(--surface)), var(--surface) 42%),
        var(--white);
    box-shadow: 0 16px 34px rgba(23, 52, 58, 0.08);
}

.plan-change-card {
    display: grid;
    gap: 9px;
    padding: 18px;
    border-left: 6px solid var(--plan-accent);
}

.plan-change-card > span,
.plan-change-action > span {
    color: color-mix(in srgb, var(--plan-accent) 72%, var(--ink));
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.plan-change-card h2,
.plan-change-summary h2,
.plan-change-action h2 {
    margin: 0;
    color: var(--ink);
    line-height: 1.14;
    letter-spacing: 0;
}

.plan-change-card p,
.plan-change-summary p,
.plan-change-action p {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 800;
}

.plan-change-detail {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    align-items: start;
    margin-top: 18px;
}

.plan-change-summary {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.plan-change-summary .pricing-usage {
    max-width: 560px;
}

.plan-change-action {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 13px;
    padding: 18px;
    border-top: 5px solid var(--plan-accent);
}

.plan-change-action form {
    margin: 0;
}

.plan-change-action .button {
    width: 100%;
}

.plan-change-action .text-link {
    justify-self: center;
    font-weight: 900;
}

.pricing-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.pricing-value-grid article {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.07);
}

.pricing-note {
    max-width: 840px;
    margin-top: 24px;
    padding: 15px 18px;
    border: 1px solid rgba(42, 167, 162, 0.28);
    border-radius: 8px;
    background: var(--surface-raised);
    font-weight: 800;
}

.pricing-hero-actions,
.features-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.features-current-plan {
    display: inline-grid;
    gap: 2px;
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 42%, var(--line));
    border-left: 5px solid var(--plan-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 12px 26px rgba(23, 52, 58, 0.08);
}

.features-current-plan span,
.features-plan-card > span {
    color: color-mix(in srgb, var(--plan-accent) 72%, var(--ink));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.features-current-plan strong {
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1.15;
}

.features-current-plan em {
    color: var(--ink-soft);
    font-style: normal;
    font-weight: 800;
}

.features-tier-section {
    background: var(--surface-soft);
}

.features-plan-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.features-plan-card {
    --plan-accent: var(--teal);
    display: grid;
    gap: 9px;
    align-content: start;
    min-height: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 40%, var(--line));
    border-top: 4px solid var(--plan-accent);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 10%, var(--surface)), var(--surface) 36%),
        var(--white);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.08);
}

.features-plan-card.is-featured,
.features-plan-card.is-current {
    box-shadow: 0 16px 36px rgba(23, 52, 58, 0.13);
}

.features-plan-card.is-current {
    outline: 3px solid color-mix(in srgb, var(--plan-accent) 22%, transparent);
}

.features-plan-card h3,
.feature-group h3,
.features-cta h2 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.12;
}

.features-plan-card h3 {
    font-size: 1.22rem;
}

.features-plan-card p,
.features-plan-price small,
.feature-group-head p,
.features-note p,
.features-cta p {
    margin: 0;
    color: var(--ink-soft);
}

.features-plan-card p {
    font-size: 0.86rem;
    line-height: 1.34;
}

.features-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.features-plan-price strong {
    color: var(--ink);
    font-size: 1.95rem;
    line-height: 0.95;
}

.features-plan-price small {
    font-size: 0.78rem;
    font-weight: 900;
}

.features-plan-fit {
    padding: 8px;
    border-radius: 7px;
    background: var(--surface-muted);
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 800;
}

.features-plan-fit strong {
    color: var(--ink);
}

.features-breakdown-section {
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.feature-breakdown {
    display: grid;
    gap: 24px;
}

.feature-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.07);
}

.feature-group-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 20px;
    background:
        linear-gradient(90deg, rgba(42, 167, 162, 0.12), rgba(246, 180, 75, 0.09)),
        var(--surface-soft);
}

.feature-group-head img {
    margin-top: 2px;
}

.feature-group-head div {
    display: grid;
    gap: 5px;
}

.feature-table-wrap {
    overflow-x: auto;
}

.feature-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
}

.feature-table th,
.feature-table td {
    padding: 15px 14px;
    border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    vertical-align: top;
    text-align: left;
}

.feature-table thead th {
    border-top: 0;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.94rem;
    font-weight: 900;
}

.feature-table thead th:not(:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-top: 4px solid var(--plan-accent);
}

.feature-table thead span,
.feature-table thead small {
    display: block;
}

.feature-table thead small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.feature-table tbody th {
    width: 23%;
    color: var(--ink);
    background: var(--surface-raised);
    font-weight: 900;
}

.feature-table tbody td {
    width: 19.25%;
    border-left: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    color: var(--ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 4%, var(--surface)), var(--surface));
    font-weight: 760;
    line-height: 1.42;
}

.features-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 980px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(42, 167, 162, 0.28);
    border-radius: 8px;
    background: var(--surface-raised);
    font-weight: 800;
}

.features-note img {
    margin-top: 2px;
}

.features-cta {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(42, 167, 162, 0.1), rgba(242, 109, 91, 0.08)),
        var(--white);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.08);
}

.features-cta > div {
    display: grid;
    gap: 8px;
    max-width: 760px;
}

.search-form {
    max-width: 780px;
    margin-top: 28px;
}

.directory-filter-form {
    max-width: 1000px;
}

.directory-filter-panel {
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 92%, var(--teal-soft));
}

.directory-filter-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 9px 12px;
    list-style: none;
    cursor: pointer;
}

.directory-filter-panel > summary::-webkit-details-marker {
    display: none;
}

.directory-filter-panel > summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
    outline-offset: -3px;
}

.directory-filter-summary-label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.directory-filter-summary-label > img {
    flex: 0 0 auto;
}

.directory-filter-summary-label > span {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.directory-filter-summary-label strong,
.directory-filter-summary-label small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-filter-summary-label strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.directory-filter-summary-label small {
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.directory-filter-summary-meta {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 5px;
    color: var(--teal-deep);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 900;
}

.directory-filter-summary-meta::after {
    content: " +";
}

.directory-filter-panel[open] .directory-filter-summary-meta::after {
    content: " -";
}

.directory-filter-panel-body {
    padding: 14px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.search-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
}

.search-form .search-row {
    display: flex;
    gap: 10px;
}

.search-form input {
    width: 100%;
    min-height: 48px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
}

.directory-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.directory-filter-field {
    min-width: 0;
    margin-bottom: 0;
}

.directory-filter-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.directory-filter-field select {
    width: 100%;
    min-height: 42px;
}

.directory-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.directory-filter-actions .button {
    min-height: 42px;
    padding: 9px 12px;
    white-space: nowrap;
}

.track-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.track-filter a,
.track-chip-list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--surface);
    font-weight: 900;
}

.track-filter a:hover,
.track-filter a.is-active {
    color: var(--ink);
    border-color: rgba(42, 167, 162, 0.42);
    background: var(--teal-soft);
}

.profile-hero {
    padding: 52px 0 64px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, var(--page-muted), var(--page-warm));
}

.profile-paths-section {
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.profile-paths-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.profile-paths-head h2,
.profile-paths-head p,
.profile-path-card h3,
.profile-path-card p,
.profile-paths-empty h3,
.profile-paths-empty p {
    margin: 0;
    letter-spacing: 0;
}

.profile-paths-head h2 {
    font-size: 1.8rem;
}

.profile-paths-head > div > p:last-child,
.profile-path-card p,
.profile-paths-empty p {
    margin-top: 6px;
    color: var(--ink-soft);
}

.profile-paths-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-path-card,
.profile-paths-empty {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.profile-path-card-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

.profile-path-card-main > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 8px;
    color: var(--teal-deep);
    background: var(--teal-soft);
    font-size: 0.86rem;
    font-weight: 900;
}

.profile-path-progress {
    height: 8px;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--mist);
}

.profile-path-progress span {
    display: block;
    height: 100%;
    background: var(--teal);
}

.profile-path-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 7px 12px;
    margin-top: 9px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.profile-path-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    gap: 52px;
    align-items: start;
}

.profile-main-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--mist);
    box-shadow: var(--shadow);
}

.profile-call-price {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--teal-soft) 72%, var(--surface));
    box-shadow: 0 8px 18px rgba(23, 52, 58, 0.06);
}

.profile-call-price-icon {
    display: grid;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: var(--teal-soft-strong);
    place-items: center;
}

.profile-call-price-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.profile-call-price-copy > strong {
    color: var(--ink);
    font-size: 0.86rem;
    line-height: 1.2;
}

.profile-call-price-copy > small {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

.profile-call-price-value {
    color: var(--teal-deep);
    font-size: 0.92rem;
    white-space: nowrap;
}

.profile-call-button-price {
    font-size: 0.82rem;
    white-space: nowrap;
}

.gallery-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.gallery-strip button {
    aspect-ratio: 4 / 5;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
}

.gallery-strip button:focus,
.gallery-strip button:hover,
.gallery-strip button.is-active {
    border-color: var(--teal);
}

.gallery-strip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.profile-insight-panel {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 30px rgba(23, 52, 58, 0.1);
}

.profile-rating-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.profile-rating-card {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 2px 7px;
    min-width: 0;
}

.profile-rating-card > span {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.profile-rating-card > div {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.profile-rating-card strong {
    color: var(--ink);
    font-size: 1.55rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.profile-rating-card em,
.profile-rating-card small {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-rating-form {
    display: grid;
    gap: 12px;
}

.profile-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.profile-rating-stars button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 1px;
    border: 0;
    border-radius: 4px;
    color: #d5d9d9;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(17, 24, 39, 0.08);
    transition: color 140ms ease, transform 140ms ease, text-shadow 140ms ease;
}

.profile-rating-stars button:hover,
.profile-rating-stars button.is-selected {
    color: #ffa41c;
    text-shadow: 0 1px 0 #b26a00;
}

.profile-rating-stars.is-previewing button.is-selected {
    color: #d5d9d9;
    text-shadow: 0 1px 0 rgba(17, 24, 39, 0.08);
}

.profile-rating-stars.is-previewing button.is-preview {
    color: #ffa41c;
    text-shadow: 0 1px 0 #b26a00;
}

.profile-rating-stars button:focus-visible {
    color: #ffa41c;
    outline: 2px solid rgba(255, 164, 28, 0.62);
    outline-offset: 2px;
}

.profile-rating-stars button.is-current {
    color: #ff9900;
}

.profile-rating-stars button:hover,
.profile-rating-stars button:focus-visible {
    transform: translateY(-1px);
}

.profile-rating-stars button:disabled {
    cursor: wait;
    opacity: 0.74;
    transform: none;
}

.profile-rating-form p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.25;
}

.profile-review-field {
    display: grid;
    gap: 6px;
}

.profile-review-field span {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 900;
}

.profile-review-field textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
}

.profile-review-field textarea:focus {
    outline: 2px solid rgba(42, 167, 162, 0.28);
    border-color: rgba(42, 167, 162, 0.58);
    background: var(--surface);
}

.profile-review-submit,
.profile-review-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 36px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--teal) 72%, var(--line));
    border-radius: 7px;
    color: var(--white);
    background: var(--action);
    font-size: 0.84rem;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(23, 52, 58, 0.14);
}

.profile-review-submit:hover,
.profile-review-login:hover {
    border-color: var(--teal);
    background: var(--action-hover);
}

.profile-review-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.profile-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-reviews-wrap {
    display: grid;
    gap: 18px;
}

.profile-reviews-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.profile-reviews-head h2 {
    margin: 6px 0 0;
}

.profile-reviews-score {
    display: grid;
    min-width: 126px;
    padding: 12px 14px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 7px;
    background: linear-gradient(135deg, var(--teal-soft), var(--amber-soft));
    text-align: right;
}

.profile-reviews-score strong {
    color: var(--ink);
    font-size: 1.45rem;
    line-height: 1;
}

.profile-reviews-score span {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-review-list {
    display: grid;
    gap: 12px;
}

.profile-review-empty,
.profile-review-card {
    margin: 0;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 28px rgba(23, 52, 58, 0.07);
}

.profile-review-empty {
    color: var(--ink-soft);
    font-weight: 850;
}

.profile-review-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
}

.profile-review-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-weight: 950;
}

.profile-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-review-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.profile-review-meta strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.profile-review-meta span {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 850;
}

.profile-review-stars {
    display: flex;
    gap: 1px;
    margin-top: 4px;
    color: #d5d9d9;
    font-size: 1.18rem;
    line-height: 1;
}

.profile-review-stars .is-selected {
    color: #ffa41c;
    text-shadow: 0 1px 0 #b26a00;
}

.profile-review-card p {
    margin: 9px 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}

.profile-insight-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.profile-insight-stats div {
    min-width: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 7px;
    background: var(--surface-soft);
}

.profile-insight-stats strong,
.profile-insight-stats span {
    display: block;
    overflow-wrap: anywhere;
}

.profile-pal-activity {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.profile-pal-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-pal-activity-head strong {
    color: var(--ink);
    font-size: 0.83rem;
    letter-spacing: 0;
}

.profile-pal-activity-head span {
    color: var(--teal-deep);
    font-size: 0.76rem;
    font-weight: 900;
}

.profile-pal-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 7px;
    background: var(--surface-soft);
}

.profile-pal-activity-grid > div {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    border-left: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.profile-pal-activity-grid > div:first-child {
    border-left: 0;
}

.profile-pal-activity-grid img {
    opacity: 0.74;
}

.profile-pal-activity-grid strong,
.profile-pal-activity-grid span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-pal-activity-grid strong {
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.15;
}

.profile-pal-activity-grid span {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-pal-activity-grid .profile-pal-last-contact {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-height: 44px;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-left: 0;
}

.profile-pal-last-contact img {
    grid-row: 1 / span 2;
}

.profile-pal-last-contact span {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.profile-insight-stats strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.12;
}

.profile-insight-stats span {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-insight-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.profile-insight-favorite {
    margin: 0;
}

.profile-insight-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.profile-insight-action:hover,
.profile-insight-action.is-favorite {
    color: var(--teal-ink);
    border-color: rgba(42, 167, 162, 0.36);
    background: var(--teal-soft);
}

.profile-media .profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 14px 30px rgba(23, 52, 58, 0.08);
}

.profile-media .profile-actions .button {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.profile-media .profile-actions .button-primary {
    grid-column: 1 / -1;
}

.profile-action-chat {
    border-color: #18383e;
    color: #fff;
    background: #18383e;
    box-shadow: 0 7px 16px color-mix(in srgb, #18383e 22%, transparent);
}

.profile-action-chat:hover {
    border-color: #234c54;
    color: #fff;
    background: #234c54;
    box-shadow: 0 10px 20px color-mix(in srgb, #18383e 30%, transparent);
    transform: translateY(-1px);
}

.profile-media .profile-actions .profile-action-call {
    border-color: #16845f;
    color: #fff;
    background: #16845f;
    box-shadow: 0 7px 16px color-mix(in srgb, #16845f 22%, transparent);
}

.profile-media .profile-actions .profile-action-call:hover {
    border-color: #0f694a;
    color: #fff;
    background: #0f694a;
    box-shadow: 0 10px 20px color-mix(in srgb, #16845f 30%, transparent);
    transform: translateY(-1px);
}

.profile-media .profile-actions .profile-action-schedule {
    border-color: #057496;
    color: #fff;
    background: #057496;
    box-shadow: 0 7px 16px color-mix(in srgb, #057496 22%, transparent);
}

.profile-media .profile-actions .profile-action-schedule:hover {
    border-color: #045b77;
    color: #fff;
    background: #045b77;
    box-shadow: 0 10px 20px color-mix(in srgb, #057496 30%, transparent);
    transform: translateY(-1px);
}

.profile-media .profile-actions .profile-action-path {
    border-color: #621dd8;
    color: #fff;
    background: #621dd8;
    box-shadow: 0 7px 16px color-mix(in srgb, #621dd8 22%, transparent);
}

.profile-media .profile-actions .profile-action-path:hover {
    border-color: #4c16ac;
    color: #fff;
    background: #4c16ac;
    box-shadow: 0 10px 20px color-mix(in srgb, #621dd8 30%, transparent);
    transform: translateY(-1px);
}

.profile-media .profile-actions .profile-action-guide {
    border-color: #a64b0c;
    color: #fff;
    background: #a64b0c;
    box-shadow: 0 7px 16px color-mix(in srgb, #a64b0c 22%, transparent);
}

.profile-media .profile-actions .profile-action-guide:hover {
    border-color: #803906;
    color: #fff;
    background: #803906;
    box-shadow: 0 10px 20px color-mix(in srgb, #a64b0c 30%, transparent);
    transform: translateY(-1px);
}

.profile-media .profile-actions .profile-action-live img,
.profile-media .profile-actions .profile-action-schedule img,
.profile-media .profile-actions .profile-action-path img,
.profile-media .profile-actions .profile-action-guide img {
    filter: brightness(0) invert(1);
}

.profile-media .profile-actions .button:active {
    box-shadow: none;
    transform: translateY(0);
}

.profile-media .profile-actions .button:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 2px;
}

.profile-media .profile-actions .profile-action-live {
    justify-content: flex-start;
    text-align: left;
}

.profile-media .profile-actions .profile-action-live > img {
    flex: 0 0 auto;
}

.profile-action-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.profile-action-copy strong,
.profile-action-copy small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-action-copy strong {
    font-size: 0.86rem;
    line-height: 1.15;
}

.profile-action-copy small {
    color: inherit;
    font-size: 0.69rem;
    font-weight: 760;
    line-height: 1.25;
    opacity: 0.8;
}

.profile-next-step {
    margin-top: 24px;
    padding: 20px 18px 18px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-right: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-left: 4px solid var(--teal);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--teal-soft) 48%, var(--surface));
}

.profile-next-step-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.profile-next-step .eyebrow {
    margin: 0 0 5px;
}

.profile-next-step h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-next-step-head div > p:last-child {
    max-width: 540px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 720;
    line-height: 1.5;
}

.profile-next-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
    border-radius: 6px;
    color: var(--amber-ink);
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-next-step-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.profile-next-step-actions .button {
    justify-content: flex-start;
    min-width: 0;
    min-height: 62px;
    padding: 11px 14px;
    text-align: left;
}

.profile-next-step-actions .button > img {
    flex: 0 0 auto;
}

.profile-next-step-actions .profile-action-copy strong {
    font-size: 0.9rem;
}

.profile-next-step-assurance {
    display: flex;
    align-items: start;
    gap: 8px;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 740;
    line-height: 1.45;
}

.profile-next-step-assurance img {
    flex: 0 0 auto;
    margin-top: 1px;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--ink-soft);
    font-weight: 900;
}

.breadcrumbs a {
    color: var(--teal-deep);
}

.profile-summary h1 {
    font-size: 3.45rem;
}

.profile-tagline {
    margin: 18px 0 0;
    color: var(--ink-soft);
    font-size: 1.22rem;
}

.profile-personal-intro {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 20px 0 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    border-left: 4px solid var(--teal);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--teal-soft) 58%, var(--surface));
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.06);
}

.profile-personal-intro-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--teal-deep);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 30%, var(--line));
}

.profile-personal-intro-icon img {
    width: 20px;
    height: 20px;
}

.profile-personal-intro .eyebrow {
    margin: 0 0 3px;
    font-size: 0.72rem;
}

.profile-personal-intro h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.profile-personal-intro p:last-child {
    margin: 7px 0 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.58;
}

.profile-market-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 22px;
}

.profile-market-panel div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.profile-market-panel div > img {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 1px solid rgba(42, 167, 162, 0.2);
    border-radius: 8px;
    background: var(--surface-raised);
}

.profile-market-panel strong,
.profile-market-panel span {
    display: block;
    overflow-wrap: anywhere;
}

.profile-market-panel strong {
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.18;
}

.profile-market-panel span {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-summary > p:not(.eyebrow):not(.profile-tagline) {
    color: var(--ink-soft);
}

.profile-quality-panel {
    margin: 22px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.profile-quality-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: end;
}

.profile-quality-head .eyebrow {
    margin: 0 0 5px;
}

.profile-quality-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-quality-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--mint) 46%, var(--line));
    border-radius: 6px;
    color: var(--teal-ink);
    background: color-mix(in srgb, var(--teal-soft) 68%, var(--surface));
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-quality-source > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 20%, transparent);
}

.profile-quality-copy {
    max-width: 640px;
    margin: 9px 0 15px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 720;
    line-height: 1.55;
}

.profile-quality-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
}

.profile-quality-metric {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    min-width: 0;
    min-height: 112px;
    padding: 14px;
}

.profile-quality-metric:nth-child(even) {
    border-left: 1px solid var(--line);
}

.profile-quality-metric:nth-child(n + 3) {
    border-top: 1px solid var(--line);
}

.profile-quality-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    border-radius: 7px;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 66%, var(--surface));
    font-size: 1.22rem;
    font-weight: 950;
}

.profile-quality-icon-star {
    border-color: color-mix(in srgb, var(--amber) 46%, var(--line));
    color: #d98200;
    background: color-mix(in srgb, var(--amber-soft) 74%, var(--surface));
}

.profile-quality-icon img {
    width: 20px;
    height: 20px;
}

.profile-quality-metric strong,
.profile-quality-metric span,
.profile-quality-metric small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-quality-metric strong {
    color: var(--ink);
    font-size: 1.28rem;
    line-height: 1.12;
}

.profile-quality-metric div > span {
    margin-top: 4px;
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-quality-metric small {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 720;
    line-height: 1.4;
}

.profile-quality-goals {
    padding: 15px 0 13px;
    border-bottom: 1px solid var(--line);
}

.profile-quality-goals > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.profile-quality-goals header strong,
.profile-quality-goals header span {
    display: block;
}

.profile-quality-goals header strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.profile-quality-goals header div > span {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 720;
}

.profile-quality-goal-source {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--violet) 34%, var(--line));
    border-radius: 5px;
    color: var(--violet-ink);
    background: color-mix(in srgb, var(--violet-soft) 72%, var(--surface));
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-quality-goals ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.profile-quality-goals li {
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--teal-soft) 48%, var(--surface));
    font-size: 0.76rem;
    font-weight: 850;
}

.profile-quality-goals > p {
    display: flex;
    align-items: start;
    gap: 7px;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.42;
}

.profile-quality-goals > p img {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.profile-quality-method {
    padding-top: 11px;
}

.profile-quality-method summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.profile-quality-method summary::-webkit-details-marker {
    display: none;
}

.profile-quality-method summary img {
    transition: transform 160ms ease;
}

.profile-quality-method[open] summary img {
    transform: rotate(180deg);
}

.profile-quality-method summary:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 3px;
}

.profile-quality-method > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin-top: 11px;
    padding-bottom: 4px;
}

.profile-quality-method p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.74rem;
    line-height: 1.48;
}

.profile-quality-method p strong {
    color: var(--ink);
}

.profile-proof-panel {
    margin: 22px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.profile-proof-head {
    display: grid;
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: end;
}

.profile-proof-head .eyebrow {
    margin: 0 0 5px;
}

.profile-proof-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-proof-head > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.5;
}

.profile-best-for {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 15px;
    padding: 13px 15px;
    border-left: 4px solid var(--amber);
    border-radius: 0 7px 7px 0;
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
}

.profile-best-for-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    white-space: nowrap;
}

.profile-best-for-label img {
    width: 20px;
    height: 20px;
}

.profile-best-for-label strong {
    font-size: 0.86rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-proof-tags,
.profile-proof-plain-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-proof-tags li {
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line));
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin: 10px 0 0;
}

.profile-proof-grid > div {
    min-width: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.profile-proof-grid .profile-proof-wide {
    grid-column: 1 / -1;
}

.profile-proof-grid dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-deep);
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-proof-grid dt img {
    width: 18px;
    height: 18px;
}

.profile-proof-grid dd {
    margin: 7px 0 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.5;
}

.profile-proof-plain-list {
    gap: 5px 14px;
}

.profile-proof-plain-list li {
    position: relative;
    padding-left: 12px;
}

.profile-proof-plain-list li::before {
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
    content: "";
}

.profile-comparison {
    margin: 24px 0;
    padding: 20px 0 2px;
    border-top: 1px solid var(--line);
}

.profile-comparison-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.profile-comparison-head .eyebrow {
    margin: 0 0 5px;
}

.profile-comparison-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-comparison-head div > p:last-child {
    max-width: 640px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 740;
    line-height: 1.5;
}

.profile-comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 6px;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 60%, var(--surface));
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.profile-comparison-item {
    min-width: 0;
}

.profile-comparison-card {
    --comparison-accent: var(--amber);
    display: flex;
    height: 100%;
    min-height: 254px;
    flex-direction: column;
    padding: 13px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--comparison-accent);
    border-radius: 8px;
    color: inherit;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
    text-decoration: none;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 5%, transparent);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.profile-comparison-item:nth-child(3n) .profile-comparison-card {
    --comparison-accent: var(--violet);
}

.profile-comparison-card.is-current {
    --comparison-accent: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 48%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 36%, var(--surface));
}

.profile-comparison-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--comparison-accent) 62%, var(--line));
    background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
    box-shadow: 0 13px 26px color-mix(in srgb, var(--ink) 10%, transparent);
}

.profile-comparison-card:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 3px;
}

.profile-comparison-person {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.profile-comparison-portrait {
    width: 62px;
    height: 62px;
    border: 2px solid color-mix(in srgb, var(--comparison-accent) 46%, var(--line));
    border-radius: 7px;
    object-fit: cover;
    object-position: center 24%;
    background: var(--surface);
}

.profile-comparison-current,
.profile-comparison-alternative {
    display: block;
    margin-bottom: 3px;
    color: var(--teal-deep);
    font-size: 0.63rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-comparison-alternative {
    color: var(--ink-soft);
}

.profile-comparison-person h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.22;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.profile-comparison-person p {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

.profile-comparison-best {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
}

.profile-comparison-best span {
    display: block;
    color: var(--ink-soft);
    font-size: 0.63rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-comparison-best strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.profile-comparison-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.profile-comparison-tags li {
    padding: 4px 6px;
    border: 1px solid color-mix(in srgb, var(--comparison-accent) 32%, var(--line));
    border-radius: 5px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    font-size: 0.64rem;
    font-weight: 820;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.profile-comparison-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 11px;
    color: var(--teal-deep);
    font-size: 0.72rem;
    font-weight: 950;
}

.profile-comparison-link img {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    transition: transform 160ms ease;
}

.profile-comparison-card:hover .profile-comparison-link img {
    transform: translateX(2px) rotate(-90deg);
}

.profile-comparison-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.profile-comparison-footer p {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.45;
}

.profile-comparison-footer p img {
    margin-top: 2px;
}

.profile-first-lesson {
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.profile-first-hangout-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.profile-first-hangout-head .eyebrow {
    margin: 0 0 5px;
}

.profile-first-hangout-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-first-hangout-head div > p:last-child {
    max-width: 590px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 740;
    line-height: 1.5;
}

.profile-first-hangout-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--violet) 34%, var(--line));
    border-radius: 6px;
    color: var(--violet-ink);
    background: color-mix(in srgb, var(--violet-soft) 68%, var(--surface));
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-first-hangout-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.profile-first-hangout-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    min-width: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.profile-first-hangout-step:nth-child(odd) {
    padding-right: 18px;
}

.profile-first-hangout-step:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.profile-first-hangout-step-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    border-radius: 7px;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 58%, var(--surface));
}

.profile-first-hangout-step:nth-child(2) .profile-first-hangout-step-icon,
.profile-first-hangout-step:nth-child(4) .profile-first-hangout-step-icon {
    border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
    color: var(--amber-ink);
    background: color-mix(in srgb, var(--amber-soft) 62%, var(--surface));
}

.profile-first-hangout-step-number {
    display: block;
    margin-bottom: 3px;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-first-hangout-step strong {
    display: block;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.25;
}

.profile-first-hangout-step p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.48;
}

.profile-first-hangout-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.profile-first-hangout-notes p {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.46;
}

.profile-first-hangout-notes img {
    margin-top: 2px;
}

.profile-first-hangout-notes strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 950;
}
.profile-progress-roadmap {
    margin: 24px 0;
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--line);
}

.profile-progress-roadmap-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.profile-progress-roadmap-head .eyebrow {
    margin: 0 0 5px;
}

.profile-progress-roadmap-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-progress-roadmap-head div > p:last-child {
    max-width: 610px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 740;
    line-height: 1.5;
}

.profile-progress-roadmap-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--teal) 36%, var(--line));
    border-radius: 6px;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 62%, var(--surface));
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-progress-roadmap-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.profile-progress-roadmap-step {
    --roadmap-accent: var(--teal);
    position: relative;
    min-width: 0;
    min-height: 176px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--roadmap-accent) 34%, var(--line));
    border-top: 3px solid var(--roadmap-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.profile-progress-roadmap-step:nth-child(2) {
    --roadmap-accent: var(--amber);
}

.profile-progress-roadmap-step:nth-child(3) {
    --roadmap-accent: var(--violet);
}

.profile-progress-roadmap-period {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--roadmap-accent) 40%, var(--line));
    border-radius: 5px;
    color: var(--ink);
    background: color-mix(in srgb, var(--roadmap-accent) 12%, var(--surface));
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-progress-roadmap-marker {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--roadmap-accent);
    font-size: 0.72rem;
    font-weight: 950;
}

.profile-progress-roadmap-step > strong {
    display: block;
    margin-top: 13px;
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.28;
}

.profile-progress-roadmap-step > p {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.48;
}

.profile-progress-roadmap-connector {
    position: absolute;
    z-index: 2;
    top: calc(50% - 9px);
    right: -22px;
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}

.profile-progress-roadmap-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.profile-progress-roadmap-footer > p {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.46;
}

.profile-progress-roadmap-footer > p img {
    margin-top: 2px;
}

.profile-progress-roadmap-footer > p strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 950;
}

.profile-progress-roadmap-action {
    min-height: 42px;
    padding: 9px 12px;
    white-space: nowrap;
}
.profile-demo-panel {
    margin: 24px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.profile-demo-head {
    display: grid;
    grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.22fr);
    gap: 24px;
    align-items: end;
}

.profile-demo-head .eyebrow {
    margin: 0 0 5px;
}

.profile-demo-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-demo-head > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.5;
}

.profile-demo-conversation {
    display: grid;
    gap: 13px;
    margin-top: 15px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.profile-demo-message {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    width: min(92%, 620px);
}

.profile-demo-member {
    grid-template-columns: minmax(0, 1fr) 36px;
    justify-self: end;
    width: min(82%, 540px);
}

.profile-demo-pal {
    justify-self: start;
}

.profile-demo-pal > img,
.profile-demo-member-avatar {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line));
    border-radius: 50%;
    background: var(--surface);
}

.profile-demo-pal > img {
    object-fit: cover;
}

.profile-demo-member-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 950;
}

.profile-demo-message-body {
    min-width: 0;
}

.profile-demo-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 2px 5px;
}

.profile-demo-message-meta strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 950;
}

.profile-demo-message-meta span {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.profile-demo-message-body > p {
    margin: 0;
    padding: 11px 13px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.profile-demo-member .profile-demo-message-body > p {
    border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--line));
    background: color-mix(in srgb, var(--amber-soft) 68%, var(--surface));
}

.profile-demo-pal .profile-demo-message-body > p {
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 68%, var(--surface));
}

.profile-personality-panel {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--teal-soft) 72%, transparent), color-mix(in srgb, var(--amber-soft) 44%, transparent)),
        var(--surface);
    box-shadow: 0 14px 30px rgba(23, 52, 58, 0.07);
}

.profile-personality-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.profile-personality-head > img {
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--line));
    border-radius: 8px;
    background: var(--surface-raised);
}

.profile-personality-head .eyebrow {
    margin: 0 0 5px;
}

.profile-personality-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.profile-personality-statement {
    display: grid;
    gap: 5px;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--amber);
}

.profile-personality-statement span {
    color: var(--amber-ink);
    font-size: 0.67rem;
    font-weight: 950;
    text-transform: uppercase;
}

.profile-personality-statement strong {
    color: var(--ink);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.profile-personality-panel > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.93rem;
    font-weight: 750;
    line-height: 1.55;
}

.profile-personality-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-personality-traits li {
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    border-radius: 6px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
}

blockquote {
    margin: 24px 0 0;
    padding: 18px 20px;
    border-left: 4px solid var(--amber);
    border-radius: 0 8px 8px 0;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    font-size: 1.04rem;
    font-weight: 800;
}

.profile-faq {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.profile-faq-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.profile-faq-head .eyebrow {
    margin: 0 0 5px;
}

.profile-faq-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.profile-faq-head div > p:last-child {
    max-width: 590px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 720;
    line-height: 1.5;
}

.profile-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--violet) 34%, var(--line));
    border-radius: 6px;
    color: var(--violet-ink);
    background: color-mix(in srgb, var(--violet-soft) 58%, var(--surface));
    font-size: 0.67rem;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile-faq-list {
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

.profile-faq-item {
    border-bottom: 1px solid var(--line);
}

.profile-faq-item summary {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 17px;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 10px 2px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: color 160ms ease, background-color 160ms ease;
}

.profile-faq-item summary::-webkit-details-marker {
    display: none;
}

.profile-faq-item summary:hover {
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 28%, transparent);
}

.profile-faq-item summary:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 2px;
}

.profile-faq-mark {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 50%;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal-soft) 52%, var(--surface));
    font-size: 0.78rem;
    font-weight: 950;
}

.profile-faq-item summary strong {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.profile-faq-item summary > img {
    width: 17px;
    height: 17px;
    transition: transform 160ms ease;
}

.profile-faq-item[open] summary > img {
    transform: rotate(180deg);
}

.profile-faq-item > p {
    margin: 0;
    padding: 0 28px 14px 42px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.profile-ai-panel {
    display: block;
    margin-top: 18px;
    padding: 0;
    border: 1px solid rgba(42, 167, 162, 0.26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.82), rgba(255, 248, 232, 0.58)),
        rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 34px rgba(23, 52, 58, 0.08);
    overflow: clip;
}

.profile-ai-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: background-color 160ms ease;
}

.profile-ai-summary::-webkit-details-marker {
    display: none;
}

.profile-ai-summary:hover {
    background: color-mix(in srgb, var(--teal-soft) 42%, transparent);
}

.profile-ai-summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 48%, transparent);
    outline-offset: -3px;
}

.profile-ai-panel[open] .profile-ai-summary {
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
}

.profile-ai-content {
    padding: 14px 16px 16px;
}

.profile-ai-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.profile-ai-head img {
    width: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 8px;
    background: var(--surface);
}

.profile-ai-head .eyebrow {
    display: block;
    margin: 0 0 5px;
}

.profile-ai-head strong {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0;
}

.profile-ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.profile-ai-toggle img {
    width: 17px;
    height: 17px;
    transition: transform 160ms ease;
}

.profile-ai-toggle-close {
    display: none;
}

.profile-ai-panel[open] .profile-ai-toggle-open {
    display: none;
}

.profile-ai-panel[open] .profile-ai-toggle-close {
    display: inline;
}

.profile-ai-panel[open] .profile-ai-toggle img {
    transform: rotate(180deg);
}

.profile-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.profile-ai-grid div {
    min-width: 0;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.profile-ai-grid span,
.profile-ai-grid strong,
.profile-ai-grid p {
    display: block;
    overflow-wrap: anywhere;
}

.profile-ai-grid span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-ai-grid strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.2;
}

.profile-ai-grid p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 800;
}

.hangout-card {
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.96), rgba(255, 243, 212, 0.72)),
        var(--white);
}

.detail-list {
    margin: 18px 0 0;
}

.detail-list div {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.detail-list dt {
    color: var(--ink);
    font-weight: 900;
}

.detail-list dd {
    margin: 5px 0 0;
    color: var(--ink-soft);
}

.detail-panel.soft {
    background: var(--surface-soft);
}

.track-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.track-chip-list a {
    border-color: color-mix(in srgb, var(--track-color) 42%, var(--line));
    background: color-mix(in srgb, var(--track-color) 12%, var(--surface));
}

.text-stack p + p {
    margin-top: 18px;
}

.safety-note {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-weight: 800;
}

.article-page .page-hero {
    padding-bottom: 62px;
}

.prose {
    color: var(--ink-soft);
    font-size: 1.06rem;
}

.prose h2 {
    margin: 34px 0 8px;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1.16;
    letter-spacing: 0;
}

.prose p {
    margin: 16px 0;
}

.prose ul {
    margin: 16px 0;
    padding-left: 22px;
}

.prose li + li {
    margin-top: 8px;
}

.empty-state {
    max-width: 620px;
    margin: 34px auto 0;
    padding: 28px;
    text-align: center;
}

.latest-pals-hero {
    padding-top: 54px;
    padding-bottom: 48px;
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--amber) 28%, transparent) 0 110px, transparent 112px),
        linear-gradient(135deg, var(--surface-soft), var(--teal-soft));
}

.latest-pals-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
    align-items: end;
    gap: 46px;
}

.latest-pals-hero h1 {
    max-width: 760px;
    margin: 8px 0 14px;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.latest-pals-hero p:not(.eyebrow) {
    max-width: 720px;
    line-height: 1.7;
}

.latest-pals-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.latest-pals-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 18px 42px rgba(23, 52, 58, 0.1);
}

.latest-pals-summary div {
    min-width: 0;
    padding: 20px 14px;
    text-align: center;
}

.latest-pals-summary div + div {
    border-left: 1px solid var(--line);
}

.latest-pals-summary dt {
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 950;
}

.latest-pals-summary dd {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.latest-pals-section {
    padding: 34px 0 80px;
}

.latest-pal-jump {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.latest-pal-jump span {
    margin-right: 4px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.latest-pal-jump a {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--surface);
    font-size: 0.8rem;
    font-weight: 900;
}

.latest-pal-jump a:hover,
.latest-pal-jump a:focus-visible {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.latest-pal-collection {
    padding: 54px 0 10px;
    scroll-margin-top: 96px;
}

.latest-pal-collection + .latest-pal-collection {
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.latest-pal-collection-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.latest-pal-collection-head h2 {
    margin: 5px 0 8px;
    color: var(--ink);
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1.05;
}

.latest-pal-collection-head p:last-child {
    max-width: 790px;
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.65;
}

.latest-pal-collection-head > span {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--violet-ink);
    background: var(--violet-soft);
    font-size: 0.78rem;
    font-weight: 950;
}

.latest-pal-grid .profile-card h3 {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    font-size: 1.05rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.latest-pal-grid .profile-card-actions .card-action-link {
    width: 100%;
    color: var(--white);
    border-color: var(--action);
    background: var(--action);
}

.latest-pal-grid .profile-card-actions .card-action-link:hover {
    border-color: var(--action-hover);
    background: var(--action-hover);
}

.latest-pals-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 68px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface), var(--amber-soft));
}

.latest-pals-cta h2 {
    margin: 5px 0 7px;
    color: var(--ink);
    font-size: 1.55rem;
}

.latest-pals-cta p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--ink-soft);
}

.latest-pals-cta .button {
    flex: 0 0 auto;
}

@media (max-width: 880px) {
    .latest-pals-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 620px) {
    .latest-pals-hero {
        padding-top: 36px;
        padding-bottom: 32px;
    }

    .latest-pals-hero h1 {
        font-size: 2.65rem;
    }

    .latest-pals-hero-actions,
    .latest-pals-hero-actions .button {
        width: 100%;
    }

    .latest-pals-summary {
        grid-template-columns: 1fr;
    }

    .latest-pals-summary div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 14px;
        text-align: left;
    }

    .latest-pals-summary div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .latest-pals-summary dd {
        margin: 0;
    }

    .latest-pal-collection {
        padding-top: 40px;
    }

    .latest-pal-collection-head,
    .latest-pals-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .latest-pal-collection-head > span {
        align-self: flex-start;
    }

    .latest-pals-cta .button {
        width: 100%;
    }
}

.changelog-hero {
    padding-top: 54px;
    padding-bottom: 38px;
}

.changelog-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.72fr);
    align-items: end;
    gap: 44px;
}

.changelog-hero h1 {
    margin-top: 5px;
}

.changelog-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.changelog-summary div {
    min-width: 0;
    padding: 16px 14px;
    text-align: center;
}

.changelog-summary div + div {
    border-left: 1px solid var(--line);
}

.changelog-summary dt {
    overflow: hidden;
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.changelog-summary dd {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.changelog-section {
    padding: 42px 0 76px;
    background: var(--paper);
}

.changelog-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.5fr) minmax(0, 1.72fr);
    align-items: start;
    gap: 46px;
}

.changelog-index {
    position: sticky;
    top: 96px;
    min-width: 0;
    padding-right: 28px;
    border-right: 1px solid var(--line);
}

.changelog-index h2 {
    margin: 4px 0 15px;
    color: var(--ink);
    font-size: 1.28rem;
}

.changelog-index nav {
    display: grid;
    gap: 4px;
}

.changelog-index nav a {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-left: 3px solid transparent;
    border-radius: 0 5px 5px 0;
    color: var(--ink);
    text-decoration: none;
}

.changelog-index nav a:hover,
.changelog-index nav a[aria-current="true"] {
    border-left-color: var(--teal);
    background: var(--teal-soft);
}

.changelog-index nav time {
    color: var(--teal-deep);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.changelog-index nav span {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.changelog-index-note {
    margin: 18px 0 0;
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.5;
}

.changelog-feed {
    min-width: 0;
}

.changelog-release {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 26px;
    padding: 0 0 42px;
    margin: 0 0 42px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 92px;
}

.changelog-release-meta {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 10px;
}

.changelog-release-meta time {
    width: 68px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    text-align: center;
}

.changelog-release-meta time span,
.changelog-release-meta time em {
    display: block;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.changelog-release-meta time span {
    padding: 7px 5px 6px;
    color: var(--control-contrast);
    background: var(--teal-deep);
}

.changelog-release-meta time strong {
    display: block;
    padding: 8px 5px 3px;
    color: var(--ink);
    font-size: 1.7rem;
    line-height: 1;
}

.changelog-release-meta time em {
    padding: 0 5px 8px;
}

.changelog-latest {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.changelog-release-copy {
    min-width: 0;
}

.changelog-release-copy > header {
    margin-bottom: 20px;
}

.changelog-release-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.72rem;
    line-height: 1.14;
}

.changelog-release-copy > header p {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.changelog-items {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.changelog-items li {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.changelog-items li:last-child {
    border-bottom: 0;
}

.changelog-items p {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.58;
}

.changelog-kind {
    width: fit-content;
    min-width: 70px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.61rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.changelog-kind.is-new {
    color: var(--teal-ink);
    border-color: color-mix(in srgb, var(--teal) 35%, var(--line));
    background: var(--teal-soft);
}

.changelog-kind.is-improved {
    color: var(--violet-ink);
    border-color: color-mix(in srgb, var(--violet) 30%, var(--line));
    background: var(--violet-soft);
}

.changelog-kind.is-fixed {
    color: var(--amber-ink);
    border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
    background: var(--amber-soft);
}

.changelog-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.changelog-support h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 1.35rem;
}

.changelog-support p:last-child {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.changelog-support .button {
    flex: 0 0 auto;
}

@media (max-width: 880px) {
    .changelog-hero-inner,
    .changelog-layout {
        grid-template-columns: 1fr;
    }

    .changelog-hero-inner {
        gap: 24px;
    }

    .changelog-index {
        position: static;
        padding: 0 0 24px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .changelog-index nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .changelog-index-note {
        max-width: 680px;
    }
}

@media (max-width: 620px) {
    .changelog-hero {
        padding-top: 34px;
        padding-bottom: 28px;
    }

    .changelog-summary {
        grid-template-columns: 1fr;
    }

    .changelog-summary div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 14px;
        text-align: left;
    }

    .changelog-summary div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .changelog-summary dd {
        margin: 0;
    }

    .changelog-section {
        padding-top: 28px;
    }

    .changelog-index nav {
        grid-template-columns: 1fr;
    }

    .changelog-release {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 34px;
        margin-bottom: 34px;
    }

    .changelog-release-meta {
        display: flex;
        align-items: center;
    }

    .changelog-release-meta time {
        width: auto;
        display: inline-flex;
        align-items: center;
    }

    .changelog-release-meta time span,
    .changelog-release-meta time strong,
    .changelog-release-meta time em {
        padding: 7px 8px;
        font-size: 0.7rem;
    }

    .changelog-release-meta time strong {
        font-size: 1rem;
    }

    .changelog-items li {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
    }

    .changelog-kind {
        min-width: 64px;
    }

    .changelog-support {
        align-items: stretch;
        flex-direction: column;
    }

    .changelog-support .button {
        width: 100%;
    }
}

.site-footer {
    padding: 48px 0;
    color: #d6ebe8;
    background: var(--footer-bg);
}

.footer-inner {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
}

.footer-brand {
    color: var(--white);
}

.site-footer p {
    max-width: 560px;
    margin: 12px 0 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 8px 18px;
}

.footer-links a {
    color: #d6ebe8;
    font-weight: 800;
}

.footer-links a:hover {
    color: var(--white);
}

.vt-chat-window {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    width: min(460px, calc(100vw - 44px));
    height: min(690px, calc(100svh - 44px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 26px 70px rgba(23, 52, 58, 0.24);
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: translateY(18px);
    opacity: 0;
    transition: transform 180ms ease, opacity 180ms ease;
}

.vt-chat-window[hidden] {
    display: none;
}

.vt-chat-window.is-open {
    transform: translateY(0);
    opacity: 1;
}

.vt-chat-window.is-maximized {
    inset: 18px;
    width: auto;
    height: auto;
}

.vt-chat-window.is-maximized .vt-messages {
    padding: 22px;
}

.vt-chat-window.is-maximized .vt-bubble {
    max-width: min(82%, 880px);
}

.vt-chat-window.is-minimized {
    height: auto;
    max-height: none;
}

.vt-chat-window.is-minimized .vt-chat-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 9px;
}

.vt-chat-window.is-minimized .vt-chat-avatar {
    width: 38px;
    height: 38px;
}

.vt-chat-window.is-minimized .vt-chat-sub,
.vt-chat-window.is-minimized .vt-messages,
.vt-chat-window.is-minimized .vt-composer {
    display: none;
}

.vt-chat-window.is-minimized .vt-chat-tools {
    display: flex;
    grid-column: auto;
    gap: 4px;
}

.vt-chat-window.is-minimized .vt-chat-tools .vt-tool {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}

.vt-chat-window.is-minimized [data-chat-settings],
.vt-chat-window.is-minimized [data-chat-clear],
.vt-chat-window.is-minimized [data-chat-maximize],
.vt-chat-window.is-minimized.is-calling [data-chat-call] {
    display: none;
}

.vt-chat-window.is-minimized .vt-callbar {
    grid-template-columns: 10px minmax(78px, 1fr) 48px auto auto;
    gap: 7px;
    padding: 7px 9px 8px;
    border-bottom: 0;
}

.vt-chat-window.is-minimized .vt-call-status,
.vt-chat-window.is-minimized .vt-call-timer,
.vt-chat-window.is-minimized .vt-mic-meter,
.vt-chat-window.is-minimized .vt-call-mute,
.vt-chat-window.is-minimized .vt-call-end {
    grid-column: auto;
    grid-row: 1;
}

.vt-chat-window.is-minimized .vt-call-status {
    min-width: 8px;
}

.vt-chat-window.is-minimized .vt-call-status [data-call-status] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vt-chat-window.is-minimized .vt-call-timer {
    justify-self: start;
    font-size: 0.78rem;
}

.vt-chat-window.is-minimized .vt-call-mute,
.vt-chat-window.is-minimized .vt-call-end {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.76rem;
}

.vt-chat-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    color: var(--white);
    background: linear-gradient(135deg, var(--ink), var(--teal-deep));
}

.vt-chat-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vt-chat-avatar {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: var(--mist);
}

.vt-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.vt-avatar-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ink);
    background: var(--amber);
    font-weight: 900;
}

.vt-chat-name,
.vt-chat-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-chat-name {
    color: var(--white);
    font-weight: 900;
    line-height: 1.1;
}

.vt-chat-sub {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 800;
}

.vt-tool,
.vt-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.vt-tool:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vt-tool[data-chat-call] {
    background: #1fae72;
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 18px rgba(31, 174, 114, 0.24);
}

.vt-tool[data-chat-call]:hover {
    background: #168c5d;
}

.vt-chat-head .vt-tool img {
    filter: brightness(0) invert(1);
}

[data-chat-minimize] img {
    transition: transform 160ms ease;
}

.vt-chat-window.is-minimized [data-chat-minimize] img {
    transform: rotate(180deg);
}

.vt-callbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.vt-callbar[hidden] {
    display: none;
}

.vt-callbar.is-live {
    background: var(--teal-soft);
}

.vt-call-status {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 900;
}

.vt-call-status span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-call-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
}

.vt-callbar.is-live .vt-call-dot {
    background: var(--teal);
    box-shadow: 0 0 0 3px rgba(42, 167, 162, 0.16);
}

.vt-call-timer {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.vt-mic-meter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 48px;
    height: 26px;
    padding: 4px 6px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 7px;
    background: var(--surface);
}

.vt-mic-meter[hidden] {
    display: none;
}

.vt-mic-meter span {
    width: 4px;
    min-height: 5px;
    border-radius: 999px;
    background: #9bcfc6;
    transform-origin: center bottom;
    transition: height 80ms linear, opacity 80ms linear, background 120ms ease;
}

.vt-mic-meter.is-speaking span {
    background: linear-gradient(180deg, var(--mint), var(--teal-deep));
}

.vt-mic-meter.is-pal-speaking span {
    background: linear-gradient(180deg, var(--amber), var(--teal-deep));
    animation: vt-voice-pulse 460ms ease-in-out infinite alternate;
}

.vt-mic-meter.is-pal-speaking span:nth-child(2) {
    animation-delay: -180ms;
}

.vt-mic-meter.is-pal-speaking span:nth-child(3) {
    animation-delay: -310ms;
}

.vt-mic-meter.is-pal-speaking span:nth-child(4) {
    animation-delay: -90ms;
}

@keyframes vt-voice-pulse {
    from {
        transform: scaleY(0.44);
    }
    to {
        transform: scaleY(1.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-mic-meter.is-pal-speaking span {
        animation: none;
        transform: scaleY(0.8);
    }
}

.vt-call-mute,
.vt-call-end {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
}

.vt-call-mute:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.vt-call-end {
    color: var(--white);
    background: var(--coral);
    border-color: var(--coral);
}

.vt-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 18px 14px;
    background:
        linear-gradient(180deg, rgba(237, 248, 242, 0.8), rgba(255, 255, 255, 0.96)),
        var(--white);
}

.vt-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 12px;
}

.vt-message-user {
    align-items: flex-end;
}

.vt-message-activity {
    align-items: center;
    margin: 5px 0 12px;
}

.vt-activity-bubble {
    display: flex;
    max-width: min(92%, 560px);
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px dashed color-mix(in srgb, var(--teal) 38%, var(--line));
    border-radius: 7px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--teal-soft) 54%, var(--surface));
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: left;
}

.vt-activity-indicator {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 28%, transparent);
}

.vt-message-activity[data-activity-state="pending"] .vt-activity-indicator {
    animation: vt-activity-pulse 780ms ease-in-out infinite alternate;
}

.vt-message-activity[data-activity-state="failed"] .vt-activity-bubble {
    border-color: color-mix(in srgb, var(--coral) 52%, var(--line));
    background: color-mix(in srgb, var(--coral) 12%, var(--surface));
}

.vt-message-activity[data-activity-state="failed"] .vt-activity-indicator {
    background: var(--coral);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral) 24%, transparent);
}

.vt-message-activity .vt-message-time {
    text-align: center;
}

@keyframes vt-activity-pulse {
    from {
        opacity: 0.48;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-message-activity[data-activity-state="pending"] .vt-activity-indicator {
        animation: none;
    }
}

.vt-message-time {
    padding: 0 4px;
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    letter-spacing: 0;
    cursor: help;
}

.vt-message[data-pending="true"] .vt-message-time {
    opacity: 0.72;
}

.vt-bubble {
    max-width: min(84%, 560px);
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(23, 52, 58, 0.07);
}

.vt-message-user .vt-bubble {
    color: var(--white);
    background: var(--action);
    border-color: var(--action);
}

.vt-bubble p {
    margin: 0;
}

.vt-bubble p + p {
    margin-top: 10px;
}

.vt-rich-markdown {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.93rem;
    line-height: 1.55;
}

.vt-rich-markdown > :first-child {
    margin-top: 0;
}

.vt-rich-markdown > :last-child {
    margin-bottom: 0;
}

.vt-rich-markdown p {
    margin: 0 0 10px;
}

.vt-rich-markdown h1,
.vt-rich-markdown h2,
.vt-rich-markdown h3,
.vt-rich-markdown h4,
.vt-rich-markdown h5,
.vt-rich-markdown h6 {
    margin: 14px 0 7px;
    color: inherit;
    line-height: 1.25;
    letter-spacing: 0;
}

.vt-rich-markdown h1 {
    font-size: 1.14rem;
}

.vt-rich-markdown h2 {
    font-size: 1.06rem;
}

.vt-rich-markdown h3,
.vt-rich-markdown h4,
.vt-rich-markdown h5,
.vt-rich-markdown h6 {
    font-size: 0.98rem;
}

.vt-rich-markdown ul,
.vt-rich-markdown ol {
    margin: 9px 0 11px;
    padding-left: 22px;
}

.vt-rich-markdown li {
    padding-left: 2px;
}

.vt-rich-markdown li + li {
    margin-top: 5px;
}

.vt-rich-markdown li > ul,
.vt-rich-markdown li > ol {
    margin: 5px 0 2px;
}

.vt-rich-markdown .contains-task-list,
.vt-rich-markdown .task-list-item,
.vt-rich-markdown ul:has(> li > input[type="checkbox"]) {
    list-style: none;
}

.vt-rich-markdown .contains-task-list,
.vt-rich-markdown ul:has(> li > input[type="checkbox"]) {
    padding-left: 4px;
}

.vt-rich-markdown .task-list-item,
.vt-rich-markdown li:has(> input[type="checkbox"]) {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
}

.vt-rich-markdown input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 4px 0 0;
    accent-color: var(--action);
}

.vt-rich-markdown blockquote {
    margin: 11px 0;
    padding: 9px 11px;
    border-left: 3px solid var(--teal);
    border-radius: 0 6px 6px 0;
    color: var(--ink-soft);
    background: var(--surface-muted);
}

.vt-rich-markdown blockquote > :last-child {
    margin-bottom: 0;
}

.vt-rich-markdown hr {
    height: 1px;
    margin: 14px 0;
    border: 0;
    background: var(--line);
}

.vt-rich-markdown a {
    color: var(--action);
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.vt-rich-markdown a:hover {
    color: var(--action-hover);
    text-decoration-thickness: 2px;
}

.vt-rich-markdown del {
    color: var(--ink-soft);
}

.vt-rich-markdown mark {
    padding: 1px 3px;
    border-radius: 3px;
    color: var(--ink);
    background: var(--amber-soft);
}

.vt-rich-markdown kbd {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface-muted);
    font: 0.82em "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.vt-bubble:has(.vt-table-scroll) {
    width: min(94%, 760px);
    max-width: min(94%, 760px);
}

.vt-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 11px 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    scrollbar-gutter: stable;
}

.vt-table-scroll:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 28%, transparent);
    outline-offset: 2px;
}

.vt-table-scroll table {
    width: 100%;
    min-width: 380px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.4;
}

.vt-table-scroll th,
.vt-table-scroll td {
    min-width: 92px;
    padding: 8px 10px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.vt-table-scroll th {
    color: var(--ink);
    background: var(--surface-muted);
    font-size: 0.76rem;
    font-weight: 950;
}

.vt-table-scroll [align="center"] {
    text-align: center;
}

.vt-table-scroll [align="right"] {
    text-align: right;
}

.vt-table-scroll th:last-child,
.vt-table-scroll td:last-child {
    border-right: 0;
}

.vt-table-scroll tbody tr:last-child td {
    border-bottom: 0;
}

.vt-table-scroll tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-muted) 56%, transparent);
}

.vt-message-user .vt-rich-markdown a {
    color: var(--white);
}

.vt-message-user .vt-rich-markdown blockquote {
    color: rgba(255, 255, 255, 0.86);
    border-left-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.1);
}

.vt-message-user .vt-rich-markdown hr {
    background: rgba(255, 255, 255, 0.3);
}

.vt-message-user .vt-table-scroll {
    border-color: rgba(255, 255, 255, 0.3);
    background: transparent;
}

.vt-message-user .vt-table-scroll table {
    color: var(--white);
}

.vt-message-user .vt-table-scroll th,
.vt-message-user .vt-table-scroll td {
    color: inherit;
    border-color: rgba(255, 255, 255, 0.24);
}

.vt-message-user .vt-table-scroll th {
    background: rgba(255, 255, 255, 0.14);
}

.vt-message-user .vt-table-scroll tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.08);
}

.vt-bubble code {
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(42, 167, 162, 0.12);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
}

.vt-message-user .vt-bubble code {
    background: rgba(255, 255, 255, 0.14);
}

.vt-code-wrap {
    max-width: 100%;
    overflow: hidden;
    margin: 10px 0 0;
    border: 1px solid rgba(23, 52, 58, 0.18);
    border-radius: 8px;
    background: #102a32;
}

.vt-code-wrap:first-child {
    margin-top: 0;
}

.vt-code-wrap figcaption {
    margin: 0;
    padding: 7px 11px;
    color: #cfe3dc;
    background: #17343a;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vt-code-block {
    overflow-x: auto;
    margin: 0;
    padding: 12px;
    color: var(--code-ink);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.86rem;
    line-height: 1.5;
    tab-size: 2;
}

.vt-code-block code,
.vt-message-user .vt-code-block code {
    display: block;
    min-width: max-content;
    padding: 0;
    color: inherit;
    background: transparent;
    white-space: pre;
}

.vt-code-comment {
    color: #91aaa6;
}

.vt-code-keyword,
.vt-code-tag {
    color: #ffd166;
}

.vt-code-string {
    color: #8fe3a4;
}

.vt-code-number {
    color: #f4a261;
}

.vt-code-function {
    color: #92c8ff;
}

.vt-code-property,
.vt-code-variable {
    color: #f2c46d;
}

.vt-chat-error {
    color: var(--coral);
    font-weight: 800;
}

.vt-call-error-card {
    min-width: min(100%, 280px);
}

.vt-call-error-title {
    color: var(--coral);
    font-size: 1rem;
    font-weight: 950;
}

.vt-call-error-message {
    margin-top: 5px !important;
    color: var(--ink);
    font-weight: 750;
}

.vt-call-error-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin-top: 11px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.35;
}

.vt-call-error-facts span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.vt-call-error-facts strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-call-error-facts code {
    padding: 0;
    color: var(--action);
    background: transparent;
    font-weight: 900;
}

.vt-call-error-details {
    margin-top: 9px;
}

.vt-call-error-details summary {
    padding: 4px 0;
    color: var(--action);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.vt-call-error-details summary:hover {
    color: var(--action-hover);
}

.vt-call-error-details dl {
    margin: 5px 0 0;
    border-top: 1px solid var(--line);
}

.vt-call-error-details dl > div {
    display: grid;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 0.58fr);
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.vt-call-error-details dt,
.vt-call-error-details dd {
    min-width: 0;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.vt-call-error-details dt {
    color: var(--ink-soft);
    font-weight: 800;
}

.vt-call-error-details dd {
    color: var(--ink);
    font-weight: 750;
}

.vt-call-error-recovery {
    margin-top: 10px !important;
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.45;
}

.vt-call-error-billing {
    margin-top: 7px !important;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.4;
}

.vt-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.vt-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
    animation: vt-bounce 900ms infinite ease-in-out;
}

.vt-dots i:nth-child(2) {
    animation-delay: 140ms;
}

.vt-dots i:nth-child(3) {
    animation-delay: 280ms;
}

@keyframes vt-bounce {
    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.vt-composer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 9px;
    align-items: end;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.vt-composer textarea {
    width: 100%;
    min-height: 44px;
    max-height: 96px;
    resize: none;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    line-height: 1.35;
}

.vt-composer textarea:focus,
.vt-key-field input:focus,
.vt-setting-field select:focus,
.search-form input:focus {
    outline: 3px solid rgba(42, 167, 162, 0.24);
    border-color: var(--teal);
}

.vt-send {
    width: 44px;
    height: 44px;
    color: var(--white);
    background: var(--teal-deep);
    border-color: var(--teal-deep);
}

.vt-send:hover {
    background: var(--action);
}

.vt-send img {
    filter: none;
}

.vt-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(14, 35, 39, 0.58);
    backdrop-filter: blur(5px);
}

.vt-modal {
    width: min(460px, 100%);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 28px 80px rgba(23, 52, 58, 0.28);
}

.vt-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.vt-modal-head h2 {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1.1;
}

.vt-modal-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
}

.vt-modal-copy,
.vt-modal-fine {
    margin: 0;
    color: var(--ink-soft);
}

.vt-modal-fine {
    margin-top: 14px;
    font-size: 0.88rem;
}

.vt-modal-fine a {
    color: var(--teal-deep);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vt-key-field {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    font-weight: 900;
}

.vt-key-status {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--mist);
    font-size: 0.9rem;
}

.vt-key-status.is-saved {
    color: var(--teal-ink);
    background: var(--teal-soft);
    border-color: rgba(42, 167, 162, 0.35);
}

.vt-key-field input {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
}

.vt-settings-modal {
    width: min(680px, 100%);
    max-height: calc(100svh - 44px);
    overflow: auto;
}

.vt-settings-form {
    display: grid;
    gap: 14px;
}

.vt-settings-form .vt-modal-head,
.vt-settings-form .vt-modal-copy,
.vt-settings-form .vt-modal-fine {
    margin: 0;
}

.vt-settings-form .vt-modal-head {
    margin-bottom: -2px;
}

.vt-settings-group {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(23, 52, 58, 0.12);
    border-radius: 8px;
    background: var(--surface-soft);
}

.vt-settings-group h3,
.vt-settings-group p {
    margin: 0;
}

.vt-settings-group h3 {
    font-size: 1rem;
    line-height: 1.15;
}

.vt-settings-group p {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.vt-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vt-setting-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 900;
}

.vt-setting-field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    font: inherit;
}

.vt-settings-api {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 8px;
    background: var(--surface-muted);
}

.vt-settings-api strong,
.vt-settings-api span {
    display: block;
}

.vt-settings-api span {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.vt-settings-api .button {
    min-height: 38px;
    padding: 8px 11px;
    white-space: nowrap;
}

.vt-settings-api .button img {
    width: 16px;
    height: 16px;
}

.vt-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.vt-settings-actions {
    margin-top: 2px;
}

/* Tutor-specific chat and voice preferences */
.vt-modal.vt-settings-modal {
    width: min(720px, 100%);
    max-height: calc(100svh - 44px);
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
    background: var(--surface);
    box-shadow: 0 30px 90px rgba(14, 35, 39, 0.34);
}

.vt-settings-modal .vt-settings-form {
    display: grid;
    gap: 0;
    max-height: calc(100svh - 46px);
    overflow: auto;
    scrollbar-color: color-mix(in srgb, var(--teal) 46%, var(--line)) transparent;
}

.vt-settings-hero {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 20px 22px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--teal-soft) 82%, var(--surface)), color-mix(in srgb, var(--amber-soft) 42%, var(--surface)) 72%),
        var(--surface);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 7%, transparent);
}

.vt-settings-hero .vt-modal-head,
.vt-settings-hero .vt-modal-copy,
.vt-settings-footer .vt-modal-fine {
    margin: 0;
}

.vt-settings-hero .vt-modal-head {
    align-items: flex-start;
    margin-bottom: 8px;
}

.vt-settings-hero .vt-modal-head h2 {
    margin-top: 2px;
}

.vt-settings-hero .vt-modal-head h2 a:hover {
    color: var(--teal-deep);
}

.vt-settings-kicker {
    display: block;
    color: var(--teal-ink);
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vt-settings-hero .vt-modal-copy {
    max-width: 580px;
    font-size: 0.9rem;
    font-weight: 750;
}

.vt-settings-sections {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.vt-settings-modal .vt-settings-group {
    --settings-accent: var(--teal);
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--settings-accent) 30%, var(--line));
    border-left: 5px solid var(--settings-accent);
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--settings-accent) 5%, var(--surface)), var(--surface-soft));
}

.vt-settings-modal .vt-settings-group.is-voice {
    --settings-accent: var(--amber);
}

.vt-settings-group-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.vt-settings-group-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--settings-accent) 36%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--settings-accent) 14%, var(--surface));
}

.vt-settings-group-icon img {
    width: 18px;
    height: 18px;
}

.vt-settings-modal .vt-settings-group h3 {
    color: color-mix(in srgb, var(--settings-accent) 64%, var(--ink));
    font-size: 1.02rem;
}

.vt-settings-modal .vt-settings-group p {
    margin-top: 3px;
    font-size: 0.82rem;
    font-weight: 750;
}

.vt-settings-modal .vt-setting-field {
    position: relative;
}

.vt-settings-modal .vt-setting-field > span {
    color: color-mix(in srgb, var(--settings-accent) 46%, var(--ink));
    font-size: 0.76rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
}

.vt-settings-modal .vt-setting-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 42px 10px 12px;
    border: 1px solid color-mix(in srgb, var(--settings-accent) 34%, var(--line));
    border-radius: 7px;
    color: var(--ink);
    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--settings-accent) 74%, var(--ink)) 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--settings-accent) 74%, var(--ink)) 50%, transparent 50%),
        linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--settings-accent) 5%, var(--surface-soft)));
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 14px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--ink) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, white);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.vt-settings-modal .vt-setting-field select:hover {
    border-color: color-mix(in srgb, var(--settings-accent) 66%, var(--line));
    box-shadow: 0 9px 19px color-mix(in srgb, var(--settings-accent) 10%, transparent);
}

.vt-settings-modal .vt-setting-field select:focus {
    outline: 3px solid color-mix(in srgb, var(--settings-accent) 24%, transparent);
    border-color: var(--settings-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--settings-accent) 10%, transparent), 0 10px 22px color-mix(in srgb, var(--settings-accent) 12%, transparent);
}

.vt-settings-modal .vt-setting-field option {
    color: var(--ink);
    background: var(--surface);
    font-weight: 700;
}

.vt-settings-modal :is(input[type="text"], input[type="number"], textarea) {
    width: 100%;
    min-height: 46px;
    border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
    color: var(--ink);
    background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--teal) 4%, var(--surface-soft)));
}

.vt-settings-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 0.74fr);
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    background: color-mix(in srgb, var(--surface) 94%, var(--teal-soft));
    box-shadow: 0 -10px 24px color-mix(in srgb, var(--ink) 6%, transparent);
}

.vt-settings-footer .vt-modal-fine {
    font-size: 0.8rem;
    line-height: 1.45;
}

.vt-settings-footer .vt-settings-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0;
}

.vt-settings-footer .vt-settings-actions .button {
    min-height: 42px;
}

.vt-call-choices {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.vt-call-duration-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.58fr);
    gap: 14px;
    align-items: center;
    margin-top: 15px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.vt-call-duration-copy,
.vt-call-duration-copy strong,
.vt-call-duration-copy small {
    display: block;
}

.vt-call-duration-copy strong {
    color: var(--ink);
    line-height: 1.2;
}

.vt-call-duration-copy small {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.4;
}

.vt-call-duration-field select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border-color: color-mix(in srgb, var(--teal) 36%, var(--line));
    background-color: var(--surface);
    font-weight: 900;
    cursor: pointer;
}

.vt-call-duration-field select:hover {
    border-color: var(--teal);
}

.vt-call-choices button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 11px;
    align-items: center;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
    text-align: left;
    cursor: pointer;
}

.vt-call-choices button:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.vt-call-choices img {
    grid-row: span 2;
    width: 32px;
    height: 32px;
}

.vt-call-choices strong {
    line-height: 1.15;
}

.vt-call-choices span {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.vt-room-choice {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    border-radius: 8px;
    color: var(--ink);
    background: color-mix(in srgb, var(--teal-soft) 48%, var(--surface));
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.vt-room-choice:hover {
    transform: translateY(-1px);
    border-color: var(--teal);
    background: var(--teal-soft);
}

.vt-room-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.vt-room-check {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--teal) 58%, var(--line));
    border-radius: 5px;
    background: var(--surface);
}

.vt-room-choice input:checked + .vt-room-check {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
}

.vt-room-choice input:checked + .vt-room-check::after {
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: rotate(-45deg);
}

.vt-room-choice input:focus-visible + .vt-room-check {
    outline: 3px solid color-mix(in srgb, var(--teal) 25%, transparent);
    outline-offset: 2px;
}

.vt-room-choice > span:last-child {
    min-width: 0;
}

.vt-room-choice strong,
.vt-room-choice small {
    display: block;
}

.vt-room-choice strong {
    line-height: 1.2;
}

.vt-room-choice small {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.4;
}

.vt-session-call-context {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(42, 167, 162, 0.34);
    border-radius: 7px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-weight: 900;
}

.vt-modal button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.vt-learning-modal {
    width: min(820px, 100%);
    max-height: calc(100svh - 44px);
    overflow: auto;
}

.vt-learning-titlebar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
}

.vt-learning-titlebar span {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-learning-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--ink);
    background: var(--amber);
    font-weight: 900;
}

.vt-learning-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.vt-learning-question {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.vt-learning-question strong {
    display: block;
    line-height: 1.15;
}

.vt-learning-question p {
    margin: 5px 0 0;
    color: var(--ink-soft);
}

.vt-path-picker-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.vt-path-picker-head h3,
.vt-path-picker-head p,
.vt-path-picker-card h4,
.vt-path-picker-card p {
    margin: 0;
    letter-spacing: 0;
}

.vt-path-picker-head h3 {
    font-size: 1.45rem;
}

.vt-path-picker-head p,
.vt-path-picker-card p {
    margin-top: 5px;
    color: var(--ink-soft);
}

.vt-path-picker-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vt-path-picker-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.vt-path-picker-card > div:first-child > span,
.vt-path-picker-meta {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.vt-path-picker-card h4 {
    margin-top: 4px;
    font-size: 1.08rem;
}

.vt-path-picker-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px 10px;
}

.vt-path-picker-card .button {
    width: 100%;
}

.vt-learning-form {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.vt-learning-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 900;
}

.vt-learning-form input,
.vt-learning-form textarea,
.vt-learning-form select {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
}

.vt-learning-form textarea {
    resize: vertical;
    line-height: 1.4;
}

.vt-learning-form input:focus,
.vt-learning-form textarea:focus,
.vt-learning-form select:focus {
    outline: 3px solid rgba(42, 167, 162, 0.24);
    border-color: var(--teal);
}

.vt-learning-form select {
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--teal-deep) 50%),
        linear-gradient(135deg, var(--teal-deep) 50%, transparent 50%),
        linear-gradient(180deg, var(--surface), var(--surface-soft));
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, 100% 100%;
}

.vt-learning-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(177, 57, 57, 0.32);
    border-radius: 7px;
    color: var(--danger-ink);
    background: var(--danger-soft);
    font-weight: 900;
}

.vt-learning-key-note {
    margin: -7px 0 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 900;
}

.vt-learning-form-note {
    margin: -6px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(42, 167, 162, 0.18);
    border-left: 4px solid var(--teal);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--surface-muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.vt-learning-key-note.is-saved {
    color: var(--teal-ink);
}

.vt-learning-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vt-learning-model-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.vt-learning-model-choice legend {
    grid-column: 1 / -1;
    margin-bottom: 1px;
    color: var(--ink);
    font-weight: 900;
}

.vt-learning-model-choice label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    cursor: pointer;
}

.vt-learning-model-choice label:has(input:checked) {
    border-color: var(--teal);
    background: var(--teal-soft);
    box-shadow: inset 0 0 0 1px rgba(42, 167, 162, 0.18);
}

.vt-learning-model-choice label.is-locked {
    opacity: 0.62;
    background: var(--surface-muted);
    cursor: not-allowed;
}

.vt-learning-model-choice label.is-locked:has(input:checked) {
    border-color: var(--line);
    background: var(--surface-muted);
    box-shadow: none;
}

.vt-learning-model-choice input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--teal-deep);
}

.vt-learning-model-choice span,
.vt-learning-model-choice strong,
.vt-learning-model-choice em {
    display: block;
    min-width: 0;
}

.vt-learning-model-choice strong {
    color: var(--ink);
    line-height: 1.2;
}

.vt-learning-model-choice em {
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.vt-learning-pal-fit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vt-learning-pal-fit span {
    padding: 7px 10px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--amber-soft);
    font-size: 0.84rem;
    font-weight: 900;
}

.vt-learning-generating {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.95), rgba(255, 248, 232, 0.82)),
        var(--white);
}

.vt-learning-generation-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.vt-learning-generation-head h3 {
    margin: 0;
    font-size: 1.34rem;
    line-height: 1.18;
}

.vt-learning-generation-head p {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-weight: 900;
}

.vt-generation-progress {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vt-generation-progress div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font-weight: 900;
}

.vt-generation-progress div:first-child strong {
    color: var(--ink);
}

.vt-generation-progress-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mist);
}

.vt-generation-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--amber), #6377d9);
    transition: width 320ms ease;
}

.vt-learning-generating.is-error .vt-generation-progress-bar span {
    background: #c65353;
}

.vt-generation-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vt-generation-steps li {
    position: relative;
    padding: 9px 10px 9px 34px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--surface);
    font-weight: 900;
}

.vt-generation-steps li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfe3dc;
    transform: translateY(-50%);
}

.vt-generation-steps li.is-active {
    border-color: rgba(42, 167, 162, 0.38);
    color: var(--teal-ink);
    background: var(--teal-soft);
}

.vt-generation-steps li.is-active::before {
    background: var(--teal);
    box-shadow: 0 0 0 5px rgba(42, 167, 162, 0.15);
}

.vt-generation-steps li.is-done {
    border-color: rgba(42, 167, 162, 0.2);
    color: var(--teal-ink);
    background: var(--paper);
}

.vt-generation-steps li.is-done::before {
    background: var(--teal-deep);
}

.vt-learning-summary {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.96), rgba(255, 243, 212, 0.62)),
        var(--white);
}

.vt-learning-summary > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.vt-learning-kicker {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--teal-deep);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-learning-summary h3 {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1.16;
}

.vt-learning-summary p {
    margin: 8px 0 0;
    color: var(--ink-soft);
}

.vt-learning-title-field {
    display: grid;
    gap: 5px;
}

.vt-learning-title-field span {
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-learning-title-field input {
    width: min(100%, 560px);
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-size: 1.18rem;
    font-weight: 900;
}

.vt-learning-title-field input:focus {
    outline: 3px solid rgba(42, 167, 162, 0.2);
    border-color: var(--teal);
}

.vt-learning-goal {
    font-size: 0.92rem;
}

.vt-learning-model-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 9px;
    padding: 5px 8px;
    border: 1px solid rgba(99, 119, 217, 0.2);
    border-radius: 7px;
    color: var(--violet-ink);
    background: var(--violet-soft);
    font-size: 0.76rem;
    font-weight: 900;
}

.vt-learning-progress {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vt-learning-progress div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font-weight: 900;
}

.vt-learning-progress div:first-child strong {
    color: var(--ink);
}

.vt-learning-progress-bar {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mist);
}

.vt-learning-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--amber));
    transition: width 180ms ease;
}

.vt-learning-sessions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.vt-learning-session {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.vt-learning-session.is-complete {
    border-color: rgba(42, 167, 162, 0.42);
    background: var(--surface-soft);
}

.vt-learning-session label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px 14px;
    cursor: pointer;
}

.vt-learning-session input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--teal-deep);
}

.vt-learning-session label span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vt-learning-session strong {
    color: var(--ink);
    line-height: 1.2;
}

.vt-learning-session em {
    flex: 0 0 auto;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-learning-session-body {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px 48px;
}

.vt-learning-session-body p {
    margin: 0;
    color: var(--ink-soft);
}

.vt-learning-session-body strong {
    color: var(--ink);
}

.vt-session-call {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 4px;
    padding: 8px 11px;
    border: 1px solid rgba(42, 167, 162, 0.34);
    border-radius: 7px;
    color: var(--ink);
    background: var(--teal-soft);
    font-weight: 900;
    cursor: pointer;
}

.vt-session-call:hover {
    background: var(--teal-soft-strong);
}

.vt-certificate {
    margin-top: 18px;
    padding: 26px;
    border: 2px solid var(--teal);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 248, 232, 0.92), rgba(232, 248, 244, 0.95)),
        var(--white);
    text-align: center;
}

.vt-certificate > span {
    color: var(--teal-deep);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-certificate h3 {
    margin: 10px 0;
    font-size: 2rem;
    line-height: 1.1;
}

.vt-certificate p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--ink-soft);
}

.vt-certificate-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.vt-certificate-meta span {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    font-weight: 900;
}

.vt-learning-foot-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.vt-learning-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.vt-session-review {
    padding: 10px 12px;
    border: 1px solid rgba(42, 167, 162, 0.26);
    border-radius: 7px;
    background: var(--surface-muted);
}

.vt-session-review summary {
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.vt-session-review ol {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--ink-soft);
}

.vt-learning-save-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--teal-deep);
    font-size: 0.8rem;
    font-weight: 900;
}

.vt-learning-save-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    content: "";
}

.vt-learning-save-state.is-saving::before {
    background: var(--amber);
}

.vt-learning-save-state.is-error {
    color: var(--danger-ink);
}

.vt-learning-save-state.is-error::before {
    background: var(--coral);
}

.vt-learning-session > details > summary {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.vt-learning-session > details > summary::-webkit-details-marker {
    display: none;
}

.vt-learning-session > details > summary > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.vt-session-number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--teal-deep);
    background: var(--mist);
    font-size: 0.8rem;
    font-weight: 900;
}

.vt-session-status {
    padding: 5px 8px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 999px;
    color: var(--teal-deep);
    background: var(--page-muted);
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.vt-learning-session-body {
    gap: 12px;
    padding: 0 14px 16px 54px;
}

.vt-session-topic {
    font-weight: 800;
}

.vt-session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.vt-session-actions .vt-session-call {
    margin: 0;
    color: var(--white);
    background: var(--teal-deep);
}

.vt-learning-session .vt-session-complete {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    align-items: center;
    min-height: 39px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
}

.vt-learning-session .vt-session-complete input,
.vt-learning-session .vt-session-review-later input {
    flex: 0 0 auto;
    margin: 0;
}

.vt-learning-session .vt-session-complete span,
.vt-learning-session .vt-session-review-later span {
    display: block;
    font-weight: 900;
}

.vt-session-plan-details {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-soft);
}

.vt-session-plan-details > summary {
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.vt-session-plan-details p {
    margin-top: 8px;
}

.vt-session-reflection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.34fr);
    gap: 10px;
    padding-top: 4px;
}

.vt-learning-session .vt-session-reflection > label {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0;
    cursor: default;
}

.vt-session-reflection > label > span {
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
}

.vt-session-reflection textarea,
.vt-session-reflection select {
    width: 100%;
}

.vt-learning-session .vt-session-review-later {
    display: flex;
    grid-column: 1 / -1;
    grid-template-columns: none;
    gap: 7px;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.vt-learning-path-note {
    display: grid;
    gap: 7px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-weight: 900;
}

.vt-learning-path-note textarea {
    width: 100%;
    resize: vertical;
    font-weight: 500;
}

.vt-reflection-modal {
    width: min(560px, 100%);
}

.vt-reflection-body {
    display: grid;
    gap: 14px;
}

.vt-reflection-body > label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 900;
}

.vt-reflection-body textarea,
.vt-reflection-body select {
    width: 100%;
}

.vt-reflection-body .vt-session-review-later {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vt-reflection-body .vt-session-review-later input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--teal-deep);
}

.vt-reflection-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid rgba(42, 167, 162, 0.24);
    border-radius: 7px;
    background: var(--page-muted);
}

.vt-reflection-summary strong {
    font-size: 1.2rem;
}

.vt-reflection-summary span {
    color: var(--ink-soft);
}

.learning-path-page-shell {
    min-height: calc(100vh - 72px);
    padding: 38px 0 74px;
    background: var(--surface-soft);
}

.learning-path-page-inner {
    max-width: 1080px;
}

.learning-path-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
}

.learning-path-page-head h1,
.learning-path-page-head p {
    margin: 0;
    letter-spacing: 0;
}

.learning-path-page-head h1 {
    max-width: 760px;
    font-size: 2.55rem;
    line-height: 1.06;
}

.learning-path-page-head > div:first-child > p:last-child {
    max-width: 760px;
    margin-top: 9px;
    color: var(--ink-soft);
}

.learning-path-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.learning-path-page-tutor {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.learning-path-page-avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--teal-soft);
    font-weight: 900;
}

.learning-path-page-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.learning-path-page-tutor span,
.learning-path-page-tutor strong,
.learning-path-page-tutor p {
    display: block;
    margin: 0;
}

.learning-path-page-tutor span {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.learning-path-page-tutor strong {
    margin-top: 2px;
    font-size: 1.04rem;
}

.learning-path-page-tutor p {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.86rem;
}

.learning-path-page-content {
    margin-top: 22px;
}

.learning-path-page-content .vt-learning-title-field input {
    width: 100%;
}

.learning-path-page-noscript {
    padding: 12px;
    border: 1px solid #e6c768;
    border-radius: 8px;
    color: var(--amber-ink);
    background: var(--amber-soft);
    font-weight: 800;
}

.workspace-shell {
    padding: 38px 0 76px;
    background: var(--paper);
}

.workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.workspace-hero h1,
.workspace-panel-head h2 {
    margin: 0;
    line-height: 1.06;
    letter-spacing: 0;
}

.workspace-hero h1 {
    max-width: 760px;
    font-size: 2.35rem;
}

.workspace-hero p {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 1rem;
}

.workspace-sync-status {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 12px;
    color: var(--teal-deep);
    font-size: 0.84rem;
}

.workspace-sync-status > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(86, 214, 164, 0.14);
}

.workspace-sync-status.is-saving > span {
    background: var(--amber);
    animation: workspace-sync-pulse 1s ease-in-out infinite;
}

.workspace-sync-status.is-error {
    color: var(--danger-ink);
}

.workspace-sync-status.is-error > span {
    background: var(--coral);
    box-shadow: 0 0 0 4px rgba(242, 109, 91, 0.14);
}

@keyframes workspace-sync-pulse {
    50% { opacity: 0.45; }
}

.workspace-export-button {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
}

.workspace-actions,
.workspace-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.workspace-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.workspace-metrics article,
.workspace-sidebar,
.workspace-panel,
.workspace-path-card,
.workspace-review-card,
.workspace-program-card,
.workspace-memory-card,
.workspace-data-card,
.workspace-empty,
.workspace-day {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.07);
}

.workspace-metrics article {
    min-height: 90px;
    padding: 15px 16px;
}

.workspace-metrics span {
    display: block;
    color: var(--ink);
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

.workspace-metrics p {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-weight: 900;
}

.workspace-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.workspace-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 6px;
    padding: 10px;
}

.workspace-sidebar button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--ink-soft);
    background: transparent;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.workspace-sidebar button:hover,
.workspace-sidebar button.is-active {
    color: var(--ink);
    border-color: rgba(42, 167, 162, 0.28);
    background: var(--teal-soft);
}

.workspace-panel {
    display: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.workspace-panel.is-active {
    display: block;
}

.workspace-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 16px;
}

.workspace-panel-head h2 {
    font-size: 1.55rem;
}

.workspace-panel-head .text-link {
    border: 0;
    padding: 0;
    color: var(--teal-deep);
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.workspace-today-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 14px;
    align-items: start;
}

.workspace-focus-card,
.workspace-week-preview {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(23, 52, 58, 0.06);
}

.workspace-focus-card.is-complete {
    border-color: rgba(42, 167, 162, 0.42);
    background: var(--surface-soft);
}

.workspace-focus-card > h3,
.workspace-week-preview h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.workspace-focus-card > p,
.workspace-week-preview > p {
    margin: 7px 0 0;
    color: var(--ink-soft);
}

.workspace-focus-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.workspace-focus-head h3 {
    margin: 0;
    line-height: 1.18;
}

.workspace-focus-head p {
    margin: 6px 0 0;
    color: var(--ink-soft);
}

.workspace-focus-head > strong {
    padding: 6px 9px;
    border: 1px solid rgba(42, 167, 162, 0.28);
    border-radius: 999px;
    color: var(--teal-deep);
    background: var(--page-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.workspace-upcoming-paths {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.workspace-upcoming-paths > span {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 900;
}

.workspace-upcoming-paths button {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.workspace-upcoming-paths button span {
    overflow: hidden;
    color: var(--ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-week-preview-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.workspace-week-preview-head .text-link {
    border: 0;
    padding: 0;
    color: var(--teal-deep);
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.workspace-week-preview-list {
    display: grid;
    gap: 5px;
    margin-top: 13px;
}

.workspace-week-preview-list button {
    display: grid;
    gap: 1px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface-soft);
    text-align: left;
    cursor: pointer;
}

.workspace-week-preview-list button:hover {
    border-color: rgba(42, 167, 162, 0.42);
}

.workspace-week-preview-list span,
.workspace-week-preview-list em {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-style: normal;
}

.workspace-control-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.42fr) minmax(170px, 0.5fr) auto;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 8px;
    background: var(--surface-soft);
}

.workspace-control-bar label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-weight: 900;
}

.workspace-control-bar span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.workspace-control-bar input,
.workspace-control-bar select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
}

.workspace-control-bar .button {
    align-self: end;
    min-height: 42px;
}

.workspace-result-count {
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-weight: 900;
    font-size: 0.9rem;
}

.workspace-path-list,
.workspace-program-list,
.workspace-memory-list {
    display: grid;
    gap: 14px;
}

.workspace-path-card,
.workspace-program-card,
.workspace-memory-card {
    padding: 16px;
}

.workspace-path-card.is-complete {
    border-color: rgba(42, 167, 162, 0.34);
    background: var(--surface-soft);
}

.workspace-path-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.workspace-path-menu {
    position: relative;
    flex: 0 0 auto;
}

.workspace-path-menu > summary {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    list-style: none;
}

.workspace-path-menu > summary::-webkit-details-marker {
    display: none;
}

.workspace-path-menu > div {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 5;
    width: 180px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.workspace-path-menu button,
.workspace-path-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.workspace-path-menu button:hover,
.workspace-path-menu a:hover {
    background: var(--mist);
}

.workspace-path-menu button.workspace-danger {
    color: var(--danger-ink);
}

.workspace-path-next {
    display: grid;
    gap: 2px;
    margin-top: 12px;
    padding: 11px 12px;
    border-left: 3px solid var(--teal);
    background: var(--surface-soft);
}

.workspace-path-next > span {
    color: var(--teal-deep);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.workspace-path-next p {
    margin: 3px 0 0;
    color: var(--ink-soft);
}

.workspace-path-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.workspace-path-main h3,
.workspace-review-card h3,
.workspace-program-card h3,
.workspace-day h3 {
    margin: 0;
    line-height: 1.14;
    letter-spacing: 0;
}

.workspace-path-main p,
.workspace-review-card p,
.workspace-memory-card p,
.workspace-block p,
.workspace-empty p {
    margin: 6px 0 0;
    color: var(--ink-soft);
}

.workspace-review-card blockquote {
    margin: 12px 0;
    padding: 9px 11px;
    border-left: 3px solid var(--amber);
    color: var(--ink-soft);
    background: var(--amber-soft);
}

.workspace-progress-line {
    height: 10px;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--mist);
}

.workspace-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--teal), var(--amber), var(--violet));
}

.workspace-path-meta,
.workspace-program-tutors,
.workspace-week-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.workspace-week-head {
    align-items: center;
    justify-content: space-between;
}

.workspace-week-head > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.workspace-path-meta span,
.workspace-program-tutors span,
.workspace-week-head span,
.workspace-week-head strong {
    padding: 6px 9px;
    border: 1px solid rgba(23, 52, 58, 0.1);
    border-radius: 999px;
    color: var(--ink-soft);
    background: var(--amber-soft);
    font-size: 0.84rem;
    font-weight: 900;
}

.workspace-next {
    margin: 11px 0 0;
    color: var(--ink-soft);
}

.workspace-card-actions {
    margin-top: 14px;
}

.workspace-card-actions .button {
    min-height: 38px;
    padding: 9px 11px;
}

.workspace-empty {
    padding: 24px;
    text-align: center;
}

.workspace-empty h3 {
    margin: 0;
    font-size: 1.35rem;
}

.workspace-empty .button {
    margin-top: 16px;
}

.workspace-planner-form,
.workspace-program-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.workspace-program-form {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-planner-form label,
.workspace-program-form label,
.workspace-memory-card label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 900;
}

.workspace-planner-form select,
.workspace-program-form input,
.workspace-memory-card textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
}

.workspace-planner-form select {
    padding-right: 38px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--teal-deep) 50%),
        linear-gradient(135deg, var(--teal-deep) 50%, transparent 50%),
        linear-gradient(180deg, var(--surface), var(--surface-soft));
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%,
        0 0;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, 100% 100%;
}

.workspace-memory-card textarea {
    resize: vertical;
    margin-top: 14px;
    line-height: 1.45;
}

.workspace-data-intro {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(42, 167, 162, 0.2);
    border-radius: 8px;
    background: var(--page-muted);
}

.workspace-data-intro p,
.workspace-data-note {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 800;
}

.workspace-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.workspace-data-card {
    padding: 14px;
}

.workspace-data-card span {
    display: block;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.workspace-data-card strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 1.42rem;
    line-height: 1.08;
}

.workspace-data-card p {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-weight: 800;
}

.workspace-data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.workspace-data-note {
    margin-top: 12px;
}

.button.workspace-danger {
    color: var(--danger-ink);
    border-color: rgba(138, 31, 45, 0.24);
    background: var(--danger-soft);
}

.button.workspace-danger:hover {
    background: var(--danger-soft-strong);
}

.workspace-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.workspace-save-status {
    min-height: 22px;
    margin: 0;
    color: var(--teal-deep);
    font-weight: 900;
}

.workspace-account-card,
.account-hero,
.account-panel,
.account-signin-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.08);
}

.workspace-account-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px;
}

.workspace-account-card > img,
.workspace-account-card > span,
.account-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-deep);
    font-weight: 900;
}

.workspace-account-card > img,
.workspace-account-card > span {
    width: 44px;
    height: 44px;
}

.workspace-account-card > img {
    object-fit: cover;
}

.workspace-account-card strong {
    display: block;
    color: var(--ink);
}

.workspace-account-card p {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.account-shell {
    padding: 54px 0 70px;
    background:
        radial-gradient(circle at 18% 8%, rgba(86, 214, 164, 0.16), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(246, 180, 75, 0.14), transparent 28%),
        linear-gradient(135deg, var(--page-muted), var(--page-warm));
}

.account-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px;
}

.account-signout-form {
    margin: 0;
}

.account-signout {
    white-space: nowrap;
}

.account-signout img {
    opacity: 0.7;
}

.account-person {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.account-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-person h1,
.account-signin-card h1 {
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.08;
}

.account-person p:not(.eyebrow),
.account-signin-card p,
.account-note {
    margin: 7px 0 0;
    color: var(--ink-soft);
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.account-main-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.account-content-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.account-content-footer .eyebrow {
    margin: 0;
}

.account-content-footer h2 {
    margin: 2px 0 0;
    font-size: 1.2rem;
    line-height: 1.15;
}

.account-content-footer nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.account-content-footer .button {
    min-height: 38px;
    padding: 8px 11px;
}

.account-panel,
.account-signin-card {
    padding: 18px;
}

.account-profile-form {
    display: grid;
    gap: 13px;
    margin-top: 16px;
}

.account-profile-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 900;
}

.account-profile-form input,
.account-profile-form textarea {
    width: 100%;
}

.account-profile-form textarea {
    resize: vertical;
    line-height: 1.45;
}

.account-profile-overview .workspace-panel-head {
    align-items: center;
}

.account-profile-overview .workspace-panel-head .button {
    flex: 0 0 auto;
}

.account-profile-summary {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(150px, 0.8fr) minmax(220px, 1.5fr);
    margin: 0;
    border-top: 1px solid var(--line);
}

.account-profile-summary > div {
    min-width: 0;
    padding: 14px 16px 2px 0;
}

.account-profile-summary > div + div {
    padding-left: 16px;
    border-left: 1px solid var(--line);
}

.account-profile-summary dt {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.account-profile-summary dd {
    overflow-wrap: anywhere;
    margin: 5px 0 0;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
}

.account-profile-summary-notes dd {
    color: var(--ink-soft);
    font-weight: 700;
}

.account-appearance-settings {
    min-width: 0;
    margin: 2px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.account-appearance-settings legend {
    padding: 0;
    color: var(--ink);
    font-weight: 900;
}

.account-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 9px;
}

.account-theme-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.account-theme-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.account-theme-option-copy {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    font-weight: 900;
}

.account-theme-option > input:checked + .account-theme-option-copy {
    border-color: var(--teal);
    background: var(--teal-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 25%, transparent);
}

.account-theme-option > input:focus-visible + .account-theme-option-copy {
    outline: 3px solid color-mix(in srgb, var(--teal) 30%, transparent);
    outline-offset: 2px;
}

.account-theme-option-copy > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.account-theme-option-copy small {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-theme-swatch {
    display: block;
    width: 42px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background:
        linear-gradient(
            90deg,
            var(--theme-swatch-paper) 0 42%,
            var(--theme-swatch-surface) 42% 72%,
            var(--theme-swatch-accent) 72% 100%
        );
    box-shadow: inset 0 0 0 3px rgba(127, 162, 157, 0.1);
}

.settings-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.settings-page-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.settings-page-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 8px;
    background: var(--teal-soft);
}

.settings-page-title h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.08;
}

.settings-page-title p:not(.eyebrow) {
    margin: 5px 0 0;
    color: var(--ink-soft);
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.settings-sidebar {
    position: sticky;
    top: 96px;
    padding: 12px;
}

.settings-account {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px;
}

.settings-account-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-deep);
    font-weight: 950;
}

.settings-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-account > span:last-child {
    min-width: 0;
}

.settings-account strong,
.settings-account small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-account strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.settings-account small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.71rem;
}

.settings-nav {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.settings-nav a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
}

.settings-nav a:hover {
    border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
    background: var(--surface-muted);
}

.settings-nav a > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
}

.settings-account-meta {
    display: grid;
    gap: 8px;
    margin: 12px 4px 2px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.settings-account-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.settings-account-meta dt,
.settings-account-meta dd {
    margin: 0;
    font-size: 0.72rem;
}

.settings-account-meta dt {
    color: var(--ink-soft);
    font-weight: 750;
}

.settings-account-meta dd {
    color: var(--ink);
    font-weight: 900;
}

.settings-form {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.settings-section {
    scroll-margin-top: 96px;
}

.settings-section-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
}

.settings-section-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-muted);
}

.settings-section-head h2 {
    margin: 1px 0 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.settings-section-head p:not(.eyebrow) {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.settings-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.settings-field > span:not(.sr-only) {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 900;
}

.settings-field > small {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.settings-field input,
.settings-field textarea {
    width: 100%;
}

.settings-memory-field textarea {
    min-height: 148px;
    resize: vertical;
    line-height: 1.5;
}

.settings-section .account-appearance-settings {
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-save-bar {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.16);
    backdrop-filter: blur(12px);
}

.settings-save-bar > span {
    min-width: 0;
}

.settings-save-bar strong,
.settings-save-bar small {
    display: block;
}

.settings-save-bar strong {
    color: var(--ink);
    font-size: 0.85rem;
}

.settings-save-bar small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.settings-save-bar > div {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

@media (max-width: 520px) {
    .account-theme-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        position: static;
    }

    .settings-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .settings-nav a {
        grid-template-columns: 30px minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .settings-page-head,
    .settings-save-bar {
        display: grid;
    }

    .settings-page-head > .button {
        width: 100%;
    }

    .settings-field-grid,
    .account-profile-summary {
        grid-template-columns: 1fr;
    }

    .account-profile-summary > div {
        padding: 12px 0;
    }

    .account-profile-summary > div + div {
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .settings-save-bar {
        position: static;
    }

    .settings-save-bar > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .settings-save-bar .button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .settings-page-title {
        align-items: flex-start;
    }

    .settings-page-title h1 {
        font-size: 1.72rem;
    }

    .settings-nav {
        grid-template-columns: 1fr;
    }
}

.account-meta h2 {
    margin-top: 0;
}

.account-plan-summary {
    --plan-accent: var(--teal);
    display: grid;
    gap: 8px;
    margin: 14px 0 6px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 38%, var(--line));
    border-left: 6px solid var(--plan-accent);
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 9%, var(--surface)), var(--surface)),
        var(--white);
}

.account-plan-summary p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.pricing-active-plan .plan-pending-note,
.plan-change-card .plan-pending-note,
.account-plan-summary .plan-pending-note {
    display: inline-flex;
    width: fit-content;
    margin: 4px 0 0;
    color: color-mix(in srgb, var(--plan-accent) 70%, var(--ink));
    font-size: 0.8rem;
    font-weight: 900;
}

.account-call-meter {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--teal-soft);
}

.account-call-meter span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1fae72, var(--amber));
}

.account-debug-panel {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.account-debug-panel summary {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 11px 0;
    list-style: none;
    cursor: pointer;
}

.account-debug-panel summary::-webkit-details-marker {
    display: none;
}

.account-debug-panel summary::after {
    content: "+";
    color: var(--teal-deep);
    font-size: 1.2rem;
    font-weight: 900;
}

.account-debug-panel[open] summary::after {
    content: "-";
}

.account-debug-panel summary > img {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 7px;
    background: var(--teal-soft);
}

.account-debug-panel summary strong,
.account-debug-panel summary small {
    display: block;
}

.account-debug-panel summary strong {
    color: var(--ink);
    font-size: 0.94rem;
}

.account-debug-panel summary small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
}

.account-debug-body {
    padding: 0 0 12px;
}

.account-debug-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    font-size: 0.9rem;
}

.account-debug-table th,
.account-debug-table td {
    padding: 10px 11px;
    border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    text-align: left;
    vertical-align: top;
}

.account-debug-table tr:first-child th,
.account-debug-table tr:first-child td {
    border-top: 0;
}

.account-debug-table th {
    width: 45%;
    color: var(--ink);
    font-weight: 900;
}

.account-debug-table td {
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.account-plan-summary .button {
    justify-self: start;
    min-height: 40px;
    padding: 9px 12px;
}

.account-note {
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-weight: 800;
}

.account-signin-card {
    display: grid;
    gap: 16px;
}

.login-card {
    position: relative;
    gap: 18px;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(42, 167, 162, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 255, 253, 0.98)),
        var(--white);
    box-shadow: 0 24px 52px rgba(23, 52, 58, 0.13);
}

.login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--amber), var(--violet));
}

.login-card .eyebrow {
    width: fit-content;
    margin-top: 0;
    padding: 5px 9px;
    border: 1px solid rgba(42, 167, 162, 0.22);
    border-radius: 999px;
    background: var(--teal-soft);
}

.login-card h1 {
    max-width: 12ch;
}

.login-benefits {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
    border-radius: 8px;
    background: var(--surface-soft);
}

.login-benefits div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 840;
    line-height: 1.35;
}

.login-benefits img,
.login-privacy-note img {
    width: 30px;
    height: 30px;
    padding: 7px;
    border: 1px solid rgba(42, 167, 162, 0.2);
    border-radius: 8px;
    background: var(--teal-soft);
}

.login-option-list {
    display: grid;
    gap: 10px;
}

.login-option {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(42, 167, 162, 0.32);
    border-radius: 8px;
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(232, 248, 244, 0.78), rgba(255, 248, 232, 0.68)),
        var(--white);
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.08);
}

.login-option:hover {
    border-color: rgba(42, 167, 162, 0.58);
    box-shadow: 0 18px 36px rgba(23, 52, 58, 0.11);
}

.login-option > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.login-google-logo {
    width: 24px;
    height: 24px;
}

.login-option strong,
.login-option em {
    grid-column: 2;
    display: block;
}

.login-option strong {
    font-size: 1.05rem;
}

.login-option em {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 800;
}

.login-privacy-note {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid rgba(42, 167, 162, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(232, 248, 244, 0.72), rgba(255, 248, 232, 0.58));
}

.login-privacy-note p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    font-weight: 820;
    line-height: 1.42;
}

.login-footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 800;
}

.login-footnote a {
    color: var(--teal-deep);
    font-weight: 900;
}

.favorite-teachers-panel {
    margin-top: 18px;
}

.account-main-column .favorite-teachers-panel {
    margin-top: 0;
}

.account-certificates-panel {
    min-width: 0;
}

.account-certificate-count {
    color: var(--teal-deep);
    font-size: 0.8rem;
    font-weight: 950;
    white-space: nowrap;
}

.account-certificate-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.account-certificate-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.account-certificate-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--teal-soft) 72%, var(--surface));
}

.account-certificate-mark.is-course {
    border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
    background: color-mix(in srgb, var(--amber-soft) 72%, var(--surface));
}

.account-certificate-mark img {
    width: 20px;
    height: 20px;
}

.account-certificate-body {
    min-width: 0;
}

.account-certificate-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.account-certificate-head > div {
    min-width: 0;
}

.account-certificate-head span {
    display: block;
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.account-certificate-head h3 {
    margin: 3px 0 0;
    font-size: 1rem;
    line-height: 1.25;
}

.account-certificate-head h3 a {
    color: var(--ink);
}

.account-certificate-head h3 a:hover {
    color: var(--teal-deep);
}

.account-certificate-head time {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.account-certificate-body > p {
    margin: 5px 0 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.4;
}

.account-certificate-body > p strong {
    color: var(--ink);
}

.account-certificate-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 800;
}

.account-certificate-meta > span,
.account-certificate-meta > a:not(.text-link) {
    color: var(--ink-soft);
}

.account-certificate-meta code {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.68rem;
}

.account-certificate-meta .text-link {
    margin-left: auto;
}

.account-certificate-more {
    margin-top: 10px;
}

.account-certificate-more > summary {
    width: fit-content;
    color: var(--teal-deep);
    font-size: 0.82rem;
    font-weight: 950;
    cursor: pointer;
}

.account-certificate-more[open] > summary {
    margin-bottom: 2px;
}

.account-certificate-note {
    margin: 11px 0 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}

.account-certificates-empty {
    margin-top: 0;
    padding: 18px 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.account-certificates-empty > img {
    margin-bottom: 7px;
}

.account-certificates-empty > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
}

.account-certificates-empty > div .button {
    margin-top: 0;
}

.favorite-teacher-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.favorite-teacher-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.favorite-teacher-image {
    display: block;
    overflow: hidden;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    background: var(--mist);
}

.favorite-teacher-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.favorite-teacher-card h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.favorite-teacher-card p {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.favorite-teacher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.favorite-teacher-actions .button {
    min-height: 38px;
    padding: 9px 11px;
}

.account-reviews-panel {
    min-width: 0;
}

.account-review-count {
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 900;
    white-space: nowrap;
}

.account-review-list {
    display: grid;
    gap: 10px;
}

.account-review-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.account-review-pal-image {
    display: block;
    overflow: hidden;
    width: 76px;
    height: 76px;
    border-radius: 7px;
    background: var(--mist);
}

.account-review-pal-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.account-review-body {
    min-width: 0;
}

.account-review-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.account-review-head > div {
    min-width: 0;
}

.account-review-head h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.account-review-head h3 a {
    color: var(--ink);
}

.account-review-head p {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}

.account-review-head time {
    flex: 0 0 auto;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.account-review-stars {
    display: flex;
    gap: 1px;
    margin-top: 7px;
    color: color-mix(in srgb, var(--line) 72%, var(--ink-soft));
    font-size: 1.08rem;
    line-height: 1;
}

.account-review-stars .is-selected {
    color: #ffa41c;
    text-shadow: 0 1px 0 #b26a00;
}

.account-review-text {
    margin: 8px 0 0;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.account-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.account-review-status {
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 900;
}

.account-review-status.is-published {
    color: var(--teal-deep);
}

.account-review-status.is-pending {
    color: var(--amber-ink);
}

.account-review-status.is-hidden {
    color: var(--danger-ink);
}

.account-reviews-empty {
    margin-top: 0;
}

@media (max-width: 560px) {
    .account-certificate-head {
        display: grid;
        gap: 4px;
    }

    .account-certificate-head time {
        white-space: normal;
    }

    .account-certificate-meta .text-link {
        width: 100%;
        margin-left: 0;
    }

    .account-review-card {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .account-review-pal-image {
        width: 62px;
        height: 62px;
    }

    .account-review-head {
        display: grid;
        gap: 3px;
    }

    .account-review-head time {
        white-space: normal;
    }
}


/* Public course library */
.activities-directory-hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--teal) 13%, var(--surface)) 0 46%, transparent 46%),
        var(--surface-soft);
}

.activities-directory-hero .section-inner {
    max-width: 980px;
}

.activities-directory-hero h1 {
    max-width: 780px;
}

.activities-directory-hero > .section-inner > p:not(.eyebrow) {
    max-width: 760px;
}

.activity-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    max-width: 760px;
    margin-top: 24px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 9%, transparent);
}

.activity-search > img {
    margin-left: 8px;
    opacity: 0.72;
}

.activity-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.activity-search .button {
    min-height: 42px;
}

.activity-directory-toolbar,
.activity-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.activity-directory-toolbar h2,
.activity-section-heading h2 {
    margin: 4px 0 0;
}

.activity-directory-toolbar > span,
.activity-section-heading > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.8rem;
    font-weight: 900;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.activity-grid-profile {
    grid-template-columns: minmax(0, 420px);
}

.activity-grid-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.activity-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
    box-shadow: 0 17px 34px color-mix(in srgb, var(--ink) 11%, transparent);
}

.activity-card-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--mist);
}

.activity-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.activity-card:hover .activity-card-image img {
    transform: scale(1.025);
}

.activity-card-image > span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 5px;
    color: #fff;
    background: rgba(13, 31, 34, 0.82);
    font-size: 0.74rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.activity-card-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    padding: 15px;
}

.activity-card-tutor {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 11px;
}

.activity-card-tutor > a {
    flex: 0 0 auto;
}

.activity-card-tutor img {
    width: 34px;
    height: 34px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 0 0 1px var(--line);
}

.activity-card-tutor div {
    display: grid;
    min-width: 0;
}

.activity-card-tutor span {
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.activity-card-tutor div a {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-card h3 {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.3;
}

.activity-card h3 a {
    color: var(--ink);
}

.activity-card-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 14px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.activity-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: auto;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
}

.activity-card-meta span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.activity-card-meta img {
    opacity: 0.72;
}

.activity-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    color: var(--teal-deep);
    font-size: 0.84rem;
    font-weight: 950;
}

.activity-card-link span {
    font-size: 1.1rem;
}

.activity-empty {
    display: grid;
    justify-items: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 48px 24px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    text-align: center;
}

.activity-empty img {
    margin-bottom: 10px;
    opacity: 0.65;
}

.activity-empty h2 {
    margin: 0;
}

.activity-empty p {
    margin: 8px 0 18px;
    color: var(--ink-soft);
}

.profile-activities-section {
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--teal) 4%);
}

.dashboard-activities-panel {
    margin-top: 18px;
}

.activity-hero {
    position: relative;
    min-height: min(620px, 78vh);
    overflow: hidden;
    background: #102b30;
}

.activity-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.activity-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 18, 20, 0.94) 0%, rgba(5, 18, 20, 0.79) 43%, rgba(5, 18, 20, 0.25) 76%, rgba(5, 18, 20, 0.1) 100%),
        linear-gradient(0deg, rgba(5, 18, 20, 0.58), transparent 46%);
}

.activity-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: min(620px, 78vh);
    flex-direction: column;
    justify-content: center;
    padding-top: 56px;
    padding-bottom: 56px;
}

.activity-breadcrumbs {
    position: absolute;
    top: 26px;
    left: 24px;
    color: rgba(255, 255, 255, 0.74);
}

.activity-breadcrumbs a {
    color: #fff;
}

.activity-hero-copy {
    max-width: 760px;
    color: #fff;
}

.activity-hero-copy .eyebrow {
    color: #8de3d3;
}

.activity-hero h1 {
    max-width: 740px;
    margin: 8px 0 16px;
    color: #fff;
    font-size: clamp(2.1rem, 4.2vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.activity-hero-copy > p:not(.eyebrow) {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1.65;
}

.activity-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.activity-hero-meta span {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 5px;
    color: #fff;
    background: rgba(7, 25, 27, 0.5);
    font-size: 0.78rem;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

.activity-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.activity-call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #269765;
    border-radius: 6px;
    color: #fff;
    background: #238a5d;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.activity-call-button:hover {
    background: #1c754e;
}

.activity-call-button img {
    filter: brightness(0) invert(1);
}

.activity-overview-band {
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.activity-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 54px;
    align-items: start;
}

.activity-overview-main h2 {
    max-width: 660px;
    margin: 6px 0 24px;
}

.activity-outcome-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-outcome-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    line-height: 1.5;
}

.activity-outcome-list img {
    margin-top: 2px;
}

.activity-pal-panel {
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-soft) 88%, var(--teal) 5%);
}

.activity-pal-head {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.activity-pal-head > a img {
    width: 76px;
    height: 76px;
    border-radius: 7px;
    object-fit: cover;
    object-position: center top;
}

.activity-pal-head span {
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-pal-head h2 {
    margin: 3px 0;
    font-size: 1.18rem;
}

.activity-pal-head h2 a {
    color: var(--ink);
}

.activity-pal-head p,
.activity-pal-panel > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.activity-pal-panel > p {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.activity-pal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 15px;
}

.activity-pal-actions .button {
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.activity-chapter-list {
    position: relative;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-chapter {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.activity-chapter-number {
    display: grid;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--line));
    border-radius: 8px;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--surface) 85%, var(--teal) 9%);
    font-size: 1.2rem;
    font-weight: 950;
}

.activity-chapter-content {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.activity-chapter-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.activity-chapter-head span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-chapter-head > span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    align-self: start;
    text-transform: none;
}

.activity-chapter h3 {
    margin: 3px 0 0;
    font-size: 1.1rem;
}

.activity-chapter-content > p {
    margin: 11px 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

.activity-chapter-content > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-chapter-content > ul li {
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.75rem;
    font-weight: 750;
}

.activity-chapter-ask {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 14px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
    border-radius: 5px;
    color: var(--teal-deep);
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-chapter-ask:hover {
    background: color-mix(in srgb, var(--teal) 8%, var(--surface));
}

.activity-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.activity-next-step > div:first-child {
    max-width: 720px;
}

.activity-next-step h2 {
    margin: 5px 0 10px;
}

.activity-next-step p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}

.activity-next-actions {
    display: grid;
    flex: 0 0 auto;
    gap: 9px;
    min-width: 230px;
}

[data-theme-tone="dark"] .activity-card-image > span {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(3, 13, 15, 0.84);
}

[data-theme-tone="dark"] .activity-call-button {
    border-color: #51b889;
    background: #247f59;
}

@media (max-width: 1040px) {
    .activity-grid,
    .activity-grid-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-overview-grid {
        gap: 30px;
    }
}

@media (max-width: 760px) {
    .activity-grid,
    .activity-grid-dashboard,
    .activity-grid-profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-grid-profile {
        max-width: 440px;
    }

    .activity-directory-toolbar,
    .activity-section-heading,
    .activity-next-step {
        align-items: start;
        flex-direction: column;
    }

    .activity-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-hero,
    .activity-hero-inner {
        min-height: 560px;
    }

    .activity-hero-shade {
        background: linear-gradient(0deg, rgba(5, 18, 20, 0.96) 0%, rgba(5, 18, 20, 0.77) 68%, rgba(5, 18, 20, 0.34) 100%);
    }

    .activity-hero-inner {
        justify-content: end;
        padding-top: 74px;
        padding-bottom: 42px;
    }

    .activity-breadcrumbs {
        top: 20px;
        left: 20px;
    }

    .activity-hero h1 {
        font-size: 2.25rem;
    }

    .activity-next-actions {
        width: 100%;
        min-width: 0;
    }
}

/* Shared interaction feedback for native buttons and button-like links. */
:where(
    button,
    .button,
    .card-action-link,
    .card-action-button,
    [role="button"],
    .workspace-path-menu > summary
) {
    touch-action: manipulation;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}

:where(
    button:not(:disabled),
    .button:not([aria-disabled="true"]),
    .card-action-link:not([aria-disabled="true"]),
    .card-action-button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    .workspace-path-menu > summary
) {
    cursor: pointer;
}

:where(
    button,
    .button,
    .card-action-link,
    .card-action-button,
    [role="button"],
    .workspace-path-menu > summary
):focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 2px;
}

:where(
    .button,
    .card-action-link,
    .card-action-button,
    .header-search button,
    .nav-toggle,
    .vt-tool,
    .vt-send
) img {
    transition: transform 160ms ease;
}

html[data-theme-tone="dark"] {
    --control-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
    --control-active-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --control-focus-ring: rgba(86, 214, 164, 0.34);
}

@media (hover: hover) and (pointer: fine) {
    :where(
        button,
        .button,
        .card-action-link,
        .card-action-button,
        [role="button"],
        .workspace-path-menu > summary
    ):not(:disabled):not([aria-disabled="true"]):hover {
        transform: translateY(-1px);
    }

    :where(
        .button,
        .card-action-link,
        .card-action-button,
        .profile-review-submit,
        .profile-insight-action,
        .activity-chapter-ask,
        .activity-step-play,
        .flashcard-known,
        .vt-call-mute,
        .vt-call-end,
        .vt-call-choices button,
        .vibe-quiz-filter-buttons button
    ):not(:disabled):not([aria-disabled="true"]):hover {
        box-shadow: var(--control-hover-shadow);
        transform: translateY(-2px);
    }

    :where(
        .header-search button,
        .nav-toggle,
        .vt-tool,
        .vt-send,
        .profile-card-media .favorite-action-card,
        .gallery-strip button
    ):not(:disabled):hover {
        box-shadow: var(--control-active-shadow);
        transform: translateY(-1px) scale(1.04);
    }

    :where(
        .button[data-pal-call],
        .card-action-button[data-pal-call],
        .activity-call-button,
        .vt-session-call
    ):not(:disabled):hover {
        box-shadow: 0 12px 24px rgba(31, 174, 114, 0.3);
    }

    :where(
        .workspace-danger,
        .vt-call-end
    ):not(:disabled):hover {
        box-shadow: 0 10px 22px rgba(242, 109, 91, 0.24);
    }

    :where(
        .button,
        .card-action-link,
        .card-action-button,
        .header-search button,
        .nav-toggle,
        .vt-tool,
        .vt-send
    ):not(:disabled):not([aria-disabled="true"]):hover img {
        transform: scale(1.08);
    }

    button.text-link:hover {
        box-shadow: none;
        transform: none;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .profile-rating-stars button:hover {
        box-shadow: none;
        transform: translateY(-1px) scale(1.06);
    }
}

:where(
    button,
    .button,
    .card-action-link,
    .card-action-button,
    [role="button"],
    .workspace-path-menu > summary
):not(:disabled):not([aria-disabled="true"]):active {
    box-shadow: var(--control-active-shadow);
    transform: translateY(0) scale(0.98);
    transition-duration: 70ms;
}

:where(
    button:disabled,
    .button[aria-disabled="true"],
    .card-action-link[aria-disabled="true"],
    .card-action-button:disabled,
    [role="button"][aria-disabled="true"]
) {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        button,
        .button,
        .card-action-link,
        .card-action-button,
        [role="button"],
        .workspace-path-menu > summary
    ),
    :where(
        .button,
        .card-action-link,
        .card-action-button,
        .header-search button,
        .nav-toggle,
        .vt-tool,
        .vt-send
    ) img {
        transition: none !important;
    }

    :where(
        button,
        .button,
        .card-action-link,
        .card-action-button,
        [role="button"],
        .workspace-path-menu > summary
    ):hover,
    :where(
        button,
        .button,
        .card-action-link,
        .card-action-button,
        [role="button"],
        .workspace-path-menu > summary
    ):active {
        transform: none !important;
    }
}

@media (max-width: 520px) {
    .activity-search {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .activity-search .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .activity-chapter {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
    }

    .activity-chapter-number {
        width: 38px;
        border-radius: 6px;
        font-size: 0.95rem;
    }

    .activity-chapter-content {
        padding: 14px;
    }

    .activity-chapter-head {
        display: grid;
        gap: 8px;
    }

    .activity-chapter-head > span {
        justify-self: start;
    }

    .activity-pal-actions {
        grid-template-columns: 1fr;
    }
}

.account-setup-note {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.account-setup-note span {
    color: var(--ink-soft);
}

.account-setup-note code {
    display: block;
    overflow-wrap: anywhere;
    padding: 10px;
    border-radius: 7px;
    color: var(--ink);
    background: var(--mist);
    font-weight: 900;
}

.workspace-week-grid,
.workspace-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.workspace-day,
.workspace-review-card {
    padding: 15px;
}

.workspace-block {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(42, 167, 162, 0.22);
    border-radius: 7px;
    background: var(--surface-muted);
}

.workspace-block span,
.workspace-review-card > span {
    color: var(--teal-deep);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.workspace-block button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 9px;
    border: 1px solid rgba(42, 167, 162, 0.34);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font-weight: 900;
    cursor: pointer;
}

.workspace-review-card ol,
.workspace-program-milestones {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--ink-soft);
}

.workspace-review-card .button {
    margin-top: 14px;
}

.workspace-program-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.workspace-program-picker label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
}

.workspace-program-picker input {
    margin-top: 3px;
    accent-color: var(--teal-deep);
}

.workspace-program-picker span {
    display: grid;
    gap: 2px;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.workspace-program-picker strong {
    color: var(--ink);
}

.workspace-program-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.workspace-program-head strong {
    color: var(--teal-deep);
    font-size: 1.7rem;
    line-height: 1;
}

.workspace-inline-note,
.workspace-muted {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-soft);
    background: var(--amber-soft);
    font-weight: 900;
}

.workspace-program-form.is-shaking {
    animation: vt-shake 260ms ease;
}

@keyframes vt-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    33% {
        transform: translateX(-6px);
    }

    66% {
        transform: translateX(6px);
    }
}

@media (max-width: 1080px) {
    .profile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pricing-grid,
    .ad-plan-grid,
    .features-plan-strip,
    .pricing-shared-list,
    .dashboard-suggested-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-grid {
        row-gap: 48px;
    }

    .ad-landing-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ad-landing-pal-strip {
        max-width: 680px;
    }

}

@media (max-width: 920px) {
    .dashboard-grid {
        grid-template-areas:
            "plan"
            "paths"
            "quick"
            "favorites";
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-paths-panel {
        align-self: start;
    }

    .dashboard-favorites-panel .dashboard-pal-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header {
        flex-wrap: wrap;
        min-height: 64px;
        gap: 10px 12px;
        padding: 11px 18px;
    }

    .brand {
        flex: 1 1 auto;
    }

    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .header-search-results {
        left: 0;
        right: 0;
    }

    .nav-toggle {
        order: 2;
        display: block;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 6px);
        left: 18px;
        right: 18px;
        display: none;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .site-nav.is-open {
        display: grid;
    }

    .site-nav a {
        justify-content: space-between;
    }

    .site-nav .nav-favorites-link,
    .site-nav .nav-history-link,
    .site-nav .nav-settings-link {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        padding: 8px 12px;
    }

    .nav-favorites-text,
    .nav-history-text,
    .nav-settings-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .nav-favorites-count {
        position: static;
        margin-left: auto;
        border-color: var(--surface);
    }

    .nav-user-menu {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px;
        border-radius: 8px;
    }

    .site-nav .nav-user-menu .nav-account,
    .site-nav .nav-user-menu .nav-call-credits,
    .site-nav .nav-user-menu .nav-admin-link,
    .nav-account-signout button {
        width: 100%;
        min-height: 42px;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 6px;
    }

    .site-nav .nav-user-menu .nav-account {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) 10px;
    }

    .nav-account-copy {
        justify-content: flex-start;
    }

    .nav-account-dropdown {
        position: static;
        width: 100%;
        max-height: min(520px, calc(100svh - 180px));
        margin-top: 3px;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0 0 7px 7px;
        box-shadow: none;
    }

    .site-nav .nav-account-dropdown .nav-account-links a,
    .nav-account-signout button {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        justify-content: initial;
    }

    .hero {
        height: clamp(460px, calc(100svh - 140px), 620px);
    }

    .hero-media img {
        object-position: 64% center;
    }

    .hero-shade {
        background:
            linear-gradient(90deg, rgba(247, 251, 247, 0.98) 0%, rgba(247, 251, 247, 0.92) 58%, rgba(247, 251, 247, 0.44) 100%),
            linear-gradient(180deg, rgba(42, 167, 162, 0.12), rgba(246, 180, 75, 0.08));
    }

    .hero-content {
        width: min(100% - 36px, 760px);
        padding: 50px 0;
    }

    .hero-content h1 {
        font-size: 3.4rem;
    }

    .hero-copy {
        font-size: 1.08rem;
    }

    .split,
    .profile-layout,
    .profile-details-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .help-topic-nav,
    .help-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-room-layout,
    .help-data-strip {
        grid-template-columns: 1fr;
    }

    .profile-grid,
    .directory-grid,
    .help-grid,
    .feature-grid,
    .ad-example-grid,
    .article-grid,
    .track-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ad-landing-hero {
        min-height: auto;
        background-position: 74% center;
    }

    .ad-landing-hero-inner {
        min-height: auto;
        padding-top: 58px;
        padding-bottom: 38px;
    }

    .ad-landing-flow {
        grid-template-columns: 1fr;
    }

    .favorites-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .favorites-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .pricing-value-grid {
        grid-template-columns: 1fr;
    }

    .features-cta {
        display: grid;
        gap: 18px;
    }

    .feature-table {
        min-width: 800px;
    }

    .profile-summary h1,
    .split h2,
    .section-heading h2,
    .page-hero h1 {
        font-size: 2.18rem;
    }

    .section {
        padding: 58px 0;
    }

    .vt-chat-window {
        inset: auto 14px 14px 14px;
        width: auto;
        height: min(660px, calc(100svh - 28px));
    }

    .vt-chat-head {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .vt-chat-tools {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
    }

    .vt-tool {
        width: 100%;
        min-width: 0;
        height: 36px;
    }

    .vt-chat-head .vt-tool img {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        opacity: 1;
        filter: brightness(0) invert(1);
    }

    .vt-learning-summary {
        display: grid;
    }

    .call-history-hero,
    .contact-layout,
    .dashboard-hero,
    .help-layout,
    .help-support-panel,
    .workspace-hero,
    .workspace-layout,
    .account-grid,
    .favorite-teacher-grid,
    .plan-change-detail {
        grid-template-columns: 1fr;
    }

    .plan-change-action {
        position: static;
    }

    .call-history-actions,
    .contact-form-head,
    .dashboard-actions,
    .help-hero-actions,
    .help-support-actions,
    .workspace-actions {
        justify-content: flex-start;
    }

    .workspace-sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: 8px;
    }

    .workspace-sidebar button {
        flex: 0 0 auto;
        width: auto;
    }

    .call-history-metrics,
    .dashboard-metrics,
    .workspace-metrics,
    .workspace-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-control-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-control-bar label:first-child {
        grid-column: 1 / -1;
    }

    .workspace-week-grid,
    .workspace-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-planner-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-planner-form .button {
        grid-column: 1 / -1;
    }

    .directory-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .directory-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .section-inner,
    .section-inner.narrow,
    .footer-inner,
    .hero-content {
        width: min(100% - 32px, 560px);
    }

    .hero-content h1 {
        font-size: 2.82rem;
    }

    .page-hero.favorites-hero {
        padding: 20px 0;
    }

    .favorites-hero .eyebrow,
    .favorites-hero-inner > div > p:last-child {
        display: none;
    }

    .favorites-hero h1 {
        font-size: 1.8rem;
    }

    .favorites-toolbar {
        gap: 10px;
        margin-bottom: 12px;
    }

    .favorites-toolbar h2 {
        font-size: 1.2rem;
    }

    .favorites-toolbar > p {
        padding: 6px 8px;
        font-size: 0.78rem;
    }

    .hero {
        height: clamp(470px, calc(100svh - 128px), 620px);
    }

    .hero-actions,
    .ad-landing-actions,
    .call-history-actions,
    .dashboard-actions,
    .help-hero-actions,
    .help-support-actions,
    .profile-media .profile-actions,
    .pricing-hero-actions,
    .features-hero-actions,
    .search-form .search-row,
    .directory-filter-grid,
    .directory-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-media .profile-actions {
        min-width: 0;
    }

    .profile-media .profile-actions > .button {
        min-width: 0;
        max-width: 100%;
    }

    .help-hero-facts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .help-section[id] {
        scroll-margin-top: 142px;
    }

    .help-topic-nav,
    .help-mode-grid,
    .help-room-tools,
    .help-data-strip {
        grid-template-columns: 1fr;
    }

    .help-topic-nav small {
        white-space: normal;
    }

    .help-panel,
    .help-support-panel {
        padding: 18px;
    }

    .help-inline-note {
        padding: 14px;
    }

    .button {
        width: 100%;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .profile-grid,
    .directory-grid,
    .contact-layout,
    .contact-field-grid,
    .help-grid,
    .help-layout,
    .help-support-panel,
    .feature-grid,
    .article-grid,
    .track-grid,
    .pricing-grid,
    .ad-example-grid,
    .ad-plan-grid,
    .features-plan-strip,
    .pricing-shared-list,
    .plan-change-grid,
    .dashboard-suggested-grid {
        grid-template-columns: 1fr;
    }

    .pricing-shared {
        grid-template-columns: 1fr;
    }

    .dashboard-shell {
        padding: 22px 0 40px;
    }

    .dashboard-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-favorites-panel .dashboard-pal-list {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 18px;
    }

    .contact-form-head {
        align-items: start;
        flex-direction: column;
    }

    .ad-landing-hero {
        background-image:
            linear-gradient(180deg, rgba(247, 251, 247, 0.98) 0%, rgba(247, 251, 247, 0.86) 58%, rgba(247, 251, 247, 0.42) 100%),
            url("/images/hero-vibepal.jpg");
        background-position: center top;
    }

    .ad-landing-copy h1 {
        font-size: 3.65rem;
    }

    .ad-landing-pal-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ad-landing-tutor,
    .ad-landing-tutor:nth-child(2),
    .ad-landing-tutor:nth-child(3) {
        min-height: 0;
        transform: none;
    }

    .ad-landing-tutor img {
        height: 168px;
    }

    .ad-flow-list div {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ad-flow-list strong {
        width: 36px;
        height: 36px;
    }

    .call-history-shell {
        padding: 32px 0 58px;
    }

    .call-history-hero h1,
    .dashboard-hero h1 {
        font-size: 2.2rem;
    }

    .call-history-metrics span,
    .dashboard-metrics span {
        font-size: 1.34rem;
    }

    .call-history-panel,
    .dashboard-panel {
        padding: 12px;
    }

    .call-history-panel-head {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .dashboard-panel-head {
        align-items: flex-end;
        flex-flow: row wrap;
        gap: 7px;
    }

    .call-history-row {
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: start;
    }

    .call-history-duration {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        min-width: 0;
        text-align: left;
    }

    .dashboard-pal-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .dashboard-pal-row .card-action-button {
        grid-column: auto;
        width: auto;
    }

    .dashboard-pal-image,
    .dashboard-pal-image img {
        width: 44px;
        height: 44px;
    }

    .pricing-card {
        min-height: 0;
    }

    .pricing-card-simple {
        grid-template-rows: auto auto auto auto auto auto auto;
    }

    .pricing-card-simple .pricing-card-head {
        min-height: 0;
    }

    .pricing-section {
        padding-top: 36px;
    }

    .pricing-grid {
        padding-top: 0;
    }

    .pricing-plan-dates,
    .account-plan-dates {
        grid-template-columns: 1fr;
    }

    .profile-ai-grid {
        grid-template-columns: 1fr;
    }

    .profile-reviews-head {
        align-items: start;
        flex-direction: column;
    }

    .profile-reviews-score {
        width: 100%;
        text-align: left;
    }

    .profile-review-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .profile-review-avatar {
        width: 38px;
        height: 38px;
    }

    .profile-review-meta {
        align-items: start;
        flex-direction: column;
        gap: 2px;
    }

    .features-plan-card {
        min-height: 0;
    }

    .features-current-plan {
        width: 100%;
    }

    .feature-group-head,
    .features-note {
        grid-template-columns: 1fr;
    }

    .feature-table {
        min-width: 720px;
    }

    .features-cta {
        padding: 20px;
    }

    .profile-main-image {
        max-height: 620px;
    }

    .site-flashes {
        width: min(100% - 32px, 560px);
    }

    .account-hero,
    .workspace-account-card {
        grid-template-columns: 1fr;
    }

    .account-hero {
        display: grid;
    }

    .workspace-account-card .button,
    .account-hero .button {
        width: 100%;
    }

    .account-person {
        align-items: flex-start;
    }

    .account-person h1,
    .account-signin-card h1 {
        font-size: 1.86rem;
    }

    .account-content-footer {
        display: grid;
        padding: 14px;
    }

    .account-content-footer nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .account-content-footer .button {
        width: 100%;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }

    .profile-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .card-action-link,
    .card-action-button,
    .favorite-form-card {
        min-width: 0;
    }

    .card-action-button.icon-only {
        width: auto;
    }

    .favorites-grid .profile-card-actions {
        display: flex;
        flex-wrap: nowrap;
    }

    .favorites-grid .profile-card-actions .card-action-button.icon-only {
        width: 36px;
    }

    .vt-chat-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .vt-chat-tools {
        justify-content: stretch;
    }

    .vt-chat-window.is-maximized {
        inset: 8px;
    }

    .vt-chat-window.is-maximized .vt-messages {
        padding: 14px 12px;
    }

    .vt-chat-window.is-maximized .vt-bubble {
        max-width: 92%;
    }

    .vt-chat-avatar {
        width: 40px;
        height: 40px;
    }

    .vt-tool {
        flex: 1 1 0;
        width: auto;
        height: 32px;
    }

    .vt-callbar {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .vt-call-status {
        grid-column: 1 / 3;
    }

    .vt-call-timer {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .vt-mic-meter {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .vt-call-mute,
    .vt-call-end {
        grid-row: 2;
    }

    .vt-call-mute {
        grid-column: 2;
    }

    .vt-call-end {
        grid-column: 3;
        justify-self: end;
    }

    .vt-bubble {
        max-width: 90%;
    }

    .vt-settings-grid,
    .vt-settings-api {
        grid-template-columns: 1fr;
    }

    .vt-modal-overlay {
        padding: 10px;
    }

    .vt-settings-hero {
        padding: 16px;
    }

    .vt-settings-hero .vt-modal-head h2 {
        font-size: 1.2rem;
    }

    .vt-settings-sections {
        padding: 10px;
    }

    .vt-settings-modal .vt-settings-group {
        padding: 13px;
    }

    .vt-settings-footer {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 11px;
    }

    .vt-settings-api .button {
        width: 100%;
    }

    .vt-modal-actions {
        grid-template-columns: 1fr;
    }

    .vt-call-duration-field {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .profile-quality-head,
    .profile-proof-head,
    .profile-best-for,
    .profile-proof-grid,
    .profile-comparison-head,
    .profile-comparison-grid,
    .profile-comparison-footer,
    .profile-faq-head,
    .profile-first-hangout-head,
    .profile-first-hangout-steps,
    .profile-first-hangout-notes,
    .profile-progress-roadmap-head,
    .profile-progress-roadmap-list,
    .profile-progress-roadmap-footer,
    .profile-demo-head {
        grid-template-columns: 1fr;
    }

    .profile-quality-head {
        gap: 9px;
    }

    .profile-first-hangout-head {
        gap: 9px;
    }

    .profile-comparison-head {
        gap: 9px;
    }

    .profile-comparison-badge,
    .profile-faq-badge {
        justify-self: start;
    }

    .profile-comparison-card {
        min-height: 0;
    }

    .profile-first-hangout-badge,
    .profile-progress-roadmap-badge {
        justify-self: start;
    }

    .profile-progress-roadmap-head {
        gap: 9px;
    }

    .profile-progress-roadmap-list {
        gap: 26px;
    }

    .profile-progress-roadmap-step {
        min-height: 0;
    }

    .profile-progress-roadmap-connector {
        top: auto;
        right: auto;
        bottom: -23px;
        left: 50%;
        transform: translateX(-50%);
    }

    .profile-progress-roadmap-action {
        width: 100%;
    }

    .profile-first-hangout-step:nth-child(odd),
    .profile-first-hangout-step:nth-child(even) {
        padding-right: 0;
        padding-left: 0;
        border-left: 0;
    }

    .profile-next-step-head,
    .profile-next-step-actions {
        grid-template-columns: 1fr;
    }

    .profile-next-step-head {
        gap: 10px;
    }

    .profile-next-step-badge {
        justify-self: start;
    }

    .profile-next-step-actions .button {
        min-height: 58px;
    }

    .profile-media .profile-actions .profile-action-copy strong {
        font-size: 0.8rem;
    }

    .profile-media .profile-actions .profile-action-copy small {
        font-size: 0.65rem;
    }

    .profile-quality-source {
        justify-self: start;
    }

    .profile-quality-metric {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        min-height: 116px;
        padding: 12px 10px;
    }

    .profile-quality-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .profile-quality-icon img {
        width: 18px;
        height: 18px;
    }

    .profile-quality-metric strong {
        font-size: 1.08rem;
    }

    .profile-quality-goals > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .profile-quality-method > div {
        grid-template-columns: 1fr;
    }

    .profile-proof-head {
        gap: 8px;
    }

    .profile-best-for {
        align-items: start;
        gap: 10px;
    }

    .profile-proof-grid .profile-proof-wide {
        grid-column: auto;
    }

    .profile-demo-head {
        gap: 8px;
    }

    .profile-demo-conversation {
        padding: 12px;
    }

    .profile-demo-message,
    .profile-demo-member {
        width: 100%;
    }

    .profile-market-panel {
        grid-template-columns: 1fr;
    }

    .profile-market-panel div {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .profile-market-panel div > img {
        width: 32px;
        height: 32px;
    }

    .header-search-box {
        grid-template-columns: 18px minmax(0, 1fr) 36px;
    }

    .header-search input {
        font-size: 0.9rem;
    }

    .header-search-result {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 10px;
    }

    .header-search-thumb,
    .header-search-kind {
        width: 42px;
        height: 42px;
    }

    .vt-learning-overlay {
        padding: 12px;
    }

    .vt-learning-modal {
        max-height: calc(100svh - 24px);
        padding: 16px;
    }

    .vt-learning-titlebar,
    .vt-learning-question,
    .vt-learning-generation-head {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .vt-learning-avatar {
        width: 42px;
        height: 42px;
    }

    .vt-learning-fields {
        grid-template-columns: 1fr;
    }

    .vt-learning-progress div:first-child,
    .vt-generation-progress div:first-child,
    .vt-learning-session label span {
        display: grid;
    }

    .vt-learning-session-body {
        padding-left: 14px;
    }

    .vt-learning-foot-actions {
        display: grid;
    }

    .workspace-shell {
        padding-top: 34px;
    }

    .workspace-hero h1 {
        font-size: 2.42rem;
    }

    .workspace-panel {
        padding: 16px;
    }

    .workspace-panel-head,
    .workspace-program-head,
    .workspace-learning-summary-actions {
        display: grid;
    }

    .workspace-metrics,
    .workspace-week-grid,
    .workspace-review-grid,
    .workspace-control-bar,
    .workspace-data-grid,
    .workspace-planner-form,
    .workspace-program-picker {
        grid-template-columns: 1fr;
    }

    .workspace-control-bar label:first-child {
        grid-column: auto;
    }

    .workspace-path-main {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .workspace-card-actions,
    .workspace-data-actions,
    .vt-learning-summary-actions,
    .favorite-teacher-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .workspace-card-actions .button,
    .workspace-control-bar .button,
    .workspace-data-actions .button,
    .vt-learning-summary-actions .button,
    .favorite-teacher-actions .button,
    .favorite-teacher-actions .favorite-form,
    .favorite-teacher-actions .favorite-action {
        width: 100%;
    }

    .favorite-teacher-card {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .favorite-teacher-image {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 920px) {
    .learning-path-page-head {
        display: grid;
        align-items: start;
    }

    .profile-paths-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vt-path-picker-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .learning-path-page-shell {
        padding-top: 26px;
    }

    .learning-path-page-head h1 {
        font-size: 2rem;
    }

    .learning-path-page-actions,
    .dashboard-path-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .learning-path-page-actions .button,
    .dashboard-path-actions .button {
        width: 100%;
    }

    .profile-paths-head,
    .vt-path-picker-head {
        display: grid;
        align-items: start;
    }

    .profile-paths-head .button,
    .vt-path-picker-head .button {
        width: 100%;
    }

    .profile-paths-list {
        grid-template-columns: 1fr;
    }

    .vt-learning-model-choice {
        grid-template-columns: 1fr;
    }

    .profile-path-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-path-actions .button {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .workspace-today-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .workspace-shell {
        padding-top: 26px;
    }

    .workspace-hero {
        gap: 16px;
    }

    .workspace-hero h1 {
        font-size: 2rem;
    }

    .workspace-hero p {
        margin-top: 9px;
    }

    .workspace-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        width: 100%;
    }

    .workspace-actions [data-workspace-primary] {
        grid-column: 1 / -1;
    }

    .workspace-actions .workspace-messages-button {
        width: 100%;
    }

    .workspace-actions .workspace-export-button {
        width: 44px;
    }

    .workspace-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-metrics article {
        min-height: 82px;
        padding: 13px;
    }

    .workspace-metrics span {
        font-size: 1.45rem;
    }

    .workspace-metrics p {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .workspace-focus-head {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .workspace-focus-head > strong {
        grid-column: 2;
        width: fit-content;
    }

    .workspace-upcoming-paths button {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .workspace-path-card-head {
        gap: 8px;
    }

    .workspace-path-menu > div {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        z-index: 90;
    }

    .workspace-week-head,
    .workspace-week-preview-head {
        display: grid;
    }

    .vt-learning-session > details > summary {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 12px;
    }

    .vt-session-status {
        grid-column: 2;
        width: fit-content;
    }

    .vt-learning-session-body {
        padding: 0 12px 14px;
    }

    .vt-session-reflection {
        grid-template-columns: 1fr;
    }

    .vt-learning-session .vt-session-review-later {
        grid-column: auto;
    }

    .vt-reflection-body .vt-modal-actions {
        display: grid;
    }
}

html[data-theme-tone="dark"] .site-header {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

html[data-theme-tone="dark"] .nav-account-dropdown {
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.44);
}

html[data-theme-tone="dark"] .nav-account-link-icon img {
    filter: brightness(0) invert(1);
    opacity: 0.86;
}

.account-panel#settings {
    scroll-margin-top: 104px;
}

html[data-theme-tone="dark"] .hero-shade {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--paper) 98%, transparent) 0%,
            color-mix(in srgb, var(--paper) 91%, transparent) 42%,
            color-mix(in srgb, var(--paper) 24%, transparent) 78%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--teal) 16%, transparent),
            color-mix(in srgb, var(--amber) 8%, transparent)
        );
}

html[data-theme-tone="dark"] .ad-landing-hero {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--paper) 98%, transparent) 0%,
            color-mix(in srgb, var(--paper) 91%, transparent) 48%,
            color-mix(in srgb, var(--paper) 40%, transparent) 100%
        ),
        url("/images/hero-vibepal.jpg") 68% center / cover no-repeat,
        var(--paper);
}

html[data-theme-tone="dark"] .ad-landing-shade {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--teal) 14%, transparent),
            color-mix(in srgb, var(--amber) 8%, transparent)
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--paper) 18%, transparent),
            color-mix(in srgb, var(--paper) 8%, transparent)
        );
}

html[data-theme-tone="dark"] .dashboard-plan-panel {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 11%, var(--surface)), var(--surface) 58%),
        var(--surface);
}

html[data-theme-tone="dark"] :is(
    .help-support-panel,
    .contact-panel-muted,
    .ad-example-card,
    .profile-personality-panel,
    .profile-ai-panel,
    .hangout-card,
    .vt-learning-generating,
    .vt-learning-summary,
    .vt-certificate,
    .login-card,
    .login-option,
    .login-privacy-note
) {
    background: linear-gradient(135deg, var(--surface-soft), var(--surface));
}

html[data-theme-tone="dark"] .vt-messages {
    background: linear-gradient(180deg, var(--page-muted), var(--surface));
}

html[data-theme-tone="dark"] :is(
    .workspace-shell,
    .learning-path-page-shell,
    .profile-paths-section
) {
    background: var(--paper);
}

html[data-theme-tone="dark"] .site-nav .nav-call-credits:hover {
    color: var(--ink);
    background: var(--teal-soft-strong);
}

html[data-theme-tone="dark"] .site-nav .nav-admin-link,
html[data-theme-tone="dark"] .site-nav .nav-admin-link:hover {
    color: var(--ink);
    background: var(--surface-muted);
}

html[data-theme-tone="dark"] :is(.profile-card, .dashboard-panel, .workspace-panel, .account-panel, .call-history-row) {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

html[data-theme-tone="dark"] .profile-card-media .favorite-action-card.card-action-button.icon-only {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 68%, transparent);
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
}

html[data-theme-tone="dark"] .profile-card-media .favorite-action-card:hover {
    color: var(--white);
    border-color: var(--mint);
    background: color-mix(in srgb, var(--paper) 74%, var(--teal));
}

html[data-theme-tone="dark"] .profile-card-media .favorite-action-card.card-action-button.icon-only.is-favorite {
    color: var(--teal-deep);
    border-color: color-mix(in srgb, var(--teal) 82%, var(--line));
    background: color-mix(in srgb, var(--paper) 72%, var(--teal));
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42),
        0 0 0 2px color-mix(in srgb, var(--teal) 14%, transparent);
}

html[data-theme-tone="dark"] .profile-card-media .favorite-action-card.card-action-button.icon-only.is-favorite:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--paper) 60%, var(--teal));
}

html[data-theme-tone="dark"] .profile-card-media .favorite-action-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 42%, transparent);
    outline-offset: 2px;
}

/* Course learning workspace */
.activity-ai-notice {
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.activity-ai-notice > .section-inner {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding-top: 13px;
    padding-bottom: 13px;
}

.activity-ai-notice img {
    margin-top: 3px;
    opacity: 0.78;
}

.activity-ai-notice p {
    max-width: 1000px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.activity-ai-notice strong {
    color: var(--ink);
}

.activity-progress-band {
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 88%, var(--teal) 4%);
    scroll-margin-top: 92px;
}

.activity-progress-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
}

.activity-progress-copy {
    min-width: 0;
}

.activity-progress-heading {
    display: flex;
    gap: 20px;
    align-items: baseline;
    justify-content: space-between;
    max-width: 760px;
}

.activity-progress-heading h2 {
    margin: 3px 0 10px;
    font-size: 1.35rem;
}

.activity-progress-heading strong {
    color: var(--teal-deep);
    font-size: 1rem;
}

.activity-progress-copy progress {
    display: block;
    width: min(760px, 100%);
    height: 10px;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: var(--mist);
    accent-color: var(--teal);
}

.activity-progress-copy progress::-webkit-progress-bar {
    border-radius: 5px;
    background: var(--mist);
}

.activity-progress-copy progress::-webkit-progress-value {
    border-radius: 5px;
    background: linear-gradient(90deg, var(--teal), var(--mint));
}

.activity-progress-copy progress::-moz-progress-bar {
    border-radius: 5px;
    background: linear-gradient(90deg, var(--teal), var(--mint));
}

.activity-progress-copy > p:last-of-type {
    margin: 9px 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.activity-progress-copy > p:last-of-type a {
    color: var(--teal-deep);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.activity-progress-actions {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.activity-progress-actions > span {
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
}

.activity-essentials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.activity-essentials > section {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 0 25px;
    border-left: 1px solid var(--line);
}

.activity-essentials > section:first-child {
    padding-left: 0;
    border-left: 0;
}

.activity-essentials > section:last-child {
    padding-right: 0;
}

.activity-essentials img {
    margin-top: 2px;
    opacity: 0.78;
}

.activity-essentials h3,
.activity-project-lists h3 {
    margin: 0 0 8px;
    font-size: 0.94rem;
}

.activity-essentials ul,
.activity-project-lists :is(ul, ol) {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.activity-essentials p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

.activity-project-section {
    border-bottom: 1px solid var(--line);
}

.activity-project-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: 64px;
    align-items: start;
}

.activity-project-intro h2 {
    margin: 6px 0 12px;
}

.activity-project-intro > p:last-child {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.65;
}

.activity-project-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 2px solid var(--teal);
}

.activity-project-lists > section {
    min-width: 0;
    padding: 20px 24px 4px 0;
}

.activity-project-lists > section + section {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--line);
}

.activity-chapters-section {
    background: var(--paper);
}

.activity-chapter {
    scroll-margin-top: 92px;
}

.activity-chapter-details {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 5%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.activity-chapter-details[open] {
    border-color: color-mix(in srgb, var(--teal) 46%, var(--line));
    box-shadow: 0 15px 32px color-mix(in srgb, var(--ink) 8%, transparent);
}

.activity-chapter-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.activity-chapter-summary::-webkit-details-marker {
    display: none;
}

.activity-chapter-summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
    outline-offset: -3px;
}

.activity-chapter-summary > div:first-child {
    min-width: 0;
}

.activity-chapter-summary > div:first-child > span {
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.activity-chapter-summary h3 {
    margin: 3px 0 7px;
    font-size: 1.16rem;
    line-height: 1.35;
}

.activity-chapter-summary p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 850px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-chapter-details[open] .activity-chapter-summary p {
    display: block;
}

.activity-chapter-summary-meta {
    display: grid;
    grid-template-columns: auto auto 22px;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

.activity-chapter-summary-meta > span,
.activity-chapter-summary-meta > strong {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
}

.activity-chapter.is-complete .activity-chapter-summary-meta > strong {
    border-color: color-mix(in srgb, var(--mint) 60%, var(--line));
    color: #17643f;
    background: color-mix(in srgb, var(--mint) 16%, var(--surface));
}

.activity-chapter-summary-meta i {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px 4px 3px;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
    transition: transform 160ms ease, margin 160ms ease;
}

.activity-chapter-details[open] .activity-chapter-summary-meta i {
    margin-top: 5px;
    margin-bottom: 0;
    transform: rotate(225deg);
}

.activity-chapter.is-complete .activity-chapter-number {
    border-color: #49aa78;
    color: #155d3a;
    background: color-mix(in srgb, var(--mint) 22%, var(--surface));
}

.activity-chapter-body {
    padding: 0 22px 22px;
    border-top: 1px solid var(--line);
}

.activity-hangout-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: 38px;
    padding: 25px 0;
}

.activity-chapter-body h4 {
    margin: 0;
    font-size: 0.95rem;
}

.activity-objective-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: activity-objective;
}

.activity-objective-list li {
    position: relative;
    padding-left: 25px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    counter-increment: activity-objective;
}

.activity-objective-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: var(--teal-deep);
    background: var(--teal-soft);
    content: counter(activity-objective);
    font-size: 0.64rem;
    font-weight: 950;
}

.activity-key-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.activity-key-terms li {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.73rem;
    font-weight: 800;
}

.activity-hangout-sections {
    display: grid;
    gap: 0;
    padding: 4px 0 22px;
    border-top: 1px solid var(--line);
}

.activity-hangout-sections > section {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.activity-hangout-sections > section > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
    border-radius: 6px;
    color: var(--teal-deep);
    background: var(--teal-soft);
    font-size: 0.73rem;
    font-weight: 950;
}

.activity-hangout-sections h4 {
    margin-bottom: 5px;
}

.activity-hangout-sections p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.6;
}

.activity-rich-content {
    margin: 0 -22px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 58%, var(--surface));
}

.activity-rich-block {
    margin: 0;
    padding: 22px;
}

.activity-rich-block + .activity-rich-block {
    border-top: 1px solid color-mix(in srgb, var(--teal) 27%, var(--line));
}

.activity-rich-heading {
    display: flex;
    gap: 18px;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 15px;
}

.activity-rich-heading > div {
    min-width: 0;
}

.activity-rich-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--teal-deep);
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.activity-rich-heading h4 {
    font-size: 1rem;
    line-height: 1.35;
}

.activity-rich-heading > button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-rich-heading > button:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.activity-rich-heading > button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 35%, transparent);
    outline-offset: 2px;
}

.activity-rich-media {
    position: relative;
    overflow-x: auto;
    width: 100%;
    border-top: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line));
    background: var(--surface);
}

.activity-concept-map svg {
    display: block;
    min-width: 760px;
    width: 100%;
    height: auto;
}

.activity-concept-node rect {
    fill: var(--surface-soft);
    stroke: color-mix(in srgb, var(--teal) 55%, var(--line));
    stroke-width: 1.5;
    transition: fill 150ms ease, stroke 150ms ease, stroke-width 150ms ease;
}

.activity-concept-node {
    cursor: pointer;
    outline: none;
}

.activity-concept-node circle {
    fill: var(--teal-deep);
    transition: fill 150ms ease;
}

.activity-concept-node:focus rect {
    stroke: var(--violet);
    stroke-width: 4;
}

.activity-concept-node.is-past rect {
    fill: color-mix(in srgb, var(--teal-soft) 70%, var(--surface));
}

.activity-concept-node.is-active rect {
    fill: color-mix(in srgb, var(--amber-soft) 76%, var(--surface));
    stroke: var(--amber-ink);
    stroke-width: 2.5;
}

.activity-concept-node.is-active circle {
    fill: var(--amber-ink);
}

.activity-concept-number,
.activity-concept-title {
    letter-spacing: 0;
    text-anchor: middle;
}

.activity-concept-number {
    fill: var(--control-contrast);
    font-size: 12px;
    font-weight: 900;
}

.activity-concept-title {
    fill: var(--ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 850;
}

.activity-concept-connector {
    stroke: color-mix(in srgb, var(--teal) 68%, var(--ink-soft));
    stroke-width: 2;
    transition: stroke 150ms ease, stroke-width 150ms ease;
}

.activity-concept-connector.is-active {
    stroke: var(--amber-ink);
    stroke-width: 3;
}

.activity-concept-arrowhead {
    fill: color-mix(in srgb, var(--teal) 68%, var(--ink-soft));
}

.activity-rich-block figcaption > p {
    max-width: 900px;
    margin: 13px 0 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

.activity-rich-concept figcaption ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
    list-style: none;
}

.activity-rich-concept figcaption button {
    display: grid;
    width: 100%;
    min-height: 100%;
    gap: 2px;
    padding: 9px 11px;
    border: 0;
    border-left: 3px solid var(--line);
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.activity-rich-concept figcaption button:hover {
    border-left-color: var(--teal);
    background: color-mix(in srgb, var(--teal-soft) 48%, transparent);
}

.activity-rich-concept figcaption button.is-active {
    border-left-color: var(--amber-ink);
    color: var(--ink);
    background: color-mix(in srgb, var(--amber-soft) 58%, transparent);
}

.activity-rich-concept figcaption button:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: -2px;
}

.activity-rich-concept figcaption strong {
    color: var(--ink);
}

.activity-mermaid {
    display: grid;
    min-height: 210px;
    padding: 18px;
    place-items: center;
}

.activity-mermaid svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.activity-mermaid pre {
    width: 100%;
    margin: 0;
    color: var(--ink-soft);
    background: transparent;
    font: 0.76rem/1.6 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
}

.activity-mermaid[data-rich-state="loading"]::after {
    position: absolute;
    right: 14px;
    bottom: 10px;
    color: var(--ink-soft);
    content: "Drawing flowchart...";
    font-size: 0.68rem;
    font-weight: 800;
}

.activity-rich-flow .node {
    transition: opacity 150ms ease;
}

.activity-rich-flow .node.is-activity-past {
    opacity: 0.72;
}

.activity-rich-flow .node.is-activity-active rect,
.activity-rich-flow .node.is-activity-active polygon,
.activity-rich-flow .node.is-activity-active path {
    fill: color-mix(in srgb, var(--amber-soft) 80%, var(--surface)) !important;
    stroke: var(--amber-ink) !important;
    stroke-width: 3px !important;
}

.activity-rich-flow .edgePath.is-activity-past path {
    stroke: var(--amber-ink) !important;
    stroke-width: 2.5px !important;
}

.activity-flow-controller {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto minmax(190px, auto);
    gap: 9px;
    align-items: center;
    margin-top: 14px;
    padding: 10px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
}

.activity-flow-controller button,
.activity-code-trace-controls button {
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-flow-controller button:disabled,
.activity-code-trace-controls button:disabled {
    opacity: 0.42;
    cursor: default;
}

.activity-flow-controller input,
.activity-code-trace-controls input,
.activity-math-explorer-controls input {
    width: 100%;
    accent-color: var(--amber-ink);
}

.activity-flow-controller output {
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 850;
    text-align: right;
}

.activity-flow-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 12px 0 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
    list-style: none;
    counter-reset: activity-flow-step;
}

.activity-flow-steps li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    counter-increment: activity-flow-step;
}

.activity-flow-steps li::before {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--teal-deep);
    background: var(--surface);
    content: counter(activity-flow-step);
    font-size: 0.65rem;
    font-weight: 950;
}

.activity-flow-steps button {
    padding: 4px 0;
    border: 0;
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.activity-flow-steps button.is-past {
    color: var(--teal-deep);
}

.activity-flow-steps button.is-active {
    color: var(--amber-ink);
    font-weight: 900;
}

.activity-flow-steps button:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

.activity-rich-math {
    background: color-mix(in srgb, var(--violet-soft) 48%, transparent);
}

.activity-rich-math .activity-rich-heading span {
    color: var(--violet-ink);
}

.activity-math-formula {
    overflow-x: auto;
    min-height: 92px;
    padding: 25px 18px;
    border-top: 1px solid color-mix(in srgb, var(--violet) 38%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--violet) 38%, var(--line));
    color: var(--ink);
    background: var(--surface);
    font: 600 1.15rem/1.5 Georgia, serif;
    text-align: center;
}

.activity-math-formula .katex-display {
    margin: 0;
}

.activity-math-formula.is-inspecting {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet-soft) 50%, var(--surface));
}

.activity-math-explorer {
    display: grid;
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
    margin-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--violet) 32%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--violet) 32%, var(--line));
    background: var(--surface);
}

.activity-math-explorer-controls {
    display: grid;
    gap: 13px;
    align-content: center;
    padding: 18px;
    border-right: 1px solid color-mix(in srgb, var(--violet) 25%, var(--line));
    background: color-mix(in srgb, var(--violet-soft) 36%, var(--surface));
}

.activity-math-explorer-controls label {
    display: grid;
    grid-template-columns: minmax(70px, auto) minmax(80px, 1fr) 42px;
    gap: 10px;
    align-items: center;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.activity-math-explorer-controls output {
    color: var(--violet-ink);
    font-family: Consolas, "Courier New", monospace;
    font-weight: 900;
    text-align: right;
}

.activity-math-explorer-stage {
    overflow-x: auto;
    min-width: 0;
    padding: 14px;
}

.activity-math-explorer-stage svg {
    display: block;
    min-width: 470px;
    width: 100%;
    height: auto;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 12px;
}

.activity-math-live-state {
    display: flex;
    gap: 10px 20px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 470px;
    padding: 2px 4px 9px;
}

.activity-math-live-state strong {
    color: var(--violet-ink);
    font: 800 0.9rem/1.4 Consolas, "Courier New", monospace;
}

.activity-math-live-state span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-align: right;
}

.math-grid-line {
    stroke: color-mix(in srgb, var(--line) 72%, transparent);
    stroke-width: 1;
}

.math-axis {
    stroke: var(--ink-soft);
    stroke-width: 1.5;
}

.math-live-curve {
    fill: none;
    stroke: var(--violet);
    stroke-width: 3;
}

.math-data-bar {
    fill: color-mix(in srgb, var(--teal) 72%, var(--surface));
    stroke: var(--teal-deep);
}

.math-mean-line {
    stroke: var(--amber-ink);
    stroke-width: 3;
    stroke-dasharray: 7 5;
}

.math-mean-label {
    fill: var(--amber-ink);
    font-weight: 900;
}

.math-circuit-wire {
    fill: none;
    stroke: var(--violet);
    stroke-width: 4;
}

.math-battery {
    fill: color-mix(in srgb, var(--amber-soft) 76%, var(--surface));
    stroke: var(--amber-ink);
    stroke-width: 2;
}

.math-current-line {
    stroke: var(--teal);
    stroke-width: 7;
    stroke-linecap: round;
}

.activity-math-variables {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.activity-math-variables button {
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line));
    border-radius: 5px;
    color: var(--violet-ink);
    background: color-mix(in srgb, var(--violet-soft) 66%, var(--surface));
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.activity-math-variables button[aria-pressed="true"] {
    border-color: var(--violet);
    background: color-mix(in srgb, var(--violet-soft) 88%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--violet);
}

.activity-rich-code {
    background: color-mix(in srgb, var(--amber-soft) 43%, transparent);
}

.activity-rich-code .activity-rich-heading span {
    color: var(--amber-ink);
}

.activity-code-shell {
    overflow: hidden;
    border: 1px solid #26383c;
    border-radius: 7px;
    color: #dce9e8;
    background: #111c1f;
}

.activity-code-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid #26383c;
    color: #9ab7b4;
    background: #172529;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.activity-code-toolbar strong {
    color: #dce9e8;
    font-size: inherit;
}

.activity-code-toolbar span {
    color: #7f9b98;
    font-weight: 750;
}

.activity-code-view {
    position: relative;
    display: grid;
    overflow-x: auto;
    grid-template-columns: auto minmax(max-content, 1fr);
    scrollbar-color: #536f6c #111c1f;
    scrollbar-width: thin;
}

.activity-code-lines {
    position: sticky;
    left: 0;
    z-index: 3;
    display: block;
    padding: 16px 10px 16px 12px;
    border-right: 1px solid #26383c;
    color: #66817f;
    background: #142225;
    font: 0.72rem/1.878 Consolas, "Courier New", monospace;
    text-align: right;
    user-select: none;
}

.activity-code-lines i {
    display: block;
    min-width: 1.4em;
    height: 1.353rem;
    font-style: normal;
}

.activity-code-lines i.is-past {
    color: #86a8a4;
}

.activity-code-lines i.is-active {
    color: #ffd782;
    font-weight: 950;
}

.activity-code-active-line {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: 1.353rem;
    border-top: 1px solid rgba(255, 204, 103, 0.2);
    border-bottom: 1px solid rgba(255, 204, 103, 0.2);
    background: rgba(255, 204, 103, 0.09);
    pointer-events: none;
    transition: transform 140ms ease;
}

.activity-code-shell pre {
    position: relative;
    z-index: 1;
    overflow: visible;
    min-width: max-content;
    margin: 0;
    padding: 16px;
}

.activity-code-shell code {
    display: block;
    color: inherit;
    background: transparent;
    font: 0.82rem/1.65 Consolas, "Courier New", monospace;
    tab-size: 4;
}

.activity-code-shell code::selection,
.activity-code-shell code *::selection {
    color: #ffffff;
    background: #315b63;
}

.activity-code-shell .hljs-keyword,
.activity-code-shell .hljs-selector-tag,
.activity-code-shell .hljs-literal {
    color: #f2a96b;
}

.activity-code-shell .hljs-title,
.activity-code-shell .hljs-title.function_,
.activity-code-shell .hljs-function {
    color: #78d8c9;
}

.activity-code-shell .hljs-string,
.activity-code-shell .hljs-attr,
.activity-code-shell .hljs-addition {
    color: #b6dd7b;
}

.activity-code-shell .hljs-number,
.activity-code-shell .hljs-built_in,
.activity-code-shell .hljs-type,
.activity-code-shell .hljs-symbol {
    color: #c4a7f2;
}

.activity-code-shell .hljs-variable,
.activity-code-shell .hljs-params,
.activity-code-shell .hljs-property,
.activity-code-shell .hljs-attribute {
    color: #d6e7e5;
}

.activity-code-shell .hljs-tag,
.activity-code-shell .hljs-name,
.activity-code-shell .hljs-selector-class,
.activity-code-shell .hljs-selector-id {
    color: #77c8ea;
}

.activity-code-shell .hljs-meta,
.activity-code-shell .hljs-doctag,
.activity-code-shell .hljs-regexp {
    color: #f3c76f;
}

.activity-code-shell .hljs-deletion {
    color: #f08f8f;
}

.activity-code-shell .hljs-comment {
    color: #78918f;
    font-style: italic;
}

.activity-code-trace {
    display: grid;
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
    border: 1px solid #26383c;
    border-top: 0;
    color: #dce9e8;
    background: #142225;
}

.activity-code-trace-controls {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border-right: 1px solid #26383c;
}

.activity-code-trace-controls button {
    border-color: #365053;
    color: #dce9e8;
    background: #1d3034;
}

.activity-code-trace-controls output {
    min-width: 38px;
    color: #ffd782;
    font: 800 0.7rem/1 Consolas, "Courier New", monospace;
    text-align: right;
}

.activity-code-trace-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-content: center;
    min-height: 92px;
    padding: 12px 14px;
}

.activity-code-trace-state > span {
    color: #78d8c9;
    font-size: 0.67rem;
    font-weight: 950;
    text-transform: uppercase;
}

.activity-code-trace-state code {
    overflow: hidden;
    color: #ffd782;
    font: 0.75rem/1.45 Consolas, "Courier New", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-code-trace-state p {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: #a9bfbd;
    font-size: 0.74rem;
    line-height: 1.5;
}

.activity-rich-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(8, 24, 27, 0.28);
}

.activity-rich-dialog::backdrop {
    background: rgba(4, 15, 18, 0.7);
}

.activity-rich-dialog-shell {
    display: grid;
    max-height: calc(100vh - 34px);
    grid-template-rows: auto minmax(0, 1fr);
}

.activity-rich-dialog-shell > header {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

.activity-rich-dialog-shell > header strong {
    font-size: 0.9rem;
}

.activity-rich-dialog-shell > header button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    place-items: center;
    background: var(--surface-soft);
    cursor: pointer;
}

.activity-rich-dialog .activity-rich-media {
    overflow: auto;
    min-height: min(560px, calc(100vh - 105px));
    border: 0;
}

.activity-rich-dialog .activity-concept-map svg {
    min-width: 900px;
}

html[data-theme-tone="dark"] .activity-concept-number {
    fill: #102124;
}

html[data-theme-tone="dark"] .activity-math-variables button {
    color: #d6c5f2;
}

.activity-practice {
    margin: 0 -22px;
    padding: 23px 22px;
    border-top: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
    background: var(--amber-soft);
}

.activity-practice > header {
    display: flex;
    gap: 18px;
    align-items: start;
    justify-content: space-between;
}

.activity-practice > header span,
.activity-checkpoint-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--amber-ink);
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.activity-practice > header button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--amber) 58%, var(--line));
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-practice > p {
    max-width: 900px;
    margin: 13px 0;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.6;
}

.activity-practice > ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 30px;
    margin: 0;
    padding-left: 21px;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.activity-practice-result,
.activity-success-criteria {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line));
}

.activity-practice-result > strong,
.activity-success-criteria > strong {
    color: var(--amber-ink);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.activity-practice-result p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.activity-success-criteria ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    list-style-position: inside;
}

.activity-checkpoint {
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
}

.activity-checkpoint-heading {
    display: flex;
    gap: 20px;
    align-items: start;
    justify-content: space-between;
}

.activity-checkpoint-heading span {
    color: var(--violet-ink);
}

.activity-checkpoint-heading > strong {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 5px;
    color: var(--violet-ink);
    background: var(--violet-soft);
    font-size: 0.7rem;
}

.activity-checkpoint fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    margin: 17px 0 0;
    padding: 0;
    border: 0;
}

.activity-checkpoint label {
    display: block;
    border-top: 1px solid var(--line);
    cursor: pointer;
}

.activity-checkpoint label:nth-child(-n + 2) {
    border-top: 0;
}

.activity-checkpoint label > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.activity-checkpoint label > span {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 9px 8px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.activity-checkpoint label b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 0.72rem;
}

.activity-checkpoint input:checked + span {
    color: var(--ink);
    background: var(--violet-soft);
}

.activity-checkpoint input:checked + span b {
    border-color: var(--violet);
    color: var(--control-contrast);
    background: var(--violet);
}

.activity-checkpoint input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--violet) 35%, transparent);
    outline-offset: -3px;
}

.activity-checkpoint-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
}

.activity-checkpoint-actions > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.5;
}

.activity-checkpoint-actions > p.is-correct strong {
    color: #1a7247;
}

.activity-checkpoint-actions > p.is-incorrect strong {
    color: var(--danger-ink);
}

.activity-notes {
    padding: 23px 0;
    border-bottom: 1px solid var(--line);
}

.activity-notes > div {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.activity-notes label {
    font-size: 0.9rem;
    font-weight: 900;
}

.activity-notes > div > span {
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 900;
}

.activity-notes > div > span.is-saving {
    color: var(--amber-ink);
}

.activity-notes > div > span.is-error {
    color: var(--danger-ink);
}

.activity-notes textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
}

.activity-notes > p {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.activity-chapter-footer {
    display: flex;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
}

.activity-chapter-footer > div:first-child {
    display: grid;
    max-width: 620px;
}

.activity-chapter-footer > div:first-child strong {
    font-size: 0.86rem;
}

.activity-chapter-footer > div:first-child span {
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.45;
}

.activity-chapter-footer > div:last-child {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.activity-chapter-footer .activity-chapter-ask {
    min-height: 42px;
    margin: 0;
    padding: 8px 11px;
}

.activity-complete-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--mint) 62%, var(--line));
    color: #155d3a;
    background: color-mix(in srgb, var(--mint) 19%, var(--surface));
}

html[data-theme-tone="dark"] .activity-chapter.is-complete .activity-chapter-summary-meta > strong,
html[data-theme-tone="dark"] .activity-chapter.is-complete .activity-chapter-number,
html[data-theme-tone="dark"] .activity-complete-button[aria-pressed="true"] {
    color: #9be8bd;
}

html[data-theme-tone="dark"] .activity-checkpoint-actions > p.is-correct strong {
    color: #8fe3b1;
}

@media (max-width: 1040px) {
    .activity-progress-shell {
        gap: 26px;
    }

    .activity-essentials > section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .activity-project-layout {
        gap: 38px;
    }

    .activity-chapter-footer {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 820px) {
    .activity-progress-shell,
    .activity-project-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-progress-actions {
        width: min(300px, 100%);
    }

    .activity-essentials {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .activity-essentials > section,
    .activity-essentials > section:first-child,
    .activity-essentials > section:last-child {
        padding: 18px 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .activity-essentials > section:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .activity-hangout-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .activity-chapter-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .activity-chapter-summary-meta {
        grid-template-columns: auto auto 22px;
        justify-content: start;
    }

    .activity-practice > ol,
    .activity-checkpoint fieldset {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-rich-concept figcaption ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-flow-controller {
        grid-template-columns: auto minmax(120px, 1fr) auto;
    }

    .activity-flow-controller output {
        grid-column: 1 / -1;
        text-align: left;
    }

    .activity-math-explorer,
    .activity-code-trace {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-math-explorer-controls,
    .activity-code-trace-controls {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--violet) 25%, var(--line));
    }

    .activity-code-trace-controls {
        border-bottom-color: #26383c;
    }

    .activity-checkpoint label:nth-child(2) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 620px) {
    .activity-progress-band {
        padding: 24px 0;
    }

    .activity-progress-heading {
        display: grid;
        gap: 0;
    }

    .activity-progress-heading strong {
        margin-bottom: 8px;
    }

    .activity-project-lists {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-project-lists > section,
    .activity-project-lists > section + section {
        padding: 18px 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .activity-project-lists > section:first-child {
        border-top: 0;
    }

    .activity-chapter-summary,
    .activity-chapter-body {
        padding-right: 14px;
        padding-left: 14px;
    }

    .activity-objective-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-practice {
        margin-right: -14px;
        margin-left: -14px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .activity-rich-content {
        margin-right: -14px;
        margin-left: -14px;
    }

    .activity-rich-block {
        padding: 18px 14px;
    }

    .activity-rich-heading h4 {
        font-size: 0.94rem;
    }

    .activity-mermaid {
        min-height: 190px;
        padding: 12px;
    }

    .activity-flow-controller {
        grid-template-columns: auto minmax(70px, 1fr) auto;
        padding: 9px 7px;
    }

    .activity-flow-controller button,
    .activity-code-trace-controls button {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 0.68rem;
    }

    .activity-math-explorer-controls label {
        grid-template-columns: minmax(68px, auto) minmax(70px, 1fr) 36px;
        gap: 7px;
    }

    .activity-math-live-state {
        align-items: start;
        flex-direction: column;
    }

    .activity-math-live-state span {
        text-align: left;
    }

    .activity-code-trace-controls {
        grid-template-columns: auto minmax(70px, 1fr) auto;
    }

    .activity-code-trace-controls output {
        grid-column: 1 / -1;
        text-align: left;
    }

    .activity-code-trace-state {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-code-trace-state code,
    .activity-code-trace-state p {
        grid-column: 1;
    }

    .activity-flow-steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-practice-result,
    .activity-success-criteria {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .activity-checkpoint-actions,
    .activity-chapter-footer > div:last-child {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .activity-checkpoint-actions .button,
    .activity-chapter-footer > div:last-child .button,
    .activity-chapter-footer .activity-chapter-ask {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .activity-chapter {
        grid-template-columns: minmax(0, 1fr);
    }

    .activity-chapter-number {
        display: none;
    }

    .activity-chapter-summary-meta {
        grid-template-columns: auto auto 20px;
        gap: 5px;
    }

    .activity-chapter-summary-meta > span,
    .activity-chapter-summary-meta > strong {
        padding: 4px 6px;
        font-size: 0.64rem;
    }
}

.article-grid .guide-card {
    padding: 0;
    overflow: hidden;
}

.guide-card-image {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.guide-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.article-card:hover .guide-card-image img {
    transform: scale(1.02);
}

.guide-card-body {
    display: flex;
    min-height: 250px;
    padding: 22px;
    flex-direction: column;
}

.guide-card-body > span {
    color: var(--teal-deep);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.guide-card-body .text-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 18px;
}

.guide-cover {
    width: min(1080px, calc(100% - 48px));
    aspect-ratio: 3 / 2;
    margin: -34px auto 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    box-shadow: var(--shadow);
}

.guide-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-article-hero .section-inner {
    max-width: 900px;
}

.guide-article-hero h1 {
    max-width: 820px;
}

.guide-article-hero > .section-inner > p:not(.eyebrow) {
    max-width: 760px;
}

.guide-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-article-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 820px);
    align-items: start;
    justify-content: center;
    gap: clamp(34px, 5vw, 72px);
}

.guide-toc {
    position: sticky;
    top: 104px;
    padding: 4px 0 4px 18px;
    border-left: 2px solid color-mix(in srgb, var(--teal) 52%, var(--line));
}

.guide-toc > strong,
.guide-toc-mobile summary {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.guide-toc nav,
.guide-toc-mobile nav {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.guide-toc a,
.guide-toc-mobile a {
    color: var(--ink-soft);
    font-size: 0.83rem;
    font-weight: 750;
    line-height: 1.35;
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
}

.guide-toc a:hover,
.guide-toc-mobile a:hover {
    color: var(--teal-deep);
    transform: translateX(2px);
}

.guide-toc-mobile {
    display: none;
}

.guide-prose {
    min-width: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.guide-prose h2 {
    scroll-margin-top: 116px;
    margin: 48px 0 12px;
    padding-top: 4px;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    line-height: 1.18;
}

.guide-prose h2:first-of-type {
    margin-top: 34px;
}

.guide-prose h3 {
    margin: 30px 0 8px;
    color: var(--ink);
    font-size: 1.18rem;
    line-height: 1.3;
}

.guide-prose p {
    margin: 16px 0;
}

.guide-prose .guide-lead {
    margin: 0 0 24px;
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 680;
    line-height: 1.65;
}

.guide-prose ul:not(.guide-checklist) {
    display: grid;
    gap: 11px;
    margin: 20px 0 24px;
    padding-left: 22px;
}

.guide-prose ul:not(.guide-checklist) li + li {
    margin-top: 0;
}

.guide-prose li strong {
    margin-right: 4px;
    color: var(--ink);
}

.guide-callout {
    margin: 26px 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--teal);
    border-radius: 6px;
    background: var(--surface-soft);
}

.guide-callout strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 0.92rem;
}

.guide-callout p {
    margin: 0;
    line-height: 1.65;
}

.guide-callout.is-tip {
    border-left-color: var(--mint);
    background: color-mix(in srgb, var(--teal-soft) 58%, var(--surface));
}

.guide-callout.is-example {
    border-left-color: var(--violet);
    background: color-mix(in srgb, var(--violet-soft) 58%, var(--surface));
}

.guide-callout.is-caution {
    border-left-color: var(--coral);
    background: color-mix(in srgb, var(--danger-soft) 58%, var(--surface));
}

.guide-figure {
    margin: 30px 0 34px;
}

.guide-figure-link {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(23, 52, 58, 0.1);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.guide-figure-link:hover {
    border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
    box-shadow: 0 18px 40px rgba(23, 52, 58, 0.15);
    transform: translateY(-2px);
}

.guide-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 27 / 17;
    object-fit: cover;
}

.guide-figure figcaption {
    margin-top: 10px;
    padding: 0 4px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.guide-table-wrap {
    max-width: 100%;
    margin: 24px 0 30px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.guide-table-wrap:focus-visible {
    outline: 3px solid var(--control-focus-ring);
    outline-offset: 3px;
}

.guide-table-wrap table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.guide-table-wrap caption {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 950;
    text-align: left;
    text-transform: uppercase;
}

.guide-table-wrap th,
.guide-table-wrap td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.guide-table-wrap thead th {
    color: var(--ink);
    background: var(--surface-muted);
    font-size: 0.77rem;
    font-weight: 950;
    text-transform: uppercase;
}

.guide-table-wrap tbody th {
    width: 22%;
    color: var(--ink);
    font-weight: 900;
}

.guide-table-wrap tbody tr:last-child th,
.guide-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.guide-steps {
    display: grid;
    gap: 14px;
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
}

.guide-steps li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    counter-increment: guide-step;
}

.guide-steps li::before {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--teal) 55%, var(--line));
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-deep);
    content: counter(guide-step);
    font-size: 0.82rem;
    font-weight: 950;
}

.guide-steps strong {
    display: block;
    margin: 0;
}

.guide-steps p {
    margin: 2px 0 0;
}

.guide-checklist {
    display: grid;
    gap: 10px;
    margin: 22px 0 30px;
    padding: 0;
    list-style: none;
}

.guide-checklist li {
    position: relative;
    margin: 0;
    padding: 11px 14px 11px 44px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.guide-checklist li::before {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--teal) 68%, var(--line));
    border-radius: 5px;
    background: var(--surface);
    content: "";
}

.guide-checklist li::after {
    position: absolute;
    top: 15px;
    left: 17px;
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--teal-deep);
    border-bottom: 2px solid var(--teal-deep);
    content: "";
    transform: rotate(45deg);
}

.guide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 6px;
}

@media (max-width: 640px) {
    .guide-cover {
        width: calc(100% - 32px);
        margin-top: -24px;
    }

    .guide-article-meta {
        font-size: 0.72rem;
    }

    .guide-prose .guide-lead {
        font-size: 1.08rem;
    }

    .guide-callout {
        padding: 16px;
    }

    .guide-figure {
        margin-right: -4px;
        margin-left: -4px;
    }

    .guide-table-wrap {
        margin-right: -4px;
        margin-left: -4px;
    }

    .guide-actions {
        display: grid;
    }

    .guide-actions .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 960px) {
    .guide-article-layout {
        display: block;
        max-width: 820px;
    }

    .guide-toc {
        display: none;
    }

    .guide-toc-mobile {
        display: block;
        margin-bottom: 28px;
        padding: 15px 17px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
    }

    .guide-toc-mobile summary {
        cursor: pointer;
    }

    .guide-toc-mobile nav {
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }
}

/* ==================================================================== *
 * Learnable-course additions: live sims, playgrounds, comparisons,
 * glossary terms, and state-visible code traces.
 * ==================================================================== */

.activity-sim-intro,
.activity-compare-intro {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.55;
}

.activity-sim {
    display: grid;
    grid-template-columns: minmax(215px, 0.4fr) minmax(0, 1fr);
    margin-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    background: var(--surface);
}

.activity-sim-controls {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 16px;
    border-right: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 42%, var(--surface));
}

.activity-sim-control {
    display: grid;
    grid-template-columns: minmax(84px, auto) minmax(70px, 1fr) minmax(46px, auto);
    gap: 9px;
    align-items: center;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.activity-sim-control input {
    width: 100%;
    accent-color: var(--teal-deep);
}

.activity-sim-control output {
    color: var(--teal-ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.activity-sim-seg {
    display: grid;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.activity-sim-seg-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.activity-sim-seg-buttons button,
.activity-sim-check {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink-soft);
    background: var(--surface);
    font: inherit;
    font-size: 0.71rem;
    font-weight: 850;
    cursor: pointer;
}

.activity-sim-seg-buttons button[aria-pressed="true"],
.activity-sim-check[aria-pressed="true"] {
    border-color: var(--teal-deep);
    color: var(--teal-ink);
    background: var(--teal-soft-strong);
    box-shadow: inset 0 0 0 1px var(--teal-deep);
}

.activity-sim-seg-buttons button:focus-visible,
.activity-sim-check:focus-visible,
.activity-sim-action:focus-visible,
.activity-term-chip:focus-visible,
.activity-scrub:focus-visible {
    outline: 2px solid var(--teal-deep);
    outline-offset: 2px;
}

.activity-sim-action {
    justify-self: start;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid var(--teal-deep);
    border-radius: 6px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-sim-action:hover {
    background: var(--teal-soft-strong);
}

.activity-sim-stage {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 13px 14px 15px;
}

.activity-sim-readouts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
}

.activity-sim-readouts > div {
    display: grid;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
    border-radius: 6px;
    background: color-mix(in srgb, var(--teal-soft) 34%, var(--surface));
}

.activity-sim-readouts dt {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.activity-sim-readouts dd {
    margin: 0;
    color: var(--ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    font-weight: 900;
}

.activity-sim-canvas {
    overflow-x: auto;
    min-width: 0;
}

.activity-sim-canvas svg {
    display: block;
    min-width: 470px;
    width: 100%;
    height: auto;
    font-family: inherit;
    font-size: 12px;
}

.activity-sim-note {
    margin: 2px 0 0;
    padding: 7px 10px;
    border-left: 3px solid var(--amber-ink);
    border-radius: 0 6px 6px 0;
    color: var(--amber-ink);
    background: var(--amber-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.activity-sim-note[hidden] {
    display: none;
}

.activity-sim-prompts {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.activity-sim-prompts li {
    position: relative;
    padding: 0 0 0 22px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.activity-sim-prompts li::before {
    content: "\25B8";
    position: absolute;
    left: 4px;
    color: var(--teal-deep);
    font-weight: 900;
}

/* Shared sim SVG vocabulary */
.sim-grid { stroke: color-mix(in srgb, var(--line) 72%, transparent); stroke-width: 1; }
.sim-axis { stroke: var(--ink-soft); stroke-width: 1.5; }
.sim-curve { fill: none; stroke: var(--teal-deep); stroke-width: 3; }
.sim-curve-alt { fill: none; stroke: var(--violet); stroke-width: 3; }
.sim-curve-danger { fill: none; stroke: var(--coral); stroke-width: 3; }
.sim-marker { fill: none; stroke: var(--amber-ink); stroke-width: 2.4; stroke-dasharray: 7 5; }
.sim-review-mark { stroke: color-mix(in srgb, var(--teal) 45%, var(--line)); stroke-width: 1.6; stroke-dasharray: 3 4; }
.sim-dot { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 2; }
.sim-dot-good { fill: var(--mint); stroke: var(--teal-deep); stroke-width: 2; }
.sim-bar { fill: color-mix(in srgb, var(--teal) 68%, var(--surface)); stroke: var(--teal-deep); }
.sim-bar-alt { fill: color-mix(in srgb, var(--violet) 52%, var(--surface)); stroke: var(--violet-ink); }
.sim-bar-good { fill: color-mix(in srgb, var(--mint) 62%, var(--surface)); stroke: var(--teal-deep); }
.sim-bar-muted { fill: color-mix(in srgb, var(--line) 55%, var(--surface)); stroke: var(--ink-soft); }
.sim-bar-danger { fill: color-mix(in srgb, var(--coral) 55%, var(--surface)); stroke: var(--danger-ink); }
.sim-bar-text { fill: var(--ink); font-size: 11.5px; font-weight: 800; }
.sim-label { fill: var(--ink-soft); font-size: 11.5px; }
.sim-label-strong { fill: var(--ink); font-size: 12px; font-weight: 850; }
.sim-wire { stroke: var(--violet); stroke-width: 4; }
.sim-current { stroke: var(--teal); stroke-width: 7; stroke-linecap: round; }
.sim-sun { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 2; }
.sim-orbit { fill: none; stroke: color-mix(in srgb, var(--teal) 55%, var(--line)); stroke-width: 2; }
.sim-orbit-ref { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-dasharray: 5 5; }
.sim-planet { fill: var(--teal-deep); stroke: var(--surface); stroke-width: 2; }
.sim-beam { fill: color-mix(in srgb, var(--amber-soft-strong) 80%, var(--surface)); stroke: var(--amber-ink); stroke-width: 1.6; }
.sim-fulcrum { fill: var(--ink-soft); }
.sim-track { fill: color-mix(in srgb, var(--line) 42%, var(--surface)); }
.sim-band { fill: color-mix(in srgb, var(--teal) 30%, transparent); }
.sim-band-good { fill: color-mix(in srgb, var(--mint) 42%, transparent); }
.sim-band-warm { fill: color-mix(in srgb, var(--amber) 45%, transparent); }
.sim-band-danger { fill: color-mix(in srgb, var(--coral) 45%, transparent); }
.sim-needle { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.sim-frost-zone { fill: color-mix(in srgb, var(--violet-soft) 68%, transparent); }
.sim-grow-bar { fill: color-mix(in srgb, var(--mint) 55%, var(--surface)); stroke: var(--teal-deep); stroke-width: 1.6; }
.sim-plant { fill: color-mix(in srgb, var(--mint) 75%, var(--surface)); stroke: var(--teal-deep); stroke-width: 1.4; }
.sim-bed { fill: color-mix(in srgb, var(--amber-soft) 58%, var(--surface)); stroke: var(--amber-ink); stroke-width: 1.6; }
.sim-dough { fill: color-mix(in srgb, var(--amber-soft-strong) 85%, var(--surface)); stroke: var(--amber-ink); stroke-width: 2; }
.sim-map { fill: color-mix(in srgb, var(--teal-soft) 55%, var(--surface)); stroke: var(--teal-deep); stroke-width: 1.4; }
.sim-measure { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.sim-channel { fill: color-mix(in srgb, var(--teal-soft) 70%, var(--surface)); stroke: var(--teal-deep); stroke-width: 1.6; }
.sim-flow-arrow { stroke: var(--teal-deep); stroke-width: 3.4; stroke-linecap: round; }
.sim-flow-head { fill: var(--teal-deep); }
.sim-breath-circle { fill: color-mix(in srgb, var(--teal) 30%, var(--surface)); stroke: var(--teal-deep); stroke-width: 2.4; }
.sim-breath-label { fill: var(--ink); font-size: 14px; font-weight: 850; }

.sim-beat-cell { fill: color-mix(in srgb, var(--line) 45%, var(--surface)); stroke: var(--ink-soft); stroke-width: 0.8; }
.sim-beat-cell.is-bar { fill: color-mix(in srgb, var(--teal) 30%, var(--surface)); }
.sim-beat-cell.is-now { fill: var(--amber); stroke: var(--amber-ink); }

.sim-key { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.2; }
.sim-key.is-on { fill: color-mix(in srgb, var(--teal) 55%, var(--surface)); stroke: var(--teal-deep); }
.sim-key-black { fill: var(--action); stroke: var(--action); }
.sim-key-black.is-on { fill: var(--teal-deep); stroke: var(--teal-ink); }
.sim-key-label { fill: var(--teal-ink); font-size: 11px; font-weight: 900; }
.sim-key-black-label { fill: var(--white); font-size: 10px; font-weight: 900; }

/* HTML-stage sims */
.sim-contrast {
    display: grid;
    gap: 10px;
}

.sim-contrast-sample {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.sim-contrast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.sim-contrast-badges strong {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    color: var(--ink);
}

.sim-contrast-badges span {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.sim-contrast-badges .is-pass {
    color: var(--teal-ink);
    background: var(--teal-soft-strong);
    border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--line));
}

.sim-contrast-badges .is-fail {
    color: var(--danger-ink);
    background: var(--danger-soft-strong);
    border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--line));
}

.sim-logic {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.sim-logic-lamp {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    background: var(--surface-muted);
    font-size: 0.9rem;
}

.sim-logic-lamp.is-on {
    color: var(--teal-ink);
    border-color: var(--teal-deep);
    background: var(--teal-soft-strong);
}

.sim-logic-table {
    border-collapse: collapse;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
}

.sim-logic-table th,
.sim-logic-table td {
    padding: 6px 16px;
    border: 1px solid var(--line);
    text-align: center;
    color: var(--ink-soft);
}

.sim-logic-table thead th {
    background: var(--surface-muted);
    color: var(--ink);
}

.sim-logic-table tr.is-now td {
    background: var(--amber-soft-strong);
    color: var(--ink);
    font-weight: 900;
}

.sim-logic-reading {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.sim-blend {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.sim-blend-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sim-blend-tile {
    display: grid;
    gap: 2px;
    min-width: 64px;
    padding: 10px 12px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sim-blend-tile strong {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.1;
}

.sim-blend-tile em {
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sim-blend-tile.is-now {
    border-color: var(--amber-ink);
    background: var(--amber-soft-strong);
    transform: translateY(-4px) scale(1.06);
}

.sim-blend-tile.is-done {
    border-color: var(--teal-deep);
    background: var(--teal-soft-strong);
}

.sim-blend-word {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
}

/* Live code playground */
.activity-rich-live .activity-rich-heading > button,
.activity-rich-compare .activity-rich-heading > button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    width: auto;
    height: auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-rich-live .activity-rich-heading > button:hover,
.activity-rich-compare .activity-rich-heading > button:hover {
    border-color: var(--teal-deep);
    color: var(--teal-ink);
}

.activity-rich-compare .activity-rich-heading > button[aria-pressed="true"] {
    border-color: var(--teal-deep);
    color: var(--teal-ink);
    background: var(--teal-soft-strong);
}

.activity-live {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    margin-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    background: var(--surface);
}

.activity-live-editor {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    border-right: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
}

.activity-live-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.activity-live-toolbar strong {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.activity-live-toolbar span {
    flex: 1;
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.activity-live-toolbar button {
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
}

.activity-live-toolbar button[aria-pressed="true"] {
    border-color: var(--teal-deep);
    color: var(--teal-ink);
    background: var(--teal-soft-strong);
}

.activity-live-view {
    overflow: auto;
    max-height: 340px;
    user-select: none;
    -webkit-user-select: none;
}

.activity-live-view pre {
    margin: 0;
    padding: 14px 16px;
    font: 0.8rem/1.65 Consolas, "Courier New", monospace;
    color: var(--ink);
    white-space: pre;
}

.activity-live-view code {
    font: inherit;
    background: transparent;
    padding: 0;
}

.activity-live textarea {
    width: 100%;
    min-height: 240px;
    padding: 14px 16px;
    border: 0;
    resize: vertical;
    color: var(--ink);
    background: var(--surface);
    font: 0.8rem/1.65 Consolas, "Courier New", monospace;
}

.activity-live textarea:focus-visible {
    outline: 2px solid var(--teal-deep);
    outline-offset: -2px;
}

.activity-scrub {
    padding: 0 1px;
    border-bottom: 2px dashed var(--amber-ink);
    border-radius: 3px;
    color: var(--amber-ink);
    font-weight: 900;
    cursor: ew-resize;
    touch-action: none;
}

.activity-scrub:hover,
.activity-scrub.is-scrubbing {
    color: var(--ink);
    background: var(--amber-soft-strong);
    border-bottom-style: solid;
}

.activity-live-output {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}

.activity-live-output-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.activity-live-output-head [data-activity-live-status] {
    color: var(--teal-ink);
}

.activity-live-frame {
    min-height: 210px;
    background: var(--surface);
}

.activity-live-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    border: 0;
}

.activity-live-experiments {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: activity-live-experiment;
}

.activity-live-experiments li {
    position: relative;
    padding: 0 0 0 30px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
    counter-increment: activity-live-experiment;
}

.activity-live-experiments li::before {
    content: counter(activity-live-experiment);
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--teal-deep);
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.66rem;
    font-weight: 900;
}

/* Comparison table */
.activity-compare-scroll {
    overflow-x: auto;
    margin-top: 14px;
}

.activity-compare-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.5;
}

.activity-compare-table th,
.activity-compare-table td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    color: var(--ink-soft);
}

.activity-compare-table thead th {
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.activity-compare-table tbody th {
    width: 92px;
    color: var(--ink);
    font-weight: 850;
    background: color-mix(in srgb, var(--surface-muted) 60%, var(--surface));
}

.activity-rich-compare.is-highlighting td.activity-compare-weak {
    background: var(--danger-soft);
    color: color-mix(in srgb, var(--danger-ink) 80%, var(--ink-soft));
}

.activity-rich-compare.is-highlighting td.activity-compare-strong {
    background: var(--teal-soft);
    color: var(--teal-ink);
    font-weight: 700;
}

/* Key term glossary chips */
.activity-key-terms li:has(> .activity-term-chip) {
    padding: 0;
    border: 0;
    background: transparent;
}

.activity-term-chip {
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
    border-radius: 5px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font: inherit;
    font-size: 0.73rem;
    font-weight: 800;
    cursor: pointer;
}

.activity-term-chip:hover {
    background: var(--teal-soft-strong);
}

.activity-term-chip[aria-expanded="true"] {
    color: var(--white);
    background: var(--teal-deep);
    border-color: var(--teal-deep);
}

.activity-term-panel {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--teal-deep);
    border-radius: 0 6px 6px 0;
    color: var(--ink-soft);
    background: var(--teal-soft);
    font-size: 0.8rem;
    line-height: 1.55;
}

.activity-term-panel strong {
    color: var(--teal-ink);
}

/* Trace memory panel */
.activity-trace-memory {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--teal) 40%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--teal-soft) 30%, var(--surface));
}

.activity-trace-memory-title {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.activity-trace-memory dl {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
}

.activity-memory-cell {
    display: grid;
    gap: 1px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.activity-memory-cell dt {
    color: var(--ink-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.66rem;
    font-weight: 800;
}

.activity-memory-cell dd {
    margin: 0;
    color: var(--ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 900;
}

.activity-memory-cell.is-changed {
    border-color: var(--amber-ink);
    background: var(--amber-soft);
    animation: activity-memory-pulse 0.5s ease;
}

.activity-memory-cell.is-changed dd {
    color: var(--amber-ink);
}

@keyframes activity-memory-pulse {
    from { transform: scale(0.92); }
    to { transform: scale(1); }
}

.activity-trace-output {
    margin: 9px 0 0;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--code-ink);
    background: var(--action);
    font: 0.74rem/1.6 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
}

/* Stepper play buttons + controller layout with the extra column */
.activity-step-play {
    border-color: var(--teal-deep) !important;
    color: var(--teal-ink) !important;
    background: var(--teal-soft) !important;
}

.activity-step-play[aria-pressed="true"] {
    color: var(--white) !important;
    background: var(--teal-deep) !important;
}

.activity-flow-controller {
    grid-template-columns: auto auto minmax(110px, 1fr) auto minmax(150px, auto);
}

.activity-code-trace-controls {
    display: grid;
    grid-template-columns: auto auto minmax(110px, 1fr) auto auto;
    gap: 9px;
    align-items: center;
}

/* Responsive behavior */
@media (max-width: 860px) {
    .activity-sim,
    .activity-live {
        grid-template-columns: 1fr;
    }

    .activity-sim-controls {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    }

    .activity-live-editor {
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    }

    .activity-flow-controller {
        grid-template-columns: auto auto minmax(80px, 1fr) auto;
    }

    .activity-flow-controller output {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sim-blend-tile,
    .activity-memory-cell.is-changed {
        transition: none;
        animation: none;
    }
}

/* ==================================================================== *
 * Second-wave engines: practice rounds, spotting drills, writing lab,
 * and the new SVG vocabulary (color, framing, space, body, city).
 * ==================================================================== */

.sim-match-help {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.5;
}

.sim-match-terms,
.sim-match-defs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sim-match-terms {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}

.sim-match-term,
.sim-match-def {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 0.76rem;
    text-align: left;
    cursor: pointer;
}

.sim-match-term {
    font-weight: 900;
    color: var(--teal-ink);
    border-color: color-mix(in srgb, var(--teal) 40%, var(--line));
    background: var(--teal-soft);
}

.sim-match-term.is-picked {
    color: var(--white);
    background: var(--teal-deep);
    border-color: var(--teal-deep);
}

.sim-match-def {
    max-width: 100%;
    line-height: 1.45;
    color: var(--ink-soft);
}

.sim-match-term.is-done,
.sim-match-def.is-done {
    opacity: 0.5;
    border-style: dashed;
    cursor: default;
    text-decoration: line-through;
}

.sim-match-def.is-wrong,
.sim-spot-text.is-wrong {
    animation: sim-shake 0.35s ease;
    border-color: var(--danger-ink);
    background: var(--danger-soft);
}

@keyframes sim-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.sim-order-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sim-order-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.sim-order-row.is-right {
    border-color: var(--teal-deep);
    background: var(--teal-soft);
}

.sim-order-row.is-off {
    border-color: color-mix(in srgb, var(--coral) 55%, var(--line));
    background: var(--danger-soft);
}

.sim-order-pos {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--teal-deep);
    border-radius: 999px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.7rem;
    font-weight: 900;
}

.sim-order-text {
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1.45;
}

.sim-order-moves {
    display: flex;
    gap: 4px;
}

.sim-order-moves button {
    width: 30px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface-muted);
    font-size: 0.7rem;
    cursor: pointer;
}

.sim-order-moves button:disabled {
    opacity: 0.35;
    cursor: default;
}

.sim-order-moves button:hover:not(:disabled) {
    border-color: var(--teal-deep);
    color: var(--teal-ink);
}

.sim-spot-body {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    font-size: 0.85rem;
    line-height: 2;
    color: var(--ink);
}

.sim-spot-text {
    padding: 2px 1px;
    border-radius: 4px;
}

.sim-spot-flag {
    padding: 2px 5px;
    margin: 0 1px;
    border: 1px dashed transparent;
    border-radius: 5px;
    color: inherit;
    background: transparent;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.sim-spot-flag:hover {
    border-color: var(--line);
    background: var(--surface-muted);
}

.sim-spot-flag.is-found {
    border: 1px solid var(--amber-ink);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-weight: 700;
}

.sim-spot-flag em {
    display: block;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}

.sim-readability {
    display: grid;
    gap: 10px;
}

.sim-readability textarea {
    width: 100%;
    min-height: 120px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    resize: vertical;
    color: var(--ink);
    background: var(--surface);
    font: 0.85rem/1.6 inherit;
    font-family: inherit;
}

.sim-readability textarea:focus-visible {
    outline: 2px solid var(--teal-deep);
    outline-offset: -1px;
}

.sim-read-meter {
    height: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 42%, var(--surface));
    overflow: hidden;
}

.sim-read-fill {
    height: 100%;
    width: 50%;
    border-radius: 999px;
    background: var(--teal);
    transition: width 0.25s ease;
}

.sim-read-fill.is-low {
    background: var(--coral);
}

.sim-read-verdict {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Second-wave SVG vocabulary */
.sim-wheel-hub { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.sim-wheel-mark { fill: none; stroke: var(--ink); stroke-width: 3; }
.sim-swatch { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1; }
.sim-swatch-label { fill: var(--ink-soft); font-size: 10.5px; font-family: Consolas, "Courier New", monospace; }
.sim-frame { fill: color-mix(in srgb, var(--surface-muted) 70%, var(--surface)); stroke: var(--ink-soft); stroke-width: 1.6; }
.sim-horizon { stroke: var(--violet); stroke-width: 2.4; }
.sim-thirds { stroke: color-mix(in srgb, var(--teal) 42%, var(--line)); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sim-power { fill: var(--teal-deep); opacity: 0.75; }
.sim-subject { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 2.4; }
.sim-guide { stroke: color-mix(in srgb, var(--line) 80%, transparent); stroke-width: 1.2; }
.sim-guide-strong { stroke: var(--teal-deep); stroke-width: 1.4; stroke-dasharray: 6 4; }
.sim-guide-base { stroke: var(--ink-soft); stroke-width: 1.8; }
.sim-letter { fill: var(--ink); font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.sim-moon-dark { fill: color-mix(in srgb, var(--ink) 78%, var(--surface)); stroke: var(--ink-soft); stroke-width: 1; }
.sim-moon-lit { fill: #f3e9c8; stroke: color-mix(in srgb, var(--amber-ink) 45%, transparent); stroke-width: 1; }
.sim-moon-blurry { fill: #f3e9c8; opacity: 0.55; filter: blur(3px); }
.sim-star { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; }
.sim-trunk { fill: color-mix(in srgb, var(--amber-ink) 60%, var(--surface)); }
.sim-branch-good { stroke: var(--teal-deep); stroke-width: 9; stroke-linecap: round; }
.sim-branch-warn { stroke: var(--amber-ink); stroke-width: 9; stroke-linecap: round; }
.sim-branch-bad { stroke: var(--coral); stroke-width: 9; stroke-linecap: round; }
.sim-body { fill: color-mix(in srgb, var(--teal) 35%, var(--surface)); stroke: var(--teal-deep); stroke-width: 2; }
.sim-body-line { stroke: var(--ink-soft); stroke-width: 6; stroke-linecap: round; }
.sim-task-a { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 2; }
.sim-task-b { fill: color-mix(in srgb, var(--violet) 65%, var(--surface)); stroke: var(--violet-ink); stroke-width: 2; }
.sim-task-label { fill: var(--ink); font-size: 12px; font-weight: 900; }
.sim-shed { fill: color-mix(in srgb, var(--teal) 22%, transparent); stroke: var(--teal-deep); stroke-width: 2; }
.sim-wall { fill: color-mix(in srgb, var(--line) 60%, var(--surface)); stroke: var(--ink-soft); stroke-width: 1.2; }
.sim-roof { fill: color-mix(in srgb, var(--amber-soft-strong) 85%, var(--surface)); stroke: var(--amber-ink); stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
    .sim-match-def.is-wrong,
    .sim-spot-text.is-wrong {
        animation: none;
    }

    .sim-read-fill {
        transition: none;
    }
}

/* Chapter frontispiece art */
.activity-rich-art {
    margin: 18px 0 2px;
}

.activity-rich-art svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
}

/* ==================================================================== *
 * Free tools: hub and single-tool pages
 * ==================================================================== */

.tool-page,
.tool-hub {
    max-width: 1080px;
    margin: 0 auto;
    padding: 26px 20px 60px;
}

.tool-hero {
    max-width: 720px;
    padding: 12px 0 6px;
}

.tool-eyebrow {
    margin: 0 0 8px;
    color: var(--teal-ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tool-hero h1 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.15;
}

.tool-tagline {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.tool-page .activity-rich-content {
    margin-top: 6px;
}

.tool-body {
    max-width: 720px;
    margin-top: 26px;
}

.tool-body p {
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
}

.tool-facts {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 10px;
}

.tool-fact {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.tool-fact h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 0.95rem;
}

.tool-fact p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.6;
}

.tool-activity-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--teal) 36%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--teal-soft) 55%, var(--surface));
}

.tool-activity-cta h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.15rem;
}

.tool-activity-cta p {
    margin: 0;
    max-width: 560px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

.tool-activity-link {
    flex-shrink: 0;
    padding: 12px 22px;
    border-radius: 8px;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: none;
}

.tool-activity-link:hover {
    background: var(--action);
}

.tool-related {
    margin-top: 34px;
}

.tool-related h2,
.tool-group h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 1.05rem;
}

.tool-related ul,
.tool-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-related a,
.tool-card {
    display: grid;
    gap: 6px;
    height: 100%;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tool-related a:hover,
.tool-card:hover {
    border-color: var(--teal-deep);
    transform: translateY(-2px);
}

.tool-related strong,
.tool-card strong {
    color: var(--teal-ink);
    font-size: 0.9rem;
}

.tool-related span,
.tool-card span {
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.tool-group {
    margin-top: 34px;
}

@media (prefers-reduced-motion: reduce) {
    .tool-related a,
    .tool-card {
        transition: none;
    }
}

/* Chapter-map art: keep labels legible when the SVG scales down */
@media (max-width: 640px) {
    .activity-rich-art .art-eyebrow { font-size: 19px; }
    .activity-rich-art .art-title { font-size: 38px; }
    .activity-rich-art .art-outcome { font-size: 20px; }
    .activity-rich-art .art-term { font-size: 19px; }
}

.account-english-result {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--teal-soft);
}

.account-english-result > strong {
    display: grid;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: var(--control-contrast);
    background: var(--teal-deep);
    font-size: 1.8rem;
    place-items: center;
}

.account-english-result h3 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: 1.1rem;
}

.account-english-result p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
}

.account-english-result span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--teal-ink);
    font-size: 0.78rem;
    font-weight: 900;
}

.account-english-history {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.account-english-history a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface-soft);
    text-decoration: none;
}

.account-english-history a:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.account-english-history strong {
    color: var(--teal-deep);
}

.account-english-history span,
.account-english-history time {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.account-english-history time {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-english-empty {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.account-english-empty p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .account-english-history {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-english-empty {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .account-english-empty .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 440px) {
    .account-english-result {
        grid-template-columns: 1fr;
    }

    .account-english-history {
        grid-template-columns: 1fr;
    }
}

.english-test-code {
    margin: 20px 0 0;
}

.english-test-code .activity-code-toolbar {
    min-height: 38px;
}

.english-test-code .activity-code-view {
    display: block;
    min-height: 0;
}

.english-test-code .activity-code-view pre {
    min-height: 0;
    margin: 0;
}

.vibe-quiz-directory {
    min-height: 70vh;
    padding: 0 0 76px;
    background: color-mix(in srgb, var(--paper) 88%, var(--teal-soft));
}

.vibe-quiz-directory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr);
    align-items: end;
    gap: 44px;
    padding: 56px 0 36px;
    border-bottom: 1px solid var(--line);
}

.vibe-quiz-directory-hero h1 {
    max-width: 760px;
    margin: 6px 0 14px;
    color: var(--ink);
    font-size: 3.5rem;
    line-height: 1.05;
    letter-spacing: 0;
}

.vibe-quiz-directory-hero > div > p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.vibe-quiz-directory-hero dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vibe-quiz-directory-hero dl div {
    padding: 18px 10px;
    text-align: center;
}

.vibe-quiz-directory-hero dl div + div {
    border-left: 1px solid var(--line);
}

.vibe-quiz-directory-hero dt {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
}

.vibe-quiz-directory-hero dd {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vibe-quiz-directory-tools {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vibe-quiz-directory-tools > label {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
}

.vibe-quiz-directory-tools > label img {
    flex: 0 0 auto;
    opacity: 0.72;
}

.vibe-quiz-directory-tools input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.vibe-quiz-directory-tools > label:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 13%, transparent);
}

.vibe-quiz-filter-buttons {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
}

.vibe-quiz-filter-buttons button {
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    color: var(--ink-soft);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.vibe-quiz-filter-buttons button:hover,
.vibe-quiz-filter-buttons button.is-active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(23, 52, 58, 0.1);
}

.vibe-quiz-directory-tools > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

.vibe-quiz-directory-tools > p strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.vibe-quiz-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-top: 16px;
}

.vibe-quiz-directory-card {
    --test-accent: var(--teal);
    display: flex;
    min-width: 0;
    min-height: 370px;
    padding: 21px;
    border: 1px solid var(--line);
    border-top: 5px solid var(--test-accent);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(23, 52, 58, 0.07);
    flex-direction: column;
}

.vibe-quiz-directory-card[hidden] {
    display: none;
}

.vibe-quiz-directory-card.group-academic { --test-accent: var(--teal); }
.vibe-quiz-directory-card.group-practical { --test-accent: #3478a4; }
.vibe-quiz-directory-card.group-creative { --test-accent: #b45b82; }
.vibe-quiz-directory-card.group-support { --test-accent: #6d58a6; }
.vibe-quiz-directory-card.group-wellbeing { --test-accent: #2f8f68; }
.vibe-quiz-directory-card.is-math { --test-accent: var(--amber); }
.vibe-quiz-directory-card.is-programming { --test-accent: var(--violet); }
.vibe-quiz-directory-card.is-science { --test-accent: var(--coral); }
.vibe-quiz-directory-card.is-world-history { --test-accent: #9a6f42; }
.vibe-quiz-directory-card.is-geography { --test-accent: #2f8f68; }
.vibe-quiz-directory-card.is-business { --test-accent: #3478a4; }
.vibe-quiz-directory-card.is-digital-literacy { --test-accent: #6d58a6; }

.vibe-quiz-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.vibe-quiz-card-top > span {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: var(--ink);
    background: color-mix(in srgb, var(--test-accent) 18%, var(--surface));
    place-items: center;
}

.vibe-quiz-card-top > strong {
    color: var(--ink-soft);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.vibe-quiz-directory-card > .eyebrow {
    color: color-mix(in srgb, var(--test-accent) 78%, var(--ink));
}

.vibe-quiz-directory-card h2 {
    margin: 6px 0 10px;
    color: var(--ink);
    font-size: 1.28rem;
    line-height: 1.25;
}

.vibe-quiz-directory-card h2 a {
    color: inherit;
    text-decoration: none;
}

.vibe-quiz-directory-card h2 a:hover {
    color: var(--teal-deep);
}

.vibe-quiz-directory-card > p:not(.eyebrow) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.6;
}

.vibe-quiz-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0;
}

.vibe-quiz-card-meta span {
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--ink-soft);
    background: var(--surface-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.vibe-quiz-card-result {
    display: grid;
    gap: 3px;
    margin: 0 0 14px;
    padding: 10px 11px;
    border-left: 3px solid var(--test-accent);
    background: color-mix(in srgb, var(--test-accent) 9%, var(--surface-soft));
}

.vibe-quiz-card-result strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.vibe-quiz-card-result span {
    color: var(--ink-soft);
    font-size: 0.69rem;
}

.vibe-quiz-directory-card > .button {
    width: 100%;
    margin-top: auto;
}

.vibe-quiz-directory-empty {
    min-height: 220px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 24px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    background: var(--surface);
    text-align: center;
}

.vibe-quiz-directory-empty[hidden] {
    display: none;
}

.vibe-quiz-directory-empty strong {
    color: var(--ink);
}

.vibe-quiz-directory-empty p {
    margin: 0;
    font-size: 0.82rem;
}

.vibe-quiz-directory-note {
    display: grid;
    grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
    gap: 36px;
    margin-top: 26px;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.vibe-quiz-directory-note h2 {
    margin: 5px 0 0;
    color: var(--ink);
    font-size: 1.24rem;
}

.vibe-quiz-directory-note > p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.7;
}

@media (max-width: 1080px) {
    .vibe-quiz-directory-tools {
        grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    }

    .vibe-quiz-directory-tools > p {
        display: none;
    }

    .vibe-quiz-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .vibe-quiz-directory-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .vibe-quiz-directory-hero h1 {
        font-size: 2.8rem;
    }

    .vibe-quiz-directory-hero dl {
        max-width: 620px;
    }
}

@media (max-width: 650px) {
    .vibe-quiz-directory {
        padding-bottom: 50px;
    }

    .vibe-quiz-directory-hero {
        padding: 38px 0 28px;
    }

    .vibe-quiz-directory-hero h1 {
        font-size: 2.25rem;
    }

    .vibe-quiz-directory-grid,
    .vibe-quiz-directory-note {
        grid-template-columns: 1fr;
    }

    .vibe-quiz-directory-tools {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 20px;
        padding: 9px;
    }

    .vibe-quiz-directory-tools > p {
        display: block;
        padding: 0 3px 2px;
    }

    .vibe-quiz-directory-card {
        min-height: 0;
    }

    .vibe-quiz-directory-note {
        gap: 12px;
        padding: 21px;
    }
}

.account-interest-test-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.account-interest-test-grid > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface-soft);
    text-decoration: none;
}

.account-interest-test-grid > a:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.account-interest-test-grid > a > span {
    display: grid;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--control-contrast);
    background: var(--teal-deep);
    font-size: 0.74rem;
    font-weight: 900;
    place-items: center;
}

.account-interest-test-grid div,
.account-interest-test-grid strong,
.account-interest-test-grid small {
    display: block;
    min-width: 0;
}

.account-interest-test-grid strong,
.account-interest-test-grid small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-interest-test-grid strong {
    font-size: 0.84rem;
}

.account-interest-test-grid small {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

@media (max-width: 760px) {
    .account-interest-test-grid {
        grid-template-columns: 1fr;
    }

    .pricing-billing-switch {
        width: 100%;
    }

    .pricing-billing-switch a {
        padding-inline: 9px;
    }

    .pricing-billing-switch span {
        display: none;
    }

    .pricing-period-summary {
        display: grid;
        gap: 8px;
    }

    .pricing-period-summary p,
    .pricing-comparison .section-heading > p {
        text-align: left;
    }

    .pricing-terms,
    .pricing-terms dl {
        grid-template-columns: 1fr;
    }

    .pricing-terms {
        gap: 18px;
    }

    .pricing-terms dl > div:nth-child(2) {
        padding-top: 13px;
        border-top: 1px solid var(--line);
    }
}

/* ==================================================================== *
 * Lesson-section breakdowns: point lists, worked steps, and notes
 * ==================================================================== */

.activity-section-points,
.activity-section-steps {
    display: grid;
    gap: 9px;
    margin: 11px 0 0;
    padding: 0;
}

.activity-section-points {
    list-style: none;
}

.activity-section-points li {
    position: relative;
    padding: 0 0 0 20px;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.62;
}

.activity-section-points li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--teal) 62%, var(--surface));
}

.activity-section-points li strong {
    color: var(--ink);
    font-weight: 850;
}

.activity-section-steps {
    counter-reset: activity-section-step;
    list-style: none;
}

.activity-section-steps li {
    position: relative;
    padding: 9px 12px 9px 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.6;
    counter-increment: activity-section-step;
}

.activity-section-steps li::before {
    content: counter(activity-section-step);
    position: absolute;
    top: 9px;
    left: 11px;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 0.68rem;
    font-weight: 900;
}

.activity-hangout-sections p.activity-section-note {
    margin: 11px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--amber-ink);
    border-radius: 0 7px 7px 0;
    color: var(--amber-ink);
    background: var(--amber-soft);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.6;
}

/* ==================================================================== *
 * Tutor-by-tutor learning guides
 * ==================================================================== */

.pal-guide-featured-section {
    border-block: 1px solid var(--line);
}

.pal-guide-featured-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.pal-guide-featured-heading > div {
    max-width: 720px;
}

.pal-guide-featured-heading h2 {
    margin: 5px 0 8px;
}

.pal-guide-featured-heading p:last-child {
    margin: 0;
    color: var(--ink-soft);
}

.pal-guide-featured-heading > .text-link {
    flex: 0 0 auto;
}

.pal-guide-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pal-guide-featured-grid article {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 7%, transparent);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.pal-guide-featured-grid article:hover {
    border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--ink) 11%, transparent);
    transform: translateY(-2px);
}

.pal-guide-featured-grid article > a {
    display: block;
    min-height: 154px;
    overflow: hidden;
    background: var(--surface-muted);
}

.pal-guide-featured-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    transition: transform 180ms ease;
}

.pal-guide-featured-grid article:hover img {
    transform: scale(1.025);
}

.pal-guide-featured-grid article > div {
    display: flex;
    min-width: 0;
    padding: 14px;
    flex-direction: column;
}

.pal-guide-featured-grid article span,
.pal-guide-directory-card > div > span {
    color: var(--teal-deep);
    font-size: 0.67rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-featured-grid h3 {
    margin: 5px 0 5px;
    font-size: 1rem;
    line-height: 1.22;
}

.pal-guide-featured-grid h3 a,
.pal-guide-directory-card h2 a {
    color: var(--ink);
    text-decoration: none;
}

.pal-guide-featured-grid p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pal-guide-featured-grid .text-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 9px;
    font-size: 0.76rem;
}

.pal-guides-directory-hero .section-inner > p:last-of-type {
    max-width: 790px;
}

.pal-guides-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.pal-guides-directory-section {
    background: color-mix(in srgb, var(--paper) 90%, var(--surface-muted));
}

.pal-guide-results-bar {
    margin-bottom: 18px;
}

.pal-guide-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pal-guide-directory-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-width: 0;
    min-height: 184px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 7%, transparent);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.pal-guide-directory-card:hover {
    border-color: color-mix(in srgb, var(--teal) 50%, var(--line));
    box-shadow: 0 15px 30px color-mix(in srgb, var(--ink) 11%, transparent);
    transform: translateY(-2px);
}

.pal-guide-directory-image {
    display: block;
    min-height: 184px;
    overflow: hidden;
    background: var(--surface-muted);
}

.pal-guide-directory-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
    transition: transform 180ms ease;
}

.pal-guide-directory-card:hover .pal-guide-directory-image img {
    transform: scale(1.025);
}

.pal-guide-directory-card > div {
    display: flex;
    min-width: 0;
    padding: 15px;
    flex-direction: column;
}

.pal-guide-directory-card h2 {
    margin: 5px 0 6px;
    font-size: 1.04rem;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.pal-guide-directory-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pal-guide-directory-card small {
    display: -webkit-box;
    margin-top: 7px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pal-guide-directory-links {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.75rem;
    font-weight: 900;
}

.pal-guide-directory-links a:not(.text-link) {
    color: var(--ink-soft);
}

.pal-guide-masthead {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.pal-guide-masthead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 274px);
    align-items: center;
    gap: clamp(36px, 6vw, 82px);
}

.pal-guide-masthead-copy {
    max-width: 860px;
}

.pal-guide-masthead h1 {
    max-width: 850px;
    margin: 7px 0 14px;
    color: var(--ink);
    font-size: 3.65rem;
    line-height: 1.04;
    letter-spacing: 0;
}

.pal-guide-lead {
    max-width: 790px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.06rem;
    line-height: 1.72;
}

.pal-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 19px;
}

.pal-guide-meta span {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pal-guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.pal-guide-identity {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.pal-guide-identity:hover {
    border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
    box-shadow: 0 22px 50px color-mix(in srgb, var(--ink) 17%, transparent);
    transform: translateY(-3px);
}

.pal-guide-identity > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
}

.pal-guide-identity > span {
    display: grid;
    gap: 3px;
    padding: 14px 16px 15px;
    border-top: 1px solid var(--line);
}

.pal-guide-identity strong {
    font-size: 1rem;
}

.pal-guide-identity small {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
}

.pal-guide-content-section {
    background: var(--paper);
}

.pal-guide-layout {
    grid-template-columns: minmax(190px, 220px) minmax(0, 860px);
}

.pal-guide-toc {
    top: 96px;
}

.pal-guide-profile-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}

.pal-guide-profile-link img {
    width: 38px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 6px;
    object-fit: cover;
    object-position: center 22%;
}

.pal-guide-profile-link span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.pal-guide-profile-link strong {
    font-size: 0.76rem;
}

.pal-guide-profile-link small {
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 1.25;
}

.pal-guide-prose {
    min-width: 0;
}

.pal-guide-prose section[id] {
    scroll-margin-top: 110px;
}

.pal-guide-prose h2 {
    margin: 6px 0 13px;
    color: var(--ink);
    font-size: 1.76rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.pal-guide-prose h3 {
    margin: 27px 0 12px;
    color: var(--ink);
    font-size: 1.16rem;
    line-height: 1.25;
    letter-spacing: 0;
}

.pal-guide-prose h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.25;
}

.pal-guide-prose p {
    color: var(--ink-soft);
    line-height: 1.76;
}

.pal-guide-prose p strong {
    color: var(--ink);
}

.pal-guide-fit {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 7%, transparent);
}

.pal-guide-fit > div:first-child {
    padding: 25px 26px 22px;
}

.pal-guide-fit > div:first-child > p:last-child {
    max-width: 720px;
    margin-bottom: 0;
}

.pal-guide-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--line);
}

.pal-guide-facts > div {
    min-width: 0;
    padding: 17px 20px;
    background: var(--surface-soft);
}

.pal-guide-facts > div:nth-child(even) {
    border-left: 1px solid var(--line);
}

.pal-guide-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
}

.pal-guide-facts dt {
    margin-bottom: 5px;
    color: var(--teal-deep);
    font-size: 0.69rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pal-guide-section {
    padding: 40px 0 0;
}

.pal-guide-section + .pal-guide-section {
    margin-top: 40px;
    border-top: 1px solid var(--line);
}

.pal-guide-tags,
.pal-guide-specialties ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.pal-guide-tags span,
.pal-guide-specialties li {
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.73rem;
    font-weight: 850;
}

.pal-guide-specialties {
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 3px solid var(--amber);
    background: var(--amber-soft);
}

.pal-guide-specialties > strong {
    color: var(--amber-ink);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-specialties li {
    border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
    color: var(--amber-ink);
    background: color-mix(in srgb, var(--surface) 58%, var(--amber-soft));
}

.pal-guide-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 22px 0 0;
    padding: 0;
    counter-reset: pal-guide-step;
    list-style: none;
}

.pal-guide-steps li {
    position: relative;
    min-width: 0;
    min-height: 142px;
    padding: 20px 18px 17px 56px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    counter-increment: pal-guide-step;
}

.pal-guide-steps li::before {
    content: counter(pal-guide-step);
    position: absolute;
    top: 18px;
    left: 17px;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 950;
}

.pal-guide-steps strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.pal-guide-steps p {
    margin: 7px 0 0;
    font-size: 0.82rem;
    line-height: 1.58;
}

.pal-guide-callout {
    margin-top: 19px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: var(--teal-soft);
}

.pal-guide-callout.is-caution {
    border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
    border-left-color: var(--amber);
    background: var(--amber-soft);
}

.pal-guide-callout > span {
    color: var(--teal-ink);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-callout.is-caution > span {
    color: var(--amber-ink);
}

.pal-guide-callout p {
    margin: 7px 0 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.65;
}

.pal-guide-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pal-guide-mode-grid article {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.pal-guide-mode-grid p {
    margin: 8px 0;
    font-size: 0.79rem;
    line-height: 1.58;
}

.pal-guide-mode-grid small {
    display: block;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.5;
}

.pal-guide-rhythm {
    margin: 22px 0 0;
    border-block: 1px solid var(--line);
}

.pal-guide-rhythm > div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 18px;
    padding: 19px 0;
}

.pal-guide-rhythm > div + div {
    border-top: 1px solid var(--line);
}

.pal-guide-rhythm dt {
    color: var(--teal-deep);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-rhythm dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.65;
}

.pal-guide-tool-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 23px;
}

.pal-guide-tool-list article {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.pal-guide-tool-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pal-guide-tool-heading h3 {
    margin: 0;
}

.pal-guide-tool-heading span,
.pal-guide-custom-tool-grid article > span {
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--teal-ink);
    background: var(--teal-soft);
    font-size: 0.62rem;
    font-weight: 950;
    text-transform: uppercase;
}

.pal-guide-tool-list p {
    margin: 10px 0;
    font-size: 0.82rem;
    line-height: 1.62;
}

.pal-guide-tool-list small {
    display: block;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.71rem;
    line-height: 1.52;
}

.pal-guide-tool-list small strong {
    color: var(--ink);
}

.pal-guide-profile-tools {
    margin-top: 26px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
}

.pal-guide-profile-tools > div:first-child {
    max-width: 710px;
}

.pal-guide-profile-tools h3 {
    margin: 5px 0 8px;
}

.pal-guide-profile-tools > div:first-child > p:last-child {
    margin: 0;
    font-size: 0.83rem;
}

.pal-guide-custom-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.pal-guide-custom-tool-grid article {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.pal-guide-custom-tool-grid h4 {
    margin-top: 9px;
}

.pal-guide-custom-tool-grid p {
    margin: 8px 0;
    font-size: 0.76rem;
    line-height: 1.54;
}

.pal-guide-custom-tool-grid small {
    display: block;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.5;
}

.pal-guide-prompts {
    display: grid;
    gap: 10px;
    margin: 21px 0 0;
    padding: 0;
    counter-reset: pal-guide-prompt;
    list-style: none;
}

.pal-guide-prompts li {
    position: relative;
    min-width: 0;
    padding: 18px 20px 18px 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    counter-increment: pal-guide-prompt;
}

.pal-guide-prompts li::before {
    content: counter(pal-guide-prompt);
    position: absolute;
    top: 18px;
    left: 17px;
    color: var(--teal-deep);
    font-size: 0.78rem;
    font-weight: 950;
}

.pal-guide-prompts p {
    margin: 0;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 680;
    line-height: 1.65;
}

.pal-guide-progress-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.pal-guide-progress-list li {
    position: relative;
    min-width: 0;
    padding: 14px 15px 14px 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.8rem;
    font-weight: 780;
    line-height: 1.5;
}

.pal-guide-progress-list li::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 17px;
    width: 12px;
    height: 7px;
    border-bottom: 3px solid var(--teal-deep);
    border-left: 3px solid var(--teal-deep);
    transform: rotate(-45deg);
}

.pal-guide-next {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin-top: 48px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 8%, transparent);
}

.pal-guide-next-image {
    display: block;
    width: 112px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.pal-guide-next-image > img {
    display: block;
    width: 112px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
    transition: transform 160ms ease;
}

.pal-guide-next-image:hover > img {
    transform: scale(1.025);
}

.pal-guide-next h2 {
    margin: 5px 0 8px;
    font-size: 1.4rem;
}

.pal-guide-next p:not(.eyebrow) {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
}

.pal-guide-next > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

@media (max-width: 1180px) {
    .pal-guide-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pal-guide-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .pal-guide-masthead-grid {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 30px;
    }

    .pal-guide-masthead h1 {
        font-size: 2.6rem;
    }

    .pal-guide-layout {
        display: block;
        max-width: 860px;
    }

    .pal-guide-toc {
        display: none;
    }

    .pal-guide-toc-mobile {
        display: block;
        margin-bottom: 24px;
    }
}

@media (max-width: 720px) {
    .pal-guide-featured-heading {
        display: grid;
        align-items: start;
        gap: 12px;
    }

    .pal-guide-featured-grid,
    .pal-guide-directory-grid {
        grid-template-columns: 1fr;
    }

    .pal-guide-masthead-grid {
        grid-template-columns: 1fr;
    }

    .pal-guide-masthead h1 {
        font-size: 2.25rem;
    }

    .pal-guide-identity {
        width: min(100%, 220px);
    }

    .pal-guide-facts,
    .pal-guide-steps,
    .pal-guide-mode-grid,
    .pal-guide-tool-list,
    .pal-guide-custom-tool-grid,
    .pal-guide-progress-list {
        grid-template-columns: 1fr;
    }

    .pal-guide-facts > div:nth-child(even) {
        border-left: 0;
    }

    .pal-guide-facts > div + div {
        border-top: 1px solid var(--line);
    }

    .pal-guide-steps li {
        min-height: 0;
    }

    .pal-guide-next {
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
        padding: 18px;
    }

    .pal-guide-next-image,
    .pal-guide-next-image > img {
        width: 82px;
    }

    .pal-guide-next > div > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .pal-guides-directory-actions,
    .pal-guide-hero-actions,
    .pal-guide-next > div > div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pal-guides-directory-actions .button,
    .pal-guide-hero-actions .button,
    .pal-guide-next .button {
        width: 100%;
    }

    .pal-guide-featured-grid article {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .pal-guide-directory-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .pal-guide-directory-image,
    .pal-guide-directory-card {
        min-height: 170px;
    }

    .pal-guide-fit > div:first-child {
        padding: 21px 18px 18px;
    }

    .pal-guide-facts > div {
        padding: 15px 18px;
    }

    .pal-guide-section {
        padding-top: 32px;
    }

    .pal-guide-section + .pal-guide-section {
        margin-top: 32px;
    }

    .pal-guide-rhythm > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .pal-guide-profile-tools {
        padding: 18px;
    }

    .pal-guide-next {
        display: block;
    }

    .pal-guide-next-image {
        margin-bottom: 14px;
    }
}

/* Browser-local study files */
.local-file-icon {
    --file-accent: var(--teal);
    --file-soft: var(--teal-soft);
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: end center;
    width: 52px;
    height: 62px;
    padding: 0 5px 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--file-accent) 52%, var(--line));
    border-radius: 7px 13px 7px 7px;
    color: color-mix(in srgb, var(--file-accent) 70%, var(--ink));
    background:
        linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--file-soft) 86%, var(--surface)) 13px),
        var(--file-soft);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--file-accent) 12%, transparent);
}

.local-file-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--file-accent) 45%, var(--line));
    border-left: 1px solid color-mix(in srgb, var(--file-accent) 45%, var(--line));
    border-radius: 0 8px 0 5px;
    background: color-mix(in srgb, var(--file-accent) 18%, var(--surface));
}

.local-file-icon > span {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4px 2px;
    border-radius: 4px;
    color: var(--white);
    background: var(--file-accent);
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
}

.local-file-icon[data-file-kind="pdf"] {
    --file-accent: #d5554f;
    --file-soft: #fff0ed;
}

.local-file-icon[data-file-kind="image"] {
    --file-accent: #298d75;
    --file-soft: #e8f7ef;
}

.local-file-icon[data-file-kind="document"],
.local-file-icon[data-file-kind="text"] {
    --file-accent: #3977bd;
    --file-soft: #edf5ff;
}

.local-file-icon[data-file-kind="sheet"] {
    --file-accent: #308254;
    --file-soft: #eaf7ee;
}

.local-file-icon[data-file-kind="slides"] {
    --file-accent: #c76832;
    --file-soft: #fff1e7;
}

.local-file-icon[data-file-kind="audio"] {
    --file-accent: #8b62b7;
    --file-soft: #f5effc;
}

.local-file-icon[data-file-kind="video"] {
    --file-accent: #b54f76;
    --file-soft: #fceef4;
}

.local-file-icon[data-file-kind="archive"] {
    --file-accent: #8b7041;
    --file-soft: #f8f1e5;
}

.local-file-icon[data-file-kind="code"] {
    --file-accent: #3f6673;
    --file-soft: #eaf3f5;
}

.local-file-icon[data-file-kind="other"] {
    --file-accent: #68777b;
    --file-soft: #edf2f2;
}

.local-files-shell {
    min-height: 72vh;
}

.local-files-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--teal-soft) 66%, var(--surface)), color-mix(in srgb, var(--amber-soft) 34%, var(--surface))),
        var(--surface);
}

.local-files-hero-copy {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.local-files-hero-icon {
    width: 58px;
    height: 68px;
}

.local-files-hero h1,
.local-files-hero p {
    margin: 0;
}

.local-files-hero h1 {
    margin-top: 2px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.local-files-hero p:not(.eyebrow) {
    max-width: 670px;
    margin-top: 7px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.local-files-hero-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
}

.local-files-hero-actions .button-primary > span {
    font-size: 1.2rem;
    line-height: 1;
}

.local-files-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 0.48fr)) minmax(280px, 1.7fr);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.local-files-summary > div {
    display: grid;
    align-content: center;
    min-height: 84px;
    padding: 13px 16px;
}

.local-files-summary > div + div {
    border-left: 1px solid var(--line);
}

.local-files-summary > div > span,
.local-files-summary > div > strong {
    display: block;
}

.local-files-summary > div > span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.local-files-summary > div > strong {
    margin-top: 4px;
    color: var(--ink);
    font-size: 1.25rem;
}

.local-files-summary .local-files-privacy {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--teal-soft) 52%, var(--surface));
}

.local-files-privacy > img {
    width: 22px;
    height: 22px;
}

.local-files-privacy span,
.local-files-privacy strong,
.local-files-privacy small {
    display: block;
}

.local-files-privacy strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.local-files-privacy small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.local-files-layout {
    display: grid;
    grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.local-files-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 15px;
}

.local-files-sidebar h2,
.local-files-sidebar p {
    margin: 0;
}

.local-files-sidebar h2 {
    margin-top: 2px;
    font-size: 1.25rem;
}

.local-files-sidebar > div:first-child > p:not(.eyebrow) {
    margin-top: 7px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.5;
}

.local-files-dropzone {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 24px 16px;
    border: 2px dashed color-mix(in srgb, var(--teal) 44%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--teal-soft) 38%, var(--surface));
    text-align: center;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.local-files-dropzone.is-dragging {
    border-color: var(--teal);
    background: var(--teal-soft);
    transform: translateY(-2px);
}

.local-files-drop-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 1.5rem;
    font-weight: 700;
}

.local-files-dropzone > strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.local-files-dropzone > small {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 750;
}

.local-files-dropzone .button {
    width: 100%;
    margin-top: 5px;
}

.local-files-local-note {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.local-files-local-note p {
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.45;
}

.local-files-local-note strong {
    color: var(--ink);
}

.local-files-main {
    min-width: 0;
}

.local-files-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.36fr);
    gap: 10px;
    margin-bottom: 10px;
}

.local-files-toolbar label:first-child {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
}

.local-files-toolbar input,
.local-files-toolbar select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--surface);
    font: inherit;
}

.local-files-toolbar input {
    min-width: 0;
    padding: 9px 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.local-files-toolbar label:first-child:focus-within,
.local-files-toolbar select:focus {
    outline: 3px solid color-mix(in srgb, var(--teal) 24%, transparent);
    border-color: var(--teal);
}

.local-files-toolbar select {
    padding: 9px 11px;
    border-radius: 7px;
    font-weight: 800;
}

.local-files-status {
    min-height: 20px;
    margin: 0 2px 8px;
    color: var(--teal-ink);
    font-size: 0.78rem;
    font-weight: 850;
}

.local-files-status.is-error {
    color: var(--coral);
}

.local-files-empty {
    display: grid;
    justify-items: center;
    min-height: 330px;
    align-content: center;
    padding: 34px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    text-align: center;
}

.local-files-empty[hidden] {
    display: none;
}

.local-files-empty h2,
.local-files-empty p {
    margin: 0;
}

.local-files-empty h2 {
    margin-top: 15px;
    font-size: 1.3rem;
}

.local-files-empty p {
    max-width: 470px;
    margin-top: 7px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.local-files-empty .button {
    margin-top: 17px;
}

.local-files-empty.is-compact {
    min-height: 210px;
}

.local-files-list {
    display: grid;
    gap: 9px;
}

.local-files-list[hidden] {
    display: none;
}

.local-file-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) minmax(184px, auto);
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent);
}

.local-file-card-preview {
    display: block;
    width: 60px;
    height: 62px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
    border-radius: 7px;
    background: var(--surface-soft);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--teal) 12%, transparent);
}

.local-file-card-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local-file-card-preview:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 28%, transparent);
    outline-offset: 2px;
}

.local-file-card-copy {
    min-width: 0;
}

.local-file-card h2,
.local-file-card p {
    margin: 0;
}

.local-file-card h2 {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-file-meta {
    margin-top: 4px !important;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
}

.local-file-notes {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 7px !important;
    color: var(--ink-soft);
    font-size: 0.8rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.local-file-notes.is-empty {
    opacity: 0.68;
    font-style: italic;
}

.local-file-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(82px, 1fr));
    gap: 6px;
}

.local-file-actions button {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--surface-soft);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
}

.local-file-actions button:hover {
    border-color: color-mix(in srgb, var(--teal) 44%, var(--line));
    background: var(--teal-soft);
}

.local-file-actions button.is-danger {
    color: color-mix(in srgb, var(--coral) 80%, var(--ink));
}

.local-file-actions button.is-danger:hover {
    border-color: color-mix(in srgb, var(--coral) 50%, var(--line));
    background: color-mix(in srgb, var(--coral) 10%, var(--surface));
}

.local-file-dialog {
    width: min(520px, calc(100% - 28px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 28px 80px rgba(23, 52, 58, 0.28);
}

.local-file-dialog::backdrop {
    background: rgba(14, 35, 39, 0.58);
    backdrop-filter: blur(5px);
}

.local-file-dialog form {
    display: grid;
    gap: 16px;
    padding: 21px;
}

.local-file-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.local-file-dialog-head h2,
.local-file-dialog-head p {
    margin: 0;
}

.local-file-dialog-head h2 {
    margin-top: 2px;
    font-size: 1.35rem;
}

.local-file-dialog-head > button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-soft);
    cursor: pointer;
}

.local-file-dialog-field {
    display: grid;
    gap: 7px;
}

.local-file-dialog-field[hidden] {
    display: none;
}

.local-file-dialog-field > span {
    font-size: 0.82rem;
    font-weight: 900;
}

.local-file-dialog-field > small {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.local-file-dialog-field input,
.local-file-dialog-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    font: inherit;
}

.local-file-dialog-field input {
    min-height: 46px;
    padding: 10px 11px;
}

.local-file-dialog-field textarea {
    min-height: 150px;
    padding: 11px;
    resize: vertical;
    line-height: 1.5;
}

.local-file-dialog-field :is(input, textarea):focus {
    outline: 3px solid color-mix(in srgb, var(--teal) 24%, transparent);
    border-color: var(--teal);
}

.local-file-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.local-files-shell.is-busy {
    cursor: progress;
}

/* File uploads inside tutor chat */
.vt-chat-window.is-minimized .vt-attachment-tray {
    display: none;
}

.vt-attachment-tray {
    flex: 0 0 auto;
    max-height: 176px;
    overflow-y: auto;
    padding: 9px 12px 10px;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--teal-soft) 38%, var(--surface));
}

.vt-attachment-tray[hidden] {
    display: none;
}

.vt-attachment-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vt-attachment-tray-head a {
    color: var(--teal-ink);
    font-size: 0.7rem;
    text-transform: none;
}

.vt-attachment-list {
    display: grid;
    gap: 6px;
}

.vt-attachment-tray-note {
    margin: 7px 1px 0;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.35;
}

.vt-queued-file {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    border-radius: 7px;
    background: var(--surface);
}

.vt-queued-file-icon {
    width: 30px;
    height: 36px;
    padding: 0 3px 4px;
    border-radius: 4px 8px 4px 4px;
}

.vt-queued-file-icon::before {
    width: 9px;
    height: 9px;
}

.vt-queued-file-icon > span {
    padding: 3px 1px;
    font-size: 0.46rem;
}

.vt-queued-file-preview {
    display: block;
    width: 34px;
    height: 38px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
    border-radius: 6px;
    background: var(--surface-soft);
}

.vt-queued-file-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-queued-file > span,
.vt-queued-file strong,
.vt-queued-file small {
    display: block;
    min-width: 0;
}

.vt-queued-file strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-queued-file small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 750;
}

.vt-queued-file > button {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.vt-composer {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.vt-attach {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface-soft);
    font: inherit;
    cursor: pointer;
}

.vt-attach:hover {
    border-color: var(--teal);
    background: var(--teal-soft);
}

.vt-attach > span {
    font-size: 1.15rem;
    line-height: 1;
}

.vt-message-attachments {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.vt-message-file {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: min(240px, 68vw);
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--teal-soft) 35%, var(--surface));
}

.vt-message-user .vt-message-file {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.11);
}

.vt-message-file-icon {
    width: 30px;
    height: 36px;
    padding: 0 3px 4px;
    border-radius: 4px 8px 4px 4px;
}

.vt-message-file-icon::before {
    width: 9px;
    height: 9px;
}

.vt-message-file-icon > span {
    padding: 3px 1px;
    font-size: 0.46rem;
}

.vt-message-file > span,
.vt-message-file strong,
.vt-message-file small {
    display: block;
    min-width: 0;
}

.vt-message-file strong {
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-message-file small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 750;
}

.vt-message-user .vt-message-file small {
    color: rgba(255, 255, 255, 0.76);
}

.vt-message-image-file {
    min-width: min(270px, 68vw);
    max-width: 360px;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--teal-soft) 24%, var(--surface));
}

.vt-message-user .vt-message-image-file {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
}

.vt-message-image-preview {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.vt-message-image-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-message-image-preview:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 36%, transparent);
    outline-offset: -3px;
}

.vt-message-image-file figcaption,
.vt-message-image-file figcaption strong,
.vt-message-image-file figcaption small {
    display: block;
    min-width: 0;
}

.vt-message-image-file figcaption {
    padding: 8px 9px;
}

.vt-message-image-file figcaption strong {
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-message-image-file figcaption small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 750;
}

.vt-message-user .vt-message-image-file figcaption small {
    color: rgba(255, 255, 255, 0.76);
}

/* Custom browser-local file chooser */
.vt-modal.vt-file-picker-modal {
    width: min(780px, 100%);
    max-height: min(760px, calc(100vh - 44px));
    padding: 0;
    overflow: hidden;
}

.vt-file-picker-shell {
    display: grid;
    grid-template-rows: auto auto minmax(180px, 1fr) auto;
    max-height: min(760px, calc(100vh - 44px));
}

.vt-file-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 15px;
    border-bottom: 1px solid var(--line);
}

.vt-file-picker-head h2,
.vt-file-picker-head p {
    margin: 0;
}

.vt-file-picker-head h2 {
    margin-top: 3px;
    color: var(--ink);
    font-size: 1.45rem;
}

.vt-file-picker-head p {
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.vt-file-picker-head > button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
}

.vt-file-picker-tools {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr);
    gap: 10px;
    padding: 14px 22px;
    background: var(--surface-soft);
}

.vt-file-picker-upload {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px 12px;
    border: 1px dashed color-mix(in srgb, var(--teal) 48%, var(--line));
    border-radius: 7px;
    color: var(--ink);
    background: color-mix(in srgb, var(--teal-soft) 46%, var(--surface));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vt-file-picker-upload > span:first-child {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--white);
    background: var(--teal-deep);
    font-size: 1.3rem;
    font-weight: 800;
}

.vt-file-picker-upload strong,
.vt-file-picker-upload small {
    display: block;
}

.vt-file-picker-upload strong {
    font-size: 0.8rem;
}

.vt-file-picker-upload small {
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 700;
}

.vt-file-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
}

.vt-file-picker-search img {
    width: 18px;
    height: 18px;
    opacity: 0.66;
}

.vt-file-picker-search input {
    width: 100%;
    min-width: 0;
    padding: 11px 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
}

.vt-file-picker-search:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
}

.vt-file-picker-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    min-height: 180px;
    max-height: 410px;
    padding: 14px 22px;
    overflow-y: auto;
}

.vt-file-picker-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vt-file-picker-item:hover {
    border-color: color-mix(in srgb, var(--teal) 44%, var(--line));
    background: color-mix(in srgb, var(--teal-soft) 32%, var(--surface));
}

.vt-file-picker-item.is-selected {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal-soft) 62%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 18%, transparent);
}

.vt-file-picker-item:focus-visible,
.vt-file-picker-upload:focus-visible,
.vt-file-picker-head > button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 28%, transparent);
    outline-offset: 2px;
}

.vt-file-picker-preview,
.vt-file-picker-icon {
    width: 46px;
    height: 52px;
}

.vt-file-picker-preview {
    display: block;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    border-radius: 6px;
    background: var(--surface-soft);
}

.vt-file-picker-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-file-picker-icon {
    padding: 0 4px 5px;
}

.vt-file-picker-copy,
.vt-file-picker-copy strong,
.vt-file-picker-copy small {
    display: block;
    min-width: 0;
}

.vt-file-picker-copy strong {
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-file-picker-copy small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.64rem;
    font-weight: 750;
}

.vt-file-picker-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: transparent;
    background: var(--surface-soft);
    font-size: 0.7rem;
    font-weight: 950;
}

.vt-file-picker-item.is-selected .vt-file-picker-check {
    border-color: var(--teal-deep);
    color: var(--white);
    background: var(--teal-deep);
}

.vt-file-picker-loading,
.vt-file-picker-empty {
    grid-column: 1 / -1;
    align-self: center;
    margin: 0;
    padding: 32px 14px;
    color: var(--ink-soft);
    text-align: center;
}

.vt-file-picker-empty strong,
.vt-file-picker-empty span {
    display: block;
}

.vt-file-picker-empty strong {
    color: var(--ink);
}

.vt-file-picker-empty span {
    margin-top: 5px;
    font-size: 0.8rem;
}

.vt-file-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

.vt-file-picker-footer > span,
.vt-file-picker-footer > span strong,
.vt-file-picker-footer > span small {
    display: block;
}

.vt-file-picker-footer > span strong {
    color: var(--ink);
    font-size: 0.8rem;
}

.vt-file-picker-footer > span small {
    margin-top: 3px;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.vt-file-picker-footer > div {
    display: flex;
    gap: 8px;
}

/* Optional tutor profile boundaries */
.vt-settings-modal .vt-settings-group.is-boundaries {
    --settings-accent: #5d7fa3;
}

.vt-boundary-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--settings-accent) 30%, var(--line));
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
}

.vt-boundary-toggle > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vt-boundary-switch {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--settings-accent) 36%, var(--line));
    border-radius: 999px;
    background: var(--surface-muted);
    transition: background 150ms ease, border-color 150ms ease;
}

.vt-boundary-switch > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ink-soft);
    box-shadow: 0 2px 6px rgba(23, 52, 58, 0.2);
    transition: transform 150ms ease, background 150ms ease;
}

.vt-boundary-toggle > input:checked + .vt-boundary-switch {
    border-color: var(--settings-accent);
    background: color-mix(in srgb, var(--settings-accent) 78%, var(--surface));
}

.vt-boundary-toggle > input:checked + .vt-boundary-switch > span {
    background: var(--white);
    transform: translateX(20px);
}

.vt-boundary-toggle > input:focus-visible + .vt-boundary-switch {
    outline: 3px solid color-mix(in srgb, var(--settings-accent) 28%, transparent);
    outline-offset: 2px;
}

.vt-boundary-copy,
.vt-boundary-copy strong,
.vt-boundary-copy small {
    display: block;
    min-width: 0;
}

.vt-boundary-copy strong {
    color: var(--ink);
    font-size: 0.84rem;
}

.vt-boundary-copy small {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 980px) {
    .local-files-summary {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
    }

    .local-files-summary .local-files-privacy {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .local-files-layout {
        grid-template-columns: 1fr;
    }

    .local-files-sidebar {
        position: static;
        grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(220px, 0.9fr);
        align-items: center;
    }

    .local-files-local-note {
        padding-top: 0;
        padding-left: 14px;
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 720px) {
    .local-files-hero {
        display: grid;
    }

    .local-files-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .local-files-hero-actions .button {
        width: 100%;
    }

    .local-files-sidebar {
        grid-template-columns: 1fr;
    }

    .local-files-local-note {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .local-file-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .local-file-card-icon {
        width: 46px;
        height: 56px;
    }

    .local-file-card-preview {
        width: 46px;
        height: 56px;
    }

    .local-file-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .local-files-hero {
        padding: 17px;
    }

    .local-files-hero-copy {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
    }

    .local-files-hero-icon {
        width: 48px;
        height: 58px;
    }

    .local-files-hero h1 {
        font-size: 1.85rem;
    }

    .local-files-hero-actions,
    .local-files-toolbar,
    .local-file-dialog-actions {
        grid-template-columns: 1fr;
    }

    .local-files-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .local-files-summary > div {
        min-height: 72px;
        padding: 10px;
    }

    .local-files-summary > div > strong {
        font-size: 1rem;
    }

    .local-files-summary .local-files-privacy {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .local-file-card {
        gap: 10px;
        padding: 11px;
    }

    .local-file-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vt-attachment-tray {
        padding: 8px 9px;
    }

    .vt-composer {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 7px;
        padding: 9px;
    }

    .vt-attach,
    .vt-send {
        width: 40px;
        height: 44px;
    }

    .vt-modal.vt-file-picker-modal,
    .vt-file-picker-shell {
        max-height: calc(100vh - 24px);
    }

    .vt-file-picker-head,
    .vt-file-picker-tools,
    .vt-file-picker-list,
    .vt-file-picker-footer {
        padding-right: 13px;
        padding-left: 13px;
    }

    .vt-file-picker-tools,
    .vt-file-picker-list {
        grid-template-columns: 1fr;
    }

    .vt-file-picker-list {
        max-height: none;
    }

    .vt-file-picker-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .vt-file-picker-footer > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vt-boundary-toggle {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 10px;
    }

    .vt-boundary-switch {
        width: 44px;
    }

    .vt-boundary-toggle > input:checked + .vt-boundary-switch > span {
        transform: translateX(16px);
    }
}