*{box-sizing:border-box}
body{margin:0;background:#f4f1e7;color:#254b3c;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
main{max-width:1220px;margin:auto;min-height:min(var(--view-height,100dvh),100dvh);display:flex;flex-direction:column;padding:24px 36px;gap:24px}
nav{display:flex;justify-content:space-between;font-size:14px;min-height:44px;align-items:center}a{color:inherit}nav a{display:inline-flex;align-items:center;min-height:44px}
header p{margin:0;color:#657967;font-size:14px}h1{font-size:38px;margin:10px 0 0}
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
article{background:#fffdf7;border:1px solid #d3ddcb;padding:18px;border-radius:20px;display:grid;grid-template-rows:1fr auto auto;gap:14px}
.heading{display:flex;align-items:center;gap:10px}h2{font-size:20px;margin:0;line-height:1.4}.number{font-size:30px;color:#98af94;font-weight:700}
article p{font-size:14px;line-height:1.4;margin:0}
.button{display:flex;justify-content:center;align-items:center;min-height:44px;border-radius:10px;padding:10px 12px;background:#286b57;color:white;text-decoration:none;font-size:16px;white-space:nowrap}
.button[aria-disabled=true]{background:#e4e9df;color:#677764;cursor:default}a:focus-visible,button:focus-visible{outline:3px solid #b66d2e;outline-offset:3px}
#message{font-size:14px;line-height:1.4;margin:0}#message:empty{display:none}
footer{font-size:14px;line-height:1.5;color:#61745d;display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:auto}footer a{min-height:44px;display:flex;align-items:center}.pages{display:none}
@media(max-width:800px){
 main{padding:calc(4px + var(--safe-top,env(safe-area-inset-top))) 8px calc(4px + var(--safe-bottom,env(safe-area-inset-bottom)));gap:6px}
 header{display:flex;align-items:baseline;gap:6px 12px}header p{font-size:14px}h1{font-size:24px;line-height:30px;margin:0}
 .pages{display:flex;gap:8px}.pages button{flex:1;min-height:44px;border:1px solid #b7c7b1;border-radius:9px;background:#fffdf7;color:#254b3c;font:inherit;font-size:16px}.pages button[aria-pressed=true]{border:2px solid #286b57;background:#e5eee1}
 .levels{grid-template-columns:minmax(0,1fr);gap:6px}
 .levels[data-page="1"] article:nth-child(n+4),.levels[data-page="2"] article:nth-child(-n+3),.levels[data-page="2"] article:nth-child(n+7),.levels[data-page="3"] article:nth-child(-n+6),.levels[data-page="3"] article:nth-child(n+10),.levels[data-page="4"] article:nth-child(-n+9){display:none}
 article{padding:6px 8px;display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;border-radius:12px;min-height:78px}
 .heading{display:block;min-width:0}h2{font-size:16px;line-height:1.3}.number{font-size:14px;float:left;margin:2px 5px 0 0;line-height:18px}
 article p{grid-column:1;font-size:14px;line-height:1.3}.button{grid-column:2;grid-row:1/3;align-self:center;padding:6px 3px}
 footer{margin-top:auto;gap:4px}
 article[data-level="level_10"]{grid-template-columns:minmax(0,1fr) 112px}
}
@media(max-width:800px) and (max-height:540px){main{gap:2px;padding-top:var(--safe-top,env(safe-area-inset-top));padding-bottom:var(--safe-bottom,env(safe-area-inset-bottom))}h1{font-size:22px;line-height:28px}.levels{gap:3px}article{min-height:72px;padding:4px 6px}nav{font-size:14px}}

/* Ten registered levels; mobile pages keep the one-screen directory. */
@media(min-width:801px){
 main{padding:calc(12px + var(--safe-top,env(safe-area-inset-top))) 24px calc(12px + var(--safe-bottom,env(safe-area-inset-bottom)));gap:10px;height:min(var(--view-height,100dvh),100dvh);min-height:0}
 header p{line-height:16px}h1{font-size:30px;line-height:36px;margin-top:4px}
 .levels{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-height:0;grid-auto-rows:1fr}
 article{padding:10px;gap:6px;grid-template-rows:minmax(0,1fr) auto auto}
 h2{font-size:18px;line-height:24px}.number{font-size:24px}.heading{gap:8px}
 footer{margin-top:0;min-height:44px}
}