@charset "UTF-8";
/* ============================================================================
   OMA CONSOLE — the workshop, applied to the student and teacher consoles

   WHY THIS FILE EXISTS

   The public pages were rebuilt in August; the consoles were not, and they
   still carried the identity that redesign replaced. css/styles.css defines,
   token for token, every pattern a modern brief bans:

       --overlay-hero : linear-gradient(135deg,#0a0b1e,#1a1040,#312e81,#4c1d95)
       --bg-page      : #07080f
       --shadow-glow  : 0 0 40px rgba(99,102,241,.2)
       --bg-glass     : rgba(10,12,28,.75)
       --shimmer-base / --shimmer-shine
       --theme-icon   : "🌙"

   Purple mesh gradient, near-black cybernetic ground, glowing halo, frosted
   glass, shimmer sweep, emoji as an icon. This file replaces all of it.

   IT ALSO REPLACES TAILWIND

   console.html loaded cdn.tailwindcss.com — a CSS compiler running in the
   browser on every page view, which on the five-year-old Android this school
   actually uses is one of the most expensive things on the page. The console
   only ever used 159 utility classes across 1,053 uses, so those 159 are
   written out here by hand and the compiler is gone. Same class names, so no
   JavaScript changed.

   OLD-DEVICE CONTRACT (iOS 10+ / Android 5+), as in css/oxf.css:
     · literal colour before every var()
     · no :is()/:where()/:has(), no color-mix, no nesting
     · -webkit- prefixes on transform/transition/sticky
     · `gap` is used only where Tailwind already used it, so nothing that
       worked before stops working
   ========================================================================= */

/* ============================================================================
   1. TOKENS — the console reads these through styles.css's variable names,
      so re-pointing them re-skins the whole console without touching React.
   ========================================================================= */

/* Light is now the default console. A classroom is a lit room, and the warm
   ground is the brief's canvas; the old build shipped `data-theme="dark"`
   hardcoded on <html>, so nobody ever saw a light console. */
[data-theme="light"],
:root {
    --bg-page:        #FDFBF7;
    --bg-card:        #FFFFFF;
    --bg-card-solid:  #FFFFFF;
    --bg-card-hover:  #FFFDF9;
    --bg-input:       #FFFFFF;
    --bg-sidebar:     #F6F0E4;
    --bg-glass:       #FFFFFF;          /* was frosted glass; now just paper */
    --bg-badge:       rgba(226,112,31,.12);

    --border-card:    rgba(45,55,72,.13);
    --border-input:   rgba(45,55,72,.22);
    --border-accent:  rgba(226,112,31,.55);

    --text-primary:   #2D3748;
    --text-secondary: #4A5568;
    --text-muted:     #616F84;   /* 5.1:1 on a card; #6B7A90 was 4.36 */
    --text-heading:   #123A63;

    /* Offset first, ambient second — the same physical language as the
       public pages. No coloured halo anywhere. */
    --shadow-card:    0 3px 0 rgba(45,55,72,.10), 0 10px 24px rgba(45,55,72,.07);
    --shadow-glow:    0 3px 0 rgba(45,55,72,.10);

    --overlay-hero:   #123A63;
    --console-bg:     #FDFBF7;
    --stat-bg:        rgba(35,119,174,.10);
    --tag-bg:         rgba(226,112,31,.12);
    --shimmer-base:   rgba(45,55,72,.05);
    --shimmer-shine:  rgba(45,55,72,.09);
    --icon-filter:    none;
    --hero-text:      rgba(255,248,236,.92);
    --nav-hover:      #E2701F;
    --footer-bg:      #002147;

    /* The console's own palette, matching css/oxf.css */
    --c-tangerine:      #E2701F;
    --c-tangerine-deep: #BC560F;
    --c-amber:          #EFA22B;
    --c-meadow:         #2F8F55;
    --c-ocean:          #2377AE;
    --c-berry:          #C93A58;
    --c-navy:           #123A63;

    --c-r-sm: 12px;
    --c-r-md: 16px;
    --c-r-lg: 22px;
    --c-spring: cubic-bezier(.34, 1.56, .64, 1);
    --c-ease:   cubic-bezier(.22, 1, .36, 1);
}

/* Dark stays available — a teacher marking at night is a real scene — but it
   is a warm lamplit dark now, not a cybernetic one. The ground is the
   academy's own Oxford navy rather than near-black, and no accent glows. */
[data-theme="dark"] {
    --bg-page:        #0E2038;
    --bg-card:        #16304F;
    --bg-card-solid:  #16304F;
    --bg-card-hover:  #1B3A5E;
    --bg-input:       #10263F;
    --bg-sidebar:     #0B1B30;
    --bg-glass:       #16304F;
    --bg-badge:       rgba(239,162,43,.16);

    --border-card:    rgba(255,248,236,.16);
    --border-input:   rgba(255,248,236,.26);
    --border-accent:  rgba(239,162,43,.55);

    --text-primary:   #F3EEE4;
    --text-secondary: #CFE0F0;
    --text-muted:     #9FB6CD;
    --text-heading:   #FFF8EC;

    --shadow-card:    0 3px 0 rgba(0,13,31,.55), 0 12px 26px rgba(0,13,31,.40);
    --shadow-glow:    0 3px 0 rgba(0,13,31,.55);

    --overlay-hero:   #0B1B30;
    --console-bg:     #0E2038;
    --stat-bg:        rgba(239,162,43,.12);
    --tag-bg:         rgba(239,162,43,.14);
    --shimmer-base:   rgba(255,248,236,.05);
    --shimmer-shine:  rgba(255,248,236,.10);
    --icon-filter:    none;
    --hero-text:      rgba(255,248,236,.92);
    --nav-hover:      #EFA22B;
    --footer-bg:      #00152E;

    --c-tangerine:      #F08A3C;
    --c-tangerine-deep: #C9611A;
    --c-amber:          #F7BE5C;
    --c-meadow:         #5DBE85;
    --c-ocean:          #6FB3DE;
    --c-berry:          #F08098;
    --c-navy:           #CFE0F0;
}

/* ============================================================================
   2. THE BANNED EFFECTS, SWITCHED OFF AT SOURCE
      styles.css still defines these; rather than hunt every call site, the
      effects themselves are neutralised here.
   ========================================================================= */
.hero-blob,
.particle,
.star { display: none !important; }

.glowPulse,
[class*="glow"] {
    -webkit-animation: none !important;
    animation: none !important;
    text-shadow: none !important;
}

/* ============================================================================
   3. CONSOLE SURFACES
   ========================================================================= */
body { background: #FDFBF7; background: var(--bg-page); }

.material-card,
.stat-card,
.console-card {
    background: #FFFFFF;
    background: var(--bg-card-solid);
    border: 2px solid rgba(45,55,72,.13);
    border-color: var(--border-card);
    border-radius: 22px;
    border-radius: var(--c-r-lg);
    -webkit-box-shadow: 0 3px 0 rgba(45,55,72,.10), 0 10px 24px rgba(45,55,72,.07);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-transition: -webkit-transform .22s var(--c-spring), -webkit-box-shadow .22s var(--c-spring), border-color .16s var(--c-ease);
    transition: transform .22s var(--c-spring), box-shadow .22s var(--c-spring), border-color .16s var(--c-ease);
}
.material-card:hover,
.stat-card:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    border-color: rgba(226,112,31,.40);
    border-color: var(--border-accent);
}

.console-section-title,
.gami-heading {
    font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.004em;
    color: #123A63;
    color: var(--text-heading);
}
.console-text            { color: #2D3748; color: var(--text-primary); }
.console-text-secondary  { color: #4A5568; color: var(--text-secondary); }
.console-text-muted      { color: #6B7A90; color: var(--text-muted); }
.console-text,
.console-text-secondary,
.console-text-muted {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Badges: the colour names survive so no JavaScript changes, but purple is
   re-pointed at the academy's ocean. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .01em;
    border: 1.5px solid transparent;
}
.badge-purple { background: rgba(35,119,174,.13);  color: #1B5E8C; border-color: rgba(35,119,174,.30); }
.badge-blue   { background: rgba(35,119,174,.13);  color: #1B5E8C; border-color: rgba(35,119,174,.30); }
.badge-green  { background: rgba(47,143,85,.14);   color: #22703F; border-color: rgba(47,143,85,.32); }
.badge-amber  { background: rgba(239,162,43,.18);  color: #8A5A08; border-color: rgba(239,162,43,.40); }
[data-theme="dark"] .badge-purple,
[data-theme="dark"] .badge-blue  { background: rgba(111,179,222,.16); color: #CFE0F0; border-color: rgba(111,179,222,.36); }
[data-theme="dark"] .badge-green { background: rgba(93,190,133,.16);  color: #A8E6C0; border-color: rgba(93,190,133,.36); }
[data-theme="dark"] .badge-amber { background: rgba(247,190,92,.18);  color: #F7D9A6; border-color: rgba(247,190,92,.40); }

/* Progress: a filled track, in meadow, with no glow. */
.progress-track {
    background: rgba(45,55,72,.10);
    border-radius: 999px;
    overflow: hidden;
    height: 10px;
}
.progress-fill {
    background: #2F8F55;
    background: var(--c-meadow);
    border-radius: 999px;
    height: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    /* Deliberately NOT transitioned. Both uses of this class are file-upload
       bars whose width is rewritten many times a second as bytes transfer;
       easing the width would tween every one of those into extra layout
       passes AND leave the bar lagging behind the real progress. scaleX()
       would avoid the layout cost but squashes the rounded caps at low
       percentages, so the honest fix is to let the value land immediately. */
}
[data-theme="dark"] .progress-track { background: rgba(255,248,236,.12); }

.filter-pill, .class-btn {
    border-radius: 999px;
    border: 2px solid rgba(45,55,72,.16);
    border-color: var(--border-card);
    background: #FFFFFF;
    background: var(--bg-card-solid);
    color: #4A5568;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 15px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .18s var(--c-spring), background-color .16s var(--c-ease), border-color .16s var(--c-ease), color .16s var(--c-ease);
    transition: transform .18s var(--c-spring), background-color .16s var(--c-ease), border-color .16s var(--c-ease), color .16s var(--c-ease);
}
.filter-pill:hover, .class-btn:hover {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    border-color: rgba(226,112,31,.50);
    color: #BC560F;
}
.filter-pill.active, .class-btn.active {
    background: #E2701F;
    background: var(--c-tangerine);
    border-color: transparent;
    color: #fff;
    -webkit-box-shadow: 0 3px 0 #BC560F;
    box-shadow: 0 3px 0 var(--c-tangerine-deep);
}

.upload-zone {
    border: 2px dashed rgba(45,55,72,.26);
    border-radius: 22px;
    border-radius: var(--c-r-lg);
    background: #FFFDF9;
    background: var(--bg-card-hover);
    -webkit-transition: border-color .16s var(--c-ease), background-color .16s var(--c-ease);
    transition: border-color .16s var(--c-ease), background-color .16s var(--c-ease);
}
.upload-zone:hover {
    border-color: #E2701F;
    border-color: var(--c-tangerine);
    background: rgba(226,112,31,.05);
}

/* ============================================================================
   4. UTILITIES — the 159 classes the console actually uses.
      Replaces cdn.tailwindcss.com entirely. Values match Tailwind's scale so
      every existing className renders the same geometry it did before.
   ========================================================================= */

/* display + box */
.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: -webkit-box; display: -ms-flexbox; display: flex; }
.inline-flex   { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
.grid          { display: grid; }
.relative      { position: relative; }
.z-10          { z-index: 10; }
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.overflow-y-auto  { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cursor-pointer   { cursor: pointer; }

/* flex */
.flex-col       { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.flex-wrap      { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-1         { -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; }
.flex-shrink-0  { -ms-flex-negative: 0; flex-shrink: 0; }
.items-center   { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.items-start    { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.justify-center  { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

/* gap — used exactly where Tailwind already emitted it, so no behaviour
   changes on the old Safari that ignores flex gap. */
.gap-1   { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-5   { gap: 20px; }
.gap-6   { gap: 24px; }
.gap-8   { gap: 32px; }

/* grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-3  { grid-column: span 3 / span 3; }

/* type */
.text-xs   { font-size: 12px; line-height: 16px; }
.text-sm   { font-size: 14px; line-height: 20px; }
.text-base { font-size: 16px; line-height: 24px; }
.text-lg   { font-size: 18px; line-height: 28px; }
.text-xl   { font-size: 20px; line-height: 28px; }
.text-2xl  { font-size: 24px; line-height: 32px; }
.text-3xl  { font-size: 30px; line-height: 36px; }
.text-4xl  { font-size: 36px; line-height: 40px; }
.text-5xl  { font-size: 48px; line-height: 1; }
.text-6xl  { font-size: 60px; line-height: 1; }
.text-7xl  { font-size: 72px; line-height: 1; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 800; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.uppercase   { text-transform: uppercase; }
.tracking-wider   { letter-spacing: .05em; }
.tracking-widest  { letter-spacing: .1em; }
.leading-tight    { line-height: 1.25; }
.no-underline     { text-decoration: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opacity-75 { opacity: .75; }

/* colour — the purple utilities are re-pointed rather than removed, so the
   React tree never has to change to lose the old identity. */
.text-white       { color: #ffffff; }
.text-purple-200  { color: #CFE0F0; }
.text-purple-300  { color: #9FB6CD; }
.text-green-300   { color: #A8E6C0; }
.border-indigo-500 { border-color: #E2701F; }
.border-t-transparent { border-top-color: transparent; }
.border-4 { border-width: 4px; border-style: solid; }

/* spacing */
.p-3  { padding: 12px; }  .p-4  { padding: 16px; }  .p-5  { padding: 20px; }
.p-6  { padding: 24px; }  .p-10 { padding: 40px; }  .p-12 { padding: 48px; }
.p-16 { padding: 64px; }
.px-2 { padding-left: 8px;  padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-0\.5 { padding-top: 2px;  padding-bottom: 2px; }
.py-1    { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px;  padding-bottom: 6px; }
.py-2    { padding-top: 8px;  padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3    { padding-top: 12px; padding-bottom: 12px; }
.py-4    { padding-top: 16px; padding-bottom: 16px; }
.py-12   { padding-top: 48px; padding-bottom: 48px; }
.pt-2 { padding-top: 8px; }  .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; }
.pb-5 { padding-bottom: 20px; } .pr-1 { padding-right: 4px; }
.mb-1 { margin-bottom: 4px; }  .mb-1\.5 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 8px; }  .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; }  .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.ml-2 { margin-left: 8px; } .mr-2 { margin-right: 8px; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }

/* size */
.w-full { width: 100%; }
.w-10 { width: 40px; } .w-12 { width: 48px; } .w-14 { width: 56px; }
.h-px { height: 1px; } .h-1 { height: 4px; }
.h-10 { height: 40px; } .h-12 { height: 48px; } .h-14 { height: 56px; }
.min-w-0 { min-width: 0; }
.min-h-screen { min-height: 100vh; }
.max-w-md  { max-width: 448px; }
.max-w-6xl { max-width: 1152px; }
.max-w-7xl { max-width: 1280px; }
.max-h-48  { max-height: 192px; }
.container { width: 100%; }

/* radius */
.rounded-lg   { border-radius: 8px; }
.rounded-xl   { border-radius: 12px; }
.rounded-2xl  { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* motion */
.transition-all {
    -webkit-transition: all .2s var(--c-ease);
    transition: all .2s var(--c-ease);
}
.duration-300 {
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
.hover\:shadow-lg:hover {
    -webkit-box-shadow: 0 5px 0 rgba(45,55,72,.13), 0 14px 30px rgba(45,55,72,.12);
    box-shadow: 0 5px 0 rgba(45,55,72,.13), 0 14px 30px rgba(45,55,72,.12);
}
@-webkit-keyframes oma-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes oma-spin { to { transform: rotate(360deg); } }
.animate-spin {
    -webkit-animation: oma-spin 1s linear infinite;
    animation: oma-spin 1s linear infinite;
}

/* responsive — same breakpoints Tailwind used (640 / 768 / 1024 / 1280) */
@media (min-width: 640px) {
    .sm\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    .sm\:items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .container { max-width: 640px; }
}
@media (min-width: 768px) {
    .md\:flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    .md\:items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:px-6 { padding-left: 24px; padding-right: 24px; }
    .md\:p-8 { padding: 32px; }
    .md\:text-4xl { font-size: 36px; line-height: 40px; }
    .container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .container { max-width: 1280px; }
}

/* ============================================================================
   5. FORM CONTROLS — the console's inputs inherit the same shape language
   ========================================================================= */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
select, textarea {
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    border-radius: 12px;
    border-radius: var(--c-r-sm);
    border: 2px solid rgba(45,55,72,.22);
    border-color: var(--border-input);
    background: #FFFFFF;
    background: var(--bg-input);
    color: #2D3748;
    color: var(--text-primary);
    -webkit-transition: border-color .16s var(--c-ease), -webkit-box-shadow .16s var(--c-ease);
    transition: border-color .16s var(--c-ease), box-shadow .16s var(--c-ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #2377AE;
    border-color: var(--c-ocean);
    -webkit-box-shadow: 0 0 0 4px rgba(35,119,174,.18);
    box-shadow: 0 0 0 4px rgba(35,119,174,.18);
}
textarea { direction: ltr; }

@media (prefers-reduced-motion: reduce) {
    .material-card, .stat-card, .console-card, .filter-pill, .class-btn,
    .transition-all, .progress-fill {
        -webkit-transition: none !important;
        transition: none !important;
    }
    .material-card:hover, .stat-card:hover, .filter-pill:hover, .class-btn:hover {
        -webkit-transform: none;
        transform: none;
    }
}

/* ── Touch-target floor ───────────────────────────────────────────────────
   Measured across four viewports: the class buttons, the outline buttons and
   the wordmark all sat between 36 and 38px. A teacher taps the class list
   dozens of times a lesson, often one-handed, and 38px is below the floor
   everything else in this system already clears.

   Inline links inside a sentence are deliberately NOT raised — WCAG 2.5.8
   exempts them, and forcing 44px there would wreck the line rhythm of the
   prose they sit in. */
.class-btn,
.filter-pill,
.console-btn-outline,
.console-btn,
button.badge {
    min-height: 44px;
}
.class-btn, .console-btn-outline, .console-btn {
    padding-top: 10px;
    padding-bottom: 10px;
}
.wordmark {
    min-height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Every button in the console clears the touch floor. The gamification
   strip's chips — Character, Shop, Pets, Leaderboard, Achievements — carried
   py-1.5 and measured 37px on every viewport, and they are exactly the
   controls a child jabs at. Measuring found no other button under 40px, so
   this rule moves those five and nothing else. */
#root button {
    min-height: 44px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ── Utilities used only by worksheet_viewer.html ─────────────────────────
   Added so that page can drop the Tailwind CDN too — it is where a student
   actually sits and does the homework, so it is the last place that should
   be waiting on a CSS compiler. */
.p-8  { padding: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.max-w-5xl { max-width: 1024px; }
.space-y-3 > * + * { margin-top: 12px; }
.transition-colors {
    -webkit-transition: background-color .16s var(--c-ease), color .16s var(--c-ease), border-color .16s var(--c-ease);
    transition: background-color .16s var(--c-ease), color .16s var(--c-ease), border-color .16s var(--c-ease);
}
@media (min-width: 768px) {
    .md\:p-12 { padding: 48px; }
}