:root{--ink:#282323;--paper:#fffdfa;--background:#f7f3ee;--brand:#b92c2c;--border:#ddd3cc;--muted:#665e58;color:var(--ink);background:var(--background);font:16px/1.6 system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}header,main,footer{width:min(1120px,calc(100% - 32px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0}.brand{font-size:26px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:10px}.brand img{width:36px;height:36px}nav,.controls,.pagination,.word-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center}nav a,button,summary{min-height:44px;padding:10px 14px}nav a,button{border:1px solid var(--border);border-radius:12px;background:var(--paper);font:inherit;color:inherit;cursor:pointer}nav a[aria-current]{border:2px solid var(--brand);font-weight:750;background:#fff0e9}button:hover:not(:disabled),nav a:hover{border-color:var(--brand)}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px solid #2563ae;outline-offset:3px}h1{font-size:clamp(30px,5vw,48px);line-height:1.25}h2{margin:0;font-size:28px;font-weight:700}p{margin:12px 0}.notice,.muted{color:var(--muted)}.notice{font-size:14px}main>section{margin:24px 0}label{display:block;font-weight:650;margin-bottom:8px}input{font:inherit;border:1px solid #857970;border-radius:10px;padding:12px;width:min(100%,640px);min-width:0}.controls input{flex:1}.words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.word{background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:24px;overflow-wrap:anywhere}.word-top{justify-content:space-between;align-items:flex-start}.word-top p{margin:4px 0}.word details{margin:12px 0}.word summary{padding-left:0;font-size:14px;cursor:pointer}.learn{display:block;padding:12px 0;font-size:14px}.pagination{justify-content:center;margin:24px 0}footer{padding:32px 0}.skip{position:absolute;top:-100px;padding:12px;background:white;z-index:3}.skip:focus{top:8px}#audio-status{color:#992323}#words:focus{outline-offset:6px}@media(max-width:620px){.words{grid-template-columns:1fr}.word{padding:20px}header nav{width:100%}header nav a{flex:1;text-align:center}.controls{align-items:stretch}.controls input{flex-basis:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
