:root{color-scheme:light;--ink:#18332c;--muted:#465e56;--brand:#0c5b49;--line:#d8e4db;--paper:#fff;--cream:#faf9f2;--mint:#e7f4ed;--amber:#fbefdb;font-family:"BIZ UDGothic","Yu Gothic",Meiryo,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);line-height:1.72;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,p{margin:0 0 .8rem}h1,h2,h3{line-height:1.35}h1{font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.035em}h2{font-size:1.35rem}h3{font-size:1.05rem}
a{color:var(--brand);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}button,input,textarea{font:inherit}button,a,input,textarea,summary{outline-offset:4px}button{cursor:pointer}button[disabled]{cursor:wait;opacity:.65}
.header{background:white;border-bottom:1px solid var(--line)}.header-inner,.footer,.layout{width:min(1160px,calc(100% - 2.4rem));margin:0 auto}
.header-inner{display:flex;gap:1rem;justify-content:space-between;align-items:center;padding:.85rem 0;min-height:65px}
.brand{font-size:1rem;display:inline-flex;align-items:center;gap:.7rem;font-weight:800;text-decoration:none;color:var(--ink);line-height:1.3}
#header-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.footer{display:flex;justify-content:space-between;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.layout{flex:1;padding:2.3rem 0 3.2rem}.skip{position:absolute;transform:translateY(-180%);padding:.7rem;background:#fff}.skip:focus{transform:none}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(1rem,3vw,1.8rem);margin:0 0 1.1rem}
.hero{background:#0b5342;color:white;border-radius:24px;padding:clamp(1.4rem,4.5vw,3.2rem);margin-bottom:1.3rem}.hero .eyebrow{color:#a5e1c9}.hero p:last-child{margin-bottom:0}.hero p{max-width:48rem}.hero .button{background:#fff3dd;color:#18332c;border-color:#fff3dd}
.eyebrow{font-weight:800;font-size:.79rem;letter-spacing:.08em;color:var(--brand);margin-bottom:.5rem}
.subtle,small{color:var(--muted)}.hero .subtle{color:#d3ede2}.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:1.2rem}.reading{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1.05fr);gap:1.2rem;align-items:start}
.login-box{max-width:480px}.button,button{display:inline-block;background:var(--brand);border:1px solid var(--brand);border-radius:10px;padding:.55rem .95rem;color:white;font-weight:700;text-decoration:none}.button.alt,button.alt{background:#fff;color:var(--brand);border-color:var(--line)}.button.tiny,button.tiny{padding:.29rem .65rem;font-size:.86rem}
.actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin:.85rem 0 0}.actions a{text-decoration:none}
label{display:block;font-weight:700;margin:.65rem 0 .35rem}input,textarea{max-width:100%;width:100%;border:1px solid #9cb2a8;border-radius:8px;padding:.65rem .78rem;background:white;color:var(--ink)}textarea{min-height:90px;resize:vertical}
form{margin:.5rem 0}.status{min-height:1.5em;margin:.55rem 0 0;font-size:.92rem;color:#8c2e29}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin:1.1rem 0}.metric{border:1px solid var(--line);border-radius:14px;background:#fff;padding:.95rem}.metric b{display:block;font-size:1.65rem}.metric span{font-size:.84rem;color:var(--muted)}
.chapters details{border:1px solid var(--line);border-radius:13px;background:white;margin:.65rem 0;overflow:hidden}.chapters summary{cursor:pointer;padding:.85rem 1rem;font-weight:800}.chapters details[open] summary{background:var(--mint)}
.lesson-list{list-style:none;margin:0;padding:0}.lesson-list li{border-top:1px solid var(--line)}.lesson-list a{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.63rem .8rem;text-decoration:none}.lesson-list a:hover{background:#f1f8f4}
.badge{font-size:.75rem;color:var(--muted);border:1px solid var(--line);padding:.12rem .4rem;border-radius:100px;white-space:nowrap}.badge.done{background:var(--mint);color:var(--brand);border-color:#abcdbb}
.reading article{min-width:0}.body-text{font-size:1.06rem;line-height:1.95}.exercise{background:var(--amber)}.example{background:var(--mint)}.section-gap{margin-top:1.35rem}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}th,td{padding:.55rem .65rem;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--mint)}td.num,th.num{text-align:right;white-space:nowrap}.pill{background:var(--mint);color:var(--brand);border-radius:100px;display:inline-block;padding:.18rem .6rem;font-size:.85rem}.table-wrap td:first-child{min-width:5ch}.code{font-family:monospace}.lesson-number{font-variant-numeric:tabular-nums}.policy{font-size:.88rem;color:var(--muted)}progress{width:100%;accent-color:var(--brand);height:14px}
@media(max-width:740px){.split,.reading{grid-template-columns:1fr}.layout{padding-top:1.4rem}.header-inner,.footer,.layout{width:calc(100% - 1.5rem)}.brand{font-size:.88rem}.lesson-list a{gap:.5rem}.footer{font-size:.75rem}}
@media print{.header,.footer,.skip,.actions,.reading aside{display:none}.layout{width:100%}.reading{display:block}.hero,.card{background:white;color:#000;break-inside:avoid}}