@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("/assets/caveat-edcb7abc.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("/assets/dm-sans-italic-d1563540.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/dm-sans-17f2dd45.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url("/assets/jetbrains-mono-italic-6fab9a48.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/jetbrains-mono-6e3b5ce4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Newsreader';
font-style: italic;
font-weight: 300 700;
font-display: swap;
src: url("/assets/newsreader-italic-538d03e0.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Newsreader';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/newsreader-ddf810a9.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/heebo-4ff5ebdc.woff2") format('woff2');
unicode-range: U+0590-05FF, U+200E-200F, U+2066-2069, U+FB1D-FB4F;
}
@font-face {
font-family: 'Frank Ruhl Libre';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/frank-ruhl-libre-894cb209.woff2") format('woff2');
unicode-range: U+0590-05FF, U+200E-200F, U+2066-2069, U+FB1D-FB4F;
}
@font-face {
font-family: 'Noto Sans Arabic';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/noto-sans-arabic-48392729.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+200E-200F, U+2066-2069, U+FD3E-FD3F, U+FDF0-FDFD, U+FE70-FEFF;
}
@font-face {
font-family: 'Noto Naskh Arabic';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/assets/noto-naskh-arabic-209534df.woff2") format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+200E-200F, U+2066-2069, U+FD3E-FD3F, U+FDF0-FDFD, U+FE70-FEFF;
}
@font-face {
font-family: 'DM Sans Fallback';
src: local('Arial');
size-adjust: 106.25%;
ascent-override: 93.36%;
descent-override: 29.18%;
line-gap-override: 0.00%;
}
@font-face {
font-family: 'Newsreader Fallback';
src: local('Times New Roman');
size-adjust: 99.72%;
ascent-override: 73.70%;
descent-override: 26.57%;
line-gap-override: 0.00%;
}
@layer reset, tokens, base, layout, components, features, utilities;
@layer tokens {
:root {
--font-sans: 'DM Sans', 'Heebo', 'Noto Sans Arabic', 'DM Sans Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: 'Newsreader', 'Frank Ruhl Libre', 'Noto Naskh Arabic', 'Newsreader Fallback', 'Source Serif 4', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-handwritten: 'Caveat', 'Comic Sans MS', cursive;
--text-micro: 0.55rem;
--text-tiny: 0.62rem;
--text-extra-small: 0.68rem;
--text-small: 0.75rem;
--text-medium: 0.875rem;
--text-base: 1rem;
--text-large: 1.15rem;
--text-extra-large: 1.5rem;
--text-jumbo: 1.85rem;
--text-display-small: 1.75rem;
--text-display: 2.5rem;
--text-hero: 5.5rem;
--text-page-title-min: 1.75rem;
--text-page-title-max: 2.4rem;
--text-stat: 1.6rem;
--text-content-word-min: 1.2rem;
--text-content-word-max: 1.65rem;
--text-funnel: 1.28rem;
--text-week: 2rem;
--line-cramped: 0.92;
--line-tight: 1;
--line-compact: 1.1;
--line-snug: 1.2;
--line-short: 1.3;
--line-dense: 1.35;
--line-ui: 1.4;
--line-readable: 1.45;
--line-normal: 1.5;
--line-comfortable: 1.55;
--line-loose: 1.65;
--line-relaxed: 1.7;
--letter-brand: -0.06em;
--letter-tight: -0.04em;
--letter-title: -0.03em;
--letter-page-title: -0.025ch;
--letter-snug: -0.02em;
--letter-topbar: -0.02ch;
--letter-body: -0.005ch;
--letter-code: 0.5em;
--letter-normal: 0;
--letter-expanded: 0.06em;
--letter-wide: 0.04em;
--letter-wider: 0.08em;
--letter-widest: 0.1em;
--letter-hero: 0.18em;
--color-canvas:        #f4f0e6;
--color-surface:       #ffffff;
--surface-subtle:      #faf6e9;
--color-ink:           #1a1f1c;
--color-ink-muted:     #3e4540;
--color-ink-subtle:    #5f655e;
--color-border:        #d8d1bd;
--color-border-strong: #b8ad94;
--color-link:          #3e4540;
--color-link-hover:    #1a1f1c;
--color-accent:        #c66a3b;
--color-accent-ink:    #a85a2e;
--color-accent-soft:   #f6e0d2;
--color-positive: oklch(45% 0.13 155);
--color-positive-soft: oklch(96% 0.045 155);
--color-wa:       #25d366;
--color-wa-hover: #1eb558;
--color-wa-deep:  #128c7e;
--color-warning: oklch(61% 0.14 78);
--color-warning-soft: oklch(96% 0.065 85);
--color-danger: oklch(48% 0.18 29);
--color-danger-soft: oklch(96% 0.04 29);
--color-info: oklch(49% 0.16 250);
--color-info-soft: oklch(96% 0.035 250);
--color-info-bg-subtle: oklch(98% 0.01 250);
--color-shadow-ink: oklch(0% 0 0);
--color-purple: oklch(50% 0.18 300);
--color-danger-alpha: oklch(48% 0.18 29 / 20%);
--color-line-subtle: oklch(92% 0.003 254);
--color-line-muted: oklch(84% 0.005 256);
--color-generating: oklch(55% 0.2 290);
--color-generating-ink: oklch(45% 0.18 290);
--color-generating-soft: oklch(95% 0.04 290);
--color-nee-tdah: oklch(42% 0.14 250);
--color-nee-tdah-soft: oklch(96% 0.035 250);
--color-nee-autismo: oklch(38% 0.11 155);
--color-nee-autismo-soft: oklch(95% 0.04 155);
--color-nee-dislexia: oklch(48% 0.13 78);
--color-nee-dislexia-soft: oklch(96% 0.065 85);
--color-print-ink: oklch(0% 0 0);
--color-print-surface: oklch(96% 0 0);
--color-golden: oklch(89.1% 0.178 95.7);
--color-golden-soft: oklch(96% 0.065 95);
--color-golden-ink: oklch(45% 0.12 90);
--postit-bg: oklch(96.5% 0.09 95);
--postit-bg-deep: oklch(92% 0.14 90);
--postit-ink: oklch(35% 0.08 75);
--postit-muted: oklch(50% 0.09 80);
--postit-tape: oklch(94% 0.10 92 / 55%);
--postit-divider: oklch(35% 0.08 75 / 18%);
--postit-divider-soft: oklch(35% 0.08 75 / 15%);
--postit-tape-highlight: oklch(100% 0 0 / 40%);
--postit-tape-shadow: oklch(92% 0.14 90 / 50%);
--overlay-backdrop: oklch(0% 0 0);
--stamp-approved-border: oklch(45% 0.13 155 / 65%);
--stamp-approved-border-strong: oklch(45% 0.13 155 / 70%);
--stamp-rejected-border: oklch(48% 0.18 29 / 60%);
--stamp-rejected-border-strong: oklch(48% 0.18 29 / 65%);
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-4-5: 1.125rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-28: 7rem;
--flow-space: 0.75lh;
--viewport-block-size: 100vh;
--container-width: 64rem;
--container-page: 1180px;
--container-copy: 56ch;
--container-copy-prose: 64ch;
--container-copy-report: 58ch;
--container-copy-council: 62ch;
--container-copy-wide: 72ch;
--container-auth-card: 26rem;
--container-auth-copy: 32rem;
--container-auth-proof: 34rem;
--container-feature-card: 18rem;
--container-grid-min: 12rem;
--container-sidebar: 15rem;
--container-chat-bubble: 34rem;
--container-doc-rail: 18.75rem;
--container-record-offset: 11rem;
--container-rail-narrow: 35rem;
--container-feedback-trail: 20rem;
--container-feedback-min: 26rem;
--container-council-side-min: 15rem;
--container-op-summary-min: 9rem;
--container-auth-left-min: 28rem;
--container-auth-right-min: 24rem;
--attachment-gallery-item-width: 33%;
--dialog-classroom-width: 35rem;
--dialog-editor-width: 61.25rem;
--dialog-inline-gutter: 2rem;
--dialog-block-gutter: 4rem;
--sticky-topbar-offset: 72px;
--staff-shell-height: 100vh;
--staff-pip-min-width: 1.25rem;
--staff-search-width: 22rem;
--attn-tile-min: 14rem;
--finder-max-height: 22rem;
--docrow-title-basis: 40%;
--docrow-title-min: 12ch;
--radius-card: 1em;
--radius-pill: 99rem;
--radius-extra-small: 0.125rem;
--radius-small: 0.25rem;
--radius-medium: 0.4rem;
--radius-large: 0.5rem;
--radius-extra-large: 0.75rem;
--radius-jumbo: 1rem;
--radius-em-extra-small: 0.3em;
--radius-em-small: 0.4em;
--radius-em-medium: 0.5em;
--radius-em-large: 0.625em;
--radius-em-extra-large: 0.75em;
--radius-em-jumbo: 0.85em;
--radius-round: 50%;
--hairline: 1px;
--rule-width: 2px;
--rail-width: 3px;
--accent-rail-width: 4px;
--icon-extra-small: 0.5rem;
--icon-small: 0.75rem;
--icon-medium: 1rem;
--icon-large: 1.75rem;
--avatar-small: 1.4rem;
--avatar-medium: 2rem;
--avatar-large: 2.35rem;
--thumb-plan-width: 1.875rem;
--thumb-mini-width: 1.375rem;
--thumb-plan-height-ratio: 6 / 9;
--toc-number-width: 2.2ch;
--usage-bar-width: 3.5rem;
--kill-status-icon: 3.25rem;
--history-dot-size: 0.5625rem;
--history-line-offset: 0.375rem;
--stamp-postit-width: 10rem;
--stamp-tape-width: 3.5rem;
--stamp-tape-height: 1rem;
--stamp-tape-small-width: 2.75rem;
--stamp-tape-small-height: 0.8125rem;
--stamp-overlay-bottom: 5.5rem;
--stamp-static-top: 4.5rem;
--stamp-fixed-top: 22rem;
--progress-thin: 0.25rem;
--progress-small: 0.375rem;
--progress-medium: 0.5rem;
--control-small: 1.75rem;
--spark-width: 2.7rem;
--spark-height: 1rem;
--spark-bar-width: 0.22rem;
--spark-bar-min-height: 0.1rem;
--pct-10: 10%;
--pct-20: 20%;
--pct-30: 30%;
--pct-40: 40%;
--pct-50: 50%;
--pct-54: 54%;
--pct-55: 55%;
--pct-58: 58%;
--pct-60: 60%;
--pct-65: 65%;
--pct-70: 70%;
--pct-75: 75%;
--pct-80: 80%;
--pct-82: 82%;
--pct-90: 90%;
--pct-100: 100%;
--blur-soft: 4rem;
--brand-orb-size: 18rem;
--filter-brand-orb: blur(var(--blur-soft));
--focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-ink) 18%, transparent);
--focus-ring-accent: 0 0 0 var(--hover-ring-size) color-mix(in oklch, var(--color-accent) 20%, transparent);
--hover-ring-color: oklch(26% 0.05 264 / 12%);
--hover-ring-primary: oklch(26% 0.05 264 / 25%);
--hover-ring-positive: oklch(45% 0.13 155 / 30%);
--hover-ring-danger: oklch(48% 0.18 29 / 20%);
--hover-ring-danger-strong: oklch(48% 0.18 29 / 30%);
--hover-ring-size: 0.2rem;
--link-action-font-size: 0.78rem;
--input-readable-font-size: max(16px, var(--text-medium));
--shadow-stack:
0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.2em 0.2em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.4em 0.4em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.8em 0.8em color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-soft: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent), 0 0.1em 0.2em color-mix(in oklch, var(--color-shadow-ink) 4%, transparent);
--shadow-hairline: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-hairline-strong: 0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 6%, transparent);
--shadow-topbar-edge: 0 1px 0 color-mix(in oklch, var(--color-shadow-ink) 5%, transparent);
--shadow-topbar-icon: 0 0 0 1px oklch(26% 0.05 264 / 15%), 0 0.2em 0.4em color-mix(in oklch, var(--color-shadow-ink) 8%, transparent);
--shadow-golden-glow: 0 0 0.15em 0.05em color-mix(in oklch, var(--color-golden) 20%, transparent);
--shadow-golden-plan: 0 0 0 1px var(--color-golden), 0 0 0.3em 0.15em color-mix(in oklch, var(--color-golden) 30%, transparent);
--shadow-school-plan: 0 0 0 1px color-mix(in oklch, var(--color-info) 55%, var(--color-surface)), var(--shadow-soft);
--shadow-quiet-plan: 0 0 0 1px color-mix(in oklch, var(--color-border-strong) 62%, var(--color-surface)), var(--shadow-soft);
--shadow-positive-dot: 0 0 0 2px color-mix(in oklch, var(--color-positive) 25%, transparent);
--shadow-danger-pulse-start: 0 0 0 0 color-mix(in oklch, var(--color-danger) 40%, transparent);
--shadow-danger-pulse-end: 0 0 0 5px color-mix(in oklch, var(--color-danger) 0%, transparent);
--shadow-inset-subtle: inset 0 0 0 1px var(--surface-subtle);
--surface-priority-row: linear-gradient(90deg, color-mix(in oklch, var(--color-golden-soft) 76%, var(--color-surface)), var(--color-surface));
--shadow-dialog:
0 0 0 1px color-mix(in oklch, var(--color-shadow-ink) 5%, transparent),
0 0.4em 0.8em color-mix(in oklch, var(--color-shadow-ink) 8%, transparent),
0 1em 2em color-mix(in oklch, var(--color-shadow-ink) 12%, transparent),
0 2em 4em color-mix(in oklch, var(--color-shadow-ink) 12%, transparent);
--shadow-postit:
0 1px 1px color-mix(in oklch, var(--color-shadow-ink) 6%, transparent),
0 6px 12px -4px color-mix(in oklch, var(--color-shadow-ink) 18%, transparent),
0 18px 28px -10px color-mix(in oklch, var(--color-shadow-ink) 22%, transparent);
--shadow-tape: 0 1px 2px color-mix(in oklch, var(--color-shadow-ink) 8%, transparent);
--ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
--ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--duration-instant: 75ms;
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-nav: 300;
--z-overlay: 400;
--z-dialog: 500;
--z-flash: 600;
--z-tooltip: 700;
}
}
@layer base {
.brand-symbols-defs {
position: absolute;
}
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
min-block-size: 100%;
}
img,
svg {
display: block;
max-inline-size: 100%;
}
button,
input,
select,
textarea {
font: inherit;
}
}
@layer base {
.app {
min-block-size: 100%;
background: var(--color-canvas);
}
.app-body,
body {
min-block-size: 100%;
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
line-height: var(--line-normal);
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover {
color: var(--color-link-hover);
}
strong {
font-weight: 650;
}
button,
input,
select,
textarea {
color: var(--color-ink);
}
turbo-frame {
display: contents;
}
.turbo-progress-bar {
visibility: hidden;
}
}
@layer layout {
.app-shell {
display: flex;
flex-direction: column;
min-block-size: var(--viewport-block-size);
}
.app-main {
flex: 1;
}
.page {
inline-size: 100%;
max-inline-size: var(--container-width);
margin-inline: auto;
padding: var(--space-8) var(--space-4);
}
.stack > * + * {
margin-block-start: var(--stack-space, var(--space-6));
}
.stack--large {
--stack-space: var(--space-8);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-space, var(--space-3));
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.section-actions {
margin-block-start: var(--space-2);
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--container-grid-min), 100%), 1fr));
gap: var(--space-3);
}
}
@layer components {
.topbar {
border-block-end: var(--hairline) solid var(--color-border);
background: var(--color-surface);
}
.topbar__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
inline-size: 100%;
max-inline-size: var(--container-width);
min-block-size: var(--space-12);
margin-inline: auto;
padding-inline: var(--space-4);
}
.topbar__brand {
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 750;
letter-spacing: var(--letter-snug);
}
.topbar__nav {
position: absolute;
inset-inline: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
pointer-events: none;
}
.topbar__nav > * {
pointer-events: auto;
}
.topbar__account {
display: flex;
align-items: center;
gap: var(--space-4);
}
.topbar__link {
position: relative;
color: var(--color-ink-muted);
font-size: var(--text-medium);
font-weight: 500;
padding: var(--space-1-5) var(--space-3);
border-radius: var(--radius-medium);
transition:
color var(--duration-fast),
background-color var(--duration-fast);
}
@media (any-hover: hover) {
.topbar__link:hover {
color: var(--color-ink);
background: var(--color-canvas);
}
}
.topbar__link.topbar__link--current {
color: var(--color-ink);
font-weight: 650;
}
.topbar__link.topbar__link--current::after {
content: "";
position: absolute;
inset-inline: var(--space-3);
inset-block-end: calc(var(--space-1-5) * -1 - var(--hairline));
block-size: var(--rule-width);
background: var(--color-ink);
border-radius: var(--radius-pill);
}
.topbar__link.topbar__link--admin {
color: var(--color-accent);
font-weight: 600;
}
@media (any-hover: hover) {
.topbar__link.topbar__link--admin:hover {
background: var(--color-accent-soft);
}
}
.topbar__user {
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
.topbar__button {
appearance: none;
border: 0;
background: transparent;
color: var(--color-ink-muted);
font-size: var(--text-medium);
cursor: pointer;
padding: 0;
transition: color var(--duration-fast);
}
@media (any-hover: hover) {
.topbar__button:hover {
color: var(--color-ink);
}
}
}
@layer components {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: inherit;
font-size: var(--text-medium);
font-weight: 600;
letter-spacing: var(--letter-body);
line-height: var(--line-tight);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--btn-border, transparent);
border-radius: var(--radius-pill);
background-color: var(--btn-bg, transparent);
color: var(--btn-fg, var(--color-ink));
transition:
background-color var(--duration-fast) ease,
border-color     var(--duration-fast) ease,
box-shadow       var(--duration-fast) ease;
@media (any-hover: hover) {
&:hover {
background-color: var(--btn-bg-hover, var(--btn-bg));
border-color: var(--btn-border-hover, var(--btn-border));
}
}
&:active {
scale: 0.97;
}
&:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
&[disabled],
&[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
}
.btn--primary {
--btn-bg:       var(--color-ink);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-ink) 88%, var(--color-surface));
}
.btn--ghost {
--btn-bg:           transparent;
--btn-fg:           var(--color-ink);
--btn-border:       var(--color-ink);
--btn-bg-hover:     color-mix(in srgb, var(--color-ink) 8%, transparent);
--btn-border-hover: var(--color-ink);
}
.btn--wa {
--btn-bg:       var(--color-wa);
--btn-fg:       var(--color-ink);
--btn-bg-hover: var(--color-wa-hover);
font-weight: 700;
}
.btn--positive {
--btn-bg:       var(--color-positive);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-positive) 88%, black);
}
.btn--danger {
--btn-bg:       var(--color-danger-soft);
--btn-fg:       var(--color-danger);
--btn-bg-hover: color-mix(in srgb, var(--color-danger-soft) 86%, var(--color-danger));
}
.btn--danger-fill {
--btn-bg:       var(--color-danger);
--btn-fg:       var(--color-surface);
--btn-bg-hover: color-mix(in srgb, var(--color-danger) 88%, black);
}
.btn--small {
font-size: var(--text-small);
padding: var(--space-1-5) var(--space-3);
}
.text-button {
font-size: var(--link-action-font-size);
font-weight: 600;
color: var(--color-accent);
background: none;
border: 0;
cursor: pointer;
@media (any-hover: hover) {
&:hover {
text-decoration: underline;
}
}
}
}
@layer components {
.field {
& > * + * {
margin-block-start: var(--space-1);
}
}
.field__label {
color: var(--color-ink-muted);
display: block;
font-size: var(--text-small);
font-weight: 650;
}
.field__hint {
color: var(--color-ink-subtle);
font-size: var(--text-small);
line-height: var(--line-readable);
}
.input,
.select {
--_input-border: var(--color-border-strong);
--_input-bg: var(--color-surface);
--_input-ring: transparent;
appearance: none;
border: var(--hairline) solid var(--_input-border);
background-color: var(--_input-bg);
color: var(--color-ink);
display: block;
inline-size: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-medium);
font-size: var(--input-readable-font-size);
line-height: var(--line-ui);
transition:
border-color var(--duration-fast),
box-shadow var(--duration-fast);
outline: none;
box-shadow: 0 0 0 0 var(--_input-ring);
}
.input:focus,
.select:focus {
--_input-border: var(--color-ink);
box-shadow: var(--focus-ring);
}
.input::placeholder {
color: var(--color-ink-subtle);
}
.input:disabled,
.select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.select,
select.input {
padding-inline-end: var(--space-8);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 12px 8px;
cursor: pointer;
}
[dir="rtl"] .select,
[dir="rtl"] select.input {
background-position: left var(--space-3) center;
}
.input.input--code {
font-family: var(--font-mono);
font-size: var(--text-extra-large);
letter-spacing: var(--letter-code);
text-align: center;
border-radius: var(--radius-large);
}
.input-group {
display: flex;
align-items: stretch;
}
.input-group__addon {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding-inline: var(--space-3);
background: var(--color-canvas);
border: var(--hairline) solid var(--color-border-strong);
border-inline-end: 0;
border-radius: var(--radius-medium) 0 0 var(--radius-medium);
color: var(--color-ink-muted);
font-size: var(--text-medium);
font-weight: 600;
white-space: nowrap;
user-select: none;
}
.input-group .input {
border-start-start-radius: 0;
border-end-start-radius: 0;
flex: 1;
min-inline-size: 0;
}
.input-group .input:focus {
z-index: 1;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
& .form-grid__fluid {
flex: 1 1 12rem;
}
}
@media (max-width: 720px) {
.form-grid {
grid-template-columns: 1fr;
}
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.textarea {
width: 100%;
border: var(--hairline) solid var(--color-border-strong);
border-radius: var(--radius-medium);
padding: var(--space-2) var(--space-3);
font: inherit;
font-size: var(--input-readable-font-size);
line-height: var(--line-comfortable);
resize: vertical;
color: var(--color-ink);
background: var(--color-surface);
outline: none;
transition:
border-color var(--duration-fast),
box-shadow var(--duration-fast);
&:focus {
border-color: var(--color-ink);
box-shadow: var(--focus-ring);
}
&::placeholder {
color: var(--color-ink-subtle);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.form-card {
margin-top: var(--space-6);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
padding: var(--space-6);
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2-5);
flex-wrap: wrap;
}
.form-actions.form-actions--destructive {
justify-content: space-between;
}
.error-list {
margin-block: var(--space-2) 0;
margin-inline: var(--space-4) 0;
font-size: var(--text-medium);
}
.locked-facts {
background: var(--color-canvas);
border-radius: var(--radius-em-extra-large);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.classroom-context__section-label {
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin-bottom: var(--space-2-5);
}
.classroom-context__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.classroom-context__stat {
background: var(--color-canvas);
border-radius: var(--radius-em-large);
padding: var(--space-3) var(--space-3-5);
text-align: center;
.classroom-context__stat-value {
font-size: var(--text-extra-large);
font-weight: 900;
letter-spacing: var(--letter-title);
color: var(--color-ink);
line-height: var(--line-tight);
}
.classroom-context__stat-value--compact {
font-size: var(--text-base);
letter-spacing: var(--letter-snug);
line-height: var(--line-snug);
}
.cm-stat__lbl {
font-size: var(--text-extra-small);
font-weight: 600;
color: var(--color-ink-muted);
margin-top: var(--space-1);
}
}
.classroom-context__needs {
display: flex;
flex-direction: column;
gap: var(--space-2);
.classroom-context__need-item {
display: flex;
align-items: flex-start;
gap: var(--space-2-5);
padding: var(--space-2-5) var(--space-3-5);
background: var(--color-canvas);
border-radius: var(--radius-em-medium);
}
.classroom-context__need-badge {
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-wide);
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-pill);
white-space: nowrap;
flex-shrink: 0;
margin-top: var(--space-0-5);
&.classroom-context__need-badge--contexto {
background: var(--color-accent-soft);
color: var(--color-accent);
}
&.classroom-context__need-badge--bncc {
background: var(--color-positive-soft);
color: var(--color-positive);
}
}
.classroom-context__need-text {
font-size: var(--text-medium);
color: var(--color-ink);
line-height: var(--line-readable);
strong {
color: var(--color-ink);
font-weight: 700;
}
}
}
.classroom-context__history {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.classroom-context__plan-row {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-medium);
.cm-plan-row__thumb {
width: var(--thumb-mini-width);
aspect-ratio: var(--thumb-plan-height-ratio);
border-radius: var(--rule-width);
background: var(--color-canvas);
flex-shrink: 0;
box-shadow: var(--shadow-hairline-strong);
padding: var(--rule-width);
display: flex;
flex-direction: column;
gap: calc(var(--hairline) * 1.5);
}
.cm-plan-row__title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-ink);
font-weight: 500;
}
.classroom-context__plan-date {
font-size: var(--text-small);
color: var(--color-ink-muted);
white-space: nowrap;
font-family: var(--font-mono);
}
.tag {
margin-inline-start: 0;
}
}
.code-cell {
font-family: var(--font-mono);
}
.usage-bar {
}
}
@layer components {
.flash {
border-block-end: var(--hairline) solid var(--flash-border-color);
background: var(--flash-background);
color: var(--flash-color);
font-size: var(--text-medium);
padding: var(--space-2) var(--space-4);
&.flash--notice {
--flash-background: var(--color-positive-soft);
--flash-border-color: color-mix(in oklch, var(--color-positive) 25%, var(--color-border));
--flash-color: var(--color-positive);
}
&.flash--alert {
--flash-background: var(--color-danger-soft);
--flash-border-color: color-mix(in oklch, var(--color-danger) 25%, var(--color-border));
--flash-color: var(--color-danger);
}
}
}
@layer components {
.email-confirmation-banner {
--banner-bg: var(--color-warning-soft);
--banner-border: color-mix(in oklch, var(--color-warning) 30%, var(--color-border));
--banner-color: var(--color-warning);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
background: var(--banner-bg);
border-block-end: var(--hairline) solid var(--banner-border);
color: var(--banner-color);
padding: var(--space-2) var(--space-4);
font-size: var(--text-medium);
&.email-confirmation-banner--overdue {
--banner-bg: var(--color-danger-soft);
--banner-border: color-mix(in oklch, var(--color-danger) 30%, var(--color-border));
--banner-color: var(--color-danger);
}
}
.email-confirmation-banner__text {
margin: 0;
flex: 1 1 16rem;
}
.email-confirmation-banner__action {
flex-shrink: 0;
& .btn,
&.btn,
& button {
background: transparent;
border: var(--hairline) solid currentColor;
color: currentColor;
padding-inline: var(--space-3);
padding-block: var(--space-1);
border-radius: var(--radius-small);
font-weight: 600;
}
}
}
@layer components {
.page-header {
& > * + * {
margin-block-start: var(--space-2);
}
}
.page-title {
color: var(--color-ink);
font-size: var(--text-large);
font-weight: 750;
line-height: var(--line-snug);
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-block-end: var(--space-3);
}
.eyebrow {
color: var(--color-ink-muted);
font-size: var(--text-small);
font-weight: 700;
letter-spacing: var(--letter-wider);
text-transform: uppercase;
}
.muted,
.meta {
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
.meta {
color: var(--color-ink-subtle);
font-size: var(--text-small);
}
.link {
color: var(--color-ink-muted);
font-size: var(--text-small);
font-weight: 650;
@media (any-hover: hover) {
&:hover {
color: var(--color-ink);
}
}
}
.panel,
.stat-card,
.empty-state {
border: var(--hairline) solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-card);
}
.panel {
padding: var(--space-4);
}
.panel__title {
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 700;
&.panel__title--danger {
color: var(--color-danger);
}
}
.panel__text {
color: var(--color-ink-muted);
font-size: var(--text-medium);
margin-block-start: var(--space-1);
&.panel__text--danger {
color: var(--color-danger);
}
}
.panel--danger {
border-color: color-mix(in oklch, var(--color-danger) 30%, var(--color-border));
background: var(--color-danger-soft);
}
.stat-card {
display: block;
padding: var(--space-3) var(--space-4);
}
.stat-card__label {
color: var(--color-ink-subtle);
font-size: var(--text-small);
}
.stat-card__value {
color: var(--color-ink);
font-size: var(--text-extra-large);
font-weight: 750;
line-height: var(--line-snug);
margin-block-start: var(--space-1);
}
.stat-card__sub {
color: var(--color-ink-muted);
font-size: var(--text-small);
margin-block-start: var(--space-0-5);
}
.section-list {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--text-small);
color: var(--color-ink-muted);
}
.section-list li {
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-canvas);
border: var(--hairline) solid var(--color-border);
}
.empty-state {
color: var(--color-ink-subtle);
padding: var(--space-8) var(--space-4);
text-align: center;
}
.empty-state__title {
color: var(--color-ink-muted);
font-size: var(--text-medium);
font-weight: 650;
}
.empty-state__message {
font-size: var(--text-medium);
}
.disclosure {
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-large);
padding: var(--space-4);
& > summary {
cursor: pointer;
font-weight: 600;
}
}
}
@layer components {
.list {
border: var(--hairline) solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-card);
}
.list__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
& + .list__item {
border-block-start: var(--hairline) solid color-mix(in oklch, var(--color-border) 72%, transparent);
}
}
.list__title {
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 650;
}
.list__meta {
color: var(--color-ink-subtle);
font-size: var(--text-small);
margin-block-start: var(--space-0-5);
}
}
@layer components {
.page {
max-inline-size: var(--container-page);
margin-inline: auto;
padding-block: var(--space-8) var(--space-16);
padding-inline: var(--space-7);
}
.page__crumbs {
font-size: var(--text-small);
color: var(--color-ink-muted);
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-1-5);
}
.page__crumbs a {
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
}
@media (any-hover: hover) {
.page__crumbs a:hover {
text-decoration: underline;
}
}
.page__crumbs .page__crumbs-separator {
color: var(--color-line-muted);
}
.page__eyebrow {
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin-bottom: var(--space-2);
}
.page__title {
font-size: clamp(var(--text-page-title-min), 3.2vw, var(--text-page-title-max));
font-weight: 900;
letter-spacing: var(--letter-page-title);
line-height: var(--line-tight);
text-wrap: balance;
color: var(--color-ink);
}
.page__title--mb {
margin-bottom: var(--space-7);
}
.page__title-group {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
flex-wrap: wrap;
}
.page__title-group .tag {
margin-inline-start: 0;
}
.page__lede {
margin-top: var(--space-3-5);
font-size: var(--text-base);
color: var(--color-ink);
max-width: var(--container-copy);
line-height: var(--line-comfortable);
text-wrap: pretty;
}
.page__head {
margin-bottom: var(--space-7);
}
.page__head--mb {
margin-bottom: var(--space-7);
}
.page__subtle {
margin-top: var(--space-1-5);
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
.page__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
.page__header-row {
align-items: flex-start;
flex-direction: column;
}
}
.user-details {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-2);
font-size: var(--text-small);
color: var(--color-ink-muted);
}
.user-details__item:not(:last-child)::after {
content: "·";
margin-inline-start: var(--space-4);
color: var(--color-border);
}
.page--flush {
padding-top: 0;
}
.lede-metrics {
max-width: var(--container-copy-wide);
}
.lede-metric {
display: inline;
font-weight: 700;
& strong {
color: var(--color-ink);
font-weight: 900;
}
}
.lede-metric--up,
.lede-metric--good {
color: var(--color-positive);
}
.lede-metric--down {
color: var(--color-danger);
}
.action-row {
display: flex;
gap: var(--space-2-5);
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.action-row--spaced {
margin-top: var(--space-4);
}
.grid {
display: grid;
grid-template-columns: minmax(0,1fr) var(--container-sidebar);
gap: var(--space-12);
align-items: start;
}
@media (max-width: 980px) {
.grid {
grid-template-columns: 1fr;
}
}
.section-stack {
display: grid;
gap: var(--space-7);
}
.aside {
font-size: var(--text-medium);
color: var(--color-ink-muted);
position: sticky;
top: var(--sticky-topbar-offset);
& h3 {
font-size: var(--text-extra-small);
font-weight: 800;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink);
margin-bottom: var(--space-2-5);
}
& p {
margin-bottom: var(--space-4);
line-height: var(--line-loose);
}
& hr {
border: 0;
border-top: var(--hairline) solid var(--color-border);
margin: var(--space-5) 0;
}
}
.invite-code {
display: inline-flex;
align-items: center;
width: fit-content;
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-large);
background: var(--color-accent-soft);
color: var(--color-accent);
border: 1px dashed var(--color-accent);
box-shadow: var(--shadow-soft);
user-select: all;
font-family: var(--font-mono);
font-size: var(--text-medium);
font-weight: 700;
letter-spacing: var(--letter-wide);
cursor: pointer;
transition: all 200ms ease;
@media (any-hover: hover) {
&:hover {
border-style: solid;
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: var(--shadow-medium);
}
}
}
.invite-code--block {
inline-size: 100%;
justify-content: center;
font-size: var(--text-large);
padding: var(--space-3) var(--space-4);
letter-spacing: var(--letter-wider);
}
.invite-code--copied {
opacity: 0.7;
}
.stat-number {
color: var(--color-ink);
font-size: var(--text-stat);
font-weight: 900;
letter-spacing: var(--letter-title);
display: block;
line-height: var(--line-tight);
margin-bottom: var(--space-1);
font-variant-numeric: tabular-nums;
}
.stat-number--positive {
color: var(--color-positive);
}
.stat-number--warning {
color: var(--color-warning);
}
.text-warning {
color: var(--color-warning);
}
.text-danger {
color: var(--color-danger);
}
.text-muted {
color: var(--color-ink-muted);
}
.text-small {
font-size: var(--text-medium);
}
.is-dimmed {
opacity: 0.5;
}
.text-link {
color: var(--color-accent);
font-size: var(--link-action-font-size);
font-weight: 600;
text-decoration: none;
@media (any-hover: hover) {
&:hover {
text-decoration: underline;
}
}
}
.stat-stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.doc {
display: grid;
grid-template-columns: minmax(0,1fr) var(--container-doc-rail);
gap: var(--space-12);
align-items: start;
@media (max-width: 980px) {
grid-template-columns: 1fr;
& .doc__rail {
position: static;
}
}
}
.doc__rail {
position: sticky;
top: var(--sticky-topbar-offset);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.topbar__nav a:focus-visible,
.toc__item:focus-visible,
.dialog__close:focus-visible,
.killbar:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.rail-card--mb {
margin-bottom: var(--space-8);
}
}
@layer components {
.toc {
list-style: none;
margin: 0;
padding: 0;
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.toc__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background var(--duration-instant);
}
.toc__item:last-child {
border-bottom: 0;
}
@media (any-hover: hover) {
.toc__item:hover {
background: var(--color-canvas);
}
}
.toc__item--priority {
background: var(--surface-priority-row);
box-shadow: inset var(--rail-width) 0 0 var(--color-golden);
}
@media (any-hover: hover) {
.toc__item--priority:hover {
background: linear-gradient(90deg, var(--color-golden-soft), var(--color-canvas));
}
}
.toc__item--stale {
background: linear-gradient(90deg, var(--color-danger-soft), var(--color-surface));
box-shadow: inset var(--rail-width) 0 0 var(--color-danger);
}
@media (any-hover: hover) {
.toc__item--stale:hover {
background: linear-gradient(90deg, var(--color-danger-soft), var(--color-canvas));
}
}
.toc__item--generating {
background: linear-gradient(90deg, var(--color-generating-soft), var(--color-surface));
box-shadow: inset var(--rail-width) 0 0 var(--color-generating);
opacity: 0.65;
cursor: default;
pointer-events: none;
}
.toc__item--locked {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.toc__item--admin-unlock {
pointer-events: auto;
cursor: pointer;
opacity: 0.7;
}
@media (any-hover: hover) {
.toc__item--admin-unlock:hover {
opacity: 0.9;
}
}
.toc__item--mine {
opacity: 0.5;
}
@media (any-hover: hover) {
.toc__item--mine:hover {
opacity: 0.75;
}
}
.toc__item--static {
cursor: default;
}
.toc__lock {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-small);
font-weight: 600;
color: var(--color-ink-muted);
white-space: nowrap;
}
.toc__lock-icon {
font-size: var(--text-medium);
line-height: var(--line-tight);
}
.toc__lock-avatar {
display: inline-grid;
place-items: center;
width: var(--avatar-small);
height: var(--avatar-small);
border-radius: var(--radius-round);
background: var(--surface-subtle);
color: var(--color-ink-muted);
font-size: var(--text-tiny);
font-weight: 800;
flex-shrink: 0;
}
.toc__lock-avatar--me {
background: var(--color-positive-soft);
color: var(--color-positive);
}
.toc__number {
font-variant-numeric: tabular-nums;
font-size: var(--text-small);
color: var(--color-line-muted);
min-width: var(--toc-number-width);
font-weight: 700;
}
.toc__thumb {
width: var(--thumb-plan-width);
aspect-ratio: var(--thumb-plan-height-ratio);
background: var(--color-canvas);
border-radius: var(--rail-width);
padding: var(--accent-rail-width) var(--rail-width);
display: flex;
flex-direction: column;
gap: var(--rule-width);
flex-shrink: 0;
box-shadow: var(--shadow-hairline-strong);
}
.toc__thumb--accent {
background: var(--color-accent-soft);
}
.toc__thumb--gold {
background: var(--color-golden-soft);
}
.thumbnail-line {
height: var(--rule-width);
border-radius: var(--hairline);
background: var(--color-line-subtle);
}
.thumbnail-line--heading {
height: var(--rail-width);
background: var(--color-ink-subtle);
width: var(--pct-75);
}
.thumbnail-line--positive-heading {
height: var(--rail-width);
background: var(--color-positive);
width: var(--pct-75);
}
.thumbnail-line--width-40 {
width: var(--pct-40);
}
.thumbnail-line--width-55 {
width: var(--pct-55);
}
.thumbnail-line--width-58 {
width: var(--pct-58);
}
.thumbnail-line--width-65 {
width: var(--pct-65);
}
.thumbnail-line--width-70 {
width: var(--pct-70);
}
.thumbnail-line--width-75 {
width: var(--pct-75);
}
.thumbnail-line--width-80 {
width: var(--pct-80);
}
.thumbnail-line--width-82 {
width: var(--pct-82);
}
.thumbnail-line--width-54 {
width: var(--pct-54);
}
.thumbnail-line--width-90 {
width: var(--pct-90);
}
.toc__title {
font-weight: 650;
font-size: var(--text-medium);
flex-shrink: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toc__leader {
flex: 1;
border-bottom: var(--hairline) dotted var(--color-line-subtle);
margin: 0 var(--space-2);
min-width: var(--space-4);
transform: translateY(-0.2em);
}
.toc__meta {
font-size: var(--text-small);
color: var(--color-ink-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.toc__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-1-5);
min-width: 0;
}
.toc__line {
display: flex;
align-items: baseline;
min-width: 0;
}
.toc__line .tag {
margin-inline-start: 0;
}
.membership-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.membership-row:last-child {
border-bottom: 0;
}
.membership-row .toc__item {
padding: 0;
border-bottom: 0;
}
@media (any-hover: hover) {
.membership-row .toc__item:hover {
background: transparent;
}
}
.membership-row__remove {
justify-self: end;
border: 0;
padding: 0;
background: none;
cursor: pointer;
color: var(--color-danger);
font: inherit;
font-size: var(--link-action-font-size);
font-weight: 650;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
@media (any-hover: hover) {
.membership-row__remove:hover {
color: color-mix(in oklch, var(--color-danger) 78%, black);
}
}
.feedback-list {
margin-bottom: var(--space-8);
}
.feedback-row {
align-items: flex-start;
}
.feedback-row__body {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
min-width: min(var(--container-feedback-min), 100%);
}
.feedback-row__head {
display: flex;
align-items: baseline;
gap: var(--space-3);
min-width: 0;
}
.feedback-row__quote {
color: var(--color-ink);
font-size: var(--text-medium);
line-height: var(--line-readable);
max-width: var(--container-copy-report);
}
.feedback-row__actions {
display: flex;
align-items: center;
gap: var(--space-1-5);
color: var(--color-ink-muted);
font-size: var(--link-action-font-size);
}
.feedback-row__trail {
display: flex;
flex: 0 1 var(--container-feedback-trail);
flex-direction: column;
align-items: flex-end;
gap: var(--space-1-5);
text-align: end;
min-width: 0;
max-width: var(--container-feedback-trail);
overflow: hidden;
}
.feedback-row__trailing-meta {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feedback-row__trail-bottom {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-2);
}
@media (max-width: 760px) {
.feedback-row {
flex-wrap: wrap;
}
.feedback-row__head {
flex-direction: column;
gap: var(--space-1);
}
}
.council-row__meta {
color: var(--color-ink-muted);
font-size: var(--text-small);
font-weight: 650;
line-height: var(--line-ui);
max-width: var(--container-copy-council);
}
.council-row__trail-note {
display: block;
width: 100%;
white-space: normal;
line-height: var(--line-dense);
}
.council-paper {
padding-top: var(--space-8);
}
.council-cover {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(var(--container-council-side-min), 0.45fr);
gap: var(--space-8);
margin: 0 0 var(--space-9);
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-em-jumbo);
background: linear-gradient(135deg, var(--surface-subtle), var(--color-surface));
box-shadow: var(--shadow-inset-subtle);
}
.council-cover__kicker {
margin: 0 0 var(--space-1-5);
color: var(--color-ink-muted);
font-size: var(--text-tiny);
font-weight: 800;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
}
.council-cover h2 {
margin: 0 0 var(--space-2);
color: var(--color-ink);
font-size: clamp(var(--text-extra-large), 3vw, var(--text-jumbo));
font-weight: 900;
letter-spacing: var(--letter-tight);
line-height: var(--line-tight);
}
.council-cover p {
margin: 0;
color: var(--color-ink);
line-height: var(--line-comfortable);
text-wrap: pretty;
}
.council-cover__facts {
display: grid;
gap: var(--space-2);
margin: 0;
}
.council-cover__facts div {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-3);
align-items: baseline;
padding-bottom: var(--space-2);
border-bottom: var(--hairline) solid var(--color-border);
}
.council-cover__facts div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.council-cover__facts dt {
color: var(--color-ink-muted);
font-size: var(--text-extra-small);
font-weight: 750;
text-transform: uppercase;
letter-spacing: var(--letter-expanded);
}
.council-cover__facts dd {
margin: 0;
color: var(--color-ink);
font-size: var(--text-medium);
font-weight: 800;
text-align: end;
}
@media (max-width: 760px) {
.council-cover {
grid-template-columns: 1fr;
}
}
.teacher-row {
align-items: center;
}
.teacher-row .toc__line {
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.teacher-row .toc__title {
flex-shrink: 0;
max-width: 100%;
}
.feedback-disclosure {
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.feedback-disclosure:last-child {
border-bottom: 0;
}
.feedback-disclosure > summary {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3-5) var(--space-5);
cursor: pointer;
list-style: none;
}
.feedback-disclosure > summary::-webkit-details-marker {
display: none;
}
@media (any-hover: hover) {
.feedback-disclosure > summary:hover {
background: var(--color-canvas);
}
}
.feedback-disclosure__body {
padding-block: 0 var(--space-4);
padding-inline: var(--space-16) var(--space-5);
}
.feedback-disclosure__comment {
margin: 0 0 var(--space-2-5);
padding-inline-start: var(--space-3-5);
border-inline-start: var(--rule-width) solid var(--color-border);
color: var(--color-ink);
font-size: var(--text-medium);
font-style: italic;
line-height: var(--line-normal);
white-space: pre-wrap;
}
}
@layer components {
.record {
position: relative;
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
padding: var(--space-10) var(--space-12) var(--space-12);
overflow: visible;
}
.record__topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin: calc(var(--space-10) * -1) calc(var(--space-12) * -1) var(--space-8);
padding: var(--space-2-5) var(--space-5);
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
font-size: var(--text-small);
font-weight: 700;
color: var(--color-ink-muted);
letter-spacing: var(--letter-wide);
}
.record__approval {
margin: var(--space-10) calc(var(--space-12) * -1)
calc(var(--space-12) * -1);
padding: var(--space-6) var(--space-8);
border-top: var(--hairline) solid var(--surface-subtle);
background: var(--color-canvas);
border-radius: 0 0 var(--radius-card) var(--radius-card);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.record__approval-hint {
font-size: var(--text-medium);
color: var(--color-ink-muted);
max-width: var(--container-copy-report);
}
.record__approval-hint b {
color: var(--color-ink);
font-weight: 700;
}
.record__approval-actions {
display: flex;
gap: var(--space-2-5);
align-items: center;
}
.record__approval-actions .btn {
font-size: var(--text-medium);
padding: var(--space-2-5) var(--space-6);
}
.record__approval-status {
font-size: var(--text-medium);
color: var(--color-ink-muted);
font-weight: 700;
}
.record__content-form {
display: contents;
}
.record__content-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2-5);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: var(--hairline) solid var(--surface-subtle);
font-size: var(--link-action-font-size);
color: var(--color-ink-muted);
flex-wrap: wrap;
}
.record__content-actions span {
margin-inline-end: auto;
}
.lesson-plan lexxy-editor {
display: block;
min-height: var(--container-auth-proof);
padding: 0;
}
.document-title {
font-size: var(--text-jumbo);
font-weight: 900;
letter-spacing: var(--letter-page-title);
line-height: var(--line-tight);
text-wrap: balance;
color: var(--color-ink);
margin: 0 0 var(--space-2);
padding-inline-end: var(--container-record-offset);
}
.document-meta {
font-size: var(--text-medium);
color: var(--color-ink-muted);
margin: 0 0 var(--space-7);
padding-inline-end: var(--container-record-offset);
}
.document-meta__sep {
color: var(--color-border);
}
.rail-card {
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.rail-card__header {
padding: var(--space-3) var(--space-4-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-wider);
text-transform: uppercase;
color: var(--color-ink-muted);
}
.rail-card__body {
padding: var(--space-4-5);
}
.rail-card__body--stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.rail-card--narrow {
max-width: var(--container-rail-narrow);
}
.rail-card--danger {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.rail-card--mb {
margin-bottom: var(--space-8);
}
.rail-status {
--_status-color: var(--color-accent);
display: flex;
align-items: center;
gap: var(--space-2);
}
.rail-status:has(.rail-status__dot--approved) {
--_status-color: var(--color-positive);
}
.rail-status:has(.rail-status__dot--rejected) {
--_status-color: var(--color-danger);
}
.rail-status__dot {
width: var(--progress-medium);
height: var(--progress-medium);
border-radius: var(--radius-round);
background: var(--_status-color);
flex-shrink: 0;
animation: blink 1.6s ease-in-out infinite;
}
.rail-status__dot--approved,
.rail-status__dot--rejected {
animation: none;
}
.rail-status__label {
font-size: var(--text-medium);
font-weight: 700;
color: var(--_status-color);
}
.rail-summary {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: var(--space-4);
row-gap: var(--space-1-5);
padding-top: var(--space-3-5);
border-top: var(--hairline) solid var(--surface-subtle);
font-size: var(--link-action-font-size);
& dt {
color: var(--color-ink-muted);
font-weight: 500;
}
& dd {
color: var(--color-ink);
font-weight: 700;
text-align: end;
}
& code {
font-size: var(--text-small);
}
}
.rail-note {
margin: 0;
color: var(--color-ink-muted);
font-size: var(--link-action-font-size);
line-height: var(--line-readable);
}
.rail-quote {
margin: 0;
padding: var(--space-2) var(--space-3);
border-inline-start: var(--space-1) solid var(--color-accent);
background: var(--surface-subtle);
color: var(--color-ink);
font-size: var(--link-action-font-size);
line-height: var(--line-readable);
font-style: italic;
}
.rail-card__header .lp-beta-tag {
display: inline-block;
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-wider);
color: var(--color-accent);
border: var(--hairline) solid currentColor;
border-radius: var(--radius-small);
padding: 0 var(--space-1);
margin-inline-start: var(--space-1);
}
.handoff {
margin-bottom: var(--space-5);
}
.handoff__status {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.handoff__status .tag {
margin-inline-start: 0;
}
.handoff__note {
margin: 0;
color: var(--color-ink-muted);
font-size: var(--link-action-font-size);
line-height: var(--line-readable);
}
.muted-copy {
font-size: var(--text-medium);
color: var(--color-ink-muted);
line-height: var(--line-normal);
}
.muted-copy--mt {
margin-top: var(--space-3-5);
}
.feedback-form {
display: flex;
flex-direction: column;
gap: var(--space-3-5);
}
.feedback-form .field {
display: block;
}
.feedback-comment {
min-height: var(--space-28);
resize: vertical;
line-height: var(--line-comfortable);
}
.feedback-helper {
margin-top: var(--space-1-5);
font-size: var(--text-small);
color: var(--color-ink-muted);
line-height: var(--line-readable);
}
.feedback-summary {
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-3-5);
border-radius: var(--radius-em-large);
background: var(--color-canvas);
font-size: var(--text-medium);
}
.feedback-summary strong {
color: var(--color-ink);
}
.feedback-summary p {
margin-top: var(--space-1-5);
color: var(--color-ink-muted);
line-height: var(--line-readable);
}
.book-suggestion {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.book-suggestion__title {
margin: 0;
color: var(--color-ink);
font-size: var(--text-medium);
line-height: var(--line-readable);
}
.book-suggestion__byline {
margin: 0;
font-size: var(--text-small);
}
.book-suggestion__blurb {
margin: 0;
color: var(--color-ink);
font-size: var(--text-small);
line-height: var(--line-readable);
}
.book-suggestion__cta {
margin: 0;
font-size: var(--text-small);
}
}
@layer components {
.score-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
}
.score-head__verdict {
text-align: end;
font-size: var(--text-small);
font-weight: 700;
letter-spacing: var(--letter-wide);
text-transform: uppercase;
}
.score-head__verdict--ok {
color: var(--color-positive);
}
.score-head__verdict--warn {
color: var(--color-warning);
}
.score-head__verdict small {
display: block;
font-size: var(--text-extra-small);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color-ink-muted);
margin-top: var(--space-0-5);
}
.score-number {
font-size: var(--text-display);
font-weight: 900;
letter-spacing: var(--letter-tight);
line-height: var(--line-tight);
font-variant-numeric: tabular-nums;
}
.score-number--positive {
color: var(--color-positive);
}
.score-number--warning {
color: var(--color-warning);
}
.score-meter {
display: flex;
gap: var(--rail-width);
margin-top: var(--space-3-5);
}
.score-meter span {
flex: 1;
height: var(--progress-small);
border-radius: var(--hairline);
background: var(--surface-subtle);
}
.score-meter span.on {
background: var(--color-warning);
}
.score-meter--ok span.on {
background: var(--color-positive);
}
.score-meter--warn span.on {
background: var(--color-warning);
}
.bncc-notes {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
background: var(--surface-subtle);
border-radius: var(--radius-card);
font-size: var(--text-small);
color: var(--color-ink-muted);
line-height: var(--line-loose);
}
.bncc-notes p {
margin: 0;
}
.skill-breakdown {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: var(--hairline) solid var(--surface-subtle);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.skill-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2) var(--space-3);
align-items: center;
}
.skill-code {
font: 600 var(--text-small) var(--font-mono);
color: var(--color-ink);
letter-spacing: var(--letter-normal);
}
.skill-name {
font-size: var(--text-small);
color: var(--color-ink-muted);
grid-column: 1;
line-height: var(--line-short);
margin-top: var(--space-0-5);
}
.skill-bar {
grid-column: 1 / -1;
height: var(--progress-thin);
background: var(--surface-subtle);
border-radius: var(--hairline);
overflow: hidden;
}
.skill-bar i {
display: block;
height: 100%;
background: var(--color-positive);
}
.skill-bar.weak i {
background: var(--color-warning);
}
.skill-bar.fail i {
background: var(--color-danger);
}
progress.skill-bar {
display: block;
width: 100%;
appearance: none;
border: 0;
}
progress.skill-bar::-webkit-progress-bar {
background: var(--surface-subtle);
}
progress.skill-bar::-webkit-progress-value {
background: var(--color-positive);
}
progress.skill-bar.weak::-webkit-progress-value {
background: var(--color-warning);
}
progress.skill-bar.fail::-webkit-progress-value {
background: var(--color-danger);
}
progress.skill-bar::-moz-progress-bar {
background: var(--color-positive);
}
progress.skill-bar.weak::-moz-progress-bar {
background: var(--color-warning);
}
progress.skill-bar.fail::-moz-progress-bar {
background: var(--color-danger);
}
.skill-percentage {
font: 700 var(--text-small) var(--font-mono);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
}
@layer components {
.history {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.history::before {
content: '';
position: absolute;
inset-inline-start: var(--space-1);
top: var(--progress-small);
bottom: var(--progress-small);
width: var(--hairline);
background: var(--surface-subtle);
}
.history li {
position: relative;
padding-block: 0 var(--space-4);
padding-inline: var(--space-6) 0;
}
.history li:last-child {
padding-bottom: 0;
}
.history li::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: var(--rail-width);
width: var(--history-dot-size);
height: var(--history-dot-size);
border-radius: var(--radius-round);
background: var(--surface-subtle);
box-shadow: 0 0 0 var(--rail-width) var(--color-surface);
}
.history--done::before {
background: var(--color-positive);
}
.history--attention::before {
background: var(--color-warning);
}
.history--active::before {
background: var(--color-accent);
}
.history--muted::before {
background: var(--surface-subtle);
}
.history__when {
font-family: var(--font-mono);
font-size: var(--text-extra-small);
font-weight: 600;
color: var(--color-ink-muted);
}
.history__what {
font-family: inherit;
font-size: var(--link-action-font-size);
color: var(--color-ink);
margin-top: var(--space-0-5);
line-height: var(--line-ui);
}
.history__what b {
font-weight: 700;
}
.history__detail {
font-family: inherit;
font-size: var(--text-small);
color: var(--color-ink-muted);
margin-top: var(--space-0-5);
line-height: var(--line-dense);
}
}
@layer components {
.prose {
font-size: var(--text-base);
line-height: var(--line-relaxed);
color: var(--color-ink);
max-width: var(--container-copy-prose);
}
.prose h2 {
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
margin: var(--space-9) 0 var(--space-2-5);
padding-bottom: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-3-5);
}
.prose h2::after {
content: '';
flex: 1;
border-bottom: var(--hairline) dotted var(--color-line-subtle);
}
.prose h2:first-child {
margin-top: 0;
}
.prose p {
margin-bottom: var(--flow-space);
text-wrap: pretty;
}
.prose ul {
padding-inline-start: var(--space-6);
margin-bottom: var(--flow-space);
}
.prose li {
margin-bottom: var(--space-1);
}
.prose strong {
color: var(--color-ink);
font-weight: 700;
}
.bncc-tag {
background: var(--color-surface);
color: var(--color-accent);
font-family: var(--font-mono);
font-size: var(--text-small);
font-weight: 700;
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-hairline);
}
}
@layer components {
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-medium);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.data-table th {
text-align: start;
font-weight: 700;
font-size: var(--text-tiny);
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
padding: var(--space-3) var(--space-4-5);
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.data-table td {
padding: var(--space-3-5) var(--space-4-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
vertical-align: middle;
}
.data-table tbody tr:last-child td {
border-bottom: 0;
}
.data-table tbody tr {
cursor: pointer;
transition: background var(--duration-instant);
}
@media (any-hover: hover) {
.data-table tbody tr:hover {
background: var(--color-canvas);
}
}
.avatar {
width: var(--avatar-medium);
height: var(--avatar-medium);
border-radius: var(--radius-round);
background: var(--surface-subtle);
color: var(--color-ink-muted);
display: grid;
place-items: center;
font-size: var(--text-small);
font-weight: 800;
flex-shrink: 0;
box-shadow: var(--shadow-soft);
}
.avatar--quiet {
background: var(--surface-subtle);
color: var(--color-ink-muted);
box-shadow: var(--shadow-quiet-plan);
}
.avatar--school {
background: var(--color-info-soft);
color: var(--color-info);
box-shadow: var(--shadow-school-plan);
}
.avatar--gold {
background: var(--color-golden-soft);
color: var(--color-golden-ink);
box-shadow: var(--shadow-golden-plan);
}
.ledger {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-medium);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.ledger th {
text-align: start;
padding: var(--space-3) var(--space-4-5);
font-size: var(--text-tiny);
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
font-weight: 700;
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.ledger td {
padding: var(--space-3-5) var(--space-4-5);
border-bottom: var(--hairline) solid var(--surface-subtle);
vertical-align: middle;
}
.ledger tbody tr:last-child td {
border-bottom: 0;
}
@media (any-hover: hover) {
.ledger tbody tr:hover {
background: var(--color-canvas);
}
}
.code-cell {
font-family: var(--font-mono);
font-weight: 700;
color: var(--color-ink);
font-size: var(--link-action-font-size);
background: var(--surface-subtle);
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-medium);
letter-spacing: var(--letter-wide);
}
.usage-bar {
width: var(--usage-bar-width);
height: var(--progress-small);
background: var(--surface-subtle);
border-radius: var(--radius-pill);
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-inline-end: var(--space-1-5);
}
progress.usage-bar {
appearance: none;
border: 0;
}
progress.usage-bar::-webkit-progress-bar {
background: var(--surface-subtle);
}
progress.usage-bar::-webkit-progress-value {
border-radius: var(--radius-pill);
background: var(--color-accent);
}
progress.usage-bar::-moz-progress-bar {
border-radius: var(--radius-pill);
background: var(--color-accent);
}
}
@layer components {
.facts {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: var(--space-5);
row-gap: var(--space-1-5);
font-size: var(--text-medium);
}
.facts dt {
color: var(--color-ink-muted);
font-weight: 500;
}
.facts dd {
color: var(--color-ink);
font-weight: 600;
text-align: end;
}
.facts--left dd {
text-align: start;
}
}
@layer components {
.budget-bar {
height: var(--progress-medium);
background: var(--surface-subtle);
border-radius: var(--radius-pill);
overflow: hidden;
margin: var(--space-1-5) 0;
}
.budget-bar--flush {
margin: 0 0 var(--space-2);
}
progress.budget-bar {
display: block;
width: 100%;
appearance: none;
border: 0;
}
progress.budget-bar::-webkit-progress-bar {
background: var(--surface-subtle);
}
progress.budget-bar::-webkit-progress-value {
border-radius: var(--radius-pill);
background: var(--color-positive);
}
progress.budget-bar.budget-bar--warning::-webkit-progress-value {
background: var(--color-warning);
}
progress.budget-bar.budget-bar--danger::-webkit-progress-value {
background: var(--color-danger);
}
progress.budget-bar::-moz-progress-bar {
border-radius: var(--radius-pill);
background: var(--color-positive);
}
progress.budget-bar.budget-bar--warning::-moz-progress-bar {
background: var(--color-warning);
}
progress.budget-bar.budget-bar--danger::-moz-progress-bar {
background: var(--color-danger);
}
.budget-thresholds {
display: flex;
justify-content: space-between;
color: var(--color-ink-muted);
font-size: var(--text-small);
}
.kill-status {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-2) 0 var(--space-4);
}
.kill-status__icon {
width: var(--kill-status-icon);
height: var(--kill-status-icon);
border-radius: var(--radius-round);
display: grid;
place-items: center;
font-size: var(--icon-large);
flex-shrink: 0;
}
.kill-status__icon--active {
background: var(--color-danger-soft);
}
.kill-status__icon--ok {
background: var(--color-positive-soft);
}
.kill-status__copy {
flex: 1;
}
.kill-status__title {
color: var(--color-ink);
font-size: var(--text-base);
font-weight: 900;
}
.kill-status__title--active {
color: var(--color-danger);
}
.kill-status__meta {
margin-top: var(--space-1);
color: var(--color-ink-muted);
font-size: var(--text-medium);
}
}
@layer components {
html:has(dialog[open]) {
overflow: hidden;
}
.dialog {
border: 0;
padding: var(--space-8);
margin: auto;
opacity: 0;
transform: scale(0.85);
transform-origin: center;
transition-behavior: allow-discrete;
transition-duration: var(--duration-instant);
transition-property: display, opacity, overlay, transform;
transition-timing-function: ease-out;
border-radius: var(--radius-card);
background: var(--color-surface);
box-shadow: var(--shadow-dialog);
max-inline-size: calc(100vw - var(--space-12));
max-block-size: calc(100dvh - var(--dialog-block-gutter));
&::backdrop {
background-color: var(--overlay-backdrop);
opacity: 0;
transition-behavior: allow-discrete;
transition-duration: var(--duration-instant);
transition-property: display, opacity, overlay;
}
&[open] {
opacity: 1;
transform: scale(1);
transition-duration: var(--duration-fast);
&::backdrop {
opacity: 0.5;
transition-duration: var(--duration-fast);
}
}
&.dialog--classroom {
width: min(var(--dialog-classroom-width), calc(100vw - var(--dialog-inline-gutter)));
padding: 0;
&[open] {
display: flex;
flex-direction: column;
overflow: hidden;
}
}
&.dialog--editor {
width: min(var(--dialog-editor-width), calc(100vw - var(--dialog-inline-gutter)));
padding: 0;
}
.dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
border-bottom: var(--hairline) solid var(--surface-subtle);
background: var(--color-canvas);
flex-shrink: 0;
}
.dialog__title {
font-size: var(--text-base);
font-weight: 900;
letter-spacing: var(--letter-topbar);
color: var(--color-ink);
}
.dialog__sub {
font-size: var(--text-small);
color: var(--color-ink-muted);
margin-top: var(--space-0-5);
}
.dialog__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-6);
overflow-y: auto;
overscroll-behavior: contain;
}
.dialog__warning {
margin: 0;
line-height: var(--line-loose);
color: var(--color-ink);
}
.dialog__close {
display: grid;
place-items: center;
width: var(--control-small);
height: var(--control-small);
border-radius: var(--radius-round);
color: var(--color-ink-muted);
line-height: var(--line-tight);
background: none;
border: 0;
cursor: pointer;
transition: background var(--duration-instant);
&:hover {
background: var(--surface-subtle);
}
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-1) var(--space-3);
margin-top: var(--space-2);
}
.checkbox-grid .checkbox {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-small);
color: var(--color-ink);
cursor: pointer;
}
}
@starting-style {
.dialog[open] {
opacity: 0;
transform: scale(0.85);
}
.dialog[open]::backdrop {
opacity: 0;
}
}
}
@layer components {
.static-stamp {
position: absolute;
top: var(--stamp-static-top);
inset-inline-end: var(--space-6);
border: var(--rule-width) solid var(--color-positive);
color: var(--color-positive);
padding: var(--space-1-5) var(--space-3);
font-weight: 900;
letter-spacing: var(--letter-wide);
border-radius: var(--radius-em-extra-small);
transform: rotate(-8deg);
font-size: var(--text-small);
text-align: center;
font-family: var(--font-mono);
text-transform: uppercase;
line-height: var(--line-short);
background: var(--color-positive-soft);
& small {
display: block;
font-size: var(--text-micro);
font-weight: 700;
opacity: 0.85;
margin-top: var(--space-0-5);
}
}
.lock-banner {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3-5) var(--space-5);
margin-bottom: var(--space-5);
background: var(--color-warning-soft);
border-radius: var(--radius-card);
font-size: var(--text-medium);
color: var(--color-ink);
box-shadow: var(--shadow-soft);
& strong {
font-weight: 700;
}
& .btn {
margin-inline-start: auto;
}
}
.postit {
appearance: none;
border: 0;
text-align: start;
font: inherit;
position: absolute;
top: var(--space-3);
inset-inline-end: var(--space-8);
z-index: var(--z-dropdown);
width: var(--stamp-postit-width);
padding: var(--space-3) var(--space-3-5);
background: var(--postit-bg);
border-radius: var(--radius-small);
font-family: var(--font-handwritten);
color: var(--postit-ink);
box-shadow: var(--shadow-soft);
cursor: pointer;
user-select: none;
transition: box-shadow var(--duration-fast);
@media (any-hover: hover) {
&:hover {
box-shadow: var(--shadow-stack);
}
}
}
.postit__label {
font: 700 var(--text-micro) var(--font-mono);
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--postit-muted);
margin-bottom: var(--space-1-5);
}
.postit__line {
font-size: var(--text-large);
line-height: var(--line-short);
margin-bottom: var(--space-1);
}
.postit__line--sm {
font-size: var(--text-base);
}
.postit__line b {
font-weight: 700;
}
.postit__line.big {
font-size: var(--text-extra-large);
font-weight: 700;
line-height: var(--line-compact);
margin-bottom: var(--space-1-5);
}
.postit__divider {
height: var(--hairline);
background: var(--postit-divider);
margin: var(--space-2) 0;
}
.postit__hint {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
margin-top: var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-extra-small);
font-weight: 600;
letter-spacing: var(--letter-wide);
color: var(--postit-muted);
opacity: 0.75;
border-top: var(--hairline) solid var(--postit-divider-soft);
padding-top: var(--space-1-5);
}
.classroom-context__note {
background: var(--postit-bg);
border-radius: var(--radius-medium);
padding: var(--space-3-5) var(--space-4);
font-family: var(--font-handwritten);
font-size: var(--text-large);
color: var(--postit-ink);
line-height: var(--line-readable);
}
.stamp-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: var(--stamp-overlay-bottom);
display: none;
place-items: center;
z-index: var(--z-overlay);
border-radius: var(--radius-card) var(--radius-card) 0 0;
pointer-events: none;
backdrop-filter: blur(2px);
background: color-mix(in oklch, var(--color-surface) 72%, transparent);
&.is-animating {
display: grid;
animation: overlay-in 1.4s ease-in-out both;
}
}
.stamp-overlay__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1-5);
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-em-small);
text-align: center;
}
.stamp-overlay__inner--approved {
border: var(--space-2) solid var(--stamp-approved-border-strong);
color: var(--color-positive);
}
.stamp-overlay__inner--rejected {
border: var(--space-2) solid var(--stamp-rejected-border-strong);
color: var(--color-danger);
}
.stamp-overlay__word {
font-family: var(--font-mono);
font-size: clamp(var(--text-jumbo), 7cqw, var(--text-display));
font-weight: 900;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
line-height: var(--line-tight);
}
.stamp-overlay__meta {
font-family: var(--font-mono);
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-expanded);
text-transform: uppercase;
opacity: 0.75;
line-height: var(--line-normal);
}
.stamp-overlay.is-animating .stamp-overlay__inner--approved,
.stamp-overlay.is-animating .stamp-overlay__inner--rejected {
animation: stamp-hit 0.45s 0.05s cubic-bezier(0.25, 1.25, 0.5, 1) both;
}
.stamp {
position: absolute;
top: var(--stamp-fixed-top);
inset-inline-end: var(--space-8);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-3) var(--space-7);
border-radius: var(--radius-em-extra-small);
text-align: center;
z-index: var(--z-overlay);
pointer-events: none;
backdrop-filter: blur(1px);
&.is-stamped {
display: flex;
}
&.stamp--animate {
animation: stamp-settle var(--duration-normal) 1.1s ease-out both;
}
}
.stamp--approved {
border: var(--space-1-5) solid var(--stamp-approved-border);
color: var(--color-positive);
background: color-mix(in oklch, var(--color-positive-soft) 85%, transparent);
rotate: -6deg;
}
.stamp--rejected {
border: var(--space-1-5) solid var(--stamp-rejected-border);
color: var(--color-danger);
background: color-mix(in oklch, var(--color-danger-soft) 85%, transparent);
rotate: 5deg;
}
.stamp--replaced {
border: var(--space-1-5) solid var(--color-warning);
color: var(--color-warning);
background: color-mix(in oklch, var(--color-warning-soft) 85%, transparent);
rotate: -3deg;
}
.stamp__word {
font-family: var(--font-mono);
font-size: var(--text-large);
font-weight: 900;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
line-height: var(--line-tight);
}
.stamp__meta {
font-family: var(--font-mono);
font-size: var(--text-micro);
font-weight: 700;
letter-spacing: var(--letter-expanded);
text-transform: uppercase;
opacity: 0.8;
line-height: var(--line-normal);
}
}
@layer components {
.tag {
font-size: var(--text-tiny);
font-weight: 700;
letter-spacing: var(--letter-wide);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-pill);
margin-inline-start: var(--space-2);
white-space: nowrap;
flex-shrink: 0;
}
.tag.tag--pending {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.tag.tag--approved {
background: var(--color-positive-soft);
color: var(--color-positive);
}
.tag.tag--rejected {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.tag.tag--quiet {
background: var(--surface-subtle);
color: var(--color-ink-muted);
}
.tag.tag--gold {
background: var(--color-golden-soft);
color: var(--color-golden-ink);
box-shadow: var(--shadow-golden-glow);
}
.tag.tag--info {
background: var(--color-accent-soft);
color: var(--color-accent);
}
.tag.tag--school {
background: var(--color-info-soft);
color: var(--color-info);
}
.tag.tag--warning {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.tag.tag--regen {
background: var(--color-generating-soft);
color: var(--color-generating-ink);
}
.tag.tag--plan {
box-shadow: var(--shadow-soft);
}
.tag.tag--plan.tag--gold {
box-shadow: var(--shadow-golden-plan);
}
.tag.tag--plan.tag--school {
box-shadow: var(--shadow-school-plan);
}
.tag.tag--plan.tag--quiet {
box-shadow: var(--shadow-quiet-plan);
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-7);
a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-soft);
color: var(--color-ink);
font-size: var(--link-action-font-size);
font-weight: 650;
text-decoration: none;
&:hover {
box-shadow: var(--shadow-soft), 0 0 0 var(--hover-ring-size) var(--hover-ring-color);
}
&.is-active {
background: var(--color-ink);
color: var(--color-surface);
}
}
span {
font: 700 var(--text-extra-small) var(--font-mono);
opacity: 0.7;
}
}
.section-heading {
display: flex;
align-items: center;
gap: var(--space-3-5);
margin: var(--space-9) 0 var(--space-4);
&:first-child {
margin-top: 0;
}
.section-heading__label {
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-muted);
white-space: nowrap;
}
.section-heading__rule {
flex: 1;
border-bottom: var(--hairline) dotted var(--color-line-muted);
}
.section-heading__count {
font-size: var(--text-extra-small);
font-weight: 800;
color: var(--color-ink-muted);
background: var(--surface-subtle);
padding: var(--space-0-5) var(--space-2-5);
border-radius: var(--radius-pill);
}
.section-heading__muted {
font-weight: 500;
color: var(--color-ink-muted);
opacity: 0.7;
}
}
.founder-pulse {
margin-top: var(--space-9);
}
.pulse {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3-5);
}
.pulse__card {
--pulse-color: var(--color-ink-muted);
display: grid;
grid-template-columns: var(--avatar-medium) 1fr;
gap: var(--space-3-5);
align-items: start;
padding: var(--space-4);
border-radius: var(--radius-card);
background: var(--color-surface);
color: var(--color-ink);
text-decoration: none;
box-shadow: var(--shadow-soft);
border: var(--hairline) solid var(--surface-subtle);
box-shadow: inset var(--rail-width) 0 0 color-mix(in oklch, var(--pulse-color) 42%, transparent), var(--shadow-soft);
transition: background var(--duration-instant), box-shadow var(--duration-fast);
&[href] {
cursor: pointer;
}
&[href]:hover {
background: var(--color-canvas);
box-shadow: inset var(--rail-width) 0 0 color-mix(in oklch, var(--pulse-color) 58%, transparent), var(--shadow-soft);
.pulse__action {
text-decoration: underline;
text-underline-offset: 0.16em;
}
}
&.up {
--pulse-color: var(--color-positive);
}
&.warn {
--pulse-color: var(--color-golden);
}
&.down {
--pulse-color: var(--color-danger);
}
&.accent {
--pulse-color: var(--color-accent);
}
&.flat {
--pulse-color: var(--color-ink-muted);
}
.pulse__icon {
width: var(--avatar-large);
height: var(--avatar-large);
border-radius: var(--radius-large);
display: grid;
place-items: center;
font-size: var(--text-base);
font-weight: 700;
background: var(--surface-subtle);
color: var(--color-ink-muted);
flex-shrink: 0;
}
&.up .pulse__icon {
background: var(--color-positive-soft);
color: var(--color-positive);
}
&.warn .pulse__icon {
background: var(--color-golden-soft);
color: var(--color-golden-ink);
}
&.down .pulse__icon {
background: var(--color-danger-soft);
color: var(--color-danger);
}
&.accent .pulse__icon {
background: var(--color-accent-soft);
color: var(--color-accent);
}
.pulse__title {
color: var(--color-ink);
font-size: var(--text-base);
font-weight: 750;
line-height: var(--line-dense);
}
.pulse__title b,
.pulse__sub b {
font-weight: 900;
}
.pulse__sub {
margin-top: var(--space-1);
color: var(--color-ink-muted);
font-size: var(--link-action-font-size);
line-height: var(--line-readable);
}
.pulse__action {
display: inline-block;
margin-inline-start: var(--space-1);
color: var(--color-accent);
font-weight: 700;
white-space: nowrap;
}
.pulse__spark {
display: inline-flex;
align-items: end;
gap: var(--rule-width);
width: var(--spark-width);
height: var(--spark-height);
margin-inline-start: var(--space-1-5);
vertical-align: -0.08em;
color: var(--pulse-color);
i {
display: block;
width: var(--spark-bar-width);
border-radius: var(--radius-pill);
background: currentColor;
opacity: 0.75;
}
}
}
.pulse__spark-bar--h0 {
height: var(--spark-bar-min-height);
}
.pulse__spark-bar--h10 {
height: var(--pct-10);
}
.pulse__spark-bar--h20 {
height: var(--pct-20);
}
.pulse__spark-bar--h30 {
height: var(--pct-30);
}
.pulse__spark-bar--h40 {
height: var(--pct-40);
}
.pulse__spark-bar--h50 {
height: var(--pct-50);
}
.pulse__spark-bar--h60 {
height: var(--pct-60);
}
.pulse__spark-bar--h70 {
height: var(--pct-70);
}
.pulse__spark-bar--h80 {
height: var(--pct-80);
}
.pulse__spark-bar--h90 {
height: var(--pct-90);
}
.pulse__spark-bar--h100 {
height: var(--pct-100);
}
.founder-card {
padding: var(--space-4);
overflow: visible;
}
.funnel {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-2);
.funnel__step {
position: relative;
padding: var(--space-3) var(--space-2-5);
border-radius: var(--radius-extra-large);
background: transparent;
text-align: center;
&:not(:last-child)::after {
content: '';
position: absolute;
inset-inline-end: calc(var(--space-2) * -1);
top: 50%;
transform: translateY(-50%);
z-index: 1;
color: var(--color-ink-muted);
font-weight: 900;
}
}
.funnel__number {
display: block;
font-size: var(--text-funnel);
font-weight: 900;
letter-spacing: var(--letter-tight);
line-height: var(--line-tight);
color: var(--color-ink);
font-variant-numeric: tabular-nums;
}
.funnel__label {
display: block;
margin-top: var(--space-1);
color: var(--color-ink);
font-size: var(--text-small);
font-weight: 800;
}
.funnel__percentage {
display: block;
margin-top: var(--space-1);
color: var(--color-ink-muted);
font-size: var(--text-tiny);
font-weight: 700;
line-height: var(--line-snug);
}
}
.weekrow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3-5);
.weekrow__cell {
padding-block: var(--space-1);
padding-inline: 0 var(--space-4);
border-inline-end: var(--hairline) solid var(--surface-subtle);
&:last-child {
border-inline-end: 0;
padding-inline-end: 0;
}
}
.weekrow__label {
display: block;
color: var(--color-ink-muted);
font-size: var(--text-extra-small);
font-weight: 800;
letter-spacing: var(--letter-wider);
text-transform: uppercase;
}
.weekrow__number {
display: block;
margin-top: var(--space-2);
color: var(--color-ink);
font-size: var(--text-week);
font-weight: 900;
letter-spacing: var(--letter-tight);
line-height: var(--line-tight);
font-variant-numeric: tabular-nums;
}
.weekrow__delta {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
margin-top: var(--space-2-5);
color: var(--color-ink-muted);
font-size: var(--text-small);
font-weight: 850;
span {
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
}
}
.aside .weekrow {
display: flex;
flex-direction: column;
gap: var(--space-3-5);
.weekrow__cell {
padding: 0 0 var(--space-3-5);
border-inline-end: 0;
border-bottom: var(--hairline) solid var(--surface-subtle);
&:last-child {
padding-bottom: 0;
border-bottom: 0;
}
}
.weekrow__label {
font-size: var(--text-tiny);
letter-spacing: var(--letter-wider);
}
.weekrow__number {
margin-top: var(--space-1);
font-size: var(--text-extra-large);
}
.weekrow__delta {
margin-top: var(--space-1-5);
font-size: var(--text-extra-small);
}
}
.staff-funnel__lede {
margin-block: var(--space-3);
color: var(--color-ink-muted);
}
.staff-funnel__scroll {
overflow-x: auto;
margin-block-end: var(--space-4);
}
.staff-funnel__table td small {
margin-inline-start: var(--space-1);
}
.staff-funnel__nudges {
list-style: none;
margin-block-start: var(--space-4);
padding: 0;
font-size: var(--text-medium);
color: var(--color-ink-muted);
}
.staff-funnel__nudges li + li {
margin-block-start: var(--space-2);
}
.op-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--container-op-summary-min), 1fr));
gap: var(--space-3);
margin: 0 0 var(--space-6);
.op-summary__item {
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
padding: var(--space-3-5) var(--space-4);
span {
display: block;
color: var(--color-ink-muted);
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-wider);
text-transform: uppercase;
}
strong {
display: block;
margin-top: var(--space-1);
color: var(--color-ink);
font-size: var(--text-large);
font-weight: 850;
line-height: var(--line-compact);
}
small {
display: block;
margin-top: var(--space-1);
color: var(--color-ink-muted);
font-size: var(--text-extra-small);
line-height: var(--line-compact);
}
&.is-warn {
box-shadow: var(--shadow-stack), inset 3px 0 0 var(--color-danger);
strong {
color: var(--color-danger);
}
}
}
}
@media (max-width: 760px) {
.pulse,
.weekrow {
grid-template-columns: 1fr;
}
.funnel {
grid-template-columns: 1fr;
.funnel__step {
display: grid;
grid-template-columns: 5ch 1fr auto;
align-items: center;
gap: var(--space-2-5);
text-align: start;
&:not(:last-child)::after {
content: '';
right: 50%;
top: auto;
bottom: calc(var(--space-2-5) * -1);
transform: translateX(50%);
}
}
.funnel__label,
.funnel__percentage {
margin-top: 0;
}
}
}
}
@layer components {
.topbar {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-3-5) var(--space-7);
background: var(--color-surface);
box-shadow: var(--shadow-topbar-edge);
position: sticky;
top: 0;
z-index: var(--z-nav);
}
.topbar__brand {
display: flex;
align-items: center;
gap: var(--space-2-5);
font-weight: 800;
letter-spacing: var(--letter-topbar);
color: var(--color-ink);
text-decoration: none;
}
.topbar__brand-name {
font-weight: 800;
font-size: var(--text-medium);
letter-spacing: var(--letter-topbar);
}
.topbar__sub {
font-size: var(--text-small);
font-weight: 600;
color: var(--color-ink-muted);
letter-spacing: var(--letter-expanded);
text-transform: uppercase;
}
.topbar__nav {
display: flex;
gap: var(--space-1);
flex: 1;
margin-inline-start: var(--space-2);
& a {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
font-size: var(--text-medium);
color: var(--color-ink-muted);
font-weight: 600;
padding: var(--space-2) var(--space-3-5);
border-radius: var(--radius-pill);
text-decoration: none;
transition: box-shadow var(--duration-fast), background var(--duration-instant), color var(--duration-instant);
@media (any-hover: hover) {
&:hover {
background: color-mix(in oklch, var(--color-ink) 4%, var(--color-surface));
box-shadow: 0 0 0 var(--hover-ring-size) var(--hover-ring-color);
color: var(--color-ink);
}
}
&.is-active {
background: var(--color-surface);
color: var(--color-ink);
box-shadow: var(--shadow-stack);
}
}
}
.topbar__pip {
background: var(--color-danger);
color: var(--color-surface);
font-size: var(--text-tiny);
font-weight: 800;
padding: var(--space-0-5) var(--space-2);
border-radius: var(--radius-pill);
line-height: var(--line-ui);
}
.topbar__end {
display: flex;
align-items: center;
gap: var(--space-2-5);
margin-inline-start: auto;
}
.topbar__avatar {
width: var(--control-small);
height: var(--control-small);
border-radius: var(--radius-round);
background: var(--surface-subtle);
color: var(--color-ink-muted);
display: grid;
place-items: center;
font-size: var(--text-small);
font-weight: 800;
box-shadow: var(--shadow-soft);
}
.killbar {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1-5) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-stack);
font-size: var(--text-small);
font-weight: 600;
color: var(--color-ink);
text-decoration: none;
transition: box-shadow var(--duration-fast);
@media (any-hover: hover) {
&:hover {
box-shadow: var(--shadow-stack), 0 0 0 var(--hover-ring-size) var(--hover-ring-color);
}
}
}
.killbar__dot {
width: var(--progress-medium);
height: var(--progress-medium);
border-radius: var(--radius-round);
flex-shrink: 0;
&.killbar__dot--ok {
background: var(--color-positive);
box-shadow: var(--shadow-positive-dot);
}
&.killbar__dot--danger {
background: var(--color-danger);
animation: pulse-dot 1.4s ease-in-out infinite;
}
}
}
@layer components {
.staff-shell {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
min-height: var(--staff-shell-height);
}
.staff-shell__main {
min-width: 0;
}
.staffnav {
position: sticky;
top: 0;
align-self: start;
max-height: var(--staff-shell-height);
overflow-y: auto;
display: grid;
align-content: start;
gap: var(--space-6);
padding: var(--space-6) var(--space-4);
background: var(--color-surface);
border-inline-end: var(--hairline) solid var(--color-border);
z-index: var(--z-nav);
}
.staffnav__heading {
display: block;
padding: 0 var(--space-3);
margin-bottom: var(--space-2);
font-size: var(--text-extra-small);
font-weight: 800;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.staffnav__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-0-5);
}
.staffnav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-large);
font-size: var(--text-medium);
font-weight: 600;
color: var(--color-ink-muted);
text-decoration: none;
transition: background var(--duration-instant), color var(--duration-instant);
}
@media (any-hover: hover) {
.staffnav__link:hover {
background: var(--color-canvas);
color: var(--color-ink);
}
}
.staffnav__link.is-active {
background: var(--color-accent-soft);
color: var(--color-ink);
}
.staffnav__pip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--staff-pip-min-width);
padding: 0 var(--space-1-5);
border-radius: var(--radius-pill);
background: var(--color-danger);
color: var(--color-surface);
font-size: var(--text-extra-small);
font-weight: 800;
}
.topbar--staff .topbar__search {
flex: 1;
max-width: var(--staff-search-width);
margin-inline-start: var(--space-6);
}
.topbar--staff .topbar__search input {
width: 100%;
padding-block: var(--space-2);
padding-inline: var(--space-3-5) var(--space-8);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-canvas);
font-size: var(--text-medium);
color: var(--color-ink);
}
.topbar--staff .topbar__end {
margin-inline-start: auto;
}
.search-form {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.search-form input[type="search"] {
flex: 1;
max-width: var(--staff-search-width);
padding: var(--space-2) var(--space-3-5);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: var(--text-medium);
color: var(--color-ink);
}
.filter-row--secondary {
margin-top: calc(var(--space-5) * -1);
& a {
background: transparent;
box-shadow: none;
border: var(--hairline) solid var(--color-border);
color: var(--color-ink-muted);
font-weight: 600;
}
& a.is-active {
background: var(--color-accent-soft);
border-color: var(--color-accent-soft);
color: var(--color-ink);
}
}
.page__scope {
margin: 0 0 var(--space-4);
font-size: var(--text-medium);
color: var(--color-ink-muted);
}
.today {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-7);
}
.today__tile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label spark" "value value" "sub sub";
align-items: end;
gap: var(--space-1) var(--space-3);
padding: var(--space-3-5) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
}
.today__label {
grid-area: label;
font-size: var(--text-extra-small);
font-weight: 700;
letter-spacing: var(--letter-widest);
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.today__value {
grid-area: value;
white-space: nowrap;
font: 600 var(--text-display-small) var(--font-mono);
font-variant-numeric: tabular-nums;
line-height: var(--line-tight);
color: var(--color-ink);
}
.today__sub {
grid-area: sub;
font-size: var(--text-extra-small);
color: var(--color-ink-subtle);
}
.spark {
grid-area: spark;
display: inline-flex;
align-items: end;
gap: var(--rule-width);
width: var(--spark-width);
height: var(--spark-height);
color: var(--color-accent);
}
.spark__bar {
display: block;
width: var(--spark-bar-width);
border-radius: var(--radius-pill);
background: currentColor;
opacity: 0.75;
}
.attn {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--attn-tile-min), 1fr));
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.attn__tile {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "count label" "count go";
column-gap: var(--space-3);
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack), inset 0 var(--accent-rail-width) 0 var(--color-border);
color: inherit;
text-decoration: none;
}
.attn__tile--danger { box-shadow: var(--shadow-stack), inset 0 var(--accent-rail-width) 0 var(--color-danger); }
.attn__tile--warn { box-shadow: var(--shadow-stack), inset 0 var(--accent-rail-width) 0 var(--color-warning); }
.attn__tile--info { box-shadow: var(--shadow-stack), inset 0 var(--accent-rail-width) 0 var(--color-info); }
.attn__tile--flat { cursor: default; }
@media (any-hover: hover) {
a.attn__tile:hover { background: var(--color-canvas); }
}
.attn__count {
grid-area: count;
font: 600 var(--text-display-small) var(--font-mono);
font-variant-numeric: tabular-nums;
line-height: var(--line-tight);
}
.attn__label {
grid-area: label;
font-size: var(--text-small);
font-weight: 600;
line-height: var(--line-snug);
}
.attn__go {
grid-area: go;
font-size: var(--text-extra-small);
color: var(--color-accent-ink);
}
.attn--watch .attn__count { color: var(--color-ink-muted); }
.toc--docs {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.toc--docs > .docrow {
min-width: 0;
}
.docrow__summary {
list-style: none;
}
.docrow__summary::-webkit-details-marker { display: none; }
.docrow__summary .toc__title {
flex: 1 1 var(--docrow-title-basis);
min-width: var(--docrow-title-min);
}
.docrow__summary .toc__meta {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.docrow__summary .tag {
flex-shrink: 0;
}
.docrow__summary .toc__leader {
flex: 0 0 var(--space-4);
border-bottom: 0;
min-width: 0;
}
.docrow--warn .docrow__summary { box-shadow: inset var(--rail-width) 0 0 var(--color-warning); }
.docrow--bad .docrow__summary { box-shadow: inset var(--rail-width) 0 0 var(--color-danger); }
.docrow[open] .docrow__summary { background: var(--color-canvas); }
.docrow__detail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-4);
padding: var(--space-3) var(--space-5) var(--space-4);
background: var(--color-canvas);
border-bottom: var(--hairline) solid var(--surface-subtle);
}
.docrow__ask {
flex-basis: 100%;
margin: 0;
font-size: var(--text-small);
color: var(--color-ink-muted);
font-style: italic;
}
.topbar--staff .topbar__search { position: relative; }
.topbar__kbd {
position: absolute;
top: 50%;
inset-inline-end: var(--space-3);
transform: translateY(-50%);
font: 600 var(--text-extra-small) var(--font-mono);
padding: 0 var(--space-1-5);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-small);
color: var(--color-ink-subtle);
pointer-events: none;
}
.topbar__results {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--z-dropdown);
}
.search-results {
list-style: none;
margin: var(--space-1) 0 0;
padding: var(--space-1);
background: var(--color-surface);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-large);
box-shadow: var(--shadow-stack);
}
.search-results__item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "name badge" "sub badge";
align-items: center;
column-gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-large);
color: inherit;
text-decoration: none;
}
.search-results__item strong { grid-area: name; }
.search-results__item span { grid-area: sub; font-size: var(--text-small); color: var(--color-ink-muted); }
.search-results__item .tag { grid-area: badge; }
@media (any-hover: hover) {
.search-results__item:hover { background: var(--color-canvas); }
}
.search-results__item:focus-visible { outline: var(--hover-ring-size) solid var(--color-accent); }
.search-results__foot, .search-results__empty {
padding: var(--space-2) var(--space-3);
font-size: var(--text-small);
color: var(--color-ink-muted);
}
.search-results__foot a { color: var(--color-accent-ink); }
@media (max-width: 900px) {
.today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.finder__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.finder__chip {
font-size: var(--text-extra-small);
font-weight: 650;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-pill);
border: var(--hairline) solid var(--color-border);
color: var(--color-ink-muted);
text-decoration: none;
}
.finder__chip span { font-family: var(--font-mono); opacity: 0.7; }
.finder__chip.is-active {
background: var(--color-ink);
border-color: var(--color-ink);
color: var(--color-surface);
}
.finder__input {
width: 100%;
padding: var(--space-1-5) var(--space-3);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-canvas);
font-size: var(--text-small);
color: var(--color-ink);
}
.finder__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-0-5);
max-height: var(--finder-max-height);
overflow-y: auto;
}
.finder__row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "title pdf" "meta pdf";
column-gap: var(--space-2);
padding: var(--space-1-5) var(--space-2);
border-radius: var(--radius-large);
}
@media (any-hover: hover) {
.finder__row:hover { background: var(--color-canvas); }
}
.finder__title { grid-area: title; font-weight: 600; font-size: var(--text-small); color: var(--color-ink); text-decoration: none; }
.finder__meta { grid-area: meta; font-size: var(--text-extra-small); color: var(--color-ink-subtle); }
.finder__pdf {
grid-area: pdf;
align-self: center;
font: 700 var(--text-extra-small) var(--font-mono);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-small);
background: var(--color-accent-soft);
color: var(--color-accent-ink);
text-decoration: none;
}
.note-form {
display: grid;
gap: var(--space-2);
justify-items: start;
margin-bottom: var(--space-3);
}
.note-form textarea {
width: 100%;
padding: var(--space-2-5) var(--space-3-5);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-large);
background: var(--color-surface);
font: inherit;
color: var(--color-ink);
resize: vertical;
}
.note__body {
flex: 1 1 auto;
min-width: 0;
white-space: pre-wrap;
}
.last-said {
margin-top: var(--space-3);
}
.last-said dd {
font-weight: 500;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-5);
font-size: var(--text-small);
}
.pagination__step {
padding: var(--space-1-5) var(--space-3);
border-radius: var(--radius-pill);
border: var(--hairline) solid var(--color-border);
color: var(--color-ink);
text-decoration: none;
}
.pagination__step.is-disabled {
color: var(--color-ink-subtle);
border-color: var(--surface-subtle);
}
@media (any-hover: hover) {
a.pagination__step:hover { background: var(--color-surface); }
}
.pagination__position {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--color-ink-muted);
}
.toc__item--quiet .toc__title,
.toc__item--quiet .toc__meta {
color: var(--color-ink-subtle);
}
.toc__item--summary .toc__title { font-weight: 650; }
@media (max-width: 900px) {
.staff-shell {
grid-template-columns: minmax(0, 1fr);
}
.staffnav {
position: static;
max-height: none;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
gap: var(--space-5);
border-inline-end: 0;
border-bottom: var(--hairline) solid var(--color-border);
}
}
}
@layer components {
@keyframes pulse-dot {
0%, 100% {
box-shadow: var(--shadow-danger-pulse-start);
}
50% {
box-shadow: var(--shadow-danger-pulse-end);
}
}
@keyframes overlay-in {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes stamp-hit {
0% {
opacity: 0;
scale: 2.6;
}
40% {
opacity: 1;
scale: 0.93;
}
65% {
scale: 1.05;
}
100% {
scale: 1;
}
}
@keyframes stamp-settle {
0% {
opacity: 0;
scale: 1.3;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.toast {
position: fixed;
top: var(--space-5);
left: 50%;
transform: translateX(-50%) translateY(calc(var(--space-1) * -1));
background: var(--color-ink);
color: var(--color-surface);
padding: var(--space-2-5) var(--space-6);
border-radius: var(--radius-pill);
font-size: var(--text-medium);
font-weight: 600;
box-shadow: var(--shadow-stack);
opacity: 0;
transition: opacity var(--duration-normal), transform var(--duration-slow) var(--ease-out-overshoot);
pointer-events: none;
z-index: var(--z-flash);
}
}
@layer features {
.landing-page .lp-auth-shell {
block-size: 100dvh;
inline-size: 100%;
display: flex;
flex-direction: column;
background: var(--lp-paper);
overflow: hidden;
}
.landing-page .lp-auth-page {
position: relative;
flex: 1;
min-block-size: 0;
background: var(--lp-paper);
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
}
.landing-page .lp-auth-ribbon {
position: relative;
inline-size: 100%;
block-size: clamp(56px, 9vh, 96px);
pointer-events: none;
flex-shrink: 0;
margin: 0;
}
.landing-page .lp-auth-ribbon svg {
display: block;
inline-size: 100%;
block-size: 100%;
overflow: visible;
}
.landing-page .lp-auth-ribbon .lp-ribbon {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.landing-page .lp-auth-ribbon .lp-r1 { stroke: var(--lp-ribbon-terra); }
.landing-page .lp-auth-ribbon .lp-r2 { stroke: var(--lp-mustard); }
.landing-page .lp-auth-ribbon .lp-r3 { stroke: var(--lp-ribbon-sky); }
.landing-page .lp-auth-ribbon--top svg { transform: translateY(-12%); }
.landing-page .lp-auth-ribbon--bottom svg { transform: translateY(12%) scaleY(-1); }
.landing-page .lp-auth-wrap {
flex: 1;
min-block-size: 0;
inline-size: 100%;
max-inline-size: 460px;
margin: 0 auto;
padding: clamp(12px, 2.5vh, 28px) 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(14px, 2.5vh, 24px);
}
.landing-page .lp-auth-brand {
display: inline-flex;
align-items: center;
color: var(--lp-ink);
}
.landing-page .lp-auth-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.landing-page .lp-auth-hero .lp-eyebrow {
margin-bottom: 0;
}
.landing-page .lp-auth-hero h1 {
font-size: clamp(30px, 4.4vw, 48px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 380;
margin: 0;
}
.landing-page .lp-auth-hero h1 .lp-terra {
font-family: var(--font-serif);
color: var(--lp-terracotta);
font-style: italic;
font-weight: 420;
}
.landing-page .lp-auth-hero .lp-lede {
font-size: var(--lp-fs-md);
line-height: 1.5;
color: var(--lp-ink-soft);
margin: 0;
max-width: 36ch;
text-wrap: balance;
}
.landing-page .lp-auth-phone {
font-family: var(--font-mono);
font-weight: 500;
color: var(--lp-ink);
letter-spacing: 0;
white-space: nowrap;
}
.landing-page .lp-auth-card {
inline-size: 100%;
background: var(--lp-paper-warm);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius-lg);
padding: clamp(20px, 3vw, 28px);
box-shadow: var(--lp-shadow-card);
text-align: start;
}
.landing-page .lp-auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.landing-page .lp-auth-form .field__label {
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-ink-mute);
font-weight: 500;
margin-bottom: 10px;
}
.landing-page .lp-auth-form .field__hint {
color: var(--lp-ink-faint);
font-size: var(--lp-fs-xs);
margin-top: 10px;
line-height: 1.45;
text-align: start;
}
.landing-page .lp-auth-form .input {
background: var(--lp-paper);
border-color: var(--lp-rule);
color: var(--lp-ink);
font-size: 16px;
padding: 12px 14px;
border-radius: var(--lp-radius);
}
.landing-page .lp-auth-form .input:focus {
border-color: var(--lp-ink);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--lp-terracotta) 18%, transparent);
}
.landing-page .lp-auth-form .input::placeholder {
color: var(--lp-ink-faint);
}
.landing-page .lp-auth-form .input.input--code {
font-family: var(--font-mono);
font-size: 28px;
letter-spacing: 0.4em;
text-align: center;
padding: 16px 14px;
background: var(--lp-paper);
}
.landing-page .lp-auth-form .input-group__addon {
background: var(--lp-paper);
border-color: var(--lp-rule);
color: var(--lp-ink-mute);
font-family: var(--font-mono);
font-size: var(--lp-fs-sm);
font-weight: 500;
border-radius: var(--lp-radius) 0 0 var(--lp-radius);
padding-inline: 14px;
}
.landing-page .lp-auth-form .input-group .input {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.landing-page .lp-auth-form .btn {
box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--lp-ink) 50%, transparent);
}
.landing-page .lp-auth-form .flash {
border: 1px solid color-mix(in oklch, var(--lp-terracotta) 30%, var(--lp-rule));
background: color-mix(in oklch, var(--lp-terracotta) 8%, var(--lp-paper));
color: var(--lp-terracotta-d);
border-radius: var(--lp-radius);
padding: 12px 14px;
font-size: var(--lp-fs-sm);
line-height: 1.45;
}
.landing-page .lp-auth-alert {
margin-bottom: 20px;
}
.landing-page .lp-auth-dev-hint {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 16px;
border: 1px dashed color-mix(in oklch, var(--lp-mustard) 50%, var(--lp-rule));
background: color-mix(in oklch, var(--lp-mustard) 20%, var(--lp-paper));
border-radius: var(--lp-radius);
font-size: var(--lp-fs-xs);
color: var(--lp-ink-soft);
line-height: 1.4;
text-align: start;
}
.landing-page .lp-auth-dev-hint__tag {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
background: var(--lp-ink);
color: var(--lp-paper);
}
.landing-page .lp-auth-dev-hint strong {
font-family: var(--font-mono);
font-size: var(--lp-fs-sm);
font-weight: 600;
color: var(--lp-ink);
letter-spacing: 0.1em;
}
.landing-page .lp-auth-row {
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed var(--lp-rule);
display: flex;
justify-content: center;
}
.landing-page .lp-auth-back {
font-family: var(--font-sans);
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
text-decoration: none;
transition: color 120ms ease;
}
.landing-page .lp-auth-back:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-auth-foot {
color: var(--lp-ink-faint);
font-size: var(--lp-fs-xs);
line-height: 1.55;
margin: 0;
max-width: 42ch;
text-wrap: balance;
}
@media (max-width: 480px) {
.landing-page .lp-auth-wrap {
padding: 16px 20px;
}
.landing-page .lp-auth-hero h1 {
font-size: 34px;
}
}
}
@layer components {
.lesson-plan {
overflow: hidden;
}
}
@layer base {
:root {
--lexxy-color-ink: oklch(20% 0 0);
--lexxy-color-ink-medium: oklch(40% 0 0);
--lexxy-color-ink-light: oklch(60% 0 0);
--lexxy-color-ink-lighter: oklch(85% 0 0);
--lexxy-color-ink-lightest: oklch(96% 0 0);
--lexxy-color-ink-inverted: white;
--lexxy-color-accent-dark: oklch(57% 0.19 260);
--lexxy-color-accent-medium: oklch(75% 0.196 258);
--lexxy-color-accent-light: oklch(88% 0.026 254);
--lexxy-color-accent-lightest: oklch(92% 0.026 254);
--lexxy-color-red: oklch(60% 0.15 27);
--lexxy-color-green: oklch(60% 0.15 145);
--lexxy-color-blue: oklch(66% 0.196 258);
--lexxy-color-purple: oklch(60% 0.15 305);
--lexxy-color-code-token-att: #d73a49;
--lexxy-color-code-token-comment: #6a737d;
--lexxy-color-code-token-function: #6f42c1;
--lexxy-color-code-token-operator: #d73a49;
--lexxy-color-code-token-property: #005cc5;
--lexxy-color-code-token-punctuation: #24292e;
--lexxy-color-code-token-selector: #22863a;
--lexxy-color-code-token-variable: #e36209;
--lexxy-color-canvas: var(--lexxy-color-ink-inverted);
--lexxy-color-text: var(--lexxy-color-ink);
--lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
--lexxy-color-link: var(--lexxy-color-accent-dark);
--lexxy-color-selected: var(--lexxy-color-accent-lightest);
--lexxy-color-selected-hover: var(--lexxy-color-accent-light);
--lexxy-color-selected-dark: var(--lexxy-color-blue);
--lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
--lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
--highlight-1: rgb(136, 118, 38);
--highlight-2: rgb(185, 94, 6);
--highlight-3: rgb(207, 0, 0);
--highlight-4: rgb(216, 28, 170);
--highlight-5: rgb(144, 19, 254);
--highlight-6: rgb(5, 98, 185);
--highlight-7: rgb(17, 138, 15);
--highlight-8: rgb(148, 82, 22);
--highlight-9: rgb(102, 102, 102);
--highlight-bg-1: rgba(229, 223, 6, 0.3);
--highlight-bg-2: rgba(255, 185, 87, 0.3);
--highlight-bg-3: rgba(255, 118, 118, 0.3);
--highlight-bg-4: rgba(248, 137, 216, 0.3);
--highlight-bg-5: rgba(190, 165, 255, 0.3);
--highlight-bg-6: rgba(124, 192, 252, 0.3);
--highlight-bg-7: rgba(140, 255, 129, 0.3);
--highlight-bg-8: rgba(221, 170, 123, 0.3);
--highlight-bg-9: rgba(200, 200, 200, 0.3);
--lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
--lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
--lexxy-color-table-cell-selected: var(--lexxy-color-selected);
--lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
--lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
--lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
--lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
--lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
--lexxy-table-cell-add-size: 4px;
--lexxy-font-base: system-ui, sans-serif;
--lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
--lexxy-text-small: 0.875rem;
--lexxy-content-margin: 1rem;
--lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
--lexxy-focus-ring-offset: -2px;
--lexxy-focus-ring-size: 2px;
--lexxy-toolbar-button-size: 2lh;
--lexxy-radius: 0.5ch;
--lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--lexxy-z-popup: 1000;
}
}
@layer base {
:where(.lexxy-content) {
color: var(--lexxy-color-ink);
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
hyphens: auto;
margin-block: 0 var(--lexxy-content-margin);
overflow-wrap: break-word;
@supports (text-wrap: balance) {
text-wrap: balance;
}
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }
p,
ul,
ol,
dl,
blockquote,
figure,
.attachment,
.attachment-gallery {
margin-block: 0 var(--lexxy-content-margin);
position: relative;
&:not(lexxy-editor &) {
overflow-wrap: break-word;
@supports (text-wrap: pretty) {
text-wrap: pretty;
}
}
}
.lexxy-content__italic {
font-style: italic;
}
.lexxy-content__bold {
font-weight: bold;
}
.lexxy-content__strikethrough {
text-decoration: line-through;
}
.lexxy-content__underline {
text-decoration: underline;
}
.lexxy-content__strikethrough.lexxy-content__underline {
text-decoration: line-through underline;
}
mark,
.lexxy-content__highlight {
background-color: transparent;
color: inherit;
}
blockquote {
border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
font-style: italic;
margin: var(--lexxy-content-margin) 0;
padding: 0.5lh 2ch;
p:last-child {
margin-block-end: 0;
}
}
p:empty {
display: none;
}
a {
color: var(--lexxy-color-link);
text-decoration: underline;
}
img,
video,
embed,
object {
inline-size: auto;
margin-inline: auto;
max-block-size: 32rem;
object-fit: contain;
a:has(&) {
display: inline-block;
}
}
code, pre {
background-color: var(--lexxy-color-ink-lightest);
border-radius: var(--lexxy-radius);
color: var(--lexxy-color-ink);
font-family: var(--lexxy-font-mono);
font-size: 0.9em;
padding: 0.25ch 0.5ch;
&:is(pre),
&[data-language] {
border-radius: var(--lexxy-radius);
display: block;
hyphens: none;
margin-block: 0 var(--lexxy-content-margin);
overflow-x: auto;
overflow-wrap: break-word;
padding: 1ch;
tab-size: 2;
white-space: pre;
@supports (text-wrap: nowrap) {
text-wrap: nowrap;
}
}
}
ol, ul:not(.lexxy-prompt-menu) {
margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
padding: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li.lexxy-nested-listitem {
list-style-type: none;
ol, ul {
margin-block-end: 0;
}
}
hr {
border: 0;
border-block-end: 1px solid currentColor;
inline-size: 20%;
margin: calc(0.5em + var(--lexxy-content-margin)) 0;
}
.horizontal-divider {
margin: 0;
padding: calc(0.5em + var(--lexxy-content-margin)) 0;
hr {
margin: 0;
}
}
*:has(+ .horizontal-divider) {
margin-block-end: 0;
}
> :last-child {
margin-block-end: 0;
}
.code-token__attr,
.token.attr-name,
.token.atrule,
.token.attr,
.token.keyword {
color: var(--lexxy-color-code-token-att);
}
.code-token__property,
.token.boolean,
.token.constant,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: var(--lexxy-color-code-token-property);
}
.code-token__selector,
.token.attr-value,
.token.builtin,
.token.char,
.token.inserted,
.token.line,
.token.selector,
.token.string {
color: var(--lexxy-color-code-token-selector);
}
.code-token__comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: var(--lexxy-color-code-token-comment);
font-style: italic;
}
.code-token__operator,
.token.deleted,
.token.entity,
.token.operator,
.token.url,
code[data-language="diff"] .code-token__operator + .code-token__selector {
color: var(--lexxy-color-code-token-operator);
}
.code-token__function,
.token.class,
.token.class-name,
.token.function {
color: var(--lexxy-color-code-token-function);
}
.code-token__variable,
.token.important,
.token.namespace,
.token.regex,
.token.variable {
color: var(--lexxy-color-code-token-variable);
}
.code-token__punctuation,
.token.punctuation {
color: var(--lexxy-color-code-token-punctuation);
}
:where(.lexxy-content__table-wrapper) {
margin: 0;
margin-block: 1ch;
overflow-x: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
inline-size: calc(100% - 0.5ch);
margin: 0.25ch;
th,
td {
border: 1px solid var(--lexxy-color-ink-lighter);
min-width: 5ch;
max-width: 50ch;
padding: 1ch;
text-align: start;
word-break: normal;
*:last-child {
margin-block-end: 0;
}
&.lexxy-content__table-cell--header {
background-color: var(--lexxy-color-table-header-bg);
font-weight: bold;
}
*:is(code, pre) {
hyphens: auto;
white-space: pre-wrap;
@supports (text-wrap: wrap) {
text-wrap: wrap;
}
}
}
}
p:has(.attachment) {
text-align: center;
}
.attachment {
--lexxy-attachment-gap: 0.75ch;
block-size: auto;
box-sizing: border-box;
border-radius: var(--lexxy-radius);
display: block;
inline-size: fit-content;
margin-inline: auto;
max-inline-size: 100%;
min-inline-size: 10ch;
padding: var(--lexxy-attachment-gap);
position: relative;
text-align: center;
}
.attachment__caption {
color: var(--lexxy-color-text-subtle);
display: block;
font-size: var(--lexxy-text-small);
padding: 1ch;
}
.attachment__icon {
aspect-ratio: 4/5;
background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
block-size: 3lh;
border: 1px solid var(--lexxy-attachment-icon-color);
border-block-start-width: 1.5ch;
border-radius: var(--lexxy-radius);
box-sizing: border-box;
color: var(--lexxy-attachment-icon-color);
display: grid;
font-size: var(--lexxy-text-small);
font-weight: bold;
inline-size: auto;
overflow: hidden;
place-content: center;
text-transform: uppercase;
white-space: nowrap;
}
.attachment--preview {
img, video {
border-radius: var(--lexxy-radius);
block-size: auto;
display: block;
margin-inline: auto;
max-inline-size: 100%;
-webkit-user-select: none;
@supports (user-select: none) {
user-select: none;
}
}
> a {
display: block;
}
.attachment__caption {
padding-block-end: 0.5ch;
}
}
.attachment--file {
--lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
align-items: center;
display: flex;
flex-wrap: wrap;
inline-size: auto;
.attachment__caption {
display: grid;
flex: 1;
text-align: start;
}
.attachment__name {
color: var(--lexxy-color-ink);
font-weight: bold;
}
}
.attachment--psd,
.attachment--key,
.attachment--sketch,
.attachment--ai,
.attachment--eps,
.attachment--indd,
.attachment--svg,
.attachment--ppt,
.attachment--pptx {
--lexxy-attachment-icon-color: var(--lexxy-color-red);
}
.attachment--css,
.attachment--php,
.attachment--json,
.attachment--htm,
.attachment--html,
.attachment--rb,
.attachment--erb,
.attachment--ts,
.attachment--js {
--lexxy-attachment-icon-color: var(--lexxy-color-purple);
}
.attachment--txt,
.attachment--pages,
.attachment--rtf,
.attachment--md,
.attachment--doc,
.attachment--docx {
--lexxy-attachment-icon-color: var(--lexxy-color-blue);
}
.attachment--csv,
.attachment--numbers,
.attachment--xls,
.attachment--xlsx {
--lexxy-attachment-icon-color: var(--lexxy-color-green);
}
.attachment--error {
padding-block: 2ch;
}
.attachment-gallery {
display: block;
text-align: center;
.attachment {
display: inline-flex;
flex-direction: column;
gap: 0;
inline-size: calc(33.333% - 0.8ch);
vertical-align: top;
.attachment__caption {
padding-block-end: 1ch;
}
}
&.attachment-gallery--2,
&.attachment-gallery--4 {
.attachment {
inline-size: calc(50% - 0.8ch);
}
}
}
action-text-attachment[content-type^="application/vnd.actiontext"] {
--lexxy-attachment-bg-color: transparent;
--lexxy-attachment-image-size: 1em;
--lexxy-attachment-text-color: currentColor;
align-items: center;
background: var(--lexxy-attachment-bg-color);
border-radius: var(--lexxy-radius);
color: var(--lexxy-attachment-text-color);
display: inline-flex;
gap: 0.25ch;
margin: 0;
padding: 0;
position: relative;
white-space: normal;
img {
block-size: var(--lexxy-attachment-image-size);
border-radius: 50%;
inline-size: var(--lexxy-attachment-image-size);
}
}
.horizontal-divider {
margin: 0;
margin-block-end: .5em;
padding: 1.5em 0 .5em;
hr {
border: 0;
border-block-end: 1px solid currentColor;
inline-size: 20%;
margin: 0;
}
}
}
}
@layer base {
:where(lexxy-editor) {
--lexxy-editor-padding: 1ch;
--lexxy-editor-rows: 8lh;
@supports (min-block-size: attr(rows lh)) {
--lexxy-editor-rows: attr(rows lh, 8lh);
}
--lexxy-toolbar-gap: 2px;
--lexxy-toolbar-spacing: 0.5ch;
--lexxy-toolbar-padding: 2px;
--lexxy-toolbar-border-size: 1px;
--lexxy-toolbar-height: calc(var(--lexxy-toolbar-button-size) + 2 * var(--lexxy-toolbar-padding) + var(--lexxy-toolbar-border-size));
border: 1px solid var(--lexxy-color-ink-lighter);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
background-color: var(--lexxy-color-canvas);
container-type: inline-size;
display: block;
overflow: visible;
position: relative;
transition: opacity 150ms;
p.provisional-paragraph {
display: block;
&.hidden {
block-size: 0.5ch;
margin: 0;
}
}
input,
button,
summary {
&:focus-visible {
outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
outline-offset: var(--lexxy-focus-ring-offset);
}
}
summary {
list-style: none;
&::-webkit-details-marker {
display: none;
}
}
button,
summary {
-webkit-appearance: none;
appearance: none;
background: var(--lexxy-color-canvas);
border: none;
border-radius: var(--lexxy-radius);
cursor: pointer;
line-height: normal;
font-size: inherit;
inline-size: auto;
padding: 0;
@media(any-hover: hover) {
&:hover:not([aria-disabled="true"]) {
background: var(--lexxy-color-ink-lightest);
}
}
}
.node--selected {
outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
outline-offset: var(--lexxy-focus-ring-offset);
}
&[data-links-openable] a {
cursor: pointer;
}
table {
th, td {
position: relative;
transition: all 0.1s ease-in-out;
&:after {
box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
content: "";
display: block;
inset-block-start: -1px;
inset-block-end: -1px;
inset-inline-start: -1px;
inset-inline-end: -1px;
pointer-events: none;
position: absolute;
transition: box-shadow 0.1s ease-in-out;
z-index: 2;
}
&.lexxy-content__table-cell--selected {
background-color: var(--lexxy-color-table-cell-selected-bg);
}
&.lexxy-content__table-cell--focus {
&:after {
box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
}
}
&.lexxy-content__table-cell--highlight {
&[data-action="insert"] {
&[data-child-type="row"] {
&[data-direction="after"] {
&:after {
box-shadow:
0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),
0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
}
}
&[data-direction="before"] {
&:after {
box-shadow:
0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),
0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
}
}
}
&[data-child-type="column"] {
&[data-direction="after"] {
&:after {
box-shadow:
var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),
calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
}
}
&[data-direction="before"] {
&:after {
box-shadow:
calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),
var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
}
}
}
}
&[data-action="delete"] {
background-color: var(--lexxy-color-table-cell-remove);
color: var(--lexxy-color-red);
&:after { box-shadow: 0 0 0 0 transparent; }
}
&[data-action="toggle"] {
background-color: var(--lexxy-color-table-cell-toggle);
&:after { box-shadow: 0 0 0 0 transparent; }
}
}
}
tr.lexxy-content__table-cell--highlight[data-action="delete"] {
th, td {
background-color: var(--lexxy-color-table-cell-remove);
color: var(--lexxy-color-red);
&:after { box-shadow: 0 0 0 0 transparent; }
}
}
&.lexxy-content__table--selection {
::selection {
background: transparent;
}
}
}
&:has(.lexxy-content__table-cell--selected) {
lexxy-table-tools {
visibility: hidden;
}
}
[data-lexical-linebreak] {
block-size: 0;
display: contents;
inline-size: 0;
}
action-text-attachment {
cursor: pointer;
}
.attachment {
background-color: var(--lexxy-color-canvas);
progress {
max-inline-size: 10ch;
margin: auto;
}
&.attachment--preview {
progress {
inset-block-start: 2ch;
inset-inline-start: 0;
inset-inline-end: 0;
position: absolute;
}
lexxy-node-delete-button {
inset-block-start: 1.5ch;
inset-inline-end: 1.5ch;
inset-inline-start: unset;
}
}
&.attachment--error {
background: color-mix(var(--lexxy-color-red) 10%, transparent);
padding: 2ch;
&:before {
align-items: center;
aspect-ratio: 1;
background: var(--lexxy-color-red);
block-size: 1.5lh;
border-radius: 50%;
color: white;
content: "!";
display: flex;
justify-content: center;
margin: auto;
}
> div {
flex: 1;
font-size: 0.85em;
padding: 1ch;
text-align: start;
}
}
}
.attachment[draggable] {
cursor: grab;
}
.attachment.lexxy-dragging {
opacity: 0.4;
}
[data-lexxy-decorator][draggable] {
cursor: grab;
}
[data-lexxy-decorator].lexxy-dragging {
opacity: 0.4;
}
.lexxy-drop-caret {
background-color: var(--lexxy-focus-ring-color);
border-radius: 1px;
inline-size: 2px;
pointer-events: none;
position: fixed;
}
[class*="lexxy-drop-target--"] {
position: relative;
}
.lexxy-drop-target--block-before::before,
.lexxy-drop-target--block-after::after,
.lexxy-drop-target--list-before::before,
.lexxy-drop-target--list-after::after {
background-color: var(--lexxy-focus-ring-color);
block-size: 3px;
border-radius: 1px;
content: "";
inset-inline: 0;
pointer-events: none;
position: absolute;
transform: translate(0, 0.5ch);
}
.lexxy-drop-target--block-before::before,
.lexxy-drop-target--list-before::before {
transform: translate(0, -0.5ch);
}
.lexxy-drop-target--block-before::before,
.lexxy-drop-target--list-before::before {
inset-block-start: -2px;
}
.lexxy-drop-target--block-after::after,
.lexxy-drop-target--list-after::after {
inset-block-end: -2px;
}
.lexxy-drop-target--gallery-before::before,
.lexxy-drop-target--gallery-after::after {
background-color: var(--lexxy-focus-ring-color);
border-radius: 1px;
content: "";
inset-block: 0;
inline-size: 3px;
pointer-events: none;
position: absolute;
}
.lexxy-drop-target--gallery-before::before {
inset-inline-start: -4px;
}
.lexxy-drop-target--gallery-after::after {
inset-inline-end: -4px;
}
.attachment:hover:not(.node--selected) {
outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
outline-offset: var(--lexxy-focus-ring-offset);
}
.attachment--file {
lexxy-node-delete-button {
inset-block-start: 50%;
inset-inline-end: 1ch;
inset-inline-start: unset;
transform: translate(0, -50%);
}
}
.attachment-gallery {
--lexxy-attachment-gallery-columns: 3;
--lexxy-attachment-gallery-gap: 0.4ch;
--lexxy-focus-ring-offset: -6px;
padding: 0;
.attachment {
background: transparent;
box-sizing: border-box;
margin: var(--lexxy-attachment-gallery-gap);
padding: 0;
padding-block-end: var(--lexxy-attachment-gap);
vertical-align: top;
img {
box-sizing: border-box;
padding: 1ch;
padding-block-end: 0;
}
&.attachment--error {
background: color-mix(var(--lexxy-color-red) 10%, transparent);
padding: 2ch;
> div {
text-align: center;
}
}
}
}
.attachment__caption {
textarea {
background: transparent;
block-size: fit-content;
border: 0;
border-radius: var(--lexxy-radius);
box-sizing: border-box;
color: inherit;
display: block;
font-size: inherit;
font-family: inherit;
inline-size: 100%;
max-inline-size: 100%;
padding: 0;
text-align: center;
@supports (resize: none) {
resize: none;
}
&:focus {
background: var(--lexxy-color-canvas);
outline: 0;
}
&:placeholder-shown {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@supports (field-sizing: content) {
field-sizing: content;
inline-size: 100%;
}
}
}
}
:where(lexxy-editor:not(:defined)) {
min-block-size: calc(var(--lexxy-toolbar-height) + var(--lexxy-editor-rows) + 2 * var(--lexxy-editor-padding));
}
:where(.lexxy-editor--empty) {
.lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
content: attr(placeholder);
color: currentColor;
cursor: text;
opacity: 0.66;
pointer-events: none;
position: absolute;
white-space: pre-line;
}
}
:where(.lexxy-editor__content) {
min-block-size: var(--lexxy-editor-rows);
outline: 0;
padding: var(--lexxy-editor-padding);
contain: layout style;
}
:where(.lexxy-editor--drag-over) {
background-color: var(--lexxy-color-selected);
border-radius: var(--lexxy-radius);
outline: 2px dashed var(--lexxy-color-selected-dark);
}
:where([data-lexical-cursor]) {
animation: blink 1s infinite;
block-size: 1lh;
border-inline-start: 1.5px solid currentColor;
line-height: inherit;
margin-block: 0 var(--lexxy-content-margin);
}
@keyframes blink {
0% { opacity: 1; }
60% { opacity: 1; }
100% { opacity: 0;}
}
:where(lexxy-toolbar) {
--lexxy-toolbar-icon-size: 1.125em;
border-block-end: var(--lexxy-toolbar-border-size) solid var(--lexxy-color-ink-lighter);
color: currentColor;
display: flex;
font-size: inherit;
gap: var(--lexxy-toolbar-gap);
max-inline-size: 100%;
padding: var(--lexxy-toolbar-padding);
position: relative;
@container (width < 300px) {
font-size: 0.8em;
}
&[data-attachments="false"] button[name="image"],
&[data-attachments="false"] button[name="file"] {
display: none;
}
&[data-upload="file"] button[name="image"] {
display: none;
}
&[data-upload="image"] button[name="file"] {
display: none;
}
.lexxy-editor__toolbar-button {
aspect-ratio: 1;
block-size: var(--lexxy-toolbar-button-size);
border: 0;
border-radius: var(--lexxy-radius);
color: currentColor;
display: grid;
line-height: inherit;
place-items: center;
&:is(:active):not([aria-disabled="true"]),
&[aria-pressed="true"] {
background-color: var(--lexxy-color-selected);
&:hover {
background-color: var(--lexxy-color-selected-hover);
}
}
&[aria-disabled="true"] {
cursor: default;
opacity: 0.3;
}
svg {
-webkit-touch-callout: none;
block-size: var(--lexxy-toolbar-icon-size);
fill: currentColor;
grid-area: 1/1;
inline-size: var(--lexxy-toolbar-icon-size);
-webkit-user-select: none;
@supports (user-select: none) {
user-select: none;
}
}
&.lexxy-editor__toolbar-group-end {
position: relative;
margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);
&:after {
background-color: var(--lexxy-color-ink-lighter);
block-size: var(--lexxy-toolbar-icon-size);
content: "";
display: block;
inline-size: 1px;
inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
inset-block: 0;
margin: auto;
pointer-events: none;
position: absolute;
}
}
}
.lexxy-editor__toolbar-button--push-right {
margin-inline-start: auto;
}
}
:where(.lexxy-editor__toolbar-dropdown) {
-webkit-user-select: none;
@supports (user-select: none) {
user-select: none;
}
.lexxy-editor__toolbar-button {
color: currentColor;
&:hover {
opacity: 0.8;
}
&.lexxy-editor__toolbar-button--chevron {
aspect-ratio: unset;
gap: 0.5ch;
grid-template-columns: 2fr 1fr;
min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
padding-inline: 0.75ch;
&:after {
block-size: 0.3ch;
border-block-end: 2px solid currentColor;
border-inline-end: 2px solid currentColor;
content: "";
display: inline-block;
inline-size: 0.3ch;
transform: rotate(45deg);
}
}
}
> .lexxy-editor__toolbar-button[aria-expanded="true"] {
background-color: var(--lexxy-color-selected-hover);
border-end-end-radius: 0;
border-end-start-radius: 0;
&:hover {
background-color: var(--lexxy-color-selected-hover);
}
}
[data-dropdown-panel] {
background-color: var(--lexxy-color-canvas);
border: 2px solid var(--lexxy-color-selected-hover);
border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
box-sizing: border-box;
box-shadow: var(--lexxy-shadow);
color: var(--lexxy-color-text);
display: flex;
gap: var(--lexxy-toolbar-gap);
margin: 0;
padding: var(--lexxy-toolbar-spacing);
position: absolute;
z-index: 3;
&[hidden],
[overflowing] &[hidden] {
display: none;
}
}
.lexxy-editor__toolbar-dropdown-list {
border-start-start-radius: 0;
flex-direction: column;
padding: 0.1ch;
button {
align-items: center;
color: var(--lexxy-color-text);
display: flex;
flex-direction: row;
gap: 1ch;
padding: 1ch;
position: relative;
&[aria-pressed="true"] {
background-color: var(--lexxy-color-selected);
&:hover {
background-color: var(--lexxy-color-selected-hover);
}
}
span {
font-size: var(--lexxy-text-small);
}
svg {
block-size: 1lh;
fill: currentColor;
inline-size: 1lh;
}
}
.lexxy-editor__toolbar-separator {
background: var(--lexxy-color-ink-lighter);
block-size: 1px;
inline-size: 100%;
}
[overflowing] & {
display: grid;
grid-template-columns: repeat(4, 1fr);
button span { display: none; }
.lexxy-editor__toolbar-separator {
grid-column: 1 / -1;
}
}
}
&.lexxy-editor__toolbar-overflow {
display: none;
justify-self: flex-end;
z-index: 1;
[data-dropdown-panel] {
border-start-end-radius: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
inset-inline-end: var(--lexxy-toolbar-gap);
}
}
&.lexxy-editor__toolbar-dropdown--link {
[data-dropdown-panel] {
font-size: var(--lexxy-text-small);
gap: var(--lexxy-toolbar-spacing);
inset-inline-start: var(--lexxy-toolbar-spacing);
inset-inline-end: var(--lexxy-toolbar-spacing);
[overflowing] & {
flex-wrap: wrap;
}
.lexxy-editor__toolbar-dropdown-actions {
display: flex;
flex: 1;
gap: var(--lexxy-toolbar-spacing);
}
input[type="url"] {
background-color: var(--lexxy-color-canvas);
border: 1px solid var(--lexxy-color-ink-lighter);
border-radius: var(--lexxy-radius);
color: var(--lexxy-color-text);
block-size: var(--lexxy-toolbar-button-size);
box-sizing: border-box;
font-size: var(--lexxy-text-small);
flex: 2;
inline-size: 100%;
line-height: inherit;
padding-block: 0;
padding-inline: 1ch;
[overflowing] & {
min-inline-size: 100%;
}
}
button {
background-color: var(--lexxy-color-ink-lightest);
inline-size: 100%;
padding-inline: 2ch;
}
button[value="link"] {
background-color: var(--lexxy-color-accent-dark);
color: var(--lexxy-color-ink-inverted);
&:hover {
background-color: var(--lexxy-color-accent-medium);
}
}
}
}
&.lexxy-editor__toolbar-dropdown--highlight {
position: relative;
[overflowing] & {
position: static;
}
[data-dropdown-panel] {
--max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
border-start-start-radius: 0;
gap: var(--lexxy-toolbar-spacing);
flex-direction: column;
font-size: var(--lexxy-text-small);
inset-inline-start: 0;
max-inline-size: var(--max-inline-size);
[overflowing] & {
border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
inset-inline-end: var(--lexxy-toolbar-spacing);
inset-inline-start: var(--lexxy-toolbar-spacing);
}
button {
position: relative;
}
.lexxy-highlight-colors {
display: grid;
gap: var(--lexxy-toolbar-gap);
grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
max-inline-size: var(--max-inline-size);
button {
block-size: unset;
inline-size: 100%;
&:after {
align-items: center;
content: "Aa";
display: flex;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
inset: 0;
justify-content: center;
position: absolute;
}
&[aria-pressed="true"] {
background-color: transparent;
box-shadow: 0 0 0 2px currentColor inset;
&:after {
content: "✓";
}
}
}
}
.lexxy-editor__toolbar-dropdown-reset {
background-color: var(--lexxy-color-ink-lightest);
&:is([disabled]) {
display: none;
}
}
}
}
}
:where(.lexxy-floating-controls) {
--button-size: 2.3lh;
--floating-tools-radius: calc(var(--lexxy-radius) * 1.5);
color: var(--lexxy-color-ink-inverted);
font-size: var(--lexxy-text-small);
line-height: 1;
position: absolute;
z-index: 2;
button,
summary {
align-items: center;
background: transparent;
block-size: var(--button-size);
color: var(--lexxy-color-ink-inverted);
display: flex;
justify-content: center;
line-height: inherit;
min-block-size: var(--button-size);
min-inline-size: var(--button-size);
-webkit-user-select: none;
@supports (user-select: none) {
user-select: none;
}
@media(any-hover: hover) {
&:hover:not([aria-disabled="true"]),
[open] &:is(summary) {
background: var(--lexxy-color-ink-medium);
svg {
opacity: 1;
}
}
&:focus-visible {
outline-color: var(--lexxy-focus-ring-color);
}
}
}
button {
aspect-ratio: 1 / 1;
font-weight: bold;
svg {
block-size: 1.125em;
inline-size: 1.125em;
fill: currentColor;
opacity: 0.8;
padding: 1px;
}
span {
display: none;
}
}
summary {
box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
padding: 0 1.25ch;
}
.lexxy-floating-controls__group {
background-color: var(--lexxy-color-ink);
border-radius: var(--floating-tools-radius);
padding: 0.25ch;
}
&:is(lexxy-table-tools) {
flex-direction: row;
gap: 0.25ch;
inset-inline-start: var(--lexxy-editor-padding);
transform: translate(-50%, -120%);
.lexxy-table-control {
align-items: stretch;
display: flex;
flex-direction: row;
gap: 0.25ch;
white-space: nowrap;
.lexxy-table-control__more-menu {
gap: 0;
position: relative;
.lexxy-table-control__more-menu-details {
background: var(--lexxy-color-ink);
border-radius: var(--floating-tools-radius);
display: flex;
flex-direction: column;
gap: 0.25ch;
inset-block-start: 110%;
inset-inline-start: 50%;
padding: 0.25ch;
position: absolute;
transform: translateX(-50%);
button {
aspect-ratio: unset;
flex-direction: row;
font-weight: normal;
gap: 1ch;
justify-content: flex-start;
padding: 0.75ch;
padding-inline-end: 1.5ch;
white-space: nowrap;
span {
display: inline-block;
}
svg {
block-size: 1.3lh;
inline-size: 1.3lh;
fill: currentColor;
}
}
}
}
.lexxy-table-control__button--delete-table {
align-items: center;
block-size: auto;
font-weight: normal;
justify-content: center;
svg {
block-size: 1.125em;
inline-size: 1.125em;
min-block-size: 1.125em;
min-inline-size: 1.125em;
}
span {
align-items: center;
background: var(--lexxy-color-ink);
border-radius: var(--floating-tools-radius);
color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
display: flex;
inset-inline-end: calc(var(--button-size) + 1ch);
inset-block-start: 0;
inset-block-end: 0;
inset-inline-start: 0;
justify-content: center;
padding: 0.5ch 1ch;
position: absolute;
transition: all 0.2s ease-out;
opacity: 0;
pointer-events: none;
white-space: nowrap;
}
&:hover {
background-color: var(--lexxy-color-red);
svg { color: var(--lexxy-color-ink-inverted); }
span {
opacity: 1;
}
}
}
}
}
&:is(lexxy-node-delete-button) {
inset-block-start: 0;
inset-inline-start: 100%;
opacity: 0;
pointer-events: none;
.node--selected & {
opacity: 1;
pointer-events: auto;
}
.lexxy-node-delete:hover {
background-color: var(--lexxy-color-red);
}
}
&:is(lexxy-code-language-picker) {
inset-inline-end: var(--lexxy-editor-padding);
select {
-webkit-appearance: none;
appearance: none;
background-color: var(--lexxy-color-canvas);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
background-position: center right 1ch;
background-repeat: no-repeat;
background-size: 1ch;
block-size: 1.5lh;
border: 1px solid var(--lexxy-color-ink-lighter);
border-radius: var(--lexxy-radius);
color: var(--lexxy-color-ink);
font-family: var(--lexxy-font-base);
font-size: var(--lexxy-text-small);
font-weight: normal;
margin: 0.5ch 0.5ch 0 -0.5ch;
padding: 0 2ch 0 1ch;
text-align: start;
@media (prefers-color-scheme: dark) {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
}
}
}
}
:where(.lexxy-prompt-menu) {
--lexxy-prompt-avatar-size: 24px;
--lexxy-prompt-padding: 0.5ch;
--lexxy-prompt-offset-x: 0;
--lexxy-prompt-offset-y: 0;
background-color: var(--lexxy-color-canvas);
border-radius: calc(var(--lexxy-prompt-padding) * 2);
box-shadow: var(--lexxy-shadow);
color: var(--lexxy-color-ink);
font-family: var(--lexxy-font-base);
font-size: var(--lexxy-text-small);
list-style: none;
inset-block-start: var(--lexxy-prompt-offset-y);
inset-inline-start: var(--lexxy-prompt-offset-x);
margin: 0;
max-block-size: 200px;
max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
min-inline-size: 20ch;
overflow: auto;
padding: var(--lexxy-prompt-padding);
position: absolute;
visibility: hidden;
z-index: var(--lexxy-z-popup);
&[data-clipped-at-right] {
inset-inline-start: unset;
inset-inline-end: 1ch;
max-inline-size: calc(100% - 1ch);
}
&[data-clipped-at-bottom] {
inset-block-start: unset;
inset-block-end: var(--lexxy-prompt-offset-y);
}
}
:where(.lexxy-prompt-menu--visible[data-anchored]) {
visibility: initial;
}
:where(.lexxy-prompt-menu__item) {
align-items: center;
border-radius: var(--lexxy-radius);
cursor: pointer;
display: flex;
gap: var(--lexxy-prompt-padding);
padding: var(--lexxy-prompt-padding);
&:hover {
background-color: var(--lexxy-color-ink-lightest);
}
&[aria-selected] {
background-color: var(--lexxy-color-selected);
}
img {
block-size: var(--lexxy-prompt-avatar-size);
border-radius: 50%;
flex-shrink: 0;
inline-size: var(--lexxy-prompt-avatar-size);
margin: 0;
}
+ & {
margin-top: 2px;
}
}
:where(.lexxy-prompt-menu__item--empty) {
color: var(--lexxy-color-ink-medium);
padding: var(--lexxy-prompt-padding);
}
action-text-attachment[content-type^="application/vnd.actiontext"] {
&.node--selected {
--lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
--lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
outline: none;
}
lexxy-node-delete-button {
inset-inline-start: 0;
line-height: 1lh;
.lexxy-floating-controls__group {
--button-size: 1lh;
background-color: var(--lexxy-color-accent-dark);
padding: 0;
button {
border-radius: 50%;
}
}
}
}
}
:root {
--lexxy-color-ink: var(--color-ink);
--lexxy-color-ink-medium: var(--color-ink-muted);
--lexxy-color-ink-light: var(--color-ink-subtle);
--lexxy-color-ink-lighter: var(--color-border);
--lexxy-color-ink-lightest: var(--color-border);
--lexxy-color-ink-inverted: var(--color-surface);
--lexxy-color-canvas: var(--color-surface);
--lexxy-color-accent-dark: var(--color-ink);
--lexxy-color-accent-medium: var(--color-ink-muted);
--lexxy-color-accent-light: var(--color-ink-subtle);
--lexxy-color-accent-lightest: var(--color-border);
--lexxy-color-red: var(--color-danger);
--lexxy-color-green: var(--color-positive);
--lexxy-color-blue: var(--color-accent);
--lexxy-color-purple: var(--color-purple);
--highlight-1: var(--color-warning);
--highlight-2: var(--color-accent);
--highlight-3: var(--color-danger);
--highlight-4: var(--color-purple);
--highlight-5: var(--color-info);
--highlight-6: var(--color-positive);
--highlight-7: var(--color-ink-muted);
--highlight-8: var(--color-ink-subtle);
--highlight-9: var(--color-ink);
--lexxy-color-selected: var(--color-accent-soft);
--lexxy-color-selected-dark: var(--color-accent);
--lexxy-color-table-cell-border: var(--color-border);
--lexxy-color-table-cell-selected-bg: var(--color-accent-soft);
--lexxy-color-table-cell-toggle: var(--color-accent-soft);
--lexxy-color-table-cell-remove: var(--color-danger-alpha);
--lexxy-focus-ring-offset: var(--rule-width);
}
@layer components {
lexxy-editor {
--lexxy-border-color: var(--color-border-strong);
--lexxy-editor-padding: 0;
--lexxy-toolbar-button-size: var(--space-8);
background-color: var(--color-surface);
border: var(--hairline) solid var(--color-border);
border-radius: var(--radius-small);
}
lexxy-toolbar {
border-color: var(--color-border);
gap: 0;
& svg {
fill: currentColor;
}
}
.lexxy-editor__toolbar-button {
background: transparent;
&[aria-pressed="true"],
[open] > & {
background-color: var(--color-accent-soft);
}
@media (any-hover: hover) {
&:hover:not([aria-pressed="true"]) {
background-color: color-mix(in oklch, var(--color-ink) 10%, transparent);
}
}
}
.lexxy-editor__content {
margin-block-start: var(--flow-space);
}
.lexxy-content {
--lexxy-content-margin: var(--flow-space);
color: currentColor;
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
letter-spacing: var(--letter-topbar);
line-height: var(--line-compact);
overflow-wrap: break-word;
text-wrap: balance;
}
p:has(+ p) {
margin: 0;
}
ol, ul {
padding-inline-start: var(--space-4);
}
blockquote {
border-inline-start: var(--progress-thin) solid var(--color-border);
padding-block: 0;
}
code {
background: var(--color-canvas);
border: var(--hairline) solid var(--color-border);
}
hr {
border: 0;
border-block-end: var(--rule-width) solid currentColor;
color: currentColor;
inline-size: var(--pct-20);
margin: calc(var(--lexxy-content-margin) * 2) 0;
}
table {
th, td {
padding-block: var(--space-3);
}
}
}
}
@layer components {
.attachment {
display: inline-block;
position: relative;
max-width: 100%;
}
.attachment__caption {
text-align: center;
}
.attachment--preview {
width: 100%;
text-align: center;
& .attachment__caption {
color: var(--color-ink-muted);
font-size: var(--text-medium);
line-height: var(--line-snug);
}
}
.attachment-gallery {
display: flex;
flex-wrap: wrap;
position: relative;
& > action-text-attachment,
& > .attachment {
flex: 1 0 33%;
padding: 0 var(--space-2);
max-width: var(--attachment-gallery-item-width);
}
&.attachment-gallery--2,
&.attachment-gallery--4 {
& > action-text-attachment,
& > .attachment {
flex-basis: 50%;
max-width: 50%;
}
}
}
action-text-attachment .attachment {
padding: 0 !important;
max-width: 100% !important;
}
}
.lesson-plan p {
font-size: 11pt;
line-height: var(--line-loose);
color: var(--color-ink);
margin: 0 0 var(--space-4);
}
.lesson-plan strong {
font-weight: 700;
color: var(--color-ink);
}
.lesson-plan em {
font-style: italic;
}
.lesson-plan mark {
background: transparent;
font-weight: 600;
}
.lesson-plan { counter-reset: section; }
.lesson-plan h2 {
display: flex;
align-items: baseline;
gap: var(--space-3-5);
margin: var(--space-7) 0 var(--space-3-5);
font-size: 14.5pt;
font-weight: 700;
letter-spacing: var(--letter-snug);
color: var(--color-ink);
counter-increment: section;
page-break-after: avoid;
break-after: avoid;
}
.lesson-plan h2::before {
content: counter(section, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 9pt;
font-weight: 700;
color: var(--color-accent-ink);
background: var(--color-accent-soft);
padding: var(--space-1) var(--space-2-5);
border-radius: var(--radius-pill);
letter-spacing: var(--letter-wide);
flex-shrink: 0;
align-self: center;
}
.lesson-plan h2::after {
content: '';
flex: 1;
border-bottom: var(--hairline) dotted var(--color-line-muted);
margin-bottom: 0.35em;
}
.lesson-plan h3 {
font-size: 12pt;
font-weight: 800;
color: var(--color-ink);
margin: var(--space-5) 0 var(--space-2);
page-break-after: avoid;
break-after: avoid;
}
.lesson-plan h4 {
font-size: var(--text-extra-small);
font-weight: 800;
color: var(--color-accent-ink);
text-transform: uppercase;
letter-spacing: var(--letter-wide);
margin: var(--space-4) 0 var(--space-1);
page-break-after: avoid;
break-after: avoid;
}
.lesson-plan ol,
.lesson-plan ul {
margin: var(--space-3) 0 var(--space-4);
padding-inline-start: var(--space-5);
}
.lesson-plan li {
margin-bottom: var(--space-2);
font-size: var(--print-type, 11pt);
line-height: var(--line-readable);
color: var(--color-ink);
}
.lesson-plan li > p {
margin: 0 0 var(--space-1);
}
.lesson-plan ol > li:has(> ul) {
display: block;
padding-block: var(--space-2);
padding-inline: var(--space-3) 0;
border-inline-start: 2pt solid var(--color-accent);
margin-inline-start: calc(-1 * var(--space-5));
list-style-position: inside;
page-break-inside: avoid;
break-inside: avoid;
}
.lesson-plan ol > li:has(> ul) > strong:first-child {
display: inline-block;
color: var(--color-ink);
font-size: 11.5pt;
margin-inline-end: var(--space-1);
}
.lesson-plan ol > li > ul {
margin: var(--space-2) 0 0;
padding-inline-start: var(--space-4);
list-style: none;
}
.lesson-plan ol > li > ul > li {
position: relative;
padding-inline-start: var(--space-3);
font-size: var(--print-type, var(--text-medium));
line-height: var(--line-readable);
color: var(--color-ink-muted);
}
.lesson-plan ol > li > ul > li::before {
content: '·';
position: absolute;
inset-inline-start: 0;
color: var(--color-accent-ink);
font-weight: 800;
}
.student-handout__content ol > li:has(> ul) {
border-inline-start: none;
margin-inline-start: 0;
padding-block: 0;
padding-inline: var(--space-6) 0;
}
.student-handout__content ol > li > ul { padding-inline-start: 0; }
.student-handout__content ol > li > ul > li { padding-inline-start: 0; }
.student-handout__content ol > li > ul > li::before { content: none; }
.lesson-plan ol > li > ul > li > strong {
color: var(--color-accent-ink);
text-transform: uppercase;
font-size: var(--text-extra-small);
letter-spacing: var(--letter-wide);
font-weight: 700;
margin-inline-end: var(--space-1);
}
.lesson-plan blockquote {
margin: var(--space-4) 0;
padding-block: 0;
padding-inline: var(--space-4) 0;
border-inline-start: 3pt solid var(--color-accent);
page-break-inside: avoid;
break-inside: avoid;
color: var(--color-ink);
}
.lesson-plan blockquote > p {
font-size: var(--text-medium);
line-height: var(--line-readable);
margin: 0 0 var(--space-1);
}
.lesson-plan blockquote > p:first-child > strong:first-child {
display: block;
font-size: var(--text-micro);
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--letter-widest);
color: var(--color-accent-ink);
margin: 0 0 var(--space-1);
}
.lesson-plan blockquote > p + p {
margin-top: var(--space-2);
}
.lesson-plan blockquote > p > em:only-child {
font-family: var(--font-serif);
font-style: normal;
font-size: var(--text-base);
color: var(--color-ink);
}
.lesson-plan pre {
font-family: var(--font-mono);
font-size: 10pt;
line-height: var(--line-relaxed, var(--line-readable));
color: var(--color-ink);
background: color-mix(in oklch, var(--color-accent) 5%, var(--color-surface));
border: var(--hairline) solid var(--color-border);
border-inline-start: 3pt solid var(--color-accent);
border-radius: var(--radius-card);
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0;
white-space: pre-wrap;
page-break-inside: avoid;
break-inside: avoid;
}
.lesson-plan pre > code {
background: transparent;
border: none;
padding: 0;
font-family: inherit;
}
.lesson-plan code {
font-family: var(--font-mono);
font-size: 0.9em;
background: color-mix(in oklch, var(--color-accent-soft) 50%, transparent);
padding: 1pt 4pt;
border-radius: 3pt;
}
.lesson-plan table {
width: 100%;
border-collapse: collapse;
margin: var(--space-4) 0;
font-size: var(--text-medium);
line-height: var(--line-readable);
page-break-inside: avoid;
break-inside: avoid;
}
.lesson-plan table th {
font-size: var(--text-extra-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--letter-wide);
color: var(--color-ink);
text-align: start;
padding: var(--space-2) var(--space-3);
background: var(--color-accent-soft);
border-bottom: 2pt solid var(--color-border-strong);
}
.lesson-plan table td {
padding: var(--space-2-5) var(--space-3);
text-align: start;
vertical-align: top;
color: var(--color-ink);
border-bottom: var(--hairline) solid var(--color-border);
}
.lesson-plan table.exam-matrix { font-size: var(--text-small); }
.lesson-plan table.exam-matrix th,
.lesson-plan table.exam-matrix td { padding: var(--space-2) var(--space-2); hyphens: auto; }
.lesson-plan table:not([class*="exercise-"]) tr:last-child td {
border-bottom: none;
}
.lesson-plan table tbody td:first-child {
font-weight: 600;
}
.lesson-plan hr {
border: none;
text-align: center;
margin: var(--space-7) 0;
color: var(--color-line-muted);
font-size: 10pt;
letter-spacing: var(--letter-widest);
}
.lesson-plan hr::before {
content: '• • •';
}
.lesson-plan a {
color: var(--color-accent-ink);
text-decoration: underline;
text-decoration-thickness: 0.5pt;
text-underline-offset: 2pt;
}
.lesson-plan figure,
.lesson-plan img {
display: block;
max-width: 100%;
height: auto;
margin: var(--space-4) auto;
border-radius: 6pt;
}
.content-block-intro {
margin: var(--space-10) 0 var(--space-3);
page-break-after: avoid;
break-after: avoid;
}
.content-block-intro:first-child {
margin-top: 0;
}
.content-block-intro__label {
display: inline-block;
font-family: var(--font-sans);
font-size: var(--text-extra-small);
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--letter-widest);
color: var(--color-accent-ink);
padding-bottom: var(--space-1-5);
border-bottom: 2pt solid var(--color-accent);
line-height: 1;
}
.content-block-intro--main {
break-inside: avoid;
page-break-inside: avoid;
}
.content-block-intro--main .content-block-intro__label {
font-size: var(--text-medium);
font-weight: 900;
letter-spacing: var(--letter-hero);
padding-inline-end: var(--space-3);
padding-bottom: var(--space-2);
border-bottom-width: 4pt;
}
.content-block-intro--main .content-block-intro__label::before {
content: '★ ';
color: var(--color-accent-ink);
margin-inline-end: 2pt;
}
.lesson-plan .exercise {
margin: 1.4em 0;
}
.lesson-plan .exercise > ol > li,
.lesson-plan .exercise__title {
break-inside: avoid;
}
.lesson-plan .exercise-link,
.lesson-plan .exercise-memory,
.lesson-plan .exercise-wordsearch,
.lesson-plan .exercise-cluesearch,
.lesson-plan .exercise-cross,
.lesson-plan .exercise-compare,
.lesson-plan .exercise-armed {
break-inside: avoid;
page-break-inside: avoid;
}
.lesson-plan .exercise__title {
break-after: avoid;
page-break-after: avoid;
font-weight: 600;
font-size: 11pt;
margin: 0 0 0.6em;
color: var(--color-ink);
}
.lesson-plan .exercise-link__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 4.5cm;
align-items: start;
margin-top: 0.6em;
}
.lesson-plan .exercise-link__col {
list-style: none;
margin: 0;
padding: 0;
}
.lesson-plan .exercise-link__col li {
display: flex;
align-items: center;
padding: 0.65em 0;
font-size: 10pt;
}
.lesson-plan .exercise-link__col--left li {
justify-content: flex-end;
text-align: right;
}
.lesson-plan .exercise-link__col--right li {
justify-content: flex-start;
text-align: left;
}
.lesson-plan .exercise-link__dot {
width: 0.42em;
height: 0.42em;
border: 1pt solid var(--color-ink);
border-radius: 50%;
display: inline-block;
margin: 0 0.6em;
flex-shrink: 0;
}
.lesson-plan .exercise-grid {
border-collapse: collapse;
margin: 0.5em auto;
font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.lesson-plan .exercise-grid td {
border: 0.5pt solid oklch(70% 0.02 70);
width: 0.65cm;
height: 0.65cm;
text-align: center;
font-size: 10pt;
font-weight: 600;
letter-spacing: 0;
padding: 0;
}
.lesson-plan .exercise-wordsearch__words {
columns: 3;
column-gap: 1.2em;
list-style: none;
padding: 0;
margin: 0.8em 0 0;
font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.lesson-plan .exercise-wordsearch__words li {
padding: 0.18em 0;
font-size: 9pt;
font-weight: 600;
letter-spacing: 0.02em;
}
.lesson-plan .exercise-memory {
break-inside: avoid;
}
.lesson-plan .exercise-memory__instructions {
font-style: italic;
font-size: 9.5pt;
color: oklch(45% 0.018 70);
margin: 0 0 0.8em;
}
.lesson-plan .exercise-memory__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4mm;
margin: 0.8em 0;
}
.lesson-plan .exercise-memory__card {
border: 1pt dashed oklch(55% 0.02 70);
aspect-ratio: 1;
padding: 0.5cm;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 10pt;
font-weight: 500;
line-height: 1.25;
break-inside: avoid;
hyphens: auto;
}
.lesson-plan math { font-size: 1em; }
.lesson-plan math[display="block"] {
display: block;
font-size: 1.4em;
margin: 0.5em 0;
text-align: center;
math-style: normal;
}
.lesson-plan .exercise-choice__options { list-style: none; margin: 0.3em 0 0; padding-inline-start: 1em; }
.lesson-plan .exercise-choice__options li { padding: 0.12em 0; }
.lesson-plan .exercise-choice__justify { margin: 0.45em 0 0.8em; break-inside: avoid; }
.lesson-plan .exercise-choice__justify-label {
display: block;
font-size: 0.82em;
font-weight: 600;
margin-bottom: 0.15em;
}
.lesson-plan .exercise-choice__justify-box {
border: 1pt solid var(--color-ink);
border-radius: 3pt;
}
.lesson-plan .exercise-fill__list,
.lesson-plan .exercise-bank__list { line-height: 2.2; }
.lesson-plan .exercise-fill__gap,
.lesson-plan .exercise-bank__gap {
display: inline-block;
min-width: 3.5cm;
border-bottom: 1px solid var(--color-ink);
vertical-align: bottom;
}
.lesson-plan .exercise-fill__gap--tight,
.lesson-plan .exercise-bank__gap--tight { min-width: 1.2cm; }
.lesson-plan .exercise-bank__bank { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.4em 0 1em; }
.lesson-plan .exercise-bank__chip {
border: 1pt solid var(--color-ink);
border-radius: 16px;
padding: 0.2em 0.8em;
font-weight: 600;
}
.lesson-plan .exercise-open__lines { margin: 0.4em 0 0.8em; }
.lesson-plan .exercise-open__lines span {
display: block;
border-bottom: 1px solid oklch(70% 0.02 70);
height: 1.5em;
}
.lesson-plan .exercise-reading__box {
border: 1pt solid var(--color-ink);
border-radius: 4pt;
padding-block: 0.9em 0.7em;
padding-inline: 2.6em 1.1em;
margin-top: 0.4em;
break-inside: avoid;
page-break-inside: avoid;
}
.lesson-plan .exercise-reading__line {
position: relative;
margin: 0;
line-height: 1.65;
font-size: 10.5pt;
}
.lesson-plan .exercise-reading__line--blank { line-height: 1; }
.lesson-plan .exercise-reading__num {
position: absolute;
inset-inline-start: -1.9em;
font-size: 8pt;
font-family: var(--font-mono, monospace);
color: oklch(55% 0.015 70);
line-height: 2.2;
}
.lesson-plan .exercise-reading__credit {
margin: 0.7em 0 0;
text-align: end;
font-size: 8.5pt;
font-style: italic;
color: oklch(45% 0.018 70);
}
.lesson-plan .exercise-numberline { break-inside: avoid; }
.lesson-plan .exercise-numberline__svg { width: 100%; height: auto; margin-top: 0.4em; }
.lesson-plan .exercise-clock { break-inside: avoid; }
.lesson-plan .exercise-clock__grid { display: flex; flex-wrap: wrap; gap: 0.9cm; margin-top: 0.5em; }
.lesson-plan .exercise-clock__cell { display: flex; flex-direction: column; align-items: center; gap: 0.4em; }
.lesson-plan .exercise-clock__face { width: 3.4cm; height: 3.4cm; }
.lesson-plan .exercise-clock__line { display: inline-block; min-width: 2.6cm; border-bottom: 1px solid var(--color-ink); height: 1.2em; }
.lesson-plan .exercise-clock__label { font-weight: 600; font-size: 11pt; }
.lesson-plan .exercise-money { break-inside: avoid; }
.lesson-plan .exercise-money__set {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35cm;
padding: 0.45em 0;
border-bottom: 0.5pt solid oklch(85% 0.01 70);
}
.lesson-plan .exercise-money__set:last-of-type { border-bottom: none; }
.lesson-plan .exercise-money__note { width: 2.4cm; height: auto; }
.lesson-plan .exercise-money__coin { width: 1.3cm; height: auto; }
.lesson-plan .exercise-money__total { margin-inline-start: auto; font-weight: 600; white-space: nowrap; }
.lesson-plan .exercise-money__line { display: inline-block; min-width: 2.2cm; border-bottom: 1px solid var(--color-ink); }
.lesson-plan .exercise-sudoku { break-inside: avoid; }
.lesson-plan .exercise-sudoku__grid {
border-collapse: collapse;
margin: 0.5em auto;
border: 1.4pt solid oklch(35% 0.02 70);
width: auto;
}
.lesson-plan .exercise-sudoku__grid td {
border: 0.5pt solid oklch(70% 0.02 70);
width: 0.8cm;
height: 0.8cm;
text-align: center;
font-size: 12pt;
font-weight: 600;
padding: 0;
}
.lesson-plan .exercise-sudoku__grid td.box-r { border-right: 1.2pt solid oklch(35% 0.02 70); }
.lesson-plan .exercise-sudoku__grid td.box-b { border-bottom: 1.2pt solid oklch(35% 0.02 70); }
.lesson-plan .exercise-sudoku__grid--mini td { width: 1.1cm; height: 1.1cm; font-size: 14pt; }
.lesson-plan .exercise-sudoku__boards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8em 1.6em;
margin-top: 0.4em;
}
.lesson-plan .exercise-sudoku__board { break-inside: avoid; text-align: center; }
.lesson-plan .exercise-sudoku__label {
display: block;
margin-bottom: 0.15em;
font-size: 7.5pt;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(45% 0.02 70);
}
.lesson-plan .exercise-sudoku__key td { width: 0.45cm; height: 0.45cm; font-size: 8.5pt; font-weight: 500; }
.lesson-plan .exercise-sudoku__rule,
.lesson-plan .exercise-bingo__rule,
.lesson-plan .exercise-maze__rule,
.lesson-plan .exercise-domino__rule,
.lesson-plan .exercise-board__rule,
.lesson-plan .exercise-tictactoe__rule,
.lesson-plan .exercise-fraction__rule,
.lesson-plan .exercise-place__rule,
.lesson-plan .exercise-times__rule,
.lesson-plan .exercise-chart__rule,
.lesson-plan .exercise-timeline__rule,
.lesson-plan .exercise-cutout__rule,
.lesson-plan .exercise-colorcode__rule,
.lesson-plan .exercise-symmetry__rule,
.lesson-plan .exercise-errorhunt__rule,
.lesson-plan .exercise-roulette__rule,
.lesson-plan .exercise-matchcards__rule,
.lesson-plan .exercise-mathtrail__rule,
.lesson-plan .exercise-cluesearch__rule,
.lesson-plan .exercise-cartesian__rule,
.lesson-plan .exercise-venn__rule,
.lesson-plan .exercise-conceptmap__rule,
.lesson-plan .exercise-mathfix__rule,
.lesson-plan .exercise-rubric__rule,
.lesson-plan .exercise-exitticket__rule,
.lesson-plan .exercise-argumentmap__rule,
.lesson-plan .exercise-rolecards__rule,
.lesson-plan .exercise-codequest__rule,
.lesson-plan .exercise-crypto__rule {
margin: 0.15em 0 0;
font-size: 8.5pt;
color: oklch(45% 0.02 70);
}
.lesson-plan .exercise-bingo__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7em;
margin-top: 0.5em;
}
.lesson-plan .exercise-bingo__card {
border: 1pt dashed oklch(55% 0.02 70);
padding: 0.4em;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-bingo__label {
display: block;
margin-bottom: 0.25em;
font-size: 7.5pt;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(45% 0.02 70);
}
.lesson-plan .exercise-bingo__grid { border-collapse: collapse; width: 100%; }
.lesson-plan .exercise-bingo__grid td {
border: 0.5pt solid oklch(70% 0.02 70);
height: 1cm;
text-align: center;
font-size: 9.5pt;
font-weight: 600;
padding: 0.1em 0.2em;
}
.lesson-plan .exercise-grid tr:last-child td,
.lesson-plan .exercise-bingo__grid tr:last-child td,
.lesson-plan .exercise-crypto__legend tr:last-child td,
.lesson-plan .exercise-chart__data tr:last-child td,
.lesson-plan .exercise-place__table tr:last-child td,
.lesson-plan .exercise-place__table tr:last-child th,
.lesson-plan .exercise-record__table tr:last-child td,
.lesson-plan .exercise-record__table tr:last-child th,
.lesson-plan .exercise-compare__table tr:last-child td,
.lesson-plan .exercise-compare__table tr:last-child th {
border-bottom: 0.5pt solid oklch(70% 0.02 70);
}
.lesson-plan .exercise-essay__sheet { margin-top: 0.5em; }
.lesson-plan .exercise-essay__line {
display: flex;
align-items: flex-end;
gap: 0.3em;
height: 0.95cm;
break-inside: avoid;
}
.lesson-plan .exercise-essay__num {
width: 0.7cm;
text-align: end;
font-size: 7.5pt;
color: oklch(55% 0.02 70);
padding-bottom: 0.08cm;
}
.lesson-plan .exercise-essay__rule {
flex: 1;
border-bottom: 0.6pt solid oklch(72% 0.02 70);
}
.lesson-plan .exercise-fraction { break-inside: avoid; }
.lesson-plan .exercise-fraction__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.8em 1.4em;
margin-top: 0.5em;
}
.lesson-plan .exercise-fraction__item {
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-fraction__label { display: block; font-size: 9pt; font-weight: 700; margin-bottom: 0.15em; }
.lesson-plan .exercise-fraction__svg { width: 2.6cm; height: auto; display: block; }
.lesson-plan .exercise-fraction__svg--wide { width: 5.2cm; }
.lesson-plan .exercise-fraction__caption { display: block; font-size: 8.5pt; margin-top: 0.25em; }
.lesson-plan .exercise-fraction__write {
display: inline-block;
min-width: 1.6cm;
border-bottom: 0.8pt solid var(--color-ink);
}
.lesson-plan .exercise-place__table {
border-collapse: collapse;
margin: 0.4em 0;
width: auto;
}
.lesson-plan .exercise-place__table th,
.lesson-plan .exercise-place__table td {
border: 0.5pt solid oklch(70% 0.02 70);
padding: 0.3em 0.7em;
font-size: 9.5pt;
text-align: center;
background: none;
text-transform: none;
letter-spacing: normal;
min-width: 1.8cm;
height: 0.9cm;
}
.lesson-plan .exercise-times__columns { display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; margin-top: 0.4em; }
.lesson-plan .exercise-times__column { break-inside: avoid; }
.lesson-plan .exercise-times__head { display: block; font-size: 8.5pt; font-weight: 700; margin-bottom: 0.2em; }
.lesson-plan .exercise-times__column ul { list-style: none; margin: 0; padding: 0; }
.lesson-plan .exercise-times__column li { font-size: 10pt; margin-bottom: 0.28em; }
.lesson-plan .exercise-times__gap {
display: inline-block;
min-width: 1.2cm;
border-bottom: 0.8pt solid var(--color-ink);
}
.lesson-plan .exercise-record__table { border-collapse: collapse; width: 100%; margin: 0.4em 0; }
.lesson-plan .exercise-record__table th,
.lesson-plan .exercise-record__table td {
border: 0.5pt solid oklch(70% 0.02 70);
padding: 0.3em 0.5em;
font-size: 9.5pt;
text-align: start;
background: none;
text-transform: none;
letter-spacing: normal;
height: 1cm;
}
.lesson-plan .exercise-chart { break-inside: avoid; }
.lesson-plan .exercise-chart__data {
width: auto;
margin: 0.4em 0;
border-collapse: collapse;
}
.lesson-plan .exercise-chart__data th,
.lesson-plan .exercise-chart__data td {
border: 0.5pt solid oklch(70% 0.02 70);
padding: 0.2em 0.7em;
font-size: 9.5pt;
text-align: start;
background: none;
text-transform: none;
letter-spacing: normal;
}
.lesson-plan .exercise-chart__data th { font-weight: 700; }
.lesson-plan .exercise-chart__svg { width: 12cm; max-width: 100%; height: auto; display: block; margin: 0.3em auto; }
.lesson-plan .exercise-chart__questions { margin: 0.3em 0 0; padding-inline-start: 1.2em; }
.lesson-plan .exercise-chart__questions li { font-size: 9.5pt; margin-bottom: 0.2em; }
.lesson-plan .exercise-timeline { break-inside: avoid; }
.lesson-plan .exercise-timeline__bank {
display: flex;
flex-wrap: wrap;
gap: 0.35em 0.5em;
padding: 0.5em;
border: 1pt dashed oklch(60% 0.02 70);
margin: 0.4em 0 0.8em;
}
.lesson-plan .exercise-timeline__bank span {
font-size: 9pt;
font-weight: 600;
padding: 0.15em 0.45em;
border: 0.5pt solid oklch(75% 0.02 70);
border-radius: 2pt;
}
.lesson-plan .exercise-timeline__line {
display: flex;
align-items: flex-start;
gap: 0.3em;
border-top: 1.2pt solid oklch(45% 0.02 70);
padding-top: 0.1em;
margin-top: 1.1em;
}
.lesson-plan .exercise-timeline__slot { flex: 1; text-align: center; position: relative; }
.lesson-plan .exercise-timeline__dot {
display: block;
width: 0.22cm;
height: 0.22cm;
margin: -0.22cm auto 0.35em;
border-radius: 50%;
background: oklch(45% 0.02 70);
}
.lesson-plan .exercise-timeline__date { display: block; font-size: 8.5pt; font-weight: 700; margin-bottom: 0.1em; }
.lesson-plan .exercise-timeline__write {
display: block;
height: 1.6cm;
border: 0.5pt solid oklch(78% 0.02 70);
border-radius: 2pt;
}
.lesson-plan .exercise-tictactoe { break-inside: avoid; }
.lesson-plan .exercise-tictactoe__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0.5em auto 0;
max-width: 15cm;
border: 1.4pt solid oklch(40% 0.02 70);
}
.lesson-plan .exercise-tictactoe__square {
position: relative;
min-height: 2.6cm;
border: 0.8pt solid oklch(60% 0.02 70);
display: flex;
align-items: center;
justify-content: center;
padding: 0.7em 0.4em 0.4em;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-tictactoe__num {
position: absolute;
top: 0.15em;
inset-inline-start: 0.3em;
font-size: 7pt;
font-weight: 700;
color: oklch(50% 0.02 70);
}
.lesson-plan .exercise-tictactoe__q { font-size: 9pt; line-height: 1.25; }
.lesson-plan .exercise-board { break-inside: avoid; }
.lesson-plan .exercise-board__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.15em;
margin: 0.5em 0;
}
.lesson-plan .exercise-board__square {
position: relative;
min-height: 1.7cm;
border: 0.8pt solid oklch(55% 0.02 70);
border-radius: 2pt;
display: flex;
align-items: center;
justify-content: center;
padding: 0.55em 0.2em 0.2em;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-board__num {
position: absolute;
top: 0.12em;
inset-inline-start: 0.25em;
font-size: 6.5pt;
font-weight: 700;
color: oklch(50% 0.02 70);
}
.lesson-plan .exercise-board__body { font-size: 8pt; font-weight: 600; line-height: 1.15; }
.lesson-plan .exercise-board__square--question .exercise-board__body { font-size: 16pt; }
.lesson-plan .exercise-board__square--start,
.lesson-plan .exercise-board__square--finish {
border-width: 1.6pt;
background: oklch(95% 0.01 70);
}
.lesson-plan .exercise-board__square--start .exercise-board__body,
.lesson-plan .exercise-board__square--finish .exercise-board__body { font-size: 7pt; letter-spacing: 0.04em; }
.lesson-plan .exercise-board__square--special { border-style: dashed; }
.lesson-plan .exercise-board__square--empty { border: none; min-height: 0; }
.lesson-plan .exercise-board__questions {
margin: 0.4em 0 0;
padding-inline-start: 1.2em;
columns: 2;
column-gap: 1.2em;
}
.lesson-plan .exercise-board__questions li { font-size: 9.5pt; margin-bottom: 0.25em; break-inside: avoid; }
.lesson-plan .exercise-domino__tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em 0.8em;
margin-top: 0.5em;
}
.lesson-plan .exercise-domino__tile {
display: flex;
align-items: stretch;
border: 1pt dashed oklch(55% 0.02 70);
min-height: 1.5cm;
break-inside: avoid;
}
.lesson-plan .exercise-domino__half {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.3em 0.4em;
text-align: center;
font-size: 9.5pt;
line-height: 1.25;
}
.lesson-plan .exercise-domino__half--answer {
border-right: 1.2pt solid oklch(45% 0.02 70);
font-weight: 700;
}
.lesson-plan .exercise-domino__half--question { font-weight: 500; }
.lesson-plan .exercise-maze { break-inside: avoid; }
.lesson-plan .exercise-maze__boards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6em 1.2em;
margin-top: 0.4em;
}
.lesson-plan .exercise-maze__board { break-inside: avoid; text-align: center; }
.lesson-plan .exercise-maze__svg { width: 8.6cm; height: auto; display: block; }
.lesson-plan .exercise-maze__boards:has(.exercise-maze__board + .exercise-maze__board) .exercise-maze__svg { width: 7cm; }
.lesson-plan .exercise-maze__label {
display: block;
margin-bottom: 0.15em;
font-size: 7.5pt;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(45% 0.02 70);
}
.lesson-plan .exercise-crypto { break-inside: avoid; }
.lesson-plan .exercise-crypto__legend {
width: auto;
border-collapse: collapse;
margin: 0.4em auto;
}
.lesson-plan .exercise-crypto__legend td {
border: 0.5pt solid oklch(70% 0.02 70);
padding: 0.12em 0.1em;
text-align: center;
width: 0.72cm;
}
.lesson-plan .exercise-crypto__letter {
display: block;
font-size: 9.5pt;
font-weight: 700;
}
.lesson-plan .exercise-crypto__num {
display: block;
font-size: 7.5pt;
color: oklch(45% 0.02 70);
}
.lesson-plan .exercise-crypto__message { margin-top: 0.6em; }
.lesson-plan .exercise-crypto__word {
display: inline-block;
white-space: nowrap;
margin-block: 0 0.5em;
margin-inline: 0 1.1cm;
}
.lesson-plan .exercise-crypto__word:last-child { margin-inline-end: 0; }
.lesson-plan .exercise-crypto__label {
display: inline-block;
width: 0.8cm;
font-size: 10pt;
font-weight: 700;
vertical-align: top;
line-height: 0.8cm;
}
.lesson-plan .exercise-crypto__cell {
display: inline-block;
width: 0.8cm;
vertical-align: top;
}
.lesson-plan .exercise-crypto__slot {
display: block;
height: 0.8cm;
border: 0.5pt solid oklch(70% 0.02 70);
font-size: 12pt;
font-weight: 600;
line-height: 0.8cm;
text-align: center;
}
.lesson-plan .exercise-crypto__cell .exercise-crypto__num { margin-top: 0.1em; }
.lesson-plan .exercise-crypto__plain {
display: inline-block;
width: 0.4cm;
font-size: 12pt;
font-weight: 600;
line-height: 0.8cm;
vertical-align: top;
text-align: center;
}
.lesson-plan .exercise-trace__row { width: 100%; height: auto; display: block; margin-top: 0.45em; }
.lesson-plan .exercise-calc__list { list-style: decimal; padding-inline-start: 1.2em; }
.lesson-plan .exercise-calc__list > li { break-inside: avoid; margin-bottom: 0.9em; }
.lesson-plan .exercise-calc__grid {
margin-top: 0.45em;
border: 0.75pt solid oklch(75% 0.015 70);
background-image:
linear-gradient(to right, oklch(85% 0.01 70) 1px, transparent 1px),
linear-gradient(to bottom, oklch(85% 0.01 70) 1px, transparent 1px);
background-size: 0.6cm 0.6cm;
}
.lesson-plan .exercise__points { font-size: 8.5pt; font-weight: 600; color: oklch(45% 0.018 70); white-space: nowrap; }
.lesson-plan .exercise-truefalse__list { line-height: 2; }
.lesson-plan .exercise-truefalse__mark { font-family: var(--font-mono, monospace); margin-inline-end: 0.4em; }
.lesson-plan .exercise-scramble__list { line-height: 2.4; }
.lesson-plan .exercise-scramble__letters { font-family: var(--font-mono, monospace); letter-spacing: 0.15em; font-weight: 600; }
.lesson-plan .exercise-scramble__answer {
display: inline-block;
min-width: 3.5cm;
border-bottom: 1px solid var(--color-ink);
margin-inline-start: 1em;
}
.lesson-plan .exercise-order__list { list-style: none; margin: 0.4em 0 0; padding: 0; line-height: 2.2; }
.lesson-plan .exercise-order__list li { display: flex; align-items: center; }
.lesson-plan .exercise-order__box {
width: 1em;
height: 1em;
border: 1pt solid var(--color-ink);
display: inline-block;
margin-inline-end: 0.7em;
flex-shrink: 0;
}
.lesson-plan .exercise-armed__grid { display: flex; flex-wrap: wrap; gap: 0.6cm 1.5cm; margin-top: 0.6em; }
.lesson-plan .exercise-armed__sum {
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 13pt;
text-align: end;
min-width: 2.6cm;
padding-bottom: 1.1cm;
letter-spacing: 0.12em;
}
.lesson-plan .exercise-armed__a,
.lesson-plan .exercise-armed__b { display: block; }
.lesson-plan .exercise-armed__op { float: left; font-weight: 600; }
[dir="rtl"] .lesson-plan .exercise-armed__sum { direction: ltr; }
[dir="rtl"] .lesson-plan .exercise-place__table { direction: ltr; }
[dir="rtl"] .lesson-plan .exercise-cartesian__plane,
[dir="rtl"] .lesson-plan .exercise-chart__svg { direction: ltr; }
[dir="rtl"] .lesson-plan .exercise-money__total { direction: ltr; }
.lesson-plan .exercise-armed__rule { display: block; border-top: 1.5pt solid var(--color-ink); margin-top: 3px; }
.lesson-plan .exercise-compare__table { border-collapse: collapse; width: 100%; margin-top: 0.4em; }
.lesson-plan .exercise-compare__table th,
.lesson-plan .exercise-compare__table td {
border: 0.75pt solid oklch(70% 0.02 70);
padding: 0.4em 0.6em;
text-align: start;
vertical-align: top;
font-size: 10pt;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--color-ink);
}
.lesson-plan .exercise-compare__table thead th { background: oklch(95% 0.01 70); font-weight: 600; }
.lesson-plan .exercise-compare__table tbody th { background: oklch(97% 0.008 70); font-weight: 600; }
.lesson-plan .exercise-compare__table tbody tr:first-child td { font-size: 10pt; font-weight: 400; color: var(--color-ink); }
.lesson-plan .exercise-cross__grid { border-collapse: collapse; width: auto; margin: 0.5em 0; }
.lesson-plan .exercise-cross__cell,
.lesson-plan .exercise-cross__block { box-sizing: border-box; width: 0.7cm; min-width: 0.7cm; max-width: 0.7cm; height: 0.7cm; padding: 0; }
.lesson-plan .exercise-cross__cell { position: relative; border: 0.75pt solid var(--color-ink); background: var(--color-surface); }
.lesson-plan .exercise-cross__block { border: 0; background: transparent; }
.lesson-plan .exercise-cross__num {
position: absolute;
top: 0;
inset-inline-start: 1pt;
font-size: 5.5pt;
line-height: 1;
font-family: var(--font-mono, monospace);
color: oklch(45% 0.018 70);
}
.lesson-plan .exercise-cross__clue-cols { display: flex; gap: 1.6em; margin-top: 0.7em; break-inside: avoid; }
.lesson-plan .exercise-cross__clues { flex: 1; }
.lesson-plan .exercise-cross__clues h4 { font-size: 9.5pt; margin: 0 0 0.3em; text-transform: uppercase; letter-spacing: 0.04em; }
.lesson-plan .exercise-cross__clues ul { list-style: none; margin: 0; padding: 0; }
.lesson-plan .exercise-cross__clues li { padding: 0.12em 0; margin: 0; font-size: 9.5pt; line-height: 1.5; }
.lesson-plan .exercise-icon { display: flex; align-items: center; gap: 0.5em; margin: 1.2em 0 0.4em; color: var(--color-terra, #C16850); }
.lesson-plan .exercise-icon__svg { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.lesson-plan .exercise-icon__caption { font-size: 11pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-terra, #C16850); margin: 0; }
.worksheet-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); border-bottom: 1pt solid var(--color-ink); padding-bottom: 12px; }
.worksheet-header__fields { flex: 1 1 auto; min-width: 0; font-size: 10.5pt; line-height: 2.35; }
.worksheet-header__fields p { margin: 0; white-space: nowrap; display: flex; align-items: baseline; gap: 0.5em; }
.worksheet-header__fields strong { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(45% 0.018 70); }
.worksheet-header__line { display: inline-block; flex: 1 1 auto; min-width: 3.4cm; border-bottom: 1.2px dotted oklch(50% 0.02 70); height: 1.05em; }
.worksheet-header__line--sm { min-width: 2.6cm; }
.worksheet-header__score { display: inline-block; min-width: 2.2cm; height: 1.2em; border: 1pt solid var(--color-ink); vertical-align: middle; }
.worksheet-header__mark { flex: 0 0 auto; align-self: center; width: 38px; height: auto; overflow: visible; }
.worksheet-header__teacher { font-size: 8.5pt; color: oklch(38% 0.02 70); }
.worksheet-header__fields--identity { line-height: 1.5; }
.worksheet-header__fields--identity p { white-space: normal; display: block; }
.worksheet-header__fields--identity strong { font-size: 10.5pt; letter-spacing: 0; text-transform: none; color: var(--color-ink); font-weight: 500; }
.worksheet-title { text-align: start; font-size: 8.5pt; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-terra, #C16850); margin: 16px 0 4px; }
.worksheet-body h1 { font-family: var(--font-serif); font-weight: 600; font-size: 21pt; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 10px; }
.worksheet-body h2::before { content: none; }
.worksheet-body h2 { font-family: var(--font-sans); font-size: 11.5pt; font-weight: 700; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.6em; margin: 1.7em 0 0.8em; }
.worksheet-body h2::after { content: ""; flex: 1; border-top: 0.6pt solid oklch(78% 0.015 70); }
.worksheet-footer { margin-top: 32px; border-top: 1px solid oklch(85% 0.01 70); padding-top: 6px; font-size: 8pt; color: oklch(55% 0.015 70); text-align: center; }
.worksheet-self-check { display: flex; align-items: center; justify-content: center; gap: 1.5em; margin-top: 26px; padding: 8px 12px; border: 0.6pt solid oklch(62% 0.02 70); border-radius: 6pt; break-inside: avoid; font-size: 10pt; }
.worksheet-self-check__title { font-weight: 700; }
.worksheet-self-check__option { display: inline-flex; align-items: center; gap: 0.45em; }
.worksheet-self-check__box { display: inline-block; width: 1em; height: 1em; border: 1pt solid var(--color-ink); border-radius: 2pt; }
.worksheet-body.worksheet--artwork h1 {
font-size: 26pt;
line-height: 1.1;
text-align: center;
text-wrap: balance;
margin: 8px 0 18px;
}
.worksheet-body.worksheet--artwork figure.content-image { margin: 0 auto; }
.worksheet-body.worksheet--artwork figure.content-image img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 540pt;
width: auto;
height: auto;
border: none;
border-radius: 0;
}
.worksheet-adapted-note { text-align: start; font-size: 8.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(45% 0.018 70); margin: -4px 0 14px; }
.worksheet--adapted { font-size: 13pt; line-height: 1.9; }
.worksheet--adapted .exercise { margin: 1.8em 0; }
.worksheet--adapted .exercise__title { font-size: 13pt; }
.worksheet--adapted .exercise-choice__options li,
.worksheet--adapted .exercise-truefalse__list li,
.worksheet--adapted .exercise-fill__list li { padding: 0.4em 0; }
.worksheet--young .exercise-open__lines span { height: 2.3em; }
.worksheet--young .exercise-fill__gap,
.worksheet--young .exercise-bank__gap { min-width: 4.5cm; }
.worksheet--young .exercise-fill__gap--tight,
.worksheet--young .exercise-bank__gap--tight { min-width: 1.6cm; }
.worksheet--young .exercise-clock__face { width: 4cm; height: 4cm; }
.worksheet--bastao { text-transform: uppercase; }
.worksheet--bastao .exercise-trace { text-transform: none; }
.pictogram { font-family: 'Noto Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.worksheet--young .pictogram {
font-size: 2.2em;
line-height: 1;
vertical-align: middle;
letter-spacing: 0.06em;
}
.word-figure {
width: 2.2em;
height: 2.2em;
vertical-align: middle;
margin-inline-start: 0.3em;
}
.worksheet--young .exercise-link__grid { column-gap: 2cm; max-width: 12cm; }
.lexxy-content .content-block-intro--main {
break-before: auto;
page-break-before: auto;
}
.bncc-skills {
margin: var(--space-6) 0;
padding: var(--space-3) var(--space-4);
border: var(--hairline) solid var(--color-border);
border-inline-start: 3pt solid var(--color-accent);
border-radius: var(--radius-medium);
break-inside: avoid;
page-break-inside: avoid;
}
.bncc-skills__title {
string-set: none;
font-size: var(--text-extra-small);
font-weight: 800;
text-transform: uppercase;
letter-spacing: var(--letter-widest);
color: var(--color-accent-ink);
margin: 0 0 var(--space-3);
}
.bncc-skills__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2-5);
}
.bncc-skills__item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: baseline;
line-height: var(--line-readable);
}
.bncc-skills__code {
font-family: var(--font-mono);
font-size: var(--text-small);
font-weight: 700;
color: var(--color-accent-ink);
white-space: nowrap;
}
.bncc-skills__desc {
font-size: var(--text-medium);
color: var(--color-ink-muted);
}
.worksheet-body { counter-reset: worksheet-item; }
.worksheet-body > ol {
list-style: none;
padding-inline-start: var(--space-6);
margin: var(--space-3) 0;
}
.worksheet-body > ol > li {
counter-increment: worksheet-item;
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.worksheet-body > ol > li::before {
content: counter(worksheet-item) ".";
font-weight: 700;
color: var(--color-ink-muted);
min-width: 18px;
flex-shrink: 0;
}
.worksheet-body .exercise ol {
list-style: lower-alpha;
padding-inline-start: var(--space-5);
}
.worksheet-body .exercise ol > li {
display: list-item;
list-style-position: outside;
border-inline-start: none;
margin-inline-start: 0;
padding: var(--space-1) 0;
}
.worksheet-body .exercise ol > li::before { content: none; }
.worksheet-body .exercise-choice__options > li::before { content: none; }
.lesson-plan .exercise-cut-sheet {
break-before: page;
page-break-before: always;
break-inside: avoid;
page-break-inside: avoid;
}
.lesson-plan .exercise-cut-sheet:not(:last-child) {
break-after: page;
page-break-after: always;
break-inside: avoid;
page-break-inside: avoid;
}
.lesson-plan .exercise-cutout { break-inside: avoid; }
.lesson-plan .exercise-cutout__targets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(3.4cm, 1fr));
gap: 0.5em;
margin-top: 0.5em;
}
.lesson-plan .exercise-cutout__target { display: flex; flex-direction: column; break-inside: avoid; }
.lesson-plan .exercise-cutout__target-label {
font-size: 9.5pt;
font-weight: 700;
text-align: center;
padding: 0.2em 0.3em;
border: 1pt solid oklch(45% 0.02 70);
border-bottom: none;
}
.lesson-plan .exercise-cutout__target-area {
border: 1pt solid oklch(45% 0.02 70);
min-height: 2.6cm;
}
.lesson-plan .exercise-cutout__cutline {
margin: 0.7em 0 0.35em;
font-size: 8.5pt;
letter-spacing: 0.04em;
border-top: 1pt dashed oklch(55% 0.02 70);
padding-top: 0.25em;
}
.lesson-plan .exercise-cutout__pieces {
display: flex;
flex-wrap: wrap;
gap: 0.4em 0.5em;
}
.lesson-plan .exercise-cutout__piece {
border: 1pt dashed oklch(55% 0.02 70);
padding: 0.35em 0.6em;
font-size: 9.5pt;
min-width: 2.2cm;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-colorcode { break-inside: avoid; }
.lesson-plan .exercise-colorcode__legend {
display: flex;
flex-wrap: wrap;
gap: 0.3em 0.9em;
margin: 0.4em 0 0.55em;
font-size: 9pt;
}
.lesson-plan .exercise-colorcode__key { display: inline-flex; align-items: center; gap: 0.3em; }
.lesson-plan .exercise-colorcode__swatch {
width: 0.5cm;
height: 0.5cm;
border: 1pt solid oklch(45% 0.02 70);
display: inline-block;
}
.lesson-plan .exercise-colorcode__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(2.4cm, 1fr));
gap: 0.3em;
}
.lesson-plan .exercise-colorcode__cell {
border: 1pt solid oklch(45% 0.02 70);
min-height: 1.7cm;
padding: 0.25em;
font-size: 9.5pt;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-symmetry { break-inside: avoid; }
.lesson-plan .exercise-symmetry__items {
display: flex;
flex-wrap: wrap;
gap: 0.8em 1.2em;
margin-top: 0.4em;
}
.lesson-plan .exercise-symmetry__svg { width: 7cm; height: auto; break-inside: avoid; }
.lesson-plan .exercise-errorhunt { break-inside: avoid; }
.lesson-plan .exercise-errorhunt__text {
border: 1pt solid oklch(45% 0.02 70);
padding-block: 0.5em;
padding-inline: 2em 0.6em;
margin: 0.4em 0 0.6em;
font-size: 10pt;
line-height: 1.7;
}
.lesson-plan .exercise-errorhunt__line { break-inside: avoid; }
.worksheet-body .exercise .exercise-errorhunt__text,
.worksheet-body .exercise .exercise-errorhunt__answers,
.worksheet-body .exercise .exercise-venn__bank,
.worksheet-body .exercise .exercise-cluesearch__clues,
.worksheet-body .exercise .exercise-labreport__steps { list-style: decimal; }
.worksheet-body .exercise .exercise-mathfix__steps,
.worksheet-body .exercise .exercise-codequest__stages { list-style: none; padding-inline-start: 0; }
.worksheet-body .exercise .exercise-mathfix__step,
.worksheet-body .exercise .exercise-codequest__stage {
display: flex;
align-items: baseline;
gap: 0.5em;
}
.worksheet-body .exercise .exercise-mathfix__step {
padding-inline-start: 0.6em;
padding-inline-end: 0.6em;
}
.lesson-plan .exercise-errorhunt__answers { padding-inline-start: 1.6em; margin: 0; }
.lesson-plan .exercise-errorhunt__slot {
border-bottom: 0.6pt solid oklch(45% 0.02 70);
height: 1.05em;
margin-bottom: 0.45em;
break-inside: avoid;
}
.lesson-plan .exercise-sources__set { display: flex; flex-direction: column; gap: 0.6em; margin-top: 0.4em; }
.lesson-plan .exercise-sources__source {
border: 1pt solid oklch(45% 0.02 70);
border-inline-start: 3pt solid oklch(45% 0.02 70);
padding: 0.45em 0.65em;
margin: 0;
break-inside: avoid;
}
.lesson-plan .exercise-sources__label {
font-size: 9pt;
font-weight: 700;
letter-spacing: 0.03em;
margin-bottom: 0.25em;
}
.lesson-plan .exercise-sources__body p { font-size: 9.5pt; line-height: 1.45; margin: 0 0 0.3em; }
.lesson-plan .exercise-sources__credit { font-size: 8.5pt; font-style: italic; text-align: end; }
.lesson-plan .exercise-counting { break-inside: avoid; }
.lesson-plan .exercise-counting__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.28em;
margin: 0.55em 0;
break-inside: avoid;
}
.lesson-plan .exercise-counting__label { font-weight: 700; margin-inline-end: 0.3em; }
.lesson-plan .exercise-counting__shapes { display: inline-flex; flex-wrap: wrap; gap: 0.28em; align-items: center; }
.lesson-plan .exercise-counting__shape { width: 0.95cm; height: 0.95cm; }
.lesson-plan .exercise-counting__answer {
display: inline-block;
width: 1.5cm;
height: 1.2cm;
border: 1.2pt solid var(--color-ink);
margin-inline-start: 0.7em;
}
.lesson-plan .exercise-circlechoice { break-inside: avoid; }
.lesson-plan .exercise-circlechoice__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4em 2.2em;
margin: 0.75em 0;
break-inside: avoid;
}
.lesson-plan .exercise-circlechoice__label { font-weight: 700; }
.lesson-plan .exercise-circlechoice__option { font-size: 12.5pt; padding: 0.3em 0.2em; }
.lesson-plan .exercise-drawframe { break-inside: avoid; }
.lesson-plan .exercise-drawframe__area {
height: 6cm;
border: 1pt solid var(--color-ink);
border-radius: 3pt;
margin-top: 0.4em;
}
.lesson-plan .exercise-drawframe__lines { display: flex; flex-direction: column; margin-top: 0.5em; }
.lesson-plan .exercise-drawframe__lines span {
border-bottom: 0.6pt solid oklch(45% 0.02 70);
height: 1.6em;
}
.lesson-plan .exercise-syllables { break-inside: avoid; }
.lesson-plan .exercise-syllables__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
margin: 0.6em 0;
break-inside: avoid;
}
.lesson-plan .exercise-syllables__label { font-weight: 700; }
.lesson-plan .exercise-syllables__word { font-size: 12.5pt; font-weight: 600; min-width: 3.2cm; }
.lesson-plan .exercise-syllables__boxes { display: inline-flex; gap: 0.3em; }
.lesson-plan .exercise-syllables__box {
display: inline-block;
width: 1.6cm;
height: 1cm;
border: 1pt solid var(--color-ink);
}
.worksheet--scale-lg { font-size: 14pt; line-height: 1.85; }
.worksheet--scale-lg .exercise__title { font-size: 15.5pt; }
.worksheet--scale-lg h2 { font-size: 14pt; }
.worksheet--scale-md { font-size: 11.5pt; line-height: 1.7; }
.worksheet--scale-md .exercise__title { font-size: 12.5pt; }
.print--enlarged .worksheet-body { --print-type: 13pt; }
.print--enlarged .worksheet-body.worksheet--scale-md { --print-type: 14.5pt; }
.print--enlarged .worksheet-body.worksheet--scale-lg,
.print--enlarged .worksheet-body.worksheet--adapted { --print-type: 17pt; }
.print--enlarged .worksheet-body,
.print--enlarged .worksheet-body p,
.print--enlarged .worksheet-body ul,
.print--enlarged .worksheet-body ol > li { font-size: var(--print-type); line-height: 1.9; }
.print--enlarged .worksheet-body .exercise__title { font-size: var(--print-type); }
.print--enlarged .worksheet-body .exercise-open__lines span { height: 2.1em; }
.print--enlarged .worksheet-body .exercise-fill__gap,
.print--enlarged .worksheet-body .exercise-bank__gap { min-width: 4.6cm; }
.print--enlarged .worksheet-body .exercise-fill__gap--tight,
.print--enlarged .worksheet-body .exercise-bank__gap--tight { min-width: 1.6cm; }
.print--economical .worksheet-title { color: var(--color-ink); }
.print--economical .answer-key-banner {
background: none;
color: var(--color-ink);
border-color: var(--color-ink);
outline-color: var(--color-ink);
box-shadow: none;
}
.lesson-plan .exercise-truefalse__fix {
display: block;
border-bottom: 0.6pt solid oklch(45% 0.02 70);
height: 1.3em;
margin-block: 0.3em 0.2em;
margin-inline: 1.8em 0;
}
.lesson-plan .exercise-foldable { break-inside: avoid; }
.lesson-plan .exercise-foldable__rule {
font-size: 0.9em;
margin: 0 0 0.6em;
}
.lesson-plan .exercise-foldable__sheet {
border: 1px solid currentColor;
}
.lesson-plan .exercise-foldable__cover {
border-bottom: 2px solid currentColor;
padding: 0.9em 0.6em;
text-align: center;
}
.lesson-plan .exercise-foldable__cover-label {
font-weight: 700;
font-size: 1.1em;
}
.lesson-plan .exercise-foldable__panel {
border-bottom: 1px solid currentColor;
display: block;
padding: 0.7em 0.6em;
}
.lesson-plan .exercise-foldable__panel:last-child { border-bottom: 0; }
.lesson-plan .exercise-foldable__question {
display: block;
font-weight: 600;
margin-bottom: 0.5em;
}
.lesson-plan .exercise-foldable__fold {
display: block;
font-size: 0.8em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
text-align: center;
}
.lesson-plan .exercise-foldable__answer {
display: block;
padding-inline-start: 1em;
}
.lesson-plan .exercise-cluesearch__clues {
margin: 0.7em 0 0;
padding-inline-start: 1.4em;
}
.lesson-plan .exercise-cluesearch__clues li {
font-size: 9.5pt;
line-height: 1.3;
margin-bottom: 0.3em;
break-inside: avoid;
}
.lesson-plan .exercise-roulette { break-inside: avoid; }
.lesson-plan .exercise-roulette__pieces {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2cm;
margin: 0.6em 0;
}
.lesson-plan .exercise-roulette__wheel {
width: 10.5cm;
height: 10.5cm;
flex: none;
}
.lesson-plan .exercise-roulette__pointer {
width: 2.9cm;
height: 6.2cm;
flex: none;
}
.lesson-plan .exercise-matchcards { break-inside: avoid; }
.lesson-plan .exercise-matchcards__deck {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4mm;
margin: 0.6em 0;
}
.lesson-plan .exercise-matchcards__card {
border: 1pt dashed oklch(55% 0.02 70);
min-height: 1.5cm;
padding: 0.35em 0.4em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 9.5pt;
line-height: 1.25;
break-inside: avoid;
hyphens: auto;
}
.lesson-plan .exercise-matchcards__card--prompt { font-weight: 600; }
.lesson-plan .exercise-matchcards__card--answer {
background: oklch(95% 0.01 70);
font-style: italic;
}
.lesson-plan .exercise-mathtrail { break-inside: avoid; }
.lesson-plan .exercise-mathtrail__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.15em;
margin: 0.5em 0;
}
.lesson-plan .exercise-mathtrail__square {
position: relative;
min-height: 1.9cm;
border: 0.8pt solid oklch(55% 0.02 70);
border-radius: 2pt;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25em;
padding: 0.3em 0.2em;
text-align: center;
break-inside: avoid;
}
.lesson-plan .exercise-mathtrail__num {
position: absolute;
top: 0.12em;
inset-inline-start: 0.25em;
font-size: 6.5pt;
font-weight: 700;
color: oklch(50% 0.02 70);
}
.lesson-plan .exercise-mathtrail__op { font-size: 13pt; font-weight: 700; }
.lesson-plan .exercise-mathtrail__box {
border: 0.6pt solid oklch(60% 0.02 70);
width: 1.1cm;
height: 0.62cm;
}
.lesson-plan .exercise-mathtrail__square--start,
.lesson-plan .exercise-mathtrail__square--finish {
border-width: 1.6pt;
background: oklch(95% 0.01 70);
}
.lesson-plan .exercise-mathtrail__tag { font-size: 7pt; font-weight: 700; letter-spacing: 0.04em; }
.lesson-plan .exercise-mathtrail__value { font-size: 15pt; font-weight: 700; }
.lesson-plan .exercise-mathtrail__square--empty { border: none; min-height: 0; }
.lesson-plan .exercise-cartesian__gap,
.lesson-plan .exercise-mathfix__gap,
.lesson-plan .exercise-exitticket__gap,
.lesson-plan .exercise-codequest__gap {
display: inline-block;
border-bottom: 0.6pt solid oklch(45% 0.02 70);
flex: 1;
min-width: 2.5cm;
height: 1.1em;
vertical-align: bottom;
}
.lesson-plan .exercise-cartesian { break-inside: avoid; }
.lesson-plan .exercise-cartesian__plane {
display: block;
width: 9.5cm;
height: 9.5cm;
margin: 0.5em auto;
}
.lesson-plan .exercise-cartesian__plane--q4 { width: 12cm; height: 12cm; }
.lesson-plan .exercise-cartesian__answers,
.lesson-plan .exercise-cartesian__list {
list-style: none;
padding: 0;
margin: 0.6em 0 0;
columns: 2;
column-gap: 1.2em;
}
.lesson-plan .exercise-cartesian__answers li {
display: flex;
align-items: baseline;
gap: 0.4em;
margin-bottom: 0.5em;
break-inside: avoid;
}
.lesson-plan .exercise-cartesian__label { font-weight: 700; }
.lesson-plan .exercise-cartesian__list li { font-size: 9.5pt; margin-bottom: 0.25em; }
.lesson-plan .exercise-venn { break-inside: avoid; }
.lesson-plan .exercise-venn__bank {
columns: 3;
column-gap: 1.2em;
margin: 0.5em 0 0.6em;
padding-inline-start: 1.4em;
}
.lesson-plan .exercise-venn__bank li {
font-size: 9.5pt;
margin-bottom: 0.2em;
break-inside: avoid;
}
.lesson-plan .exercise-venn__figure {
display: block;
width: 9.5cm;
margin: 0 auto;
}
.lesson-plan .exercise-conceptmap { break-inside: avoid; }
.lesson-plan .exercise-conceptmap__root {
position: relative;
border: 1.4pt solid currentColor;
border-radius: 3pt;
padding: 0.5em;
text-align: center;
font-weight: 700;
margin: 0.5em auto 0;
max-width: 60%;
}
.lesson-plan .exercise-conceptmap__root::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.5em;
height: 0.5em;
border-left: 0.8pt solid oklch(55% 0.02 70);
}
.lesson-plan .exercise-conceptmap__branches {
display: flex;
align-items: flex-start;
gap: 0.5em;
border-top: 0.8pt solid oklch(55% 0.02 70);
margin-top: 0.5em;
padding-top: 0.5em;
}
.lesson-plan .exercise-conceptmap__branch { position: relative; flex: 1; }
.lesson-plan .exercise-conceptmap__branch::before {
content: "";
position: absolute;
left: 50%;
top: -0.5em;
height: 0.5em;
border-left: 0.8pt solid oklch(55% 0.02 70);
}
.lesson-plan .exercise-conceptmap__node,
.lesson-plan .exercise-conceptmap__child {
border: 0.8pt solid oklch(55% 0.02 70);
border-radius: 2pt;
padding: 0.4em 0.35em;
margin-bottom: 0.4em;
text-align: center;
font-size: 9pt;
line-height: 1.2;
min-height: 1.15cm;
display: flex;
align-items: center;
justify-content: center;
hyphens: auto;
}
.lesson-plan .exercise-conceptmap__node { font-weight: 700; background: oklch(95% 0.01 70); }
.lesson-plan .exercise-conceptmap__node--blank,
.lesson-plan .exercise-conceptmap__child--blank { border-style: dashed; background: none; }
.lesson-plan .exercise-conceptmap__num {
font-size: 7.5pt;
font-weight: 700;
color: oklch(55% 0.02 70);
}
.lesson-plan .exercise-mathfix { break-inside: avoid; }
.lesson-plan .exercise-mathfix__problem { font-weight: 700; margin: 0.3em 0; }
.lesson-plan .exercise-mathfix__steps {
list-style: none;
padding: 0;
margin-block: 0.5em;
margin-inline: 1.5em 0;
border: 0.8pt solid oklch(55% 0.02 70);
border-radius: 2pt;
}
.lesson-plan .exercise-mathfix__step {
position: relative;
display: flex;
align-items: baseline;
gap: 0.6em;
padding: 0.35em 0.6em;
border-bottom: 0.4pt solid oklch(80% 0.01 70);
}
.lesson-plan .exercise-mathfix__step:last-child { border-bottom: 0; }
.lesson-plan .exercise-mathfix__num {
position: absolute;
inset-inline-end: 100%;
margin-block: 0.31em 0;
margin-inline: 0 0.5em;
font-size: 0.72em;
font-weight: 700;
}
.lesson-plan .exercise-mathfix__body { font-family: var(--font-mono, "JetBrains Mono", monospace); }
.lesson-plan .exercise-mathfix__answer { display: flex; align-items: center; gap: 0.4em; margin: 0.5em 0 0; }
.lesson-plan .exercise-mathfix__box {
display: inline-block;
border: 0.6pt solid oklch(45% 0.02 70);
width: 1.1cm;
height: 0.62cm;
}
.lesson-plan .exercise-rubric { break-inside: avoid; }
.lesson-plan .exercise-rubric__table {
width: 100%;
border-collapse: collapse;
margin: 0.5em 0;
font-size: 9pt;
}
.lesson-plan .exercise-rubric__table th,
.lesson-plan .exercise-rubric__table td {
border: 0.6pt solid oklch(60% 0.02 70);
padding: 0.35em 0.4em;
vertical-align: top;
line-height: 1.2;
}
.lesson-plan .exercise-rubric__table thead th { background: oklch(95% 0.01 70); text-align: center; }
.lesson-plan .exercise-rubric__table tbody th { text-align: start; font-weight: 700; width: 28%; }
.lesson-plan .exercise-rubric__corner { width: 28%; }
.lesson-plan .exercise-rubric__box {
display: block;
border: 0.6pt solid oklch(45% 0.02 70);
width: 0.42cm;
height: 0.42cm;
margin: 0 auto 0.25em;
}
.lesson-plan .exercise-rubric__descriptor { display: block; font-size: 8.5pt; }
.lesson-plan .exercise-exitticket__strips { margin: 0.5em 0; }
.lesson-plan .exercise-exitticket__strip {
border-bottom: 1pt dashed oklch(55% 0.02 70);
padding: 0.5em 0.2em 0.7em;
break-inside: avoid;
}
.lesson-plan .exercise-exitticket__name,
.lesson-plan .exercise-exitticket__q {
display: flex;
align-items: baseline;
gap: 0.4em;
margin: 0 0 0.3em;
font-size: 9.5pt;
}
.lesson-plan .exercise-exitticket__name { font-size: 8.5pt; }
.lesson-plan .exercise-exitticket__scale { margin: 0.2em 0 0; font-size: 9pt; }
.lesson-plan .exercise-exitticket__level {
display: inline-block;
border: 0.6pt solid oklch(45% 0.02 70);
border-radius: 50%;
width: 0.55cm;
height: 0.55cm;
line-height: 0.5cm;
text-align: center;
font-size: 8pt;
margin-inline-start: 0.15em;
}
.lesson-plan .exercise-argumentmap { break-inside: avoid; }
.lesson-plan .exercise-argumentmap__prompt { font-style: italic; margin: 0.3em 0 0.5em; }
.lesson-plan .exercise-argumentmap__slot {
border: 0.8pt solid oklch(55% 0.02 70);
border-radius: 2pt;
padding: 0.4em 0.55em 0.6em;
margin-bottom: 0.5em;
break-inside: avoid;
}
.lesson-plan .exercise-argumentmap__label { display: block; font-weight: 700; font-size: 9.5pt; }
.lesson-plan .exercise-argumentmap__hint {
display: block;
font-size: 8.5pt;
color: oklch(45% 0.02 70);
margin-bottom: 0.25em;
}
.lesson-plan .exercise-argumentmap__line,
.lesson-plan .exercise-labreport__line {
display: block;
border-bottom: 0.6pt solid oklch(60% 0.02 70);
height: 1.25em;
}
.lesson-plan .exercise-labreport {
break-inside: avoid;
border: 0.8pt solid oklch(60% 0.02 70);
border-radius: 2pt;
padding: 0.5em 0.7em 0.7em;
}
.lesson-plan .exercise-labreport__section { margin-top: 0.55em; }
.lesson-plan .exercise-labreport__label {
display: block;
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: oklch(45% 0.02 70);
margin-bottom: 0.2em;
}
.lesson-plan .exercise-labreport__question { font-weight: 700; margin: 0; }
.lesson-plan .exercise-labreport__materials,
.lesson-plan .exercise-labreport__steps { margin: 0; padding-inline-start: 1.3em; font-size: 9.5pt; }
.lesson-plan .exercise-labreport__materials li,
.lesson-plan .exercise-labreport__steps li { margin-bottom: 0.15em; }
.lesson-plan .exercise-labreport__record {
width: 100%;
border-collapse: collapse;
font-size: 9pt;
}
.lesson-plan .exercise-labreport__record th,
.lesson-plan .exercise-labreport__record td {
border: 0.6pt solid oklch(60% 0.02 70);
padding: 0.3em;
height: 0.75cm;
}
.lesson-plan .exercise-labreport__record th { background: oklch(95% 0.01 70); }
.lesson-plan .exercise-rolecards__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em 0.7em;
margin-top: 0.5em;
}
.lesson-plan .exercise-rolecards__situation { font-style: italic; margin: 0.3em 0; }
.lesson-plan .exercise-rolecards__card {
border: 1pt dashed oklch(55% 0.02 70);
border-radius: 2pt;
padding: 0.5em 0.55em 0.7em;
min-height: 4cm;
break-inside: avoid;
}
.lesson-plan .exercise-rolecards__name { display: block; font-weight: 700; font-size: 10.5pt; }
.lesson-plan .exercise-rolecards__goal { display: block; font-size: 9pt; margin: 0.2em 0 0.3em; }
.lesson-plan .exercise-rolecards__prepare { margin: 0; padding-inline-start: 1.1em; font-size: 8.5pt; }
.lesson-plan .exercise-rolecards__notes {
display: block;
margin-top: 0.5em;
font-size: 8pt;
color: oklch(45% 0.02 70);
border-top: 0.4pt solid oklch(75% 0.01 70);
padding-top: 0.3em;
}
.lesson-plan .exercise-codequest { break-inside: avoid; }
.lesson-plan .exercise-codequest__stages { list-style: none; margin: 0.5em 0; padding: 0; }
.lesson-plan .exercise-codequest__num { font-size: 8pt; font-weight: 700; min-width: 1.1em; }
.lesson-plan .exercise-codequest__stage {
display: flex;
align-items: baseline;
gap: 0.4em;
margin-bottom: 0.45em;
break-inside: avoid;
}
.lesson-plan .exercise-codequest__q { flex: none; }
.lesson-plan .exercise-codequest__lock {
display: flex;
align-items: center;
gap: 0.25em;
margin: 0.6em 0 0;
}
.lesson-plan .exercise-codequest__lock-label {
font-weight: 700;
font-size: 9pt;
letter-spacing: 0.04em;
margin-inline-end: 0.3em;
}
.lesson-plan .exercise-codequest__box {
display: inline-block;
border: 1pt solid oklch(45% 0.02 70);
width: 0.72cm;
height: 0.82cm;
}
.slide {
--slide-pt: 1pt;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
aspect-ratio: 16 / 9;
padding: calc(50.4 * var(--slide-pt)) calc(64.8 * var(--slide-pt));
background: var(--color-surface);
color: var(--color-ink);
font-family: var(--font-sans);
overflow: hidden;
}
.slide + .slide { break-before: page; }
.slide__stage {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
gap: calc(15.84 * var(--slide-pt));
}
.slide__title {
margin: 0;
font-size: calc(44 * var(--slide-pt));
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.01em;
}
.slide__meta {
margin: 0;
font-size: calc(14 * var(--slide-pt));
color: var(--color-ink-subtle);
}
.slide__body,
.slide__body p,
.slide__body li,
.slide__body blockquote {
font-size: calc(28 * var(--slide-pt));
line-height: 1.35;
}
.slide__body p { margin: 0 0 calc(12.96 * var(--slide-pt)); }
.slide__body p:last-child { margin-bottom: 0; }
.slide__body ul,
.slide__body ol { margin: 0; padding-inline-start: 1em; }
.slide__body li { margin-bottom: calc(10.08 * var(--slide-pt)); }
.slide__body img { max-height: calc(244.8 * var(--slide-pt)); width: auto; object-fit: contain; }
.slide__body table,
.slide__body th,
.slide__body td { font-size: calc(20 * var(--slide-pt)); }
.slide--title .slide__title { font-size: calc(54 * var(--slide-pt)); }
.slide--question .slide__title { color: var(--color-accent-ink); }
.slide--resolution { background: var(--color-canvas); }
.slide__sources {
margin: calc(14.4 * var(--slide-pt)) 0 0;
font-size: calc(11 * var(--slide-pt));
color: var(--color-ink-subtle);
}
.slide__count {
position: absolute;
inset-block-end: calc(21.6 * var(--slide-pt));
inset-inline-end: calc(28.8 * var(--slide-pt));
font-family: var(--font-mono);
font-size: calc(11 * var(--slide-pt));
color: var(--color-ink-subtle);
}
.slide__notes {
flex: 0 0 auto;
margin-block-start: calc(17.28 * var(--slide-pt));
padding-block-start: calc(11.52 * var(--slide-pt));
border-block-start: 1px solid var(--color-border);
font-size: calc(13 * var(--slide-pt));
line-height: 1.4;
color: var(--color-ink-muted);
}
.slide__notes-label {
display: block;
font-size: calc(10 * var(--slide-pt));
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-subtle);
}
.deck--live .deck__stage {
container-type: inline-size;
border: 1px solid var(--color-border);
border-radius: var(--radius-large);
overflow: hidden;
background: var(--color-surface);
}
.deck--live .slide { --slide-pt: calc(100cqw / 960); }
.deck--live .slide + .slide { break-before: auto; }
.deck__controls {
display: flex;
align-items: center;
gap: var(--space-3);
margin-block-start: var(--space-4);
}
.deck__position {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-ink-subtle);
}
.deck__hint {
margin-block-start: var(--space-5);
color: var(--color-ink-subtle);
}
.deck--live:fullscreen {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--color-ink);
padding: var(--space-4);
}
.deck--live:fullscreen .deck__controls { justify-content: center; }
@layer components {
.support-console {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--space-4);
block-size: calc(100dvh - var(--sticky-topbar-offset));
max-inline-size: var(--container-page);
margin-inline: auto;
padding: var(--space-5) var(--space-7) var(--space-6);
}
.support-console__bar {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.support-console__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.support-console__title {
font-size: var(--text-extra-large);
font-weight: 800;
letter-spacing: var(--letter-tight);
color: var(--color-ink);
line-height: var(--line-tight);
}
.support-console__body {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--container-sidebar);
gap: var(--space-6);
min-block-size: 0;
}
.support-console__chat {
display: flex;
flex-direction: column;
min-block-size: 0;
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-stack);
overflow: hidden;
}
.support-console__transcript {
flex: 1;
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.support-console__truncation {
margin: 0;
text-align: center;
color: var(--color-ink-muted);
font-size: var(--text-small);
}
.support-console__composer {
border-top: var(--hairline) solid var(--color-border);
padding: var(--space-3-5) var(--space-4-5);
background: var(--color-surface);
}
.quick-replies {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-end: var(--space-3);
}
.support-console__aside {
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-inline-end: var(--space-1);
}
.chat-message {
display: flex;
}
.chat-message--inbound {
justify-content: flex-start;
}
.chat-message--outbound {
justify-content: flex-end;
}
.chat-message__bubble {
max-inline-size: min(72%, var(--container-chat-bubble));
padding: var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-large);
background: var(--color-canvas);
box-shadow: var(--shadow-soft);
}
.chat-message--inbound .chat-message__bubble {
border-end-start-radius: var(--radius-small);
}
.chat-message--teacher .chat-message__bubble {
background: var(--color-surface);
}
.chat-message--outbound .chat-message__bubble {
border-end-end-radius: var(--radius-small);
}
.chat-message--bot .chat-message__bubble {
background: var(--color-canvas);
box-shadow: none;
border: var(--hairline) solid var(--color-border);
}
.chat-message--staff .chat-message__bubble {
background: var(--color-ink);
color: var(--color-surface);
}
.chat-message--template .chat-message__bubble {
border-style: dashed;
}
.chat-message__doc {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-0-5) var(--space-3);
align-items: center;
text-decoration: none;
color: inherit;
}
.chat-message__doc-kind {
grid-row: span 2;
font: 700 var(--text-extra-small) var(--font-mono);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-small);
background: var(--color-accent-soft);
color: var(--color-accent-ink);
}
.chat-message__doc-name {
font-weight: 600;
overflow-wrap: anywhere;
}
.chat-message__doc-open {
font-size: var(--text-small);
color: var(--color-accent-ink);
}
.chat-message__bubble p {
margin: 0;
line-height: var(--line-readable);
white-space: pre-wrap;
}
.chat-message__meta {
display: block;
font-size: var(--text-tiny);
color: var(--color-ink-muted);
margin-block-start: var(--space-1);
}
.chat-message--staff .chat-message__meta {
color: var(--color-surface);
opacity: 0.75;
}
.chat-message--media .chat-message__bubble {
border-inline-start: 3px solid var(--color-accent);
}
.chat-message__source {
display: block;
font-size: var(--text-tiny);
color: var(--color-ink-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-expanded);
margin-block-end: var(--space-1);
}
.chat-message__subtitle {
font-size: var(--text-small);
color: var(--color-ink-muted);
font-style: italic;
margin-block-start: var(--space-1);
}
.chat-empty {
margin: auto;
color: var(--color-ink-muted);
font-size: var(--text-small);
}
.chat-form .field--inline {
display: flex;
gap: var(--space-2-5);
align-items: flex-end;
}
.chat-form textarea {
flex: 1;
resize: none;
}
.chat-form .btn {
flex-shrink: 0;
}
.chat-form__hint {
margin: var(--space-1-5) 0 0;
font-size: var(--text-tiny);
color: var(--color-ink-muted);
}
@media (max-width: 980px) {
.support-console {
block-size: auto;
padding-block-end: var(--space-10);
}
.support-console__body {
grid-template-columns: 1fr;
}
.support-console__transcript {
max-block-size: calc(var(--viewport-block-size) * 0.6);
}
.support-console__aside {
overflow: visible;
}
}
}
@layer utilities {
.danger-text {
color: var(--color-danger);
}
.text-quiet {
color: var(--color-ink-muted);
}
.mono {
font-family: var(--font-mono);
}
.full-width {
inline-size: 100%;
}
.lp-nowrap {
white-space: nowrap;
}
.visually-hidden {
clip: rect(0 0 0 0);
block-size: var(--hairline);
border: 0;
clip-path: inset(50%);
inline-size: var(--hairline);
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
@media print {
nav,
.topbar,
.flash {
display: none !important;
}
}
}
@layer tokens {
.landing-page {
--lp-paper:       #f4f0e6;
--lp-paper-warm:  #ede6d4;
--lp-ink:         #1a1f1c;
--lp-ink-soft:    #3e4540;
--lp-ink-mute:    #5f655e;
--lp-ink-faint:   #656a61;
--lp-rule:        #d8d1bd;
--lp-terracotta:   #c66a3b;
--lp-terracotta-d: #9c4c26;
--lp-terra:        #c66a3b;
--lp-mustard:      #d9a83a;
--lp-blue:         #3e7fc9;
--color-canvas:   var(--lp-paper);
--color-ink:      var(--lp-ink);
--color-surface:  var(--lp-white);
--color-border:   var(--lp-rule);
--color-positive: var(--lp-wa);
--lp-yellow-soft:      color-mix(in srgb, var(--lp-mustard) 14%,   var(--lp-paper));
--lp-terracotta-light: color-mix(in srgb, var(--lp-terracotta) 22%, var(--lp-paper));
--lp-peach:            color-mix(in srgb, var(--lp-terracotta) 12%, var(--lp-paper));
--lp-paper-cream:      #faf6e9;
--lp-marker-yellow:    oklch(92% 0.13 95);
--lp-highlight-yellow: oklch(92% 0.08 90);
--lp-highlight-blue:   oklch(92% 0.06 240);
--lp-ribbon-terra: var(--lp-terracotta);
--lp-ribbon-sky:   var(--lp-blue);
--lp-yellow-mid:   color-mix(in srgb, var(--lp-mustard) 82%, var(--lp-ink));
--lp-yellow-pop:   var(--lp-mustard);
--lp-decl-sky-border:   var(--lp-blue);
--lp-decl-sky-num:      color-mix(in srgb, var(--lp-blue) 55%,       var(--lp-paper));
--lp-decl-sun-border:   var(--lp-mustard);
--lp-decl-sun-num:      color-mix(in srgb, var(--lp-mustard) 60%,   var(--lp-paper));
--lp-decl-terra-border: var(--lp-terracotta);
--lp-decl-terra-num:    color-mix(in srgb, var(--lp-terracotta) 60%, var(--lp-paper));
--lp-terra-accent: color-mix(in srgb, var(--lp-terracotta) 65%, var(--lp-paper));
--lp-terra-italic: var(--lp-terracotta);
--lp-wa:    #25d366;
--lp-wa-d:  #128c7e;
--lp-wa-bg: #dcf8c6;
--lp-white:        #ffffff;
--lp-shadow-ink:   #000000;
--lp-shadow-color: var(--lp-ink);
--lp-on-dark-mute:  color-mix(in srgb, var(--lp-paper) 64%, var(--lp-ink));
--lp-on-dark-soft:  color-mix(in srgb, var(--lp-paper) 82%, var(--lp-ink));
--lp-on-dark-warm:  color-mix(in srgb, var(--lp-paper) 78%, var(--lp-ink));
--lp-on-dark-or:    color-mix(in srgb, var(--lp-paper) 56%, var(--lp-ink));
--lp-on-dark-proof: color-mix(in srgb, var(--lp-paper) 86%, var(--lp-ink));
--lp-divider-dark:  color-mix(in srgb, var(--lp-paper) 22%, var(--lp-ink));
--lp-fs-xs: 12px;
--lp-fs-sm: 14px;
--lp-fs-base: 17px;
--lp-fs-md: 19px;
--lp-fs-lg: 22px;
--lp-fs-xl: 28px;
--lp-fs-2xl: 38px;
--lp-fs-4xl: 72px;
--lp-lh-tight: 1.05;
--lp-lh-snug: 1.2;
--lp-lh-text: 1.55;
--lp-measure: 62ch;
--lp-radius-sm: 4px;
--lp-radius: 8px;
--lp-radius-lg: 14px;
--lp-shadow-soft:
0 1px 0 color-mix(in oklch, var(--lp-shadow-color) 4%, transparent),
0 8px 24px -12px color-mix(in oklch, var(--lp-shadow-color) 10%, transparent);
--lp-shadow-card:
0 1px 0 color-mix(in oklch, var(--lp-shadow-color) 5%, transparent),
0 18px 40px -20px color-mix(in oklch, var(--lp-shadow-color) 18%, transparent);
--lp-section-y: clamp(72px, 9vw, 120px);
--lp-block-gap: clamp(40px, 5vw, 64px);
--font-display: var(--font-serif);
--font-body: var(--font-sans);
--font-mono: var(--font-sans);
}
}
@layer base {
html:has(> body.landing-page),
body.landing-page {
overflow-x: clip;
}
}
@layer utilities {
.landing-page :where(h1, h2, h3, h4, h5, h6),
.landing-page :where(h1, h2, h3, h4, h5, h6) :where(em, span, strong) {
font-style: normal;
}
.landing-page.lp-home .lp-hero h1 .lp-terra {
font-style: italic;
}
}
@layer features {
@media screen {
.lp-home main > section ~ section:not(.lp-creed),
.lp-home .lp-site-footer {
content-visibility: auto;
contain-intrinsic-block-size: auto 800px;
}
}
.landing-page a:focus-visible,
.landing-page button:focus-visible,
.landing-page summary:focus-visible,
.landing-page input:focus-visible,
.landing-page select:focus-visible,
.landing-page textarea:focus-visible {
outline: 2px solid var(--lp-ink);
outline-offset: 3px;
}
.landing-page .lp-creed :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-final-cta :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-trades :is(a, button, summary, input, select, textarea):focus-visible,
.landing-page .lp-signoff :is(a, button, summary, input, select, textarea):focus-visible {
outline-color: var(--lp-paper);
}
.landing-page ::selection {
background: var(--lp-marker-yellow);
color: var(--lp-ink);
}
.landing-page .lp-skip-link {
position: absolute;
top: -100%;
inset-inline-start: 16px;
z-index: var(--z-dropdown);
padding: 8px 16px;
background: var(--lp-ink);
color: var(--lp-paper);
font-size: 14px;
font-weight: 600;
border-radius: 0 0 8px 8px;
text-decoration: none;
transition: top 0.15s ease;
}
.landing-page .lp-skip-link:focus {
top: 0;
}
.landing-page {
font-family: var(--font-sans);
font-size: var(--lp-fs-base);
line-height: var(--lp-lh-text);
color: var(--lp-ink);
background: var(--lp-paper);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
}
.landing-page *,
.landing-page *::before,
.landing-page *::after {
box-sizing: border-box;
}
.landing-page img,
.landing-page svg {
display: block;
max-width: 100%;
}
.landing-page a:not(.btn) {
color: inherit;
text-decoration: none;
}
.landing-page a.link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page a.link:hover {
text-decoration-color: var(--lp-terracotta);
color: var(--lp-terracotta);
}
.landing-page button:where(:not(.btn)) {
font: inherit;
cursor: pointer;
}
.landing-page .lp-text-center {
text-align: center;
margin-inline-start: auto;
margin-inline-end: auto;
}
.landing-page .lp-text-mute {
color: var(--lp-ink-mute);
}
.landing-page .lp-mt-4 {
margin-top: 16px;
}
.landing-page .lp-mt-6 {
margin-top: 24px;
}
.landing-page .lp-mt-8 {
margin-top: 32px;
}
.landing-page .lp-mt-12 {
margin-top: 48px;
}
.landing-page .lp-kbd {
display: inline-block;
padding: 2px 8px;
background: var(--lp-paper-warm);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius-sm);
font-family: var(--font-mono);
font-size: 13px;
color: var(--lp-terracotta-d);
font-weight: 600;
}
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
font-family: var(--font-serif);
font-weight: 480;
letter-spacing: -0.015em;
line-height: var(--lp-lh-snug);
margin: 0;
text-wrap: balance;
}
.landing-page h1 {
font-size: var(--lp-fs-4xl);
line-height: var(--lp-lh-tight);
letter-spacing: -0.025em;
font-weight: 420;
}
.landing-page h2 {
font-size: var(--lp-fs-2xl);
}
.landing-page h3 {
font-size: var(--lp-fs-xl);
}
.landing-page h4 {
font-size: var(--lp-fs-lg);
}
.landing-page p {
margin: 0 0 1em 0;
max-width: var(--lp-measure);
text-wrap: pretty;
}
.landing-page .lp-eyebrow {
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
font-weight: 500;
display: block;
margin-bottom: 18px;
}
.landing-page .lp-eyebrow-accent {
color: var(--lp-terracotta-d);
}
.landing-page .lp-lede {
font-family: var(--font-sans);
font-size: var(--lp-fs-lg);
line-height: 1.45;
color: var(--lp-ink-soft);
font-weight: 400;
max-width: 56ch;
}
.landing-page .lp-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page .lp-wrap-narrow {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page .lp-wrap-wide {
max-width: 1360px;
margin: 0 auto;
padding: 0 32px;
}
.landing-page section {
padding: var(--lp-section-y) 0;
}
.landing-page section + section {
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-confirm {
max-inline-size: 640px;
margin-inline: auto;
padding-block: 4rem 6rem;
text-align: center;
}
.landing-page .lp-confirm__body {
margin-block-start: 1rem;
font-size: 1.125rem;
}
.landing-page .lp-confirm__actions {
margin-block-start: 2.5rem;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.landing-page .lp-bg-warm {
background: var(--lp-paper-warm);
}
.landing-page hr {
border: 0;
border-top: 1px solid var(--lp-rule);
margin: 48px 0;
}
.landing-page .lp-w-full       { width: 100%; }
.landing-page .lp-justify-center { justify-content: center; }
.landing-page .lp-flex-center  { display: flex; justify-content: center; }
.landing-page .lp-mb-28        { margin-bottom: 28px; }
.landing-page .lp-c-mute       { color: var(--lp-ink-mute); }
.landing-page .lp-c-gray       { color: var(--lp-on-dark-mute); }
.landing-page .lp-c-light      { color: var(--lp-on-dark-warm); }
.landing-page .lp-fs-11        { font-size: 11px; }
.landing-page .lp-fs-13        { font-size: 13px; }
.landing-page .lp-fs-14        { font-size: 14px; }
.landing-page .lp-lede-center  { margin: 0 auto 32px; }
.landing-page .lp-link-mute {
color: var(--lp-ink-mute);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--lp-rule);
transition: color 0.15s ease;
}
.landing-page .lp-link-mute:hover {
color: var(--lp-ink-soft);
}
.landing-page .lp-doodle-sparkle {
position: absolute;
top: -20px;
inset-inline-end: -20px;
width: 48px;
height: 48px;
color: var(--lp-mustard);
opacity: 0.8;
pointer-events: none;
}
.landing-page .lp-final-cta .lp-alt-btns {
position: relative;
}
[hidden] {
display: none !important;
}
.landing-page .lp-modes-grid {
display: grid;
grid-template-columns: 1fr minmax(0, 390px);
gap: 64px;
align-items: center;
}
.landing-page .lp-modes-grid .lp-sect-head-block {
margin-bottom: 0;
max-width: 52ch;
}
.landing-page .lp-modes-stage {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.landing-page .lp-mode {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
position: relative;
}
.landing-page .lp-mode .lp-phone-sample {
padding: 4px 12px 10px;
}
.landing-page .lp-mode-note {
font-family: var(--font-handwritten);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--lp-terracotta-d);
transform: rotate(-1.5deg);
margin-block: 0 2px;
margin-inline: 12px 0;
align-self: flex-start;
}
.landing-page .lp-mode-note::after {
content: "";
display: inline-block;
width: 18px;
height: 15px;
margin-inline-start: 8px;
vertical-align: -3px;
transform: rotate(62deg);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" fill="none" stroke="%23a8542a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16 C8 17 16 12 20 5"/><path d="M14 5 L20 5 L19 11"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}
.landing-page .lp-mode-chat {
min-width: 0;
}
.landing-page .lp-mode-chat .lp-phone__msg {
max-width: min(420px, 92%);
}
.landing-page .lp-mode-chat .lp-phone__msg--media {
max-width: min(185px, 92%);
}
.landing-page .lp-modes-foot {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.4;
color: var(--lp-ink-mute);
font-style: italic;
margin: 10px 6px 0;
}
@media (min-width: 1180px) {
.landing-page .lp-modes-grid {
grid-template-columns: 1fr minmax(0, 390px) 150px;
gap: 40px;
}
.landing-page .lp-mode .lp-mode-note {
position: absolute;
top: 8px;
margin: 0;
width: 170px;
font-size: 20px;
z-index: 1;
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note {
left: calc(100% + 16px);
text-align: left;
transform: rotate(2deg);
}
.landing-page .lp-mode:nth-child(even) .lp-mode-note {
right: calc(100% + 16px);
text-align: right;
transform: rotate(-2deg);
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note::after {
display: none;
}
.landing-page .lp-mode:nth-child(odd) .lp-mode-note::before {
content: "";
display: inline-block;
width: 18px;
height: 15px;
margin-right: 8px;
vertical-align: -3px;
transform: scaleX(-1) rotate(62deg);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" fill="none" stroke="%23a8542a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 16 C8 17 16 12 20 5"/><path d="M14 5 L20 5 L19 11"/></svg>');
background-size: contain;
background-repeat: no-repeat;
}
}
@media (max-width: 980px) {
.landing-page .lp-modes-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.landing-page .lp-modes-grid > div:last-child {
width: min(390px, 100%);
margin-inline: auto;
}
}
.landing-page .lp-photo-caption {
font-family: var(--font-sans);
font-size: 13px;
color: var(--lp-ink);
padding: 0 4px 2px;
}
.landing-page .lp-moment-item {
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-moment-item:first-child {
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-moment-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 4px;
}
.landing-page .lp-moment-item summary::-webkit-details-marker {
display: none;
}
.landing-page .lp-moment-item h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
line-height: 1.25;
margin: 0;
}
.landing-page .lp-moment-item h3 .lp-hl-yellow {
background: linear-gradient(180deg, transparent 60%, var(--lp-highlight-yellow) 60%);
padding: 0 2px;
}
.landing-page .lp-moment-item h3 .lp-hl-blue {
background: linear-gradient(180deg, transparent 60%, var(--lp-highlight-blue) 60%);
padding: 0 2px;
}
.landing-page .lp-moment-item summary::after {
content: "+";
font-family: var(--font-sans);
font-size: 24px;
font-weight: 300;
line-height: 1;
color: var(--lp-terracotta);
flex-shrink: 0;
transition: rotate 0.2s ease;
}
.landing-page .lp-moment-item summary:hover::after {
color: var(--lp-terracotta-d);
}
.landing-page .lp-moment-item[open] summary::after {
rotate: 45deg;
}
.landing-page .lp-moment-body {
padding: 4px 4px 20px;
}
.landing-page .lp-moment-item[open] .lp-moment-body {
animation: lp-moment-in 0.25s ease;
}
@keyframes lp-moment-in {
from {
opacity: 0;
translate: 0 -4px;
}
}
.landing-page .lp-moment-body p {
font-size: 16px;
line-height: 1.6;
color: var(--lp-ink-soft);
max-width: 60ch;
}
.landing-page .lp-moment-body em {
font-style: italic;
color: var(--lp-terracotta-d);
}
.landing-page .lp-moment-body .lp-moment-foot {
font-size: 13.5px;
color: var(--lp-ink-mute);
margin-top: 8px;
}
.landing-page .lp-moment-media {
padding: 4px 0 24px;
}
.landing-page .lp-moment-media .lp-phone__audio {
min-width: 0;
}
@media (min-width: 1100px) {
.landing-page .lp-moments {
position: relative;
padding-inline-start: 462px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .lp-moment-media {
position: absolute;
top: 50%;
inset-inline-start: 0;
width: 390px;
margin-top: -200px;
padding: 0;
}
.landing-page .lp-moment-media .lp-phone {
width: 100%;
--phone-overflow: 26px;
}
.landing-page .lp-moment-media .lp-phone__screen {
min-height: 400px;
}
.landing-page .lp-moment-body {
min-height: 132px;
}
.landing-page .lp-moment-item[open] .lp-moment-media {
animation: lp-phone-swap 0.35s ease;
}
}
@keyframes lp-phone-swap {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-moment-item[open] .lp-moment-body,
.landing-page .lp-moment-item[open] .lp-moment-media {
animation: none;
}
}
.landing-page .lp-section-slim {
padding: 44px 0;
}
.landing-page .lp-reading-note {
display: flex;
align-items: flex-start;
gap: 16px;
max-width: 720px;
margin-inline: auto;
}
.landing-page .lp-reading-ico {
width: 34px;
height: 34px;
flex-shrink: 0;
margin-top: 2px;
}
.landing-page .lp-reading-note p {
font-size: 15.5px;
line-height: 1.6;
color: var(--lp-ink-soft);
}
.landing-page .lp-reading-authors {
display: block;
margin-top: 4px;
font-size: 13.5px;
font-style: italic;
color: var(--lp-ink-mute);
}
}
@layer features {
.landing-page .lp-topnav {
display: flex;
align-items: center;
gap: 32px;
padding: 14px 31px;
border: 1px solid transparent;
border-bottom-color: var(--lp-rule);
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--lp-paper);
width: min(1360px, 100%);
margin-inline: auto;
transition:
top 0.3s ease,
width 0.3s ease,
border-radius 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease,
box-shadow 0.3s ease;
}
@media (min-width: 981px) {
.landing-page .lp-topnav[data-nav-ready]:not([data-floating]) {
background: transparent;
border-bottom-color: transparent;
}
}
.landing-page .lp-topnav[data-floating] {
top: 14px;
width: min(1360px, calc(100% - 24px));
border-color: var(--lp-rule);
border-radius: 999px;
background: color-mix(in srgb, var(--lp-paper) 90%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--lp-shadow-color) 50%, transparent);
}
.landing-page .lp-brand {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
flex-shrink: 0;
}
.landing-page .lp-brand-logo {
display: block;
height: auto;
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav {
display: flex;
gap: 28px;
flex: 1;
justify-content: center;
}
.landing-page .lp-topnav-nav a {
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
position: relative;
padding: 4px 0;
transition: color 0.15s ease;
}
.landing-page .lp-topnav-nav a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-topnav-nav a.is-active {
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav a.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--lp-terracotta);
border-radius: 1px;
}
.landing-page .lp-topnav .lp-actions {
display: flex;
gap: 14px;
align-items: center;
flex-shrink: 0;
}
.landing-page .lp-topnav .lp-actions .lp-link {
font-size: 14px;
color: var(--lp-ink-soft);
transition: color 0.15s ease;
}
.landing-page .lp-topnav .lp-actions .lp-link:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-toggle {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
.landing-page .lp-burger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
border: 1px solid var(--lp-rule);
border-radius: 8px;
background: var(--lp-paper);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s ease;
}
.landing-page .lp-burger:hover {
border-color: var(--lp-ink);
}
.landing-page .lp-burger-bar {
display: block;
width: 18px;
height: 2px;
background: var(--lp-ink);
border-radius: 1px;
transition:
transform 0.2s ease,
opacity 0.15s ease;
transform-origin: center;
}
.landing-page .lp-nav-toggle:focus-visible ~ .lp-burger {
outline: 2px solid var(--lp-ink);
outline-offset: 3px;
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(2) {
opacity: 0;
}
.landing-page
.lp-nav-toggle:checked
~ .lp-burger
.lp-burger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.landing-page .lp-nav-mobile-only {
display: none;
}
.landing-page .lp-nav-group {
position: relative;
}
.landing-page .lp-topnav-nav .lp-nav-group-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
padding: 4px 0;
cursor: pointer;
transition: color 0.15s ease;
}
.landing-page .lp-nav-group-btn:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-group-btn.is-active {
color: var(--lp-ink);
}
.landing-page .lp-nav-group-btn.is-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: var(--lp-terracotta);
border-radius: 1px;
}
.landing-page .lp-nav-chevron {
transition: transform 0.15s ease;
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] .lp-nav-chevron {
transform: rotate(180deg);
}
.landing-page .lp-nav-panel {
display: none;
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
width: 324px;
padding: 10px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
box-shadow: 0 18px 40px -18px color-mix(in oklch, var(--lp-shadow-color) 28%, transparent);
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
display: block;
animation: lp-nav-panel-in 0.16s ease-out;
}
@keyframes lp-nav-panel-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-4px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.landing-page .lp-nav-panel::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 10px;
height: 10px;
background: var(--lp-paper);
border-left: 1px solid var(--lp-rule);
border-top: 1px solid var(--lp-rule);
transform: translateX(-50%) rotate(45deg);
}
.landing-page .lp-nav-group-label {
display: none;
}
@media (min-width: 981px) and (max-width: 1100px) {
.landing-page .lp-topnav {
padding-inline: 20px;
}
.landing-page .lp-topnav-nav {
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-topnav {
transition: none;
}
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
animation: none;
}
}
.landing-page .lp-topnav-nav .lp-nav-card {
display: flex;
flex-direction: column;
gap: 3px;
padding: 13px 16px;
border-radius: 10px;
transition: background 0.12s ease;
}
.landing-page .lp-topnav-nav .lp-nav-card + .lp-nav-card {
margin-top: 2px;
}
.landing-page .lp-topnav-nav .lp-nav-card:hover {
background: var(--lp-paper-warm);
color: inherit;
}
.landing-page .lp-nav-card strong {
font-size: 14px;
font-weight: 600;
color: var(--lp-ink);
}
.landing-page .lp-topnav-nav .lp-nav-card.is-active {
background: var(--lp-paper-warm);
}
.landing-page .lp-topnav-nav .lp-nav-card.is-active::after {
content: none;
}
.landing-page .lp-nav-card.is-active strong {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-card span {
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-topnav .lp-lang-btn {
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: none;
font: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--lp-ink-soft);
padding: 4px 0;
cursor: pointer;
transition: color 0.15s ease;
}
.landing-page .lp-topnav .lp-lang-btn:hover,
.landing-page .lp-topnav .lp-lang-btn[aria-expanded="true"] {
color: var(--lp-terracotta);
}
.landing-page .lp-lang .lp-nav-panel {
width: 176px;
padding: 6px;
margin: 0;
list-style: none;
}
.landing-page .lp-lang-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
border-radius: 9px;
font-size: 14px;
font-weight: 500;
color: var(--lp-ink-soft);
transition: background 0.12s ease, color 0.12s ease;
}
.landing-page .lp-lang-option:hover {
background: var(--lp-paper-warm);
color: var(--lp-ink);
}
.landing-page .lp-lang-option[aria-current] {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-lang-option[aria-current]::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lp-terracotta);
}
.landing-page .lp-lang-list {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 13px;
}
.landing-page .lp-lang-list.lp-nav-mobile-only {
display: none;
}
.landing-page .lp-lang-list > * {
color: var(--lp-ink-soft);
transition: color 0.15s ease;
}
.landing-page .lp-lang-list a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-lang-list [aria-current] {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-lang-hint {
position: fixed;
inset-inline: 16px;
inset-block-end: max(16px, env(safe-area-inset-bottom));
z-index: 60;
width: fit-content;
max-width: calc(100% - 32px);
margin-inline: auto;
display: flex;
justify-content: center;
padding: 10px 20px;
background: var(--lp-yellow-soft);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: 0 4px 16px color-mix(in oklch, var(--lp-ink) 12%, transparent);
font-size: 14px;
color: var(--lp-ink-soft);
}
.landing-page .lp-lang-hint-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 12px;
margin: 0;
max-width: none;
}
.landing-page .lp-lang-hint[hidden],
.landing-page .lp-lang-hint-item[hidden] {
display: none;
}
.landing-page .lp-lang-hint-item a {
color: var(--lp-terracotta-d);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-page .lp-lang-hint-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: none;
color: var(--lp-ink-mute);
cursor: pointer;
}
.landing-page .lp-lang-hint-close:hover {
background: color-mix(in oklch, var(--lp-ink) 8%, transparent);
color: var(--lp-ink);
}
}
@layer features {
.landing-page .lp-hero {
padding: 32px 0 48px 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: calc(100vh - 84px);
min-height: calc(100svh - 84px);
}
.landing-page .lp-hero > .lp-wrap-wide {
width: 100%;
}
.landing-page .lp-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 72px;
align-items: center;
}
.landing-page .lp-hero-grid > * {
min-width: 0;
}
.landing-page .lp-hero--pricing,
.landing-page .lp-hero--teachers,
.landing-page .lp-hero--schools {
min-height: auto;
align-items: flex-start;
}
.landing-page .lp-hero--pricing {
padding-block: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 28px);
}
.landing-page .lp-hero--teachers > .lp-wrap-wide,
.landing-page .lp-hero--schools > .lp-wrap-wide {
max-width: 1120px;
}
.landing-page .lp-hero--teachers .lp-hero-copy,
.landing-page .lp-hero--schools .lp-hero-copy {
width: 100%;
max-width: 1000px;
}
.landing-page .lp-hero--teachers .lp-teacher-workflow {
margin-block-start: 40px;
}
.landing-page .lp-hero h1 {
font-size: clamp(40px, 5.4vw, 74px);
line-height: 0.98;
letter-spacing: -0.03em;
font-weight: 380;
margin: 0 0 22px 0;
}
.landing-page .lp-hero h1 .lp-marker {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-marker-yellow) 60%
);
padding: 0 4px;
}
.landing-page .lp-hero h1 .lp-terra {
font-family: var(--font-serif);
color: var(--lp-terracotta);
font-style: normal;
font-weight: 420;
}
.landing-page .lp-teacher-workflow {
width: 100%;
margin: 0;
padding: 0;
}
.landing-page .lp-teacher-workflow__steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: teacher-workflow;
border-block: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step {
counter-increment: teacher-workflow;
position: relative;
min-width: 0;
padding: 24px;
border-inline-end: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step::before {
content: counter(teacher-workflow, decimal-leading-zero);
display: block;
margin-bottom: 14px;
color: var(--lp-terracotta);
font-family: var(--font-serif);
font-size: var(--lp-fs-2xl);
line-height: 1;
}
.landing-page .lp-teacher-workflow__step:last-child {
border-inline-end: 0;
}
.landing-page .lp-teacher-workflow__caption {
display: block;
margin-bottom: 16px;
color: var(--lp-ink-mute);
font-size: var(--lp-fs-sm);
}
.landing-page .lp-teacher-workflow :where(h2, h3, h4) {
margin: 0 0 8px;
color: var(--lp-ink);
}
.landing-page .lp-teacher-workflow :where(p, .lp-teacher-workflow__request, .lp-teacher-workflow__result) {
margin: 0;
color: var(--lp-ink-soft);
font-size: var(--lp-fs-sm);
}
.landing-page .lp-teacher-workflow__result {
margin-top: 8px;
color: var(--lp-ink);
font-weight: 560;
}
.landing-page .lp-teacher-workflow .lp-phone__doc {
min-width: 0;
max-width: 100%;
}
@media (max-width: 760px) {
.landing-page .lp-teacher-workflow__steps {
grid-template-columns: minmax(0, 1fr);
}
.landing-page .lp-teacher-workflow__step {
border-inline-end: 0;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-teacher-workflow__step:last-child {
border-bottom: 0;
}
}
.landing-page .lp-hero .lp-lede {
font-size: 22px;
line-height: 1.45;
color: var(--lp-ink-soft);
max-width: 48ch;
margin: 0 0 26px 0;
}
.landing-page .lp-hero-cta {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.landing-page .lp-hero-cta .lp-small-note {
flex-basis: 100%;
margin-inline-start: 0;
font-size: 13px;
color: var(--lp-ink-mute);
}
.landing-page .lp-hero-qr {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding-block: 14px;
padding-inline: 14px 20px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 8px;
max-width: fit-content;
box-shadow: 0 1px 0 color-mix(in oklch, var(--lp-shadow-ink) 2%, transparent);
}
.landing-page .lp-hero-qr .lp-qr-target {
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.landing-page .lp-hero-qr .lp-qr-target svg,
.landing-page .lp-hero-qr .lp-qr-target img {
width: 100%;
height: 100%;
display: block;
}
.landing-page .lp-qr-stage .lp-qr-target {
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.landing-page .lp-qr-stage .lp-qr-target svg,
.landing-page .lp-qr-stage .lp-qr-target img {
width: 100%;
height: 100%;
display: block;
}
.landing-page .lp-hero-qr .lp-qr-copy {
display: flex;
flex-direction: column;
gap: 2px;
}
.landing-page .lp-hero-qr .lp-qr-label {
font-size: 16px;
font-weight: 500;
line-height: 1.2;
}
.landing-page .lp-hero-qr .lp-qr-sub {
font-size: 13px;
color: var(--lp-ink-mute);
line-height: 1.4;
max-width: 22ch;
}
.landing-page .lp-trust-strip.lp-hero-trust {
margin-top: 36px;
padding-top: 22px;
border-top: 1px solid var(--lp-rule);
justify-content: flex-start;
}
.landing-page .lp-launch-note {
display: inline-block;
position: relative;
max-width: 25rem;
margin-bottom: 34px;
padding: 16px 20px 14px;
background: var(--lp-white);
color: var(--lp-ink);
text-decoration: none;
rotate: -1.4deg;
box-shadow:
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent),
0 10px 22px -12px color-mix(in oklch, var(--lp-shadow-ink) 40%, transparent);
transition: rotate 0.18s ease, box-shadow 0.18s ease;
}
.landing-page .lp-launch-note::before {
content: "";
position: absolute;
top: -11px;
left: -18px;
width: 84px;
height: 26px;
rotate: -28deg;
background: var(--postit-tape);
border-left: 1px solid var(--postit-tape-highlight);
border-right: 1px solid var(--postit-tape-shadow);
}
.landing-page .lp-launch-note:hover,
.landing-page .lp-launch-note:focus-visible {
rotate: -0.4deg;
box-shadow:
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent),
0 16px 30px -14px color-mix(in oklch, var(--lp-shadow-ink) 45%, transparent);
}
.landing-page .lp-launch-note__kicker {
display: block;
margin-bottom: 2px;
font-family: var(--font-handwritten);
font-size: 25px;
line-height: 1;
color: var(--lp-terracotta-d);
}
.landing-page .lp-launch-note__text {
display: block;
font-size: 16px;
line-height: 1.35;
font-weight: 600;
}
.landing-page .lp-launch-note__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 13px;
color: var(--lp-terracotta-d);
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-page .lp-launch-note__cta svg {
flex-shrink: 0;
transition: transform 0.18s ease;
}
.landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: translateX(3px);
}
[dir="rtl"] .landing-page .lp-launch-note__cta svg {
transform: scaleX(-1);
}
[dir="rtl"] .landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: scaleX(-1) translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-launch-note,
.landing-page .lp-launch-note__cta svg {
transition: none;
}
.landing-page .lp-launch-note:hover {
rotate: -1.4deg;
}
.landing-page .lp-launch-note:hover .lp-launch-note__cta svg {
transform: none;
}
}
@media (min-width: 981px) and (max-height: 800px) {
.landing-page .lp-hero {
padding: 20px 0 32px 0;
}
.landing-page .lp-hero h1 {
font-size: clamp(38px, 4.8vw, 62px);
margin-bottom: 18px;
}
.landing-page .lp-hero .lp-lede {
font-size: 20px;
margin-bottom: 20px;
}
.landing-page .lp-hero-qr {
margin-top: 18px;
}
.landing-page .lp-trust-strip.lp-hero-trust {
margin-top: 26px;
padding-top: 18px;
}
}
@media (min-width: 981px) {
.landing-page .lp-hero--pricing h1 {
font-size: clamp(40px, 5vw, 64px);
}
}
@media (min-width: 981px) and (max-height: 920px) {
.landing-page .lp-hero:has(.lp-launch-note) {
padding: 14px 0 14px 0;
}
.landing-page .lp-hero:has(.lp-launch-note) h1 {
font-size: clamp(38px, 4.8vw, 62px);
margin-bottom: 18px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-lede {
font-size: 20px;
margin-bottom: 20px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-trust-strip.lp-hero-trust {
margin-top: 26px;
padding-top: 18px;
}
.landing-page .lp-launch-note {
margin-bottom: 20px;
padding: 11px 16px 10px;
}
.landing-page .lp-launch-note__kicker {
font-size: 21px;
}
.landing-page .lp-launch-note__text {
font-size: 15px;
}
.landing-page .lp-launch-note__cta {
margin-top: 5px;
font-size: 12.5px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-hero-qr {
margin-top: 8px;
padding-block: 8px;
padding-inline: 8px 16px;
gap: 12px;
}
.landing-page .lp-hero:has(.lp-launch-note) .lp-qr-target {
width: 76px;
height: 76px;
}
}
@media (max-width: 980px) {
.landing-page .lp-launch-note {
margin-bottom: 22px;
padding: 12px 16px 11px;
}
.landing-page .lp-launch-note__kicker {
font-size: 22px;
}
.landing-page .lp-launch-note__text {
font-size: 15px;
}
.landing-page .lp-launch-note__cta {
margin-top: 6px;
}
}
}
@layer features {
.landing-page {
--phone-ink: #111b21;
}
.landing-page .lp-phone,
.landing-page .lp-phone-sample {
--phone-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--phone-chrome: #f7f2ea;
--phone-wallpaper: #ede6da;
--phone-icon: #54656f;
--phone-tick: #53bdeb;
--phone-bubble-me: var(--lp-wa-bg);
--phone-bubble-them: var(--lp-white);
--phone-overflow: 40px;
font-family: var(--phone-font);
}
.landing-page .lp-phone {
width: min(375px, 100%);
margin-inline: auto;
position: relative;
}
.landing-page .lp-phone-sample {
--phone-overflow: 0px;
display: flex;
flex-direction: column;
padding: 8px 14px 14px;
border-radius: 12px;
background-color: var(--phone-wallpaper);
background-image: url("/assets/wa-doodles-e0095578.svg");
background-size: 240px 240px;
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent);
}
.landing-page .lp-phone__screen {
border-radius: 44px;
background: var(--phone-chrome);
display: flex;
flex-direction: column;
}
.landing-page .lp-phone__head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 10px;
box-shadow: 0 1px 0 color-mix(in oklch, var(--lp-shadow-ink) 7%, transparent);
position: relative;
z-index: 2;
}
.landing-page .lp-phone__back {
color: var(--phone-icon);
display: flex;
}
.landing-page .lp-phone__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
background: var(--lp-paper);
display: grid;
place-items: center;
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
}
.landing-page .lp-phone__avatar svg {
display: block;
}
.landing-page .lp-phone__avatar--person {
background: #d6dbd9;
color: var(--lp-white);
overflow: hidden;
}
.landing-page .lp-phone__who {
flex: 1;
min-width: 0;
line-height: 1.2;
}
.landing-page .lp-phone__name {
font-size: 16px;
font-weight: 600;
color: var(--phone-ink);
letter-spacing: -0.01em;
}
.landing-page .lp-phone__status {
font-size: 12px;
color: var(--phone-icon);
position: relative;
display: inline-block;
}
.landing-page .lp-phone__status-typing {
display: none;
position: absolute;
inset: 0;
min-width: max-content;
background: var(--phone-chrome);
opacity: 0;
}
.landing-page .lp-phone__headicons {
display: flex;
align-items: center;
gap: 17px;
color: var(--phone-icon);
}
.landing-page .lp-phone__headicons svg {
display: block;
}
.landing-page .lp-phone__body {
flex: 1;
display: flex;
flex-direction: column;
border-radius: 0 0 44px 44px;
background-color: var(--phone-wallpaper);
background-image: url("/assets/wa-doodles-e0095578.svg");
background-size: 240px 240px;
}
.landing-page .lp-phone__msgs {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 14px 6px;
}
.landing-page .lp-phone__chip {
align-self: center;
background: color-mix(in srgb, var(--lp-white) 88%, var(--phone-wallpaper));
color: var(--phone-icon);
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 8px;
box-shadow: 0 1px 0.5px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
margin-bottom: 5px;
}
.landing-page .lp-phone__chip--e2e {
background: #fff4d7;
color: #5c4a0a;
text-align: center;
max-width: 88%;
line-height: 1.35;
font-weight: 400;
}
.landing-page .lp-phone__msg {
max-width: 88%;
padding: 6px 9px 7px;
border-radius: 9px;
font-size: 14.2px;
line-height: 1.38;
color: var(--phone-ink);
box-shadow:
0 1px 1.5px color-mix(in oklch, var(--lp-shadow-ink) 12%, transparent),
0 8px 20px -12px color-mix(in oklch, var(--lp-shadow-ink) 16%, transparent);
position: relative;
margin-top: 2px;
}
.landing-page .lp-phone__msg--them {
align-self: flex-start;
background: var(--phone-bubble-them);
margin-inline-start: calc(-1 * var(--phone-overflow));
}
.landing-page .lp-phone__msg--me {
align-self: flex-end;
background: var(--phone-bubble-me);
margin-inline-end: calc(-1 * var(--phone-overflow));
}
.landing-page .lp-phone__msg--tail {
margin-top: 10px;
}
.landing-page .lp-phone__msg--tail::before {
content: "";
position: absolute;
top: 0;
width: 8px;
height: 13px;
background-repeat: no-repeat;
background-size: 8px 13px;
}
.landing-page .lp-phone__msg--them.lp-phone__msg--tail {
border-top-left-radius: 0;
}
.landing-page .lp-phone__msg--them.lp-phone__msg--tail::before {
left: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M8 0 H2 C0.6 0 -0.2 1.6 0.8 2.7 L8 10 Z" fill="white"/></svg>');
}
.landing-page .lp-phone__msg--me.lp-phone__msg--tail {
border-top-right-radius: 0;
}
.landing-page .lp-phone__msg--me.lp-phone__msg--tail::before {
right: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M0 0 H6 C7.4 0 8.2 1.6 7.2 2.7 L0 10 Z" fill="%23dcf8c6"/></svg>');
}
[dir="rtl"] .landing-page .lp-phone__msg--them.lp-phone__msg--tail {
border-top-left-radius: 9px;
border-top-right-radius: 0;
}
[dir="rtl"] .landing-page .lp-phone__msg--them.lp-phone__msg--tail::before {
left: auto;
right: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M0 0 H6 C7.4 0 8.2 1.6 7.2 2.7 L0 10 Z" fill="white"/></svg>');
}
[dir="rtl"] .landing-page .lp-phone__msg--me.lp-phone__msg--tail {
border-top-right-radius: 9px;
border-top-left-radius: 0;
}
[dir="rtl"] .landing-page .lp-phone__msg--me.lp-phone__msg--tail::before {
right: auto;
left: -8px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M8 0 H2 C0.6 0 -0.2 1.6 0.8 2.7 L8 10 Z" fill="%23dcf8c6"/></svg>');
}
.landing-page .lp-phone__msg b {
font-weight: 600;
}
.landing-page .lp-phone__fwd {
display: flex;
align-items: center;
gap: 4px;
font-size: 12.5px;
font-style: italic;
color: color-mix(in oklch, var(--lp-shadow-ink) 42%, transparent);
margin-bottom: 4px;
}
.landing-page .lp-phone__fwd svg {
display: block;
flex-shrink: 0;
}
.landing-page .lp-phone__sender {
display: block;
font-size: 12.5px;
font-weight: 650;
color: color-mix(in srgb, var(--lp-blue) 85%, var(--lp-ink));
margin-bottom: 2px;
}
.landing-page .lp-phone__msg--media {
padding: 5px 5px 7px;
max-width: 200px;
width: 100%;
}
.landing-page .lp-phone__msg--media .lp-phone__photo-img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.landing-page .lp-phone__msg--media .lp-photo-caption {
display: block;
padding: 4px 4px 0;
}
.landing-page .lp-phone__msg--media .lp-phone__time {
margin-inline-end: 2px;
}
.landing-page .lp-phone__time {
float: right;
margin: 8px -2px -4px 10px;
font-size: 10.5px;
color: color-mix(in oklch, var(--lp-shadow-ink) 44%, transparent);
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
}
[dir="rtl"] .landing-page .lp-phone__back svg {
transform: scaleX(-1);
}
[dir="rtl"] .landing-page .lp-phone__time {
float: left;
margin: 8px 10px -4px -2px;
}
.landing-page .lp-phone__ticks {
color: var(--phone-tick);
display: inline-flex;
}
.landing-page .lp-phone__audio {
display: flex;
align-items: center;
gap: 8px;
min-width: 198px;
padding: 6px 2px 4px;
color: var(--phone-icon);
}
.landing-page .lp-phone__audio svg {
display: block;
flex-shrink: 0;
}
.landing-page .lp-phone__audio-dur {
font-size: 11px;
color: color-mix(in oklch, var(--lp-shadow-ink) 45%, transparent);
}
.landing-page .lp-phone__msg--reacted {
margin-bottom: 18px;
}
.landing-page .lp-phone__react {
position: absolute;
inset-inline-start: 12px;
bottom: -14px;
background: var(--lp-white);
border-radius: 12px;
padding: 2px 8px 3px;
font-size: 13px;
line-height: 1.3;
box-shadow:
0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent),
0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 14%, transparent);
}
.landing-page .lp-phone__doc {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
margin: 0 0 5px;
border-radius: 7px;
background: color-mix(in oklch, var(--lp-shadow-ink) 4%, transparent);
min-width: 218px;
}
.landing-page .lp-phone__doc-ico {
width: 34px;
height: 40px;
border-radius: 4px;
background: var(--lp-white);
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--lp-terracotta);
box-shadow: 0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 12%, transparent);
position: relative;
}
.landing-page .lp-phone__doc-ext {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 7px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--lp-terracotta);
}
.landing-page .lp-phone__doc-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.landing-page .lp-phone__doc-name {
font-size: 13px;
font-weight: 500;
color: var(--phone-ink);
line-height: 1.25;
overflow-wrap: anywhere;
}
.landing-page .lp-phone__doc-meta {
font-size: 11px;
color: var(--phone-icon);
margin-top: 2px;
}
.landing-page .lp-phone__inputbar {
display: flex;
align-items: center;
gap: 7px;
padding: 6px 12px 8px;
}
.landing-page .lp-phone__field {
flex: 1;
display: flex;
align-items: center;
gap: 9px;
background: var(--lp-white);
border-radius: 24px;
padding: 10px 13px;
color: var(--phone-icon);
font-size: 14.5px;
box-shadow: 0 1px 2px color-mix(in oklch, var(--lp-shadow-ink) 8%, transparent);
}
.landing-page .lp-phone__field .lp-phone__ph {
flex: 1;
}
.landing-page .lp-phone__field svg {
display: block;
color: var(--phone-icon);
flex-shrink: 0;
}
.landing-page .lp-phone__mic {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--lp-wa);
display: grid;
place-items: center;
color: var(--lp-white);
flex-shrink: 0;
box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--lp-wa) 55%, transparent);
}
.landing-page .lp-phone--animated .lp-phone__msg {
visibility: hidden;
animation: lp-phone-msg-in 0.35s ease forwards;
animation-delay: var(--delay, 0s);
}
.landing-page .lp-phone--animated .lp-phone__react {
visibility: hidden;
animation: lp-phone-react-in 0.3s ease forwards;
animation-delay: var(--delay, 0s);
}
.landing-page .lp-phone--animated .lp-phone__status-typing {
display: block;
animation: lp-phone-typing 10.2s linear forwards;
}
@keyframes lp-phone-typing {
0%, 8.8% { opacity: 0; }
9.3%, 21.3% { opacity: 1; }
21.8%, 33.3% { opacity: 0; }
33.8%, 46.8% { opacity: 1; }
47.3%, 86.2% { opacity: 0; }
86.7%, 99.5% { opacity: 1; }
100% { opacity: 0; }
}
.landing-page .lp-phone--long .lp-phone__status-typing {
animation-name: lp-phone-typing-long;
animation-duration: 12.4s;
}
@keyframes lp-phone-typing-long {
0%, 7.5% { opacity: 0; }
7.7%, 17.5% { opacity: 1; }
17.9%, 27.4% { opacity: 0; }
27.8%, 38.4% { opacity: 1; }
38.9%, 70.9% { opacity: 0; }
71.3%, 81.8% { opacity: 1; }
82.7%, 91.5% { opacity: 0; }
91.9%, 99.6% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes lp-phone-react-in {
from {
visibility: visible;
opacity: 0;
transform: scale(0.4);
}
to {
visibility: visible;
opacity: 1;
transform: scale(1);
}
}
@keyframes lp-phone-msg-in {
from {
visibility: visible;
opacity: 0;
transform: translateY(8px);
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.landing-page .lp-phone--animated .lp-phone__msg,
.landing-page .lp-phone--animated .lp-phone__react {
visibility: visible;
opacity: 1;
animation: none;
}
.landing-page .lp-phone--animated .lp-phone__status-typing {
display: none;
}
}
.landing-page .lp-phone--panel {
width: min(390px, 100%);
}
.landing-page .lp-phone--panel .lp-phone__screen {
aspect-ratio: auto;
border-radius: 24px;
box-shadow:
0 0 0 1px color-mix(in oklch, var(--lp-shadow-ink) 5%, transparent),
0 2px 6px color-mix(in oklch, var(--lp-shadow-ink) 6%, transparent),
0 28px 56px -26px color-mix(in oklch, var(--lp-shadow-ink) 22%, transparent);
}
.landing-page .lp-phone--panel .lp-phone__head {
border-radius: 24px 24px 0 0;
background: var(--phone-chrome);
padding-top: 12px;
}
.landing-page .lp-phone--panel .lp-phone__body {
border-radius: 0 0 24px 24px;
}
.landing-page .lp-phone--panel .lp-phone__msgs {
padding: 14px 18px 10px;
gap: 4px;
}
.landing-page .lp-phone--panel .lp-phone__inputbar {
padding-bottom: 14px;
}
@media (min-width: 981px) and (max-height: 920px) {
.landing-page .lp-phone__msg {
font-size: 13.4px;
}
.landing-page .lp-phone--panel .lp-phone__msgs {
padding: 10px 16px 8px;
}
.landing-page .lp-phone__head {
padding-block: 8px;
}
.landing-page .lp-phone--panel .lp-phone__inputbar {
padding-bottom: 10px;
}
}
@media (min-width: 981px) and (max-height: 850px) {
.landing-page .lp-phone--long .lp-phone__chip--e2e {
display: none;
}
.landing-page .lp-phone--long .lp-phone__msg {
font-size: 12.8px;
}
.landing-page .lp-phone--long .lp-phone__doc {
padding-block: 6px;
}
.landing-page .lp-phone--long.lp-phone--panel .lp-phone__msgs {
gap: 2px;
padding: 8px 16px 6px;
}
}
@media (max-width: 480px) {
.landing-page .lp-phone {
--phone-overflow: 8px;
}
.landing-page .lp-phone__screen {
border-radius: 38px;
}
.landing-page .lp-phone__body {
border-radius: 0 0 38px 38px;
}
}
}
@layer features {
.landing-page .lp-creed {
background: var(--lp-ink);
color: var(--lp-paper);
position: relative;
--lp-rule:      var(--lp-divider-dark);
--lp-ink-soft:  var(--lp-on-dark-soft);
--lp-ink-mute:  var(--lp-on-dark-mute);
--lp-ink-faint: var(--lp-on-dark-mute);
}
.landing-page .lp-creed-belief {
padding: 96px 0 80px;
text-align: center;
}
.landing-page .lp-creed-belief .lp-eyebrow {
margin-bottom: 28px;
}
.landing-page .lp-creed-belief h2 {
font-size: clamp(32px, 4vw, 56px);
color: var(--lp-paper);
line-height: 1.14;
font-weight: 400;
max-width: 30ch;
margin: 0 auto 56px auto;
text-align: center;
}
.landing-page .lp-creed-belief h2 .lp-line {
display: block;
text-wrap: balance;
}
.landing-page .lp-creed-belief h2 em {
color: var(--lp-yellow-pop);
font-style: italic;
font-weight: 380;
}
.landing-page .lp-declarations {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 860px;
margin: 0 auto;
}
.landing-page .lp-declaration {
border-top: 1px solid var(--lp-divider-dark);
padding-top: 16px;
text-align: center;
}
.landing-page .lp-declaration--sky   { border-top-color: var(--lp-decl-sky-border); }
.landing-page .lp-declaration--sun   { border-top-color: var(--lp-decl-sun-border); }
.landing-page .lp-declaration--terra { border-top-color: var(--lp-decl-terra-border); }
.landing-page .lp-declaration .lp-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--lp-on-dark-mute);
margin-bottom: 12px;
}
.landing-page .lp-declaration--sky   .lp-num { color: var(--lp-decl-sky-num); }
.landing-page .lp-declaration--sun   .lp-num { color: var(--lp-decl-sun-num); }
.landing-page .lp-declaration--terra .lp-num { color: var(--lp-decl-terra-num); }
.landing-page .lp-declaration h3 {
font-size: 21px;
color: var(--lp-paper);
line-height: 1.3;
font-weight: 440;
margin-bottom: 0;
}
.landing-page .lp-declaration p {
font-size: 15px;
line-height: 1.55;
color: var(--lp-on-dark-warm);
max-width: none;
}
.landing-page .lp-creed-honesty {
padding: 88px 0 96px;
}
.landing-page .lp-creed-honesty .lp-h-section {
color: var(--lp-paper);
}
.landing-page .lp-creed-honesty .lp-audience-col.lp-yes h3,
.landing-page .lp-creed-honesty .lp-audience-col.lp-yes li::before,
.landing-page .lp-creed-honesty .lp-audience-foot a {
color: var(--lp-terra-accent);
}
.landing-page .lp-creed-honesty .lp-audience-col li {
color: var(--lp-paper);
}
.landing-page .lp-creed-honesty .lp-audience-close {
color: var(--lp-paper);
}
.landing-page .lp-scratch-out {
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
background-image: repeating-linear-gradient(
-8deg,
transparent 0 3px,
color-mix(in srgb, var(--lp-terracotta) 70%, transparent) 3px 4px,
transparent 4px 7px
);
background-size: 100% 8px;
background-position: 0 52%;
background-repeat: no-repeat;
padding-inline: 0.1em;
margin-inline: -0.1em;
}
.landing-page .lp-bracket-frame {
position: relative;
padding: 0 22px;
display: inline-block;
color: var(--lp-yellow-pop);
}
.landing-page .lp-bracket-frame::before,
.landing-page .lp-bracket-frame::after {
content: "";
position: absolute;
top: -6px;
bottom: -6px;
width: 14px;
border: 2px solid var(--lp-yellow-pop);
pointer-events: none;
}
.landing-page .lp-bracket-frame::before {
left: 0;
border-right: 0;
border-radius: 4px 0 0 4px;
}
.landing-page .lp-bracket-frame::after {
right: 0;
border-left: 0;
border-radius: 0 4px 4px 0;
}
.landing-page .lp-prose-feats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px 80px;
margin-top: 56px;
max-width: 880px;
}
.landing-page .lp-prose-feats > div {
display: grid;
grid-template-columns: 44px 1fr;
gap: 0 20px;
align-items: start;
}
.landing-page .lp-prose-feats .lp-feat-icon {
width: 36px;
height: 36px;
margin-top: 2px;
}
.landing-page .lp-prose-feats h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin-bottom: 10px;
line-height: 1.2;
}
.landing-page .lp-prose-feats h3 .lp-hl {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-yellow) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats h3 .lp-hl-blue {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-blue) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats h3 .lp-hl-yellow {
background: linear-gradient(
180deg,
transparent 60%,
var(--lp-highlight-yellow) 60%
);
padding: 0 2px;
}
.landing-page .lp-prose-feats p {
font-size: 16px;
line-height: 1.6;
color: var(--lp-ink-soft);
}
.landing-page .lp-prose-feats em {
font-style: italic;
color: var(--lp-terracotta-d);
}
.landing-page .lp-prose-feats > div:nth-child(odd):last-child {
grid-column: 1 / -1;
max-width: calc((100% - 80px) / 2);
margin-inline: auto;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
gap: 56px 64px;
max-width: 1080px;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) > div:nth-child(3) {
grid-column: auto;
max-width: none;
margin-inline: 0;
}
}
@layer features {
.landing-page .lp-ribbon-wrap {
position: relative;
width: 100%;
height: 140px;
margin: calc(var(--lp-section-y) * -0.5) 0 calc(var(--lp-section-y) * -0.5);
pointer-events: none;
overflow: visible;
z-index: 2;
}
.landing-page .lp-ribbon-wrap svg {
display: block;
width: 100%;
height: 100%;
}
.landing-page .lp-ribbon-wrap .lp-ribbon {
fill: none;
stroke-width: 6;
stroke-linecap: round;
}
.landing-page .lp-ribbon-wrap .lp-r1 { stroke: var(--lp-ribbon-terra); }
.landing-page .lp-ribbon-wrap .lp-r2 { stroke: var(--lp-mustard); }
.landing-page .lp-ribbon-wrap .lp-r3 { stroke: var(--lp-ribbon-sky); }
.landing-page .lp-bg-warm + .lp-ribbon-wrap,
.landing-page .lp-creed + .lp-ribbon-wrap {
background: linear-gradient(
to bottom,
var(--lp-rib-top) 0 50%,
var(--lp-rib-bot) 50% 100%
);
}
.landing-page .lp-ribbon-wrap:has(+ .lp-bg-warm),
.landing-page .lp-ribbon-wrap:has(+ .lp-final-cta) {
background: linear-gradient(
to bottom,
var(--lp-rib-top) 0 50%,
var(--lp-rib-bot) 50% 100%
);
}
.landing-page .lp-ribbon-wrap:has(+ .lp-bg-warm) {
--lp-rib-top: var(--lp-paper);
--lp-rib-bot: var(--lp-paper-warm);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap {
--lp-rib-top: var(--lp-paper-warm);
--lp-rib-bot: var(--lp-paper);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-creed) {
--lp-rib-top: var(--lp-paper-warm);
--lp-rib-bot: var(--lp-ink);
}
.landing-page .lp-creed + .lp-ribbon-wrap {
--lp-rib-top: var(--lp-ink);
--lp-rib-bot: var(--lp-paper);
}
.landing-page .lp-ribbon-wrap + .lp-seals {
padding-top: 104px;
border-top: 0;
}
.landing-page .lp-ribbon-wrap:has(+ .lp-final-cta) {
--lp-rib-top: var(--lp-paper);
--lp-rib-bot: var(--lp-ink);
}
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-referral),
.landing-page .lp-bg-warm + .lp-ribbon-wrap:has(+ .lp-bg-warm) {
background: var(--lp-paper-warm);
}
}
@layer features {
.landing-page .lp-diff-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: start;
}
.landing-page .lp-diff-grid--reverse {
grid-template-columns: 1fr 1.05fr;
}
.landing-page .lp-diff-grid--reverse > :first-child {
order: 2;
}
.landing-page .lp-diff-grid--reverse > :last-child {
order: 1;
}
.landing-page .lp-diff-side .lp-diff-quote {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.4;
font-weight: 400;
color: var(--lp-ink);
margin: 0 0 32px 0;
padding-inline-start: 18px;
border-inline-start: 2px solid var(--lp-terracotta);
max-width: 36ch;
}
.landing-page .lp-diff-side .lp-diff-quote em {
font-style: italic;
color: var(--lp-terracotta-d);
font-weight: 500;
}
.landing-page .lp-diff-side .lp-diff-cases {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-page .lp-diff-side .lp-diff-cases li {
font-size: 15px;
line-height: 1.5;
color: var(--lp-ink-soft);
padding-inline-start: 20px;
position: relative;
}
.landing-page .lp-diff-side .lp-diff-cases li::before {
content: "—";
position: absolute;
inset-inline-start: 0;
color: var(--lp-terracotta);
font-weight: 500;
}
.landing-page .lp-diff-foot {
font-size: 14px;
line-height: 1.55;
color: var(--lp-ink-mute);
padding-top: 20px;
border-top: 1px solid var(--lp-rule);
max-width: 44ch;
}
.landing-page .lp-diff-foot b {
color: var(--lp-ink);
font-weight: 500;
}
.landing-page .lp-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col {
padding: 56px 48px;
}
.landing-page .lp-audience-col.lp-yes {
border-inline-end: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col h3 {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 0 0 24px 0;
}
.landing-page .lp-audience-col.lp-yes h3 {
color: var(--lp-terracotta);
}
.landing-page .lp-audience-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.landing-page .lp-audience-col li {
font-size: 19px;
line-height: 1.35;
color: var(--lp-ink);
font-weight: 400;
padding-inline-start: 30px;
position: relative;
}
.landing-page .lp-audience-col.lp-yes li::before {
content: "→";
position: absolute;
inset-inline-start: 0;
top: 2px;
color: var(--lp-terracotta);
font-weight: 600;
font-family: var(--font-sans);
}
[dir="rtl"] .landing-page .lp-audience-col.lp-yes li::before {
content: "\2190";
}
.landing-page .lp-audience-col.lp-no li::before {
content: "—";
position: absolute;
inset-inline-start: 0;
top: 0;
color: var(--lp-ink-faint);
font-weight: 500;
}
.landing-page .lp-audience-col.lp-no li {
color: var(--lp-ink-mute);
}
.landing-page .lp-audience-close {
text-align: center;
margin: 36px auto -8px;
font-family: var(--font-serif);
font-size: 20px;
color: var(--lp-ink);
}
.landing-page .lp-audience-foot {
text-align: center;
margin-inline: auto;
padding: 24px;
font-size: 14px;
color: var(--lp-ink-soft);
}
.landing-page .lp-audience-foot a {
color: var(--lp-terracotta-d);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.landing-page .lp-vs-note {
margin-top: 24px;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
max-width: 72ch;
}
.landing-page .lp-vs-note a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page .lp-vs-note a:hover {
color: var(--lp-terracotta);
text-decoration-color: var(--lp-terracotta);
}
}
@layer features {
.landing-page .lp-steps-cta {
margin: 0 auto;
max-width: 720px;
padding: 36px 40px;
text-align: center;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-steps-cta p {
font-family: var(--font-serif);
font-size: 26px;
line-height: 1.25;
color: var(--lp-ink);
margin: 0 0 24px;
letter-spacing: -0.01em;
}
.landing-page .lp-steps-cta p em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-steps-cta-btns {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
}
@layer features {
.landing-page .lp-price-cents {
font-size: 0.55em;
letter-spacing: 0;
vertical-align: 0.15em;
margin-inline-start: 0.04em;
}
.landing-page .lp-beta-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: var(--letter-expanded);
text-transform: uppercase;
color: var(--lp-terracotta, var(--lp-ink));
border: 1px solid currentColor;
border-radius: 4px;
padding: 1px 5px;
margin-inline-start: 4px;
vertical-align: 1px;
}
.landing-page .lp-price-note {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.45;
color: var(--lp-ink-mute);
max-width: 42ch;
}
.landing-page .lp-billing-toggle {
display: inline-flex;
align-items: center;
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px;
background: var(--color-surface);
gap: 2px;
}
.landing-page .lp-billing-toggle button {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--lp-ink-mute);
padding: 8px 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
background 0.15s ease,
color 0.15s ease;
}
.landing-page .lp-billing-toggle button.lp-on {
background: var(--lp-ink);
color: var(--lp-paper);
}
.landing-page .lp-billing-toggle .lp-save-pill {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--lp-terracotta-d);
background: var(--lp-peach);
padding: 2px 7px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 430px) {
.landing-page .lp-billing-toggle .lp-save-pill {
display: none;
}
.landing-page .lp-billing-toggle button {
padding-inline: 8px;
white-space: nowrap;
overflow-wrap: normal;
}
}
.landing-page .lp-billing-toggle button.lp-on .lp-save-pill {
background: var(--lp-paper);
color: var(--lp-terracotta-d);
}
.landing-page .lp-credits-explainer {
max-width: 820px;
margin: 0 auto 30px;
padding: 22px 26px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-credits-explainer .lp-ce-actions {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
}
.landing-page .lp-credits-explainer .lp-ce-actions li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.landing-page .lp-credits-explainer .lp-ce-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
color: var(--lp-terracotta);
margin-top: 2px;
}
.landing-page .lp-credits-explainer .lp-ce-actions li > div {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.45;
}
.landing-page .lp-credits-explainer .lp-ce-actions li b {
font-size: 14.5px;
font-weight: 600;
color: var(--lp-ink);
}
.landing-page .lp-credits-explainer .lp-ce-actions li span {
font-size: 13.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-credits-explainer .lp-ce-foot {
font-size: 12.5px;
color: var(--lp-ink-mute);
line-height: 1.5;
padding-top: 12px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-credits-explainer .lp-ce-foot b {
color: var(--lp-ink-soft);
font-weight: 600;
}
.landing-page .lp-price-reframe {
margin-top: 14px;
font-family: var(--font-serif);
font-size: 20px;
font-weight: 460;
color: var(--lp-terracotta-d);
letter-spacing: -0.005em;
}
.landing-page .lp-ff-tag {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-terracotta-d);
background: transparent;
border: 1px solid var(--lp-terracotta);
padding: 4px 9px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
}
.landing-page .lp-trust-strip {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 12px;
margin: 32px auto 0;
padding: 0;
}
.landing-page .lp-trust-strip li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding-block: 7px;
padding-inline: 12px 14px;
}
.landing-page .lp-trust-strip li::before {
content: "✓";
color: var(--lp-wa-d);
font-weight: 700;
font-size: 12px;
}
}
@layer features {
.landing-page .lp-schools-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 16px;
padding: 20px 28px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-schools-banner .lp-sb-text h3 {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 460;
margin-bottom: 4px;
}
.landing-page .lp-schools-banner .lp-sb-text p {
font-size: 13.5px;
color: var(--lp-ink-mute);
line-height: 1.5;
margin: 0;
max-width: 680px;
}
.landing-page .lp-schools-banner .lp-sb-btn {
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 680px) {
.landing-page .lp-schools-banner {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.landing-page .lp-schools-banner .lp-sb-btn {
width: 100%;
justify-content: center;
}
}
.landing-page .lp-schools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.landing-page .lp-schools-feat {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px 16px;
align-items: start;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 14px;
padding: 24px 22px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-schools-feat .lp-feat-icon {
width: 36px;
height: 36px;
}
.landing-page .lp-schools-feat h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 480;
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.landing-page .lp-schools-feat p {
font-size: 14.5px;
line-height: 1.55;
color: var(--lp-ink-soft);
margin: 0;
}
.landing-page .lp-schools-feat p em {
font-style: italic;
color: var(--lp-terracotta-d);
}
@media (max-width: 900px) {
.landing-page .lp-schools-grid {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 32px;
}
}
}
@layer features {
.landing-page .lp-sect-head-block {
max-width: 720px;
margin-bottom: var(--lp-block-gap);
}
.landing-page .lp-sect-head-block.lp-centered {
margin: 0 auto var(--lp-block-gap);
text-align: center;
}
.landing-page .lp-sect-head-block.lp-centered .lp-sect-lede {
margin: 0 auto;
}
.landing-page .lp-sect-lede {
font-size: 18px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 56ch;
margin: 0;
}
.landing-page h2.lp-h-section {
font-size: clamp(30px, 3.8vw, 48px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
margin: 16px 0 24px 0;
}
.landing-page h2.lp-h-section em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-illus-line {
display: block;
}
.landing-page .lp-illus-line .lp-stroke {
stroke: var(--lp-ink);
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent {
stroke: var(--lp-terracotta);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent-blue {
stroke: var(--lp-blue);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-accent-yellow {
stroke: var(--lp-yellow-mid);
stroke-width: 1.6;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.landing-page .lp-illus-line .lp-fill-accent {
fill: var(--lp-terracotta);
stroke: none;
}
.landing-page .mat-teaser {
padding: var(--lp-section-y) 0;
}
.landing-page .mat-teaser-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(32px, 5vw, 72px);
align-items: center;
max-width: 1020px;
margin-inline: auto;
}
.landing-page .mat-teaser-copy .lp-sect-lede {
max-width: 48ch;
}
.landing-page .mat-teaser-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 22px 0 30px;
padding: 0;
list-style: none;
}
.landing-page .mat-teaser-chips li {
font-size: 14px;
line-height: 1.4;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 5px 13px;
}
.landing-page .mat-teaser-chips .mat-teaser-chip-more {
background: transparent;
border-style: dashed;
color: var(--lp-ink-mute);
}
.landing-page .mat-teaser-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 0;
}
.landing-page .mat-teaser-free {
max-width: 50ch;
margin: 14px 0 0;
color: var(--lp-ink-mute);
font-size: 14px;
line-height: 1.5;
}
.landing-page .mat-teaser-tools {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.landing-page .mat-teaser-free-product {
margin: 12px 0 0;
font-size: 14px;
}
.landing-page a.mat-teaser-free-link {
color: var(--lp-terracotta-d, var(--lp-terracotta));
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
text-underline-offset: 3px;
}
.landing-page .mat-teaser-fan {
display: flex;
flex-direction: column;
gap: 14px;
}
.landing-page .mat-teaser-sheet {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-card);
padding: 12px 16px 8px;
}
.landing-page .mat-teaser-sheet:nth-child(1) { transform: rotate(-1.6deg) translateX(-10px); }
.landing-page .mat-teaser-sheet:nth-child(2) { transform: rotate(1.2deg) translateX(16px); }
.landing-page .mat-teaser-sheet:nth-child(3) { transform: rotate(-0.7deg); }
.landing-page .mat-teaser-cap {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--lp-ink-soft);
margin-bottom: 2px;
}
.landing-page .mat-teaser-art {
display: block;
width: 100%;
height: 96px;
}
@media (max-width: 860px) {
.landing-page .mat-teaser-grid {
grid-template-columns: 1fr;
}
.landing-page .mat-teaser-fan {
max-width: none;
}
.landing-page .mat-teaser-sheet:nth-child(1) { transform: rotate(-0.8deg); }
.landing-page .mat-teaser-sheet:nth-child(2) { transform: rotate(0.6deg); }
.landing-page .mat-teaser-sheet:nth-child(3) { transform: rotate(-0.4deg); }
}
}
@layer features {
.landing-page .lp-value-evidence {
padding: clamp(42px, 6vw, 76px) 0;
background: var(--lp-paper-warm);
border-block: 1px solid var(--lp-rule);
}
.landing-page .lp-value-evidence__title {
max-width: 20ch;
margin: 0 0 clamp(24px, 4vw, 42px);
color: var(--lp-ink);
font-size: clamp(30px, 3.8vw, 48px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
}
.landing-page .lp-value-evidence__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 4vw, 56px);
}
.landing-page .lp-value-evidence__item {
min-width: 0;
padding-inline-start: clamp(14px, 1.8vw, 24px);
border-inline-start: 2px solid var(--lp-terracotta);
}
.landing-page .lp-value-evidence__item h3 {
margin: 0 0 10px;
color: var(--lp-ink);
font-size: clamp(20px, 2vw, 27px);
line-height: 1.15;
}
.landing-page .lp-value-evidence__item p {
max-width: 34ch;
margin: 0 0 16px;
color: var(--lp-ink-soft);
font-size: 16px;
line-height: 1.5;
}
.landing-page a.lp-value-evidence__link {
color: var(--lp-ink);
font-size: 15px;
font-weight: 600;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
@media (max-width: 760px) {
.landing-page .lp-value-evidence__grid {
grid-template-columns: 1fr;
gap: 26px;
}
.landing-page .lp-value-evidence__item p {
max-width: 52ch;
}
}
}
@layer features {
.landing-page .bncc-hero {
padding: 64px 0 40px 0;
}
.landing-page .bncc-hero h1 {
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 380;
margin: 0 0 20px 0;
}
.landing-page .bncc-hero .lp-lede {
max-width: 60ch;
margin-bottom: 28px;
}
.landing-page .bncc-search {
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 16px;
padding: 18px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .bncc-search__fields {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
}
.landing-page .bncc-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 150px;
}
.landing-page .bncc-field--grow {
flex: 1 1 220px;
}
.landing-page .bncc-field--submit {
min-width: auto;
}
.landing-page .bncc-field__label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lp-ink-mute);
}
.landing-page .bncc-field__control {
font-family: var(--font-sans);
font-size: 16px;
color: var(--lp-ink);
background: var(--color-surface, #fff);
border: 1px solid var(--lp-rule);
border-radius: 10px;
padding: 11px 14px;
line-height: 1.2;
width: 100%;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.landing-page .bncc-field__control:focus {
border-color: var(--lp-ink);
}
.landing-page select.bncc-field__control {
appearance: none;
-webkit-appearance: none;
padding-inline-end: 38px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a7f70' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
.landing-page .bncc-search__btn {
height: 46px;
padding-inline: 30px;
}
.landing-page .bncc-hero__note {
margin: 16px 2px 0;
font-size: 13.5px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-results-sect {
padding: 12px 0 40px;
}
.landing-page .bncc-results__head {
margin-bottom: 22px;
}
.landing-page .bncc-results__count {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
letter-spacing: -0.01em;
margin: 0;
}
.landing-page .bncc-results__count em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .bncc-results__hint {
margin: 6px 0 0;
font-size: 14px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-group {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 32px 0 14px;
display: flex;
align-items: baseline;
gap: 8px;
}
.landing-page .bncc-group:first-of-type { margin-top: 4px; }
.landing-page .bncc-group span {
font-size: 12px;
font-weight: 700;
color: var(--lp-terracotta-d, var(--lp-terracotta));
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 999px;
padding: 2px 9px;
}
.landing-page .bncc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
.landing-page .bncc-card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
padding: 18px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-card:hover {
border-color: color-mix(in oklch, var(--lp-terracotta) 40%, var(--lp-rule));
box-shadow: var(--lp-shadow-soft);
transform: translateY(-2px);
}
}
.landing-page .bncc-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.landing-page .bncc-card__code {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--lp-terracotta-d, var(--lp-terracotta));
}
.landing-page .bncc-card__copy {
min-block-size: 44px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
color: var(--lp-ink-soft);
background: transparent;
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px 12px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-card__copy:hover {
background: color-mix(in oklch, var(--lp-ink) 6%, transparent);
color: var(--lp-ink);
}
}
.landing-page .bncc-card__copy.invite-code--copied {
background: var(--lp-wa, #25d366);
border-color: transparent;
color: var(--lp-ink);
}
.landing-page .bncc-card__desc {
font-size: 15px;
line-height: 1.5;
color: var(--lp-ink);
margin: 0;
flex: 1;
}
.landing-page .bncc-card__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 4px;
}
.landing-page .bncc-tag {
font-size: 12px;
font-weight: 600;
color: var(--lp-blue);
background: color-mix(in oklch, var(--lp-blue) 12%, transparent);
border-radius: 999px;
padding: 3px 10px;
}
.landing-page .bncc-card__grade {
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .bncc-cta-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
padding: 22px 26px;
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 16px;
}
.landing-page .bncc-cta-inline strong {
display: block;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: var(--lp-ink);
}
.landing-page .bncc-cta-inline span {
font-size: 14.5px;
color: var(--lp-ink-soft);
}
.landing-page .bncc-browse,
.landing-page .bncc-empty {
padding: 8px 0 8px;
}
.landing-page .bncc-empty h2 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 460;
margin: 0 0 6px;
}
.landing-page .bncc-empty em { font-style: italic; }
.landing-page .bncc-browse__lede,
.landing-page .bncc-empty p {
font-size: 16px;
color: var(--lp-ink-soft);
margin: 0 0 16px;
}
.landing-page .bncc-empty__lead {
max-width: 60ch;
}
.landing-page .bncc-empty__lead em {
font-style: italic;
color: var(--lp-ink);
}
.landing-page .bncc-empty__reset {
display: inline-flex;
align-items: center;
font-size: 15px;
font-weight: 600;
color: var(--lp-terracotta-d, var(--lp-terracotta));
text-decoration: none;
background: var(--lp-terracotta-light, #f6e9e2);
border: 1px solid color-mix(in oklch, var(--lp-terracotta) 30%, var(--lp-rule));
border-radius: 999px;
padding: 10px 18px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-empty__reset:hover {
background: color-mix(in oklch, var(--lp-terracotta) 18%, transparent);
border-color: var(--lp-terracotta);
}
}
.landing-page .bncc-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.landing-page .bncc-chip {
font-size: 14px;
font-weight: 500;
color: var(--lp-ink);
text-decoration: none;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 9px 16px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
@media (any-hover: hover) {
.landing-page .bncc-chip:hover {
border-color: var(--lp-terracotta);
background: var(--lp-terracotta-light, #f6e9e2);
}
}
.landing-page .bncc-how {
margin: 30px 0 0;
padding-block: 0;
padding-inline: 22px 0;
max-width: 62ch;
display: flex;
flex-direction: column;
gap: 12px;
}
.landing-page .bncc-how li {
font-size: 16px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .bncc-how strong { color: var(--lp-ink); font-weight: 600; }
.landing-page .bncc-final-cta {
padding: 8px 0 24px;
}
.landing-page .bncc-final-cta__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 52px 40px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 20px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .bncc-final-cta__inner h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 40px);
font-weight: 440;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 10px 0 16px;
}
.landing-page .bncc-final-cta__inner h2 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .bncc-final-cta__inner > p {
font-size: 17px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 52ch;
margin: 0 auto 26px;
}
.landing-page .bncc-final-cta__btns {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.landing-page .bncc-final-cta__proof {
display: flex;
gap: 22px;
flex-wrap: wrap;
justify-content: center;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.landing-page .bncc-final-cta__proof li {
position: relative;
font-size: 13.5px;
color: var(--lp-ink-mute);
padding-inline-start: 18px;
}
.landing-page .bncc-final-cta__proof li::before {
content: "✓";
position: absolute;
inset-inline-start: 0;
color: var(--lp-wa, #25d366);
font-weight: 700;
}
.landing-page .bncc-explain {
padding: 56px 0 72px;
}
.landing-page .bncc-explain__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
max-width: 900px;
}
.landing-page .bncc-explain h2,
.landing-page .bncc-tools h2 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin: 0 0 10px;
}
.landing-page .bncc-explain p,
.landing-page .bncc-tools p {
font-size: 15.5px;
line-height: 1.6;
color: var(--lp-ink-soft);
margin: 0;
}
.landing-page .bncc-code-inline {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.92em;
font-weight: 700;
color: var(--lp-ink);
background: var(--lp-terracotta-light, #f6e9e2);
border-radius: 5px;
padding: 1px 6px;
}
.landing-page .bncc-tools {
max-width: 900px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .bncc-tools p { margin-bottom: 16px; }
.landing-page .bncc-tools--pages h3 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 20px 0 10px;
}
.landing-page .bncc-tools ul {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
list-style: none;
margin: 0;
padding: 0;
}
.landing-page .bncc-tools a {
display: inline-flex;
align-items: center;
min-block-size: 44px;
font-size: 15px;
padding: 7px 14px;
border: 1px solid var(--lp-rule);
border-radius: 999px;
color: var(--lp-ink);
text-decoration: none;
}
.landing-page .bncc-tools a:hover,
.landing-page .bncc-tools a:focus-visible {
border-color: var(--lp-terracotta);
color: var(--lp-terracotta-d, var(--lp-terracotta));
}
@media (max-width: 640px) {
.landing-page .bncc-search__fields { gap: 12px; }
.landing-page .bncc-field { min-width: 100%; flex-basis: 100%; }
.landing-page .bncc-search__btn { width: 100%; }
.landing-page .bncc-grid { grid-template-columns: 1fr; }
.landing-page .bncc-explain__grid { grid-template-columns: 1fr; gap: 32px; }
.landing-page .bncc-cta-inline { flex-direction: column; align-items: flex-start; }
}
}
@layer features {
.landing-page .obs-head h1 {
max-width: 22ch;
}
.landing-page .obs-when {
margin-top: 20px;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--lp-ink);
}
.landing-page .obs-when span {
color: var(--lp-ink-mute);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.1em;
margin-inline-end: 6px;
}
.landing-page .obs-draft {
display: block;
margin: 28px 0 0;
padding: 16px 18px;
border: 1px dashed var(--lp-rule);
border-radius: 10px;
background: var(--lp-paper-warm);
font-size: 14px;
line-height: 1.55;
}
.landing-page .obs-draft p {
margin: 6px 0 0;
color: var(--lp-ink-soft);
}
.landing-page .obs-note {
margin: 28px 0;
padding-inline-start: 16px;
border-inline-start: 3px solid var(--lp-terracotta);
color: var(--lp-ink);
font-size: 15px;
line-height: 1.6;
}
.landing-page .obs-sources,
.landing-page .obs-neighbours {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.landing-page .obs-sources li,
.landing-page .obs-neighbours li {
padding: 8px 0;
border-bottom: 1px solid var(--lp-rule);
font-size: 15px;
}
.landing-page .obs-neighbours li span {
color: var(--lp-ink-mute);
font-size: 13px;
margin-inline-start: 8px;
}
}
@layer features {
.landing-page .lp-final-cta {
background: var(--lp-ink);
color: var(--lp-paper);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.landing-page .lp-final-cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(
circle at 1px 1px,
color-mix(in oklch, var(--lp-white) 4%, transparent) 1px,
transparent 0
);
background-size: 24px 24px;
pointer-events: none;
}
.landing-page .lp-final-cta-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
.landing-page .lp-final-cta h2 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 1.02;
letter-spacing: -0.01em;
margin-bottom: 24px;
color: var(--lp-paper);
}
.landing-page .lp-final-cta h2 em {
font-style: italic;
color: var(--lp-yellow-pop);
}
.landing-page .lp-final-cta p {
color: var(--lp-on-dark-soft);
font-size: 18px;
line-height: 1.55;
max-width: 44ch;
margin-bottom: 32px;
}
.landing-page .lp-final-cta .lp-alt-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.landing-page .lp-final-cta .lp-alt-btns .lp-or {
color: var(--lp-on-dark-or);
font-size: 14px;
margin: 0 4px;
}
.landing-page .lp-final-cta-proof {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 28px 0 0;
padding: 0;
}
.landing-page .lp-final-cta-proof li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: var(--lp-on-dark-proof);
background: color-mix(in oklch, var(--lp-white) 6%, transparent);
border: 1px solid color-mix(in oklch, var(--lp-white) 12%, transparent);
border-radius: 999px;
padding-block: 6px;
padding-inline: 10px 12px;
}
.landing-page .lp-final-cta-proof li::before {
content: "✓";
color: var(--lp-wa);
font-weight: 700;
font-size: 12px;
}
.landing-page .lp-qr-stage {
background: var(--lp-paper);
border-radius: 14px;
padding: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
box-shadow:
0 30px 60px -20px color-mix(in oklch, var(--lp-shadow-ink) 40%, transparent),
0 4px 0 0 var(--lp-yellow-pop);
transform: rotate(-1.5deg);
position: relative;
isolation: isolate;
}
.landing-page .lp-qr-stage::before {
content: "";
position: absolute;
inset: -18% -16%;
background:
radial-gradient(circle at 28% 28%, rgba(217, 168, 58, 0.30), transparent 60%),
radial-gradient(circle at 72% 72%, rgba(62, 127, 201, 0.22), transparent 60%);
border-radius: 36px;
z-index: -1;
pointer-events: none;
}
.landing-page .lp-qr-stage .lp-qr-cap {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
color: var(--lp-ink);
text-align: center;
line-height: 1.3;
}
.landing-page .lp-qr-stage .lp-qr-cap small {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--lp-ink-mute);
margin-top: 4px;
}
.landing-page .lp-qr-stage .lp-qr-arrow {
font-family: var(--font-handwritten);
font-size: 20px;
color: var(--lp-terracotta);
align-self: flex-start;
margin-block: -6px -8px;
margin-inline: 4px 0;
}
.landing-page .lp-referral {
background: var(--lp-paper-warm);
color: var(--lp-ink);
padding: var(--lp-section-y) 0;
position: relative;
overflow: hidden;
}
.landing-page .lp-referral-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.landing-page .lp-referral-story {
width: min(420px, 100%);
justify-self: center;
display: flex;
flex-direction: column;
gap: 26px;
}
.landing-page .lp-referral-beat {
display: flex;
flex-direction: column;
}
.landing-page .lp-referral-beat:last-child {
max-width: 88%;
align-self: flex-end;
}
.landing-page .lp-referral-beat .lp-phone-sample {
padding: 10px 12px 12px;
}
.landing-page .lp-referral-beat .lp-phone__msg--reacted {
margin-bottom: 12px;
}
.landing-page .lp-referral h2 {
color: var(--lp-ink);
font-size: clamp(36px, 4vw, 52px);
line-height: 1.05;
font-weight: 400;
margin-bottom: 20px;
}
.landing-page .lp-referral h2 em {
color: var(--lp-terracotta);
font-style: italic;
}
.landing-page .lp-referral p {
color: var(--lp-ink-soft);
font-size: 18px;
line-height: 1.55;
margin-bottom: 28px;
max-width: 44ch;
}
.landing-page .lp-referral .lp-reward {
display: flex;
align-items: stretch;
width: fit-content;
gap: 10px;
margin-bottom: 28px;
}
.landing-page .lp-referral .lp-reward-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px 24px;
background: var(--color-surface);
border: 1px solid var(--lp-rule);
border-radius: 12px;
min-width: 120px;
}
.landing-page .lp-referral .lp-reward-big {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 380;
color: var(--lp-terracotta);
line-height: 1;
}
.landing-page .lp-referral .lp-reward-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--lp-ink-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.landing-page .lp-referral .lp-reward-plus {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 28px;
font-weight: 380;
color: var(--lp-ink-faint);
line-height: 1;
padding: 0 4px;
}
.landing-page .lp-seals {
padding: 56px 0;
background: var(--lp-paper);
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-seals.lp-bg-warm {
border-top: 0;
}
.landing-page .lp-seals-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 24px 48px;
color: var(--lp-ink-mute);
}
.landing-page .lp-seal {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.landing-page .lp-seal svg {
flex-shrink: 0;
color: var(--lp-terracotta);
opacity: 0.85;
}
.landing-page .lp-seal strong {
color: var(--lp-ink);
font-weight: 600;
font-size: 13px;
}
@media (max-width: 720px) {
.landing-page .lp-seals {
padding: 40px 0;
}
.landing-page .lp-seals-row {
gap: 20px 32px;
}
}
.landing-page .lp-testimonials {
padding: 72px 0;
background: var(--lp-paper);
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.landing-page .lp-testimonial-card {
margin: 0;
padding: 26px 28px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-top: 3px solid var(--lp-terracotta);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-testimonial-card blockquote {
margin: 0 0 18px;
}
.landing-page .lp-testimonial-card blockquote p {
margin: 0;
font-size: var(--lp-fs-base);
color: var(--lp-ink-soft);
line-height: 1.6;
}
.landing-page .lp-testimonial-card figcaption {
font-size: 13px;
color: var(--lp-ink-mute);
}
.landing-page .lp-testimonial-card figcaption strong {
display: block;
color: var(--lp-ink);
font-weight: 600;
}
@media (max-width: 720px) {
.landing-page .lp-testimonials {
padding: 48px 0;
}
}
}
@layer features {
.landing-page .lp-site-footer {
padding: 72px 0 0;
background: var(--lp-paper-warm);
color: var(--lp-ink-soft);
font-size: 14px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-site-footer .lp-grid {
display: grid;
grid-template-columns: 1.6fr;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 48px;
padding-bottom: 56px;
}
.landing-page .lp-site-footer .lp-footer-about .lp-brand {
color: var(--lp-ink);
}
.landing-page .lp-site-footer .lp-footer-desc {
margin: 18px 0 0;
font-size: 14px;
line-height: 1.55;
max-width: 38ch;
color: var(--lp-ink-mute);
}
.landing-page .lp-site-footer .lp-footer-social {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 16px;
}
.landing-page .lp-site-footer .lp-footer-social a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--lp-ink-mute);
transition: color 0.15s ease;
}
.landing-page .lp-site-footer .lp-footer-social a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-footer-col h2 {
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lp-ink-mute);
margin: 0 0 18px;
font-weight: 600;
}
.landing-page .lp-site-footer .lp-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-page .lp-site-footer .lp-footer-col ul li a {
color: var(--lp-ink-soft);
font-size: 14px;
transition: color 0.15s ease;
}
.landing-page .lp-site-footer .lp-footer-col ul li a:hover {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding: 20px 0 24px;
border-top: 1px solid
color-mix(in oklch, var(--lp-ink-faint) 30%, transparent);
font-size: 12.5px;
color: var(--lp-ink-mute);
}
.landing-page .lp-site-footer .lp-footer-bottom p {
margin: 0;
max-width: none;
}
.landing-page .lp-site-footer .lp-footer-made {
flex-shrink: 0;
}
.landing-page .lp-site-footer .lp-footer-legal b {
color: var(--lp-ink-soft);
font-weight: 600;
}
}
@layer features {
.landing-page #assinatura {
padding-block: clamp(32px, 4vw, 48px);
}
.landing-page .lp-offer {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 0;
border: 1px solid var(--lp-rule);
border-radius: 20px;
overflow: clip;
background: var(--lp-white, #fff);
box-shadow: 0 18px 44px color-mix(in srgb, var(--lp-ink) 7%, transparent);
}
.landing-page .lp-offer__price-side {
padding: 40px 40px 36px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 0;
}
.landing-page .lp-offer__price {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
line-height: 1;
min-width: 0;
}
.landing-page .lp-offer__amount {
display: inline-flex;
align-items: baseline;
min-width: 0;
}
.landing-page .lp-offer__currency {
font-size: 28px;
font-weight: 420;
color: var(--lp-ink-soft);
}
.landing-page .lp-offer__price .price-num {
font-size: clamp(56px, 8vw, 84px);
font-weight: 380;
letter-spacing: -0.035em;
color: var(--lp-ink);
}
.landing-page .lp-offer__per {
display: inline-block;
font-size: 15px;
color: var(--lp-ink-mute);
margin-inline-start: 2px;
}
.landing-page .lp-offer__cycle-note {
margin: 10px 0 0;
font-size: 14px;
color: var(--lp-ink-mute);
min-height: 1.4em;
}
.landing-page .lp-offer__cycle-note b {
color: var(--lp-ink);
font-weight: 560;
}
.landing-page .lp-price-note__all {
margin-top: 8px;
font-size: 13px;
color: var(--lp-ink-mute);
max-width: 42ch;
}
.landing-page .lp-price-note__all > summary {
cursor: pointer;
color: var(--lp-ink);
}
.landing-page .lp-price-note__all ul {
margin: 10px 0 0;
padding: 0;
list-style: none;
max-height: 15rem;
overflow-y: auto;
}
.landing-page .lp-price-note__all li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-price-note__all li:last-child {
border-bottom: 0;
}
.landing-page .lp-offer__cta {
margin-top: 26px;
width: 100%;
max-width: 340px;
justify-content: center;
}
.landing-page .lp-offer__reassure {
margin: 14px 0 0;
font-size: 13px;
color: var(--lp-ink-mute);
max-width: 34ch;
}
.landing-page .lp-offer__guarantee {
padding: 40px 34px;
background: var(--lp-paper-cream);
border-inline-start: 1px solid var(--lp-rule);
display: flex;
flex-direction: column;
justify-content: center;
}
.landing-page .lp-guarantee__mark {
width: 34px;
height: 34px;
color: var(--lp-terracotta);
margin-bottom: 14px;
}
.landing-page .lp-guarantee__title {
font-size: 21px;
font-weight: 520;
letter-spacing: -0.015em;
margin: 0 0 10px;
color: var(--lp-ink);
}
.landing-page .lp-guarantee__body {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.55;
color: var(--lp-ink-soft);
}
.landing-page .lp-guarantee__fine {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--lp-ink-mute);
}
.landing-page .lp-guarantee__fine b {
color: var(--lp-ink-soft);
font-weight: 560;
}
.landing-page .lp-included {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 8px;
}
.landing-page .lp-included__group {
padding: 26px 24px;
border-radius: 20px;
background: var(--lp-paper-warm);
border: 1px solid color-mix(in srgb, var(--lp-ink) 7%, transparent);
}
.landing-page .lp-included__title {
font-size: 17px;
font-weight: 560;
letter-spacing: -0.01em;
margin: 0 0 14px;
color: var(--lp-ink);
}
.landing-page .lp-included__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.landing-page .lp-included__list li {
position: relative;
padding-inline-start: 24px;
font-size: 14.5px;
line-height: 1.5;
color: var(--lp-ink-soft);
}
.landing-page .lp-included__list li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 13px;
height: 8px;
border-left: 2px solid var(--lp-terracotta);
border-bottom: 2px solid var(--lp-terracotta);
transform: rotate(-45deg);
}
.landing-page .lp-included__foot {
margin: 26px 0 0;
text-align: center;
font-size: 14px;
color: var(--lp-ink-mute);
}
@media (max-width: 860px) {
.landing-page .lp-offer {
grid-template-columns: 1fr;
}
.landing-page .lp-offer__guarantee {
border-inline-start: 0;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-included {
grid-template-columns: 1fr;
gap: 16px;
}
}
}
@layer features {
.landing-page .lp-verdict {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 28px;
}
.landing-page .lp-verdict-card {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-top: 3px solid var(--lp-ink-faint);
border-radius: var(--lp-radius);
padding: 26px 28px;
box-shadow: var(--lp-shadow-soft);
}
.landing-page .lp-verdict-card--me { border-top-color: var(--lp-wa-d); }
.landing-page .lp-verdict-card h3 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0 0 10px;
}
.landing-page .lp-verdict-card p {
font-size: var(--lp-fs-base);
color: var(--lp-ink-soft);
line-height: 1.6;
margin: 0;
}
.landing-page .lp-vstable {
display: grid;
grid-template-columns: 240px repeat(2, minmax(0, 1fr));
border: 1px solid var(--lp-rule);
background: var(--color-surface);
box-shadow: var(--lp-shadow-soft);
position: relative;
margin-top: 28px;
}
.landing-page .lp-vstable thead,
.landing-page .lp-vstable tbody,
.landing-page .lp-vstable tr { display: contents; }
.landing-page .lp-vstable th,
.landing-page .lp-vstable td {
position: relative;
z-index: 1;
font-weight: 400;
text-align: start;
}
.landing-page .lp-vstable .lp-vsh {
padding: 22px;
border-inline-end: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--color-surface);
position: relative;
}
.landing-page .lp-vstable thead th:last-child { border-inline-end: 0; }
.landing-page .lp-vstable .lp-vsh-corner {
background: var(--lp-paper-warm);
justify-content: flex-end;
}
.landing-page .lp-vstable .lp-vsh-corner .lp-corner-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-ink-mute);
font-weight: 600;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-name {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
letter-spacing: -0.015em;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-sub {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--lp-ink-mute);
}
.landing-page .lp-vstable .lp-vsh.lp-featured {
border: 1px solid var(--lp-terracotta);
box-shadow: var(--lp-shadow-card);
margin: -1px;
z-index: 3;
}
.landing-page .lp-vstable .lp-vsh .lp-vsh-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--lp-terracotta);
color: var(--lp-white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
z-index: 4;
}
.landing-page .lp-vstable .lp-vsh .lp-doodle-sparkle {
position: absolute;
top: -20px;
inset-inline-end: -20px;
width: 48px;
height: 48px;
color: var(--lp-mustard);
opacity: 0.85;
pointer-events: none;
z-index: 4;
}
.landing-page .lp-vstable .lp-vslabel {
padding: 16px 22px;
border-inline-end: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
display: flex;
align-items: center;
font-size: 15px;
font-weight: 600;
color: var(--lp-ink);
letter-spacing: -0.005em;
line-height: 1.35;
}
.landing-page .lp-vstable .lp-vscell {
padding: 16px 20px;
border-inline-end: 1px solid var(--lp-rule);
border-bottom: 1px solid var(--lp-rule);
font-size: 15px;
color: var(--lp-ink);
line-height: 1.5;
display: flex;
align-items: center;
gap: 8px;
}
.landing-page .lp-vstable tbody td:last-child { border-inline-end: 0; }
.landing-page .lp-vstable :where(tbody tr):last-child > * { border-bottom: 0; }
.landing-page .lp-vstable .lp-yes {
color: var(--lp-wa-d);
font-weight: 700;
flex-shrink: 0;
}
.landing-page .lp-vstable .lp-no {
color: var(--lp-ink-faint);
font-weight: 700;
flex-shrink: 0;
}
.landing-page .lp-vstable::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: calc(240px - 1px);
width: calc((100% - 240px) / 2 + 2px);
border-inline-start: 1px solid var(--lp-terracotta);
border-inline-end: 1px solid var(--lp-terracotta);
z-index: 2;
pointer-events: none;
}
.landing-page .lp-vs-path {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 36px;
align-items: start;
}
.landing-page .lp-path-note {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-ink-mute);
margin: 0 0 12px;
}
.landing-page .lp-path--me .lp-path-note { color: var(--lp-wa-d); }
.landing-page .lp-path-steps {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: 12px;
box-shadow: var(--lp-shadow-soft);
padding: 22px 24px;
margin: 0;
list-style: none;
counter-reset: path;
}
.landing-page .lp-path-steps li {
counter-increment: path;
display: flex;
gap: 14px;
align-items: baseline;
padding: 10px 0;
font-size: 15px;
color: var(--lp-ink-soft);
line-height: 1.5;
}
.landing-page .lp-path-steps li + li { border-top: 1px solid var(--lp-paper-warm); }
.landing-page .lp-path-steps li::before {
content: counter(path, decimal-leading-zero);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--lp-terracotta);
flex-shrink: 0;
}
.landing-page .lp-path-foot {
margin-top: 14px;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
}
.landing-page .lp-vs-deep {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
margin-top: 36px;
}
.landing-page .lp-vs-deep h3 {
margin: 0 0 10px;
font-size: 22px;
}
.landing-page .lp-vs-deep p {
color: var(--lp-ink-soft);
line-height: 1.62;
margin: 0;
}
.landing-page .lp-vs-audience {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 28px;
align-items: start;
}
.landing-page .lp-vs-aud {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 28px 30px;
}
.landing-page .lp-vs-aud--me { border-color: var(--lp-terracotta); }
.landing-page .lp-vs-aud h3 {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0 0 14px;
}
.landing-page .lp-vs-aud ul { margin: 0; padding-inline-start: 22px; }
.landing-page .lp-vs-aud li { margin-bottom: 10px; line-height: 1.55; color: var(--lp-ink-soft); }
.landing-page .lp-vs-aud p { margin: 0; line-height: 1.6; color: var(--lp-ink-soft); }
.landing-page .lp-tools {
display: grid;
gap: 24px;
margin-top: 36px;
}
.landing-page .lp-tool {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
min-inline-size: 0;
gap: 8px 28px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 30px 32px;
position: relative;
}
.landing-page .lp-tool > * {
min-inline-size: 0;
}
.landing-page .lp-tool--me {
border-color: var(--lp-terracotta);
box-shadow: var(--lp-shadow-card);
}
.landing-page .lp-tool--me .lp-tool-tag {
position: absolute;
top: -12px;
inset-inline-start: 28px;
background: var(--lp-terracotta-d);
color: var(--lp-white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
}
.landing-page .lp-tool .lp-tool-rank {
grid-row: 1 / -1;
font-family: var(--font-serif);
font-size: 84px;
line-height: 0.9;
font-weight: 300;
color: var(--lp-terracotta);
letter-spacing: -0.05em;
opacity: 0.9;
}
.landing-page .lp-tool .lp-tool-verdict {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-terracotta-d);
}
.landing-page .lp-tool h3 {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0;
}
.landing-page .lp-tool p {
color: var(--lp-ink-soft);
line-height: 1.62;
margin: 6px 0 0;
}
.landing-page .lp-tool .lp-tool-verdict,
.landing-page .lp-tool h3,
.landing-page .lp-tool p,
.landing-page .lp-tool .lp-tool-facts { grid-column: 2; }
.landing-page .lp-tool .lp-tool-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
padding: 0;
list-style: none;
}
.landing-page .lp-tool .lp-tool-facts li {
font-size: 13px;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 4px 12px;
white-space: normal;
max-inline-size: 100%;
overflow-wrap: anywhere;
}
.landing-page .lp-tool .lp-tool-facts li.lp-fact-yes { color: var(--lp-ink-soft); }
.landing-page .lp-tool .lp-tool-facts li a { color: inherit; }
.landing-page .lp-matrix-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 28px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
background: var(--lp-white);
}
.landing-page .lp-matrix-wrap:focus-visible {
outline: 2px solid var(--lp-ink);
outline-offset: 3px;
}
.landing-page .lp-matrix {
width: 100%;
min-width: 44rem;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.landing-page .lp-matrix th,
.landing-page .lp-matrix td {
padding: 12px 16px;
border-bottom: 1px solid var(--lp-paper-warm);
text-align: start;
vertical-align: top;
line-height: 1.45;
}
.landing-page .lp-matrix thead th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
background: var(--lp-paper-warm);
white-space: nowrap;
}
.landing-page .lp-matrix tbody th {
font-weight: 600;
color: var(--lp-ink);
white-space: nowrap;
}
.landing-page .lp-matrix tbody tr:last-child th,
.landing-page .lp-matrix tbody tr:last-child td { border-bottom: 0; }
.landing-page .lp-matrix .lp-yes { color: var(--lp-wa-d); font-weight: 700; }
.landing-page .lp-matrix .lp-no { color: var(--lp-ink-faint); }
.landing-page .lp-matrix .lp-row-me {
background: color-mix(in srgb, var(--lp-terracotta) 7%, var(--lp-white));
}
.landing-page .lp-cmp-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 36px;
}
.landing-page .lp-cmp-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 26px 28px;
text-decoration: none;
color: var(--lp-ink);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.landing-page .lp-cmp-card:hover {
transform: translateY(-2px);
box-shadow: var(--lp-shadow-card);
text-decoration: none;
}
.landing-page .lp-cmp-card .lp-cmp-kind {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--lp-terracotta-d);
}
.landing-page .lp-cmp-card h3 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 420;
letter-spacing: -0.015em;
margin: 0;
}
.landing-page .lp-cmp-card p {
margin: 0;
color: var(--lp-ink-soft);
line-height: 1.55;
font-size: 15px;
}
.landing-page .lp-cmp-card .lp-cmp-go {
margin-top: auto;
padding-top: 10px;
font-size: 14px;
font-weight: 600;
color: var(--lp-terracotta);
}
.landing-page .lp-pack {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 36px;
}
.landing-page .lp-pack-col {
background: var(--lp-white);
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
box-shadow: var(--lp-shadow-soft);
padding: 26px 28px;
}
.landing-page .lp-pack-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.landing-page .lp-pack-chips li {
font-size: 14px;
color: var(--lp-ink-soft);
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 999px;
padding: 5px 13px;
line-height: 1.4;
}
.landing-page .lp-pack-chips li small {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--lp-terracotta-d);
margin-inline-start: 4px;
}
.landing-page .lp-pack-foot {
margin: 14px 0 0;
font-size: var(--lp-fs-sm);
color: var(--lp-ink-mute);
line-height: 1.5;
}
.landing-page .lp-pack-foot a,
.landing-page .lp-path-foot a,
.landing-page .lp-tool-facts li a,
.landing-page .lp-tool p a,
.landing-page .lp-verdict-card a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--lp-ink-faint);
}
.landing-page .lp-pack-foot a:hover,
.landing-page .lp-path-foot a:hover,
.landing-page .lp-tool-facts li a:hover,
.landing-page .lp-tool p a:hover,
.landing-page .lp-verdict-card a:hover {
color: var(--lp-terracotta);
text-decoration-color: var(--lp-terracotta);
}
@media (max-width: 900px) {
.landing-page .lp-cmp-cards { grid-template-columns: 1fr 1fr; }
.landing-page .lp-vs-deep { grid-template-columns: 1fr; gap: 24px; }
.landing-page .lp-pack { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.landing-page .lp-verdict,
.landing-page .lp-vs-audience,
.landing-page .lp-vs-path,
.landing-page .lp-cmp-cards { grid-template-columns: 1fr; }
.landing-page .lp-vstable {
grid-template-columns: 1fr 1fr;
border: 0;
background: transparent;
box-shadow: none;
}
.landing-page .lp-vstable::after { display: none; }
.landing-page .lp-vstable .lp-vsh-corner { display: none; }
.landing-page .lp-vstable .lp-vsh {
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-white);
margin-bottom: 4px;
}
.landing-page .lp-vstable .lp-vsh.lp-featured {
margin: 0 0 4px;
box-shadow: 0 0 0 1px var(--lp-terracotta);
}
.landing-page .lp-vstable .lp-vsh .lp-doodle-sparkle { display: none; }
.landing-page .lp-vstable .lp-vsh .lp-vsh-tag { top: -10px; }
.landing-page .lp-vstable .lp-vslabel {
grid-column: 1 / -1;
border: 0;
padding: 18px 2px 6px;
font-size: 16px;
}
.landing-page .lp-vstable .lp-vscell {
flex-direction: column;
align-items: flex-start;
gap: 4px;
border: 1px solid var(--lp-rule);
border-radius: var(--lp-radius);
background: var(--lp-white);
padding: 12px 14px;
font-size: 14px;
}
.landing-page .lp-vstable .lp-vscell::before {
content: attr(data-col);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
}
.landing-page .lp-vstable .lp-vscell--me {
border-color: var(--lp-terracotta);
}
.landing-page .lp-vstable .lp-vscell--me::before { color: var(--lp-terracotta); }
.landing-page .lp-tool {
grid-template-columns: minmax(0, 1fr);
padding: 24px 22px;
}
.landing-page .lp-tool .lp-tool-rank {
grid-row: auto;
font-size: 44px;
}
.landing-page .lp-tool .lp-tool-verdict,
.landing-page .lp-tool h3,
.landing-page .lp-tool p,
.landing-page .lp-tool .lp-tool-facts { grid-column: 1; }
}
}
@layer features {
.landing-page .lp-statement {
padding: 80px 0 64px;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-statement:has(+ .lp-ribbon-wrap) {
border-bottom: 0;
}
.landing-page .lp-statement h1 {
font-size: clamp(54px, 9vw, 144px);
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 360;
max-width: 14ch;
margin-bottom: 0;
}
.landing-page .lp-statement h1 em {
font-style: italic;
color: var(--lp-terracotta);
font-weight: 360;
}
.landing-page .lp-statement h1 s {
text-decoration: line-through;
text-decoration-color: var(--lp-ink-faint);
text-decoration-thickness: 2px;
color: var(--lp-ink-mute);
font-weight: 360;
}
.landing-page .lp-statement .lp-signature {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--lp-ink-mute);
margin-top: 64px;
display: flex;
align-items: center;
gap: 16px;
}
.landing-page .lp-statement .lp-signature::before {
content: "—";
color: var(--lp-terracotta);
font-style: normal;
font-size: 24px;
}
.landing-page .lp-argument {
padding: 80px 0;
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-ribbon-wrap + .lp-argument {
border-top: 0;
}
.landing-page .lp-argument:nth-child(odd) { background: var(--lp-paper); }
.landing-page .lp-argument-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 64px;
align-items: start;
}
.landing-page .lp-argument .lp-num {
font-family: var(--font-serif);
font-size: 96px;
font-weight: 300;
color: var(--lp-terracotta);
line-height: 0.9;
letter-spacing: -0.04em;
font-feature-settings: "lnum";
}
.landing-page .lp-argument h2 {
font-size: clamp(36px, 4.5vw, 64px);
font-weight: 380;
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 18ch;
margin-bottom: 32px;
}
.landing-page .lp-argument h2 em { font-style: italic; color: var(--lp-terracotta); }
.landing-page .lp-argument .lp-body {
font-size: 19px;
line-height: 1.65;
color: var(--lp-ink-soft);
max-width: 60ch;
}
.landing-page .lp-argument .lp-body p { font-size: 19px; margin-bottom: 1.4em; max-width: 60ch; }
.landing-page .lp-argument .lp-body p:last-child { margin-bottom: 0; }
.landing-page .lp-argument .lp-body strong { color: var(--lp-ink); font-weight: 600; }
.landing-page .lp-argument .lp-quote-aside {
margin-top: 40px;
padding-inline-start: 24px;
border-inline-start: 3px solid var(--lp-terracotta);
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
color: var(--lp-ink);
line-height: 1.4;
max-width: 48ch;
}
@media (max-width: 800px) {
.landing-page .lp-argument-row { grid-template-columns: 1fr; gap: 24px; }
.landing-page .lp-argument .lp-num { font-size: 64px; }
}
.landing-page .lp-trades {
padding: 80px 0;
background: var(--lp-ink);
color: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-trades h2 { font-size: clamp(40px, 5vw, 72px); color: var(--lp-paper); margin-bottom: 48px; max-width: 16ch; }
.landing-page .lp-trades-list { display: grid; gap: 0; }
.landing-page .lp-trade-item {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
padding: 28px 0;
border-top: 1px solid var(--lp-divider-dark);
align-items: baseline;
}
.landing-page .lp-trade-item:last-child { border-bottom: 1px solid var(--lp-divider-dark); }
.landing-page .lp-trade-no { font-family: var(--font-serif); font-size: 28px; font-style: italic; font-weight: 380; color: var(--lp-paper); }
.landing-page .lp-trade-no .lp-trade-prefix { color: var(--lp-terra-accent); font-style: normal; font-weight: 600; }
.landing-page .lp-trade-yes { color: var(--lp-on-dark-soft); font-size: 17px; }
.landing-page .lp-trade-yes .lp-trade-prefix { color: var(--lp-wa); font-weight: 600; }
@media (max-width: 800px) { .landing-page .lp-trade-item { grid-template-columns: 1fr; gap: 8px; } }
.landing-page .lp-demo-block {
padding: 80px 0;
background: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
}
.landing-page .lp-demo-block h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 16px; max-width: 14ch; }
.landing-page .lp-demo-block .lp-lede { margin-bottom: 56px; }
.landing-page .lp-demo-show {
display: grid; grid-template-columns: 380px 1fr; gap: 48px;
align-items: start;
}
.landing-page .lp-anno {
font-style: italic;
font-size: 19px;
color: var(--lp-ink-soft);
line-height: 1.55;
padding-top: 24px;
border-top: 1px solid var(--lp-rule);
}
.landing-page .lp-anno b { color: var(--lp-terracotta-d); font-style: normal; }
@media (max-width: 800px) { .landing-page .lp-demo-show { grid-template-columns: 1fr; } }
.landing-page .lp-signoff {
padding: 140px 0;
background: var(--lp-ink);
color: var(--lp-paper);
border-top: 2px solid var(--lp-ink);
text-align: center;
}
.landing-page .lp-signoff h2 {
font-size: clamp(48px, 7vw, 112px);
color: var(--lp-paper);
line-height: 1.0;
letter-spacing: -0.035em;
font-weight: 380;
max-width: 18ch;
margin: 0 auto 48px;
}
.landing-page .lp-signoff h2 em { font-style: italic; color: var(--lp-terra-italic); }
.landing-page .lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
}
@layer features {
.landing-page .lp-legal-head {
padding: 72px 0 24px;
}
.landing-page .lp-legal-head .lp-eyebrow {
margin-bottom: 14px;
}
.landing-page .lp-legal-head h1 {
font-family: var(--font-serif);
font-size: clamp(40px, 5.5vw, 64px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 16px;
max-width: 18ch;
}
.landing-page .lp-legal-head h1 em {
font-style: italic;
color: var(--lp-terracotta);
}
.landing-page .lp-legal-head .lp-lede {
font-size: 18px;
line-height: 1.55;
color: var(--lp-ink-soft);
max-width: 60ch;
margin: 0;
}
.landing-page .lp-legal-meta {
margin-top: 28px;
font-family: var(--font-mono);
font-size: var(--lp-fs-xs);
font-weight: 500;
letter-spacing: 0.1em;
color: var(--lp-ink-mute);
text-transform: uppercase;
}
.landing-page .lp-legal-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.landing-page .lp-legal-nav li a {
display: inline-flex;
align-items: center;
min-block-size: 44px;
padding: 8px 16px;
border: 1px solid var(--lp-rule);
border-radius: 999px;
font-size: 13.5px;
font-weight: 500;
color: var(--lp-ink-soft);
background: var(--lp-paper);
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.landing-page .lp-legal-nav li a:hover {
border-color: var(--lp-ink);
color: var(--lp-ink);
}
.landing-page .lp-legal-nav li a.is-active {
background: var(--lp-ink);
color: var(--lp-paper);
border-color: var(--lp-ink);
}
.landing-page .lp-legal-body {
padding-block: 32px 96px;
max-width: 72ch;
font-size: 16px;
line-height: 1.65;
color: var(--lp-ink-soft);
}
.landing-page .lp-legal-body > p:first-child {
font-size: 17px;
color: var(--lp-ink);
}
.landing-page .lp-legal-body h2 {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 460;
color: var(--lp-ink);
letter-spacing: -0.005em;
line-height: 1.2;
margin: 48px 0 14px;
scroll-margin-top: 80px;
}
.landing-page .lp-legal-body h2:first-child {
margin-top: 0;
}
.landing-page .lp-legal-body h3 {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--lp-ink);
margin: 28px 0 8px;
}
.landing-page .lp-legal-body p {
margin: 0 0 14px;
max-width: none;
}
.landing-page .lp-legal-body strong,
.landing-page .lp-legal-body b {
color: var(--lp-ink);
font-weight: 600;
}
.landing-page .lp-legal-body a:not(.btn) {
color: var(--lp-terracotta-d);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.landing-page .lp-legal-body a:not(.btn):hover {
color: var(--lp-ink);
}
.landing-page .lp-legal-body ul,
.landing-page .lp-legal-body ol {
margin: 8px 0 16px;
padding-inline-start: 22px;
}
.landing-page .lp-legal-body li {
margin-bottom: 6px;
}
.landing-page .lp-legal-body li::marker {
color: var(--lp-terracotta);
}
.landing-page .lp-legal-body hr {
border: 0;
border-top: 1px solid var(--lp-rule);
margin: 48px 0;
}
.landing-page .lp-legal-callout {
margin: 20px 0;
padding: 18px 22px;
background: var(--lp-paper-warm);
border-inline-start: 3px solid var(--lp-terracotta);
border-radius: 4px;
font-size: 15px;
}
.landing-page .lp-legal-callout p {
margin: 0 0 6px;
}
.landing-page .lp-legal-callout p:last-child {
margin-bottom: 0;
}
.landing-page .lp-legal-callout strong {
color: var(--lp-ink);
}
.landing-page .lp-legal-contact {
margin-top: 56px;
padding: 28px 32px;
background: var(--lp-paper);
border: 1px solid var(--lp-rule);
border-radius: 14px;
text-align: center;
}
.landing-page .lp-legal-contact h3 {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 460;
margin: 0 0 8px;
color: var(--lp-ink);
letter-spacing: -0.005em;
}
.landing-page .lp-legal-contact p {
font-size: 14px;
color: var(--lp-ink-mute);
line-height: 1.5;
margin: 0 0 18px;
max-width: 52ch;
margin-inline-start: auto;
margin-inline-end: auto;
}
.landing-page .lp-legal-contact .btn {
display: inline-flex;
padding: 13px 22px;
font-size: 14px;
min-inline-size: min(220px, 100%);
max-inline-size: 100%;
white-space: normal;
overflow-wrap: anywhere;
justify-content: center;
margin-top: 4px;
}
@media (max-width: 720px) {
.landing-page .lp-legal-head {
padding: 48px 0 16px;
}
.landing-page .lp-legal-body {
padding-block: 24px 72px;
}
.landing-page .lp-legal-body h2 {
font-size: 22px;
margin: 36px 0 12px;
}
.landing-page .lp-legal-contact {
padding: 24px 20px;
}
}
}
@layer features {
@media (max-width: 980px), (any-pointer: coarse) {
.landing-page .btn,
.landing-page .lp-billing-toggle button {
min-block-size: 44px;
}
.landing-page .lp-nav-group-btn,
.landing-page .lp-topnav .lp-link,
.landing-page .lp-lang-hint-close {
min-block-size: 44px;
min-inline-size: 44px;
align-items: center;
}
.landing-page .lp-billing-toggle button {
min-inline-size: 44px;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list > a,
.landing-page .lp-site-footer .lp-lang-list > a,
.landing-page .lp-site-footer .lp-footer-social a,
.landing-page .lp-site-footer .lp-footer-col ul li a {
display: inline-flex;
min-block-size: 44px;
min-inline-size: 44px;
align-items: center;
}
.landing-page .lp-site-footer .lp-footer-col ul {
gap: 0;
}
}
@media (min-width: 981px) and (any-pointer: coarse) {
.landing-page .lp-topnav .lp-link {
display: inline-flex;
}
}
@media (max-width: 980px) {
.landing-page .lp-hero-grid,
.landing-page .lp-diff-grid,
.landing-page .lp-referral-grid,
.landing-page .lp-final-cta-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.landing-page .lp-declarations {
grid-template-columns: 1fr;
}
.landing-page .lp-hero-qr {
display: none;
}
.landing-page .lp-qr-stage,
.landing-page .lp-qr-aside {
display: none;
}
.landing-page .lp-topnav {
padding: 12px 20px;
gap: 12px;
}
.landing-page .lp-topnav-nav {
display: none;
}
.landing-page .lp-burger {
display: flex;
}
.landing-page .lp-topnav {
width: 100%;
background: var(--lp-paper);
border-bottom-color: var(--lp-rule);
}
.landing-page .lp-topnav[data-floating] {
top: 0;
width: 100%;
border-radius: 0;
border-color: transparent;
border-bottom-color: var(--lp-rule);
background: var(--lp-paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 10px 26px -18px color-mix(in oklch, var(--lp-shadow-color) 45%, transparent);
}
.landing-page .lp-actions-desktop-only {
display: none;
}
.landing-page .lp-topnav .lp-actions {
margin-inline-start: auto;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--lp-paper);
border-bottom: 1px solid var(--lp-rule);
box-shadow: 0 12px 24px -12px color-mix(in oklch, var(--lp-shadow-color) 12%, transparent);
padding: 4px 0;
max-height: calc(100vh - 96px);
max-height: calc(100dvh - 96px);
overflow-y: auto;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a {
padding: 14px 24px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid
color-mix(in oklch, var(--lp-rule) 50%, transparent);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a:last-child {
border-bottom: 0;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a.is-active::after {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav a.is-active {
color: var(--lp-terracotta);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-mobile-only {
display: block;
margin-top: 4px;
color: var(--lp-ink-mute);
font-size: 14px;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list {
display: flex;
gap: 6px 18px;
margin: 4px 0 0;
padding: 12px 24px 14px;
border-top: 1px solid color-mix(in oklch, var(--lp-rule) 50%, transparent);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list > * {
padding: 4px 0;
font-size: 14px;
font-weight: 500;
border-bottom: 0;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-lang-list [aria-current] {
font-weight: 600;
}
.landing-page .lp-topnav-nav .lp-nav-group-btn {
display: none;
}
.landing-page .lp-nav-panel,
.landing-page .lp-nav-group-btn[aria-expanded="true"] + .lp-nav-panel {
display: block;
position: static;
transform: none;
width: auto;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
.landing-page .lp-nav-panel::before {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-group-label {
display: block;
padding: 12px 24px 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lp-ink-mute);
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card {
flex-direction: row;
align-items: baseline;
gap: 8px;
border-radius: 0;
background: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card strong {
font-size: 16px;
font-weight: 500;
color: inherit;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card span {
display: none;
}
.landing-page .lp-nav-toggle:checked ~ .lp-topnav-nav .lp-nav-card.is-active strong {
color: var(--lp-terracotta);
}
.landing-page .lp-site-footer .lp-grid {
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
gap: 36px;
}
.landing-page .lp-site-footer .lp-footer-about {
grid-column: 1 / -1;
}
.landing-page .lp-site-footer .lp-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.landing-page .lp-hero h1 {
font-size: 44px;
}
.landing-page.lp-home .lp-hero .lp-lede {
font-size: 20px;
line-height: 1.4;
margin-bottom: 22px;
}
.landing-page .lp-audience {
grid-template-columns: 1fr;
}
.landing-page .lp-audience-col.lp-yes {
border-inline-end: none;
border-bottom: 1px solid var(--lp-rule);
}
.landing-page .lp-audience-col {
padding: 40px 24px;
}
.landing-page .lp-prose-feats {
grid-template-columns: 1fr;
gap: 40px;
max-width: none;
}
.landing-page .lp-prose-feats:has(> div:nth-child(3):last-child) {
grid-template-columns: 1fr;
gap: 40px;
max-width: none;
}
.landing-page .lp-prose-feats > div {
grid-template-columns: 36px 1fr;
gap: 0 16px;
}
.landing-page .lp-prose-feats > div:nth-child(odd):last-child {
max-width: none;
margin-inline: 0;
}
.landing-page .lp-credits-explainer .lp-ce-actions {
grid-template-columns: 1fr;
gap: 14px;
}
.landing-page .lp-price-reframe {
font-size: 17px;
}
}
@media (max-width: 800px) {
.landing-page .lp-hero-grid {
grid-template-columns: 1fr;
}
.landing-page .lp-hero h1 {
font-size: 44px;
}
.landing-page section {
padding: 44px 0;
}
.landing-page .lp-sect-head-block {
margin-bottom: 28px;
}
.landing-page .lp-sect-lede {
margin-top: 10px;
}
.landing-page .lp-audience {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.landing-page .lp-ribbon-wrap {
height: 90px;
}
.landing-page .lp-ribbon-wrap .lp-ribbon {
stroke-width: 4;
}
}
@media (max-width: 430px) {
.landing-page .lp-brand-logo {
width: 108px;
}
.landing-page .lp-topnav .lp-actions {
flex: 1 1 auto;
min-width: 0;
}
.landing-page .lp-topnav .lp-actions .btn {
width: 100%;
min-width: 0;
max-width: 100%;
padding-inline: 10px;
font-size: 14px;
line-height: 1.1;
white-space: nowrap;
overflow-wrap: normal;
}
}
@media (max-width: 24rem) {
.landing-page .lp-topnav {
padding-inline: 8px;
gap: 6px;
}
.landing-page .lp-brand-logo {
width: 88px;
}
.landing-page .lp-hero-grid > * {
min-width: 0;
}
.landing-page .lp-hero h1,
.landing-page .lp-hero .lp-lede,
.landing-page .lp-launch-note {
max-width: 100%;
overflow-wrap: anywhere;
}
html:lang(de) .landing-page.lp-home .lp-hero h1 {
font-size: 34px;
}
.landing-page .lp-hero-cta {
min-width: 0;
}
.landing-page .lp-hero-cta .btn {
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-home-offer,
.landing-page .lp-home-offer__buy,
.landing-page .lp-home-offer__value {
min-width: 0;
}
.landing-page .lp-home-offer .lp-billing-toggle {
display: flex;
width: 100%;
min-width: 0;
}
.landing-page .lp-home-offer .lp-billing-toggle button {
flex: 1 1 auto;
min-width: 0;
padding-inline: 8px;
white-space: nowrap;
overflow-wrap: normal;
}
.landing-page .lp-home-offer .lp-nowrap {
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-home-offer .lp-save-pill {
display: none;
}
.landing-page .lp-offer,
.landing-page .lp-offer__price-side,
.landing-page .lp-offer .lp-billing-toggle {
min-width: 0;
}
.landing-page .lp-offer .lp-billing-toggle {
display: flex;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.landing-page .lp-offer .lp-billing-toggle button {
flex: 1 1 auto;
min-inline-size: 44px;
padding-inline: 6px;
justify-content: center;
text-align: center;
white-space: nowrap;
overflow-wrap: normal;
}
.landing-page .lp-offer .lp-save-pill {
display: none;
}
.landing-page .lp-final-cta-grid > *,
.landing-page .lp-final-cta .lp-alt-btns,
.landing-page .lp-final-cta .lp-final-cta-proof,
.landing-page .lp-final-cta .lp-alt-btns > * {
min-width: 0;
max-width: 100%;
}
.landing-page .lp-final-cta .lp-alt-btns .btn {
white-space: normal;
overflow-wrap: anywhere;
}
.landing-page .lp-creed .lp-nowrap {
white-space: normal !important;
overflow-wrap: anywhere;
}
.landing-page .lp-lang-hint {
width: calc(100% - 32px);
max-width: none;
box-sizing: border-box;
}
.landing-page .lp-topnav .lp-actions {
flex: 1 1 auto;
min-width: 0;
}
.landing-page .lp-topnav .lp-actions .btn {
width: 100%;
min-width: 0;
white-space: nowrap;
overflow-wrap: normal;
text-align: center;
line-height: 1.1;
padding-inline: 6px;
}
.landing-page .lp-steps-cta-btns {
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr);
}
.landing-page .lp-steps-cta-btns .btn {
width: 100%;
min-width: 0;
white-space: normal;
}
}
}