:root{color-scheme:light;--ink:#202220;--muted:#656a64;--paper:#fafbf7;--line:#dce0d8;--accent:#38604b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}:focus-visible{outline:3px solid #477357;outline-offset:5px}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.site-header{display:flex;justify-content:space-between;align-items:center;min-height:108px;border-bottom:1px solid var(--line);gap:24px}.brand{display:inline-flex;align-items:center;font-size:26px;font-weight:750;letter-spacing:-1px}.site-header nav{display:flex;gap:30px;font-size:14px;font-weight:550}.hero{padding-block:92px 88px;display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center}.eyebrow,.feature-number{font-size:11px;letter-spacing:1.8px;font-weight:650;color:var(--accent)}h1{font-size:clamp(46px,5.2vw,70px);line-height:1.08;letter-spacing:-3px;font-weight:550;margin:24px 0}h1 em{font-family:Georgia,serif;font-weight:400}h2{font-weight:550;letter-spacing:-1.2px;font-size:36px;line-height:1.2;margin:12px 0 20px}.hero-description{max-width:490px;font-size:18px;color:var(--muted);line-height:1.8}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:30px}.button{display:inline-flex;padding:13px 20px;font-size:14px;font-weight:600;border:1px solid var(--ink);border-radius:3px}.primary{background:var(--ink);color:white}.button:hover{text-decoration:none;background:var(--accent);border-color:var(--accent);color:white}.text-link{font-size:14px;font-weight:600}.hero-meta{font-size:12px;color:var(--muted);margin-top:30px}.reading-art{border-top:2px solid var(--ink);padding:16px 24px 0;background:#f0f2eb;transform:rotate(-2deg)}.art-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:var(--muted);gap:12px}.reading-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d4d9cf;padding:14px 0;gap:15px}.reading-label{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.reading-row>span:last-child{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:34px;letter-spacing:5px}.reading-row .kanji{font-size:78px;line-height:1.4}.kanji span{color:#f0f2eb;-webkit-text-stroke:1px var(--ink)}.reading-row .roman-reading{font-family:Georgia,serif;font-size:34px;letter-spacing:0;font-style:italic}.art-caption{font-size:11px;color:var(--muted);margin:14px 0 18px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;border-top:1px solid var(--line);padding-block:32px 65px}.features h2{font-size:21px;letter-spacing:-.5px;margin:12px 0}.features p{font-size:15px;color:var(--muted);margin:0}.playground-section{background:#eef1ea;border-block:1px solid var(--line);padding:64px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:28px}.section-heading h2{margin-bottom:0}.section-heading>p{font-size:14px;color:var(--muted);margin:0}.download-note{max-width:880px;color:var(--muted);font-size:13px;line-height:1.7;margin:20px 0 0}.quickstart{padding-block:84px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.quickstart p:not(.eyebrow){color:var(--muted);margin-bottom:25px}.code-panel{min-width:0;border:1px solid #343b33;background:#212720;color:#d4e3c6;border-radius:5px;overflow:hidden}.code-heading{display:flex;justify-content:space-between;padding:16px 22px;font-size:11px;letter-spacing:1px;border-bottom:1px solid #41483d;color:#bbc3b5}.code-panel pre{padding:20px 22px;margin:0;font-size:13px;line-height:1.9;overflow-x:auto;tab-size:2}.code-panel pre+pre{border-top:1px solid #41483d}.community{border-top:1px solid var(--line);padding-block:45px 55px;display:flex;align-items:center;justify-content:space-between;gap:30px}.community h2{font-size:30px}.community p:not(.eyebrow){color:var(--muted)}.site-footer{border-top:1px solid var(--line);padding-block:35px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.site-footer .brand{font-size:22px}.site-footer p{font-size:12px;color:var(--muted)}.site-footer nav{display:flex;justify-content:flex-end;align-content:start;gap:14px;flex-wrap:wrap;font-size:12px}.site-footer nav>span{width:100%;text-align:right;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.footer-credit{grid-column:1/-1;margin:0}.skip-link{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip-link:focus{top:10px}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero{gap:35px}.hero-actions{gap:18px}.quickstart{gap:35px}.section-heading h2{font-size:30px}}
@media(max-width:720px){.wrap{width:calc(100% - 36px)}.site-header{min-height:90px;flex-wrap:wrap;justify-content:center;padding:20px 0;gap:14px}.site-header nav{gap:18px;font-size:13px}.hero{grid-template-columns:1fr;gap:40px;padding-block:48px}.hero h1{font-size:52px}.hero-description{font-size:17px}.reading-art{transform:none}.features{grid-template-columns:1fr;gap:28px;padding-block:30px 45px}.section-heading{display:block}.section-heading>p{margin-top:18px}.playground-section{padding-block:42px}.quickstart{grid-template-columns:1fr;padding-block:50px;gap:24px}.community{display:block}.community .button{margin-top:10px}.site-footer{grid-template-columns:1fr}.site-footer nav{justify-content:flex-start}.site-footer nav>span{text-align:left}}
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; flex-shrink: 0; margin-right: 12px; border: 1px solid var(--ink); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; letter-spacing: 0; }
.brand-character { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; padding: 3px 0; background: var(--paper); color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1.1; }
.brand-character:last-child { background: var(--ink); color: var(--paper); }
.brand-reading { font-size: 9px; font-weight: 600; line-height: 1.3; }
/* Let content shrink and actions wrap instead of widening the page. */
.hero > *, .quickstart > * { min-width: 0; }
.hero-actions { flex-wrap: wrap; }
@media (max-width: 720px) {
  .site-header nav { flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .site-header nav a, .hero-actions .text-link, .site-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hero h1 { font-size: clamp(40px, 8vw, 52px); letter-spacing: -2px; }
  .hero-actions { gap: 12px 20px; }
  .reading-art { padding-inline: 18px; }
  .reading-row > span:last-child { font-size: clamp(24px, 7vw, 34px); letter-spacing: 2px; }
  .reading-row .roman-reading { font-size: clamp(24px, 7vw, 34px); }
  .art-top { flex-wrap: wrap; }
  .code-panel pre { padding: 18px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}