* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dot-grid: 26px;
}

html {
    overflow-x: clip;
}

body {
    background-color: var(--color-paper);
    background-image: radial-gradient(var(--color-dot) 1.4px, transparent 1.4px);
    background-size: var(--dot-grid) var(--dot-grid);
    background-position: calc(var(--dot-grid) / 2) calc(var(--dot-grid) / 2);
    color: var(--color-ink-soft);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1.6;
    overflow-x: clip;
}

.canvas-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(var(--color-dot-strong) 1.4px, transparent 1.4px);
    background-size: var(--dot-grid) var(--dot-grid);
    background-position: calc(var(--dot-grid) / 2) var(--scroll-y, calc(var(--dot-grid) / 2));
    -webkit-mask-image: radial-gradient(
        12.5rem circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
        black 0%,
        transparent 100%
    );
    mask-image: radial-gradient(
        12.5rem circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
        black 0%,
        transparent 100%
    );
}

.lift {
    position: relative;
    z-index: 1;
}

.lift::before {
    content: "";
    position: absolute;
    inset: -2rem -4rem;
    z-index: -1;
    background: radial-gradient(
        ellipse 60% 80% at 50% 45%,
        var(--color-paper) 40%,
        transparent 100%
    );
    pointer-events: none;
}

.shell {
    position: relative;
    z-index: 1;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

h1,
h2,
h3,
h4 {
    color: var(--color-ink);
    text-wrap: balance;
}

.hero {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 6rem;
    text-align: center;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wordmark {
    height: 3.25rem;
    width: auto;
    margin-bottom: 2.5rem;
}

.hero .wordmark {
    margin-top: 2rem;
}

h1 {
    font-size: clamp(2.25rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

h1 .accent {
    color: var(--color-primary-light);
    font-style: italic;
}

.description {
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
    text-align: justify;
    text-align-last: center;
}

.url-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface-lowest);
    border: 1.5px solid var(--color-ink);
    border-radius: var(--radius-full);
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    box-shadow: var(--shadow-offset);
    text-align: left;
}

.url-form .fake-input {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caret {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    vertical-align: -0.16em;
    background: var(--color-primary);
    animation: blink 1.1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.home-hint {
    font-size: 0.9rem;
    color: var(--color-ink-faint);
    margin-top: 1rem;
}

@keyframes nudge {
    50% {
        transform: translateY(0.35rem);
    }
}

.button {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-full);
    padding: 0.9rem 1.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}

.button:active {
    transform: scale(0.975);
}

.button.primary {
    background: var(--color-primary);
    color: var(--color-on-accent);
}

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

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

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

.button.small {
    font-size: 0.82rem;
    padding: 0.6rem 1.2rem;
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.card {
    background: var(--color-surface-lowest);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-lift-sm);
    border: var(--card-edge);
}

.gen-pill {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink-faint);
    transition: color 0.25s ease, background 0.25s ease;
}

.gen-pill.done {
    color: var(--color-ink-soft);
}

.gen-pill.active {
    color: var(--color-ink);
    background: var(--color-secondary-container);
}

.gen-pill.blocked {
    border-radius: var(--radius-lg);
    background: var(--color-warn-container);
    color: var(--color-ink);
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
}

.gen-pill.blocked.ask {
    background: var(--color-secondary-container);
}

.gen-pill-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.gen-pill-icon {
    flex-shrink: 0;
    color: var(--color-sage);
}

.gen-pill-warn {
    color: var(--color-warn-ink);
}

.gen-pill-ask {
    color: var(--color-primary);
}

.gen-pill-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-ink-faint);
    flex-shrink: 0;
}

.gen-pill.active .gen-pill-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: none;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
}

.gen-pill.done .gen-pill-dot {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    background: color-mix(in srgb, var(--color-sage) 15%, transparent);
    color: var(--color-sage);
}

.gen-pill.done .gen-pill-dot::before {
    content: "";
    position: absolute;
    left: 0.19rem;
    top: 0.2rem;
    width: 0.34rem;
    height: 0.17rem;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.gen-pill-reason {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-warn-ink);
    line-height: 1.45;
}

.gen-pill.blocked.ask .gen-pill-reason {
    color: var(--color-ink-soft);
}

.gen-pill-actions {
    display: flex;
    gap: 0.4rem;
    align-self: flex-end;
}

.gen-pill-cancel,
.gen-pill-override {
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.gen-pill-cancel {
    background: none;
    color: var(--color-ink-faint);
}

.gen-pill-override {
    background: var(--color-warn-ink);
    color: var(--color-on-accent);
}

.gen-pill.blocked.ask .gen-pill-override {
    background: var(--color-primary);
}

.appact {
    position: relative;
    z-index: 1;
    background: var(--color-surface-low);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.appsticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 4rem clamp(1rem, 4vw, 3rem) 4.5rem;
    overflow: hidden;
}

.rail {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rail-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    padding: 0 1.1rem 0.35rem;
}

.frame {
    position: relative;
    height: min(42rem, calc(100svh - 8.5rem));
    background: var(--color-paper);
    background-image: radial-gradient(var(--color-dot) 1.4px, transparent 1.4px);
    background-size: var(--dot-grid) var(--dot-grid);
    background-position: calc(var(--dot-grid) / 2) calc(var(--dot-grid) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-menu);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 1.5rem;
    background: var(--color-paper);
    flex-shrink: 0;
}

.top-nav-logo {
    display: flex;
    align-items: center;
}

.top-nav-logo img {
    height: 1.55rem;
    width: auto;
}

.top-nav-links {
    display: flex;
    gap: 0.35rem;
    color: var(--color-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    flex: 1;
}

.top-nav-links span {
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-full);
    transition: background 0.25s ease, color 0.25s ease;
}

.top-nav-links span.active {
    background: var(--color-secondary-container);
    color: var(--color-primary);
}

.hamburger {
    display: none;
    align-items: center;
    color: var(--color-ink);
    margin-left: auto;
}

.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-accent);
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.screen {
    position: absolute;
    inset: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.screen.on {
    opacity: 1;
    transform: none;
}

.pin {
    position: absolute;
    z-index: 8;
    max-width: 13rem;
    background: var(--color-surface-lowest);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-menu);
    padding: 0.6rem 0.9rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--color-ink-soft);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
}

.pin b {
    display: block;
    color: var(--color-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.screen.on .pin {
    opacity: 1;
    transform: none;
}

.screen.on .pin:nth-of-type(2) {
    transition-delay: 0.45s;
}

@media (max-width: 1280px) {
    .pin-gutter {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        opacity: 1;
        transform: none;
    }
}

.spacer {
    height: 100svh;
}

.course-layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.5rem;
    height: 100%;
}

.course-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sidebar-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    padding: 0 0.75rem 0.5rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-full);
    color: var(--color-ink-soft);
    font-size: 0.82rem;
}

.sidebar-item.active {
    background: var(--color-secondary-container);
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-item-num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-high);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-item.active .sidebar-item-num,
.sidebar-item.done .sidebar-item-num {
    background: var(--color-primary);
    color: var(--color-on-accent);
}

.sidebar-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toast {
    padding: 0.7rem 1.35rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.toast-error {
    background: var(--color-danger);
    color: var(--color-on-accent);
}

.video-stage {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.video-frame {
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, var(--color-surface-high), var(--color-surface-low));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-faint);
}


.video-fs {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-surface-lowest);
    color: var(--color-ink);
    box-shadow: var(--shadow-pill);
}

.boundary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0.9rem 0.8rem 1.25rem;
    border-radius: var(--radius-xl);
}

.boundary-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
}

.boundary-title {
    flex: 1;
    min-width: 0;
    color: var(--color-ink-soft);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boundary-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.boundary-btn {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 1.05rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.boundary-btn.quiet {
    color: var(--color-ink-faint);
}

.boundary-btn.loud {
    background: var(--color-primary);
    color: var(--color-on-accent);
}

.course-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.section-heading {
    font-size: 1.15rem;
    font-weight: 800;
    margin-top: 0.5rem;
}

.section-card + .section-card {
    margin-top: -0.5rem;
}

.section-card {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
}

.section-card-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-stamp {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-ink-soft);
    background: var(--color-surface-high);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.6rem;
    flex-shrink: 0;
}

.chevron {
    color: var(--color-ink-faint);
    flex-shrink: 0;
}

.url-form-inline {
    max-width: 32rem;
    margin: 2.5rem auto 0.75rem;
}

.hero-field {
    justify-content: center;
    padding: 0.9rem 1.5rem;
}

.hero-field .fake-input {
    flex: 0 1 auto;
    text-align: center;
}

.gen-pills-panel {
    width: 17rem;
    max-width: 100%;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
}

.toast-stage {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.answer-box.filled {
    color: var(--color-ink);
    line-height: 1.6;
    padding: 1rem 1.5rem;
}

.url-form-inline .fake-input {
    color: var(--color-ink-faint);
}

.home-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 1.5rem;
}

.section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 2.25rem 0 0.9rem;
}

.section-row-title {
    font-size: 1.05rem;
    font-weight: 800;
}

.section-row-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary);
}

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

.course-card {
    background: var(--color-surface-lowest);
    border-radius: var(--radius-md);
    border: var(--card-edge);
    box-shadow: var(--shadow-lift-sm);
    padding: 0.6rem 0.6rem 0.9rem;
}

.course-card-thumb {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: linear-gradient(140deg, var(--color-secondary-container), var(--color-surface-high));
    display: flex;
    align-items: flex-end;
    padding: 0.5rem;
    margin-bottom: 0.6rem;
}

.course-card-thumb span {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.course-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 0 0.35rem;
}

.course-card-meta {
    font-size: 0.75rem;
    color: var(--color-ink-faint);
    padding: 0.2rem 0.35rem 0;
}

.notes-tab {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 4;
    width: 1.9rem;
    height: 5.75rem;
    border-radius: var(--radius-tab) 0 0 var(--radius-tab);
    background: var(--color-secondary-container);
    color: var(--color-primary);
    box-shadow: var(--shadow-pill);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.notes-tab span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.notes-tab-grip {
    width: 0.5rem;
    height: 0.85rem;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 0.25rem 0.3rem;
    opacity: 0.45;
}

.notes-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    justify-content: flex-end;
}

.notes-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-scrim-nav);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.screen.on .notes-backdrop {
    opacity: 1;
}

.notes-sheet {
    position: relative;
    z-index: 1;
    width: 22rem;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-lowest);
    background-image: radial-gradient(var(--color-dot-faint) 1.4px, transparent 1.4px);
    background-size: var(--dot-grid) var(--dot-grid);
    background-position: calc(var(--dot-grid) / 2) calc(var(--dot-grid) / 2);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-menu);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.screen.on .notes-sheet {
    transform: none;
}

.notes-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 1.35rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.notes-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-right: auto;
    min-width: 0;
}

.notes-sub {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-ink-faint);
}

.notes-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-secondary-container);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.notes-body {
    flex: 1;
    min-height: 0;
    padding: 1.1rem 1.35rem;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--color-ink);
}

.md-line {
    margin-bottom: 0.25rem;
}

.md-bullet {
    padding-left: 2ch;
    text-indent: -2ch;
}

.md-tok {
    color: var(--color-ink-faint);
    opacity: 0.55;
}

.md-h2 {
    font-size: 1.3em;
    font-weight: 800;
    color: var(--color-ink);
}

.md-line b {
    font-weight: 700;
    color: var(--color-ink);
}

.typed {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: bottom;

    text-indent: 0;
}

.typed::before {
    content: attr(data-text);
    visibility: hidden;
    text-indent: 0;
}

.typed::after {
    content: attr(data-text);
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;

    text-indent: 0;
    border-right: 1.5px solid var(--color-primary);
}

.screen.on .typed::after {
    animation: type 1.9s steps(30) 0.7s forwards, caret 1.1s step-end infinite;
}

@keyframes type {
    to {
        width: 100%;
    }
}

@keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

.notes-tail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.35rem 1rem;
    border-top: 1px solid var(--line);
}

.notes-guide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: auto;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-low);
    color: var(--color-ink-faint);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.notes-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-ink-soft);
    background: var(--color-surface-high);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.85rem;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.page-header-title {
    font-size: 1.35rem;
    font-weight: 800;
}

.page-header-sub {
    font-size: 0.85rem;
    color: var(--color-ink-faint);
}

.cheatsheet-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cheatsheet-paper {
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.cheatsheet-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cheatsheet-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cheatsheet-num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-full);
    background: var(--color-secondary-container);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.cheatsheet-section-title {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 800;
}

.cheatsheet-points {
    margin-left: 2.15rem;
    padding-left: 1rem;
    font-size: 0.82rem;
    line-height: 1.6;
}

.cheatsheet-points li {
    margin-bottom: 0.3rem;
}

.sheet-note {
    font-size: 0.75rem;
    color: var(--color-ink-faint);
    text-align: center;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--color-border);
}

.question-block {
    background: var(--color-surface-low);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.35rem;
    margin-bottom: 0.9rem;
}

.question-text {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-ink);
    margin-bottom: 0.85rem;
}

.mcq-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mcq-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--color-surface-lowest);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    padding: 0.7rem 1.1rem;
    font-size: 0.85rem;
    color: var(--color-ink);
}

.mcq-option.checked {
    border-color: var(--color-primary);
    background: var(--color-secondary-container);
    font-weight: 700;
}

.mcq-radio {
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    position: relative;
}

.mcq-option.checked .mcq-radio {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.mcq-option.checked .mcq-radio::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-surface-lowest);
}

.answer-box {
    background: var(--color-surface-lowest);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    min-height: 3.5rem;
    font-size: 0.85rem;
    color: var(--color-ink-faint);
}

.submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.85rem 0.85rem 1.5rem;
    border-radius: var(--radius-full);
}

.status-message {
    font-size: 0.85rem;
    color: var(--color-ink-faint);
}

.screen-graph {
    display: flex;
    flex-direction: column;
}

.graph-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--color-surface-low);
    background-image: radial-gradient(var(--color-dot-faint) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.graph-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.graph-edge {
    stroke: var(--color-secondary);
    stroke-opacity: 0.35;
    stroke-width: 1.5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.screen.on .graph-edge {
    animation: draw 0.7s ease 0.2s forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

.graph-node-group {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.screen.on .graph-node-group {
    animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop {
    from {
        opacity: 0;
        scale: 0.4;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.graph-node-circle.mastered {
    fill: var(--color-node-mastered);
}

.graph-node-circle.learning {
    fill: var(--color-node-learning);
}

.graph-node-circle.new {
    fill: var(--color-node-new);
}

.graph-node-circle.field-new {
    fill: var(--color-node-field-new);
}

.graph-node-label {
    fill: var(--color-node-label);
    font-family: inherit;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.graph-node-label.dim {
    fill: var(--color-secondary);
}

.graph-fs {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-fab);
    background: var(--color-primary-container);
    color: var(--color-ink);
    box-shadow: var(--shadow-fab);
}

.graph-legend-stack {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.graph-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink-soft);
    background: var(--color-surface-low);
    border-radius: var(--radius-full);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-raised);
}

.graph-legend-dots {
    display: inline-flex;
}

.legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: var(--radius-full);
    display: inline-block;
}

.graph-legend-dots .legend-dot {
    box-shadow: 0 0 0 2px var(--color-surface-low);
}

.graph-legend-dots .legend-dot + .legend-dot {
    margin-left: -0.28rem;
}

.legend-dot.mastered {
    background: var(--color-node-mastered);
}

.legend-dot.learning {
    background: var(--color-node-learning);
}

.legend-dot.new {
    background: var(--color-node-new);
}

.graph-legend-card {
    background: var(--color-surface-low);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-raised);
    max-width: 15rem;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.graph-legend-level {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.graph-legend-level .legend-dot {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.graph-legend-level-text {
    display: flex;
    flex-direction: column;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--color-ink-soft);
}

.graph-legend-level-text strong {
    color: var(--color-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.band {
    position: relative;
    padding: 6rem 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.band.flat {
    position: relative;
    z-index: 1;
    background: var(--color-surface-low);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 6rem clamp(1rem, 4vw, 3rem);
}

.band-inner {
    width: 100%;
    max-width: 68rem;
    min-width: 0;
    margin: 0 auto;
}

.band-head {
    max-width: 42rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.band-head h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.band-head p {
    font-size: 1rem;
}



.strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.tile {
    background: var(--color-surface-lowest);
    border: var(--card-edge);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift-sm);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tile .ico {
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.35rem;
}

.tile h3 {
    font-size: 0.88rem;
    font-weight: 800;
}

.tile p,
.tile .m {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-ink-faint);
}

.tile .k {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--color-ink);
}

.term {
    background: var(--color-surface-lowest);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift-sm);
    overflow: hidden;
}

.term-top {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
}

.term-top i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-border);
}

.term-top .lbl {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-ink-faint);
}

.term pre {
    padding: 1.25rem 1.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.75;
    color: var(--color-ink);
    overflow-x: auto;
}

.term .c {
    color: var(--color-ink-faint);
}

.term .g {
    color: var(--color-primary);
}

.credit {
    padding: 6rem 1.5rem 0;
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.credit-card {
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    background: color-mix(in srgb, var(--color-secondary-container) 42%, var(--color-paper));
    box-shadow: var(--shadow-lift-sm);
    padding: 1.75rem 2rem 2rem;
}

.credit-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.9rem;
}

.credit h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

.credit p + p {
    margin-top: 0.9rem;
}

.close {
    padding: 6rem 1.5rem 1.5rem;
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.close::before {
    inset: -2rem -4rem 0;
}

.close-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.close h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

.close p {
    margin-bottom: 2rem;
}

.interest-form[hidden] {
    display: none;
}

.interest-form {
    display: flex;
    gap: 0.5rem;
    background: var(--color-surface-lowest);
    border: 1.5px solid var(--color-ink);
    border-radius: var(--radius-full);
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    box-shadow: var(--shadow-offset);
    margin-bottom: 1rem;
    text-align: left;
}

.text-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    color: var(--color-ink);
}

.interest-form:has(.text-input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.text-input::placeholder {
    color: var(--color-ink-soft);
    opacity: 0.6;
}

.text-input:disabled {
    opacity: 0.6;
}

.interest-note {
    font-size: 0.9rem;
    color: var(--color-ink-faint);
    margin-bottom: 2rem;
}

.interest-note[data-tone="done"] {
    color: var(--color-primary);
    font-weight: 600;
}

.interest-note[data-tone="warn"] {
    color: var(--color-danger);
    font-weight: 600;
}

.actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.footer {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    padding: 2rem 1.5rem 0;
    margin: 0 auto;
    font-size: 0.85rem;
    color: var(--color-ink-faint);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@media (max-width: 1080px) {
    .appsticky {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 1.5rem;

        padding: 4.25rem clamp(1rem, 4vw, 3rem) 1.5rem;
    }

    .rail {
        order: 2;
        flex-direction: row;
        justify-content: center;
    }

    .rail-label {
        display: none;
    }

    .rail .gen-pill {
        white-space: nowrap;
        padding: 0.55rem 1.1rem;
        font-size: 0.78rem;
    }

    .rail .gen-pill:not(.active) {
        width: 0.55rem;
        height: 0.55rem;
        padding: 0;
        border-radius: var(--radius-full);
        background: var(--color-border);
        align-self: center;
    }

    .rail .gen-pill.done {
        background: var(--color-primary-light);
    }

    .rail .gen-pill:not(.active) .gen-pill-left {
        display: none;
    }

    .rail {
        align-items: center;
        gap: 0.45rem;
    }

    .frame {
        order: 1;
        height: min(40rem, calc(100svh - 12.75rem));
    }

    .course-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-sidebar {
        display: none;
    }

    .pin {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        opacity: 1;
        transform: none;
    }

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

@media (max-width: 640px) {
    .hero {
        padding: 5.5rem 1.25rem 2rem;
    }

    .description {
        font-size: 0.95rem;
        text-align: center;
    }

    .course-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-header {
        flex-wrap: wrap;
    }

    .button.small {
        padding: 0.55rem 1rem;
    }

    .boundary-card {
        gap: 0.75rem;
        padding: 0.9rem 0.9rem 0.9rem 1.1rem;
    }

    .boundary-title {
        display: none;
    }

    .boundary-eyebrow {
        flex: 1;
        min-width: 0;
        white-space: normal;
    }

    .boundary-btn {
        padding: 0.5rem 0.9rem;
    }

    .top-nav-links {
        display: none;
    }

    .hamburger {
        display: inline-flex;
    }

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

    .band {
        padding: 4rem 0;
    }

    .band.flat {
        padding: 4rem 1.25rem;
    }

    .interest-form {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .interest-form:has(.text-input:focus-visible) {
        outline: none;
    }

    .interest-form .text-input:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }

    .interest-form .text-input {
        background: var(--color-surface-lowest);
        border: 1.5px solid var(--color-ink);
        border-radius: var(--radius-full);
        padding: 0.9rem 1.5rem;
        box-shadow: var(--shadow-offset);
    }

    .actions {
        flex-direction: column;
    }
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wordmark,
    :root:not([data-theme="light"]) .top-nav-logo img {
        content: url("parcourse-wordmark-dark.svg");
    }
}

:root[data-theme="dark"] .wordmark,
:root[data-theme="dark"] .top-nav-logo img {
    content: url("parcourse-wordmark-dark.svg");
}

.navpill {
    position: fixed;
    top: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-paper) 86%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pill);
}

.navpill-home {
    display: flex;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    transition: background 0.15s ease;
}

.navpill-home:hover {
    background: var(--color-surface-high);
}

.navpill-sep {
    width: 1px;
    height: 1rem;
    background: var(--color-border);
    flex: none;
}

.navpill-where {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s ease, opacity 0.25s ease;
}

.navpill.deep .navpill-where {
    max-width: 16rem;
    opacity: 1;
}

.navpill-current {
    appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-ink);
    transition: background 0.15s ease;
}

.navpill-current:hover {
    background: var(--color-surface-high);
}

.navpill-chev {
    color: var(--color-ink-faint);
    transition: transform 0.2s ease;
}

.navpill-current[aria-expanded="true"] .navpill-chev {
    transform: rotate(180deg);
}

.navpill-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 13rem;
    list-style: none;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-lowest);
    border: var(--card-edge);
    box-shadow: var(--shadow-menu);
}

.navpill-menu button {
    appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-soft);
    transition: background 0.12s ease, color 0.12s ease;
}

.navpill-menu button:hover {
    background: var(--color-surface-low);
    color: var(--color-ink);
}

.navpill-menu button[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 800;
}

.navpill-theme {
    display: flex;
    gap: 0.1rem;
}

.navpill-theme button {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    padding: 0.35rem;
    border-radius: var(--radius-full);
    color: var(--color-ink-faint);
    transition: background 0.12s ease, color 0.12s ease;
}

.navpill-theme button:hover {
    color: var(--color-ink);
}

.navpill-theme button.active {
    background: var(--color-surface-lowest);
    color: var(--color-primary);
    box-shadow: var(--shadow-pill);
}

.navpill-cta {
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--color-primary);
    color: var(--color-on-accent);
    transition: background 0.15s ease;
}

.navpill-cta:hover {
    background: var(--color-primary-hover);
}

.navpill-cta svg {
    display: none;
}

.cue {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    pointer-events: none;
}

.cue svg {
    animation: nudge 2s ease-in-out infinite;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--read, 0));
    background: var(--color-primary);
    z-index: 61;
}

.graph-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.graph-granularity-pills {
    --graph-pill-pad-x: 1.1rem;
    display: flex;
    align-items: center;
    background: var(--color-surface-low);
    border-radius: var(--radius-full);
    padding: 0.25rem;
}

.graph-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-soft);
    white-space: nowrap;
    padding: 0.45rem var(--graph-pill-pad-x);
    border-radius: var(--radius-full);
}

.graph-pill.active {
    background: var(--color-secondary-container);
    color: var(--color-primary);
}

.graph-pill-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.graph-pill-count {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.6;
}

.results-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.score-stage {
    position: relative;
    padding: 1.15rem;
}

.score-orbit,
.score-deco-frame {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    transform: rotate(6deg);
}

.score-deco-frame {
    border: 3px dashed var(--color-primary-light);
    opacity: 0.35;
}

.score-blob-tr {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--color-deco-pink);
}

.score-blob-bl {
    position: absolute;
    bottom: -0.625rem;
    left: -0.625rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-deco-green);
    transform: rotate(12deg);
}

.score-circle {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
}

.score-circle.small {
    width: 6.5rem;
    height: 6.5rem;
    margin-inline: auto;
}

.score-circle.small .score-ring-big {
    font-size: 1.5rem;
}

.score-circle.small .score-ring-denom {
    font-size: 0.85rem;
}

.score-circle.small .score-ring-sub {
    font-size: 0.55rem;
}

.score-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring-bg {
    fill: none;
    stroke: var(--color-surface-high);
    stroke-width: 7;
    stroke-linecap: round;
}

.score-ring-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 1.1s ease 0.3s;
}

.screen.on .score-ring-fill {
    stroke-dashoffset: 66;
}

.score-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-ring-big {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-ink);
}

.score-ring-denom {
    font-size: 1rem;
    color: var(--color-ink-faint);
}

.score-ring-sub {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-ink-faint);
    margin-top: 0.2rem;
}

.results-headline {
    font-size: 1.35rem;
    font-weight: 800;
}

.results-subtitle {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.result-card {
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.result-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.result-feedback {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-ink-soft);
    padding-left: 2rem;
}

.result-card-num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-high);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.result-card .question-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.82rem;
}

.tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.tag.sage {
    background: var(--color-secondary-container);
    color: var(--color-primary);
}

.tag.brick {
    background: var(--color-danger-container);
    color: var(--color-danger);
}

.tutor-card {
    background: var(--color-secondary-container);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}

.tutor-card-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.tutor-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-ink);
    margin-bottom: 0.5rem;
}

.tutor-row-icon {
    color: var(--color-primary);
    font-weight: 800;
    flex-shrink: 0;
}

.retake-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-high);
    color: var(--color-ink);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.retake-btn.share {
    background: var(--color-primary);
    color: var(--color-on-accent);
}

.admin-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-kpi {
    background: var(--color-surface-lowest);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-lift-sm);
    border: var(--card-edge);
}

.admin-kpi b {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    display: block;
    line-height: 1.2;
}

.admin-kpi span {
    font-size: 0.78rem;
    color: var(--color-ink-faint);
}

.user-group-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
    margin-bottom: 0.5rem;
}

.user-table {
    padding: 0.75rem;
    border-radius: var(--radius-lg);
}

.user-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-lg);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--color-secondary-container);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.user-row-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-ink);
}

.user-row-email {
    font-size: 0.75rem;
    color: var(--color-ink-faint);
}


.user-row-courses {
    font-size: 0.78rem;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

.icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-high);
    color: var(--color-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tile.pick {
    position: relative;
    border: 1.5px solid var(--color-primary);
    box-shadow: var(--shadow-offset);
}

.tip {
    position: relative;
    cursor: help;
}

.tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    z-index: 30;
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-lowest);
    color: var(--color-ink-soft);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    box-shadow: var(--shadow-menu);
    border: 1px solid var(--color-border);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tip:hover::after,
.tip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tile-star {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-primary);
}


@media (max-width: 1080px) {
    .results-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }

}

@media (max-width: 640px) {

    .graph-toolbar {
        justify-content: center;
    }

    .graph-pill span {
        display: none;
    }

    .admin-kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-row-courses,
    .icon-btn {
        display: none;
    }
}

.graph-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.graph-zoom-controls,
.graph-export-controls {
    display: flex;
    gap: 0.35rem;
}


.share-stage {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
    --os-panel: var(--color-paper);
    --os-tile: var(--color-surface-high);
    --os-ink: var(--color-ink);
    --os-ink-soft: var(--color-ink-faint);
    --os-line: var(--line);
}

.share-card {
    position: relative;
    z-index: 2;
    width: min(24rem, 100%);
    background-color: var(--color-paper);
    background-image: radial-gradient(var(--color-dot) 1.4px, transparent 1.4px);
    background-size: var(--dot-grid) var(--dot-grid);
    background-position: calc(var(--dot-grid) / 2) calc(var(--dot-grid) / 2);
    border: var(--card-edge);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-halo);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.share-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.share-card-head img {
    height: 1.4rem;
    width: auto;
}

.share-card-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.share-card-band {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
}

.share-card-analysis {
    position: relative;
    background: var(--color-surface-lowest);
    border: 1px solid var(--color-hairline-sage);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.1rem 0.9rem;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-ink-soft);
}

.share-card-pill {
    position: absolute;
    top: -0.6rem;
    left: 1rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-secondary-container);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.7rem;
}

.share-sheet {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: min(23rem, 100%);
    background: var(--os-panel);
    border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: var(--shadow-tail-fade);
    padding: 0.9rem 1.1rem 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.screen.on .share-sheet {
    transform: translate(-50%, 0);
}

.share-sheet-grip {
    width: 2.5rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--os-ink-soft);
    opacity: 0.5;
    margin: 0 auto 0.9rem;
}

.share-sheet-file {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--os-line);
    margin-bottom: 0.9rem;
}

.share-sheet-file > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.share-sheet-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.55rem;
    background: var(--os-tile);
    border: 1px solid var(--os-line);
    color: var(--os-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.share-sheet-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--os-ink);
}

.share-sheet-meta {
    font-size: 0.72rem;
    color: var(--os-ink-soft);
}

.share-sheet-targets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    text-align: center;
}

.share-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    color: var(--os-ink-soft);
}

.share-target span:first-child {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--os-tile);
    border: 1px solid var(--os-line);
    color: var(--os-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.extshot .frame {
    width: 100%;
    height: min(36rem, calc(100svh - 21rem));
    order: 0;
    max-width: 58rem;
    margin: 0 auto;
    background-image: none;
}

.ext-pins {
    position: absolute;
    top: 16.5rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.extshot .pin {
    position: static;
    opacity: 1;
    transform: none;
}

.ext-pins .pin {
    max-width: 15.5rem;
}

@media (max-height: 860px) {
    .extshot {
        padding: 3rem 0;
    }

    .extshot .frame {
        height: min(36rem, calc(100svh - 15rem));
    }
}

@media (max-height: 690px) {
    .ext-pins .pin + .pin {
        display: none;
    }
}

.browser-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem 0;
    background: var(--color-surface-low);
    flex-shrink: 0;
}

.browser-dots {
    display: flex;
    gap: 0.3rem;
    margin-right: 0.5rem;
}

.browser-dots i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
}

.btab {
    max-width: 13rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-tab) var(--radius-tab) 0 0;
    color: var(--color-ink-faint);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btab.on {
    background: var(--color-paper);
    color: var(--color-ink);
}

.browser-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--color-paper);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.browser-url {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-low);
    color: var(--color-ink-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-url b {
    color: var(--color-ink);
}

.ext-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--color-secondary-container);
}

.ext-badge {
    position: absolute;
    right: -0.15rem;
    bottom: -0.15rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    border: 2px solid var(--color-paper);
}

.browser-body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 1.25rem;
    display: flex;
}

.ext-watch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(34rem, 100%);
    align-self: center;
    min-height: 0;
    max-height: 100%;
}

.ext-video {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: linear-gradient(140deg, var(--color-secondary-container), var(--color-surface-high));
}

.ext-play {
    width: 0;
    height: 0;
    border-left: 1.1rem solid var(--color-primary);
    border-top: 0.7rem solid transparent;
    border-bottom: 0.7rem solid transparent;
    margin-left: 0.3rem;
}

.ext-title {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ext-meta {
    font-size: 0.78rem;
    color: var(--color-ink-faint);
}

.ext-popup {
    position: absolute;
    top: -0.35rem;
    right: 0.75rem;
    width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tab);
    box-shadow: var(--shadow-menu);
}

.ext-popup-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.ext-popup-title {
    color: var(--color-ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.ext-popup-go {
    justify-content: center;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
}

.ext-popup-host {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.ext-popup-host svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .extshot .frame {
        height: auto;
    }

    .browser-tabs .btab:not(.on),
    .browser-dots {
        display: none;
    }

    .ext-watch {
        width: 100%;
    }

    .ext-popup {
        display: none;
    }
}

@media (max-width: 860px) and (max-height: 820px) {
    .extshot {
        padding: 2rem 0;
    }

    .extshot .band-head {
        margin-bottom: 1rem;
    }
}

.stateact {
    position: relative;
    z-index: 1;
    background: var(--color-surface-low);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.statesticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    overflow: hidden;
}

.state-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: 2rem;
}

.state-stack {
    position: relative;
    width: min(46rem, 100%);
    min-height: 14rem;
}

.state-line {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.state-line.on {
    opacity: 1;
}

.state-line h2 {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.state-line p {
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    max-width: 100%;
}

.state-line.payoff h2 {
    color: var(--color-primary);
    font-style: italic;
}

.state-ticks {
    display: flex;
    gap: 0.4rem;
    margin-top: 2.5rem;
}

.state-tick {
    width: 1.75rem;
    height: 0.2rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: background 0.3s ease;
}

.state-tick.on {
    background: var(--color-primary);
}

@media (max-width: 640px) {
    .share-card-band {
        grid-template-columns: minmax(0, 1fr);
    }

    .share-sheet-targets {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .graph-toolbar-right {
        display: none;
    }
}

html {
    scroll-snap-type: y mandatory;
}


@media (hover: none) {
    .canvas-glow {
        display: none;
    }
}

.snap {
    display: block;
    height: 0;
}

.hero,
.band,
.credit,
.close,
.snap,
.spacer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (max-width: 1080px) {
    html {
        scroll-snap-type: y mandatory;
    }

    .scroll-progress {
        height: 3px;
    }
}

@media (min-width: 1081px) {
    .band-head {
        max-width: none;
    }

    .appsticky,
    .statesticky {
        padding-top: clamp(4rem, 12vh, 7rem);
        padding-bottom: clamp(3rem, 6vh, 4.5rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (max-width: 640px) {
    .term pre {
        padding: 0.9rem 0.75rem;
        font-size: 0.68rem;
    }

    .band {
        padding: 3rem 0;
    }

    .band-head {
        margin-bottom: 1.5rem;
    }

    .strip {
        gap: 0.6rem;
    }

    .tile {
        padding: 0.85rem 0.95rem;
        gap: 0.2rem;
    }

    .tile .ico {
        margin-bottom: 0.2rem;
    }

    .tile h3 {
        font-size: 0.84rem;
    }

    .tile p,
    .tile .m {
        font-size: 0.74rem;
        line-height: 1.35;
    }
}

@media (max-height: 760px) {
    .hero {
        padding: 2.5rem 1.25rem 2.5rem;
    }

    .hero .wordmark {
        height: 2.5rem;
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .hero h1 {
        margin-bottom: 0.75rem;
    }

    .description {
        margin-bottom: 1.25rem;
    }

    .band {
        padding: 2.5rem 0;
    }

    .band-head {
        gap: 0.6rem;
        margin-bottom: 1.25rem;
    }

    .credit {
        padding: 3rem 1.25rem 0;
    }

    .credit-card {
        padding: 1.25rem 1.4rem 1.5rem;
    }

    .credit h2 {
        margin-bottom: 0.75rem;
    }

    .credit p + p {
        margin-top: 0.7rem;
    }

    .close {
        padding: 1.5rem 1.25rem 0.75rem;
    }

    .close h2 {
        margin-bottom: 0.75rem;
    }

    .close p {
        margin-bottom: 0.75rem;
    }

    .interest-note {
        margin-bottom: 0.75rem;
    }

    .footer {
        padding-top: 1.25rem;
        gap: 0.35rem;
        font-size: 0.78rem;
    }

    .strip {
        gap: 0.5rem;
    }

    .tile {
        padding: 0.7rem 0.85rem;
    }

    .tile p,
    .tile .m {
        font-size: 0.72rem;
        line-height: 1.3;
    }
}

@media (max-height: 700px) {
    .band {
        padding: 2rem 0;
    }

    .band-head {
        margin-bottom: 0.75rem;
    }

    .strip {
        gap: 0.3rem;
    }

    .tile {
        padding: 0.6rem 0.75rem;
        gap: 0.15rem;
    }

    .tile .ico {
        margin-bottom: 0.1rem;
    }

    .tile .ico svg {
        width: 13px;
        height: 13px;
    }

    .tile h3 {
        font-size: 0.8rem;
    }

    .tile p,
    .tile .m {
        font-size: 0.7rem;
        line-height: 1.25;
    }
}

@media (max-width: 768px) {
    .navpill {
        top: 0.6rem;
        gap: 0.35rem;
        padding: 0.3rem;
    }

    .navpill.deep .navpill-where {
        max-width: 9.5rem;
    }

    .navpill-current {
        min-width: 0;
    }

    .navpill-current span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navpill-cta {
        padding: 0.45rem;
    }

    .navpill-cta span {
        display: none;
    }

    .navpill-cta svg {
        display: block;
    }
}