/* Marker Lab site. Visual language from marker-lab-design/v2/final/DESIGN-v2.md:
   paper ground with tooth, the painting sheet stays light at night, one viridian accent for links,
   vermilion only for the one primary action, lemon marks "now". Fixel for display, system UI for text. */

@font-face {
  font-family: 'Fixel';
  src: url(/fonts/fixel-display-760.woff2) format('woff2');
  font-weight: 760;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url(/fonts/plex-mono-600.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #F3EEE3;
  --sheet: #FBF8F1;
  --card: #FBF8F1;
  --well: #E7E0D1;
  --line: #DDD4C3;
  --line2: #CBC1AE;
  --ink: #1B1F28;
  --ink2: #464A53;
  --ink3: #6A655B;
  --pencil: #8C877D;
  --viridian: #0E4437;
  --link: #0E4437;
  --done: #2E7A45;
  --act: #D8432A;
  --lemon: #F2D04B;
  --g8: #1E5631;
  --g5: #2E9E44;
  --g2: #A4D65E;
  --shadow: 0 1px 2px rgba(74, 52, 24, .10), 0 8px 18px rgba(74, 52, 24, .10), 0 26px 48px rgba(74, 52, 24, .12);
  --shadow-s: 0 1px 2px rgba(74, 52, 24, .10), 0 6px 14px rgba(74, 52, 24, .09);
  --display: 'Fixel', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1160px;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121512;
    --sheet: #EDE5D3;
    --card: #1B201C;
    --well: #1B201C;
    --line: #2A302B;
    --line2: #3A423C;
    --ink: #ECE6DA;
    --ink2: #B9B3A6;
    --ink3: #8F897D;
    --pencil: #6E6A62;
    --viridian: #6FCF97;
    --link: #6FCF97;
    --done: #6FCF97;
    --act: #F0563A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .35), 0 30px 60px rgba(0, 0, 0, .30);
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .30);
  }
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper) url(/img/tooth.webp) repeat;
  color: var(--ink);
  font: 400 18px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-color-scheme: dark) { body { background-image: none; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--viridian); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type */
h1, h2, h3 { font-family: var(--display); font-weight: 760; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 7.2vw, 80px); line-height: .98; letter-spacing: -.028em; }
h2 { font-size: clamp(32px, 4.8vw, 52px); line-height: 1.02; letter-spacing: -.026em; }
h3 { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.15; letter-spacing: -.012em; }
:lang(zh-Hant) h1, :lang(zh-Hant) h2, :lang(zh-Hant) h3 { letter-spacing: 0; line-height: 1.2; }
.eyebrow { font: 600 15px/1.3 var(--ui); color: var(--ink3); margin: 0 0 14px; }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--ink2); max-width: 36em; }
.muted { color: var(--ink3); }
.small { font-size: 15px; line-height: 1.5; }

/* ---------- header */
.site-header { padding: 18px 0; }
.site-header .wrap { display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 760 21px/1 var(--display); letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-nav a { color: var(--ink2); text-decoration: none; font-size: 16px; font-weight: 550; padding: 8px 10px; border-radius: 999px; }
.site-nav a:hover { color: var(--ink); background: var(--well); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.langs { display: flex; align-items: center; gap: 2px; margin-left: 8px; padding: 3px; border: 1px solid var(--line2); border-radius: 999px; }
.langs a { display: inline-block; min-width: 40px; text-align: center; padding: 6px 9px; border-radius: 999px; font: 600 14px/1 var(--ui); color: var(--ink2); text-decoration: none; }
.langs a:hover { background: var(--well); color: var(--ink); }
.langs a[aria-current="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 719px) {
  .site-nav .nav-link { display: none; }
  .site-nav { gap: 0; }
  .langs { margin-left: 0; }
  .langs a { min-width: 36px; padding: 6px 7px; font-size: 13px; }
  .brand { font-size: 19px; }
  .brand img { width: 30px; height: 30px; }
}

/* ---------- landing sections */
section { padding: clamp(56px, 7.5vw, 96px) 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
h2 + .lead { margin-top: 18px; }

.hero { padding: clamp(18px, 4vw, 48px) 0 clamp(56px, 8vw, 104px); border-top: 0; }
.hero .wrap { display: grid; gap: 36px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-art { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #b48a5c; aspect-ratio: 1100 / 1283; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 64px; }
}

.soon { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow-s); font-weight: 600; font-size: 17px; color: var(--ink); }
.soon .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 4px rgba(242, 208, 75, .28); flex: none; }
.soon-sub { display: block; margin-top: 14px; color: var(--ink3); font-size: 15px; }

/* marker chip: dab + number + name, like the app */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 8px; border-radius: 999px; background: var(--well); color: var(--ink); font-weight: 600; font-size: .92em; white-space: nowrap; line-height: 1.5; }
.chip b { font: 600 .92em/1 var(--mono); font-feature-settings: 'zero'; }
.dab { display: inline-block; width: 15px; height: 11px; border-radius: 9px 9px 9px 3px; transform: rotate(-12deg); flex: none; }
.dab.g8 { background: var(--g8); } .dab.g5 { background: var(--g5); } .dab.g2 { background: var(--g2); }

/* dark, mid, light */
.tones { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tones li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.tones figure { margin: 0; }
.tones img { border-radius: 10px; box-shadow: var(--shadow-s); aspect-ratio: 9 / 10; object-fit: cover; width: 100%; }
.tones h3 { margin-bottom: 6px; }
.tones p { margin: 0; color: var(--ink2); font-size: 16px; }
.tone-step { font: 600 14px/1 var(--mono); color: var(--ink3); display: block; margin-bottom: 8px; }
@media (min-width: 760px) {
  .tones { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .tones li { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}
.rule-note { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 14px; max-width: 820px; }
.rule-note p { margin: 0; color: var(--ink2); }
.callout { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.callout h3 { margin-bottom: 8px; }
.callout p { margin: 0; color: var(--ink2); }

/* course gallery */
.chapters { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.chapters li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line2); font-weight: 600; font-size: 15px; color: var(--ink2); }
.chapters li span { font-family: var(--mono); color: var(--ink3); margin-right: 6px; }
.gallery { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 210px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; }
.gallery li { scroll-snap-align: start; }
.gallery figure { margin: 0; }
.gallery .sheet { background: var(--sheet); border-radius: 4px; box-shadow: var(--shadow-s); padding: 0; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 480 / 566; object-fit: cover; }
.gallery figcaption { margin-top: 12px; font-weight: 650; font-size: 16px; line-height: 1.3; }
.gallery figcaption span { display: block; font-weight: 400; color: var(--ink3); font-size: 14px; margin-top: 2px; }
.gallery:focus-visible { outline-offset: -3px; }
@media (max-width: 899px) { .gallery { grid-auto-columns: 40vw; } }
@media (min-width: 900px) {
  .gallery { margin: 0; padding: 8px 0 22px; grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; row-gap: 30px; }
}

/* how a lesson works */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split.flip > :first-child { order: 2; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; counter-increment: s; }
.steps li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 17px/1 var(--mono); margin-top: 1px; }
.steps h3 { font-size: 21px; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--ink2); font-size: 17px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.pair figure { margin: 0; }
.pair .sheet, .sheet-frame { background: var(--sheet); padding: 7%; border-radius: 4px; box-shadow: var(--shadow); }
.pair img { width: 100%; }
.pair figcaption, .fig-cap { margin-top: 12px; font-size: 15px; color: var(--ink3); line-height: 1.4; }
.pair figure:last-child .sheet { transform: rotate(1.4deg); }
.pair figure:first-child .sheet { transform: rotate(-1deg); }
@media (prefers-reduced-motion: reduce) { .pair .sheet { transform: none !important; } }

/* light lab */
.lab-art { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.lab-art figure { margin: 0; }
.lab-art .sheet-frame { padding: 0; overflow: hidden; }
.lab-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lab-list li { padding: 6px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 15px; font-weight: 550; color: var(--ink2); }

/* AI teacher */
.ai-demo { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
.ai-photo { width: 62%; margin: 0 0 0 4%; transform: rotate(-2.5deg); border-radius: 3px; box-shadow: var(--shadow); background: #2a2a2a; filter: saturate(.92) contrast(.96); }
.ai-card { position: relative; margin: -18% 0 0 18%; background: var(--card); color: var(--ink); border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px 22px 22px; font-size: 16px; line-height: 1.45; }
.ai-card .tape { position: absolute; top: -12px; left: 40%; width: 74px; height: 22px; background: rgba(242, 208, 75, .72); transform: rotate(-3deg); border-radius: 2px; }
.ai-card .lbl { font-size: 13px; font-weight: 600; color: var(--ink3); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.ai-card .lbl em { font-style: normal; background: var(--well); color: var(--ink2); border-radius: 999px; padding: 1px 9px; font-weight: 600; }
.ai-card .praise { color: var(--done); font-weight: 600; margin: 0 0 12px; display: flex; gap: 10px; }
.ai-card .praise::before { content: ''; flex: none; width: 15px; height: 11px; margin-top: 6px; border-radius: 9px 9px 9px 3px; background: var(--done); transform: rotate(-12deg); }
.ai-card .tip { border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.ai-card .tip > b { display: block; margin-bottom: 3px; }
.ai-card .next { margin: 14px 0 0; background: var(--well); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.honest { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.honest li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--ink2); font-size: 17px; }
.honest svg { width: 22px; height: 22px; margin-top: 2px; color: var(--done); }
.photo-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; margin-top: 8px; }
.photo-flow figure { margin: 0; }
.photo-flow img { border-radius: 6px; box-shadow: var(--shadow-s); width: 100%; aspect-ratio: 415 / 553; object-fit: cover; }
.photo-flow .arrow { color: var(--ink3); font-size: 22px; align-self: center; margin-top: -2em; }
.sub-block { margin-top: clamp(48px, 7vw, 88px); }

/* printables + sketchbook */
.cards { display: grid; gap: 18px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink2); font-size: 16px; }
.card .mono { font-family: var(--mono); font-size: 13px; color: var(--ink3); display: block; margin-bottom: 12px; }
.book { position: relative; width: 100%; height: 300px; margin: 0 auto 8px; max-width: 520px; }
.book figure { position: absolute; margin: 0; width: 44%; background: var(--sheet); padding: 3.5% 3.5% 0; border-radius: 3px; box-shadow: var(--shadow); }
.book figure img { width: 100%; aspect-ratio: 480 / 566; object-fit: cover; }
.book figcaption { font-size: 13px; color: #464A53; padding: 8px 2px 10px; font-weight: 600; line-height: 1.25; }
.book figure:nth-child(1) { left: 2%; top: 14px; transform: rotate(-4deg); }
.book figure:nth-child(2) { left: 30%; top: 0; transform: rotate(2deg); z-index: 2; }
.book figure:nth-child(3) { right: 2%; top: 30px; transform: rotate(5deg); z-index: 3; }
@media (min-width: 560px) { .book { height: 380px; } }

/* family */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.checks svg { width: 24px; height: 24px; color: var(--done); margin-top: 1px; }
.checks b { display: block; color: var(--ink); }
.checks span { color: var(--ink2); font-size: 16px; }
.two { display: grid; gap: 18px; margin-bottom: 36px; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }

/* devices */
.devices { position: relative; margin: 0 auto; max-width: 1040px; padding-bottom: 6%; }
.devices .mac { border-radius: 14px; box-shadow: var(--shadow); width: 88%; }
.devices .phone { position: absolute; right: 0; bottom: 0; width: 24%; border-radius: 13% / 6%; box-shadow: var(--shadow); border: 5px solid #1B1F28; background: #1B1F28; }
.facts { display: grid; gap: 14px; margin-top: 40px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.facts div { border-top: 2px solid var(--ink); padding-top: 14px; }
.facts h3 { font-size: 20px; margin-bottom: 6px; }
.facts p { margin: 0; color: var(--ink2); font-size: 16px; }

/* closing */
.closing { text-align: center; }
.closing h2 { max-width: 14em; margin: 0 auto 22px; }
.closing .lead { margin: 0 auto 30px; }

/* ---------- documents (privacy, terms, support) */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(64px, 9vw, 112px); }
.doc h1 { font-size: clamp(38px, 6vw, 60px); margin-bottom: 14px; }
.doc .meta { color: var(--ink3); font-size: 15px; margin-bottom: 28px; }
.doc h2 { font-size: clamp(25px, 3.2vw, 32px); margin: 52px 0 14px; scroll-margin-top: 16px; }
.doc h3 { font-size: 20px; margin: 30px 0 10px; }
.doc p, .doc li { color: var(--ink2); }
.doc p strong, .doc li strong { color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin-bottom: .45em; }
.doc li::marker { color: var(--ink3); }
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px 8px; margin: 8px 0 34px; }
.summary h2 { margin-top: 0; font-size: 22px; }
.toc { margin: 0 0 8px; padding: 0; list-style: none; columns: 2 220px; column-gap: 28px; }
.toc li { margin: 0 0 6px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink2); }
th { color: var(--ink); font-weight: 650; background: var(--well); }
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--ink); font-weight: 550; min-width: 9em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 650; font-size: 18px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--ink3); border-bottom: 2px solid var(--ink3); transform: rotate(45deg); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.faq details > div { padding: 0 0 14px; }
.contact-card { margin: 26px 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.contact-card h2 { margin: 0 0 8px; font-size: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--act); color: #fff; font-weight: 650; font-size: 17px; text-decoration: none; }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.mail { font-family: var(--mono); font-size: 17px; }

/* 404 */
.nf { text-align: center; padding: clamp(40px, 8vw, 96px) var(--gutter); max-width: 640px; margin: 0 auto; }
.nf img { width: min(280px, 70%); margin: 0 auto 30px; border-radius: 4px; box-shadow: var(--shadow); background: var(--sheet); padding: 18px; }
.nf h1 { font-size: clamp(36px, 6vw, 56px); margin-bottom: 14px; }

/* ---------- footer */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 15px; color: var(--ink3); }
.site-footer .wrap { display: grid; gap: 22px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.foot-links a { color: var(--ink2); text-decoration: none; font-weight: 550; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; }
.foot-langs a { color: var(--ink3); text-decoration: none; }
.foot-langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.foot-note { margin: 0; line-height: 1.5; }

/* small helpers (no inline styles: the CSP allows only this stylesheet) */
.ai-card .tip + .tip { margin-top: 12px; }
.h3-lg { font-size: clamp(26px, 3vw, 34px); margin-bottom: 16px; }
.cards.stack { grid-template-columns: 1fr; }
.devices-note { margin-top: 14px; }

.honest + p { margin-top: 18px; }