:root{font-family:Arial,sans-serif;background:#fff8eb;color:#102b31}*{box-sizing:border-box}body{margin:0}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffbf35;outline-offset:2px}.top{display:flex;align-items:center;justify-content:space-between;padding:15px max(20px,calc((100vw - 1280px)/2));border-bottom:1px solid #e5dac5;background:#fffdf7}.brand{font-size:29px;font-weight:900;letter-spacing:-.07em}.brand span{font-size:22px}.top nav{display:flex;gap:20px;font-weight:700}main{max-width:1280px;margin:auto;padding:28px 20px 60px}.intro{display:flex;justify-content:space-between;align-items:end;gap:16px}.intro h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.06em;margin:4px 0}.intro h1 span{font-size:.45em;letter-spacing:0;color:#5d7172}.intro p{max-width:650px;line-height:1.5}.eyebrow{color:#d4412f;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800}.chip{border-radius:30px;background:#ffe8b3;padding:10px 16px;white-space:nowrap;font-weight:800}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start;margin-top:24px}.board,aside{background:#fffef9;border:1px solid #dfd7c9;border-radius:16px;padding:18px;box-shadow:0 5px 0 #e8dcc6}.status{display:flex;justify-content:space-between;font-weight:800;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(13,1fr);gap:1px;background:#183139;border:2px solid #183139;width:min(100%,700px);aspect-ratio:1;margin:auto}.square{min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:white;position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2.5vw,28px);font-weight:800;color:#164f8d}.square.block{background:#183139}.square.selected{background:#ffdb70}.square.peer{background:#d9eff4}.square.given{color:#126b52}.square small{position:absolute;top:2px;left:3px;font-size:clamp(7px,.8vw,11px);color:#3c545b}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button,.back{border:1px solid #bdc8c5;border-radius:10px;background:white;padding:10px 14px;font-weight:700}.actions button:hover,.back:hover{background:#e8f1ee}#message{min-height:20px;color:#365c60}aside h2{margin-top:0}.key{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.key button{min-height:52px;border:1px solid #ccd3cf;border-radius:9px;background:#fffdf7;font-weight:800}.key button b{display:block;color:#174f8c;font-size:19px}.key button small{color:#64787a}.key button.active{background:#ffe29c;border-color:#c99728}.note{font-size:13px;line-height:1.5;color:#586a6b;margin:18px 0 25px}.back{display:inline-block}footer{text-align:center;padding:30px;color:#627575;font-size:13px}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{order:2}.key{grid-template-columns:repeat(7,1fr)}}@media(max-width:550px){.top{padding:12px}.top nav{gap:9px;font-size:12px}.brand{font-size:23px}.intro{display:block}.chip{display:inline-block}.board{padding:7px}.square{font-size:15px}.square small{top:0;left:1px;font-size:6px}.key{grid-template-columns:repeat(5,1fr)}.actions{padding:8px}}
.letters{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:18px}.letters button{min-height:38px;border:1px solid #d2d8d3;border-radius:7px;background:#eaf2f0;font-weight:800;color:#164f8d}.letters button:hover{background:#d4e5df}
html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column}.top{height:58px;flex:none;padding-top:0;padding-bottom:0}main{flex:1;min-height:0;max-width:1450px;width:100%;padding:8px 14px;display:flex;flex-direction:column}.intro{flex:none;align-items:center}.intro h1{font-size:25px;margin:0}.intro p:not(.eyebrow){display:none}.eyebrow{margin:0 0 4px}.chip{padding:7px 10px;font-size:11px}.layout{flex:1;min-height:0;margin-top:7px;grid-template-columns:minmax(0,1fr) minmax(270px,.55fr);align-items:stretch}.board,aside{min-height:0;padding:8px;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}.status{font-size:12px;margin:0 0 5px}.grid{flex:none;width:min(100%,calc(100dvh - 230px),610px);aspect-ratio:1;align-self:center}.actions{margin-top:5px}.actions button{padding:5px 8px;font-size:11px}.key{min-height:0;overflow:auto;grid-template-columns:repeat(7,1fr)}.key button{min-height:35px;padding:3px}.key button b{font-size:15px}.letters{margin-top:6px}.letters button{min-height:30px}.note{margin:6px 0;font-size:11px}footer{display:none}aside h2{font-size:16px;margin:2px 0 6px}@media(max-width:850px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:5px}.board{min-height:0}.grid{width:min(100%,calc(100dvh - 330px),520px)}aside{max-height:155px;padding:5px}.key{grid-template-columns:repeat(13,1fr)}.key button{min-height:27px;font-size:10px}.key button b{font-size:12px}.letters{grid-template-columns:repeat(13,1fr)}.letters button{min-height:24px;font-size:10px}.note,.back,aside h2{display:none}.top{height:45px}.intro h1{font-size:19px}.square{font-size:clamp(11px,3vw,20px)}}@media(max-height:700px) and (max-width:850px){.grid{width:min(100%,calc(100dvh - 310px),450px)}aside{max-height:105px}.key{display:none}}

.day-picker{display:flex;gap:5px;flex-wrap:wrap}.day-picker a{border:1px solid #c4d0c9;border-radius:18px;padding:6px 10px;font-size:12px;font-weight:700;background:white}.day-picker a[href$="2578"]:has(+ a){color:#155b43}.answer-panel{font-size:11px;line-height:1.35;overflow:auto;min-height:0;margin:5px 0}.square.verified,.key button.verified{background:#d9efdd;color:#176b51}.actions button[hidden]{display:none}@media(max-width:850px){.day-picker a{font-size:10px;padding:4px 6px}.answer-panel{max-height:50px}}

/* Let the numbered grid and letter key extend naturally instead of hiding controls. */
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{display:block}
main{display:block;min-height:0;padding:20px 16px 36px}
.layout{display:grid;align-items:start;min-height:0}
.board,aside{display:block;overflow:visible;min-height:0}
.grid{width:min(100%,610px)}
.key{overflow:visible}
footer{display:block}
@media(max-width:850px){.layout{grid-template-columns:1fr;grid-template-rows:auto;gap:16px}.grid{width:min(100%,520px)}aside{max-height:none}.key{display:grid}.note,.back,aside h2{display:block}}
@media(max-height:700px) and (max-width:850px){.grid{width:min(100%,520px)}aside{max-height:none}.key{display:grid}}
.brand{display:flex;align-items:center;gap:6px;font-size:23px}.brand-mark{width:30px;height:30px}.intro h1 span{font-size:.4em}.letters{display:none}
@media(min-width:851px){html,body{height:100%;overflow:hidden}body{display:flex}main{display:flex;flex:1;min-height:0;padding:8px 16px}.intro h1{font-size:26px}.leeroline{flex:none}.layout{display:grid;flex:1;min-height:0;margin-top:2px}.board,aside{overflow:hidden}.grid{width:min(100%,calc(100dvh - 225px),600px)}.key{overflow-y:auto}footer{display:none}}