@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Klee+One:wght@400;600&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#26332b;background:#f7f5ef;font-synthesis:none;text-rendering:optimizeLegibility;--green:#345e49;--green-dark:#264a37;--line:#e8e5dc;--muted:#898f83}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 83% 3%,rgba(226,221,198,.34),transparent 28%),#f7f5ef}.page-shell{max-width:1120px;margin:auto;padding:0 38px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(38,51,43,.09)}.brand{display:flex;align-items:center;gap:11px;color:#293b2f;text-decoration:none;font-weight:700;font-size:15px}.brand-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#dfe8dd;color:var(--green);font-family:'Noto Serif JP',serif;font-size:18px}.top-cta{color:var(--green);font-size:12px;text-decoration:none;font-weight:600}.top-cta span{margin-left:7px}
.hero{padding:53px 0 31px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:#9b9e91}.hero h1{margin:12px 0;font-family:'Noto Serif JP','Noto Sans SC',serif;font-size:40px;line-height:1.38;font-weight:600;letter-spacing:.035em;color:#283a2e}.hero h1 span{color:#799273}.hero p:not(.eyebrow){max-width:550px;margin:0 0 22px;color:#858a80;font-size:13px;line-height:1.8}.primary-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:9px;background:var(--green);color:#fff;text-decoration:none;font-size:12px;font-weight:600;box-shadow:0 5px 12px rgba(52,94,73,.13);transition:.18s}.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}.primary-button span{margin-left:12px;font-size:15px}
.chart-card{padding:27px 30px;background:#fffefa;border:1px solid rgba(63,74,56,.08);border-radius:17px;box-shadow:0 15px 42px rgba(55,60,43,.045)}.chart-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.chart-heading h2{font-size:20px;margin:6px 0 0;font-weight:600}.chart-help{font-size:10px;color:#989a91}.chart-tabs{display:flex;gap:5px;margin:21px 0 18px;padding:4px;background:#f1f0e9;width:max-content;border-radius:9px}.chart-tab{border:0;border-radius:7px;padding:8px 15px;background:transparent;color:#858a80;font:inherit;font-size:11px;cursor:pointer}.chart-tab.active{background:#fffefa;color:#355942;box-shadow:0 1px 5px rgba(40,50,38,.09)}.chart-content{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}.chart-section h3{margin:0 0 9px;color:#65715f;font-size:12px;font-weight:600}.yoon-section{grid-column:1/-1}.table-scroll{overflow-x:auto}.kana-table{width:100%;min-width:350px;border-collapse:separate;border-spacing:3px;table-layout:fixed}.kana-table th{height:25px;color:#979a90;font-size:9px;font-weight:500}.kana-table tbody th{text-align:left;width:48px;padding-left:4px;white-space:nowrap}.kana-table td{height:47px;border-radius:7px;background:#f8f7f2;text-align:center}.kana-cell{width:100%;height:47px;padding:3px 1px;border:0;border-radius:7px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;transition:background .15s}.kana-cell:hover,.kana-cell:focus-visible{background:#e7eee2;outline:none}.kana-char{font-family:'Noto Serif JP',serif;color:#385c46;font-size:17px;line-height:1.15}.romaji{color:#96998e;font-size:9px;line-height:1.2}.empty-cell{color:#d5d5cb;font-size:10px}.audio-status{min-height:17px;margin:12px 0 0;color:#989a91;font-size:10px}.bottom-cta{margin:17px 0 0;padding:22px 25px;background:#e9eee5;border:1px solid #e0e8dc;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:16px}.bottom-cta h2{font-size:15px;font-weight:600;margin:7px 0 0;color:#334b39}.bottom-cta .eyebrow{color:#879881}footer{display:flex;justify-content:space-between;color:#a2a298;font-size:10px;padding:24px 3px 30px;letter-spacing:.03em}
@media(max-width:760px){.page-shell{padding:0 19px}.topbar{height:68px}.hero{padding:41px 0 25px}.hero h1{font-size:34px}.chart-card{padding:22px 16px;border-radius:15px}.chart-heading{align-items:flex-start;flex-direction:column;gap:7px}.chart-content{grid-template-columns:1fr;gap:18px}.yoon-section{grid-column:auto}.kana-table{min-width:0;border-spacing:2px}.kana-table tbody th{width:39px;font-size:9px}.kana-table td,.kana-cell{height:43px}.kana-char{font-size:16px}.romaji{font-size:8px}.bottom-cta{align-items:flex-start;flex-direction:column;padding:20px}.bottom-cta h2{font-size:14px}footer{padding-top:20px}}
@media(max-width:390px){.page-shell{padding:0 13px}.chart-card{padding:19px 11px}.kana-table tbody th{width:33px}.kana-table td,.kana-cell{height:39px}.kana-char{font-size:14px}.romaji{font-size:7px}}
.kana-char{white-space:nowrap;writing-mode:horizontal-tb;flex-shrink:0}.yoon-section .kana-table{min-width:450px}
.pair-legend{display:flex;gap:16px;margin-top:18px;font-size:10px}.legend-hira{color:#385c46}.legend-kata{color:#bf7655}.kana-table{min-width:480px}.yoon-section .kana-table{min-width:650px}.kana-table td{height:54px}.kana-pair{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.kana-cell{width:auto;height:auto;padding:2px 3px;display:inline-flex;flex-direction:row;border-radius:5px;font-family:'Noto Serif JP',serif;font-size:15px;line-height:1.1;white-space:nowrap;writing-mode:horizontal-tb;flex-shrink:0}.kana-cell.hira-kana{color:#385c46}.kana-cell.kata-kana{color:#bf7655}.kana-table .romaji{display:block;color:#96998e;font-size:9px;line-height:1.3;text-align:center}.empty-cell{color:#d5d5cb;font-size:10px}
.page-shell{max-width:1480px;padding:0 28px}.hero h1{font-size:46px}.hero p:not(.eyebrow){font-size:15px}.chart-card{padding:34px 38px}.chart-heading h2{font-size:23px}.chart-section h3{font-size:14px}.kana-table th{font-size:11px}.kana-table td{height:62px}.kana-cell{font-size:20px}.kana-table .romaji{font-size:11px}
@media(max-width:760px){.page-shell{padding:0 18px}.hero h1{font-size:36px}.chart-card{padding:22px 16px}.chart-heading h2{font-size:20px}.chart-section h3{font-size:12px}.kana-table td{height:54px}.kana-cell{font-size:17px}.kana-table .romaji{font-size:9px}}
@media(max-width:390px){.page-shell{padding:0 13px}.chart-card{padding:19px 11px}.kana-table td{height:48px}.kana-cell{font-size:15px}.kana-table .romaji{font-size:8px}}
.yoon-section{grid-column:auto}
@media(max-width:760px){.kana-table,.yoon-section .kana-table{min-width:0;width:100%}.kana-table tbody th{width:34px;padding-left:2px}.kana-pair{gap:1px}.kana-cell{font-size:13px;padding:1px}.kana-table .romaji{font-size:8px}}
@media(max-width:390px){.kana-table,.yoon-section .kana-table{min-width:0;width:100%}.chart-card{padding:19px 11px}.kana-cell{font-size:12px}.kana-table td{height:46px}}
@media(max-width:350px){.kana-table,.yoon-section .kana-table{min-width:350px}}
.chart-section h3{font-size:15px}.kana-table th{font-size:12px}.kana-table td{height:70px}.kana-cell{font-size:23px}.kana-table .romaji{font-size:13px}.chart-help{font-size:12px}.pair-legend{font-size:12px}
@media(max-width:760px){.chart-section h3{font-size:14px}.kana-table th{font-size:11px}.kana-table td{height:62px}.kana-cell{font-size:18px}.kana-table .romaji{font-size:10px}}
@media(max-width:390px){.kana-table td{height:56px}.kana-cell{font-size:16px}.kana-table .romaji{font-size:9px}}
.chart-tools{display:flex;align-items:flex-end;gap:13px}.font-style-toggle{display:flex;align-items:center;gap:7px;color:#7f887c;font-size:10px;white-space:nowrap;cursor:pointer}.font-style-toggle input{position:absolute;width:1px;height:1px;opacity:0}.font-toggle-track{position:relative;width:36px;height:20px;border-radius:999px;background:#d9dbd2;transition:background .18s}.font-toggle-track i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .18s}.font-style-toggle input:checked+.font-toggle-track{background:#789571}.font-style-toggle input:checked+.font-toggle-track i{transform:translateX(16px)}.font-style-toggle input:focus-visible+.font-toggle-track{outline:2px solid #53774d;outline-offset:3px}#chartContent.handwriting-mode .kana-cell{font-family:'Klee One','Noto Sans SC',sans-serif}
@media(max-width:760px){.chart-tools{align-items:flex-start;flex-direction:column;gap:8px}.font-style-toggle{font-size:10px}}