/* src/css/fonts.css */
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("../fonts/manrope-vietnamese-700-normal.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("../fonts/manrope-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("../fonts/onest-vietnamese-400-normal.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("../fonts/onest-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url("../fonts/onest-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("../fonts/onest-vietnamese-700-normal.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("../fonts/onest-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url("../fonts/onest-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
/* tokens/tokens.css */
/* GENERATED by tokens/build.mjs from tokens/tokens.json. Do not edit; change the JSON and rebuild. */
:root {
--ref-color-white: #FFFFFF;
--ref-color-gray-50: #FAFAFC;
--ref-color-gray-100: #F5F5F7;
--ref-color-gray-125: #EDEDF2;
--ref-color-gray-150: #E8E8ED;
--ref-color-gray-200: #D2D2D7;
--ref-color-gray-400: #A1A1A6;
--ref-color-gray-500: #86868B;
--ref-color-gray-600: #6E6E73;
--ref-color-gray-650: #424245;
--ref-color-gray-700: #333336;
--ref-color-gray-800: #272729;
--ref-color-gray-825: #222222;
--ref-color-gray-850: #1D1D1F;
--ref-color-gray-900: #161617;
--ref-color-gray-925: #141414;
--ref-color-gray-950: #111111;
--ref-color-black: #000000;
--ref-color-glass-light: rgba(250, 250, 252, 0.8);
--ref-color-glass-dark: rgba(22, 22, 23, 0.8);
--ref-color-logo-mint: #7FE0C8;
--ref-color-logo-purple: #A994FF;
--ref-color-navy: #1E3A5F;
--ref-color-navy-night: #16294A;
--ref-color-navy-deep: #0B1525;
--ref-color-navy-70: #5F728A;
--ref-color-navy-50: #8A97A8;
--ref-color-navy-surface: #13233F;
--ref-color-navy-surface-2: #1A2D4D;
--ref-color-navy-raised: #22406A;
--ref-color-navy-border: #2A3E5E;
--ref-color-cream: #F7F5F0;
--ref-color-cream-paper: #FCFBF8;
--ref-color-cream-2: #EFEBE2;
--ref-color-cream-3: #E5E0D5;
--ref-color-cream-border: #DDD8CD;
--ref-color-cream-70: #B6BDC4;
--ref-color-cream-50: #7D8899;
--ref-color-glass-cream: rgba(247, 245, 240, 0.8);
--ref-color-glass-navy: rgba(11, 21, 37, 0.8);
--ref-color-aurora-mint: #9FEBD8;
--ref-color-navy-band: #0F1C31;
--ref-color-planet-star: #F2E3A9;
--ref-color-planet-moon: #CDD2DA;
--ref-color-planet-sun: #FFC857;
--ref-color-planet-mercury: #9E9A94;
--ref-color-planet-venus: #E6D7A8;
--ref-color-planet-mars: #C4572E;
--ref-color-planet-jupiter: #D0A77A;
--ref-color-planet-uranus: #A7D8DE;
--ref-color-planet-neptune: #8EC3DE;
--ref-color-obs-white: #FFFFFF;
--ref-color-obs-black: #000000;
--ref-color-obs-moon-hi: #F4F6F9;
--ref-color-obs-moon-base: #C3C9D2;
--ref-color-obs-moon-low: #7A8391;
--ref-color-obs-moon-mare: #66707E;
--ref-color-obs-sun-core: #FFF7E4;
--ref-color-obs-sun-mid: #FFD98F;
--ref-color-obs-sun-edge: #F3AE4E;
--ref-color-obs-sun-limb: #D98A35;
--ref-color-obs-sun-corona: #FFC857;
--ref-color-obs-mars-hi: #E9AE8E;
--ref-color-obs-mars-base: #B4644A;
--ref-color-obs-mars-low: #6E3324;
--ref-color-obs-mars-mare: #5A2A1E;
--ref-color-obs-mars-cap: #F7F0EA;
--ref-color-obs-mars-haze: #F0C2A8;
--ref-color-obs-venus-hi: #FBF5E6;
--ref-color-obs-venus-base: #E3D4AC;
--ref-color-obs-venus-low: #A8935F;
--ref-color-obs-venus-band: #CDB98A;
--ref-color-obs-venus-haze: #F6ECCF;
--ref-color-obs-jupiter-b1: #F0E3CC;
--ref-color-obs-jupiter-b2: #D3B089;
--ref-color-obs-jupiter-b3: #B68C66;
--ref-color-obs-jupiter-b4: #E5CDAC;
--ref-color-obs-jupiter-b5: #A47A58;
--ref-color-obs-jupiter-spot: #B4664A;
--ref-color-obs-jupiter-haze: #F0DEC2;
--ref-color-obs-mercury-hi: #D8CFC4;
--ref-color-obs-mercury-base: #968B7E;
--ref-color-obs-mercury-low: #4F4740;
--ref-color-obs-mercury-dark: #5E554C;
--ref-color-obs-mercury-bright: #E8E1D8;
--ref-color-obs-uranus-hi: #E6F6F7;
--ref-color-obs-uranus-base: #A7D8DE;
--ref-color-obs-uranus-low: #5E939D;
--ref-color-obs-uranus-haze: #CDF3F6;
--ref-color-obs-uranus-ring: #DDEFF1;
--ref-color-obs-neptune-hi: #B9D7F0;
--ref-color-obs-neptune-base: #5584BE;
--ref-color-obs-neptune-low: #253F70;
--ref-color-obs-neptune-spot: #1C2F5A;
--ref-color-obs-neptune-cloud: #EEF6FC;
--ref-color-obs-neptune-haze: #8EC3DE;
--ref-color-obs-earth-hi: #A9D4F5;
--ref-color-obs-earth-base: #2F6FB0;
--ref-color-obs-earth-low: #0E2A55;
--ref-color-obs-earth-land: #6E9A5B;
--ref-color-obs-earth-land2: #B8A27A;
--ref-color-obs-earth-cloud: #F4F8FB;
--ref-color-obs-earth-haze: #9FD0FF;
--ref-color-obs-saturn-b1: #F2E2BF;
--ref-color-obs-saturn-b2: #E0C690;
--ref-color-obs-saturn-b3: #BF9D68;
--ref-color-obs-saturn-b4: #EAD5A8;
--ref-color-obs-saturn-ring: #E9D8B4;
--ref-color-obs-saturn-ring2: #C4A97C;
--ref-color-obs-saturn-haze: #F4E6C6;
--ref-color-obs-ielts-hi: #E6DFFF;
--ref-color-obs-ielts-base: #9C8BF0;
--ref-color-obs-ielts-low: #33276E;
--ref-color-obs-ielts-haze: #B9AEFF;
--ref-font-family-head: "Manrope", system-ui, sans-serif;
--ref-font-family-text: "Onest", system-ui, sans-serif;
--ref-font-weight-regular: 400;
--ref-font-weight-bold: 700;
--ref-type-14-size: 14px;
--ref-type-14-line: 1.4285914286;
--ref-type-14-tracking: -0.016em;
--ref-type-17-size: 17px;
--ref-type-17-line: 1.4705882353;
--ref-type-17-tracking: -0.022em;
--ref-type-21-size: 21px;
--ref-type-21-line: 1.1904761905;
--ref-type-21-tracking: 0.011em;
--ref-type-24-size: 24px;
--ref-type-24-line: 1.1666666667;
--ref-type-24-tracking: 0.009em;
--ref-type-28-size: 28px;
--ref-type-28-line: 1.1428571429;
--ref-type-28-tracking: 0.007em;
--ref-type-32-size: 32px;
--ref-type-32-line: 1.125;
--ref-type-32-tracking: 0.004em;
--ref-type-40-size: 40px;
--ref-type-40-line: 1.1;
--ref-type-40-tracking: 0em;
--ref-type-48-size: 48px;
--ref-type-48-line: 1.0834933333;
--ref-type-48-tracking: -0.003em;
--ref-type-64-size: 64px;
--ref-type-64-line: 1.0625;
--ref-type-64-tracking: -0.009em;
--ref-type-80-size: 80px;
--ref-type-80-line: 1.05;
--ref-type-80-tracking: -0.015em;
--ref-type-21-intro-size: 21px;
--ref-type-21-intro-line: 1.381002381;
--ref-type-21-intro-tracking: 0.011em;
--ref-type-19-intro-size: 19px;
--ref-type-19-intro-line: 1.4211026316;
--ref-type-19-intro-tracking: 0.012em;
--ref-type-17-tight-size: 17px;
--ref-type-17-tight-line: 1.2353641176;
--ref-type-17-tight-tracking: -0.022em;
--ref-space-4: 4px;
--ref-space-8: 8px;
--ref-space-12: 12px;
--ref-space-16: 16px;
--ref-space-22: 22px;
--ref-space-24: 24px;
--ref-space-44: 44px;
--ref-space-60: 60px;
--ref-space-120: 120px;
--ref-radius-5: 5px;
--ref-radius-8: 8px;
--ref-radius-12: 12px;
--ref-radius-18: 18px;
--ref-radius-pill: 980px;
--ref-size-tap: 44px;
--ref-size-field: 56px;
--ref-size-hairline: 1px;
--ref-size-focus: 2px;
--ref-size-focus-offset: 3px;
--ref-material-glass: saturate(180%) blur(20px);
--ref-motion-fast: 100ms;
--ref-motion-quick: 200ms;
--ref-motion-reveal: 700ms;
--ref-motion-stagger: 80ms;
--ref-motion-float: 6s;
--ref-motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--ref-motion-snap-curve: cubic-bezier(0.4, 0, 0.2, 1);
--ref-motion-snap-min: 280ms;
--ref-motion-snap-max: 640ms;
--ref-motion-snap-idle: 140ms;
--ref-layout-container-large: 980px;
--ref-layout-container-medium: 692px;
--ref-layout-container-small: 87.5%;
--ref-layout-wide-max: 1440px;
--ref-layout-columns: 12;
--ref-breakpoint-large: 1280px;
--ref-breakpoint-medium: 1068px;
--ref-breakpoint-small: 734px;
--sys-color-bg: var(--ref-color-gray-100);
--sys-color-bg-alt: var(--ref-color-white);
--sys-color-surface: var(--ref-color-white);
--sys-color-surface-2: var(--ref-color-gray-100);
--sys-color-surface-strong: var(--ref-color-gray-850);
--sys-color-on-surface-strong: var(--ref-color-gray-100);
--sys-color-field: var(--ref-color-white);
--sys-color-text: var(--ref-color-gray-850);
--sys-color-text-2: var(--ref-color-gray-600);
--sys-color-text-3: var(--ref-color-gray-500);
--sys-color-border: var(--ref-color-gray-200);
--sys-color-border-strong: var(--ref-color-gray-500);
--sys-color-focus: var(--ref-color-gray-850);
--sys-color-glass: var(--ref-color-glass-light);
--sys-color-accent: var(--ref-color-logo-mint);
--sys-color-accent-hover: var(--ref-color-logo-mint);
--sys-color-on-accent: var(--ref-color-gray-850);
--sys-color-preset-ink: var(--ref-color-gray-850);
--sys-color-preset-graphite: var(--ref-color-gray-650);
--sys-color-preset-silver: var(--ref-color-gray-200);
--sys-color-preset-mint: var(--ref-color-logo-mint);
--sys-color-preset-purple: var(--ref-color-logo-purple);
--sys-color-accent-2: var(--ref-color-gray-650);
--sys-color-on-accent-2: var(--ref-color-white);
--sys-color-accent-3: var(--ref-color-gray-150);
--sys-color-star: var(--ref-color-gray-600);
--sys-font-head: var(--ref-font-family-head);
--sys-font-text: var(--ref-font-family-text);
--sys-font-weight-regular: var(--ref-font-weight-regular);
--sys-font-weight-bold: var(--ref-font-weight-bold);
--sys-type-hero-size: var(--ref-type-64-size);
--sys-type-hero-line: var(--ref-type-64-line);
--sys-type-hero-tracking: var(--ref-type-64-tracking);
--sys-type-display-size: var(--ref-type-64-size);
--sys-type-display-line: var(--ref-type-64-line);
--sys-type-display-tracking: var(--ref-type-64-tracking);
--sys-type-title-size: var(--ref-type-48-size);
--sys-type-title-line: var(--ref-type-48-line);
--sys-type-title-tracking: var(--ref-type-48-tracking);
--sys-type-eyebrow-size: var(--ref-type-24-size);
--sys-type-eyebrow-line: var(--ref-type-24-line);
--sys-type-eyebrow-tracking: var(--ref-type-24-tracking);
--sys-type-lead-size: var(--ref-type-21-intro-size);
--sys-type-lead-line: var(--ref-type-21-intro-line);
--sys-type-lead-tracking: var(--ref-type-21-intro-tracking);
--sys-type-body-size: var(--ref-type-17-size);
--sys-type-body-line: var(--ref-type-17-line);
--sys-type-body-tracking: var(--ref-type-17-tracking);
--sys-type-control-size: var(--ref-type-17-tight-size);
--sys-type-control-line: var(--ref-type-17-tight-line);
--sys-type-control-tracking: var(--ref-type-17-tight-tracking);
--sys-type-fine-size: var(--ref-type-14-size);
--sys-type-fine-line: var(--ref-type-14-line);
--sys-type-fine-tracking: var(--ref-type-14-tracking);
--sys-type-heading-size: var(--ref-type-32-size);
--sys-type-heading-line: var(--ref-type-32-line);
--sys-type-heading-tracking: var(--ref-type-32-tracking);
--sys-type-read-size: var(--ref-type-19-intro-size);
--sys-type-read-line: var(--ref-type-19-intro-line);
--sys-type-read-tracking: var(--ref-type-19-intro-tracking);
--sys-space-xs: var(--ref-space-8);
--sys-space-s: var(--ref-space-12);
--sys-space-m: var(--ref-space-16);
--sys-space-l: var(--ref-space-24);
--sys-space-xl: var(--ref-space-44);
--sys-space-gutter: var(--ref-space-24);
--sys-space-section: var(--ref-space-120);
--sys-space-nav-top: var(--ref-space-12);
--sys-space-page-top: calc(var(--ref-space-12) + var(--ref-size-tap) + var(--ref-space-4) * 2 + var(--ref-space-60));
--sys-space-card-y: 2em;
--sys-space-card-x: 2.5em;
--sys-space-nav-clear: calc(var(--ref-space-12) + var(--ref-size-tap) + var(--ref-space-4) * 2);
--sys-space-anchor: calc(var(--ref-space-12) + var(--ref-size-tap) + var(--ref-space-4) * 2 + var(--ref-space-24));
--sys-space-section-top: var(--ref-space-120);
--sys-radius-control: var(--ref-radius-12);
--sys-radius-card: var(--ref-radius-18);
--sys-radius-pill: var(--ref-radius-pill);
--sys-layout-container: var(--ref-layout-container-large);
--sys-layout-container-wide: min(var(--ref-layout-container-small), var(--ref-layout-wide-max));
--sys-layout-hero-columns: minmax(0, 7fr) minmax(0, 5fr);
--sys-layout-form-columns: minmax(0, 5fr) minmax(0, 7fr);
--sys-layout-intro-position: sticky;
--sys-layout-panel-ratio: 4 / 5;
--sys-layout-cta-width: auto;
--sys-layout-nav-links: flex;
--sys-layout-nav-menu: none;
--sys-layout-grid-3: repeat(3, minmax(0, 1fr));
--sys-layout-grid-4: repeat(4, minmax(0, 1fr));
--sys-layout-grid-5: repeat(5, minmax(0, 1fr));
--sys-layout-split: minmax(0, 1fr) minmax(0, 1fr);
--sys-layout-footer-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
--sys-layout-facts-columns: repeat(3, minmax(0, 1fr));
--sys-layout-screen-ratio: 16 / 10;
--sys-layout-flip: -1;
--sys-layout-menu-sheet: none;
--sys-layout-measure: 60ch;
--sys-layout-hero-height: calc(100svh - var(--ref-space-12) - var(--ref-size-tap) - var(--ref-space-4) * 2 - var(--ref-space-60) - var(--ref-space-120));
--sys-layout-portrait-ratio: 4 / 5;
--sys-layout-founder-columns: minmax(0, 4fr) minmax(0, 8fr);
--sys-layout-mapper: block;
--sys-layout-route-line: block;
--sys-layout-article: min(var(--ref-layout-container-medium), var(--ref-layout-container-small));
--sys-layout-toc-inline: none;
--sys-layout-vocab-columns: minmax(0, 2fr) minmax(0, 3fr);
--sys-layout-photo-ratio: 3 / 2;
--sys-layout-photo-strip: repeat(4, minmax(0, 1fr));
--sys-layout-banner-ratio: 21 / 9;
--sys-layout-nav-cta: flex;
--sys-focus-width: var(--ref-size-focus);
--sys-focus-offset: var(--ref-size-focus-offset);
--sys-z-nav: 50;
--sys-z-fab: 60;
--sys-z-raise: 1;
--sys-z-behind: -1;
--sys-motion-rise: var(--ref-space-24);
--sys-motion-float: var(--ref-space-8);
--sys-motion-lift: calc(var(--ref-size-hairline) * 2);
--sys-motion-press: 0.98;
--sys-motion-snap-nudge: 0.15;
--sys-motion-open-turn: 45deg;
--comp-nav-height: var(--ref-size-tap);
--comp-nav-padding: var(--ref-space-4);
--comp-nav-padding-start: var(--ref-space-16);
--comp-nav-logo-height: calc(var(--ref-size-tap) / 2);
--comp-nav-logo-pill-tracking: 0.24em;
--comp-nav-material: var(--ref-material-glass);
--comp-button-height: var(--ref-size-tap);
--comp-button-padding-y: var(--ref-space-12);
--comp-button-padding-x: var(--ref-space-22);
--comp-button-gap: var(--ref-space-8);
--comp-button-radius: var(--ref-radius-pill);
--comp-button-border: var(--ref-size-hairline);
--comp-chip-height: var(--ref-size-tap);
--comp-chip-padding-x: var(--ref-space-16);
--comp-chip-gap: var(--ref-space-8);
--comp-chip-radius: var(--ref-radius-pill);
--comp-tag-padding-y: var(--ref-space-8);
--comp-tag-padding-x: var(--ref-space-16);
--comp-tag-icon: var(--ref-space-24);
--comp-field-height: var(--ref-size-field);
--comp-field-padding-x: var(--ref-space-16);
--comp-field-border: var(--ref-size-hairline);
--comp-field-note-height: calc(var(--ref-size-field) * 2);
--comp-fab-size: var(--ref-size-field);
--comp-fab-offset: var(--ref-space-16);
--comp-fab-menu-gap: var(--ref-space-8);
--comp-guide-columns: repeat(6, minmax(0, 1fr));
--comp-guide-swatch: calc(var(--ref-size-field) * 1.5);
--comp-guide-sample: calc(var(--ref-size-field) * 2);
--comp-guide-bar: var(--ref-space-8);
--comp-guide-space-columns: var(--ref-size-tap) auto minmax(0, 1fr);
--comp-prefs-dot: var(--ref-space-24);
--comp-prefs-gap: var(--ref-space-8);
--comp-prefs-padding: var(--ref-space-12);
--comp-prefs-offset: var(--ref-space-12);
--comp-number-size: var(--ref-size-tap);
--comp-number-columns: var(--ref-size-tap) minmax(0, 1fr);
--comp-mapper-dot: var(--ref-space-8);
--comp-mapper-hit: var(--ref-space-24);
--comp-mapper-gap: var(--ref-space-8);
--comp-mapper-offset: var(--ref-space-24);
--comp-mapper-label-gap: var(--ref-space-12);
--comp-mapper-active-scale: 1.75;
--comp-stars-density: 0.00009;
--comp-stars-size-min: 0.6px;
--comp-stars-size-max: 1.6px;
--comp-stars-accent-share: 0.14;
--comp-stars-opacity: 0.4;
--comp-stars-twinkle: 5s;
--comp-stars-drift: 4;
--comp-stars-fps: 24;
--comp-stars-scroll-pause: 0.2s;
--comp-stars-low-memory: 2;
--comp-stars-resolution: 1.5;
--comp-route-node: var(--ref-space-24);
--comp-avatar-size: var(--ref-size-field);
--comp-avatar-columns: var(--ref-size-field) minmax(0, 1fr);
--comp-share-feedback: 2s;
--comp-quote-hole: var(--ref-space-12);
--comp-quote-edge: var(--ref-size-hairline);
--comp-quote-inset: var(--ref-space-16);
--comp-quote-glow: var(--ref-space-4);
--comp-daylight-style: chart;
--comp-chart-density: 0.00007;
--comp-chart-size-min: var(--ref-size-hairline);
--comp-chart-size-max: var(--ref-size-focus-offset);
--comp-chart-opacity: 0.7;
--comp-chart-groups: 0.05;
--comp-chart-links: 3;
--comp-chart-reach: var(--ref-space-120);
--comp-chart-line: var(--ref-size-hairline);
--comp-chart-draw: 2.4s;
--comp-chart-stagger: 0.6s;
--comp-chart-glint: 4s;
--comp-chart-line-opacity: 0.55;
--comp-chart-quiet: var(--ref-space-44);
--comp-chart-quiet-opacity: 0.3;
--comp-blueprint-grid: var(--ref-space-24);
--comp-blueprint-dot: 0.75px;
--comp-blueprint-opacity: 0.55;
--comp-blueprint-arcs: 3;
--comp-blueprint-crosses: 6;
--comp-blueprint-cross: var(--ref-space-8);
--comp-blueprint-dash: var(--ref-space-4);
--comp-blueprint-craft: var(--ref-size-focus-offset);
--comp-blueprint-travel: 40s;
--comp-blueprint-line: var(--ref-size-hairline);
--comp-orbits-count: 5;
--comp-orbits-gap: var(--ref-space-120);
--comp-orbits-center-x: 0.04;
--comp-orbits-center-y: 0.96;
--comp-orbits-planet: var(--ref-size-focus-offset);
--comp-orbits-period: 60s;
--comp-orbits-opacity: 0.6;
--comp-orbits-line: var(--ref-size-hairline);
--comp-share-card-width: 1200px;
--comp-share-card-height: 630px;
--comp-share-card-padding: calc(var(--ref-space-44) * 2);
--comp-share-card-logo: var(--ref-space-60);
--comp-share-card-title-size: var(--ref-type-64-size);
--comp-share-card-title-line: var(--ref-type-64-line);
--comp-share-card-title-tracking: var(--ref-type-64-tracking);
--comp-share-card-kicker-size: var(--ref-type-28-size);
--comp-share-card-kicker-line: var(--ref-type-28-line);
--comp-share-card-kicker-tracking: var(--ref-type-28-tracking);
--comp-share-card-rows: auto minmax(0, 1fr) auto;
--comp-ambient-volume: 0.6;
--comp-ambient-level: 0.35;
--comp-ambient-root: 55;
--comp-ambient-scale: 0 3 7 10 12 14 19;
--comp-ambient-pad-every: 5s;
--comp-ambient-pad-attack: 4s;
--comp-ambient-pad-release: 8s;
--comp-ambient-pad-cutoff: 700;
--comp-ambient-shimmer: 0.35;
--comp-ambient-drift: 40s;
--comp-ambient-echo: 6s;
--comp-ambient-wet: 0.6;
--comp-ambient-fade-in: 3s;
--comp-ambient-fade-out: 1.5s;
--comp-ambient-slider: calc(var(--ref-size-tap) * 3);
--comp-demo-pad: var(--ref-space-24);
--comp-demo-bar: var(--ref-size-tap);
--comp-demo-dot: var(--ref-space-8);
--comp-demo-line: var(--ref-size-focus);
--comp-demo-gap: var(--ref-space-12);
--comp-demo-step: 1100ms;
--comp-demo-draw: 450ms;
--comp-demo-word: 320ms;
--comp-demo-hold: 5s;
--comp-demo-fade: 600ms;
--comp-demo-wave: var(--ref-space-60);
--comp-demo-rec: var(--ref-space-44);
--comp-demo-pulse: 1600ms;
--comp-demo-skill: var(--ref-space-8);
--comp-demo-grow: 1200ms;
--comp-demo-bento: "head photo" "write speak" "write prog";
--comp-demo-bento-columns: minmax(0, 3fr) minmax(0, 2fr);
--comp-demo-words-line: 2.2;
--comp-demo-hero-text: grid;
--comp-demo-order-head: 0;
--comp-demo-order-demo: 0;
--comp-demo-order-rest: 0;
--comp-demo-hero-gap: var(--ref-space-44);
--comp-problem-columns: minmax(0, 5fr) minmax(0, 6fr);
--comp-problem-tab-grow: 0;
--comp-bento-areas: "photo photo a" "photo photo b" "c d d";
--comp-bento-columns: repeat(3, minmax(0, 1fr));
--comp-bento-photo-ratio: auto;
--comp-callbar-display: none;
--comp-callbar-space: 0px;
--comp-callbar-pad: var(--ref-space-12);
--comp-cta-photo-scrim: 0.6;
--comp-cta-photo-height: calc(var(--ref-space-120) * 4);
--comp-spread-columns: repeat(3, minmax(0, 1fr));
--comp-spread-lift: var(--ref-space-24);
--comp-rail-col: 0%;
--comp-rail-fit: 1;
--comp-hero-visual-ratio: 4 / 5;
--comp-hero-visual-inset: var(--ref-space-24);
--comp-hero-visual-card-position: absolute;
--comp-hero-visual-card-pull: 0px;
--comp-hero-visual-card-margin: 0px;
--comp-social-icon: var(--ref-space-22);
--comp-journey-min: var(--ref-space-24);
--comp-journey-max: var(--ref-space-60);
--comp-journey-stop: calc(var(--ref-space-120) * 0.9);
--comp-journey-line: var(--ref-size-hairline);
--comp-journey-edge: var(--ref-size-hairline);
--comp-space-window-radius: var(--ref-space-44);
--comp-space-window-pad: var(--ref-space-60);
--comp-space-window-height: calc(var(--ref-space-120) * 5);
--comp-space-art-columns: minmax(0, 1fr) minmax(0, 1fr);
--comp-space-float: 7s;
--comp-space-float-y: var(--ref-space-12);
--comp-space-flame: 600ms;
--comp-space-porthole-ring: var(--ref-space-8);
--comp-space-route-dash: 2 10;
--comp-space-route-width: 3;
--comp-space-map-height: calc(var(--ref-space-120) * 3.4);
--comp-space-pass-notch: var(--ref-space-24);
--comp-space-map-width: 100%;
--comp-mission-label-tracking: 0.12em;
--comp-mission-index-gap: var(--ref-space-12);
--comp-mission-head-columns: minmax(0, 7fr) minmax(0, 5fr);
--comp-mission-spec-columns: repeat(4, minmax(0, 1fr));
--comp-mission-hero-columns: minmax(0, 6fr) minmax(0, 5fr);
--comp-mission-hero-photo-ratio: 4 / 5;
--comp-mission-space-columns: minmax(0, 5fr) minmax(0, 6fr);
--comp-mission-art-height: calc(var(--ref-space-120) * 4);
--comp-mission-track-col: minmax(0, 1fr);
--comp-mission-dot-min: var(--ref-space-8);
--comp-mission-dot-max: var(--ref-space-24);
--comp-mission-dot-box: var(--ref-space-44);
--comp-mission-goal-ring: var(--ref-space-4);
--comp-mission-line: var(--ref-size-hairline);
--comp-mission-figure-unit-gap: var(--ref-space-8);
--comp-mission-chat-max: 85%;
--comp-mission-photo-saturate: 0.9;
--comp-mission-radar: 3.2s;
--comp-mission-art-size: calc(var(--ref-space-120) * 3.6);
--comp-mission-prog-columns: calc(var(--ref-space-120) * 0.8) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr) var(--ref-space-24);
--comp-mission-prog-cell: auto;
--comp-mission-earth: calc(var(--ref-space-120) * 3.2);
--comp-mission-mini: 16px;
--comp-mission-mini-ringed: 21px;
--comp-mission-faq-columns: minmax(0, 7fr) minmax(0, 4fr);
--comp-mission-portrait-o: calc(var(--ref-space-120) * 0.9);
--comp-mission-lesson-columns: minmax(0, 7fr) minmax(0, 5fr);
--comp-mission-lesson-specs: repeat(2, minmax(0, 1fr));
--comp-mission-count: 1100ms;
--comp-mission-hero-planet: calc(var(--ref-space-120) * 3.4);
--comp-mission-photos: repeat(3, minmax(0, 1fr));
--comp-mission-form-columns: minmax(0, 7fr) minmax(0, 5fr);
--comp-mission-step-columns: var(--ref-size-tap) minmax(0, 1fr);
--comp-plan-size-0: 70px;
--comp-plan-size-1: 82px;
--comp-plan-size-2: 66px;
--comp-plan-size-3: 76px;
--comp-plan-size-4: 82px;
--comp-plan-size-5: 88px;
--comp-plan-size-6: 96px;
--comp-plan-size-7: 100px;
--comp-plan-size-8: 110px;
--comp-plan-size-9: 118px;
--comp-plan-size-10: 128px;
--comp-plan-scale: 1;
--comp-plan-stage: 150px;
--comp-plan-cols: repeat(10, minmax(0, 1fr)) minmax(0, 1.3fr);
--comp-plan-col-phone: 112px;
--comp-plan-col-phone-goal: 140px;
--comp-plan-bleed: 0px;
--comp-plan-hud-tracking: 0.12em;
--comp-plan-rail: 1.5px;
--comp-plan-probe: 28px;
--comp-plan-tail: 150px;
--comp-plan-tick-w: 14px;
--comp-plan-tick-h: 2px;
--comp-plan-tick-gap: 4px;
--comp-plan-live: 6px;
--comp-plan-blink: 0.9s;
--comp-plan-breathe: 7s;
--comp-plan-label-fade: 420ms;
--comp-plan-breathe-scale: 1.035;
--comp-plan-glow-earth: var(--ref-color-obs-earth-haze);
--comp-plan-glow-saturn: var(--ref-color-obs-saturn-ring);
--comp-plan-glow-moon: var(--ref-color-obs-moon-hi);
--comp-plan-glow-sun: var(--ref-color-obs-sun-corona);
--comp-plan-glow-mars: var(--ref-color-obs-mars-haze);
--comp-plan-glow-venus: var(--ref-color-obs-venus-haze);
--comp-plan-glow-jupiter: var(--ref-color-obs-jupiter-haze);
--comp-plan-glow-mercury: var(--ref-color-obs-mercury-bright);
--comp-plan-glow-uranus: var(--ref-color-obs-uranus-haze);
--comp-plan-glow-neptune: var(--ref-color-obs-neptune-haze);
--comp-plan-glow-ielts: var(--ref-color-logo-mint);
--comp-plan-point: 360ms;
}
[data-theme="light"] {
--sys-color-bg: var(--ref-color-gray-100);
--sys-color-bg-alt: var(--ref-color-white);
--sys-color-surface: var(--ref-color-white);
--sys-color-surface-2: var(--ref-color-gray-100);
--sys-color-surface-strong: var(--ref-color-gray-850);
--sys-color-on-surface-strong: var(--ref-color-gray-100);
--sys-color-field: var(--ref-color-white);
--sys-color-text: var(--ref-color-gray-850);
--sys-color-text-2: var(--ref-color-gray-600);
--sys-color-text-3: var(--ref-color-gray-500);
--sys-color-border: var(--ref-color-gray-200);
--sys-color-border-strong: var(--ref-color-gray-500);
--sys-color-focus: var(--ref-color-gray-850);
--sys-color-glass: var(--ref-color-glass-light);
--sys-color-accent: var(--ref-color-logo-mint);
--sys-color-accent-hover: var(--ref-color-logo-mint);
--sys-color-on-accent: var(--ref-color-gray-850);
--sys-color-preset-ink: var(--ref-color-gray-850);
--sys-color-preset-graphite: var(--ref-color-gray-650);
--sys-color-preset-silver: var(--ref-color-gray-200);
--sys-color-accent-2: var(--ref-color-gray-650);
--sys-color-on-accent-2: var(--ref-color-white);
--sys-color-accent-3: var(--ref-color-gray-150);
--sys-color-star: var(--ref-color-gray-600);
--comp-stars-opacity: 0.4;
}
/* screens up to 1280px */
@media (max-width: 1280px) {
:root {
--sys-layout-nav-links: none;
--sys-layout-nav-menu: grid;
--sys-layout-menu-sheet: grid;
}
}
/* screens up to 1068px */
@media (max-width: 1068px) {
:root {
--sys-type-hero-size: var(--ref-type-48-size);
--sys-type-hero-line: var(--ref-type-48-line);
--sys-type-hero-tracking: var(--ref-type-48-tracking);
--sys-type-display-size: var(--ref-type-48-size);
--sys-type-display-line: var(--ref-type-48-line);
--sys-type-display-tracking: var(--ref-type-48-tracking);
--sys-type-title-size: var(--ref-type-40-size);
--sys-type-title-line: var(--ref-type-40-line);
--sys-type-title-tracking: var(--ref-type-40-tracking);
--sys-type-eyebrow-size: var(--ref-type-21-size);
--sys-type-eyebrow-line: var(--ref-type-21-line);
--sys-type-eyebrow-tracking: var(--ref-type-21-tracking);
--sys-layout-container: var(--ref-layout-container-medium);
--sys-layout-hero-columns: minmax(0, 1fr);
--sys-layout-form-columns: minmax(0, 1fr);
--sys-layout-intro-position: static;
--sys-layout-panel-ratio: 4 / 3;
--sys-layout-nav-links: none;
--sys-layout-nav-menu: grid;
--sys-layout-grid-3: minmax(0, 1fr);
--sys-layout-grid-4: repeat(2, minmax(0, 1fr));
--sys-layout-grid-5: repeat(2, minmax(0, 1fr));
--sys-layout-split: minmax(0, 1fr);
--sys-layout-footer-columns: minmax(0, 1fr);
--sys-layout-facts-columns: repeat(2, minmax(0, 1fr));
--sys-layout-flip: 0;
--sys-layout-menu-sheet: grid;
--sys-layout-hero-height: auto;
--sys-layout-mapper: none;
--sys-layout-route-line: none;
--sys-layout-toc-inline: block;
--sys-layout-nav-cta: none;
--comp-guide-columns: repeat(4, minmax(0, 1fr));
--comp-problem-columns: minmax(0, 1fr);
--comp-bento-areas: "photo photo" "a b" "c d";
--comp-bento-columns: repeat(2, minmax(0, 1fr));
--comp-bento-photo-ratio: 3 / 2;
--comp-rail-col: 44%;
--comp-rail-fit: 0;
--comp-space-window-height: auto;
--comp-space-art-columns: minmax(0, 1fr);
--comp-space-map-height: calc(var(--ref-space-120) * 2.6);
--comp-mission-head-columns: minmax(0, 1fr);
--comp-mission-hero-columns: minmax(0, 1fr);
--comp-mission-hero-photo-ratio: 4 / 3;
--comp-mission-space-columns: minmax(0, 1fr);
--comp-mission-art-height: calc(var(--ref-space-120) * 2.6);
--comp-mission-track-col: calc(var(--ref-space-120) * 0.9);
--comp-mission-prog-columns: minmax(0, 1fr) var(--ref-space-24);
--comp-mission-prog-cell: 1;
--comp-mission-faq-columns: minmax(0, 1fr);
--comp-mission-lesson-columns: minmax(0, 1fr);
--comp-mission-form-columns: minmax(0, 1fr);
}
}
/* screens up to 734px */
@media (max-width: 734px) {
:root {
--sys-type-hero-size: var(--ref-type-40-size);
--sys-type-hero-line: var(--ref-type-40-line);
--sys-type-hero-tracking: var(--ref-type-40-tracking);
--sys-type-display-size: var(--ref-type-40-size);
--sys-type-display-line: var(--ref-type-40-line);
--sys-type-display-tracking: var(--ref-type-40-tracking);
--sys-type-title-size: var(--ref-type-32-size);
--sys-type-title-line: var(--ref-type-32-line);
--sys-type-title-tracking: var(--ref-type-32-tracking);
--sys-type-lead-size: var(--ref-type-19-intro-size);
--sys-type-lead-line: var(--ref-type-19-intro-line);
--sys-type-lead-tracking: var(--ref-type-19-intro-tracking);
--sys-type-heading-size: var(--ref-type-28-size);
--sys-type-heading-line: var(--ref-type-28-line);
--sys-type-heading-tracking: var(--ref-type-28-tracking);
--sys-type-read-size: var(--ref-type-17-size);
--sys-type-read-line: var(--ref-type-17-line);
--sys-type-read-tracking: var(--ref-type-17-tracking);
--sys-space-section: var(--ref-space-60);
--sys-space-page-top: calc(var(--ref-space-12) + var(--ref-size-tap) + var(--ref-space-4) * 2 + var(--ref-space-24));
--sys-space-card-x: 1.5em;
--sys-space-section-top: calc(var(--ref-space-12) + var(--ref-size-tap) + var(--ref-space-4) * 2 + var(--ref-space-24));
--sys-layout-container: var(--ref-layout-container-small);
--sys-layout-cta-width: 100%;
--sys-layout-grid-4: minmax(0, 1fr);
--sys-layout-grid-5: minmax(0, 1fr);
--sys-layout-facts-columns: minmax(0, 1fr);
--sys-layout-founder-columns: minmax(0, 1fr);
--sys-layout-photo-strip: repeat(4, 70%);
--sys-layout-banner-ratio: 3 / 2;
--comp-guide-columns: repeat(2, minmax(0, 1fr));
--comp-orbits-gap: var(--ref-space-60);
--comp-demo-bento: "head" "photo" "write" "speak" "prog";
--comp-demo-bento-columns: minmax(0, 1fr);
--comp-demo-hero-text: contents;
--comp-demo-order-head: 1;
--comp-demo-order-demo: 2;
--comp-demo-order-rest: 3;
--comp-demo-hero-gap: var(--ref-space-24);
--comp-problem-tab-grow: 1;
--comp-bento-areas: "photo" "a" "b" "c" "d";
--comp-bento-columns: minmax(0, 1fr);
--comp-callbar-display: flex;
--comp-callbar-space: calc(var(--ref-size-tap) + var(--ref-space-12) * 2);
--comp-cta-photo-height: calc(var(--ref-space-120) * 4.5);
--comp-spread-columns: repeat(3, 70%);
--comp-rail-col: 78%;
--comp-hero-visual-ratio: 4 / 3;
--comp-hero-visual-inset: 0px;
--comp-hero-visual-card-position: relative;
--comp-hero-visual-card-pull: calc(var(--ref-space-44) * -1);
--comp-hero-visual-card-margin: var(--ref-space-16);
--comp-journey-stop: calc(var(--ref-space-120) * 0.8);
--comp-space-window-radius: var(--ref-space-24);
--comp-space-window-pad: var(--ref-space-24);
--comp-space-map-width: calc(var(--ref-space-120) * 8);
--comp-mission-spec-columns: repeat(2, minmax(0, 1fr));
--comp-mission-art-height: calc(var(--ref-space-120) * 2.2);
--comp-mission-art-size: 100%;
--comp-mission-earth: calc(var(--ref-space-120) * 2.4);
--comp-mission-hero-planet: calc(var(--ref-space-120) * 2.4);
--comp-mission-photos: minmax(0, 1fr);
--comp-plan-scale: 0.8;
--comp-plan-stage: 112px;
--comp-plan-cols: repeat(10, var(--comp-plan-col-phone)) var(--comp-plan-col-phone-goal);
--comp-plan-bleed: calc((100vw - 100%) / 2);
--comp-plan-hud-tracking: 0.06em;
}
}
/* data-theme="dark" */
[data-theme="dark"] {
--sys-color-bg: var(--ref-color-black);
--sys-color-bg-alt: var(--ref-color-gray-950);
--sys-color-surface: var(--ref-color-gray-900);
--sys-color-surface-2: var(--ref-color-gray-850);
--sys-color-surface-strong: var(--ref-color-gray-850);
--sys-color-on-surface-strong: var(--ref-color-gray-100);
--sys-color-field: var(--ref-color-gray-850);
--sys-color-text: var(--ref-color-gray-100);
--sys-color-text-2: var(--ref-color-gray-500);
--sys-color-text-3: var(--ref-color-gray-600);
--sys-color-border: var(--ref-color-gray-650);
--sys-color-border-strong: var(--ref-color-gray-600);
--sys-color-focus: var(--ref-color-gray-100);
--sys-color-glass: var(--ref-color-glass-dark);
--sys-color-accent: var(--ref-color-logo-mint);
--sys-color-accent-hover: var(--ref-color-logo-mint);
--sys-color-on-accent: var(--ref-color-gray-850);
--sys-color-preset-ink: var(--ref-color-gray-100);
--sys-color-preset-graphite: var(--ref-color-gray-400);
--sys-color-preset-silver: var(--ref-color-gray-700);
--sys-color-accent-2: var(--ref-color-gray-400);
--sys-color-on-accent-2: var(--ref-color-gray-850);
--sys-color-accent-3: var(--ref-color-gray-700);
--sys-color-star: var(--ref-color-white);
--comp-stars-opacity: 0.85;
}
/* data-accent="mint" */
[data-accent="mint"],
[data-accent="mint"] [data-theme="light"] {
--sys-color-accent: var(--ref-color-logo-mint);
--sys-color-accent-hover: var(--ref-color-logo-mint);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="mint", dark theme */
[data-accent="mint"][data-theme="dark"],
[data-accent="mint"] [data-theme="dark"] {
--sys-color-accent: var(--ref-color-logo-mint);
--sys-color-accent-hover: var(--ref-color-logo-mint);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="ink" */
[data-accent="ink"],
[data-accent="ink"] [data-theme="light"] {
--sys-color-accent: var(--ref-color-gray-850);
--sys-color-accent-hover: var(--ref-color-gray-800);
--sys-color-on-accent: var(--ref-color-white);
}
/* data-accent="graphite" */
[data-accent="graphite"],
[data-accent="graphite"] [data-theme="light"] {
--sys-color-accent: var(--ref-color-gray-650);
--sys-color-accent-hover: var(--ref-color-gray-700);
--sys-color-on-accent: var(--ref-color-white);
}
/* data-accent="silver" */
[data-accent="silver"],
[data-accent="silver"] [data-theme="light"] {
--sys-color-accent: var(--ref-color-gray-200);
--sys-color-accent-hover: var(--ref-color-gray-150);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="purple" */
[data-accent="purple"],
[data-accent="purple"] [data-theme="light"] {
--sys-color-accent: var(--ref-color-logo-purple);
--sys-color-accent-hover: var(--ref-color-logo-purple);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="ink", dark theme */
[data-accent="ink"][data-theme="dark"],
[data-accent="ink"] [data-theme="dark"] {
--sys-color-accent: var(--ref-color-gray-100);
--sys-color-accent-hover: var(--ref-color-white);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="graphite", dark theme */
[data-accent="graphite"][data-theme="dark"],
[data-accent="graphite"] [data-theme="dark"] {
--sys-color-accent: var(--ref-color-gray-400);
--sys-color-accent-hover: var(--ref-color-gray-200);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-accent="silver", dark theme */
[data-accent="silver"][data-theme="dark"],
[data-accent="silver"] [data-theme="dark"] {
--sys-color-accent: var(--ref-color-gray-700);
--sys-color-accent-hover: var(--ref-color-gray-650);
--sys-color-on-accent: var(--ref-color-gray-100);
}
/* data-accent="purple", dark theme */
[data-accent="purple"][data-theme="dark"],
[data-accent="purple"] [data-theme="dark"] {
--sys-color-accent: var(--ref-color-logo-purple);
--sys-color-accent-hover: var(--ref-color-logo-purple);
--sys-color-on-accent: var(--ref-color-gray-850);
}
/* data-brand="ose" */
[data-brand="ose"]:not([data-theme="dark"]),
[data-brand="ose"] [data-theme="light"] {
--sys-color-bg: var(--ref-color-white);
--sys-color-bg-alt: var(--ref-color-gray-100);
--sys-color-surface: var(--ref-color-gray-100);
--sys-color-surface-2: var(--ref-color-white);
--sys-color-field: var(--ref-color-white);
--sys-color-focus: var(--ref-color-gray-850);
--sys-color-accent: var(--ref-color-gray-850);
--sys-color-accent-hover: var(--ref-color-gray-800);
--sys-color-on-accent: var(--ref-color-white);
}
/* data-brand="ose", dark theme */
[data-brand="ose"][data-theme="dark"],
[data-brand="ose"] [data-theme="dark"] {
--sys-color-focus: var(--ref-color-gray-100);
--sys-color-accent: var(--ref-color-gray-100);
--sys-color-accent-hover: var(--ref-color-white);
--sys-color-on-accent: var(--ref-color-gray-850);
}
[data-theme] {
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
/* src/css/components.css */
/* OSE IELTS components. Every value is a token from tokens/tokens.css (checked by tokens/lint.mjs).
Themes: data-theme="light" | "dark" on or on any section. Accent presets: data-accent="ink" | "graphite" | "silver" | "mint" | "purple" on (ink is the default).
Black, white and greys; the switchable accent can also be the logo's mint or purple (accent-2 = mid grey, accent-3 = soft grey tint stay grey). */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
[data-theme]{ color:var(--sys-color-text); }
body{
margin:0; background:var(--sys-color-bg); color:var(--sys-color-text);
font-family:var(--sys-font-text); font-weight:var(--sys-font-weight-regular);
font-size:var(--sys-type-body-size); line-height:var(--sys-type-body-line); letter-spacing:var(--sys-type-body-tracking);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,legend{ margin:0; font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); text-wrap:balance; }
p,ul{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
button,input,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
:focus-visible{ outline:var(--sys-focus-width) solid var(--sys-color-focus); outline-offset:var(--sys-focus-offset); }
.sr, .hp{ position:absolute; width:var(--ref-size-hairline); height:var(--ref-size-hairline); overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* ---------- type roles ---------- */
.t-hero{ font-size:var(--sys-type-hero-size); line-height:var(--sys-type-hero-line); letter-spacing:var(--sys-type-hero-tracking); }
.t-display{ font-size:var(--sys-type-display-size); line-height:var(--sys-type-display-line); letter-spacing:var(--sys-type-display-tracking); }
.t-title{ font-size:var(--sys-type-title-size); line-height:var(--sys-type-title-line); letter-spacing:var(--sys-type-title-tracking); }
.t-eyebrow{ font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); font-size:var(--sys-type-eyebrow-size); line-height:var(--sys-type-eyebrow-line); letter-spacing:var(--sys-type-eyebrow-tracking); }
.t-lead{ max-width:var(--sys-layout-measure); font-size:var(--sys-type-lead-size); line-height:var(--sys-type-lead-line); letter-spacing:var(--sys-type-lead-tracking); }
.t-control{ font-size:var(--sys-type-control-size); line-height:var(--sys-type-control-line); letter-spacing:var(--sys-type-control-tracking); }
.t-fine{ font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line); letter-spacing:var(--sys-type-fine-tracking); }
.muted{ color:var(--sys-color-text-2); }
/* ---------- layout ---------- */
.wide{ width:var(--sys-layout-container-wide); margin-inline:auto; }
.stack{ display:grid; gap:var(--sys-space-l); align-content:start; }
/* ---------- floating glass pill menu ---------- */
.nav{
position:fixed; z-index:var(--sys-z-nav); top:var(--sys-space-nav-top); left:50%; transform:translateX(-50%);
width:var(--sys-layout-container-wide); display:flex; align-items:center; gap:var(--sys-space-xs);
padding:var(--comp-nav-padding); padding-inline-start:var(--comp-nav-padding-start);
border-radius:var(--sys-radius-pill); border:var(--ref-size-hairline) solid var(--sys-color-border);
background:var(--sys-color-glass); backdrop-filter:var(--comp-nav-material); -webkit-backdrop-filter:var(--comp-nav-material);
}
.brand{ display:flex; align-items:center; gap:var(--sys-space-s); margin-inline-end:auto; }
.brand img{ height:var(--comp-nav-logo-height); width:auto; }
.brand .logo-dark{ display:none; }
[data-theme="dark"] .brand .logo-light{ display:none; }
[data-theme="dark"] .brand .logo-dark{ display:block; }
.brand-pill{ padding:var(--ref-space-4) var(--ref-space-8); border-radius:var(--sys-radius-pill); background:var(--sys-color-text); color:var(--sys-color-bg); font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line); letter-spacing:var(--comp-nav-logo-pill-tracking); }
.nav-links{ display:var(--sys-layout-nav-links); }
.nav-links a{ display:flex; align-items:center; min-height:var(--comp-nav-height); padding-inline:var(--sys-space-s); color:var(--sys-color-text-2); }
.nav-links a:hover{ color:var(--sys-color-text); }
.nav .btn{ display:var(--sys-layout-nav-cta); width:auto; }
.nav-menu{ display:var(--sys-layout-nav-menu); place-items:center; width:var(--comp-nav-height); height:var(--comp-nav-height); border:0; border-radius:var(--sys-radius-pill); background:var(--sys-color-surface-2); cursor:pointer; }
.icon-btn{ display:grid; place-items:center; width:var(--comp-nav-height); height:var(--comp-nav-height); border:0; border-radius:var(--sys-radius-pill); background:var(--sys-color-surface-2); color:var(--sys-color-text); cursor:pointer; }
.icon-btn:hover{ background:var(--sys-color-accent-3); }
/* ---------- theme and accent switch ---------- */
.prefs{ position:relative; }
.prefs-panel{
position:absolute; right:0; top:calc(100% + var(--comp-prefs-offset)); display:grid; gap:var(--comp-prefs-gap); padding:var(--comp-prefs-padding);
border-radius:var(--sys-radius-card); border:var(--ref-size-hairline) solid var(--sys-color-border);
background:var(--sys-color-surface); /* solid: a glass layer inside the glass menu cannot blur */
}
.prefs-panel[hidden]{ display:none; }
.prefs-row{ display:flex; gap:var(--comp-prefs-gap); }
.prefs-row .icon-btn[aria-pressed="true"]{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); }
.swatch{ display:grid; place-items:center; width:var(--comp-nav-height); height:var(--comp-nav-height); padding:0; border:var(--ref-size-hairline) solid transparent; border-radius:var(--sys-radius-pill); background:transparent; cursor:pointer; }
.swatch::before{ content:""; width:var(--comp-prefs-dot); height:var(--comp-prefs-dot); border-radius:var(--sys-radius-pill); background:var(--swatch); border:var(--ref-size-hairline) solid var(--sys-color-border-strong); }
.swatch[aria-pressed="true"]{ border-color:var(--sys-color-text); }
/* ---------- buttons, tags ---------- */
.ctas{ display:flex; flex-wrap:wrap; gap:var(--sys-space-s); }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--comp-button-gap);
width:var(--sys-layout-cta-width); min-height:var(--comp-button-height); padding:var(--comp-button-padding-y) var(--comp-button-padding-x);
border-radius:var(--comp-button-radius); border:var(--comp-button-border) solid transparent; cursor:pointer; text-align:center;
font-weight:var(--sys-font-weight-bold);
transition:background-color var(--ref-motion-fast) linear, color var(--ref-motion-fast) linear, translate var(--ref-motion-quick) var(--ref-motion-ease), scale var(--ref-motion-quick) var(--ref-motion-ease);
}
.btn:hover{ translate:0 calc(var(--sys-motion-lift) * -1); }
.btn:active{ translate:0 0; scale:var(--sys-motion-press); }
.btn-1{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); }
.btn-1:hover{ background:var(--sys-color-accent-hover); }
.btn-2{ background:transparent; color:var(--sys-color-text); border-color:var(--sys-color-border-strong); }
.btn-2:hover{ background:var(--sys-color-accent-3); }
.btn-block{ width:100%; }
.tags{ display:flex; flex-wrap:wrap; gap:var(--sys-space-xs); list-style:none; padding:0; }
.tag{ display:inline-flex; align-items:center; gap:var(--sys-space-xs); padding:var(--comp-tag-padding-y) var(--comp-tag-padding-x); padding-inline-start:var(--comp-tag-padding-y); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent-3); }
.tick{ flex:none; display:grid; place-items:center; width:var(--comp-tag-icon); height:var(--comp-tag-icon); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent-2); color:var(--sys-color-on-accent-2); }
/* ---------- floating contact button ---------- */
.fab{
position:fixed; z-index:var(--sys-z-fab); display:grid; place-items:center;
right:calc(var(--comp-fab-offset) + env(safe-area-inset-right, 0%)); bottom:calc(var(--comp-fab-offset) + env(safe-area-inset-bottom, 0%));
width:var(--comp-fab-size); height:var(--comp-fab-size); border-radius:var(--sys-radius-pill);
background:var(--sys-color-accent); color:var(--sys-color-on-accent);
}
/* ---------- home hero ---------- */
.hero{ padding-block:var(--sys-space-page-top) var(--sys-space-section); }
.hero-in{ display:grid; grid-template-columns:var(--sys-layout-hero-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center; min-height:var(--sys-layout-hero-height); }
.hero-text{ display:grid; gap:var(--sys-space-l); justify-items:start; }
.hero-text .t-eyebrow{ color:var(--sys-color-text-2); }
.h1-2{ color:var(--sys-color-text-2); }
.panel{ position:relative; overflow:hidden; aspect-ratio:var(--sys-layout-panel-ratio); border-radius:var(--sys-radius-card); background:var(--sys-color-surface-strong); }
/* ---------- form page ---------- */
.reg{ padding-block:var(--sys-space-page-top) var(--sys-space-section); }
.reg-in{ display:grid; grid-template-columns:var(--sys-layout-form-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:start; }
.reg-intro{ position:var(--sys-layout-intro-position); top:var(--sys-space-page-top); display:grid; gap:var(--sys-space-l); }
.promise{ display:grid; gap:var(--sys-space-m); list-style:none; padding:var(--sys-space-card-y) var(--sys-space-card-x); border-radius:var(--sys-radius-card); background:var(--sys-color-surface-strong); color:var(--sys-color-on-surface-strong); }
.promise .tick{ background:var(--sys-color-on-surface-strong); color:var(--sys-color-surface-strong); }
.promise li{ display:flex; align-items:center; gap:var(--sys-space-s); font-weight:var(--sys-font-weight-bold); }
.card{ padding:var(--sys-space-card-y) var(--sys-space-card-x); border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.card form{ display:grid; gap:var(--sys-space-l); }
.group{ display:grid; gap:var(--sys-space-l); min-width:0; margin:0; padding:0; border:0; }
.group + .group{ padding-top:var(--sys-space-l); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.group > legend{ float:left; width:100%; padding:0; }
.field{ display:grid; gap:var(--sys-space-xs); min-width:0; margin:0; padding:0; border:0; }
.field > legend{ float:left; width:100%; padding:0; margin-bottom:var(--sys-space-xs); }
.label{ font-weight:var(--sys-font-weight-bold); }
.hint{ font-weight:var(--sys-font-weight-regular); color:var(--sys-color-text-2); }
.input{
width:100%; min-height:var(--comp-field-height); padding:0 var(--comp-field-padding-x);
border-radius:var(--sys-radius-control); border:var(--comp-field-border) solid var(--sys-color-border-strong); background:var(--sys-color-field);
}
.input::placeholder{ color:var(--sys-color-text-3); }
.input:focus{ outline:var(--sys-focus-width) solid var(--sys-color-focus); outline-offset:var(--ref-size-hairline); }
textarea.input{ min-height:var(--comp-field-note-height); padding-block:var(--comp-field-padding-x); resize:vertical; }
.opts{ display:flex; flex-wrap:wrap; gap:var(--sys-space-xs); }
.opt{ position:relative; display:flex; }
.opt input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.opt span{
display:inline-flex; align-items:center; gap:var(--comp-chip-gap); min-height:var(--comp-chip-height); padding-inline:var(--comp-chip-padding-x);
border-radius:var(--comp-chip-radius); border:var(--ref-size-hairline) solid transparent; background:var(--sys-color-surface-2); cursor:pointer;
transition:background-color var(--ref-motion-fast) linear, color var(--ref-motion-fast) linear;
}
.opt span:hover{ background:var(--sys-color-accent-3); }
.opt input:checked + span{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); border-color:var(--sys-color-text); } /* the outline keeps the choice clear in the soft preset */
.opt input:focus-visible + span{ outline:var(--sys-focus-width) solid var(--sys-color-focus); outline-offset:var(--sys-focus-offset); }
.fine{ color:var(--sys-color-text-2); text-align:center; }
.done{ display:grid; gap:var(--sys-space-m); }
.done[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
/* ---------- quote card: one small punch hole in the corner, edge lit faintly in the accent (comp.quote) ---------- */
.quote{
position:relative; display:grid; gap:var(--sys-space-m); padding:var(--sys-space-card-y) var(--sys-space-card-x);
border-radius:var(--sys-radius-card); border:var(--ref-size-hairline) solid var(--sys-color-border); background:var(--sys-color-surface);
font-size:var(--sys-type-lead-size); line-height:var(--sys-type-lead-line); letter-spacing:var(--sys-type-lead-tracking);
}
.quote::before{
content:""; position:absolute; top:var(--comp-quote-inset); left:var(--comp-quote-inset); pointer-events:none;
width:var(--comp-quote-hole); height:var(--comp-quote-hole); border-radius:var(--sys-radius-pill);
background:var(--sys-color-bg); border:var(--comp-quote-edge) solid var(--sys-color-accent);
box-shadow:0 0 var(--comp-quote-glow) var(--sys-color-accent);
}
.quote strong{ font-weight:var(--sys-font-weight-bold); }
/* ---------- field messages (site.js): bold text under the field, the field outlined in the text colour; no colour ---------- */
.field-error{ display:flex; align-items:center; gap:var(--sys-space-xs); font-weight:var(--sys-font-weight-bold); color:var(--sys-color-text); }
.field-error[hidden]{ display:none; }
.input[aria-invalid="true"]{ border-color:var(--sys-color-text); box-shadow:inset 0 0 0 var(--ref-size-hairline) var(--sys-color-text); }
fieldset .opt input[aria-invalid="true"] + span{ border-color:var(--sys-color-text); }
/* a section that sets its own theme paints its own page colour */
:where(section[data-theme]){ background:var(--sys-color-bg); }
/* ---------- ambient sound button (src/js/ambient.js): speaker with waves when on, crossed when off ---------- */
.sound [data-sound-toggle] .waves{ display:none; }
.sound [data-sound-toggle][data-on="true"] .waves{ display:inline; }
.sound [data-sound-toggle][data-on="true"] .muted{ display:none; }
.sound [data-sound-toggle][data-on="true"]{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); }
.sound .prefs-row{ align-items:center; }
.sound .play svg + svg{ display:none; }
.sound .play[aria-pressed="true"] svg:first-child{ display:none; }
.sound .play[aria-pressed="true"] svg + svg{ display:block; }
.sound .play[aria-pressed="true"]{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); }
.volume{ width:var(--comp-ambient-slider); min-height:var(--ref-size-tap); margin:0; accent-color:var(--sys-color-accent); cursor:pointer; }
/* src/css/sections.css */
/* Page sections built from the components. Tokens only (tokens/lint.mjs). */
/* ---------- sections ---------- */
.section{ padding-block:var(--sys-space-section-top) var(--sys-space-section); }
.band-alt{ background:var(--sys-color-bg-alt); }
.narrow{ width:var(--sys-layout-container); margin-inline:auto; }
.sec-head{ display:grid; gap:var(--sys-space-m); max-width:var(--sys-layout-container); margin-bottom:var(--sys-space-xl); }
.sec-head .t-lead{ color:var(--sys-color-text-2); }
.page-head{ padding-block:var(--sys-space-page-top) var(--sys-space-xl); }
.page-head .sec-head{ margin-bottom:0; }
.kicker{ color:var(--sys-color-text-2); }
.after{ margin-top:var(--sys-space-xl); }
/* ---------- grids and tiles ---------- */
.grid{ display:grid; gap:var(--sys-space-gutter); }
.g3{ grid-template-columns:var(--sys-layout-grid-3); }
.g4{ grid-template-columns:var(--sys-layout-grid-4); }
.g5{ grid-template-columns:var(--sys-layout-grid-5); }
.split{ display:grid; grid-template-columns:var(--sys-layout-split); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center; }
.tile{ display:grid; gap:var(--sys-space-s); align-content:start; padding:var(--sys-space-card-y) var(--sys-space-card-x); border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.band-alt .tile{ background:var(--sys-color-surface-2); }
.tile p{ color:var(--sys-color-text-2); }
.tile .more{ display:inline-flex; align-items:center; gap:var(--sys-space-xs); margin-top:var(--sys-space-xs); font-weight:var(--sys-font-weight-bold); color:var(--sys-color-text); }
.tile .more:hover{ text-decoration:underline; }
.label-2{ color:var(--sys-color-text-2); }
/* ---------- lists ---------- */
.checks{ display:grid; gap:var(--sys-space-s); list-style:none; padding:0; }
.checks li{ display:flex; align-items:flex-start; gap:var(--sys-space-s); }
.checks .tick{ margin-top:var(--ref-size-hairline); }
.strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sys-space-xs); list-style:none; padding:0; }
/* ---------- app picture panel (home hero, app page) ---------- */
.shot{ position:relative; overflow:hidden; aspect-ratio:var(--sys-layout-screen-ratio); border-radius:var(--sys-radius-card); background:var(--sys-color-surface-strong); }
/* ---------- feature rows (app page) ---------- */
.features{ display:grid; gap:var(--sys-space-section); }
.feature:nth-child(even) .feature-media{ order:var(--sys-layout-flip); }
.feature-text{ display:grid; gap:var(--sys-space-m); }
.feature-text .t-lead{ color:var(--sys-color-text-2); }
/* ---------- FAQ ---------- */
.faq{ border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.faq details{ border-bottom:var(--ref-size-hairline) solid var(--sys-color-border); }
.faq summary{
display:flex; align-items:center; justify-content:space-between; gap:var(--sys-space-m);
min-height:var(--ref-size-tap); padding-block:var(--sys-space-m); cursor:pointer; list-style:none;
font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ flex:none; transition:transform var(--ref-motion-fast) linear; }
.faq details[open] summary svg{ transform:rotate(var(--sys-motion-open-turn)); }
.faq details p{ padding-bottom:var(--sys-space-l); color:var(--sys-color-text-2); max-width:var(--sys-layout-container); }
/* ---------- comparison table (method page) ---------- */
.compare{ overflow-x:auto; border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ text-align:left; vertical-align:top; padding:var(--sys-space-m) var(--sys-space-card-x); border-bottom:var(--ref-size-hairline) solid var(--sys-color-border); }
.compare tr:last-child td{ border-bottom:0; }
.compare th{ font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); }
.compare td:first-child{ color:var(--sys-color-text-2); }
.compare th:last-child, .compare td:last-child{ background:var(--sys-color-accent-3); font-weight:var(--sys-font-weight-bold); }
/* ---------- numbered principles (method page) ---------- */
.principles{ display:grid; gap:var(--sys-space-l); list-style:none; padding:0; }
.principles li{ display:grid; grid-template-columns:var(--comp-number-columns); gap:var(--sys-space-m); }
.num{ display:grid; place-items:center; width:var(--comp-number-size); height:var(--comp-number-size); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent-2); color:var(--sys-color-on-accent-2); font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); }
.principles h3{ margin-bottom:var(--sys-space-xs); }
.principles p{ color:var(--sys-color-text-2); }
/* ---------- levels (courses page) ---------- */
.levels{ display:grid; gap:var(--sys-space-gutter); }
.level{ display:grid; gap:var(--sys-space-l); scroll-margin-top:var(--sys-space-page-top); }
.level .t-lead{ color:var(--sys-color-text-2); }
.facts{ display:grid; grid-template-columns:var(--sys-layout-facts-columns); gap:var(--sys-space-m) var(--sys-space-gutter); margin:0; }
.facts div{ display:grid; gap:var(--ref-space-4); }
.facts dt{ color:var(--sys-color-text-2); }
.facts dd{ margin:0; font-weight:var(--sys-font-weight-bold); }
/* ---------- materials ---------- */
.filters{ margin-bottom:var(--sys-space-l); }
.kit[hidden]{ display:none; }
.kit-pages{ display:grid; grid-template-columns:var(--sys-layout-split); gap:var(--sys-space-m); }
.kit-pages img{ width:100%; height:auto; border-radius:var(--sys-radius-control); border:var(--ref-size-hairline) solid var(--sys-color-border); }
.kit-pages img:first-child{ grid-column:1 / -1; }
.kit-body{ display:grid; gap:var(--sys-space-l); align-content:start; }
/* ---------- closing call to action ---------- */
.cta{ display:grid; gap:var(--sys-space-l); justify-items:center; text-align:center; padding:var(--sys-space-section) var(--sys-space-card-x); border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.cta .t-lead{ color:var(--sys-color-text-2); max-width:var(--sys-layout-container); }
.cta .ctas{ justify-content:center; }
/* ---------- footer ---------- */
.footer{ padding-block:var(--sys-space-section); border-top:var(--ref-size-hairline) solid var(--sys-color-border); color:var(--sys-color-text-2); }
.footer-cols{ display:grid; grid-template-columns:var(--sys-layout-footer-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); }
.footer-cols > div{ display:grid; align-content:start; gap:var(--sys-space-m); }
.footer h2{ margin:0; color:var(--sys-color-text); }
.footer ul{ display:grid; gap:var(--sys-space-s); margin:0; list-style:none; padding:0; }
.socials{ display:flex; flex-wrap:wrap; gap:var(--sys-space-xs); }
.footer a.social{ display:grid; place-items:center; width:var(--ref-size-tap); height:var(--ref-size-tap); border:var(--ref-size-hairline) solid var(--sys-color-border); border-radius:var(--sys-radius-pill); background:var(--sys-color-surface-2); color:var(--sys-color-text); transition:background var(--ref-motion-fast) linear; }
.footer a.social:hover{ background:var(--sys-color-accent-3); text-decoration:none; }
.social svg{ width:var(--comp-social-icon); height:var(--comp-social-icon); }
.footer a{ color:var(--sys-color-text); }
.footer a:hover{ text-decoration:underline; }
.footer-bottom{ margin-top:var(--sys-space-xl); padding-top:var(--sys-space-l); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
/* ---------- phone and tablet menu ---------- */
.menu-sheet{
position:absolute; left:0; right:0; top:calc(100% + var(--comp-prefs-offset)); display:var(--sys-layout-menu-sheet); gap:var(--sys-space-xs);
padding:var(--comp-prefs-padding); border-radius:var(--sys-radius-card); border:var(--ref-size-hairline) solid var(--sys-color-border); background:var(--sys-color-surface);
}
.menu-sheet[hidden]{ display:none; }
.menu-sheet a:not(.btn){ display:flex; align-items:center; min-height:var(--ref-size-tap); padding-inline:var(--sys-space-s); border-radius:var(--sys-radius-control); }
.menu-sheet a:not(.btn):hover{ background:var(--sys-color-accent-3); }
.menu-sheet .btn{ width:100%; margin-top:var(--sys-space-xs); }
.nav-links a[aria-current="page"], .menu-sheet a[aria-current="page"]{ color:var(--sys-color-text); font-weight:var(--sys-font-weight-bold); }
/* ---------- contact button: two choices ---------- */
.fab-wrap{ position:fixed; z-index:var(--sys-z-fab); right:calc(var(--comp-fab-offset) + env(safe-area-inset-right, 0%)); bottom:calc(var(--comp-fab-offset) + var(--comp-callbar-space) + env(safe-area-inset-bottom, 0%)); }
.fab-wrap .fab{ position:static; border:0; cursor:pointer; }
.fab-menu{ position:absolute; right:0; bottom:calc(100% + var(--comp-fab-menu-gap)); display:grid; gap:var(--comp-fab-menu-gap); justify-items:end; }
.fab-menu[hidden]{ display:none; }
.fab-menu .btn{ width:auto; white-space:nowrap; }
.fab-menu .btn-2{ background:var(--sys-color-surface); }
/* ---------- form states ---------- */
.form-error{ padding:var(--sys-space-m); border-radius:var(--sys-radius-control); background:var(--sys-color-accent-3); font-weight:var(--sys-font-weight-bold); }
.form-error[hidden]{ display:none; }
.btn[disabled]{ cursor:progress; }
.field .hint-line{ color:var(--sys-color-text-2); }
/* ---------- materials filter ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:var(--sys-space-xs); }
.filters [aria-pressed="true"]{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); border-color:var(--sys-color-accent); }
.filters .btn{ width:auto; }
/* ---------- links inside text, menu sheet button ---------- */
main p a:not(.btn){ text-decoration:underline; text-underline-offset:var(--ref-space-4); }
.menu-sheet .btn{ display:inline-flex; }
/* ---------- gentle motion (off with reduced motion: components.css) ---------- */
/* site.js adds .reveal only to blocks that start below the screen, so nothing above the fold ever hides,
and without JavaScript everything simply shows. */
.reveal{ opacity:0; translate:0 var(--sys-motion-rise); }
.reveal.is-in{
opacity:1; translate:0 0;
transition:opacity var(--ref-motion-reveal) var(--ref-motion-ease), translate var(--ref-motion-reveal) var(--ref-motion-ease);
transition-delay:calc(var(--i, 0) * var(--ref-motion-stagger));
}
@keyframes float{ 50%{ translate:0 calc(var(--sys-motion-float) * -1); } }
.panel > *{ animation:float var(--ref-motion-float) ease-in-out infinite; }
.more svg{ transition:translate var(--ref-motion-quick) var(--ref-motion-ease); }
.more:hover svg{ translate:var(--ref-space-4) 0; }
/* ---------- staff page ---------- */
.portrait{ position:relative; overflow:hidden; aspect-ratio:var(--sys-layout-portrait-ratio); border-radius:var(--sys-radius-card); background:var(--sys-color-surface-2); display:grid; place-items:center; padding:var(--sys-space-m); text-align:center; color:var(--sys-color-text-3); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.founder{ display:grid; grid-template-columns:var(--sys-layout-founder-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center; }
.person{ display:grid; gap:var(--sys-space-s); align-content:start; }
.person .label-2{ font-weight:var(--sys-font-weight-bold); }
.band-alt .portrait{ background:var(--sys-color-surface); }
/* ---------- section map (thin line with waypoints, right side) ---------- */
/* Section snapping is done by site.js (curve and timing from tokens); scroll-margin-top tells it, and anchor links,
where each section starts: just below the floating menu, the first section at the very top. */
/* sections stop at their exact top (John 22/10/2026: a strip of the section above showed); their own top padding
(sys.space.section) clears the floating menu */
main > section{ scroll-margin-top:0; }
main > section:first-child{ scroll-margin-top:0; }
.mapper{ position:fixed; z-index:var(--sys-z-nav); right:var(--comp-mapper-offset); top:50%; translate:0 -50%; display:var(--sys-layout-mapper); }
.mapper ol{ position:relative; display:grid; gap:var(--comp-mapper-gap); margin:0; padding:0; list-style:none; }
.mapper ol::before, .mapper ol::after{
content:""; position:absolute; right:calc((var(--comp-mapper-hit) - var(--ref-size-hairline)) / 2);
top:calc(var(--comp-mapper-hit) / 2); width:var(--ref-size-hairline); background:var(--sys-color-border-strong);
height:calc(100% - var(--comp-mapper-hit));
}
.mapper ol::after{ background:var(--sys-color-accent); height:calc((100% - var(--comp-mapper-hit)) * var(--progress, 0)); }
.mapper a{ position:relative; z-index:var(--sys-z-raise); display:grid; place-items:center; width:var(--comp-mapper-hit); height:var(--comp-mapper-hit); }
.mapper a::before{
content:""; width:var(--comp-mapper-dot); height:var(--comp-mapper-dot); border-radius:var(--sys-radius-pill);
background:var(--sys-color-bg); border:var(--ref-size-hairline) solid var(--sys-color-border-strong);
transition:scale var(--ref-motion-quick) var(--ref-motion-ease), background-color var(--ref-motion-fast) linear;
}
.mapper a.is-passed::before{ background:var(--sys-color-accent); border-color:var(--sys-color-accent); }
.mapper a[aria-current="true"]::before{ background:var(--sys-color-accent); border-color:var(--sys-color-accent); scale:var(--comp-mapper-active-scale); }
.mapper span{
position:absolute; right:calc(100% + var(--comp-mapper-label-gap)); white-space:nowrap;
padding:var(--ref-space-4) var(--sys-space-s); border-radius:var(--sys-radius-pill); background:var(--sys-color-surface); color:var(--sys-color-text);
opacity:0; translate:var(--ref-space-4) 0; pointer-events:none;
transition:opacity var(--ref-motion-quick) var(--ref-motion-ease), translate var(--ref-motion-quick) var(--ref-motion-ease);
}
.mapper a:hover span, .mapper a:focus-visible span{ opacity:1; translate:0 0; }
/* ---------- Outer Space: starfield, route (John 22/10/2026). Drawn by site.js; still with reduced motion ---------- */
.hero, .cta{ position:relative; isolation:isolate; }
.hero{ overflow-x:clip; }
.stars{ position:absolute; inset:0; z-index:var(--sys-z-behind); width:100%; height:100%; pointer-events:none; }
.route{ position:relative; }
.route::before{
content:""; position:absolute; left:0; right:0; top:calc(var(--sys-space-card-y) + var(--comp-route-node) / 2);
border-top:var(--ref-size-hairline) dashed var(--sys-color-border-strong); display:var(--sys-layout-route-line);
}
.route > *{ position:relative; }
.node{ display:grid; place-items:center; width:var(--comp-route-node); height:var(--comp-route-node); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent); color:var(--sys-color-on-accent); font-weight:var(--sys-font-weight-bold); }
.mapper a[aria-current="true"]::before{ outline:var(--ref-size-hairline) solid var(--sys-color-accent); outline-offset:var(--ref-space-4); }
/* ---------- design bench (preview only) ---------- */
.bench-label{ justify-self:start; padding:var(--ref-space-4) var(--sys-space-s); border-radius:var(--sys-radius-pill); background:var(--sys-color-surface); color:var(--sys-color-text-2); }
/* ---------- stand-in photos (build.py STOCK): fill their frame, rounded like the cards ---------- */
.photo{ position:relative; overflow:hidden; border-radius:var(--sys-radius-card); background:var(--sys-color-surface-2); }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero-photo{ background:var(--sys-color-surface-2); }
.hero-photo > *{ animation:none; }
.hero-photo .photo{ position:absolute; inset:0; border-radius:0; }
.tile-photo{ aspect-ratio:var(--sys-layout-photo-ratio); margin-bottom:var(--sys-space-xs); border-radius:var(--sys-radius-control); }
.banner{ aspect-ratio:var(--sys-layout-banner-ratio); margin-top:var(--sys-space-xl); }
.reg-photo{ aspect-ratio:var(--sys-layout-photo-ratio); }
.photo-strip{ display:grid; grid-template-columns:var(--sys-layout-photo-strip); gap:var(--sys-space-gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.strip-photo{ aspect-ratio:var(--sys-layout-portrait-ratio); scroll-snap-align:start; }
.photo-band{ padding-top:0; }
/* ---------- home: rows of cards (comp.rail) ---------- */
/* computers (rail.fit 1): a slot is the row's width shared by its --rail-slots, whatever the number of cards; tablets and
phones (rail.fit 0): cards are rail.col wide and the row swipes */
.rail{ display:grid; grid-auto-flow:column; gap:var(--sys-space-gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
grid-auto-columns:calc(var(--comp-rail-fit) * (100% - var(--sys-space-gutter) * (var(--rail-slots) - 1)) / var(--rail-slots) + (1 - var(--comp-rail-fit)) * var(--comp-rail-col)); }
.rail.courses{ --rail-slots:5; }
.rail.teachers{ --rail-slots:4; }
.rail.results{ --rail-slots:3; }
.rail > *{ scroll-snap-align:start; }
.course{ align-content:start; }
.course .more{ margin-top:auto; }
.course-facts{ display:grid; gap:var(--sys-space-xs); margin:0; }
.course-facts div{ display:grid; gap:var(--ref-space-4); padding-top:var(--sys-space-xs); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.course-facts dd{ margin:0; font-weight:var(--sys-font-weight-bold); }
.result{ align-content:start; }
.after-gap{ margin-top:var(--sys-space-gutter); }
/* ---------- home: how it's taught, one tab per problem (comp.problem) ---------- */
.tablist{ display:flex; gap:var(--sys-space-xs); margin-block:var(--sys-space-xl); } /* one row, always */
.tablist .btn{ flex:var(--comp-problem-tab-grow) 1 auto; width:auto; padding-inline:var(--sys-space-s); white-space:nowrap; }
.tablist [aria-selected="true"]{ background:var(--sys-color-text); color:var(--sys-color-bg); border-color:var(--sys-color-text); }
.tabpanel + .tabpanel{ margin-top:var(--sys-space-section); }
/* with the script: all panels in one cell, the others invisible but still taking their room, so the section is always
as tall as the tallest panel and nothing below moves when a tab switches (John 22/10/2026: no layout shift) */
.is-tabbed .tabpanels{ display:grid; }
.is-tabbed .tabpanel{ grid-area:1 / 1; margin-top:0; }
.is-tabbed .tabpanel.is-off, .is-tabbed .tabpanel.is-off *{ visibility:hidden; } /* children too: a demo card that is "visible" would show through */
.problem-in{ display:grid; grid-template-columns:var(--comp-problem-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center; }
.problem-text{ display:grid; gap:var(--sys-space-l); justify-items:start; }
/* ---------- home: what you get, as a bento (comp.bento) ---------- */
.bento{ display:grid; grid-template-columns:var(--comp-bento-columns); grid-template-areas:var(--comp-bento-areas); gap:var(--sys-space-gutter); }
.bento .tile{ align-content:end; }
.bento-photo{ grid-area:photo; aspect-ratio:var(--comp-bento-photo-ratio); }
.bento-photo img{ object-position:center bottom; }
.bento-a{ grid-area:a; } .bento-b{ grid-area:b; } .bento-c{ grid-area:c; } .bento-d{ grid-area:d; }
/* ---------- home: the five levels as stops on one line ---------- */
.stops .tile{ background:transparent; padding-inline:0; }
.stops h3, .course h3, .result .t-title{ font-size:var(--sys-type-heading-size); line-height:var(--sys-type-heading-line); letter-spacing:var(--sys-type-heading-tracking); }
.band-alt .stops .tile{ background:transparent; }
/* ---------- home: the free kit's pages side by side (comp.spread) ---------- */
.spread{ display:grid; grid-template-columns:var(--comp-spread-columns); gap:var(--sys-space-s); padding-top:var(--comp-spread-lift); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.spread img{ width:100%; height:auto; border-radius:var(--sys-radius-control); border:var(--ref-size-hairline) solid var(--sys-color-border); scroll-snap-align:start; }
.spread img:nth-child(2){ transform:translateY(calc(var(--comp-spread-lift) * -1)); }
/* ---------- closing band on a photo (comp.cta-photo) ---------- */
.cta-photo{ overflow:hidden; min-height:var(--comp-cta-photo-height); align-content:center; background:var(--ref-color-black); }
.cta-photo .cta-bg{ position:absolute; inset:0; z-index:var(--sys-z-behind); border-radius:0; }
.cta-scrim{ position:absolute; inset:0; z-index:var(--sys-z-behind); background:var(--ref-color-black); opacity:var(--comp-cta-photo-scrim); }
.cta-photo .t-lead{ color:var(--sys-color-text); }
/* ---------- phones: the sign-up button fixed at the bottom (comp.callbar) ---------- */
.callbar{ position:fixed; z-index:var(--sys-z-fab); left:0; right:0; bottom:0; display:var(--comp-callbar-display); padding:var(--comp-callbar-pad); padding-bottom:calc(var(--comp-callbar-pad) + env(safe-area-inset-bottom, 0%));
background:var(--sys-color-glass); backdrop-filter:var(--comp-nav-material); -webkit-backdrop-filter:var(--comp-nav-material); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
body{ padding-bottom:var(--comp-callbar-space); }
/* ---------- main OSE site: the journey, each planet a level (comp.journey) ---------- */
.journey{ display:grid; grid-auto-flow:column; grid-auto-columns:var(--comp-journey-stop); margin:var(--sys-space-xl) 0 0; padding:0; list-style:none;
overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.stop{ position:relative; isolation:isolate; display:grid; justify-items:center; align-content:start; gap:var(--sys-space-xs); text-align:center; scroll-snap-align:start; }
.stop::before{ content:""; position:absolute; z-index:var(--sys-z-behind); left:0; right:0; top:calc(var(--comp-journey-max) / 2); border-top:var(--comp-journey-line) solid var(--sys-color-border-strong); }
.stop:first-child::before{ left:50%; }
.stop:last-child::before{ right:50%; }
.orbit{ display:grid; place-items:center; height:var(--comp-journey-max); }
.planet{ width:calc(var(--comp-journey-min) + (var(--comp-journey-max) - var(--comp-journey-min)) * var(--i) / 9); aspect-ratio:1; border-radius:var(--sys-radius-pill);
background:var(--planet); box-shadow:0 0 0 var(--comp-journey-edge) var(--sys-color-border); }
.stop-next .planet{ width:var(--comp-journey-max); display:grid; place-items:center; background:var(--sys-color-accent); color:var(--sys-color-on-accent); box-shadow:none; }
.stop-next a{ color:inherit; }
/* src/css/blog.css */
/* Blog: list, tag pages, article and its teaching blocks. Tokens only (tokens/lint.mjs). */
/* ---------- list ---------- */
.page-head .filters{ margin:var(--sys-space-xl) 0 0; }
.filters [aria-current="page"]{ background:var(--sys-color-accent); color:var(--sys-color-on-accent); border-color:var(--sys-color-accent); }
.post{ color:var(--sys-color-text); transition:translate var(--ref-motion-quick) var(--ref-motion-ease), background-color var(--ref-motion-fast) linear; }
a.post:hover{ translate:0 calc(var(--sys-motion-lift) * -1); }
a.post:hover h2, a.post:hover h3{ text-decoration:underline; text-underline-offset:var(--ref-space-4); }
.post .post-meta, .post .t-fine{ color:var(--sys-color-text-2); }
.featured{
position:relative; isolation:isolate; overflow:hidden; gap:var(--sys-space-m);
padding:var(--sys-space-section) var(--sys-space-card-x); background:var(--sys-color-surface-strong);
}
.band-alt .featured{ background:var(--sys-color-surface-strong); }
.featured .t-lead{ color:var(--sys-color-text-2); }
/* ---------- article ---------- */
.article{ width:var(--sys-layout-article); margin-inline:auto; }
.art-head .article{ display:grid; gap:var(--sys-space-m); }
.art-body{ padding-top:0; }
.crumbs{ display:flex; flex-wrap:wrap; gap:var(--sys-space-xs); color:var(--sys-color-text-2); }
.crumbs a:hover{ color:var(--sys-color-text); text-decoration:underline; }
.byline{ color:var(--sys-color-text-2); }
.prose{ display:grid; gap:var(--sys-space-l); font-size:var(--sys-type-read-size); line-height:var(--sys-type-read-line); letter-spacing:var(--sys-type-read-tracking); }
.prose h2{
margin-top:var(--sys-space-xl); scroll-margin-top:var(--sys-space-anchor);
font-size:var(--sys-type-heading-size); line-height:var(--sys-type-heading-line); letter-spacing:var(--sys-type-heading-tracking);
}
.prose h3{ scroll-margin-top:var(--sys-space-anchor); font-size:var(--sys-type-eyebrow-size); line-height:var(--sys-type-eyebrow-line); letter-spacing:var(--sys-type-eyebrow-tracking); }
.prose ul, .prose ol{ display:grid; gap:var(--sys-space-xs); margin:0; padding-inline-start:var(--sys-space-l); }
.prose strong{ font-weight:var(--sys-font-weight-bold); }
.prose a:not(.btn){ text-decoration:underline; text-underline-offset:var(--ref-space-4); }
/* contents list in the text: tablets and phones (computers use the section map) */
.toc{ display:var(--sys-layout-toc-inline); padding-block:0; }
.toc summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--sys-space-m); min-height:var(--ref-size-tap); padding-block:var(--sys-space-m); cursor:pointer; list-style:none; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary svg{ flex:none; transition:transform var(--ref-motion-fast) linear; }
.toc[open] summary svg{ transform:rotate(var(--sys-motion-open-turn)); }
.toc ol{ display:grid; gap:var(--sys-space-xs); margin:0; padding:0 0 var(--sys-space-l) var(--sys-space-l); }
.toc a{ display:block; padding-block:var(--ref-space-4); color:var(--sys-color-text-2); }
.toc a:hover{ color:var(--sys-color-text); text-decoration:underline; }
/* ---------- teaching blocks ---------- */
.blk{ display:grid; gap:var(--sys-space-m); padding:var(--sys-space-card-y) var(--sys-space-card-x); border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.blk-label{
font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); color:var(--sys-color-text-2);
font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line); letter-spacing:var(--sys-type-fine-tracking);
}
.blk-question{ background:var(--sys-color-surface-strong); color:var(--sys-color-on-surface-strong); }
.blk-question .blk-label{ color:var(--sys-color-on-surface-strong); font-size:var(--sys-type-eyebrow-size); line-height:var(--sys-type-eyebrow-line); letter-spacing:var(--sys-type-eyebrow-tracking); }
.blk-vocab, .blk-mistakes, .blk-practice{ display:grid; gap:var(--sys-space-s); }
.vocab{ display:grid; margin:0; border-radius:var(--sys-radius-card); background:var(--sys-color-surface); overflow:hidden; }
.vocab div{ display:grid; grid-template-columns:var(--sys-layout-vocab-columns); gap:var(--sys-space-m); padding:var(--sys-space-s) var(--sys-space-card-x); border-bottom:var(--ref-size-hairline) solid var(--sys-color-border); }
.vocab div:last-child{ border-bottom:0; }
.vocab dt{ font-weight:var(--sys-font-weight-bold); }
.vocab dd{ margin:0; color:var(--sys-color-text-2); }
.blk-mistakes .compare{ font-size:var(--sys-type-body-size); line-height:var(--sys-type-body-line); }
.practice{ border-radius:var(--sys-radius-control); background:var(--sys-color-surface); }
.practice summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--sys-space-m); min-height:var(--ref-size-tap); padding:var(--sys-space-s) var(--sys-space-m); cursor:pointer; list-style:none; }
.practice summary::-webkit-details-marker{ display:none; }
.practice .reveal-label{ flex:none; color:var(--sys-color-text-2); text-decoration:underline; text-underline-offset:var(--ref-space-4); }
.practice[open] .reveal-label{ display:none; }
.practice p{ padding:0 var(--sys-space-m) var(--sys-space-s); font-weight:var(--sys-font-weight-bold); }
.blk-takeaways{ background:var(--sys-color-surface-2); border:var(--ref-size-hairline) solid var(--sys-color-border); }
.blk-cta .tile{ background:var(--sys-color-surface); }
.blk-cta-register{ position:relative; isolation:isolate; overflow:hidden; background:var(--sys-color-surface-strong); font-size:var(--sys-type-body-size); line-height:var(--sys-type-body-line); }
.blk-cta-register p{ color:var(--sys-color-text-2); }
/* ---------- tables in articles (e.g. phrase | meaning): same look as the phrase list ---------- */
.table{ overflow-x:auto; border-radius:var(--sys-radius-card); background:var(--sys-color-surface); }
.table table{ width:100%; border-collapse:collapse; font-size:var(--sys-type-body-size); line-height:var(--sys-type-body-line); letter-spacing:var(--sys-type-body-tracking); }
.table th, .table td{ text-align:left; vertical-align:top; padding:var(--sys-space-s) var(--sys-space-s); border-bottom:var(--ref-size-hairline) solid var(--sys-color-border); }
.table th:first-child, .table td:first-child{ padding-inline-start:var(--sys-space-card-x); }
.table th:last-child, .table td:last-child{ padding-inline-end:var(--sys-space-card-x); }
.table th{
padding-block:var(--sys-space-m) var(--sys-space-s); color:var(--sys-color-text-2); font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold);
font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line); letter-spacing:var(--sys-type-fine-tracking);
}
.table td:first-child{ font-weight:var(--sys-font-weight-bold); }
.table td + td{ color:var(--sys-color-text-2); }
.table tr:last-child td{ border-bottom:0; }
/* ---------- share, author ---------- */
.share{ display:grid; gap:var(--sys-space-s); padding-top:var(--sys-space-l); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.share .btn{ width:auto; }
.share [hidden]{ display:none; }
.author{ grid-template-columns:var(--comp-avatar-columns); gap:var(--sys-space-m); align-items:start; }
.avatar{ width:var(--comp-avatar-size); height:var(--comp-avatar-size); border-radius:var(--sys-radius-pill); }
/* src/css/demo.css */
/* Live app demos (comp.demo): the app shown working in the hero instead of described. Played by src/js/demo.js. */
/* ---------- the app window ---------- */
.demo-win{ position:relative; display:grid; align-content:start; border:var(--ref-size-hairline) solid var(--sys-color-border); border-radius:var(--sys-radius-card); background:var(--sys-color-surface); overflow:hidden; transition:opacity var(--comp-demo-fade) var(--ref-motion-ease); }
.demo-win.is-fading{ opacity:0; }
.demo-bar{ display:flex; align-items:center; gap:var(--comp-demo-gap); min-height:var(--comp-demo-bar); padding-inline:var(--comp-demo-pad); border-bottom:var(--ref-size-hairline) solid var(--sys-color-border); color:var(--sys-color-text-2); }
.demo-dot{ width:var(--comp-demo-dot); height:var(--comp-demo-dot); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent); }
.demo-count{ margin-left:auto; }
.demo-count b{ color:var(--sys-color-text); font-variant-numeric:tabular-nums; }
.demo-body{ display:grid; gap:var(--comp-demo-gap); padding:var(--comp-demo-pad); }
.demo-prompt{ color:var(--sys-color-text-3); }
/* Without the script (or with reduced motion) everything shows finished; demo.js adds .demo-live to and plays it. */
/* ---------- Writing: a corrected paragraph revealing itself ---------- */
.demo-text{ font-size:var(--sys-type-lead-size); line-height:var(--sys-type-lead-line); letter-spacing:var(--sys-type-lead-tracking); }
.demo-fix s{ text-decoration:line-through; text-decoration-thickness:var(--comp-demo-line); text-underline-offset:var(--ref-space-4); color:var(--sys-color-text-3); }
.demo-fix ins{ text-decoration:none; font-weight:var(--sys-font-weight-bold); }
.demo-fix ins::before{ content:" "; }
.demo-live .demo-fix s{ text-decoration:underline wavy transparent; text-decoration-thickness:var(--comp-demo-line); color:var(--sys-color-text);
transition:text-decoration-color var(--comp-demo-draw) var(--ref-motion-ease), color var(--comp-demo-draw) var(--ref-motion-ease); }
.demo-live .demo-fix ins{ display:none; }
.demo-live .demo-fix.is-marked s{ text-decoration-color:var(--sys-color-accent); }
.demo-live .demo-fix.is-fixed s{ text-decoration:line-through; color:var(--sys-color-text-3); }
.demo-live .demo-fix.is-fixed ins{ display:inline; animation:demo-in var(--comp-demo-draw) var(--ref-motion-ease); }
@keyframes demo-in{ from{ opacity:0; } }
/* ---------- Speaking: the answer checked word by word ---------- */
.demo-rec-row{ display:flex; align-items:center; gap:var(--comp-demo-gap); }
.demo-rec{ position:relative; flex:none; width:var(--comp-demo-rec); height:var(--comp-demo-rec); border-radius:var(--sys-radius-pill); background:var(--sys-color-accent); }
.demo-rec::before{ content:""; position:absolute; inset:30%; border-radius:var(--sys-radius-pill); background:var(--sys-color-on-accent); }
.demo-speak.is-playing .demo-rec::after{ content:""; position:absolute; inset:0; border-radius:var(--sys-radius-pill); border:var(--comp-demo-line) solid var(--sys-color-accent); animation:demo-pulse var(--comp-demo-pulse) var(--ref-motion-ease) infinite; }
@keyframes demo-pulse{ from{ transform:scale(1); opacity:1; } to{ transform:scale(1.6); opacity:0; } }
.demo-wave{ position:relative; flex:1; height:var(--comp-demo-wave); }
.demo-live .demo-wave{ --p:0; }
.demo-wave svg{ position:absolute; inset:0; width:100%; height:100%; fill:var(--sys-color-text-3); }
.demo-wave svg + svg{ fill:var(--sys-color-text); clip-path:inset(0 calc((1 - var(--p, 1)) * 100%) 0 0); }
.demo-words{ font-size:var(--sys-type-lead-size); line-height:var(--comp-demo-words-line); letter-spacing:var(--sys-type-lead-tracking); }
.w{ position:relative; transition:color var(--comp-demo-word) var(--ref-motion-ease); }
.w.is-flag{ text-decoration:underline wavy var(--sys-color-accent); text-decoration-thickness:var(--comp-demo-line); text-underline-offset:var(--ref-space-4); }
.w.is-flag::after{ content:attr(data-ipa); position:absolute; left:50%; bottom:100%; transform:translateX(-50%); padding:0 var(--ref-space-8); border-radius:var(--sys-radius-pill);
background:var(--sys-color-accent); color:var(--sys-color-on-accent); font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line); white-space:nowrap; transition:opacity var(--comp-demo-draw) var(--ref-motion-ease); }
.demo-live .w{ color:var(--sys-color-text-3); }
.demo-live .w.is-heard{ color:var(--sys-color-text); }
.demo-live .w.is-flag:not(.is-heard){ text-decoration-color:transparent; }
.demo-live .w.is-flag:not(.is-heard)::after{ opacity:0; }
/* ---------- Progress: one bar per skill ---------- */
.demo-skills{ display:grid; gap:var(--comp-demo-gap); margin:0; padding:0; list-style:none; }
.demo-skills li{ display:grid; gap:var(--ref-space-4); }
.demo-skills i{ display:block; height:var(--comp-demo-skill); border-radius:var(--sys-radius-pill); background:var(--sys-color-border); overflow:hidden; }
.demo-skills i::before{ content:""; display:block; height:100%; background:var(--sys-color-text); transform:scaleX(var(--to)); transform-origin:left; transition:transform var(--comp-demo-grow) var(--ref-motion-ease); }
.demo-live .demo-prog:not(.is-on) .demo-skills i::before{ transform:scaleX(0); }
/* ---------- bento hero: a big headline and small live demos ---------- */
.demo-bento{ display:grid; grid-template-columns:var(--comp-demo-bento-columns); grid-template-areas:var(--comp-demo-bento); gap:var(--sys-space-gutter); }
.demo-bento > .demo-head{ grid-area:head; display:grid; gap:var(--sys-space-l); justify-items:start; align-content:end; }
.demo-bento > .demo-photo{ grid-area:photo; }
.demo-bento > .demo-write{ grid-area:write; }
.demo-bento > .demo-speak{ grid-area:speak; }
.demo-bento > .demo-prog{ grid-area:prog; }
.demo-bento .demo-photo{ min-height:100%; }
/* ---------- Vocabulary: phrases reviewed with their meaning and the sentence they came from ---------- */
.demo-cards{ display:grid; }
.demo-card{ grid-area:1 / 1; display:grid; gap:var(--comp-demo-gap); align-content:start; visibility:hidden; }
.demo-card.is-current{ visibility:visible; }
.demo-live .demo-card.is-current{ animation:demo-in var(--comp-demo-draw) var(--ref-motion-ease); }
.demo-phrase{ font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); font-size:var(--sys-type-title-size); line-height:var(--sys-type-title-line); letter-spacing:var(--sys-type-title-tracking); }
.demo-back{ display:grid; gap:var(--ref-space-8); padding-top:var(--comp-demo-gap); border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.demo-context{ color:var(--sys-color-text-2); }
.demo-live .demo-card:not(.is-open) .demo-back{ opacity:0; }
.demo-back{ transition:opacity var(--comp-demo-draw) var(--ref-motion-ease); }
.demo-dots{ display:flex; gap:var(--ref-space-4); }
.demo-dots i{ width:var(--comp-demo-dot); height:var(--comp-demo-dot); border-radius:var(--sys-radius-pill); background:var(--sys-color-border-strong); transition:background var(--comp-demo-draw) var(--ref-motion-ease); }
.demo-dots i.is-done{ background:var(--sys-color-accent); }
/* ---------- no layout shift: the Writing window keeps its finished height all along ---------- */
/* an invisible copy of the finished paragraph shares the box with the live one, so corrections never push anything */
.demo-textbox{ display:grid; }
.demo-textbox > .demo-text{ grid-area:1 / 1; }
.demo-ghost{ visibility:hidden; }
/* ---------- in the hero: a class photo with the Speaking demo as a card on it (comp.hero-visual) ---------- */
.hero-visual{ position:relative; display:grid; }
.hero-shot{ aspect-ratio:var(--comp-hero-visual-ratio); }
.hero-visual .demo-win{ position:var(--comp-hero-visual-card-position); left:var(--comp-hero-visual-inset); right:var(--comp-hero-visual-inset); bottom:var(--comp-hero-visual-inset);
margin-top:var(--comp-hero-visual-card-pull); margin-inline:var(--comp-hero-visual-card-margin); background:var(--sys-color-glass); backdrop-filter:var(--comp-nav-material); -webkit-backdrop-filter:var(--comp-nav-material); }
/* on phones the picture sits right under the headline (comp.demo order tokens) */
.hero-in:has(> :is(.demo-win, .hero-visual)){ row-gap:var(--comp-demo-hero-gap); }
.hero-in:has(> :is(.demo-win, .hero-visual)) > .hero-text{ display:var(--comp-demo-hero-text); }
.hero-in:has(> :is(.demo-win, .hero-visual)) > .hero-text > *{ order:var(--comp-demo-order-rest); }
.hero-in:has(> :is(.demo-win, .hero-visual)) > .hero-text > :is(.t-eyebrow, .t-hero, .bench-label){ order:var(--comp-demo-order-head); }
.hero-in > :is(.demo-win, .hero-visual){ order:var(--comp-demo-order-demo); }
/* src/css/placeholder-art.css */
/* TEMPORARY: grey stand-ins for the app screenshots (no scores, no names), drawn on the dark app panel.
Deleted when John's demo-account screenshots arrive; the panel then holds ![]()
files.
This file is illustration, not interface, so it is the one stylesheet the token lint skips. */
.panel{ color:#fff; }
.stage{ position:absolute; left:50%; top:50%; width:640px; height:560px; margin:-280px 0 0 -320px; perspective:1800px; zoom:.8; }
@media (max-width:1068px){ .stage{ zoom:.85; } }
@media (max-width:734px){ .stage{ zoom:.5; } }
.stage .s1{ position:absolute; top:40px; left:0; transform:rotateY(-16deg) rotateX(8deg) rotateZ(-2deg); }
.stage .s2{ position:absolute; right:0; top:60px; transform:rotateY(-10deg) rotateX(4deg) rotateZ(4deg); }
.scr{ position:relative; background:#0B0B0D; border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; }
.scr-bar{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.scr-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.2); }
.scr i, .scr b{ display:block; height:8px; border-radius:4px; background:rgba(255,255,255,.14); }
.scr .sk-h{ height:12px; width:42%; background:rgba(255,255,255,.55); margin-bottom:16px; }
.scr .sk-s{ height:8px; width:28%; background:rgba(255,255,255,.28); margin-bottom:10px; }
.ln{ display:flex; gap:6px; margin:11px 0; }
.ln > *{ flex:none; width:var(--w,30%); }
.ln b{ position:relative; background:rgba(255,255,255,.34); }
.ln b::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px; background:#fff; }
.scr-todo{ position:absolute; left:12px; right:12px; bottom:10px; margin:0; font-size:12px; line-height:1.3; letter-spacing:0; color:rgba(255,255,255,.5); }
.scr-wide{ width:580px; }
.scr-write{ display:grid; grid-template-columns:1fr 168px; gap:20px; padding:20px 20px 44px; }
.side{ display:grid; gap:10px; align-content:start; }
.ring{ width:84px; height:84px; border-radius:50%; margin:0 auto 6px; border:8px solid rgba(255,255,255,.14); border-top-color:#fff; border-right-color:#fff; display:grid; place-items:center; }
.ring i{ width:28px; height:10px; background:rgba(255,255,255,.6); }
.fix{ display:grid; gap:7px; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); }
.fix b{ width:56%; background:rgba(255,255,255,.4); }
.fix i:last-child{ width:72%; }
.scr-phone{ width:236px; height:500px; border-radius:36px; padding:44px 16px 16px; box-shadow:0 0 0 7px #1C1C1E, 0 0 0 8px rgba(255,255,255,.12); }
.scr-phone::before{ content:""; position:absolute; top:12px; left:50%; width:76px; height:22px; margin-left:-38px; border-radius:999px; background:#000; }
.trend{ width:100%; height:84px; margin:6px 0 16px; }
.trend .area{ fill:rgba(255,255,255,.08); }
.trend .line{ fill:none; stroke:#fff; stroke-width:2.5; }
.skill{ display:grid; grid-template-columns:18px 1fr; align-items:center; gap:10px; margin:14px 0; font:700 12px/1 var(--sys-font-head); color:rgba(255,255,255,.7); }
.skill i{ position:relative; height:10px; border-radius:5px; background:rgba(255,255,255,.1); }
.skill i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:5px; background:#fff; }
.cardlet{ margin-top:16px; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); display:grid; gap:8px; }
/* src/css/mission.css */
/* Main OSE site, "Mission control" (comp.mission; John 22/10/2026, after the research on edtech and space brands).
The space theme is told through precision: tracked instrument labels, big figures, hairlines, one sharp O planet on
black, a flight plan. Black and white only (John 22/10/2026), the planets and the logo's ring the only colour; nothing on top of anything. */
/* ---------- labels: section number + name, tracked out like an instrument panel ---------- */
.mc-label{ display:flex; align-items:center; gap:var(--comp-mission-index-gap); margin:0; color:var(--sys-color-text-2);
font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); font-size:var(--sys-type-fine-size); line-height:var(--sys-type-fine-line);
letter-spacing:var(--comp-mission-label-tracking); text-transform:uppercase; font-variant-numeric:tabular-nums; }
.mc-index{ color:var(--sys-color-text); }
.mc-draft{ display:inline-block; margin-top:var(--sys-space-s); padding:var(--ref-space-4) var(--sys-space-s); border-radius:var(--sys-radius-pill);
border:var(--ref-size-hairline) dashed var(--sys-color-border-strong); color:var(--sys-color-text-2); }
/* ---------- section head: a hairline, the label, then the headline left and its line right ---------- */
.mc-head{ display:grid; gap:var(--sys-space-l); margin-bottom:var(--sys-space-xl); padding-top:var(--sys-space-m); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-head-in{ display:grid; grid-template-columns:var(--comp-mission-head-columns); gap:var(--sys-space-m) var(--sys-space-gutter); align-items:end; }
.mc-head h2{ margin:0; }
.mc-head .t-lead{ margin:0; color:var(--sys-color-text-2); }
/* ---------- hero: words beside a real class photo, four figures under both ---------- */
.mc-hero{ padding-block:var(--sys-space-page-top) var(--sys-space-xl); }
.mc-hero-in{ display:grid; grid-template-columns:var(--comp-mission-hero-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center; }
.mc-hero-text{ display:grid; gap:var(--sys-space-l); justify-items:start; align-content:end; }
.mc-hero-text .t-lead{ margin:0; color:var(--sys-color-text-2); max-width:var(--sys-layout-measure); }
.mc-hero-text h1{ margin:0; }
.mc-hero-photo{ margin:0; display:grid; gap:var(--sys-space-s); }
.mc-hero-photo .photo{ aspect-ratio:var(--comp-mission-hero-photo-ratio); }
.mc-photo img, .mc-hero-photo img{ filter:saturate(var(--comp-mission-photo-saturate)); }
.mc-caption{ display:flex; justify-content:space-between; gap:var(--sys-space-m); color:var(--sys-color-text-2); }
.mc-spec{ display:grid; grid-template-columns:var(--comp-mission-spec-columns); gap:var(--sys-space-l) var(--sys-space-gutter);
margin:var(--sys-space-section) 0 0; padding:0; list-style:none; }
.mc-spec li{ display:grid; gap:var(--sys-space-xs); align-content:start; padding-top:var(--sys-space-m); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-figure{ display:flex; align-items:baseline; gap:var(--comp-mission-figure-unit-gap); margin:0; font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold);
font-size:var(--sys-type-display-size); line-height:var(--sys-type-display-line); letter-spacing:var(--sys-type-display-tracking); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mc-figure small{ font-family:var(--sys-font-text); font-weight:var(--sys-font-weight-regular); font-size:var(--sys-type-body-size); line-height:var(--sys-type-body-line); letter-spacing:0; color:var(--sys-color-text-2); }
.mc-spec p:not(.mc-figure){ margin:0; color:var(--sys-color-text-2); }
/* ---------- deep space: a black band, words on plain black, the planet on its own side (never under the words) ---------- */
.mc-space{ display:grid; grid-template-columns:var(--comp-mission-space-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:center;
padding:var(--comp-space-window-pad); border-radius:var(--comp-space-window-radius); background:var(--ref-color-black); color:var(--sys-color-text); }
.mc-space-text{ display:grid; gap:var(--sys-space-l); align-content:center; justify-items:start; }
.mc-space-text h2, .mc-space-text p{ margin:0; }
.mc-space-text .t-lead{ color:var(--sys-color-text-2); }
.mc-space-art{ position:relative; isolation:isolate; display:grid; place-items:center; min-height:var(--comp-mission-art-height); }
.mc-space-art svg{ display:block; width:100%; height:auto; overflow:visible; }
.mc-rows{ display:grid; width:100%; margin:0; }
.mc-rows div{ display:grid; grid-template-columns:var(--sys-layout-split); gap:var(--sys-space-m); padding-block:var(--sys-space-s); border-top:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-rows div:last-child{ border-bottom:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-rows dt{ color:var(--sys-color-text-2); }
.mc-rows dd{ margin:0; }
/* the logo's O: the glyph in cream (the logo on dark), its aurora ring, two hairline orbits with a satellite each */
.mc-o-body{ fill:var(--ref-color-white); }
.mc-o-ring{ fill:none; stroke-linecap:round; }
.mc-ring-a{ stop-color:var(--ref-color-logo-mint); }
.mc-ring-b{ stop-color:var(--ref-color-logo-purple); }
.mc-orbit{ fill:none; stroke:var(--sys-color-border-strong); }
.mc-sat{ fill:var(--sys-color-text); }
.mc-tick{ fill:var(--sys-color-text-2); font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); letter-spacing:var(--comp-mission-label-tracking); }
/* ---------- programmes: a manifest, one hairline row per programme, the whole row a link ---------- */
.mc-progs{ margin:0; padding:0; list-style:none; border-bottom:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-prog{ display:grid; grid-template-columns:var(--comp-mission-prog-columns); gap:var(--ref-space-4) var(--sys-space-gutter); align-items:baseline;
padding-block:var(--sys-space-l); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); color:var(--sys-color-text);
transition:background-color var(--ref-motion-fast) linear, padding var(--ref-motion-quick) var(--ref-motion-ease); }
.mc-prog > *{ grid-column:var(--comp-mission-prog-cell); margin:0; }
.mc-prog h3{ font-size:var(--sys-type-heading-size); line-height:var(--sys-type-heading-line); letter-spacing:var(--sys-type-heading-tracking); }
.mc-prog .mc-who{ color:var(--sys-color-text-2); }
.mc-prog .mc-line{ color:var(--sys-color-text-2); }
.mc-prog .mc-go{ grid-column:-2 / -1; grid-row:1; align-self:center; display:grid; place-items:center; color:var(--sys-color-accent);
transition:translate var(--ref-motion-quick) var(--ref-motion-ease); }
.mc-prog:hover{ background:var(--sys-color-surface); text-decoration:none; }
.mc-prog:hover .mc-go{ translate:var(--ref-space-4) 0; }
.mc-prog:focus-visible{ outline-offset:calc(var(--ref-space-4) * -1); }
/* ---------- flight plan: the levels on one hairline, planets growing along it, IELTS ringed at the end ---------- */
.mc-track{ overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; }
.mc-stops{ display:grid; grid-auto-flow:column; grid-auto-columns:var(--comp-mission-track-col); margin:0; padding:0; list-style:none; }
.mc-stop{ position:relative; isolation:isolate; display:grid; gap:var(--ref-space-4); align-content:start; padding-right:var(--sys-space-s); scroll-snap-align:start; }
.mc-stop::before{ content:""; position:absolute; z-index:var(--sys-z-behind); left:0; right:0; top:calc(var(--comp-mission-dot-box) / 2);
border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); transition:border-color var(--ref-motion-quick) linear; }
.mc-stop.is-passed::before{ border-top-color:var(--sys-color-text); }
.mc-stop:last-child::before{ display:none; }
.mc-orbit-box{ display:flex; align-items:center; height:var(--comp-mission-dot-box); }
.mc-dot{ width:calc(var(--comp-mission-dot-min) + (var(--comp-mission-dot-max) - var(--comp-mission-dot-min)) * var(--i) / 9); aspect-ratio:1; border-radius:var(--sys-radius-pill);
background:var(--sys-color-bg); border:var(--comp-mission-line) solid var(--sys-color-text); transition:background-color var(--ref-motion-quick) linear; }
.mc-stop.is-passed .mc-dot{ background:var(--sys-color-text); }
.mc-stop .mc-label{ margin-top:var(--sys-space-s); }
.mc-stop b{ font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); }
.mc-stop .t-fine{ color:var(--sys-color-text-2); }
.mc-goal .mc-dot{ width:var(--comp-mission-dot-max); background:var(--sys-color-accent); border-color:var(--sys-color-accent);
outline:var(--comp-mission-line) solid var(--sys-color-accent); outline-offset:var(--comp-mission-goal-ring); }
.mc-goal a{ color:var(--sys-color-accent); font-weight:var(--sys-font-weight-bold); }
/* ---------- one lesson: big figures beside a class photo ---------- */
.mc-stat .mc-figure{ font-size:var(--sys-type-hero-size); line-height:var(--sys-type-hero-line); letter-spacing:var(--sys-type-hero-tracking); }
.mc-stat{ align-content:space-between !important; }
.tile .mc-figure{ color:var(--sys-color-text); }
.mc-crew .portrait{ background:var(--sys-color-surface); }
.mc-stat h3, .mc-stat p{ margin:0; }
/* ---------- progress for parents: a report, the app, a chat (comp.demo windows) ---------- */
.mc-demo-tag{ margin-left:auto; text-transform:uppercase; letter-spacing:var(--comp-mission-label-tracking); }
.mc-report-rows{ display:grid; margin:0; }
.mc-report-rows div{ display:flex; justify-content:space-between; gap:var(--sys-space-m); padding-block:var(--sys-space-xs); border-top:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-report-rows dt{ color:var(--sys-color-text-2); }
.mc-report-rows dd{ margin:0; font-weight:var(--sys-font-weight-bold); font-variant-numeric:tabular-nums; }
.mc-note{ display:grid; gap:var(--ref-space-4); padding-top:var(--sys-space-xs); border-top:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-note p{ margin:0; }
.mc-chat{ display:grid; gap:var(--sys-space-xs); margin:0; padding:0; list-style:none; }
.mc-chat li{ max-width:var(--comp-mission-chat-max); padding:var(--sys-space-xs) var(--sys-space-s); border-radius:var(--sys-radius-control);
background:var(--sys-color-surface-2); border:var(--comp-mission-line) solid var(--sys-color-border); transition:opacity var(--comp-demo-draw) var(--ref-motion-ease); }
.mc-chat li.is-me{ justify-self:end; background:var(--sys-color-accent); border-color:var(--sys-color-accent); color:var(--sys-color-on-accent); }
.demo-live .mc-chat li:not(.is-said){ opacity:0; }
/* ---------- ground station: the address as a spec sheet, a quiet signal on black beside it ---------- */
.mc-base{ display:grid; grid-template-columns:var(--sys-layout-split); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:start; }
.mc-base-text{ display:grid; gap:var(--sys-space-l); align-content:start; justify-items:start; }
.mc-radar{ position:relative; display:grid; place-items:center; gap:var(--sys-space-m); padding:var(--comp-space-window-pad);
border:var(--comp-mission-line) solid var(--sys-color-border); border-radius:var(--comp-space-window-radius); background:var(--ref-color-black); color:var(--sys-color-text); }
.mc-radar svg{ width:100%; max-width:var(--comp-mission-art-size); height:auto; }
.mc-radar-pulse{ fill:none; stroke:var(--ref-color-obs-white); transform-box:fill-box; transform-origin:center; animation:mc-pulse var(--comp-mission-radar) var(--ref-motion-ease) infinite; }
@keyframes mc-pulse{ from{ transform:scale(1); opacity:1; } to{ transform:scale(6); opacity:0; } }
.mc-radar .mc-label{ color:var(--sys-color-text-2); }
/* ---------- closing band: black, words left, the O right ---------- */
.mc-cta{ grid-template-columns:var(--comp-mission-hero-columns); }
.mc-cta .mc-space-art{ min-height:0; }
.mc-cta .mc-space-art svg{ max-width:var(--comp-mission-art-size); }
@media (prefers-reduced-motion: reduce){ .mc-radar-pulse{ animation:none; opacity:0; } }
/* ---------- Day and night (John 22/10/2026): full-width black bands for the moments with few words ---------- */
/* the band itself is the night: edge to edge, no box on white; the words sit on plain black, the art beside them */
.mc-night{ background:var(--ref-color-black); color:var(--sys-color-text); }
.mc-night .mc-space, .mc-night .mc-radar{ padding:0; border:0; border-radius:0; background:none; }
.mc-hero.mc-night{ padding-bottom:var(--sys-space-section); }
.mc-hero-art{ min-height:var(--comp-mission-art-height); }
.mc-night .mc-head{ border-top-color:var(--sys-color-border); }
/* ---------- the flight plan as real planets ("Observatory", John 22/10/2026), src/planets_ose.py ----------
Every sphere shares one light; colours are tokens (ref.color.obs-*, comp.plan.*). The trip (mission.js) plays on a
clock once the plan has settled on screen; without the script, or with reduced motion, the plan shows lit and still. */
/* stop colours: classes on SVG and shapes (src/planets_ose.py) */
.ea-hi{ stop-color:var(--ref-color-obs-earth-hi); } .ea-base{ stop-color:var(--ref-color-obs-earth-base); } .ea-low{ stop-color:var(--ref-color-obs-earth-low); } .ea-land{ stop-color:var(--ref-color-obs-earth-land); } .ea-land2{ stop-color:var(--ref-color-obs-earth-land2); } .ea-cloud{ stop-color:var(--ref-color-obs-earth-cloud); } .ea-haze{ stop-color:var(--ref-color-obs-earth-haze); }
.sa-b1{ stop-color:var(--ref-color-obs-saturn-b1); } .sa-b2{ stop-color:var(--ref-color-obs-saturn-b2); } .sa-b3{ stop-color:var(--ref-color-obs-saturn-b3); } .sa-b4{ stop-color:var(--ref-color-obs-saturn-b4); } .sa-ring{ stop-color:var(--ref-color-obs-saturn-ring); } .sa-ring2{ stop-color:var(--ref-color-obs-saturn-ring2); } .sa-haze{ stop-color:var(--ref-color-obs-saturn-haze); }
.ie-hi{ stop-color:var(--ref-color-obs-ielts-hi); } .ie-base{ stop-color:var(--ref-color-obs-ielts-base); } .ie-low{ stop-color:var(--ref-color-obs-ielts-low); } .ie-haze{ stop-color:var(--ref-color-obs-ielts-haze); } .ie-mint, .ie-ring-a{ stop-color:var(--ref-color-logo-mint); } .ie-ring-b{ stop-color:var(--ref-color-logo-purple); }
.k-w{ stop-color:var(--ref-color-obs-white); } .k-k{ stop-color:var(--ref-color-obs-black); }
.mo-hi{ stop-color:var(--ref-color-obs-moon-hi); } .mo-base{ stop-color:var(--ref-color-obs-moon-base); } .mo-low{ stop-color:var(--ref-color-obs-moon-low); } .mo-mare{ stop-color:var(--ref-color-obs-moon-mare); }
.su-core{ stop-color:var(--ref-color-obs-sun-core); } .su-mid{ stop-color:var(--ref-color-obs-sun-mid); } .su-edge{ stop-color:var(--ref-color-obs-sun-edge); } .su-limb{ stop-color:var(--ref-color-obs-sun-limb); } .su-cor{ stop-color:var(--ref-color-obs-sun-corona); }
.ma-hi{ stop-color:var(--ref-color-obs-mars-hi); } .ma-base{ stop-color:var(--ref-color-obs-mars-base); } .ma-low{ stop-color:var(--ref-color-obs-mars-low); } .ma-mare{ stop-color:var(--ref-color-obs-mars-mare); } .ma-cap{ stop-color:var(--ref-color-obs-mars-cap); } .ma-haze{ stop-color:var(--ref-color-obs-mars-haze); }
.ve-hi{ stop-color:var(--ref-color-obs-venus-hi); } .ve-base{ stop-color:var(--ref-color-obs-venus-base); } .ve-low{ stop-color:var(--ref-color-obs-venus-low); } .ve-band{ stop-color:var(--ref-color-obs-venus-band); } .ve-haze{ stop-color:var(--ref-color-obs-venus-haze); }
.ju-b1{ stop-color:var(--ref-color-obs-jupiter-b1); } .ju-b2{ stop-color:var(--ref-color-obs-jupiter-b2); } .ju-b3{ stop-color:var(--ref-color-obs-jupiter-b3); } .ju-b4{ stop-color:var(--ref-color-obs-jupiter-b4); } .ju-b5{ stop-color:var(--ref-color-obs-jupiter-b5); } .ju-spot{ stop-color:var(--ref-color-obs-jupiter-spot); } .ju-haze{ stop-color:var(--ref-color-obs-jupiter-haze); }
.me-hi{ stop-color:var(--ref-color-obs-mercury-hi); } .me-base{ stop-color:var(--ref-color-obs-mercury-base); } .me-low{ stop-color:var(--ref-color-obs-mercury-low); } .me-dark{ stop-color:var(--ref-color-obs-mercury-dark); } .me-bright{ stop-color:var(--ref-color-obs-mercury-bright); }
.ur-hi{ stop-color:var(--ref-color-obs-uranus-hi); } .ur-base{ stop-color:var(--ref-color-obs-uranus-base); } .ur-low{ stop-color:var(--ref-color-obs-uranus-low); } .ur-haze{ stop-color:var(--ref-color-obs-uranus-haze); } .ur-ring{ stop-color:var(--ref-color-obs-uranus-ring); }
.ne-hi{ stop-color:var(--ref-color-obs-neptune-hi); } .ne-base{ stop-color:var(--ref-color-obs-neptune-base); } .ne-low{ stop-color:var(--ref-color-obs-neptune-low); } .ne-spot{ stop-color:var(--ref-color-obs-neptune-spot); } .ne-cloud{ stop-color:var(--ref-color-obs-neptune-cloud); } .ne-haze{ stop-color:var(--ref-color-obs-neptune-haze); }
.fl{ stop-color:var(--glow-c); }
.og-a{ stop-color:var(--ref-color-logo-mint); } .og-b{ stop-color:var(--ref-color-logo-purple); }
.rl-a{ stop-color:var(--ref-color-obs-white); } .rl-b{ stop-color:var(--ref-color-logo-mint); } .rl-c{ stop-color:var(--ref-color-logo-purple); }
.pr-c{ stop-color:var(--ref-color-obs-white); }
.ob-void{ fill:var(--ref-color-obs-black); } .ob-ghost{ fill:none; stroke:var(--sys-color-border); opacity:0; transition:opacity var(--comp-plan-label-fade) linear; }
.is-armed .ob-stop:not(.is-lit) .ob-ghost{ opacity:1; }
/* ---------- the plan ---------- */
.ob-plan{ position:relative; }
.ob-hud{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sys-space-s) var(--sys-space-m); margin-bottom:var(--sys-space-m); }
.ob-read{ white-space:nowrap; letter-spacing:var(--comp-plan-hud-tracking); }
.ob-read{ color:var(--sys-color-text); min-height:var(--sys-type-fine-line); }
.ob-live{ width:var(--comp-plan-live); height:var(--comp-plan-live); border-radius:var(--sys-radius-pill); background:var(--ref-color-logo-mint); }
.is-flying .ob-live{ animation:var(--comp-plan-blink) steps(2, jump-none) infinite ob-blink; }
@keyframes ob-blink{ from{ opacity:1; } to{ opacity:0.25; } }
.ob-ticks{ display:flex; gap:var(--comp-plan-tick-gap); }
.ob-ticks i{ width:var(--comp-plan-tick-w); height:var(--comp-plan-tick-h); background:var(--sys-color-text); transition:background-color var(--comp-plan-label-fade) linear; }
.ob-ticks i:last-child{ background:var(--ref-color-logo-mint); }
.is-armed .ob-ticks i:not(.on){ background:var(--sys-color-border); }
.ob-track{ position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; margin-inline:calc(var(--comp-plan-bleed) * -1); padding-inline:var(--comp-plan-bleed); }
.ob-track::-webkit-scrollbar{ display:none; }
.ob-stops{ position:relative; z-index:var(--sys-z-raise); display:grid; grid-template-columns:var(--comp-plan-cols); margin:0; padding:0; list-style:none; }
.ob-stop{ display:grid; justify-items:center; align-content:start; gap:var(--ref-space-4); text-align:center; }
.ob-stage{ display:grid; place-items:center; width:100%; height:var(--comp-plan-stage); }
.ob-body{ display:grid; place-items:center; width:calc(var(--s) * var(--comp-plan-scale)); }
.ob-body > *, .ob-art > *{ grid-area:1 / 1; display:block; width:100%; }
.ob-art{ display:grid; place-items:center; }
.ob-body svg{ display:block; width:100%; height:auto; overflow:visible; }
.ob-flare{ opacity:0; transform:scale(0); }
.ob-goal .ob-o-glow{ overflow:visible; }
.ob-num{ justify-content:center; margin-top:var(--sys-space-xs); }
.ob-num .mc-index{ color:var(--sys-color-text-2); transition:color var(--comp-plan-label-fade) linear; }
.ob-name{ font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold); color:var(--sys-color-text); transition:color var(--comp-plan-label-fade) linear; }
a.ob-name{ text-decoration:none; }
.ob-age{ color:var(--sys-color-text-2); }
.is-armed .ob-stop:not(.is-lit) .ob-name{ color:var(--sys-color-text-2); }
.ob-stop.is-now .mc-index{ color:var(--sys-color-text); }
.ob-goal.is-lit .mc-index{ color:var(--ref-color-logo-mint); }
/* the rail through the planets' centres, the fill that follows the light, the light itself */
.ob-rail{ position:absolute; z-index:0; left:0; top:calc(var(--comp-plan-stage) / 2); width:0; height:0; pointer-events:none; }
.ob-rail-base{ position:absolute; left:0; right:0; top:0; border-top:var(--ref-size-hairline) solid var(--sys-color-border); }
.ob-fill{ position:absolute; left:0; top:calc(var(--comp-plan-rail) / -2); width:100%; height:var(--comp-plan-rail); overflow:hidden; }
.ob-fill-in{ display:block; width:100%; height:100%; }
.ob-fill svg, .ob-tail svg{ display:block; width:100%; height:100%; }
.ob-probe{ position:absolute; left:0; top:0; opacity:0; }
.ob-dot{ position:absolute; left:calc(var(--comp-plan-probe) / -2); top:calc(var(--comp-plan-probe) / -2); width:var(--comp-plan-probe); height:var(--comp-plan-probe); }
.ob-dot svg{ display:block; width:100%; height:100%; }
.ob-tail{ position:absolute; right:0; top:calc(var(--comp-plan-rail) / -2); width:var(--comp-plan-tail); height:var(--comp-plan-rail); transform-origin:100% 50%; transform:scaleX(0); }
.is-armed .ob-art, .is-armed .ob-flare, .is-armed .ob-probe, .is-armed .ob-tail, .is-armed .ob-fill, .is-armed .ob-fill-in{ will-change:transform, opacity; }
/* the Sun's corona breathes, only while the plan is on screen */
.ob-sun .ob-amb{ display:block; animation:var(--comp-plan-breathe) ease-in-out infinite alternate ob-breathe; animation-play-state:paused; }
.is-live .ob-amb{ animation-play-state:running; }
@keyframes ob-breathe{ from{ transform:scale(1); } to{ transform:scale(var(--comp-plan-breathe-scale)); } }
@media (prefers-reduced-motion: reduce){ .ob-amb{ animation:none !important; } }
/* ---------- one lesson: the photo beside four figures in type (build_ose.lesson_specs), like the hero's figures ---------- */
.mc-lesson{ display:grid; grid-template-columns:var(--comp-mission-lesson-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:stretch; }
.mc-lesson-photo{ min-height:100%; aspect-ratio:var(--sys-layout-photo-ratio); }
.mc-specs{ display:grid; grid-template-columns:var(--comp-mission-lesson-specs); gap:var(--sys-space-xl) var(--sys-space-gutter); align-content:space-between; margin:0; padding:0; list-style:none; }
.mc-specs li{ display:grid; gap:var(--sys-space-xs); align-content:start; padding-top:var(--sys-space-m); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-specs .mc-figure{ font-size:var(--sys-type-hero-size); line-height:var(--sys-type-hero-line); letter-spacing:var(--sys-type-hero-tracking); }
.mc-specs h3, .mc-specs p{ margin:0; }
.mc-specs p:not(.mc-figure){ color:var(--sys-color-text-2); }
/* ---------- the centre: the Earth with a beacon where Vietnam is (planets_ose.earth_beacon) ---------- */
.mc-earth{ width:100%; max-width:var(--comp-mission-earth); }
.mc-earth svg{ display:block; width:100%; height:auto; overflow:visible; }
.mc-beacon{ fill:var(--ref-color-logo-mint); }
.mc-beacon-pulse{ fill:none; stroke:var(--ref-color-logo-mint); transform-box:fill-box; transform-origin:center; animation:mc-pulse var(--comp-mission-radar) var(--ref-motion-ease) infinite; }
@media (prefers-reduced-motion: reduce){ .mc-beacon-pulse{ animation:none; opacity:0; } }
/* ---------- the programme list: the real planets each programme covers ---------- */
.mc-who{ display:grid; gap:var(--ref-space-4); }
.mc-who p{ margin:0; color:var(--sys-color-text-2); }
.mc-minis{ display:flex; align-items:center; gap:var(--ref-space-4); }
.mc-who .mc-mini{ display:block; width:var(--comp-mission-mini); }
.mc-who :is(.mc-mini-saturn, .mc-mini-uranus, .mc-mini-ielts){ width:var(--comp-mission-mini-ringed); }
.mc-mini svg{ display:block; width:100%; height:auto; overflow:visible; }
.mc-prog:hover .mc-mini{ transform:scale(var(--comp-plan-breathe-scale)); }
.mc-mini{ transition:transform var(--ref-motion-quick) var(--ref-motion-ease); }
/* ---------- teachers as crew cards; a photo still missing shows a dark frame with a small lit O ---------- */
.mc-crewcard .mc-label{ margin-top:var(--sys-space-xs); }
.mc-crew .mc-portrait-todo{ display:grid; place-items:center; align-content:center; gap:var(--sys-space-m); background:var(--ref-color-black); color:var(--ref-color-gray-400); }
.mc-portrait-o{ display:block; width:var(--comp-mission-portrait-o); }
.mc-portrait-o svg{ display:block; width:100%; height:auto; overflow:visible; }
/* ---------- FAQ: numbered questions beside an ask-us card; answers fade in ---------- */
.mc-faq{ display:grid; grid-template-columns:var(--comp-mission-faq-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:start; }
.mc-faq summary{ justify-content:flex-start; }
.mc-faq summary svg{ margin-left:auto; }
.mc-q{ min-width:var(--sys-space-xl); color:var(--sys-color-text-2); font-variant-numeric:tabular-nums; }
.mc-faq details[open] .mc-q{ color:var(--sys-color-accent); }
.mc-faq details[open] p{ animation:mc-faq-in var(--ref-motion-reveal) var(--ref-motion-ease); }
@keyframes mc-faq-in{ from{ opacity:0; translate:0 var(--sys-motion-rise); } }
.mc-ask{ display:grid; gap:var(--sys-space-m); justify-items:start; padding:var(--sys-space-card-y) var(--sys-space-card-x); border-radius:var(--sys-radius-card); border:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-ask h3, .mc-ask p{ margin:0; }
.mc-ask-dot{ width:var(--comp-plan-live); height:var(--comp-plan-live); border-radius:var(--sys-radius-pill); background:var(--ref-color-logo-mint); }
/* ---------- after the trip, pointing at a planet glides the light and the line there ---------- */
.is-pointing :is(.ob-art, .ob-fill, .ob-fill-in, .ob-probe){ transition:transform var(--comp-plan-point) var(--ref-motion-ease), opacity var(--comp-plan-point) var(--ref-motion-ease); }
.ob-stop{ cursor:default; }
@media (prefers-reduced-motion: reduce){ .mc-faq details[open] p{ animation:none; } .is-pointing :is(.ob-art, .ob-fill, .ob-fill-in, .ob-probe){ transition:none; } }
/* ---------- the other pages (build_ose.Sec, course_page): the same sections, a few more parts ---------- */
.mc-hero-planet{ width:100%; max-width:var(--comp-mission-hero-planet); }
.mc-hero-planet svg, .mc-hero-art .mc-earth svg{ display:block; width:100%; height:auto; overflow:visible; }
.mc-crew-grid{ display:grid; grid-template-columns:var(--sys-layout-grid-4); gap:var(--sys-space-xl) var(--sys-space-gutter); }
.mc-photos{ display:grid; grid-template-columns:var(--comp-mission-photos); gap:var(--sys-space-gutter); }
.mc-photos .photo{ aspect-ratio:var(--sys-layout-photo-ratio); background:var(--sys-color-surface); display:grid; place-items:center; text-align:center; padding:var(--sys-space-m); color:var(--sys-color-text-3); }
.mc-ask-wide{ justify-items:start; padding:var(--sys-space-section) var(--sys-space-card-x); }
.mc-ask-wide h2, .mc-ask-wide .t-lead{ margin:0; }
.mc-level:hover{ background:none; }
/* ---------- sign-up (build_ose.register): the three steps on a night band, then the form beside what's free ---------- */
.mc-reg-hero .mc-hero-in{ align-items:center; }
.mc-steps{ position:relative; display:grid; gap:var(--sys-space-xl); margin:0; padding:0; list-style:none; }
.mc-steps::before{ content:""; position:absolute; left:calc(var(--ref-size-tap) / 2); top:calc(var(--ref-size-tap) / 2); bottom:calc(var(--ref-size-tap) / 2);
border-left:var(--comp-mission-line) solid var(--sys-color-border); }
.mc-steps li{ position:relative; display:grid; grid-template-columns:var(--comp-mission-step-columns); gap:var(--sys-space-m); align-items:start; }
.mc-step-n{ display:grid; place-items:center; width:var(--ref-size-tap); height:var(--ref-size-tap); border-radius:var(--sys-radius-pill);
border:var(--comp-mission-line) solid var(--sys-color-text); background:var(--ref-color-black); font-family:var(--sys-font-head); font-weight:var(--sys-font-weight-bold);
font-size:var(--sys-type-fine-size); letter-spacing:var(--comp-mission-label-tracking); font-variant-numeric:tabular-nums; }
.mc-steps li:last-child .mc-step-n{ background:var(--sys-color-text); color:var(--ref-color-black); }
.mc-steps h2, .mc-steps p{ margin:0; }
.mc-steps p{ color:var(--sys-color-text-2); }
.mc-reg-in{ display:grid; grid-template-columns:var(--comp-mission-form-columns); gap:var(--sys-space-xl) var(--sys-space-gutter); align-items:start; }
.mc-reg-form form{ display:grid; gap:var(--sys-space-xl); }
.mc-reg-form .group{ padding-top:var(--sys-space-m); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-reg-form .group + .group{ padding-top:var(--sys-space-m); border-top:var(--comp-mission-line) solid var(--sys-color-border-strong); }
.mc-reg-form .group > legend.mc-label{ display:flex; float:left; width:100%; margin-bottom:var(--sys-space-l); }
.mc-reg-side{ position:var(--sys-layout-intro-position); top:var(--sys-space-page-top); display:grid; gap:var(--sys-space-l); }
.mc-reg-photo{ aspect-ratio:var(--sys-layout-photo-ratio); }
.mc-reg-gets{ display:grid; gap:var(--sys-space-s); }
.mc-reg-gets h2{ margin:0; }
.mc-reg-gets .mc-rows div{ grid-template-columns:var(--comp-mission-step-columns); align-items:center; }
.mc-reg-gets dd{ font-weight:var(--sys-font-weight-bold); }
.mc-reg-form .opt span{ border-color:var(--sys-color-border-strong); } /* chips are white on white here: an outline like the fields */
.mc-reg-form .opt input:checked + span{ border-color:var(--sys-color-accent); }