:root{color-scheme:light;--paper:#f3f2e9;--ink:#254941;--muted:#657b70;--line:#ced7c8;font-family:"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}main{height:100vh;height:100dvh;min-height:420px;display:flex;flex-direction:column;padding:0 28px;max-width:1150px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 8px;flex-shrink:0}h1{font-family:Georgia,serif;font-size:37px;font-weight:400;letter-spacing:-2px;margin:0;line-height:1}h1 span{font:12px "Segoe UI",sans-serif;letter-spacing:1px;display:inline-block;margin-left:18px;color:var(--muted)}.tools{display:flex;align-items:center;gap:6px}button{font:500 13px/1.2 "Segoe UI",sans-serif;color:var(--ink);border:1px solid transparent;background:transparent;min-height:44px;padding:10px 14px;cursor:pointer;border-radius:24px;-webkit-tap-highlight-color:transparent}button:hover{background:#e3e9dc}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}#pause{border-color:var(--line)}button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.world-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}#world{position:relative;width:560px;height:720px;flex:none}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}footer{text-align:center;padding:0 0 12px;flex-shrink:0}footer p{font:18px/1.3 Georgia,serif;margin:0 auto;height:2.6em;display:flex;align-items:center;justify-content:center}footer span{font-size:12px;line-height:1.4;color:var(--muted)}#help{font-size:11px;margin-left:12px;padding:8px;min-height:36px;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}dialog{max-width:410px;width:calc(100% - 40px);max-height:calc(100dvh - 40px);border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 24px 100px #25494125}dialog::backdrop{background:#173d343d;backdrop-filter:blur(4px)}dialog h2{font:28px/1.15 Georgia,serif;margin:0 0 20px}dialog p{font-size:14px;line-height:1.6;color:#4d675b}dialog button{background:var(--ink);color:var(--paper);width:100%;margin-top:8px}dialog button:hover{background:#396657}
@media(max-width:540px){main{padding:0 10px}header{padding:16px 4px 4px}h1{font-size:32px}h1 span{display:block;font-size:10px;letter-spacing:.8px;margin:7px 0 0}.tools{gap:0}button{padding:10px 12px}footer{padding:0 0 max(14px,env(safe-area-inset-bottom))}footer p{font-size:17px}footer span{font-size:10px}#help{margin-left:5px;font-size:10px}}
@media(max-height:530px){header{padding:8px 0}footer{padding:0 0 5px}footer p{font-size:15px}h1 span{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#save-status{font-size:10px;color:var(--muted);min-height:18px;margin-top:4px}.error{color:#963d27!important}button:disabled{opacity:.35;cursor:default}.tools{flex-wrap:wrap;justify-content:flex-end}#reset-dialog button+button{background:transparent;color:var(--ink);border:1px solid var(--line)}
@media(max-width:540px){header{gap:5px}h1 span{font-size:9px}.tools button{padding:8px;font-size:12px}footer p{font-size:15px;height:2.6em}footer span{display:block;font-size:10px}#help{min-height:28px;padding:4px}#save-status{font-size:9px}main{min-height:440px}}

.world-area{overflow:hidden;border-radius:24px;background:#f3f2e9}footer nav{display:flex;justify-content:center;align-items:center;gap:2px}footer nav button{min-height:34px;padding:5px 12px;font-size:12px}footer p{font-size:16px;height:2.6em}header{padding-top:14px}footer{padding-bottom:6px}#world{overflow:hidden}canvas{cursor:crosshair}
@media(max-width:540px){header{padding-top:10px}h1 span{font-size:8px}.tools button{padding:7px;font-size:11px}footer nav button{font-size:11px;padding:4px 10px}footer p{font-size:13px;height:2.6em}main{min-height:460px}}