:root{--paper:#f5f7f3;--ink:#173c36;--muted:#647670;--line:#dce5df;--gold:#d7ee9e;--white:#fff;--shadow:0 18px 50px #183e3610}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.85 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}a{color:inherit;text-underline-offset:5px}a:focus-visible,video:focus-visible{outline:3px solid #537c2e;outline-offset:5px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(34px,4.1vw,56px);line-height:1.5;letter-spacing:.025em;font-weight:750;margin-bottom:24px}h2{font-size:clamp(24px,2.8vw,34px);line-height:1.6;letter-spacing:.03em;margin-bottom:16px}h3{font-size:19px;line-height:1.6}p{color:var(--muted)}.ui-icon{display:inline-block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}.site-header,main,footer{max-width:1200px;margin:auto;padding-left:40px;padding-right:40px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px;padding-bottom:26px}.site-header img{display:block;width:168px;height:auto;filter:brightness(0)}.header-link{font-size:12px;font-weight:700;text-decoration:none;padding:11px 20px;border:1px solid var(--line);border-radius:100px;background:#fff;display:flex;align-items:center;gap:12px}.header-link:hover{border-color:var(--ink)}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted);padding:18px 0;border-top:1px solid var(--line)}.hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:46px 0 75px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.16em;color:#45745f;margin-bottom:20px}.eyebrow:before{content:'';width:7px;height:7px;background:#6e9758;border-radius:50%;flex:none}.lead{line-height:2.2;font-size:15px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:52px;padding:14px 25px;border-radius:100px;text-decoration:none;font-size:13px;font-weight:700;transition:background .18s,transform .18s}.primary{background:var(--ink);color:white;box-shadow:0 8px 20px #173c3612}.primary:hover{background:#28594e;transform:translateY(-2px)}.secondary{border:1px solid #9db1a5}.secondary:hover{background:#e4eedd}.small{font-size:11px;margin:15px 0 0}.hero-art{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow);transform:rotate(-3deg);isolation:isolate}.hero-art:before{content:'';position:absolute;inset:20px -14px -16px 14px;z-index:-1;border:1px solid #cbdcca;background:#e4eddc;border-radius:24px;transform:rotate(6deg)}.hero-art img{width:100%;height:auto;aspect-ratio:2;object-fit:contain;display:block;margin:26px 0;mix-blend-mode:multiply}.art-caption{font-size:10px;letter-spacing:.12em;color:var(--muted);display:flex;align-items:center;gap:10px}.art-caption .ui-icon{color:#759663}.art-note{font-size:11px;color:var(--muted);display:flex;justify-content:flex-end;align-items:center;gap:9px}.art-note .ui-icon{width:17px;height:17px}.hero-features{display:flex;flex-wrap:wrap;gap:12px;margin-top:23px}.hero-features span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.hero-features .ui-icon{width:17px;height:17px}.section-heading{margin-bottom:30px}.section-heading p:last-child{max-width:760px;margin-bottom:0;font-size:14px}.alphabet-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.letter-card{position:relative;display:flex;flex-direction:column;text-decoration:none;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:22px 18px 18px;border-radius:16px;transition:transform .18s,box-shadow .18s,border-color .18s}.letter-card:hover{transform:translateY(-5px);border-color:#87a891;box-shadow:0 10px 24px #173c3612}.letter-card strong{font:italic 46px/1.1 Georgia,serif;margin-bottom:14px}.letter-card>span{font-size:10px;color:var(--muted);background:#f0f4ec;border-radius:100px;padding:2px 8px}.letter-card small{font-size:10px;margin-top:17px;font-weight:600;display:flex;align-items:center;gap:3px;white-space:nowrap}.letter-card small .ui-icon{width:14px;height:14px}.letter-card:first-child{background:var(--ink);color:white;border-color:var(--ink)}.letter-card:first-child>span{background:#ffffff1c;color:#e4eddf}.letter-mark{position:absolute;right:16px;top:18px;color:#98b092}.letter-mark .ui-icon{width:19px;height:19px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:64px 0}.steps>div{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}.steps h2{font-size:20px}.steps h3{font-size:18px}.steps p{font-size:13px;margin-bottom:0}.step-number{font:italic 18px Georgia,serif;color:#8b9f94;display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.step-number .ui-icon{width:42px;height:42px;background:#edf3e5;padding:10px;box-sizing:content-box;border-radius:18px;color:#315c46}.intro{max-width:900px;margin:0 auto 64px;padding:34px 40px;border:1px solid var(--line);border-left:4px solid #a9c58b;border-radius:0 20px 20px 0;background:#fff}.intro h2{font-size:24px}.intro p{font-size:14px}.intro p:last-child{margin:0}.design-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}.design-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:box-shadow .18s,transform .18s}.design-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.design-image{display:block;background:#fff;padding:28px}.design-image img{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:contain}.design-body{padding:23px 28px;border-top:1px solid #ecf0e9;background:#fcfdfb}.design-body h3{font-size:12px;letter-spacing:.15em;margin-bottom:12px;color:#69866d}.design-body p{font-size:14px;min-height:52px;margin-bottom:20px;color:#42564d}.text-link{font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:12px}.text-link .ui-icon{padding:7px;box-sizing:content-box;background:#edf3e5;border-radius:50%;width:16px;height:16px}.text-link:hover{text-decoration:underline}.tips{margin:80px 0 50px}.tips .steps{margin:28px 0}.video-section{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;background:#e7eee2;border-radius:24px;padding:40px}.video-section p{font-size:14px}.video-section video{width:100%;background:white;border-radius:14px}.other-letters{margin:50px 0;text-align:center;padding:35px;border:1px solid var(--line);border-radius:20px}.other-letters h2{font-size:24px}.howto{position:relative;padding:28px 32px;margin:55px 0 30px;background:#eaf0e4;border-radius:18px}.howto h2{display:flex;align-items:center;gap:10px;font-size:18px}.howto p{font-size:13px;max-width:850px;margin-bottom:8px}.consult-banner{text-align:center;background:var(--ink);color:#fff;border-radius:28px;padding:50px 25px;margin:30px 0 65px;position:relative;overflow:hidden}.consult-banner:before,.consult-banner:after{content:'';position:absolute;width:270px;height:270px;border:1px solid #ffffff12;border-radius:50%;pointer-events:none;top:-130px;left:-80px}.consult-banner:after{left:auto;top:auto;right:-90px;bottom:-150px;width:350px;height:350px}.consult-banner p{color:#c4d5cc}.consult-banner .eyebrow{justify-content:center;color:#d7ee9e}.consult-banner .eyebrow:before{background:#d7ee9e}.consult-banner .primary{background:#d7ee9e;color:#183c35}.consult-banner .primary:hover{background:#e6f7c1}.consult-banner .secondary:hover{background:#ffffff12}.actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding-top:25px;padding-bottom:35px;font-size:11px;color:var(--muted)}@media(max-width:1000px){.alphabet-grid{grid-template-columns:repeat(4,1fr)}.hero{gap:30px}.site-header,main,footer{padding-left:25px;padding-right:25px}.steps{gap:14px}.steps>div{padding:22px}}@media(max-width:760px){.site-header,main,footer{padding-left:20px;padding-right:20px}.site-header{padding-top:20px;padding-bottom:20px}.site-header img{width:136px}.header-link{padding:9px 12px;font-size:11px;gap:6px}.header-link .ui-icon{width:16px;height:16px}.hero{grid-template-columns:1fr;gap:36px;padding:25px 0 60px}.hero-art{transform:none;width:calc(100% - 12px);margin:0 6px 12px;padding:24px}.hero-art:before{inset:10px -6px -10px 6px;transform:rotate(2deg)}.hero-features{gap:12px}.alphabet-grid{grid-template-columns:repeat(3,1fr);gap:9px}.letter-card{padding:17px 12px 14px;border-radius:14px}.letter-card strong{font-size:38px}.letter-card small{font-size:9px;white-space:normal;line-height:1.6;gap:2px}.letter-mark{right:10px;top:14px}.letter-mark .ui-icon{width:15px;height:15px}.steps{grid-template-columns:1fr;gap:16px;margin:40px 0}.step-number{margin-bottom:18px}.step-number .ui-icon{width:26px;height:26px;padding:11px;border-radius:14px}.design-grid{grid-template-columns:1fr;gap:20px}.design-body p{min-height:0}.design-image{padding:18px}.design-body{padding:20px}.intro{padding:25px;margin-bottom:40px}.video-section{grid-template-columns:1fr;padding:24px;gap:20px}.consult-banner{padding:36px 20px;border-radius:22px}.howto{padding:24px}.other-letters{padding:28px 20px}.actions{flex-direction:column}.actions .button{width:100%}footer{flex-direction:column;gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.letter-card:hover,.design-card:hover,.primary:hover{transform:none}}

/* First-view signature comparison */
.hero-showcase{padding:25px;background:#e8eee3;border:1px solid #d9e4d1;border-radius:28px;position:relative;box-shadow:0 20px 50px #193e3608}
.showcase-heading{margin:0 0 20px}.showcase-heading>span{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.12em;color:#66805a}.showcase-heading strong{display:block;font-size:22px;letter-spacing:.04em;margin-top:7px}.showcase-heading .ui-icon{width:18px;height:18px}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.showcase-card{display:block;min-width:0;text-decoration:none;border:1px solid #dce5d8;border-radius:16px;background:white;padding:15px;transition:transform .18s,box-shadow .18s}.showcase-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #173c3615}.showcase-featured{grid-column:1/-1;padding:19px 22px}.showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.1em;color:#788572}.showcase-meta>span:first-child{color:#477050;font-weight:700}.showcase-card img{display:block;width:100%;height:auto;aspect-ratio:2.3;object-fit:contain;margin:10px 0}.showcase-featured img{aspect-ratio:3.2;margin:10px 0 15px}.showcase-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:600}.showcase-arrow{display:grid;place-items:center;width:26px;height:26px;flex:none;background:#f0f5e9;border-radius:50%}.showcase-arrow .ui-icon{width:14px;height:14px}.showcase-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 0;font-size:10px;color:#63785a}.showcase-note .ui-icon{width:16px;height:16px}@media(max-width:760px){.hero-showcase{padding:18px;border-radius:22px}.showcase-heading strong{font-size:20px}.showcase-grid{gap:9px}.showcase-card{padding:11px;border-radius:12px}.showcase-featured{padding:16px}.showcase-meta{font-size:7px;letter-spacing:.02em}.showcase-caption{font-size:10px}.showcase-arrow{width:22px;height:22px}.showcase-heading>span{font-size:8px}.showcase-note{font-size:9px}}

/* Letter-specific name examples and circular A-Z navigation. */
.name-examples{margin:46px 0 60px;padding:32px 36px;background:#fff;border:1px solid var(--line);border-radius:22px}
.name-examples>p:last-child{margin-bottom:0}.name-examples .name-note{font-size:12px;color:var(--muted)}
.letter-pagination{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:720px;margin:24px auto 0}
.letter-pagination .button{min-width:0;padding:14px 12px;gap:8px}
@media(max-width:760px){.name-examples{padding:24px;margin:32px 0 40px}.letter-pagination{gap:7px}.letter-pagination .button{font-size:11px;line-height:1.5;padding:14px 5px;gap:3px;border-radius:12px;white-space:nowrap}}

.name-examples h2 span{display:inline-block}

/* Larger, readable text on phones; desktop typography stays unchanged. */
@media(max-width:760px){
 body{font-size:17px}
 h1{font-size:36px}h2{font-size:26px}h3{font-size:21px}
 .lead{font-size:17px;line-height:2}
 .section-heading p:last-child,.intro p,.design-body p,.video-section p{font-size:16px}
 .steps p,.howto p{font-size:15px}
 .steps h2,.steps h3,.howto h2{font-size:21px}
 .intro h2,.other-letters h2{font-size:26px}
 .button,.text-link{font-size:15px}
 .header-link{font-size:13px;flex-shrink:0;gap:5px;padding:10px}
 .site-header{gap:10px}.site-header img{max-width:100%;width:126px}
 .breadcrumbs,.hero-features span,.small,.name-examples .name-note,footer{font-size:13px}
 .eyebrow,.art-caption,.art-note{font-size:12px;letter-spacing:.1em}
 .design-body h3{font-size:14px}
 .letter-card strong{font-size:42px}
 .letter-card>span,.letter-card small{font-size:12px}
 .showcase-heading strong{font-size:23px}
 .showcase-heading>span,.showcase-meta{font-size:10px}
 .showcase-caption{font-size:13px;line-height:1.7}
 .showcase-note{font-size:12px;align-items:flex-start}
 .showcase-meta{flex-wrap:wrap;gap:4px}
 .letter-pagination .button{font-size:13px;white-space:normal;flex-wrap:wrap;gap:4px}
 .letter-pagination{gap:6px}
}
@media(max-width:420px){
 .alphabet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .showcase-grid{grid-template-columns:1fr}
 .showcase-featured{grid-column:auto}
 .showcase-card img{aspect-ratio:2.5}
}

/* Mobile rhythm: paragraphs breathe, headings and controls stay compact. */
@media(max-width:760px){
 body{line-height:1.85}
 h1{line-height:1.5}h2,h3{line-height:1.55}
 .lead{line-height:1.95}
 .intro p,.name-examples p,.section-heading p:last-child{line-height:1.9}
 .design-body p,.steps p,.howto p,.consult-banner p{line-height:1.85}
 .design-body p{margin-bottom:22px}
 .intro p+p,.name-examples p+p{margin-top:18px}
 .button,.header-link,.text-link,.letter-pagination .button{line-height:1.5}
 .breadcrumbs,.hero-features span,.letter-card small,.showcase-caption,footer{line-height:1.7}
 .showcase-note,.name-examples .name-note{line-height:1.8}
 .letter-card small{margin-top:14px}
}

/* Desktop reading sizes; retain headings and the established line spacing. */
@media(min-width:761px){
 body{font-size:16px}
 .lead,.section-heading p:last-child,.intro p,.design-body p,.video-section p{font-size:16px}
 .steps p,.howto p{font-size:15px}
}

/* Slightly larger header logo, with room for the practice button on phones. */
.site-header img{width:192px}
@media(max-width:760px){
 .site-header>a:first-child{min-width:0}
 .site-header img{width:146px;max-width:100%;height:auto}
}