:root{--text:#4f5d5a;--text-h:#1c2725;--muted:#6f7b74;--bg:#f3f1ea;--surface:#fffdfa;--border:#ded8c9;--border-strong:#c7bda9;--accent:#b65337;--accent-hover:#9e452d;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;margin:0;overflow:hidden}#root{height:100svh;overflow:hidden}button,input{font:inherit}h1{max-width:10ch;color:var(--text-h);letter-spacing:0;margin:0;font-size:clamp(34px,4.8vw,52px);font-weight:850;line-height:1}@media (width<=880px){h1{max-width:18ch;font-size:clamp(30px,10vw,42px)}}.app-shell{background:linear-gradient(90deg, #1e3a5a0f 1px, transparent 1px), linear-gradient(#1e3a5a0f 1px, transparent 1px), var(--bg);background-size:32px 32px;grid-template-columns:minmax(300px,390px) minmax(0,1fr);height:100svh;display:grid;position:relative;overflow:hidden}.control-panel{box-sizing:border-box;border-right:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f8f7f2eb;flex-direction:column;justify-content:center;gap:28px;min-height:100svh;padding:48px;display:flex;position:sticky;top:0}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 14px;font-size:13px;font-weight:800}.size-controls{grid-template-columns:1fr 1fr;gap:12px;display:grid}.size-controls label{color:var(--muted);gap:7px;font-size:13px;font-weight:700;display:grid}.size-controls input{box-sizing:border-box;border:1px solid var(--border-strong);width:100%;min-height:44px;color:var(--text-h);background:var(--surface);font:700 18px/1 var(--sans);border-radius:7px;padding:0 12px}.size-controls input:focus{border-color:var(--accent);outline:3px solid #ca6f4a33}.size-controls button{color:#fff;background:var(--accent);min-height:46px;font:800 15px/1 var(--sans);cursor:pointer;border:0;border-radius:7px;grid-column:1/-1;box-shadow:0 14px 30px #5b47302e}.size-controls button:hover{background:var(--accent-hover)}.size-controls .secondary-action{color:var(--accent);box-shadow:none;background:#fffdfaeb;border:1px solid #b6533747}.size-controls .secondary-action:hover{background:var(--surface);border-color:#b653377a}.size-controls .secondary-action:disabled{cursor:wait;opacity:.65}.marker-panel{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;align-items:center;gap:12px;padding:12px;font-size:13px;font-weight:700;display:flex}.marker-source{cursor:grab;background:#804ac214;border:1px solid #62378f40;border-radius:8px;flex:none;place-items:center;width:42px;height:42px;display:grid}.marker-source:active,.marker-on-tile:active{cursor:grabbing}.emoji-panel{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;gap:10px;padding:12px;font-size:13px;font-weight:700;display:grid}.emoji-palette{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.emoji-source{cursor:grab;background:#f8f7f2e6;border:1px solid #3649472e;border-radius:7px;place-items:center;min-width:0;height:38px;font-size:21px;line-height:1;display:grid}.emoji-source:hover{background:#fff;border-color:#b6533773}.emoji-source:active{cursor:grabbing}.zoom-controls{border:1px solid var(--border);background:var(--surface);border-radius:8px;grid-template-columns:42px 1fr 42px;align-items:end;gap:10px;padding:12px;display:grid}.zoom-controls button{width:42px;height:42px;color:var(--text-h);cursor:pointer;background:#f8f7f2e6;border:1px solid #3649472e;border-radius:7px;place-items:center;font-size:22px;font-weight:800;line-height:1;display:grid}.zoom-controls button:hover{background:#fff;border-color:#b6533773}.zoom-controls label{color:var(--muted);gap:8px;font-size:13px;font-weight:700;display:grid}.zoom-controls input{width:100%;accent-color:var(--accent)}.composition-stage{box-sizing:border-box;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;min-width:0;height:100svh;min-height:0;padding:36px;position:relative;overflow:hidden}.composition-stage.is-panning{cursor:grabbing}.board-controls{--base-unit:10px;--unit:calc(var(--base-unit) * var(--zoom));transform:translate(calc(-50% + var(--pan-x)), calc(-50% + var(--pan-y)));transform-origin:50%;grid-template-rows:38px auto 38px;grid-template-columns:38px auto 38px;place-items:center;gap:10px;display:grid;position:absolute;top:50%;left:50%}.column-controls{grid-template-columns:repeat(var(--map-width), calc(var(--unit) * 10));width:calc(var(--unit) * var(--map-width) * 10);gap:0;display:grid}.row-controls{grid-template-rows:repeat(var(--map-height), calc(var(--unit) * 10));height:calc(var(--unit) * var(--map-height) * 10);gap:0;display:grid}.top-controls{grid-area:1/2}.left-controls{grid-area:2/1}.right-controls{grid-area:2/3}.bottom-controls{grid-area:3/2}.shift-button{width:32px;height:32px;color:var(--text-h);cursor:pointer;background:#fffdfae0;border:1px solid #36494738;border-radius:7px;place-self:center;place-items:center;transition:transform .12s,background-color .12s,border-color .12s;display:grid;box-shadow:0 8px 18px #2329261f}.shift-button:hover{background:var(--surface);border-color:#b6533780;transform:translateY(-1px)}.shift-button:active{transform:translateY(0)scale(.96)}.shift-button:focus-visible,.tile-button:focus-visible{outline-offset:2px;outline:3px solid #ca6f4a47}.shift-button span{font-size:20px;font-weight:900;line-height:1}.geomorph-grid{grid-area:2/2;grid-auto-rows:calc(var(--unit) * 10);width:calc(var(--unit) * var(--map-width) * 10);height:calc(var(--unit) * var(--map-height) * 10);background:#e8e1d3;border:1px solid #3649473d;border-radius:8px;display:grid;overflow:hidden;box-shadow:0 28px 80px #23292638,inset 0 2px #ffffffe6}.tile-button{cursor:pointer;background:0 0;border:0;border-radius:0;min-width:0;min-height:0;padding:0;position:relative;overflow:hidden}.tile-button:hover .tile-content{filter:saturate(1.08)contrast(1.02)}.tile-content{transform-origin:50%;width:100%;height:100%;transition:transform .16s,filter .12s;display:block;position:relative}.tile{object-fit:fill;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:block}.marker-dot{background:#7b2ff2;border:2px solid #fff;border-radius:999px;width:18px;height:18px;display:block;box-shadow:0 0 0 2px #401f6947,0 8px 18px #3d205842}.marker-on-tile{z-index:2;cursor:grab;transition:left .16s,top .16s,transform .12s;position:absolute;translate:-50% -50%}.marker-on-tile:hover{transform:scale(1.12)}.marker-floating{z-index:20;pointer-events:none;transition:none;position:fixed;translate:-50% -50%}.emoji-marker{z-index:3;cursor:grab;filter:drop-shadow(0 2px 3px #1c272559);border-radius:999px;place-items:center;min-width:22px;min-height:22px;font-size:20px;line-height:1;transition:left .16s,top .16s,transform .12s;display:grid;position:absolute;translate:-50% -50%}.emoji-marker:hover{transform:scale(1.12)}.emoji-marker:active{cursor:grabbing}.emoji-floating{z-index:20;pointer-events:none;transition:none;position:fixed}.site-footer{z-index:5;max-width:min(520px,100vw - 28px);color:var(--muted);background:#fffdfae6;border:1px solid #36494724;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:650;line-height:1.25;position:fixed;bottom:10px;right:14px;box-shadow:0 8px 18px #23292614}.site-footer a{color:var(--accent);text-decoration:none}.site-footer a:hover{text-decoration:underline}::view-transition-group(*){animation-duration:.17s;animation-timing-function:ease}@media (width<=880px){.app-shell{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border);min-height:auto;padding:28px 20px 22px;position:relative}.composition-stage{height:100%;min-height:0;padding:24px 16px 56px}.board-controls{--base-unit:8px;--unit:calc(var(--base-unit) * var(--zoom));grid-template-rows:32px auto 32px;grid-template-columns:32px auto 32px;gap:7px}.shift-button{width:28px;height:28px}.shift-button span{font-size:18px}.site-footer{text-align:center;max-width:none;bottom:8px;left:10px;right:10px}}@media (width<=520px){.size-controls{grid-template-columns:1fr}}