:root{color-scheme:light;font-family:system-ui,"Microsoft YaHei",sans-serif;color:#172e28;background:#eef2e9;--green:#185643;--line:#cdd8cd}
*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:36px 24px}
header{border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:16px}h1{font-size:clamp(2rem,5vw,3.3rem);letter-spacing:-.05em;margin:.2em 0}h2,h3,p{margin:.5em 0}
.eyebrow{font-size:.78rem;letter-spacing:.16em;font-weight:800;color:var(--green)}
.workspace{display:grid;grid-template-columns:224px minmax(0,1fr);gap:20px;align-items:start}
aside,section{border:1px solid var(--line);background:#fffefa;border-radius:16px;padding:18px}
nav{display:grid;gap:4px;margin-top:12px}progress{width:100%;accent-color:var(--green)}
button,select{font:inherit;color:inherit;border:1px solid var(--line);border-radius:8px;background:white;padding:8px 12px;min-height:42px}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--green)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #c7822b;outline-offset:2px}
button[aria-current=true],button[aria-pressed=true],#listen{background:var(--green);color:white;border-color:var(--green)}
nav button{text-align:left;border-color:transparent}nav small{float:right}
.toolbar,footer,#modes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar,footer{justify-content:space-between}
.lesson{margin:16px 0;padding:clamp(16px,4vw,32px);background:#f4f6ee;border-radius:12px}
#sentence{font-size:clamp(1.55rem,4vw,2.6rem);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
#translation,#scene,#tip,#prompt,.note{line-height:1.6;color:#39584d}#explanation{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}#pattern{font-weight:700}#message{font-size:.9rem}.note{font-size:.86rem}
@media(max-width:670px){main{padding:20px 12px}.workspace{display:flex;flex-direction:column}aside,section{width:100%;padding:12px}section{order:-1}nav{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{justify-content:flex-start}}

.back-link{display:inline-flex;align-items:center;min-height:44px;color:var(--green)}
@media(max-width:670px){
  main{
    padding-top:max(12px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(20px,env(safe-area-inset-bottom));
    padding-left:max(12px,env(safe-area-inset-left));
  }
  button,select{min-height:44px}
  .toolbar{align-items:stretch;gap:10px}
  #modes,footer{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #modes button,footer button{padding-inline:4px;font-size:clamp(.82rem,3.8vw,1rem)}
}