:root{color-scheme:light;--paper:#f3efdf;--ink:#252b25;--muted:#64685c;--accent:#ae4028;--line:#c8c9b8;--card:#faf8ef;--good:#306844;--shadow:#252b2512}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);}body.dark{color-scheme:dark;--paper:#1c2521;--ink:#f0eddf;--muted:#b6bdae;--accent:#ef987c;--line:#536053;--card:#27322b;--good:#a1d1a6;--shadow:#0003}a{color:inherit;text-underline-offset:4px}button{color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.page{max-width:1240px;margin:auto;padding:0 48px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:104px;border-bottom:1px solid var(--ink)}.wordmark{text-decoration:none}.wordmark span{color:var(--accent)}nav{display:flex;gap:30px;align-items:center}nav a{text-decoration:none;min-height:44px;display:flex;align-items:center}.nav-play{gap:22px;}.theme{border:1px solid var(--line);width:44px;height:44px;border-radius:50%;background:none;}.hero{display:grid;grid-template-columns:1.17fr 1fr;gap:60px;align-items:center;padding:86px 0 76px}.eyebrow,.section-label>span{color:var(--muted)}.eyebrow{margin:0 0 30px}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px}h1{margin:0 0 30px}h1 em{color:var(--accent)}.lead{line-height:1.7;margin:0 0 28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-height:58px;padding:15px 25px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:4px;text-decoration:none;}.button:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}.fineprint{color:var(--muted);margin:13px 0 0}.trial-caption{color:var(--muted);margin:0 0 18px 14px}.trial-caption span{vertical-align:middle;margin-left:12px}.trial{padding:28px 30px 30px;background:var(--card);border:1px solid var(--line);box-shadow:8px 10px 0 var(--shadow);transform:rotate(1.5deg)}.trial-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;color:var(--muted)}.quote-mark{display:block;color:var(--accent);height:63px;margin-top:20px}blockquote{margin:0 0 30px;min-height:118px;overflow-wrap:break-word}.trial-prompt{color:var(--muted);margin:20px 0 10px}.trial-answers{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.trial-answers button{background:transparent;border:1px solid var(--line);border-radius:3px;text-align:left;padding:12px;min-height:64px}.trial-answers button:hover{border-color:var(--accent);background:var(--paper)}.trial-answers button:disabled{cursor:default}.trial-footnote{color:var(--muted);text-align:center;margin:24px 0 0}.demo-feedback:empty{display:none}.demo-feedback{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;}.demo-feedback h3{margin:6px 0}.demo-feedback p{margin:8px 0}.demo-feedback .verdict{color:var(--good);}.demo-feedback .wrong{color:var(--accent)}.demo-feedback a{display:inline-block;min-height:44px;padding-top:10px}.edition{display:grid;grid-template-columns:1fr 1fr 1.2fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:25px 0}.edition p{display:flex;align-items:center;gap:18px;margin:0;padding:0 25px;border-left:1px solid var(--line)}.edition p:first-child{padding-left:0;border-left:0}.edition strong{white-space:nowrap}.edition span{color:var(--muted);max-width:95px}.how,.story{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding:80px 0;border-bottom:1px solid var(--line)}h2{margin:20px 0}h3{margin:0 0 10px}.steps{padding:0;margin:0;list-style:none}.steps li{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line)}.steps li:first-child{padding-top:0;border-top:0}.steps li:last-child{padding-bottom:0}.step-number{color:var(--accent);padding-top:3px}.steps p{margin:0;color:var(--muted)}.story{scroll-margin-top:24px}.story-copy>p:first-child{margin-top:0;}.story-copy>.story-punchline{color:var(--accent);margin:26px 0}.text-link{display:inline-block;padding:12px 0;min-height:44px}.aside-note,.story-copy>.aside-note{color:var(--muted);line-height:1.6}.pocket{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding:60px 40px;margin:60px 0;background:var(--card);border:1px solid var(--line)}.pocket>div>p{color:var(--muted);max-width:350px}.install{align-self:center}.install ol{padding-left:23px;}.install li{padding:7px 0 7px 5px}.install li::marker{color:var(--accent)}.closing{text-align:center;padding:20px 0 80px}.closing .eyebrow{margin-bottom:20px}.closing h2{margin-bottom:30px}footer{border-top:1px solid var(--ink);padding:35px 0 45px;display:flex;justify-content:space-between;gap:30px}footer p{line-height:1.9;color:var(--muted)}.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:14px}footer small{max-width:260px;text-align:right;color:var(--muted)}.skip{position:absolute;top:-100px;left:12px;background:var(--paper);padding:14px;z-index:10}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1000px){h1 em{hyphens:none}}
@media(max-width:1000px){.page{padding:0 30px}.hero{gap:35px}.trial{padding:22px}.how,.story,.pocket{gap:40px}.edition p{padding:0 15px;gap:12px}}
@media(max-width:760px){.page{padding:0 24px}.masthead{min-height:85px}nav{gap:14px}.nav-story{display:none}.hero{grid-template-columns:1fr;padding:48px 0 42px;gap:44px}.hero-copy{max-width:540px}h1 em{hyphens:none}.eyebrow{margin-bottom:25px}.trial-wrap{width:100%;max-width:480px;margin:auto}.trial{transform:rotate(.7deg)}blockquote{min-height:0;}.edition{padding:20px 0;grid-template-columns:1fr 1fr 1.3fr}.edition p{flex-direction:column;align-items:flex-start;gap:8px;padding:0 12px}.how,.story{grid-template-columns:1fr;gap:22px;padding:44px 0}h2{margin:14px 0}.steps li{padding:20px 0}.pocket{grid-template-columns:1fr;margin:35px 0;padding:28px 22px;gap:18px}.pocket>div>p{max-width:none}.closing{padding:20px 0 46px}.closing .button{width:100%;max-width:360px}.footer-links{align-items:flex-start}footer{flex-direction:column;gap:16px;padding:28px 0}footer small{text-align:left}}
@media(max-width:360px){.page{padding:0 18px}.nav-play{gap:8px}nav{gap:10px}.trial{padding:20px 17px}.trial-answers{gap:7px}.trial-answers button{padding:11px 8px}.pocket{padding:25px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

h1 em{display:block;}.hero>*{min-width:0}

/* Shared type scale: labels, notes, body, subheads, quotes, section titles. */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-literary: Georgia, serif;
  --text-label: 12px;
  --text-note: 14px;
  --text-body: 16px;
  --text-subhead: 22px;
  --text-quote: 28px;
  --text-title: 36px;
}
body { font: var(--text-body)/1.6 var(--font-body); }
button { font: inherit; }
h2, .closing h2, .pocket h2, .story-copy > .story-punchline {
  font: normal var(--text-title)/1.2 var(--font-literary);
  letter-spacing: -.025em;
}
h3, .install h3, .demo-feedback h3 {
  font: 600 var(--text-subhead)/1.3 var(--font-body);
}
.story-copy > .story-punchline { font-style: italic; }
.lead, .story-copy > p:first-child, .story-copy > p, .steps p,
.pocket > div > p, .install ol, .demo-feedback {
  font-size: var(--text-body);
  line-height: 1.6;
}
/* Keep the accent on the same title scale as the surrounding sections. */
.story-copy > .story-punchline { font-size: var(--text-title); line-height: 1.2; }
nav a, .fineprint, .trial-caption, .trial-prompt, .trial-footnote,
.edition span, .text-link, .aside-note, .story-copy > .aside-note,
footer p, .footer-links, footer small {
  font: normal var(--text-note)/1.6 var(--font-body);
}
.eyebrow, .section-label > span, .trial-top {
  font: 600 var(--text-label)/1.5 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.button, .nav-play { font-weight: 600; }
.wordmark, footer .wordmark {
  font: bold 24px/1 var(--font-literary);
  letter-spacing: -1px;
}
h1 {
  font: normal clamp(64px, 7.5vw, 100px)/.96 var(--font-literary);
  letter-spacing: -.05em;
}
h1 em { font-size: .68em; font-weight: normal; letter-spacing: -.035em; }
h1 .or { font: normal 28px/1.6 var(--font-literary); letter-spacing: 0; }
blockquote { font: normal var(--text-quote)/1.35 var(--font-literary); }
.trial-answers button { font: normal var(--text-note)/1.5 var(--font-body); }
.trial-answers strong { font: 600 var(--text-note)/1.5 var(--font-body); }
.edition strong { font: normal var(--text-quote)/1.2 var(--font-literary); }
.step-number { font: 600 var(--text-label)/1.5 var(--font-body); }
.theme { font-size: 22px; }
.trial-caption span { font-size: 22px; }
.quote-mark { font: 76px/1 var(--font-literary); }
@media (min-width: 761px) and (max-width: 1000px) {
  h1 { font-size: 64px; }
}
@media (max-width: 760px) {
  :root { --text-title: 32px; }
  h1 { font-size: clamp(59px, 12vw, 88px); }
  .edition strong { font-size: var(--text-subhead); }
  .edition span { max-width: none; }
  .edition { grid-template-columns: 1fr 1fr 1.4fr; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 24px; }
  h1 { font-size: 59px; }
  .trial-answers { grid-template-columns: 1fr 1.5fr; }
}

/* Both columns share rows so their text baselines stay aligned. */
footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 30px; align-items: baseline; }
footer p { margin: 0; }
.footer-brand { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 16px; }
.footer-author { grid-column: 1; grid-row: 2; }
.footer-project { grid-column: 1; grid-row: 3; }
.footer-about, .footer-contact { justify-self: end; font: normal var(--text-note)/1.6 var(--font-body); }
.footer-about { grid-column: 2; grid-row: 2; }
.footer-contact { grid-column: 2; grid-row: 3; }
footer #offline { grid-column: 2; grid-row: 4; justify-self: end; margin-top: 12px; }
footer #offline:empty { display: none; }
@media (max-width: 760px) {
  footer { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .footer-brand { margin-bottom: 8px; }
  .footer-about { grid-column: 1; grid-row: 4; margin-top: 12px; }
  .footer-contact { grid-column: 1; grid-row: 5; }
  .footer-about, .footer-contact, footer #offline { justify-self: start; }
  footer #offline { grid-column: 1; grid-row: 6; }
}

.project-details{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding:0 0 60px;margin-bottom:35px;border-bottom:1px solid var(--line)}
.project-notices{min-width:0}
.project-notices details{border-top:1px solid var(--line)}
.project-notices details:last-child{border-bottom:1px solid var(--line)}
.project-notices summary{padding:18px 0;min-height:56px;cursor:pointer;font:600 var(--text-body)/1.5 var(--font-body)}
.project-notices summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.notice-body{padding:0 0 20px;font:normal var(--text-note)/1.6 var(--font-body);overflow-wrap:anywhere}
.notice-body p:first-child{margin-top:0}.notice-body li{margin:8px 0}.notice-body ul{padding-left:20px}
.notice-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font:inherit}
.notice-body th,.notice-body td{padding:8px;border:1px solid var(--line);text-align:left;vertical-align:top}
.notice-body code{font-size:inherit}
@media(max-width:1000px){.project-details{gap:40px}}
@media(max-width:760px){.project-details{grid-template-columns:1fr;gap:20px;padding-bottom:35px}}