:root { --paper:#f7f4ec; --paper-deep:#eee8da; --ink:#1c1b19; --verm:#bd493b; --green:#63705b; --line:#d9d1c1; --soft:#eee9de; --serif: Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wrap:min(1120px, calc(100% - 40px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; overflow-x:hidden; } body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.42; background-image:radial-gradient(rgba(62,48,27,.09) .55px, transparent .7px); background-size:5px 5px; z-index:-1; } a { color:inherit; text-underline-offset:3px; } img { max-width:100%; } :focus-visible { outline:3px solid var(--verm); outline-offset:4px; } .skip { position:absolute; left:12px; top:-5rem; background:var(--ink); color:white; padding:.65rem 1rem; z-index:20; } .skip:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); background:rgba(247,244,236,.88); border-bottom:1px solid rgba(217,209,193,.7); } .header-inner { width:var(--wrap); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { text-decoration:none; font-weight:750; letter-spacing:-.04em; font-size:1.35rem; } .brand-mark { color:var(--verm); font-family:var(--serif); margin-right:5px; } .site-nav { display:flex; align-items:center; gap:23px; font-size:.91rem; } .site-nav a { text-decoration:none; } .site-nav a:not(.button):hover { color:var(--verm); } .nav-toggle { display:none; border:0; background:transparent; padding:10px 4px; font:inherit; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:45px; padding:.65rem 1.05rem; border:1px solid var(--ink); border-radius:2px; font-weight:650; text-decoration:none; transition:transform .2s, background .2s, color .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--ink); color:var(--paper); } .button-primary:hover { background:var(--verm); border-color:var(--verm); } .button-quiet { border-color:var(--line); } .eyebrow { margin:0 0 17px; font-size:.77rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:700; } .display { font:400 clamp(2.65rem, 6vw, 5.4rem)/.98 var(--serif); letter-spacing:-.055em; margin:0; } h2 { font:400 clamp(2.1rem, 4.3vw, 3.85rem)/1.04 var(--serif); letter-spacing:-.045em; margin:0; } h3 { margin:0; font:650 1.08rem/1.25 var(--sans); } p { margin:0; } .lede { font-size:1.12rem; line-height:1.65; color:#45413b; max-width:59ch; } .section { padding:clamp(76px, 11vw, 140px) 0; } .section-inner { width:var(--wrap); margin:auto; } .section-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, .8fr); gap:58px; align-items:end; margin-bottom:54px; } .rule { width:44px; height:2px; background:var(--verm); margin:25px 0; }
.hero { min-height:calc(100vh - 72px); display:grid; align-items:center; padding:72px 0 56px; } .hero-inner { width:var(--wrap); margin:auto; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(36px, 6vw, 90px); } .hero-copy .lede { margin:28px 0 32px; } .actions { display:flex; gap:13px; flex-wrap:wrap; } .hero-note { font-size:.79rem; color:#5e594f; margin-top:17px; } .device-stage { position:relative; min-height:560px; display:grid; place-items:center; } .orbit { position:absolute; width:min(90%, 430px); aspect-ratio:1; border-radius:50%; border:1px solid var(--line); } .orbit:before, .orbit:after { content:''; position:absolute; border-radius:50%; background:var(--verm); } .orbit:before { width:9px; height:9px; top:13%; left:12%; } .orbit:after { width:7px; height:7px; bottom:17%; right:8%; background:var(--green); } .phone { position:relative; z-index:1; width:286px; min-height:545px; padding:13px; border:1px solid #352f29; border-radius:39px; background:#27231f; box-shadow:18px 21px 0 rgba(28,27,25,.11); transform:rotate(5deg); } .phone:before { content:''; display:block; width:86px; height:21px; margin:0 auto -1px; border-radius:0 0 14px 14px; background:#27231f; position:relative; z-index:2; } .screen-slot { min-height:509px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:28px; border-radius:27px; color:#2d2a26; background:#ebe4d5; overflow:hidden; position:relative; } .screen-slot:before { content:'learn-screen.png'; position:absolute; top:30px; font-size:.7rem; color:#756f64; letter-spacing:.08em; } .screen-jp { font:400 4.2rem/1 var(--serif); margin:9px 0; } .screen-slot small { letter-spacing:.08em; text-transform:uppercase; color:var(--green); } .screen-line { width:55px; height:1px; background:var(--verm); margin:20px; } .slot-badge { position:absolute; right:-30px; bottom:53px; z-index:2; padding:14px 17px; background:var(--green); color:#fffdf8; font:600 .73rem/1.25 var(--sans); letter-spacing:.06em; text-transform:uppercase; transform:rotate(-5deg); }
.how { background:var(--ink); color:var(--paper); } .how .eyebrow { color:#b9c2a9; } .steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #57524c; } .step { padding:33px 35px 14px 0; border-right:1px solid #57524c; min-height:225px; } .step:not(:first-child) { padding-left:34px; } .step:last-child { border:0; } .step-num { color:#d78074; display:block; font:400 2.1rem var(--serif); margin-bottom:45px; } .step p { margin-top:13px; color:#ded8cb; max-width:29ch; }
.learn-grid, .pronunciation-grid, .widgets-grid, .pro-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px, 7vw, 104px); align-items:center; } .learn-card { background:#e8e1d1; padding:clamp(25px, 4vw, 48px); border-top:3px solid var(--verm); } .learn-card .japanese { font:400 clamp(3.2rem,6vw,5rem)/1 var(--serif); margin:30px 0 2px; } .reading { color:var(--green); } .meaning { font-size:1.25rem; margin:21px 0 29px; } .control-row { display:flex; gap:10px; } .fake-control { flex:1; border:1px solid #c8bfae; padding:11px 10px; text-align:center; font-size:.84rem; font-weight:650; } .fake-control.active { color:var(--paper); background:var(--ink); border-color:var(--ink); } .feature-list { display:grid; gap:19px; margin-top:32px; } .feature-list div { display:grid; grid-template-columns:28px 1fr; gap:13px; } .feature-list b { color:var(--verm); font-family:var(--serif); font-size:1.25rem; font-weight:400; }
.muted { background:var(--paper-deep); } .sound-mark { width:135px; height:135px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--verm); font:400 4rem var(--serif); margin-bottom:31px; } .quote { padding-left:25px; border-left:2px solid var(--verm); font:400 1.5rem/1.35 var(--serif); max-width:23ch; } .widget-stage { padding:31px; min-height:380px; background:#dfe2d8; display:flex; align-items:center; justify-content:center; position:relative; } .widget-card { width:220px; padding:20px; border-radius:23px; background:rgba(255,254,249,.75); box-shadow:0 15px 32px rgba(55,61,48,.18); backdrop-filter:blur(9px); } .widget-card small { color:var(--green); } .widget-card strong { display:block; font:400 2.6rem/1 var(--serif); margin:18px 0 3px; } .widget-lock { position:absolute; right:12%; bottom:26px; width:147px; padding:15px; border-radius:17px; background:#252725; color:#f7f4ec; box-shadow:0 12px 24px rgba(0,0,0,.2); transform:rotate(-5deg); } .widget-lock small { color:#b8c1ae; } .widget-lock b { display:block; font:400 1.9rem var(--serif); margin:8px 0; } .access { font-size:.8rem; color:#5f5b53; margin-top:20px; }
.n5 { padding-block:clamp(77px, 12vw, 150px); text-align:center; } .n5 .lede { margin:27px auto 36px; } .number { color:var(--verm); font:400 clamp(5.5rem, 18vw, 12rem)/.8 var(--serif); letter-spacing:-.08em; } .number-label { display:block; margin-top:17px; color:var(--green); font-size:.8rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700; } .pro { background:var(--green); color:#faf8f0; } .pro .eyebrow { color:#e8bd9a; } .pro .lede { color:#edf0e6; } .pro-card { background:#f7f3e9; color:var(--ink); padding:clamp(28px, 4vw, 49px); border:1px solid rgba(255,255,255,.45); } .pro-card ul { padding:0; margin:29px 0; list-style:none; } .pro-card li { padding:12px 0; border-top:1px solid var(--line); } .pro-card li:before { content:'—'; margin-right:10px; color:var(--verm); } .pro-card small { display:block; color:#5f5a52; margin-top:16px; }
.trust { padding:62px 0; border-block:1px solid var(--line); } .trust-inner { width:var(--wrap); margin:auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; } .trust-list { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } .trust-list p { font-size:.92rem; color:#524e47; margin-top:9px; }.faq { max-width:825px; margin:auto; } .faq details { border-top:1px solid var(--line); } .faq details:last-child { border-bottom:1px solid var(--line); } .faq summary { cursor:pointer; list-style:none; padding:21px 35px 21px 0; position:relative; font-weight:650; } .faq summary::-webkit-details-marker { display:none; } .faq summary:after { content:'+'; position:absolute; right:5px; color:var(--verm); font:1.5rem var(--serif); top:16px; } .faq details[open] summary:after { content:'−'; } .faq .answer { padding:0 36px 22px 0; color:#514d46; max-width:69ch; }
.final { padding:clamp(85px, 13vw, 155px) 0; text-align:center; background:#e9e0ce; } .final .lede { margin:23px auto 30px; } .site-footer { background:var(--ink); color:#dfdacd; padding:53px 0 27px; } .footer-top, .footer-bottom { width:var(--wrap); margin:auto; } .footer-top { display:grid; grid-template-columns:1.2fr .8fr; gap:35px; padding-bottom:50px; } .footer-brand { color:#faf6ea; font-weight:700; font-size:1.25rem; } .footer-tagline { margin-top:9px; color:#bcb6a8; } .footer-links { display:grid; grid-template-columns:repeat(2, max-content); justify-content:end; gap:10px 35px; font-size:.9rem; } .footer-bottom { padding-top:22px; border-top:1px solid #514d46; color:#a9a395; font-size:.8rem; } .pending { display:none; }
.legal-hero { width:var(--wrap); margin:auto; padding:clamp(70px, 11vw, 130px) 0 55px; border-bottom:1px solid var(--line); }.legal-hero .lede { margin-top:22px; }.legal-content { width:min(760px, calc(100% - 40px)); margin:auto; padding:65px 0 120px; }.legal-content section { margin-top:44px; }.legal-content h2 { font-size:clamp(1.65rem, 3vw, 2.25rem); }.legal-content p, .legal-content li { color:#4c4841; }.legal-content p + p { margin-top:15px; }.legal-content ul { padding-left:22px; }.legal-content li + li { margin-top:8px; }.legal-note { padding:20px 22px; background:var(--soft); border-left:3px solid var(--verm); }.support-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:19px; }.support-card { padding:25px; background:var(--soft); border-top:2px solid var(--green); }.support-card p { margin-top:10px; font-size:.92rem; }.attribution { padding:26px; border:1px solid var(--line); margin-top:22px; }.attribution h3 { margin-bottom:11px; }
@media (max-width: 800px) { .header-inner { min-height:65px; }.nav-toggle { display:block; }.site-nav { display:none; position:absolute; left:0; right:0; top:65px; padding:20px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; }.site-nav.is-open { display:flex; }.site-nav .button { margin-top:6px; }.hero { min-height:auto; }.hero-inner, .learn-grid, .pronunciation-grid, .widgets-grid, .pro-grid, .trust-inner, .section-head { grid-template-columns:1fr; }.hero-inner { gap:28px; }.device-stage { min-height:460px; }.phone { transform:rotate(3deg) scale(.82); }.slot-badge { right:2px; bottom:35px; }.section-head { gap:21px; margin-bottom:38px; }.steps { grid-template-columns:1fr; }.step, .step:not(:first-child) { border-right:0; border-bottom:1px solid #57524c; padding:26px 0; min-height:0; }.step:last-child { border-bottom:0; }.step-num { margin-bottom:17px; }.trust-inner { gap:30px; }.trust-list { grid-template-columns:1fr; gap:20px; }.footer-top { grid-template-columns:1fr; }.footer-links { justify-content:start; }.support-grid { grid-template-columns:1fr; } }
@media (max-width: 440px) { :root { --wrap:min(100% - 28px, 1120px); } .display { font-size:2.7rem; }.hero { padding-top:55px; }.device-stage { min-height:400px; }.phone { transform:rotate(2deg) scale(.7); }.widget-stage { min-height:345px; }.widget-lock { right:4%; }.actions { display:grid; grid-template-columns:1fr; }.actions .button { width:100%; }.legal-content { width:calc(100% - 28px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *:before, *:after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Real Learn-screen artwork in the hero. */
.device-stage { min-height:650px; }
.phone { width:296px; min-height:0; padding:7px; border-radius:42px; overflow:hidden; }
.phone:before { content:''; display:block; position:absolute; z-index:2; top:17px; left:50%; width:96px; height:28px; margin:0; transform:translateX(-50%); border-radius:999px; background:#090909; box-shadow:0 1px 2px rgba(0,0,0,.35); }
.learn-screen { display:block; width:100%; height:auto; border-radius:35px; }
@media (max-width: 800px) { .device-stage { min-height:540px; } }
@media (max-width: 440px) { .device-stage { min-height:480px; } }

[data-app-store].is-disabled { cursor:not-allowed; opacity:.58; pointer-events:none; }
[data-app-store][aria-disabled="true"] { cursor:not-allowed; opacity:.58; pointer-events:none; }