.brand{text-decoration:none;color:inherit}
.tag a{text-decoration:none}
footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}
footer nav a{display:inline-flex;align-items:center;min-height:24px}
.brand:focus-visible,footer a:focus-visible{outline:3px solid #d59c3c;outline-offset:3px;border-radius:8px}
/* Keep desktop on one screen and give the workspace the saved header/footer space. */
@media(min-width:901px){
 .wrap{padding:10px 12px;gap:7px;grid-template-rows:52px 40px minmax(0,1fr) auto 32px 24px}
 header{padding:4px 12px}.brand-logo{width:40px;height:40px}.brand-name{font-size:18px}.brand-note{font-size:9px}
 .lead{padding:0 4px}.lead>div:first-child{display:flex;align-items:baseline;gap:16px}.eyebrow,.lesson-stamp{display:none}h1{font-size:24px;margin:0}.intro{font-size:12px}
 .workbench{grid-template-rows:34px minmax(0,1fr);gap:7px}.work-tabs button{padding:5px 12px;font-size:13px}
 #notice{min-height:26px;padding:4px 10px;font-size:11px;line-height:1.5}
 .steps{gap:10px}.step{padding:4px 10px;display:flex;align-items:center}.step b{font-size:11px;margin:0;line-height:1.5}.step p{display:none}.num{width:17px;height:17px;font-size:9px}
 footer{font-size:10px;line-height:1.4}footer nav{gap:8px 14px}footer nav a{min-height:24px}
}
@media(min-width:901px) and (max-height:800px){.palette button{padding:6px;margin-bottom:5px}.palette>p{margin-bottom:6px}}
@media(max-width:900px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 .viewport{position:static;height:auto;overflow:visible}
 .wrap{position:relative;inset:auto;height:auto;min-height:100svh;padding:12px;gap:12px;grid-template-rows:auto auto auto auto auto auto}
 header{min-height:56px}.brand{gap:8px}.brand-name{font-size:16px}.brand-note{font-size:9px}.brand-logo{width:40px;height:40px}
 .tag,.window-controls .pill{display:none}.window-controls button{min-height:40px;font-size:12px}
 .lead{display:block;padding:4px}h1{font-size:25px}.eyebrow,.lesson-stamp{display:none}.intro{font-size:13px;margin-top:6px}
 .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:18px;overflow:visible}
 .arena{height:min(620px,calc(100svh - 180px));min-height:440px;grid-template-rows:auto minmax(0,1fr) 54px auto}
 .arena-top{padding:10px 12px}.arena-top b,.arena-top .pill{font-size:12px}
 .arena .caption{display:block;padding:4px 12px 10px;font-size:12px;line-height:1.65}
 .controls{padding:5px 8px;gap:6px}.controls button{min-height:44px;font-size:13px;padding:8px 6px}
 .reward-hud{max-width:150px;font-size:11px}.reward-hud strong{font-size:17px}.reward-hud p{font-size:10px;display:block}
 .workbench{grid-template-rows:auto auto;min-height:0;gap:10px}.work-tabs{flex-wrap:wrap;gap:8px}.work-tabs button{min-height:44px;font-size:13px;padding:8px 12px}.work-tabs>span{font-size:11px}
 .reward-panel{display:flex;flex-direction:column;min-height:570px;padding:14px;gap:12px}
 .reward-head{align-items:flex-start;flex-wrap:wrap;gap:8px}.reward-head b{font-size:16px}.reward-head select{min-height:36px;max-width:140px;font-size:12px}.reward-head button{min-height:36px;font-size:12px}
 .reward-sub{font-size:13px;line-height:1.7}
 .block-studio{grid-template-columns:94px minmax(0,1fr);gap:10px;min-height:350px;flex:1}
 .palette{padding:8px 6px}.palette>p b{font-size:13px}.palette>p small{font-size:11px}.palette button{min-height:44px;font-size:12px;padding:8px 5px;white-space:normal}.palette-symbol{display:none}
 .program{min-width:0}.program-header{font-size:11px;flex-wrap:wrap}.block-list{max-height:560px}.reward-block{font-size:12px;padding:8px 6px;gap:6px}.reward-block select{font-size:13px;max-width:100%;min-height:32px}.reward-block input[type=number]{min-height:32px;font-size:13px}.block-tools button{min-width:30px;min-height:30px;font-size:13px}
 .reward-test{font-size:12px;gap:6px}.reward-test button{font-size:12px;min-height:36px;padding:6px 8px}.reward-result{font-size:13px;line-height:1.8}.reward-actions button{font-size:13px;min-height:44px}.reward-actions small{font-size:11px}
 .side{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0;gap:12px}.card,.card:first-child{padding:16px}.card h2,.card:first-child h2{font-size:16px;line-height:1.7}.stat small{font-size:12px}.stat strong{font-size:25px}.field,.fine{font-size:13px}.field select{min-height:38px;font-size:13px}.secondary button,.experiment-controls button{font-size:12px;min-height:40px}.chart{height:220px;flex:none}.legend,.trial-count{font-size:11px}
 #notice{font-size:12px;line-height:1.8;padding:10px}.steps{gap:8px}.step{padding:10px 8px}.step b{font-size:12px;line-height:1.7}.step p{display:none}
 footer{font-size:11px;gap:8px}footer a{min-height:36px}footer nav{gap:8px 18px}
}
@media(max-width:359px){.wrap{padding:8px}.brand-name{font-size:14px}.brand-note{font-size:8px}.brand-logo{width:34px;height:34px}.window-controls button{font-size:11px;padding-inline:6px}.reward-panel{padding:10px}.block-studio{grid-template-columns:80px minmax(0,1fr);gap:8px}.work-tabs button{padding-inline:9px}.steps{grid-template-columns:1fr}.step b{font-size:13px}.reward-block .block-tools{margin-left:0}.card:first-child .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}