:root{color-scheme:dark;--bg:#101a21;--panel:#152129;--line:#2a3b43;--text:#e2e9e6;--muted:#8c9ea5;--accent:#e1bd7d;--mint:#9bceb9;font:13px/1.5 'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{border:1px solid var(--line);background:#1c2b33;color:#bac9cc;border-radius:6px;padding:8px 11px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#2b3e47;border-color:#607c86;color:#fff}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.35;cursor:default}.primary{background:var(--accent);color:#242d2c;border-color:var(--accent);font-weight:700}.primary:hover{background:#f0d39e;color:#162329}header{height:76px;display:flex;align-items:center;padding:0 22px;gap:17px;border-bottom:1px solid var(--line);background:#132028}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#e5d6b7;font-weight:700;letter-spacing:3px;font-size:17px}.brand small{font-size:9px;display:block;color:#8caaa8;letter-spacing:2px;line-height:1.1}.crest{font-size:32px;color:var(--accent)}.header-divider{width:1px;height:28px;background:var(--line);margin:0 4px}#mapName{width:190px;min-width:80px;background:none;border:0;color:#e0e7e4;font-size:15px;font-weight:600;padding:8px}.saved{font-size:11px;color:#8db7a2;white-space:nowrap}.saved::before{content:'●';font-size:7px;margin-right:7px}.header-actions{display:flex;align-items:center;gap:7px;margin-left:auto}.header-actions .primary{padding:10px 18px;margin-left:7px}.header-actions #undo,.header-actions #redo{font-size:21px;line-height:20px;padding:8px 12px}main{display:grid;grid-template-columns:252px minmax(0,1fr) 250px;height:calc(100dvh - 76px)}.panel{padding:23px 20px;overflow:auto;scrollbar-width:thin;scrollbar-color:#344851 transparent}.tools{border-right:1px solid var(--line)}.details{border-left:1px solid var(--line)}.section-caption{font-size:9px;color:#94b6ad;font-weight:600;letter-spacing:1.6px}h1,h2{font-family:Georgia,serif;color:#ece7d9;font-weight:400;line-height:1.15}h1{font-size:26px;margin:11px 0}h2{font-size:23px;margin:12px 0}.intro{font-size:11px;line-height:1.7;color:var(--muted);margin-bottom:23px}.section-heading{display:flex;gap:9px;font-size:10px;letter-spacing:1.3px;color:#5d7c80;margin:21px 0 12px}.section-heading span{color:#b9c8c6}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-grid button{display:flex;flex-direction:column;align-items:flex-start;padding:10px;font-size:11px;gap:5px;background:#17262e}.tool-grid b{font-size:22px;font-weight:400;line-height:23px;color:#9db7b6}.tool-grid .active{background:#34443f;border-color:#b39969;color:#f0ddba}.tool-grid .active b{color:var(--accent)}.danger-tool b{color:#cb97a2}.compact button{display:block;text-align:left;padding:9px 7px;font-size:11px}.spawn-tool{color:#c3abe7}.brush-settings{margin:18px 0}label{display:block;font-size:11px;color:#a4b9bb;margin:11px 0}output{float:right;font-variant-numeric:tabular-nums;color:#ded5be}input[type=range]{width:100%;display:block;accent-color:var(--accent);height:4px;margin:13px 0 18px}.swatches{display:flex;gap:10px;margin-top:14px}.swatches button{background:var(--swatch);height:26px;width:35px;border:2px solid transparent}.swatches .active{outline:1px solid #e3c797;outline-offset:3px}.placement-settings label{display:flex;align-items:center;justify-content:space-between}.placement-settings input{width:65px;border:1px solid var(--line);border-radius:4px;background:#111d24;padding:4px 6px;color:#d7e3df}.wide{width:100%;font-size:11px}.viewport{position:relative;overflow:hidden;background:radial-gradient(at 45% 30%,#4d6d74,#172d38 75%)}#editor{display:block;width:100%;height:100%;touch-action:none}.viewport-top{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.4px;color:#cedcda;pointer-events:none}.live-dot{height:5px;width:5px;border-radius:100%;background:#b2dfbe;box-shadow:0 0 8px #b2dfbe55}#dimensions{color:#afc3c5;font-size:10px;letter-spacing:0;border-left:1px solid #96b2b344;padding-left:10px;margin-left:4px}.view-actions{position:absolute;right:18px;top:47px;display:flex;gap:5px}.view-actions button{background:#13252bd9;border-color:#78919344;font-size:10px;padding:6px 8px}.view-actions button[aria-pressed=false]{color:#6e898f}.canvas-guide{position:absolute;top:95px;left:25px;background:#14252be8;border:1px solid #a0b2a12a;border-left:2px solid var(--accent);border-radius:0 7px 7px 0;padding:18px 21px;backdrop-filter:blur(12px);box-shadow:0 10px 40px #0002;max-width:calc(100% - 50px)}.canvas-guide>span{font-size:8px;letter-spacing:2px;color:var(--accent)}.canvas-guide strong{display:block;font:23px Georgia,serif;margin-top:9px;color:#ebe6d8}.canvas-guide p{font-size:11px;color:#a8bdbd;line-height:1.8}.canvas-guide button{background:none;border:0;padding:0;font-size:11px;color:#e3c58e}.canvas-guide button span{margin-left:45px}.brush-hud{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);background:#142329ed;border:1px solid #9fb5aa36;border-radius:9px;display:flex;align-items:center;gap:14px;padding:12px 18px;max-width:calc(100% - 40px);width:410px;pointer-events:none;box-shadow:0 8px 28px #0003}.brush-hud>span{color:var(--accent);font-size:27px}.brush-hud strong{font-size:12px;color:#e1d6bc;font-weight:600}.brush-hud small{display:block;font-size:10px;color:#9bb1b5;margin-top:3px}.viewport-bottom{position:absolute;bottom:0;left:0;width:100%;background:#102028d9;padding:10px 17px;display:flex;justify-content:space-between;gap:8px;color:#92a9ad;font-size:8px;letter-spacing:.4px;pointer-events:none}.viewport-bottom i{font-style:normal;color:#52747b;padding:0 5px}#coordinates{color:#e0ceb0;white-space:nowrap;font-variant-numeric:tabular-nums}.expand-control{display:flex;flex-direction:column;gap:6px;align-items:center;background:#111f26;padding:12px;border:1px solid var(--line);border-radius:8px}.expand-control>div{display:flex;align-items:center;gap:8px;justify-content:space-between;width:100%}.expand-control button{font-size:10px;background:#213139;padding:7px}.expand-control>button{width:130px}.expand-control span{font-size:12px;line-height:1.5;text-align:center;color:#dfd6bd;min-width:40px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:17px 10px;padding:23px 0 6px}.stats strong{display:block;font-size:23px;font-weight:400;color:#d6dfd6;font-variant-numeric:tabular-nums}.stats small{color:#78959d;font-size:8px;letter-spacing:1.1px}.small-note{font-size:11px;color:#8fa7ad;line-height:1.7}.spawn-row{display:flex;gap:5px;margin:8px 0}.spawn-row button:first-child{flex:1;text-align:left;font-size:11px;color:#d3c1e5}.spawn-row button:last-child{padding:4px 9px}#validation{font-size:11px;background:#20382f;color:#a8d1b4;border:1px solid #3b5d49;border-radius:6px;padding:10px;margin:13px 0 9px}#validation.invalid{background:#3d2f2b;color:#e1b89a;border-color:#725342}#validation ul{padding-left:15px;margin:6px 0 0}.note{border-top:1px solid var(--line);margin-top:24px;padding-top:17px}.note b{font-size:11px;font-weight:500;color:#d5c3a4}.note p{font-size:11px;color:#8da4a9;line-height:1.8;margin-bottom:0}.subtle{margin-top:15px}.document-actions{display:flex;flex-direction:column;gap:6px;margin-top:24px}.document-actions button{font-size:11px}.local-note{color:#6e8b94;font-size:10px;line-height:1.6}#toast{position:absolute;left:50%;bottom:125px;transform:translateX(-50%);background:#1a3038;border:1px solid #78998e;padding:12px 18px;border-radius:8px;max-width:90%;color:#e7dbc0;box-shadow:0 4px 24px #0005}#fatal{position:absolute;inset:20%;padding:30px;background:#352826;color:#ffd7c1;z-index:5}dialog{background:#182930;color:#b7c9c9;border:1px solid #59706e;border-radius:12px;padding:26px;max-width:400px}dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}dialog>div{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}[hidden]{display:none!important}@media(min-width:1600px){main{grid-template-columns:270px minmax(0,1fr) 280px}.panel{padding:27px 24px}.canvas-guide{top:90px}}@media(max-width:1150px){main{grid-template-columns:220px minmax(0,1fr) 215px}.panel{padding:20px 14px}.saved{display:none}.viewport-bottom>span:last-child{display:none}.viewport-top{left:15px}.canvas-guide{left:15px;padding:15px}.canvas-guide strong{font-size:20px}}@media(max-width:850px){main{grid-template-columns:190px minmax(0,1fr)}.details{display:none}header{padding:0 12px;gap:10px}.header-divider{display:none}#mapName{width:130px}.brand{font-size:14px;letter-spacing:1px}.header-actions{gap:4px}.header-actions button{padding:7px}.header-actions .primary{padding:8px}.header-actions #redo{display:none}.viewport-top b{display:none}.canvas-guide{top:95px}.canvas-guide p br{display:none}}@media(max-width:580px){header{height:65px}.brand>span:last-child{display:none}#mapName{width:95px;font-size:12px}.header-actions #undo{display:none}.header-actions #import,.header-actions #export{font-size:10px}main{height:calc(100dvh - 65px);grid-template-columns:145px minmax(0,1fr)}.panel{padding:16px 9px}h1{font-size:21px}.section-caption{font-size:8px;letter-spacing:.5px}.intro{font-size:10px}.tool-grid{gap:4px}.tool-grid button{font-size:10px;padding:7px}.compact button{font-size:9px;padding:8px 4px}.canvas-guide{display:none}.view-actions{right:7px;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}.view-actions button{font-size:9px;padding:4px}.brush-hud{bottom:45px;padding:9px;gap:7px;max-width:calc(100% - 15px)}.brush-hud small{font-size:9px}.viewport-top{left:10px}#dimensions{border:0;padding:0;margin:0}}


#detailsToggle{display:none}@media(max-width:850px){#detailsToggle{display:block}.details.open{display:block;position:absolute;right:0;top:76px;bottom:0;width:250px;z-index:20;background:#152129;box-shadow:-10px 0 40px #0005}.details.open::before{content:"Map options";display:block;color:#e1bd7d;margin-bottom:14px}.view-actions{z-index:21}.details.open{top:160px}}

.mobile-history{display:none}@media(max-width:850px){.mobile-history{display:flex;gap:8px;margin-bottom:20px}.mobile-history button{flex:1}}