*{box-sizing:border-box}body{--bg:#f6f7ef;--paper:#fffef7;--ink:#18392d;--line:#c5cec0;background:var(--bg);color:var(--ink);margin:0;font:14px Arial,sans-serif}body.dark{--bg:#17241f;--paper:#24372f;--ink:#e0ebdb;--line:#506459}header{display:flex;align-items:center;justify-content:space-between;padding:16px 4vw;border-bottom:2px solid var(--ink);background:var(--paper);position:relative}.brand,.score,.row,.intro,.controls,.stagehead,.caption,footer{display:flex;align-items:center;justify-content:space-between}.brand{gap:12px}.badge{display:grid;place-items:center;background:#caed89;border:2px solid #244634;box-shadow:3px 3px #244634;width:40px;height:40px;font-size:23px}.brand strong,.panelhead,h1{font-family:Rockwell,Georgia,serif;font-weight:900}.brand strong{font:900 20px/1 Consolas,monospace;letter-spacing:-1px}.brand small{display:block;font:700 9px monospace;letter-spacing:1px;margin-top:4px}.score{gap:14px;background:#213e32;color:#fff;padding:8px 13px;font: bold 12px monospace;border-bottom:3px solid #101f18;position:absolute;left:50%;transform:translateX(-50%)}.score strong{font-size:23px}.mint{color:#b2eac6}.pink{color:#ffc3d4}time{border-left:1px solid #819486;padding-left:12px}.intro{margin:27px 0 20px}.intro h1{font-size:clamp(35px,3.5vw,55px);margin:5px 0 3px;letter-spacing:-2.5px;line-height:1}.intro h1 span{color:#80ab56}p{margin:7px 0;color:#687c70}.tag,label,output,.stagehead,.caption,footer{font:bold 10px/1.4 Consolas,monospace;letter-spacing:1px}.tag{border:1px solid var(--line);padding:7px 10px}.tag i{display:inline-block;width:7px;height:7px;background:#7bac59}main{max-width:1750px;margin:auto;padding:0 4vw}.layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:18px}article,aside{border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--line)}.stage{height:clamp(365px,53vh,680px);position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#a4cdf0,#d4e9ed 71%,#dfefdd);touch-action:none}.stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}.stagehead,.caption{position:absolute;z-index:2;left:16px;right:16px;pointer-events:none;color:#244738}.stagehead{top:15px}.stagehead b{background:#e36e5e;color:white;padding:4px 9px}.stagehead span,.caption span{background:#f7fae9df;padding:4px 7px}.caption{bottom:12px;font-size:9px}.cloud{position:absolute;background:#ffffffad;width:84px;height:7px;box-shadow:12px -6px #ffffffad,27px -12px 0 -1px #ffffffad}.c1{top:22%;left:5%}.c2{top:12%;right:23%;scale:.75}.c3{top:33%;right:4%;scale:.55}.controls{border-top:2px solid var(--ink);padding:13px 16px}.controls section{display:flex;gap:6px;margin-top:5px}button{font:700 12px Consolas,monospace;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:7px 11px;cursor:pointer}button:hover{border-color:var(--ink)}#pause,.active{background:#234b36!important;color:white!important}#theme{font-size:21px;padding:3px 10px}aside{padding:17px;align-self:start}.panelhead{font-size:20px;border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:17px}label{display:block}.seg{display:flex;margin-top:9px}.seg button{flex:1}hr{border:0;border-top:1px dashed var(--line);margin:17px 0}.row{font:600 13px Arial;letter-spacing:0;margin:13px 0 0}.row input{appearance:none;width:29px;height:15px;background:#a6afa4;border:1px solid #687d68;cursor:pointer;position:relative}.row input:after{content:'';position:absolute;width:9px;height:9px;background:white;top:2px;left:2px}.row input:checked{background:#467958}.row input:checked:after{left:15px}#size{width:100%;accent-color:#365e45}footer{margin:17px 0;font-size:9px;color:#657568}footer span:last-child{margin-left:auto}footer b{margin-right:16px}@media(max-width:840px){.layout{grid-template-columns:minmax(0,1fr) 205px;gap:10px}.score{position:static;transform:none}.controls{padding:9px}.controls button{padding:6px}.tag{display:none}}@media(max-width:660px){header{flex-wrap:wrap;gap:12px}.score{order:3;justify-content:center;width:100%}.layout{display:block}.stage{height:55vw;min-height:260px}.intro{margin:17px 0}aside{margin-top:15px}.caption span:last-child{display:none}.panelhead{margin-bottom:10px}footer{letter-spacing:0}}
/* A wider, higher diorama window retains the existing control-room layout. */
.stage{height:clamp(405px,60vh,750px);background:#b7c8e0}
.stage .cloud{display:none}
.city-sky{position:absolute;inset:0;pointer-events:none;background-repeat:repeat-x;background-size:auto 100%;image-rendering:pixelated}
@media(max-width:660px){.stage{height:64vw;min-height:255px}}
/* Mobile-only layout; the existing desktop control room stays expanded. */
.mobile-panel-toggle{display:none}
@media(max-width:760px),(max-width:960px) and (pointer:coarse){
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
  header{padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));flex-wrap:wrap;gap:8px}
  .brand{gap:8px;min-width:0}.brand strong{font-size:18px}.brand small{font-size:8px;letter-spacing:.4px}.badge{width:34px;height:34px;font-size:20px}
  .score{position:static;transform:none;order:3;width:100%;gap:10px;justify-content:center;padding:7px 8px;font-size:11px}.score strong{font-size:22px}time{padding-left:8px}
  main{padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));min-width:0}
  .intro{margin:12px 0 10px}.intro h1{font-size:30px;letter-spacing:-1px}.intro p{font-size:12px}.intro label{font-size:8px}.tag{display:none}
  .layout{display:block;min-width:0}article{min-width:0}
  .stage{height:78vw;height:clamp(280px,min(78vw,48svh),440px);min-height:0}
  .stagehead,.caption{left:7px;right:7px;font-size:8px;letter-spacing:.3px}.stagehead{top:6px}.caption{bottom:5px}.caption span:last-child{display:none}
  .controls{display:grid;grid-template-columns:minmax(0,1fr);padding:8px;gap:10px}
  .controls>div{min-width:0;width:100%}
  .controls section{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.2fr) minmax(44px,.55fr);gap:6px;min-width:0}
  .controls>div:last-child section{grid-template-columns:repeat(3,minmax(44px,1fr))}
  .controls button{display:grid;place-items:center;width:100%;min-width:44px;min-height:44px;height:auto;margin:0;padding:8px 6px;white-space:nowrap;font:700 12px/1.25 Consolas,monospace}
  .controls label{font-size:9px}
  button{touch-action:manipulation}#theme{min-width:44px;min-height:44px}
  aside{margin-top:12px;padding:0;touch-action:pan-y}.panelhead{display:none}
  .mobile-panel-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 14px;border:0;font-size:16px;text-align:left}
  #control-room:not(.open) #control-settings{display:none}#control-settings{padding:0 14px 14px}
  #control-settings button{min-height:44px}#control-settings .row{min-height:44px;margin-top:4px}#size{height:44px;margin:0}
  .site-status{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'brand format' 'engine engine';column-gap:12px;row-gap:4px;align-items:start;justify-content:normal;margin:12px 0;font:700 10px/16px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .site-status>*{display:block;min-width:0;max-width:100%;font:inherit;letter-spacing:inherit;white-space:nowrap}
  .site-status .status-brand{grid-area:brand;justify-self:start;margin:0}
  .site-status .status-format{grid-area:format;justify-self:end;margin:0}
  .site-status .status-engine{grid-area:engine;justify-self:start;margin:0}
}
@media(max-width:360px){
  .site-status{grid-template-columns:minmax(0,1fr);grid-template-areas:'brand' 'format' 'engine'}
  .site-status .status-format{justify-self:start}
}
@media(max-width:760px) and (max-height:600px) and (orientation:landscape),(max-width:960px) and (pointer:coarse) and (max-height:600px) and (orientation:landscape){
  header{flex-wrap:nowrap}.brand small,.badge,.intro{display:none}.brand strong{font-size:16px}
  .score{order:0;width:auto;margin-left:auto;gap:8px}.score strong{font-size:19px}main{padding-top:8px}
  .stage{height:calc(100vh - 108px);height:clamp(210px,calc(100svh - 108px),500px);min-height:0}
  .controls{padding:6px 8px}.controls label{display:none}.controls section{margin:0}
}