/*
 * WorksheetGenerator Reframe — September 2026
 * Mirrors DevelopChess's warm-paper product language while retaining the
 * worksheet application's existing layout and interaction contracts.
 */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --ink: #22211f;
    --ink-soft: #4f4b47;
    --muted: #827b75;
    --paper: #fbf8f3;
    --paper-strong: #f5f0e9;
    --sheet: #fffdfa;
    --line: #dfd9d2;
    --line-hi: #cfc7bf;
    --accent: #4e62dc;
    --accent-deep: #3548bd;
    --accent-ink: #3448b8;
    --accent-soft: #b9c2ff;
    --accent-pale: #eef0ff;
    --danger: #b7453e;
    --danger-soft: #fff0ee;
    --card-blue: #f0f4ff;
    --card-pink: #fff1f6;
    --card-yellow: #fff7dd;
    --card-green: #eefaf6;
    --card-lilac: #f4f0ff;
    --card-peach: #fff2e9;
    --card-aqua: #edf9f8;
    --card-coral: #fff0ee;
    --card-sky: #eef7fb;
    --card-lime: #f4f8e9;
    --card-sand: #f8f1e6;
    --card-violet: #f2effd;
    --surface: #fffdfa;
    --surface-raised: #fffaf5;
    --surface-soft: #f5f0e9;
    --surface-input: #fff;
    --display: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sans: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow: 0 18px 50px rgba(52, 43, 36, .10);
    --shadow-soft: 0 10px 28px rgba(52, 43, 36, .07);
    --focus: 0 0 0 3px rgba(78, 98, 220, .18);
}

* {
    scrollbar-color: #cec5bc #f5f0e9;
}

html {
    background: var(--paper);
}

body,
body.worksheet-site-page,
body.worksheet-home-page {
    min-width: 0;
    background:
        radial-gradient(circle at 14% -8rem, rgba(78, 98, 220, .12), transparent 32rem),
        radial-gradient(circle at 96% 16rem, rgba(117, 87, 214, .055), transparent 30rem),
        radial-gradient(rgba(34, 33, 31, .026) .7px, transparent .8px),
        var(--paper);
    background-attachment: fixed;
    background-size: auto, auto, 5px 5px, auto;
    color: var(--ink);
    font: 15px/1.55 var(--sans);
    letter-spacing: -.01em;
}

::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

a {
    text-underline-offset: 3px;
}

button,
input,
select,
textarea {
    font-family: var(--sans);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px;
}

.skip-link {
    z-index: 1000;
    padding: 11px 15px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--surface-raised);
    color: var(--ink);
}

/* Floating command header */
.site-header {
    position: sticky;
    z-index: 210;
    top: 10px;
    width: min(1180px, calc(100% - 24px));
    max-width: none;
    min-height: 66px;
    height: auto;
    margin: 12px auto 0;
    padding: 9px 10px;
    border: 1px solid rgba(223, 217, 210, .88);
    border-radius: 22px;
    background: rgba(255, 253, 250, .92);
    box-shadow: 0 14px 42px rgba(52, 43, 36, .08);
    backdrop-filter: blur(18px) saturate(1.35);
}

.wordmark {
    gap: 10px;
    color: var(--ink);
    font: 600 16px/1 var(--display);
    letter-spacing: -.045em;
    text-transform: none;
}

.wordmark small {
    color: var(--muted);
    font-size: .62em;
}

.site-header .brand-mark {
    width: auto;
    height: 40px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.site-header nav {
    gap: 3px;
    padding: 4px;
    border: 1px solid #e8e1d9;
    border-radius: 999px;
    background: rgba(255, 253, 250, .86);
    box-shadow: 0 8px 24px rgba(52, 43, 36, .045);
}

.site-header nav a,
.site-header nav .link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #68615c;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav .link-button:hover,
.site-header nav .link-button:focus-visible {
    border-color: var(--line-hi);
    background: #fffaf5;
    color: var(--ink);
}

.site-header nav a[aria-current="page"] {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(78, 98, 220, .18);
    color: #fff;
    font-weight: 600;
}

.site-header nav .sign-in-link {
    min-height: 38px;
    padding: 8px 14px;
    border-color: var(--accent-deep);
    background: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        0 3px 0 var(--accent-deep),
        0 8px 16px rgba(53, 72, 189, .20);
    color: #fff;
    font-weight: 600;
}

.site-header nav .sign-in-link:hover,
.site-header nav .sign-in-link:focus-visible {
    border-color: #293aa9;
    background: #4357cc;
    color: #fff;
}

.site-header nav .sign-in-link:active {
    box-shadow: inset 0 1px 3px rgba(34, 33, 31, .16), 0 1px 0 var(--accent-deep);
    translate: 0 2px;
}

.nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line-hi);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 6px 16px rgba(52, 43, 36, .07);
    color: var(--ink);
}

/* Foundation */
.eyebrow,
.hero-brand,
.control-kicker {
    color: var(--accent-ink);
    font: 800 10px/1.2 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.primary-button,
.secondary-button,
.small-button,
.danger-button {
    --button-face: var(--surface);
    --button-edge: #bfb4aa;
    --button-shadow: rgba(52, 43, 36, .12);
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--button-edge);
    border-radius: 13px;
    background: var(--button-face);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .78),
        inset 0 -1px 0 rgba(52, 43, 36, .10),
        0 4px 0 var(--button-edge),
        0 10px 18px var(--button-shadow);
    color: var(--ink);
    font: 600 13px/1 var(--sans);
    letter-spacing: -.01em;
    text-shadow: none;
    translate: 0 0;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .09s ease, color .12s ease, translate .09s ease;
}

.primary-button {
    --button-face: var(--accent);
    --button-edge: var(--accent-deep);
    --button-shadow: rgba(53, 72, 189, .22);
    border-color: var(--button-edge);
    background: var(--button-face);
    color: #fff;
}

.secondary-button {
    --button-face: var(--surface);
    --button-edge: #bfb4aa;
    --button-shadow: rgba(52, 43, 36, .12);
    border-color: var(--button-edge);
    background: var(--button-face);
    color: var(--ink);
}

.small-button {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .75), 0 2px 0 var(--button-edge), 0 6px 12px var(--button-shadow);
    font-size: 11px;
}

.danger-button {
    --button-face: #d95b54;
    --button-edge: #a83934;
    --button-shadow: rgba(168, 57, 52, .2);
    color: #fff;
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.small-button:hover:not(:disabled),
.danger-button:hover:not(:disabled) {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        inset 0 -1px 0 rgba(52, 43, 36, .10),
        0 5px 0 var(--button-edge),
        0 12px 22px var(--button-shadow);
    translate: 0 -1px;
}

.primary-button:hover:not(:disabled) {
    --button-face: #4357cc;
    --button-edge: var(--accent-deep);
    background: var(--button-face);
    border-color: var(--button-edge);
    color: #fff;
}

.secondary-button:hover:not(:disabled),
.small-button:hover:not(:disabled) {
    --button-face: var(--accent-pale);
    --button-edge: #9aa7ee;
    background: var(--accent-pale);
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.small-button:active:not(:disabled),
.danger-button:active:not(:disabled) {
    box-shadow: inset 0 1px 3px rgba(52, 43, 36, .14), 0 1px 0 var(--button-edge), 0 4px 8px var(--button-shadow);
    translate: 0 3px;
}

.primary-button:active:not(:disabled) {
    background: var(--accent-deep);
    color: #fff;
}

.primary-button:disabled,
.secondary-button:disabled,
.small-button:disabled {
    box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 2px 0 var(--button-edge);
    translate: 0 2px;
}

.field > span,
.field > label,
.template-library-tools label span,
.desk-tool-card label > span {
    color: #5f5954;
    font: 780 9px/1.2 var(--mono);
    letter-spacing: .12em;
}

.field input,
.field select,
.field textarea,
.question-edit-form input,
.question-edit-form textarea,
.template-library-tools input,
.template-library-tools select,
.library-toolbar input,
.library-toolbar select,
.desk-tool-card input,
.assignment-questions input:not([type="radio"]):not([type="checkbox"]),
.assignment-questions textarea,
.assignment-questions select {
    border-color: #d7d0c8;
    border-radius: 13px;
    background: var(--surface-input);
    box-shadow: none;
    color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder,
.template-library-tools input::placeholder,
.library-toolbar input::placeholder {
    color: #9b948e;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.template-library-tools input:focus,
.template-library-tools select:focus,
.library-toolbar input:focus,
.library-toolbar select:focus,
.desk-tool-card input:focus {
    border-color: var(--accent);
    box-shadow: var(--focus);
    outline: 0;
}

/* Homepage */
.capability-strip {
    width: min(1180px, calc(100% - 24px));
    height: auto;
    min-height: 34px;
    margin: 8px auto 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
}

.capability-strip span {
    padding: 5px 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 760 9px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.capability-strip span + span::before {
    margin-right: 14px;
    color: #cec5bc;
    content: "/";
}

.hero.compact-hero {
    position: relative;
    width: min(1180px, calc(100% - 24px));
    max-width: none;
    margin: 0 auto;
    padding: 66px 30px 36px;
    overflow: hidden;
    text-align: left;
}

.hero.compact-hero::after {
    position: absolute;
    z-index: -1;
    right: 7%;
    top: 49%;
    color: rgba(78, 98, 220, .075);
    content: "✎";
    font: 290px/.72 Georgia, serif;
    filter: drop-shadow(0 20px 35px rgba(52, 43, 36, .10));
    transform: translateY(-50%) rotate(-9deg);
}

.hero.compact-hero .hero-brand {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-ink) !important;
}

.hero.compact-hero h1 {
    max-width: 900px;
    margin: 10px 0 15px;
    color: var(--ink);
    font: 700 clamp(46px, 5.6vw, 72px)/.94 var(--display);
    letter-spacing: -.075em;
}

.hero.compact-hero h1 em {
    color: var(--accent-ink);
    font-style: normal;
    font-weight: inherit;
}

.hero.compact-hero > p:last-of-type {
    max-width: 680px;
    margin: 0;
    color: #68615c;
    font-size: 18px;
    line-height: 1.58;
}

.generator-wrap {
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 0 20px;
}

.generator-card {
    padding: 0 26px 25px;
    overflow: hidden;
    border-color: var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.generator-product-tabs {
    gap: 5px;
    margin: 0 -26px 22px;
    padding: 6px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.generator-product-tabs button,
.mode-tabs button {
    min-height: 50px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
}

.generator-product-tabs button.active,
.mode-tabs button.active {
    border-color: #cec5bc;
    background: linear-gradient(180deg, #f5f0e9, #fffaf5);
    box-shadow: inset 0 -3px var(--accent), inset 0 1px rgba(255, 255, 255, .4);
    color: var(--ink);
}

.generator-product-tabs button:first-child,
.generator-product-tabs button:last-child {
    background-color: transparent;
}

.generator-product-tabs span {
    font-size: 14px;
    font-weight: 650;
}

.generator-product-tabs small {
    color: var(--muted);
    font: 700 9px/1.2 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.generator-heading h2 {
    color: var(--ink);
    font: 700 27px/1.08 var(--display);
    letter-spacing: -.045em;
}

.generator-heading p {
    color: var(--muted);
    font-size: 14px;
}

.paper-note,
.coach-note {
    border-color: #d9cfaa;
    border-radius: 10px;
    background: var(--card-yellow);
    color: #80661e;
    box-shadow: none;
    transform: none;
    font: 600 12px/1.4 var(--sans);
}

.paper-note::before {
    display: none;
}

.custom-generator-form {
    margin-top: 20px;
}

.custom-create-row,
.generate-row {
    border-top-color: var(--line);
}

.prompt-panel,
.generator-options {
    border-color: var(--line);
}

.prompt-panel {
    border-radius: 16px;
    background: var(--surface-raised);
}

.ai-lock-card {
    border-color: var(--line);
    border-radius: 18px;
    background: rgba(255, 253, 250, .97);
    box-shadow: var(--shadow);
}

.profile-applied-note {
    border-color: #ccd2f4;
    background: var(--accent-pale);
    color: var(--accent-ink);
}

.surprise-button,
.popular-create-status,
.seo-breadcrumbs a {
    color: var(--accent-ink) !important;
}

.check {
    background: var(--accent-pale);
    color: var(--accent-ink);
}

.pencil-progress {
    border-radius: 999px;
    background: #e8e1d9;
}

.pencil-progress span {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

.home-section {
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 0 20px;
}

.home-section#popular,
.home-section#teachers {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.section-heading {
    margin-bottom: 16px;
}

.section-heading h2,
.how-section h2 {
    color: var(--ink);
    font: 700 26px/1.08 var(--display);
    letter-spacing: -.045em;
}

.section-heading p {
    color: var(--muted);
    font-size: 13px;
}

.section-heading > a {
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 600;
}

.home-section .compact-cards,
.topic-grid {
    gap: 9px;
}

.topic-paper,
.template-library-card,
.worksheet-card,
.related-template-grid a,
.library-community-card,
.team-resource-list > article,
.assignment-questions > li,
.submission-review {
    --card-tint: rgba(78, 98, 220, .06);
    border-color: var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--card-tint), transparent 62%), var(--surface);
    box-shadow: 0 8px 22px rgba(52, 43, 36, .055);
    color: var(--ink);
}

.compact-cards > :nth-child(5n + 2),
.template-library-grid > :nth-child(5n + 2),
.worksheet-card-grid > :nth-child(5n + 2) {
    --card-tint: rgba(117, 87, 214, .075);
}

.compact-cards > :nth-child(5n + 3),
.template-library-grid > :nth-child(5n + 3),
.worksheet-card-grid > :nth-child(5n + 3) {
    --card-tint: rgba(7, 139, 116, .06);
}

.compact-cards > :nth-child(5n + 4),
.template-library-grid > :nth-child(5n + 4),
.worksheet-card-grid > :nth-child(5n + 4) {
    --card-tint: rgba(255, 200, 92, .10);
}

.compact-cards > :nth-child(5n + 5),
.template-library-grid > :nth-child(5n + 5),
.worksheet-card-grid > :nth-child(5n + 5) {
    --card-tint: rgba(201, 69, 63, .05);
}

.topic-paper:hover,
.template-library-card:hover,
.related-template-grid a:hover,
.library-community-card:hover {
    border-color: var(--accent-soft);
    background: linear-gradient(145deg, var(--card-tint), transparent 62%), var(--surface);
    box-shadow: 0 16px 34px rgba(52, 43, 36, .10);
    transform: translateY(-2px);
}

.topic-paper strong,
.template-library-card h3,
.worksheet-card h3 {
    font-family: var(--display);
    font-weight: 700;
}

.topic-paper span,
.template-library-card strong,
.worksheet-card a,
.worksheet-card button {
    color: var(--accent-ink);
}

.country-cards article {
    border-color: var(--line);
    border-radius: 16px;
    background: var(--surface-raised);
}

.country-cards h3 {
    font-family: var(--display);
    font-weight: 700;
}

.how-section {
    max-width: 1140px;
    margin: 0 auto 42px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .075), transparent 54%), var(--surface);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
}

.how-section .eyebrow {
    color: var(--accent-ink);
}

.how-section li {
    border-color: var(--line-hi);
}

.how-section li span {
    border-color: #c8bfb6;
    background: var(--surface);
    color: var(--accent-ink);
}

.how-section li strong {
    font-family: var(--display);
    font-weight: 650;
}

.how-section li p {
    color: var(--muted);
}

/* Library, pricing, and editorial pages */
.template-library-page,
.pricing-page,
.seo-page,
.dashboard-page,
.admin-page,
.account-page {
    width: min(1180px, calc(100% - 40px));
    max-width: none;
}

.template-library-page {
    margin-top: 0;
}

.template-library-hero,
.pricing-page .small-hero,
.seo-page > header,
.library-hero,
.library-item-hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto 26px;
    padding: 64px 30px 32px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.template-library-hero::after,
.pricing-page .small-hero::after,
.seo-page > header::after {
    position: absolute;
    z-index: -1;
    right: 6%;
    top: 52%;
    color: rgba(78, 98, 220, .07);
    content: "▤";
    font: 250px/.75 Georgia, serif;
    transform: translateY(-50%) rotate(-8deg);
}

.template-library-hero h1,
.pricing-page .small-hero h1,
.seo-page h1,
.library-hero h1,
.library-item-hero h1 {
    max-width: 900px;
    margin: 10px 0 15px;
    color: var(--ink);
    font: 700 clamp(40px, 5vw, 60px)/.94 var(--display);
    letter-spacing: -.072em;
}

.template-library-hero > p:not(.eyebrow),
.pricing-page .small-hero > p:last-child,
.seo-page > header > p:not(.eyebrow),
.library-hero p,
.library-item-hero > div > p {
    max-width: 700px;
    color: #68615c;
    font-size: 17px;
    line-height: 1.58;
}

.template-library-tools,
.pricing-grid article,
.template-focus-paper,
.faq-paper,
.seo-notes article,
.account-card,
.assignment-settings-card {
    border-color: var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.template-library-tools {
    padding: 17px;
}

.template-library-tools p {
    color: var(--muted);
}

.template-country-section {
    margin-top: 34px;
}

.template-library-grid {
    gap: 10px;
}

.template-library-card {
    min-height: 210px;
    padding: 18px;
}

.template-library-card small,
.template-library-card span {
    color: var(--muted);
}

.template-library-empty,
.empty-paper,
.empty-inline {
    border-color: var(--line-hi);
    border-radius: 18px;
    background: var(--surface-raised);
    color: var(--muted);
}

.pricing-grid {
    gap: 14px;
}

.pricing-grid article {
    padding: 28px;
}

.pricing-grid .featured {
    border: 1px solid var(--accent-soft);
    background: linear-gradient(145deg, rgba(78, 98, 220, .11), transparent 58%), var(--surface);
    box-shadow: var(--shadow);
}

.pricing-grid h2,
.price {
    font-family: var(--display);
    font-weight: 700;
}

.teacher-pro-label {
    border-color: var(--accent-soft);
    background: var(--accent-pale);
    color: var(--accent-ink);
}

.teacher-pro-icon {
    border-color: var(--accent-soft);
    background: #fff;
}

.seo-notes {
    gap: 12px;
}

.seo-notes article,
.template-focus-paper,
.faq-paper {
    padding: 24px;
}

.seo-notes article:nth-child(n),
.template-focus-paper,
.faq-paper {
    background: linear-gradient(145deg, rgba(78, 98, 220, .05), transparent 62%), var(--surface);
}

.related-template-grid {
    gap: 10px;
}

.legal-page {
    max-width: 800px;
    margin-top: 52px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.legal-page h1,
.legal-page h2 {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
}

.legal-page h1 {
    font-size: clamp(36px, 5vw, 48px);
    line-height: 1;
    letter-spacing: -.055em;
}

.auth-page {
    min-height: calc(100vh - 170px);
}

.auth-paper {
    max-width: 460px;
    padding: 34px;
    border-color: var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .065), transparent 55%), var(--surface);
    box-shadow: var(--shadow);
}

.auth-paper h1 {
    color: var(--ink);
    font: 700 37px/1.03 var(--display);
    letter-spacing: -.055em;
}

.error-page {
    width: min(720px, calc(100% - 24px));
    min-height: 55vh;
    margin: 42px auto;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .08), transparent 58%), var(--surface);
    box-shadow: var(--shadow);
}

.error-page h1 {
    font-family: var(--display);
    font-weight: 700;
}

/* Signed-in workspace */
.dashboard-page,
.account-page {
    margin-top: 0;
}

.desk-heading {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 26px;
    margin: 0 0 20px;
    padding: 58px 20px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.desk-heading h1 {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--ink);
    font: 700 clamp(36px, 4.6vw, 56px)/.96 var(--display);
    letter-spacing: -.068em;
}

.desk-heading-actions {
    gap: 9px;
}

.teacher-analytics {
    gap: 10px;
}

.teacher-analytics article {
    min-height: 96px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border-color: var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.teacher-analytics strong {
    color: var(--accent-ink);
    font: 700 29px/1 var(--display);
}

.teacher-analytics span {
    font: 760 9px/1.2 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dashboard-page > section {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 253, 250, .78);
    box-shadow: var(--shadow-soft);
}

.dashboard-page > .desk-tools {
    background: linear-gradient(145deg, rgba(78, 98, 220, .07), transparent 55%), var(--surface);
}

.desk-tool-card {
    border-color: var(--line);
    border-radius: 16px;
    background: var(--surface-raised);
}

.desk-tool-title > span {
    background: var(--accent-pale);
    color: var(--accent-ink);
}

.desk-tools-toggle-icon {
    border-color: var(--accent-soft);
    background: var(--surface);
}

.desk-tools-toggle-icon::before,
.desk-tools-toggle-icon::after {
    background: var(--accent);
}

.library-toolbar {
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-raised);
}

.worksheet-card-grid {
    gap: 10px;
}

.worksheet-card {
    min-height: 180px;
    padding: 18px;
}

.worksheet-card::before {
    display: none;
}

.card-organization span,
.card-organization em,
.variant-badge {
    background: var(--accent-pale);
    color: var(--accent-ink);
}

.account-grid {
    gap: 12px;
}

.account-card,
.assignment-settings-card {
    padding: 22px;
}

.assignment-page,
.assignment-results-page {
    width: min(920px, calc(100% - 28px));
    max-width: none;
    margin-top: 42px;
}

.assignment-hero {
    padding: 28px;
    border-color: var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .08), transparent 58%), var(--surface);
    box-shadow: var(--shadow-soft);
}

.assignment-questions > li,
.submission-review {
    border-radius: 16px;
}

/* Team and public library surfaces */
.teams-page,
.public-library-page,
.library-item-page,
.shared-resource-page {
    width: min(1180px, calc(100% - 32px));
}

.team-switcher,
.team-panel,
.team-brand-card,
.library-filter-panel,
.library-community-card,
.library-feedback-panel {
    border-color: var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.team-switcher > a:hover,
.team-switcher > a.is-active {
    background: var(--accent-pale);
}

.team-switcher > a > span,
.team-member-list > article > span,
.team-brand-mark {
    background: var(--team-color, var(--accent));
}

.team-admin-grid form,
.team-resource-columns > section {
    background: var(--surface-soft);
}

.team-member-list > article,
.submission-status-list > article,
.team-resource-list > article {
    border-color: var(--line);
}

.library-community-card {
    border-top-color: var(--accent);
}

.shared-sheet-viewport {
    border: 1px solid var(--line);
    background: var(--paper-strong);
}

/* Public worksheet handoff */
.shared-page {
    width: min(1120px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 0 0 90px;
}

.shared-page > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px 24px;
    margin: 0;
    padding: 52px 4px 24px;
}

.shared-page > header .eyebrow {
    grid-column: 1 / -1;
    margin: 0;
}

.shared-page > header h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font: 700 clamp(36px, 4.6vw, 56px)/.96 var(--display);
    letter-spacing: -.068em;
}

.shared-page > header > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.shared-page .shared-sheet {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #ebe6df;
    box-shadow: inset 0 2px 7px rgba(52, 43, 36, .08), var(--shadow-soft);
}

.share-cta {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    margin-top: 24px;
    padding: 27px 30px;
    border: 1px solid #1f2c75;
    border-radius: 22px;
    background: linear-gradient(145deg, #3548bd, #263474);
    box-shadow: var(--shadow);
    color: #fff;
}

.share-cta h2 {
    margin: 0;
    color: #fff;
    font: 700 clamp(23px, 2.5vw, 31px)/1.05 var(--display);
    letter-spacing: -.048em;
}

.share-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
}

.share-cta .primary-button {
    border-color: #fff;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 0 #ccd2f4, 0 8px 16px rgba(18, 27, 88, .24);
    color: var(--accent-deep);
}

.share-cta .primary-button:hover,
.share-cta .primary-button:focus-visible {
    background: var(--accent-pale);
    color: #263474;
}

/* Worksheet editor chrome */
.editor-shell {
    max-width: 1180px;
    padding-top: 0;
}

.editor-top {
    align-items: end;
    margin: 0 0 14px;
    padding: 46px 20px 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.editor-top h1 {
    max-width: 650px;
    margin: 5px 0 0;
    color: var(--ink);
    font: 700 clamp(30px, 3.4vw, 46px)/.98 var(--display);
    letter-spacing: -.062em;
}

.editor-access-note {
    min-height: 46px;
    padding: 9px 13px;
    border-color: var(--line);
    border-radius: 14px;
    background: var(--surface-raised);
}

.editor-access-note.is-saved {
    border-color: #bcded0;
    background: #eefaf6;
}

.editor-access-note.is-guest {
    border-color: #dfd2a6;
    background: var(--card-yellow);
}

.editor-grid {
    gap: 16px;
}

.editor-controls {
    overflow: hidden auto;
    border-color: var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.editor-accordion {
    border-color: var(--line);
}

.editor-accordion > summary {
    min-height: 58px;
    padding: 13px 15px;
    background: var(--surface);
}

.editor-accordion[open] > summary {
    border-color: var(--line);
    background: var(--surface-soft);
}

.editor-accordion > summary::after {
    color: var(--accent-ink);
}

.editor-accordion-content,
.editor-controls > section {
    padding: 14px 15px 16px;
}

.sheet-viewport {
    border-color: var(--line);
    border-radius: 20px;
    background: #ebe6df;
    box-shadow: inset 0 2px 7px rgba(52, 43, 36, .08);
}

.preview-label {
    color: var(--muted);
}

.editor-more-panel {
    border-color: var(--line);
    border-radius: 17px;
    background: rgba(255, 253, 250, .98);
    box-shadow: 0 24px 70px rgba(52, 43, 36, .18);
}

.editor-more-panel section + section {
    border-color: var(--line);
}

.editor-more-panel section > a:hover,
.editor-more-panel section > button:hover,
.editor-more-panel section > a:focus-visible,
.editor-more-panel section > button:focus-visible {
    background: var(--accent-pale);
}

.question-dialog,
.organize-dialog {
    border-color: var(--line);
    border-radius: 24px;
    background: rgba(255, 253, 250, .98);
    box-shadow: 0 28px 80px rgba(52, 43, 36, .20);
    backdrop-filter: blur(18px);
}

.question-dialog::backdrop,
.organize-dialog::backdrop {
    background: rgba(34, 33, 31, .38);
    backdrop-filter: blur(5px);
}

.question-dialog-header,
.question-dialog-footer {
    border-color: var(--line);
    background: var(--surface-soft);
}

.question-dialog-body {
    background: var(--surface);
}

.question-dialog .field input,
.question-dialog .field select,
.question-dialog .field textarea,
.question-dialog .question-edit-form input,
.question-dialog .question-edit-form textarea {
    border-color: #d7d0c8;
    background: #fff;
}

.toast {
    border: 1px solid #332f2b;
    border-radius: 13px;
    background: #2e2a27;
    box-shadow: var(--shadow);
}

/* Footer and maker badge */
.site-footer {
    width: min(1120px, calc(100% - 32px));
    max-width: none;
    padding: 28px 0 38px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.site-footer .wordmark {
    color: var(--ink);
}

.site-footer .brand-mark {
    width: auto;
    height: 22px;
}

.maker-credit {
    position: relative;
    right: auto;
    bottom: auto;
    margin: -12px max(16px, calc((100% - 1120px) / 2)) 32px auto;
    border-color: #9aa7ee;
    background: rgba(255, 253, 250, .96);
    box-shadow: 0 12px 30px rgba(52, 43, 36, .10);
    color: var(--ink);
    backdrop-filter: blur(12px);
}

.maker-credit-copy small,
.maker-credit-arrow {
    color: var(--accent-ink);
}

/* Editorial comparison library */
.comparison-hub,
.comparison-article {
    width: min(1080px, calc(100% - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 52px 0 90px;
}

.comparison-hub-hero {
    padding: 42px 30px 36px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.comparison-hub-hero .seo-breadcrumbs {
    justify-content: flex-start;
    text-align: left;
}

.comparison-hub-hero h1 {
    max-width: 960px;
    margin: 28px auto 20px;
    color: var(--ink);
    font: 700 clamp(42px, 5.5vw, 68px)/.94 var(--display);
    letter-spacing: -.074em;
}

.comparison-hub-hero > p:last-of-type {
    max-width: 820px;
    margin: 0 auto;
    color: #68615c;
    font-size: 18px;
    line-height: 1.6;
}

.comparison-hub-actions {
    justify-content: center;
}

.comparison-hub-actions > a:not(.primary-button),
.comparison-verdict > div > a:not(.primary-button) {
    color: var(--accent-ink);
}

.comparison-method-note {
    grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr);
    gap: 34px;
    margin: 20px 0 58px;
    padding: 28px 30px;
    border: solid var(--line);
    border-width: 1px 0;
    border-radius: 0;
    background: transparent;
}

.comparison-method-note strong {
    color: var(--ink);
    font: 700 28px/1.02 var(--display);
    letter-spacing: -.05em;
}

.comparison-method-note p {
    color: var(--muted);
}

.comparison-card-grid {
    gap: 11px;
}

.comparison-card,
.comparison-card:nth-child(n) {
    --card-tint: rgba(78, 98, 220, .055);
    min-height: 210px;
    padding: 21px;
    border-color: var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--card-tint), transparent 58%), var(--surface);
    box-shadow: var(--shadow-soft);
}

.comparison-card:nth-child(5n + 2) {
    --card-tint: rgba(117, 87, 214, .07);
}

.comparison-card:nth-child(5n + 3) {
    --card-tint: rgba(7, 139, 116, .055);
}

.comparison-card:nth-child(5n + 4) {
    --card-tint: rgba(255, 200, 92, .09);
}

.comparison-card:nth-child(5n + 5) {
    --card-tint: rgba(201, 69, 63, .045);
}

.comparison-card:hover {
    border-color: var(--accent-soft);
    box-shadow: 0 16px 34px rgba(52, 43, 36, .10);
    transform: translateY(-2px);
}

.comparison-card small,
.comparison-card p,
.comparison-byline {
    color: var(--muted);
}

.comparison-card h3,
.comparison-answer h2,
.comparison-section > h2,
.comparison-related h2,
.comparison-choice-grid h3 {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
}

.comparison-read,
.comparison-byline a,
.comparison-scenarios span,
.comparison-methodology a {
    color: var(--accent-ink);
}

.comparison-article {
    width: min(980px, calc(100% - 40px));
}

.comparison-article-hero {
    position: relative;
    padding: 38px;
    overflow: hidden;
    border-color: var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .07), transparent 55%), var(--surface);
    box-shadow: var(--shadow-soft);
}

.comparison-article-hero h1 {
    max-width: 900px;
    margin: 14px 0 18px;
    color: var(--ink);
    font: 700 clamp(38px, 4.8vw, 58px)/.95 var(--display);
    letter-spacing: -.07em;
}

.comparison-article-hero h1 em {
    color: var(--accent-ink);
}

.comparison-deck {
    color: #68615c;
}

.comparison-answer {
    padding: 30px;
    border-color: var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.comparison-answer > .paper-note {
    margin-top: -46px;
    transform: none;
}

.comparison-choice-grid {
    gap: 11px;
}

.comparison-choice-grid article,
.comparison-choice-grid article + article {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .07), transparent 58%), var(--surface-raised);
}

.comparison-choice-grid article + article {
    background: linear-gradient(145deg, rgba(7, 139, 116, .055), transparent 58%), var(--surface-raised);
}

.comparison-table-wrap {
    border-color: var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.comparison-table thead th {
    background: var(--surface-soft);
}

.comparison-tests {
    gap: 11px;
}

.comparison-tests li,
.comparison-scenarios article,
.comparison-scenarios article:nth-child(n) {
    border-color: var(--line);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(78, 98, 220, .05), transparent 58%), var(--surface);
    box-shadow: var(--shadow-soft);
}

.comparison-tests li::before {
    color: var(--accent-ink);
    font-family: var(--mono);
    font-style: normal;
    font-weight: 700;
}

.comparison-scenarios article:nth-child(2) {
    background: linear-gradient(145deg, rgba(117, 87, 214, .065), transparent 58%), var(--surface);
}

.comparison-scenarios article:nth-child(3) {
    background: linear-gradient(145deg, rgba(7, 139, 116, .055), transparent 58%), var(--surface);
}

.comparison-verdict {
    padding: 34px;
    border: 1px solid #1f2c75;
    border-radius: 24px;
    background: linear-gradient(145deg, #3548bd, #263474);
    box-shadow: var(--shadow);
    color: #fff;
}

.comparison-verdict .eyebrow,
.comparison-verdict > h2,
.comparison-verdict p,
.comparison-verdict a:not(.primary-button) {
    color: #fff;
}

.comparison-section.faq-paper {
    border-radius: 20px;
}

.comparison-methodology,
.comparison-related {
    border-color: var(--line);
}

@media (max-width: 1100px) {
    .site-header nav:not(.open) {
        display: none;
    }

    .site-header nav.open {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        display: grid;
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 5px;
        padding: 8px;
        border: 1px solid #d4ccc4;
        border-radius: 16px;
        background: rgba(255, 253, 250, .98);
        box-shadow: 0 22px 55px rgba(52, 43, 36, .16);
        backdrop-filter: blur(18px);
    }

    .site-header nav.open a,
    .site-header nav.open button {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: grid;
        place-items: center;
    }
}

@media (max-width: 900px) {
    .site-header {
        top: 7px;
        width: calc(100% - 16px);
        margin-top: 7px;
    }

    .hero.compact-hero,
    .template-library-hero,
    .pricing-page .small-hero,
    .seo-page > header {
        padding-top: 48px;
    }

    .hero.compact-hero::after,
    .template-library-hero::after,
    .pricing-page .small-hero::after,
    .seo-page > header::after {
        right: -2%;
        font-size: 220px;
    }

    .desk-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .editor-top {
        align-items: flex-start;
    }

    .editor-grid {
        grid-template-columns: 1fr;
    }

    .editor-controls {
        overflow: hidden;
    }
}

@media (max-width: 760px) {
    .comparison-hub,
    .comparison-article,
    .shared-page {
        width: calc(100% - 20px);
        padding-top: 24px;
    }

    .shared-page {
        padding-bottom: 70px;
    }

    .shared-page > header {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 26px 4px 20px;
    }

    .shared-page > header h1 {
        font-size: clamp(32px, 9vw, 42px);
    }

    .shared-page > header > div {
        justify-content: flex-start;
    }

    .shared-page .shared-sheet {
        padding: 8px;
        border-radius: 17px;
    }

    .share-cta {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 24px 20px;
        border-radius: 17px;
    }

    .comparison-hub-hero {
        padding: 28px 10px 30px;
    }

    .comparison-hub-hero h1 {
        margin-top: 22px;
        font-size: clamp(34px, 9.5vw, 42px);
    }

    .comparison-hub-hero > p:last-of-type,
    .comparison-deck {
        font-size: 16px;
    }

    .comparison-method-note {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-inline: 10px;
    }

    .comparison-method-note strong {
        font-size: 26px;
    }

    .comparison-article-hero {
        padding: 25px 18px;
        border-radius: 17px;
    }

    .comparison-article-hero h1 {
        font-size: clamp(32px, 9vw, 40px);
    }

    .comparison-answer,
    .comparison-verdict {
        padding: 24px 18px;
        border-radius: 17px;
    }

    .hero.compact-hero,
    .template-library-hero,
    .pricing-page .small-hero,
    .seo-page > header,
    .library-hero,
    .library-item-hero {
        padding: 42px 18px 26px;
    }

    .hero.compact-hero h1 {
        font-size: clamp(40px, 10.5vw, 48px);
    }

    .template-library-hero h1,
    .pricing-page .small-hero h1,
    .seo-page h1,
    .library-hero h1,
    .library-item-hero h1 {
        font-size: clamp(34px, 9.5vw, 42px);
    }

    .hero.compact-hero::after,
    .template-library-hero::after,
    .pricing-page .small-hero::after,
    .seo-page > header::after {
        display: none;
    }

    .generator-wrap,
    .home-section {
        padding-inline: 10px;
    }

    .generator-card,
    .home-section#popular,
    .home-section#teachers,
    .how-section {
        border-radius: 17px;
    }

    .generator-card {
        padding-inline: 16px;
    }

    .generator-product-tabs {
        margin-inline: -16px;
    }

    .home-section#popular,
    .home-section#teachers {
        padding: 18px;
    }

    .how-section {
        width: calc(100% - 20px);
        padding: 20px;
    }

    .template-library-page,
    .pricing-page,
    .seo-page,
    .dashboard-page,
    .admin-page,
    .account-page {
        width: calc(100% - 20px);
    }

    .dashboard-page > section {
        padding: 16px;
        border-radius: 17px;
    }

    .desk-heading {
        padding: 42px 4px 18px;
    }

    .teacher-analytics {
        grid-template-columns: 1fr 1fr;
    }

    .editor-shell {
        padding-inline: 8px;
    }

    .editor-top {
        padding: 38px 4px 16px;
    }

    .site-footer {
        width: calc(100% - 20px);
    }
}

@media (max-width: 620px) {
    .site-header {
        min-height: 58px;
        padding: 7px;
        border-radius: 16px;
    }

    .site-header .brand-mark {
        height: 36px;
    }

    .wordmark {
        gap: 8px;
        font-size: 12px;
    }

    .nav-toggle {
        min-width: 42px;
        min-height: 42px;
    }

    .capability-strip {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .capability-strip span + span::before {
        margin-right: 8px;
    }

    .hero.compact-hero > p:last-of-type,
    .template-library-hero > p:not(.eyebrow),
    .pricing-page .small-hero > p:last-child,
    .seo-page > header > p:not(.eyebrow) {
        font-size: 16px;
    }

    .generator-heading {
        flex-direction: column;
    }

    .generator-heading .paper-note {
        max-width: none;
        align-self: stretch;
    }

    .generator-product-tabs button {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 58px;
        padding-inline: 11px;
    }

    .topic-paper,
    .template-library-card,
    .worksheet-card,
    .related-template-grid a,
    .library-community-card,
    .team-resource-list > article,
    .assignment-questions > li,
    .submission-review {
        border-radius: 14px;
    }

    .pricing-grid article,
    .template-library-tools,
    .template-focus-paper,
    .faq-paper,
    .seo-notes article,
    .auth-paper,
    .legal-page,
    .account-card,
    .assignment-settings-card {
        border-radius: 16px;
    }

    .auth-paper {
        padding: 28px 20px;
    }

    .legal-page {
        width: calc(100% - 20px);
        padding: 24px 18px;
    }

    .question-dialog,
    .organize-dialog {
        border-radius: 24px 24px 18px 18px;
    }

    .toast {
        right: 10px;
        left: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        text-align: center;
    }

    .maker-credit {
        right: auto;
        bottom: auto;
        grid-template-columns: 34px minmax(0, 1fr);
        justify-content: normal;
        width: 118px;
        height: auto;
        padding: 6px;
        margin: -12px 10px 28px auto;
    }

    .maker-credit img {
        width: 34px;
        height: 34px;
    }

    .maker-credit-copy {
        display: grid;
    }

    .maker-credit-arrow {
        display: none;
    }
}

@media (max-width: 420px) {
    .wordmark span {
        font-size: 11px;
    }

    .hero.compact-hero,
    .template-library-hero,
    .pricing-page .small-hero,
    .seo-page > header {
        padding-inline: 12px;
    }

    .hero.compact-hero h1 {
        font-size: clamp(36px, 11.5vw, 42px);
    }

    .template-library-hero h1,
    .pricing-page .small-hero h1,
    .seo-page h1,
    .library-hero h1,
    .library-item-hero h1 {
        font-size: clamp(32px, 10vw, 38px);
    }

    .teacher-analytics article {
        min-height: 88px;
        padding: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-button,
    .secondary-button,
    .small-button,
    .danger-button,
    .site-header nav .sign-in-link,
    .topic-paper,
    .template-library-card {
        transition: none;
        translate: 0 0;
    }
}

@media print {
    body,
    body.worksheet-site-page,
    body.worksheet-home-page {
        background: #fff;
    }
}