:root {
  color-scheme: dark;
  --shell: light-dark(#dce2e6, #181c22); --panel: light-dark(#edf2f5, #252c35); --raised: light-dark(#d5dfe7, #35414d); --rail: light-dark(#cfd9e1, #11171d);
  --text: light-dark(#1f2e3c, #eff5fa); --muted: light-dark(#4d5f6f, #b9cad8); --line: light-dark(#adbdcc, #4b5c6d);
  --control-line: light-dark(#687d8c, #8b9dad);
  --accent: light-dark(#bc3b23, #ff7158); --on-accent: light-dark(#fff, #291811); --accent-hover: light-dark(#a32b19, #ff947e); --accent-depth: light-dark(#872916, #a94230);
  --selected: #506b88; --selected-line: light-dark(#37516b, #acc1d4); --selected-hover: #405d7b; --selected-depth: #2b445c;
  --rail-width: 68px; --toolbar-height: 48px; --drawer-width: 310px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px); --mobile-rail-height: calc(56px + var(--safe-area-bottom));
  font-family: "Segoe UI", Arial, sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; color: var(--text); background: var(--shell);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input, select { font: inherit; }
button, summary, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; border: 0; border-radius: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a, summary { touch-action: manipulation; }
button:hover:not(:disabled) { background-color: var(--raised); }
button:active:not(:disabled) { translate: 0 1px; }
input, select { color: var(--text); background: var(--shell); border: 1px solid var(--control-line); border-radius: 0; min-width: 0; }
input::placeholder { color: var(--muted); opacity: .9; }
input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; }
input[type="number"] { font-variant-numeric: tabular-nums; }
select { padding-right: 24px; } a { color: inherit; } [hidden] { display: none !important; } h1, h2, p { margin: 0; }
.icon-library, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.icon.tiny { width: 12px; height: 12px; }
.skip-link { position: fixed; top: -70px; left: 8px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 12px 18px; font-weight: 700; }.skip-link:focus { top: 8px; }
.biome-app { width: 100%; height: 100dvh; min-height: 320px; display: flex; flex-direction: column; isolation: isolate; }
.app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 76px; padding: 10px 18px 10px 0; background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.identity { display: flex; align-items: center; align-self: stretch; }.identity h1 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-stretch: condensed; font-size: 29px; font-weight: 800; letter-spacing: -1.1px; padding: 0 22px; }
.site-menu { position: relative; height: 100%; }.site-menu summary { display: flex; align-items: center; justify-content: center; gap: 7px; height: 100%; padding: 0 16px; min-width: 106px; color: var(--accent); font-size: 17px; font-weight: 900; letter-spacing: -.6px; border-right: 1px solid var(--line); list-style: none; cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }.site-menu summary:hover, .site-menu[open] summary { background: var(--raised); }.site-menu[open] summary > .tiny { rotate: 180deg; }.wkd-mark { width: 25px; height: 20px; fill: currentColor; }
.site-links { position: absolute; left: 8px; top: calc(100% + 10px); min-width: 232px; padding: 7px; background: var(--panel); border: 1px solid var(--line); box-shadow: 4px 5px 0 #09101855; z-index: 100; }
.site-links a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; min-height: 40px; text-decoration: none; font-size: 13px; }.site-links a:hover { background: var(--raised); }.site-links a[aria-current="page"] { color: #fff; background: var(--selected); box-shadow: inset 3px 0 var(--accent); }
.site-links a.site-group { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; padding-top: 15px; }.site-links .site-home { font-weight: 700; border-bottom: 1px solid var(--line); }.site-links .site-about { margin-top: 5px; border-top: 1px solid var(--line); }
.world-form { display: grid; grid-template-columns: minmax(140px, 1fr) 88px 94px 76px; gap: 10px; align-items: end; max-width: 790px; width: 100%; margin-left: auto; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; }.field > input, .field > select { width: 100%; height: 40px; padding: 8px 10px; font-size: 13px; }.field > span, .field > label { line-height: 1; }
.world-form .field { gap: 5px; }.world-form .field > select { height: 36px; padding: 6px 7px; font-size: 12px; }
.seed-entry { display: flex; height: 36px; border: 1px solid var(--line); background: var(--shell); }.seed-entry input { min-width: 0; width: 0; flex: 1; border: 0; padding: 6px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: transparent; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 38px; min-height: 38px; padding: 8px; color: var(--text); background: var(--panel); }.seed-entry .random-button { min-height: 0; width: 38px; min-width: 38px; border-left: 1px solid var(--line); background: transparent; color: var(--muted); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 13px; font-size: 13px; font-weight: 650; }.primary-button { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); box-shadow: inset 0 -3px var(--accent-depth); }.primary-button:hover:not(:disabled) { background: var(--accent-hover); }.secondary-button { color: var(--text); background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 -2px var(--shell); }
.load-button { position: relative; min-height: 36px; height: 36px; padding: 6px 10px; font-size: 12px; }.load-button .icon { width: 15px; height: 15px; }.load-button.is-pending::after { content: ""; position: absolute; width: 7px; height: 7px; right: 4px; top: 4px; background: var(--on-accent); box-shadow: 0 0 0 2px var(--accent); }.share-button { align-self: end; min-height: 36px; border: 1px solid var(--line); font-size: 12px; }.share-button .icon { width: 16px; height: 16px; }
.workspace { position: relative; min-height: 0; flex: 1; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); grid-template-rows: var(--toolbar-height) minmax(0, 1fr); overflow: hidden; }
.tool-rail { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 6px; background: var(--rail); border-right: 1px solid var(--line); z-index: 15; }.tool-rail button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; min-height: 61px; padding: 9px 2px 11px; font-size: 10px; font-weight: 550; color: var(--muted); background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 -3px var(--shell); }
.tool-rail button[aria-expanded="true"], .tool-rail button.active, .tool-rail button[aria-pressed="true"] { color: #fff; background: var(--selected); border: 2px solid var(--selected-line); box-shadow: inset 3px 0 var(--accent), inset 0 -4px var(--selected-depth); }.tool-rail button[aria-expanded="true"]:hover { background: var(--selected-hover); }.tool-rail .icon { width: 20px; height: 20px; }
.map-toolbar { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 12px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 25; }

.layer-picker { position: relative; align-self: stretch; display: flex; }.layer-button { display: flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; min-width: 102px; padding: 4px 9px; font-size: 12px; background: transparent; }.layer-button > .icon:first-child { width: 16px; height: 16px; }.layer-button[aria-expanded="true"] { background: var(--raised); box-shadow: inset 0 -2px var(--accent); }.layer-button[aria-expanded="true"] .tiny { rotate: 180deg; }
.layer-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 242px; padding: 7px; color: var(--text); background: var(--panel); border: 1px solid var(--line); box-shadow: 4px 5px 0 #09101855; }.menu-caption { display: block; padding: 7px 9px 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }.layer-menu > button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 42px; padding: 8px 10px; background: transparent; border: 1px solid transparent; font-size: 13px; text-align: left; }.layer-menu > button[aria-pressed="true"] { background: var(--selected); color: #fff; border-color: var(--selected-line); box-shadow: inset 3px 0 var(--accent); }.layer-check { width: 16px; height: 16px; visibility: hidden; }.layer-menu > button[aria-pressed="true"] .layer-check { visibility: visible; }
.height-entry { padding: 12px 9px 5px; margin-top: 6px; border-top: 1px solid var(--line); }
.height-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.height-heading label { color: var(--muted); font-size: 11px; }
.height-heading input { width: 80px; height: 34px; padding: 5px 7px; font-size: 14px; text-align: right; }
.height-entry input[type="range"] { display: block; appearance: none; width: 100%; height: 34px; margin: 4px 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.height-entry input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--accent) var(--height-progress, 83.333%), var(--line) var(--height-progress, 83.333%)); }
.height-entry input[type="range"]::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: 14px; height: 20px; margin-top: -7px; border: 2px solid var(--accent); border-radius: 0; background: var(--text); box-shadow: 2px 2px 0 var(--shell); }
.height-entry input[type="range"]::-moz-range-track { height: 6px; background: linear-gradient(to right, var(--accent) var(--height-progress, 83.333%), var(--line) var(--height-progress, 83.333%)); }
.height-entry input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 20px; border: 2px solid var(--accent); border-radius: 0; background: var(--text); box-shadow: 2px 2px 0 var(--shell); }
.height-limits { display: flex; justify-content: space-between; color: var(--muted); font: 11px/1.3 ui-monospace, Consolas, monospace; }
@media (pointer: coarse) { .height-heading input { width: 88px; height: 44px; font-size: 16px; }.height-entry input[type="range"] { height: 44px; } }

.map-viewport { position: relative; isolation: isolate; grid-column: 2; grid-row: 2; overflow: hidden; min-width: 0; min-height: 0; background: light-dark(#bed0d3, #152e38); touch-action: none; cursor: default; }.map-viewport:active { cursor: grabbing; }
/* The viewport frame stays above canvas pixels and never captures map input. */
.map-viewport::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid var(--accent); pointer-events: none; }.map-viewport canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }#overlayCanvas { pointer-events: none; }
.map-status { position: absolute; top: calc(var(--toolbar-height) + 12px); left: calc(var(--rail-width) + 12px); max-width: calc(100% - var(--rail-width) - 80px); background: var(--panel); color: var(--muted); border: 1px solid var(--line); padding: 8px 12px; font-size: 12px; z-index: 3; pointer-events: none; }.map-status:empty { display: none; }
.drawer { position: absolute; top: var(--toolbar-height); bottom: 0; left: var(--rail-width); width: var(--drawer-width); max-width: calc(100% - var(--rail-width) - 120px); display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); box-shadow: 4px 0 0 #09101830; z-index: 20; }.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 12px 10px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }.drawer-header h2 { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }.drawer-header .icon-button { width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 7px; }
.drawer-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 17px 18px 22px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }.drawer-panel > .field { margin-bottom: 16px; }.filter-field { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--shell); padding: 0 11px; height: 42px; color: var(--muted); }.filter-field .icon { width: 16px; height: 16px; }.filter-field input { border: 0; background: transparent; width: 100%; height: 100%; padding: 9px 0; font-size: 13px; }.panel-caption { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 15px 0 9px; }
.biome-list { display: flex; flex-direction: column; }.biome-row, .biome-list > label { display: flex; gap: 9px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 12px; }.biome-row label { display: flex; flex: 1; min-width: 0; align-items: center; align-self: stretch; gap: 8px; padding: 10px 0; cursor: pointer; }.biome-toggle > span:last-child { min-width: 0; overflow-wrap: anywhere; }.biome-row button { flex: 0 0 44px; min-height: 44px; text-align: center; padding: 8px 0; background: transparent; font-size: 11px; color: var(--muted); }.biome-swatch, .swatch { width: 10px; height: 13px; flex: 0 0 auto; background: var(--biome-color, currentColor); }.biome-list > label { cursor: pointer; padding: 9px 0; }.biome-list > label:hover, .biome-row:hover { background: var(--raised); }
.origin-fields { border: 0; padding: 0; margin: 4px 0 16px; min-width: 0; }.origin-fields legend { color: var(--muted); font-size: 11px; padding: 0; margin-bottom: 9px; }.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }.origin-fields .field { flex-direction: row; align-items: center; border: 1px solid var(--line); padding-left: 10px; background: var(--shell); }.origin-fields .field input { border: 0; width: 0; flex: 1; }.origin-actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 5px; }.text-button { min-height: 35px; padding: 6px 0; background: transparent; font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.search-actions { display: flex; gap: 8px; }.search-actions .primary-button { flex: 1; }.search-progress { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 13px 0; }.search-progress:empty { display: none; }.result-list, .pin-list { display: flex; flex-direction: column; }.result-list button, .pin-list > button, .list-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 55px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 12px; text-align: left; background: transparent; }.result-list small, .pin-list small { display: block; margin-top: 5px; color: var(--muted); font: 11px/1.4 ui-monospace, Consolas, monospace; }
.pin-row { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 4px 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }.pin-name { width: 100%; min-height: 40px; padding: 8px 10px; font-size: 13px; font-weight: 600; }.pin-row > p { color: var(--muted); font: 11px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }.pin-row > small { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }.pin-actions { display: flex; gap: 8px; margin-top: 3px; }.pin-actions button { flex: 1; min-height: 40px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; padding: 8px 10px; }.pin-actions button:first-child { background: var(--selected); color: #fff; }.empty-state, .empty, .pin-list > p, .result-list > p { padding: 15px 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.search-result { border-top: 1px solid var(--line); padding: 15px 0; font-size: 12px; }.search-result > strong { display: block; font-size: 14px; margin-bottom: 9px; }.search-result p { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 5px 0; }.search-result button { justify-content: center; width: 100%; min-height: 40px; border: 1px solid var(--line); margin-top: 12px; padding: 8px; background: var(--selected); color: #fff; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; }#panel-goto > .primary-button { width: 100%; margin-top: 17px; }
.map-controls { position: absolute; bottom: 16px; right: 16px; display: flex; flex-direction: column; padding: 2px; background: var(--panel); border: 1px solid var(--line); box-shadow: 3px 3px 0 #09101840; z-index: 8; }.map-controls .icon-button + .icon-button { border-top: 1px solid var(--line); }
.map-readouts { position: absolute; bottom: 13px; left: calc(var(--rail-width) + 14px); display: flex; align-items: center; gap: 24px; color: #fff; font: 11px/1.3 ui-monospace, Consolas, monospace; text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 4; }.scale-readout { display: flex; align-items: center; gap: 8px; }.scale-readout:empty { display: none; }.scale-readout::before { content: ""; width: 40px; height: 6px; border: solid currentColor; border-width: 0 1px 1px; }
.selection-bar { position: absolute; bottom: 37px; left: calc(var(--rail-width) + 14px); max-width: calc(100% - var(--rail-width) - 92px); display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 7px 7px 7px 13px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--biome-color, var(--accent)); box-shadow: 3px 3px 0 #09101840; z-index: 7; }.selection-text { display: flex; flex-direction: column; min-width: 0; gap: 5px; }.selection-text strong { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }.selection-text > span { color: var(--muted); font: 11px/1.3 ui-monospace, Consolas, monospace; white-space: nowrap; }.selection-actions { display: flex; flex: 0 0 auto; }.selection-actions .icon-button { min-width: 34px; min-height: 34px; padding: 7px; }.selection-actions .icon { width: 17px; height: 17px; }
.workspace:has(.drawer:not([hidden])) .selection-bar { left: calc(var(--rail-width) + var(--drawer-width) + 14px); max-width: calc(100% - var(--rail-width) - var(--drawer-width) - 92px); }.workspace:has(.drawer:not([hidden])) .map-readouts { left: calc(var(--rail-width) + var(--drawer-width) + 14px); }
.toast { position: absolute; bottom: 107px; left: calc(50% + var(--rail-width) / 2); translate: -50% 0; max-width: calc(100% - 90px); padding: 11px 16px; color: var(--text); background: var(--panel); border: 1px solid var(--line); box-shadow: 3px 3px 0 #09101840; font-size: 12px; line-height: 1.5; text-align: center; z-index: 35; }.toast:empty { display: none; }.noscript { position: fixed; inset: 35% 10% auto; z-index: 100; padding: 20px; background: var(--panel); border: 1px solid var(--accent); }
.toast button { min-height: 36px; padding: 6px 12px; margin-left: 8px; color: var(--accent); background: transparent; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }.link-error { position: absolute; inset: 0; display: grid; place-content: center; padding: 28px clamp(22px, 12vw, 180px); background: var(--panel); color: var(--text); font-size: 15px; line-height: 1.7; text-align: center; cursor: default; z-index: 50; border-top: 3px solid var(--accent); }
@media (max-width: 1100px) {
  .app-header { gap: 14px; padding-right: 12px; }.identity h1 { padding: 0 15px; font-size: 26px; }.site-menu summary { min-width: 86px; padding: 0 10px; }.wkd-mark { display: none; }.world-form { grid-template-columns: minmax(130px, 1fr) 76px 82px 65px; gap: 7px; }.share-button span { display: none; }
}
@media (max-width: 820px) {
  :root { --rail-width: 60px; --drawer-width: 286px; }.app-header { gap: 9px; }.identity h1 { padding: 0 12px; font-size: 24px; }.site-menu summary { min-width: 72px; font-size: 15px; gap: 5px; }.world-form { grid-template-columns: minmax(110px, 1fr) 66px 72px 54px; gap: 6px; }.load-button .icon { display: none; }.dimension-switch button { padding: 0 10px; font-size: 11px; }.map-toolbar { gap: 8px; padding: 4px 8px; }.tool-rail { padding: 8px 5px; }.workspace:has(.drawer:not([hidden])) .selection-bar { display: none; }
}
@media (max-width: 650px) {
  :root { --rail-width: 0px; --toolbar-height: 43px; }.app-header { grid-template-columns: minmax(0, 1fr) 34px; min-height: 0; gap: 5px 8px; padding: 5px 9px 8px; }.identity { height: 28px; }.identity h1 { font-size: 24px; padding: 0 12px; }.site-menu summary { min-width: 69px; font-size: 16px; gap: 5px; padding: 0 10px 0 0; }.site-menu summary > .tiny { width: 10px; }.site-links { left: 0; top: calc(100% + 7px); }.share-button { grid-column: 2; grid-row: 1; width: 32px; min-width: 32px; height: 28px; min-height: 28px; padding: 4px; border: 0; align-self: center; }.share-button .icon { width: 17px; height: 17px; }
  .world-form { grid-column: 1 / 3; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px; grid-template-rows: 39px 38px; gap: 5px 7px; max-width: none; }.world-form .field { gap: 0; }.world-form .field > span, .world-seed > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.world-seed { grid-column: 1 / 4; }.seed-entry { height: 39px; }.seed-entry input { font-size: 16px; padding-left: 9px; }.seed-entry .random-button { width: 42px; min-width: 42px; }.world-form .field > select { height: 38px; font-size: 14px; padding: 5px 8px; }.load-button { height: 38px; min-height: 38px; font-size: 12px; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--toolbar-height) minmax(0, 1fr) var(--mobile-rail-height); }.tool-rail { grid-column: 1; grid-row: 3; flex-direction: row; gap: 5px; padding: 5px 8px calc(5px + var(--safe-area-bottom)); border-right: 0; border-top: 1px solid var(--line); }.tool-rail button { flex: 1; min-width: 0; min-height: 44px; padding: 4px 2px 6px; flex-direction: row; gap: 5px; font-size: 10px; }.tool-rail .icon { width: 16px; height: 16px; }
  .map-toolbar { grid-column: 1; gap: 3px; padding: 3px 7px; }.dimension-switch { gap: 2px; }.dimension-switch button { padding: 0 8px; gap: 5px; font-size: 10px; }.dimension-dot { width: 5px; height: 5px; }.layer-button { min-width: 0; gap: 5px; padding: 0 5px; font-size: 11px; }.layer-button > .icon:first-child { display: none; }
  .map-viewport { grid-column: 1; grid-row: 2; }.map-status { max-width: calc(100% - 76px); font-size: 11px; padding: 7px 10px; }.drawer { top: auto; bottom: var(--mobile-rail-height); left: 0; width: 100%; max-width: none; max-height: 55%; border: 0; border-top: 2px solid var(--selected-line); box-shadow: 0 -4px 0 #09101840; }.drawer-header { padding: 6px 10px 6px 14px; min-height: 44px; }.drawer-header h2 { font-size: 11px; }.drawer-header .icon-button { width: 32px; height: 32px; min-height: 32px; min-width: 32px; }.drawer-panel { padding: 12px 14px 18px; }.drawer-panel > .field { margin-bottom: 12px; }
  .biome-list { display: flex; flex-direction: column; }.biome-list > label, .biome-row { font-size: 12px; gap: 9px; }.biome-row button { font-size: 11px; }.biome-row label { min-width: 0; }.panel-caption { margin: 10px 0 5px; }.filter-field { height: 40px; }.filter-field input { font-size: 16px; }
  .map-controls { bottom: calc(var(--mobile-rail-height) + 13px); right: 9px; }.map-controls .icon-button { min-width: 37px; min-height: 37px; width: 37px; height: 37px; padding: 8px; }.map-controls .icon { width: 18px; height: 18px; }.map-readouts { bottom: calc(var(--mobile-rail-height) + 11px); left: 12px; gap: 14px; font-size: 10px; }#coordinateReadout { display: none; }.selection-bar { bottom: calc(var(--mobile-rail-height) + 33px); left: 9px; right: 58px; max-width: none; gap: 4px; padding: 8px 5px 8px 9px; flex-wrap: wrap; }.selection-text { flex: 1 1 110px; }.selection-text strong { font-size: 12px; }.selection-text > span { font-size: 10px; }.selection-actions { margin-left: auto; }.selection-actions .icon-button { min-width: 30px; min-height: 32px; padding: 6px; }
  .workspace:has(.drawer:not([hidden])) .selection-bar, .workspace:has(.drawer:not([hidden])) .map-readouts { display: none; }.workspace:has(.drawer:not([hidden])) .map-controls { top: calc(var(--toolbar-height) + 8px); bottom: auto; display: grid; grid-template-columns: repeat(2, 1fr); }.toast { left: 50%; bottom: calc(var(--mobile-rail-height) + 88px); max-width: calc(100% - 32px); width: max-content; font-size: 11px; }
  .selection-text > span { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .dimension-switch button { padding: 0 6px; gap: 4px; }.layer-button { font-size: 10px; gap: 4px; }.layer-button .tiny { width: 10px; }.tool-rail button { flex-direction: column; gap: 3px; font-size: 11px; }.tool-rail .icon { width: 15px; height: 15px; }.selection-bar { padding-left: 7px; }.selection-actions .icon-button { min-width: 29px; }.selection-text { flex-basis: 100px; }
}
@media (pointer: coarse) {
  :root { --toolbar-height: 50px; }.map-toolbar { padding-top: 2px; padding-bottom: 2px; }.world-form .field > select, .seed-entry input, .field > input, .field > select, .height-entry input, .pin-name { font-size: 16px; }.icon-button, .primary-button, .secondary-button, .layer-menu > button, .text-button, .site-links a, .pin-actions button, .toast button { min-height: 44px; }.icon-button { min-width: 44px; }.selection-actions .icon-button { min-width: 44px; min-height: 44px; }.drawer-header .icon-button { min-width: 44px; min-height: 44px; }.map-controls .icon-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }.biome-row button { min-height: 44px; }
}
@media (max-width: 650px) and (pointer: coarse) {
  .app-header { grid-template-columns: minmax(0, 1fr) 44px; padding-top: 1px; padding-bottom: 2px; row-gap: 1px; }.identity { height: 44px; }.share-button { min-width: 44px; min-height: 44px; height: 44px; }.world-form { grid-template-rows: 44px 44px; gap: 3px 7px; }.seed-entry, .world-form .field > select, .load-button { height: 44px; min-height: 44px; }.seed-entry .random-button { min-height: 42px; }.selection-bar { right: 65px; }.selection-actions .icon-button { min-width: 44px; min-height: 44px; }.tool-rail button { min-height: 44px; }.map-toolbar { padding-left: 5px; padding-right: 5px; }
}
@media (max-height: 520px) and (min-width: 651px) {
  .tool-rail { gap: 5px; padding-top: 5px; }.tool-rail button { min-height: 45px; gap: 3px; padding: 4px 2px 7px; }.tool-rail .icon { width: 16px; height: 16px; }.app-header { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }.world-form .field > span, .world-seed > label { display: none; }.map-controls { bottom: 8px; }.map-controls .icon-button { min-height: 31px; height: 31px; }
}
@media (prefers-reduced-motion: no-preference) { button, a { transition: background-color .12s ease; }.site-menu summary > .tiny, .layer-button .tiny { transition: rotate .12s ease; } }

/* The labelled scale represents the actual screen distance. */
.scale-readout::before { width: var(--scale-width, 40px); }

/* Keep transient controls reachable in short and touch viewports. */
.site-links { max-height: calc(100dvh - 96px - var(--safe-area-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
@media (pointer: coarse) {
  .seed-entry, .world-form .field > select, .load-button, .share-button { height: 44px; min-height: 44px; }
  .seed-entry .random-button { min-height: 42px; }
}
@media (max-width: 650px) {
  .site-links { max-height: calc(100dvh - 64px - var(--safe-area-bottom)); }
  .workspace:has(.drawer:not([hidden])) .map-controls { grid-template-columns: repeat(4, 1fr); }
  .workspace:has(.drawer:not([hidden])) .map-controls .icon-button + .icon-button { border-top: 0; border-left: 1px solid var(--line); }
}
@media (max-height: 520px) and (min-width: 651px) and (pointer: coarse) {
  .map-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .map-controls .icon-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .map-controls .icon-button + .icon-button { border-top: 0; }
  .map-controls .icon-button:nth-child(even) { border-left: 1px solid var(--line); }
  .map-controls .icon-button:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

.layer-menu { max-height: calc(100dvh - 140px - var(--safe-area-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (min-width: 651px) and (pointer: coarse) {
  .world-form { grid-template-columns: minmax(80px, 1fr) 92px 104px 54px; }
}
@media (max-width: 650px) {
  .layer-menu { max-height: calc(100dvh - 210px - var(--safe-area-bottom)); }
}
/* A rotated small phone needs a side drawer and a single-row world bar. */
@media (min-width: 520px) and (max-width: 650px) and (max-height: 520px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-rows: auto; min-height: 60px; padding: 6px 8px 6px 0; gap: 6px; }
  .identity { height: auto; }.identity h1 { font-size: 18px; padding: 0 5px; letter-spacing: -.6px; }
  .site-menu summary { min-width: 48px; padding: 0 4px; font-size: 14px; gap: 3px; }
  .world-form { grid-column: auto; grid-row: auto; grid-template-columns: minmax(58px, 1fr) 92px 104px 44px; grid-template-rows: auto; gap: 4px; }
  .world-seed { grid-column: auto; }.world-form .field > select { padding-left: 6px; padding-right: 5px; }.load-button { padding-left: 5px; padding-right: 5px; }
  .share-button { grid-column: auto; grid-row: auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; align-self: center; border: 1px solid var(--line); }
  .drawer { top: var(--toolbar-height); bottom: var(--mobile-rail-height); width: 260px; max-width: calc(100% - 200px); max-height: none; border-top: 0; border-right: 1px solid var(--line); box-shadow: 4px 0 0 #09101830; }
  .map-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .map-controls .icon-button + .icon-button { border-top: 0; }.map-controls .icon-button:nth-child(even) { border-left: 1px solid var(--line); }.map-controls .icon-button:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .workspace:has(.drawer:not([hidden])) .map-controls { grid-template-columns: repeat(4, 1fr); }.workspace:has(.drawer:not([hidden])) .map-controls .icon-button:nth-child(n + 3) { border-top: 0; }
  .selection-bar { right: 112px; }.layer-menu { max-height: calc(100dvh - 126px - var(--safe-area-bottom)); }
}


.drawer-header #clearHighlights { min-width: 44px; margin-left: auto; padding-left: 6px; padding-right: 6px; flex: 0 0 auto; }
.drawer:not(:has(#panel-biomes:not([hidden]))) #clearHighlights { display: none; }
.version-field { position: relative; }
.world-form .version-field > .version-badge { position: absolute; left: 8px; bottom: 23px; width: auto; height: auto; overflow: visible; clip-path: none; pointer-events: none; color: var(--accent); font: 700 8px/9px "Segoe UI", Arial, sans-serif; letter-spacing: .65px; text-transform: uppercase; z-index: 1; }
.world-form .version-field:has(.version-badge:not([hidden])) > select { padding-top: 13px; padding-bottom: 1px; }
@media (pointer: coarse) {
  .world-form .version-field > .version-badge { bottom: 29px; }
  .world-form .version-field:has(.version-badge:not([hidden])) > select { padding-top: 15px; }
}
@media (min-width: 520px) and (max-width: 650px) and (max-height: 520px) {
  .drawer-header { padding-top: 0; padding-bottom: 0; min-height: 44px; }.drawer-panel { padding: 8px 12px 10px; }.panel-caption { display: none; }
}

/* Applied-world feedback and inline validation stay with their controls. */
.app-header { flex-shrink: 0; }.identity { grid-column: 1; grid-row: 1; }
.world-status { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; color: var(--accent); font-size: 9px; line-height: 12px; font-weight: 650; white-space: nowrap; pointer-events: none; z-index: 1; }
.world-status:empty { display: none; }
.field-error { margin: 8px 0; padding: 5px 9px; border-left: 2px solid var(--accent); color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.world-form > .field-error { grid-column: 1 / -1; margin: 0; }
.height-entry .field-error { margin-bottom: 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.seed-entry:has([aria-invalid="true"]), .origin-fields .field:has([aria-invalid="true"]) { border-color: var(--accent); }
.search-context, .setting-help, .menu-hint { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.search-context { padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.setting-help { margin: 8px 0 12px; }.menu-hint { padding: 0 9px 9px; }
.search-context:empty, .setting-help:empty { display: none; }
.tool-rail button.is-searching { position: relative; }
.tool-rail button.is-searching::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.selection-text > span { white-space: normal; overflow-wrap: anywhere; }
.toast { pointer-events: none; }.toast:has(button) { pointer-events: auto; }
.map-toolbar:has(#layerMenu:not([hidden])) { z-index: 45; }.app-header:has(#siteMenu[open]) { z-index: 50; }
@media (min-width: 651px) {
  .world-form { grid-column: 2; grid-row: 1; }.share-button { grid-column: 3; grid-row: 1; }
}
@media (max-width: 650px) {
  .world-status { grid-column: 1; grid-row: 1; align-self: center; font-size: 10px; line-height: 14px; }
}
@media (min-width: 520px) and (max-height: 520px) { .world-status { display: none; } }
@media (min-width: 520px) and (max-width: 650px) and (max-height: 520px) {
  .world-form { grid-column: 2; grid-row: 1; }.share-button { grid-column: 3; grid-row: 1; }
}
/* At high browser zoom, permit page reflow instead of clipping the tool rows. */
@media (max-width: 519px) and (max-height: 419px) {
  html, body { overflow-y: auto; }
  body { height: auto; min-height: 100%; }
  .biome-app { height: 480px; min-height: 480px; }
  .site-links, .layer-menu { position: fixed; top: 8px; max-height: calc(100dvh - 16px - var(--safe-area-bottom)); }
  .site-links { left: 8px; right: auto; }.layer-menu { right: 8px; left: auto; }
}

/* Keep focus on the complete control, inside bounded and adjoining buttons. */
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
#searchProgress:focus-visible, #searchResults:focus-visible {
  outline: 2px solid var(--focus-ring, var(--text)); outline-offset: -3px;
}
input:focus-visible, select:focus-visible { outline-offset: -2px; }
/* Bare text actions and native checkboxes need room around their content. */
.text-button:focus-visible, input[type="checkbox"]:focus-visible,
#searchProgress:focus-visible, #searchResults:focus-visible { outline-offset: 2px; }
/* Clear can sit flush against the toolbar in a short landscape drawer. */
#clearHighlights:focus-visible { outline-offset: -3px; }
/* Affixes belong to the field; the seed's random button remains independent. */
:is(.filter-field, .seed-entry, .origin-fields .field):has(> input:focus-visible) {
  outline: 2px solid var(--text); outline-offset: -2px;
}
:is(.filter-field, .seed-entry, .origin-fields .field) > input:focus-visible { outline: none; }
/* Inset rings contrast against each action's own surface in either theme. */
.primary-button, .skip-link { --focus-ring: var(--on-accent); }
.tool-rail button:is(.active, [aria-expanded="true"], [aria-pressed="true"]),
.dimension-switch button[aria-pressed="true"], .layer-menu > button[aria-pressed="true"],
.site-links a[aria-current="page"], .pin-actions button:first-child, .search-result button,
.biome-row:has(input:checked) :is(.biome-find, input[type="checkbox"]) { --focus-ring: #fff; }
#overlayCanvas:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; }
.search-area-hint { color: var(--muted); font-size: 11px; line-height: 1.5; margin: -4px 0 14px; overflow-wrap: anywhere; }
.search-area-hint:empty { display: none; }
.map-status { overflow-wrap: anywhere; }
.workspace:has(.drawer:not([hidden])) .map-status { left: calc(var(--rail-width) + var(--drawer-width) + 12px); max-width: calc(100% - var(--rail-width) - var(--drawer-width) - 30px); }
@media (max-width: 650px) {
  .drawer { max-height: min(55%, calc(100% - var(--toolbar-height) - 136px)); }
  .workspace:has(.drawer:not([hidden])) .map-status { top: calc(var(--toolbar-height) + 8px); left: 9px; max-width: calc(100% - 210px); }
}
@media (min-width: 520px) and (max-width: 650px) and (max-height: 520px) {
  .drawer { max-height: none; }
  .workspace:has(.drawer:not([hidden])) .map-status { top: calc(var(--toolbar-height) + 66px); left: 272px; max-width: calc(100% - 284px); }
}

/* An error occupies its own header row; Share remains aligned with world controls. */
@media (min-width: 651px) { .app-header:has(#worldError:not([hidden])) .share-button { align-self: start; margin-top: 16px; } }
@media (min-width: 520px) and (max-height: 520px) { .app-header:has(#worldError:not([hidden])) .share-button { align-self: start; margin-top: 0; } }

@media (min-width: 520px) and (max-height: 319px) {
  html, body { overflow-y: auto; }
  body { height: auto; min-height: 100%; }
  .biome-app { height: 320px; min-height: 320px; }
  .site-links, .layer-menu { position: fixed; top: 8px; max-height: calc(100dvh - 16px - var(--safe-area-bottom)); }
  .site-links { left: 8px; right: auto; }.layer-menu { right: 8px; left: auto; }
}

/* On very short portrait screens, a form needs the map area while it is open. */
@media (max-width: 519px) and (max-height: 520px) {
  .workspace:has(#panel-search:not([hidden]), #panel-goto:not([hidden]), #panel-pins:not([hidden])) .drawer { top: var(--toolbar-height); bottom: var(--mobile-rail-height); max-height: none; }
  .workspace:has(#panel-search:not([hidden]), #panel-goto:not([hidden]), #panel-pins:not([hidden])) .map-controls,
  .workspace:has(#panel-search:not([hidden]), #panel-goto:not([hidden]), #panel-pins:not([hidden])) .map-status { display: none; }
}

/* Keep the mobile search action reachable while the query fields scroll. */
@media (max-width: 650px) and (min-height: 521px) {
  .drawer:has(#panel-search:not([hidden])) { max-height: min(70%, calc(100% - var(--toolbar-height) - 120px)); }
}
@media (max-width: 650px) {
  #panel-search { scroll-padding-bottom: 64px; }
  #panel-search .search-actions { position: sticky; bottom: -18px; z-index: 2; margin: 0 -14px; padding: 10px 14px; background: var(--panel); border-top: 1px solid var(--line); }
}

/* Selected actions retain readable contrast when the pointer hovers them. */
.search-result button:hover:not(:disabled) { background: var(--selected-hover); }

/* Keep the seed usable in a narrow landscape header without taking another map row. */
@media (min-width: 520px) and (max-width: 600px) and (max-height: 520px) {
  .identity h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Intrinsic sizing keeps pointer placement from changing the tooltip width. */
.hover-biome { position: absolute; z-index: 6; width: max-content; max-width: calc(100% - 12px); padding: 5px 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12px; line-height: 1.4; font-weight: 600; pointer-events: none; overflow-wrap: anywhere; }
.pin-actions button:first-child:hover:not(:disabled), .layer-menu > button[aria-pressed="true"]:hover:not(:disabled) { background: var(--selected-hover); }

/* Dimension plates keep the mockup's cut corners without clipping hit targets or focus. */
.dimension-switch { display: flex; align-items: stretch; gap: 5px; height: 100%; min-width: 0; }
.dimension-switch button { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; padding: 0 15px; background: transparent; color: var(--text); white-space: nowrap; font-size: 12px; font-weight: 600; }
.dimension-switch button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dimension-fill, var(--shell)); box-shadow: inset 0 1px color-mix(in srgb, var(--line) 60%, transparent), inset 0 -3px var(--dimension-edge, color-mix(in srgb, var(--line) 55%, transparent)); clip-path: polygon(0 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)); }
.dimension-switch button:hover:not(:disabled) { --dimension-fill: var(--raised); background: transparent; }
.dimension-switch button[aria-pressed="true"] { --dimension-fill: var(--selected); --dimension-edge: var(--accent); color: #fff; }
.dimension-switch button[aria-pressed="true"]:hover { --dimension-fill: var(--selected-hover); }
.dimension-mark { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; shape-rendering: crispEdges; }
.dimension-shade { opacity: .38; }
.dimension-mark.overworld { color: light-dark(#4b731f, #a8c877); }.dimension-mark.nether { color: light-dark(#a33b2d, #ec9c83); }.dimension-mark.end { color: light-dark(#785294, #cfb2ec); }.dimension-mark.sift { color: var(--muted); }
[aria-pressed="true"] .dimension-mark.overworld { color: #c0e090; }[aria-pressed="true"] .dimension-mark.nether { color: #ffb59b; }[aria-pressed="true"] .dimension-mark.end { color: #e2c8ff; }
.dimension-switch .dimension-upcoming { opacity: 1; color: var(--muted); cursor: not-allowed; }
.dimension-switch .dimension-upcoming::before { --dimension-fill: transparent; --dimension-edge: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.dimension-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.dimension-soon { font-size: 8px; line-height: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
#layerCompactLabel { display: none; }
@media (max-width: 820px) { .dimension-switch button { padding: 0 10px; gap: 7px; font-size: 11px; } }
@media (max-width: 650px) {
  .dimension-switch { flex: 1; gap: 4px; }.dimension-switch button { flex: 1; padding: 0 7px; gap: 6px; }
  #layerLabel { display: none; }#layerCompactLabel { display: inline; }
  .layer-picker { flex: 0 0 auto; }.layer-button { padding: 0 6px; font-size: 11px; gap: 4px; }
}
@media (max-width: 519px) {
  .dimension-switch { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; }
  .dimension-switch button { flex-direction: column; padding: 3px 5px 5px; gap: 2px; font-size: 10px; line-height: 12px; }
  .dimension-mark { width: 16px; height: 16px; }
  .dimension-upcoming .dimension-mark { display: none; }.dimension-copy { display: contents; }
  .dimension-upcoming .dimension-soon { order: -1; line-height: 16px; }
}
@media (pointer: coarse) { .dimension-switch button { min-height: 44px; }.layer-button { min-height: 44px; } }

/* Control chrome must not turn an outside-start drag into a page-wide text selection. */
.identity, .tool-rail, .map-toolbar, .drawer-header, .panel-caption, .setting-row, .map-controls { user-select: none; }
.map-toolbar input, .drawer-header input { user-select: text; }

/* Keep selected biome rows distinct even when terrain dimming is disabled. */
.biome-row:has(input:checked) { color: #fff; background: var(--selected); box-shadow: inset -3px 0 var(--accent); }
.biome-row:has(input:checked) .biome-toggle > span:last-child { font-weight: 700; }
.biome-row:has(input:checked) .biome-find { color: #eef5ff; }
.biome-row:has(input:checked) .biome-find:hover:not(:disabled) { background: var(--selected-hover); }


/* Interactive boundaries stay distinct from quieter structural separators. */
.seed-entry, .filter-field, .origin-fields .field,
.secondary-button, .share-button, .tool-rail button,
.map-controls, .pin-actions button, .search-result button { border-color: var(--control-line); }
.seed-entry .random-button, .map-controls .icon-button + .icon-button { border-color: var(--control-line); }
.tool-rail button:is(.active, [aria-expanded="true"], [aria-pressed="true"]) { border-color: var(--selected-line); }
.seed-entry:has([aria-invalid="true"]), .origin-fields .field:has([aria-invalid="true"]) { border-color: var(--accent); }

/* Keep an applied-world summary available when the mobile editor is folded. */
.seed-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 11px; }
.seed-caption label { min-width: 0; }
.seed-draft-status { color: var(--accent); font-size: 10px; font-weight: 650; white-space: nowrap; }
.app-header.has-seed-draft .world-status { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-header[inert] { opacity: .5; }

.world-toggle { display: none; }
.loaded-world-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 651px) {
  .app-header.has-seed-draft { row-gap: 4px; }
  .app-header.has-seed-draft .loaded-world-summary { position: static; grid-column: 2 / -1; grid-row: 2; justify-self: end; width: auto; height: auto; max-width: 100%; min-width: 0; overflow: hidden; clip-path: none; text-overflow: ellipsis; color: var(--muted); font: 11px/16px ui-monospace, Consolas, monospace; }
}

.field > .field-error { font-weight: 400; line-height: 1.5; margin: 0; }
.origin-fields .field { flex-wrap: wrap; align-self: start; }
.origin-fields .field > .field-error { flex: 1 1 100%; margin: 0 8px 8px 0; }
.frame-search-area { display: block; margin: -6px 0 8px; }
#pinHeightContext { margin-top: 0; }
#dimOthersHelp { margin-bottom: 0; }
.drawer-panel { scroll-padding: 12px; }
.field-error, .search-result, .field { scroll-margin: 12px; }
.map-keyboard-hint { display: none; position: absolute; top: 12px; left: 50%; translate: -50% 0; z-index: 5; max-width: calc(100% - 32px); width: max-content; padding: 7px 10px; color: var(--text); background: var(--panel); border: 1px solid var(--control-line); font-size: 11px; line-height: 1.5; pointer-events: none; }
.map-viewport.keyboard-navigation .map-keyboard-hint { display: block; }

@media (max-width: 650px) {
  .app-header { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto auto; gap: 2px 8px; min-height: 0; padding: 2px 8px 6px; }
  .identity { grid-column: 1; grid-row: 1; min-width: 0; height: 44px; }
  .identity h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 0 8px; font-size: 22px; }
  .site-menu summary { min-height: 44px; min-width: 65px; padding-right: 8px; }
  .world-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 68px; min-height: 44px; margin-left: auto; padding: 8px; background: var(--shell); border: 1px solid var(--control-line); font-size: 12px; }
  .world-toggle[aria-expanded="true"] { background: var(--raised); }
  .world-toggle[aria-expanded="true"] .tiny { rotate: 180deg; }
  .loaded-world-summary { position: static; grid-column: 1 / -1; grid-row: 2; width: auto; height: auto; min-width: 0; overflow: hidden; clip-path: none; text-overflow: ellipsis; padding: 0 1px 3px; color: var(--muted); font: 11px/16px ui-monospace, Consolas, monospace; white-space: nowrap; }
  .loaded-world-summary:empty { display: none; }
  .app-header .share-button { grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; width: 44px; height: 44px; align-self: center; margin-top: 0; border: 1px solid var(--control-line); }
  .app-header .world-form { grid-column: 1 / -1; grid-row: 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px; grid-template-rows: auto auto; gap: 6px 7px; margin: 3px 0 0; }
  .app-header .world-seed { grid-column: 1 / -1; }
  .app-header .world-form .world-seed { gap: 5px; }
  .app-header .world-form .seed-caption { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .app-header.world-settings-collapsed .world-form { display: none; }
  .world-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .drawer:has(#panel-search:not([hidden])) { top: var(--toolbar-height); bottom: var(--mobile-rail-height); max-height: none; }
  #panel-search { scroll-padding: 12px; }
  #panel-search .search-actions { position: static; margin: 0; padding: 0; border: 0; }
  .workspace:has(#panel-search:not([hidden])) .map-controls,
  .workspace:has(#panel-search:not([hidden])) .map-status { display: none; }
  .map-keyboard-hint { top: 8px; font-size: 10px; padding: 5px 7px; }
}

@media (min-width: 520px) and (max-width: 650px) and (max-height: 520px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) 44px; grid-template-rows: auto; gap: 4px 8px; padding: 2px 8px 4px; }
  .identity { grid-column: 1; grid-row: 1; }
  .identity h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-menu summary { min-width: 48px; padding: 0 5px 0 0; }
  .world-toggle { margin-left: 7px; }
  .loaded-world-summary { grid-column: 2; grid-row: 1; padding: 0; white-space: normal; max-height: 36px; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
  .app-header .share-button { grid-column: 3; }
  .app-header .world-form { grid-row: 2; grid-template-columns: minmax(58px, 1fr) 92px 104px 54px; grid-template-rows: auto; }
  .app-header .world-seed { grid-column: auto; }
  .app-header .world-form .seed-caption { min-height: 0; }
  .seed-caption > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .seed-caption:has(.seed-draft-status[hidden]) { display: none; }
  .drawer:has(#panel-search:not([hidden])) { width: min(360px, 100%); max-width: none; }
  .search-context { margin-bottom: 9px; padding-bottom: 8px; }
  .origin-fields { margin-bottom: 10px; }
  .drawer-panel > .field { margin-bottom: 10px; }
}

/* Short phone forms use the available height; their actions scroll with their fields. */
@media (max-width: 650px) and (max-height: 520px) {
  .workspace:has(#panel-search:not([hidden]), #panel-goto:not([hidden]), #panel-pins:not([hidden])) .drawer { position: fixed; top: 0; bottom: var(--mobile-rail-height); z-index: 46; max-height: none; }
  .layer-menu { position: fixed; top: 8px; right: 8px; max-height: calc(100dvh - 16px - var(--safe-area-bottom)); }
}

/* Native high-contrast themes retain command boundaries and state cues. */
@media (forced-colors: active) {
  :root { --shell: Canvas; --panel: Canvas; --raised: Canvas; --rail: Canvas; --text: CanvasText; --muted: CanvasText; --line: GrayText; --control-line: ButtonText; --accent: Highlight; --on-accent: HighlightText; --selected: Highlight; --selected-line: Highlight; --selected-hover: Highlight; --selected-depth: Highlight; }
  button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
  #overlayCanvas:focus-visible, #searchProgress:focus-visible, #searchResults:focus-visible,
  :is(.filter-field, .seed-entry, .origin-fields .field):has(> input:focus-visible) { outline-color: Highlight; }
  .primary-button, .secondary-button, .icon-button, .tool-rail button, .world-toggle { border-color: ButtonText; }
  .dimension-switch button { border: 1px solid ButtonText; }
  .dimension-switch button::before { clip-path: none; box-shadow: none; }
  .dimension-switch button[aria-pressed="true"], .layer-menu > button[aria-pressed="true"],
  .tool-rail button[aria-expanded="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .biome-row:has(input:checked) { border-inline-start: 4px solid Highlight; }
  .height-entry input[type="range"]::-webkit-slider-runnable-track { background: CanvasText; }
  .height-entry input[type="range"]::-webkit-slider-thumb { border-color: Highlight; background: Canvas; }
  .height-entry input[type="range"]::-moz-range-track { background: CanvasText; }
  .height-entry input[type="range"]::-moz-range-thumb { border-color: Highlight; background: Canvas; }
}


/* World Explorer: angular cartography, steel command faces and coral state edges. */
:root {
  --edge-light: light-dark(#ffffffc9, #c1d6e833);
  --edge-dark: light-dark(#667d9040, #02070c99);
  --well: light-dark(#e3eaee, #171e26);
  --command-face: light-dark(#e2eaf0, #2b3541);
}
.identity h1 { display: flex; align-items: center; gap: 11px; padding: 0 21px; }
/* Give the longer name its own proportions; compact screens use equal-height rows. */
.world-explorer-wordmark { display: block; flex: 0 0 auto; overflow: visible; }
.world-explorer-wordmark--wide { width: 290px; height: 23px; }
.world-explorer-wordmark--compact { display: none; }
@media (min-width: 900px) and (max-width: 1100px) {
  .world-explorer-wordmark--wide { width: 250px; height: 20px; }
}
@media (max-width: 899px) {
  .world-explorer-wordmark--wide { display: none; }
  .world-explorer-wordmark--compact { display: block; width: 118px; height: 41px; }
}
@media (max-width: 650px) {
  .world-explorer-wordmark--compact { width: 110px; height: 38px; }
}
@media (max-width: 360px) {
  .world-explorer-wordmark--compact { width: 104px; height: 36px; }
}
.app-header { box-shadow: inset 0 1px var(--edge-light), 0 2px 0 var(--edge-dark); }
.site-menu summary { box-shadow: inset 0 -3px var(--shell); }
.world-form .field > span:first-child, .seed-caption > label { font-weight: 650; letter-spacing: .025em; }
.seed-entry, .filter-field, .origin-fields .field,
.field > input, .field > select, .height-heading input, .pin-name {
  background-color: var(--well); box-shadow: inset 0 2px var(--edge-dark);
}
.seed-entry input, .filter-field input, .origin-fields .field input { background-color: transparent; box-shadow: none; }
.seed-entry .random-button { background-color: var(--panel); box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.seed-entry .random-button:hover { color: var(--text); background-color: var(--raised); }
.primary-button { box-shadow: inset 0 1px #ffffff75, inset 0 -3px var(--accent-depth), 0 2px 0 var(--edge-dark); font-weight: 750; }
.secondary-button, .share-button, .world-toggle {
  background-color: var(--command-face); box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark);
}
.primary-button:active:not(:disabled) { box-shadow: inset 0 1px var(--accent-depth), inset 0 -1px var(--accent-depth); }
.tool-rail { box-shadow: inset -2px 0 var(--edge-dark); }
.tool-rail button {
  position: relative; isolation: isolate; background-color: var(--command-face); color: var(--text);
  font-size: 10.5px; font-weight: 650; letter-spacing: .015em;
  box-shadow: inset 0 1px var(--edge-light), inset 0 -3px var(--edge-dark), 0 2px 0 #00000024;
}
.tool-rail button:hover:not(:disabled) { background-color: var(--raised); border-color: var(--text); }
.tool-rail .icon { width: 22px; height: 22px; }
.tool-rail button[aria-expanded="true"], .tool-rail button.active, .tool-rail button[aria-pressed="true"] {
  background-color: var(--selected); color: #fff;
  box-shadow: inset 3px 0 var(--accent), inset 0 1px #dbeeff59, inset 0 -4px var(--selected-depth), 0 2px 0 var(--edge-dark);
}
.tool-rail button[aria-expanded="true"]:hover { background-color: var(--selected-hover); }
.tool-rail button[data-count]::after {
  content: attr(data-count); position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px;
  display: grid; place-content: center; padding: 0 3px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font: 750 9px/1 ui-monospace, Consolas, monospace;
  pointer-events: none;
}
.map-toolbar { box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.dimension-switch { gap: 7px; }
.dimension-switch button { gap: 10px; font-weight: 700; }
.dimension-switch button::before {
  box-shadow: inset 0 1px var(--edge-light), inset 1px 0 color-mix(in srgb, var(--line) 50%, transparent),
    inset 0 -4px var(--dimension-edge, color-mix(in srgb, var(--line) 75%, transparent));
}
.dimension-mark { width: 25px; height: 25px; padding: 3px; box-sizing: content-box; background-color: var(--well); border: 1px solid color-mix(in srgb, currentColor 35%, var(--line)); box-shadow: inset 0 1px var(--edge-dark), 0 1px var(--edge-light); }
.dimension-shade { opacity: .44; }
.dimension-switch button[aria-pressed="true"] .dimension-mark { background-color: var(--selected-depth); border-color: color-mix(in srgb, currentColor 65%, transparent); }
.dimension-switch .dimension-upcoming .dimension-mark { background: transparent; box-shadow: none; border-color: var(--line); }
.layer-button { border: 1px solid transparent; font-weight: 650; }
.layer-button:hover:not(:disabled), .layer-button[aria-expanded="true"] { background-color: var(--command-face); border-color: var(--control-line); box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.layer-button[aria-expanded="true"] { border-bottom-color: var(--accent); }
.drawer { box-shadow: 4px 0 0 #09101850, inset -1px 0 var(--edge-light); }
.drawer-header { background-color: var(--command-face); box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.drawer-header h2 { border-left: 3px solid var(--accent); padding-left: 10px; font-size: 14px; font-weight: 750; letter-spacing: .07em; line-height: 1.25; }
.drawer-header .icon-button { background-color: transparent; border: 1px solid transparent; color: var(--muted); }
.drawer-header .icon-button:hover { color: var(--text); background-color: var(--raised); border-color: var(--control-line); }
.drawer-header #clearHighlights { min-height: 29px; background-color: var(--well); border: 1px solid var(--line); padding: 4px 7px; font: 650 10px/1.2 ui-monospace, Consolas, monospace; text-decoration: none; }
.drawer-panel > .field > span:first-child, .origin-fields legend { font-weight: 650; letter-spacing: .015em; }
.filter-field .icon { color: var(--text); }
.biome-row { border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent); }
.biome-row label { padding-left: 6px; }
.biome-swatch { width: 14px; height: 14px; box-shadow: inset 0 1px #ffffff70, inset 0 -2px #00000040, 0 0 0 1px #0b17224d; }
.biome-row .biome-find { align-self: center; min-height: 30px; margin: 4px 0; border: 1px solid var(--line); background-color: var(--well); font-size: 10px; font-weight: 650; box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.biome-row .biome-find:hover:not(:disabled) { background-color: var(--raised); color: var(--text); border-color: var(--control-line); }
.biome-row:has(input:checked) { box-shadow: inset 3px 0 var(--accent), inset 0 1px #dbeeff36, inset 0 -1px var(--selected-depth); }
.biome-row:has(input:checked) .biome-find { background-color: var(--selected-depth); border-color: var(--selected-line); }
.biome-row:has(input:checked) .biome-find:hover:not(:disabled) { background-color: var(--selected-hover); color: #fff; }
.pin-row, .search-result { padding: 12px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background-color: var(--well); box-shadow: inset 0 1px var(--edge-light), 2px 2px 0 var(--edge-dark); }
.pin-row { margin-bottom: 14px; border-top-color: var(--control-line); }
.pin-row:focus-within { border-top-color: var(--accent); }
.pin-name { background-color: var(--panel); }
.pin-actions button { box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.pin-actions button:first-child, .search-result button { background-color: var(--selected); color: #fff; border-color: var(--selected-line); box-shadow: inset 0 1px #dbeeff59, inset 0 -3px var(--selected-depth); }
.search-result > strong { font-size: 15px; font-weight: 750; }
.setting-row { font-size: 12.5px; border-bottom-color: color-mix(in srgb, var(--line) 65%, transparent); }
.setting-row:hover { background-color: color-mix(in srgb, var(--raised) 45%, transparent); }
.map-controls { padding: 2px; box-shadow: inset 0 1px var(--edge-light), 3px 3px 0 var(--edge-dark); }
.map-controls .icon-button { background-color: var(--command-face); box-shadow: inset 0 1px var(--edge-light), inset 0 -1px var(--edge-dark); }
.map-controls .icon-button:hover:not(:disabled) { background-color: var(--raised); color: var(--accent); }
.selection-bar { border-color: var(--control-line); border-left-color: var(--biome-color, var(--accent)); box-shadow: inset 0 1px var(--edge-light), 3px 3px 0 var(--edge-dark); }
.selection-text strong { font-size: 15px; font-weight: 750; letter-spacing: -.2px; }
.selection-actions { padding-left: 7px; border-left: 1px solid var(--line); gap: 2px; }
.selection-actions .icon-button { background-color: var(--command-face); box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.selection-actions .icon-button:hover:not(:disabled) { color: var(--accent); background-color: var(--raised); }
.layer-menu, .site-links { border-color: var(--control-line); box-shadow: inset 0 1px var(--edge-light), 4px 5px 0 var(--edge-dark); }
.menu-caption { color: var(--text); border-left: 3px solid var(--accent); padding-left: 9px; margin: 5px 0 4px 5px; }
.hover-biome, .toast, .map-keyboard-hint { border-color: var(--control-line); box-shadow: inset 0 1px var(--edge-light), 2px 2px 0 var(--edge-dark); }
.toast { border-left: 3px solid var(--accent); }
@media (max-width: 820px) {
  .identity h1 { padding: 0 12px; }
  .dimension-mark { width: 20px; height: 20px; padding: 2px; }
}
@media (max-width: 650px) {
  .identity h1 { padding: 0 8px; }
  .tool-rail { box-shadow: inset 0 1px var(--edge-light); }.tool-rail button { font-size: 10px; letter-spacing: 0; }
  .tool-rail .icon { width: 17px; height: 17px; }
  .dimension-switch { gap: 4px; }.dimension-switch button { gap: 6px; }
  .dimension-mark { width: 19px; height: 19px; padding: 1px; border-color: transparent; box-shadow: none; }
  .drawer-header h2 { font-size: 12px; padding-left: 8px; }.selection-text strong { font-size: 13px; }
  .selection-actions { padding-left: 4px; }.pin-row, .search-result { padding: 10px; }
}
@media (max-width: 519px) {
  .dimension-switch button { gap: 2px; }.dimension-mark { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; }
  .dimension-switch button[aria-pressed="true"] .dimension-mark { background: transparent; }
  .dimension-switch .dimension-upcoming .dimension-mark { display: none; }
}
@media (max-width: 360px) {
  .identity h1 { padding-inline: 6px; }
  .tool-rail .icon { width: 16px; height: 16px; }.tool-rail button { font-size: 10px; }
}
@media (max-height: 520px) and (min-width: 651px) {
  .tool-rail .icon { width: 17px; height: 17px; }.drawer-header h2 { font-size: 13px; }
}
@media (pointer: coarse) {
  .biome-row .biome-find { min-height: 44px; margin: 0; }.drawer-header #clearHighlights { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tool-rail button, .map-controls .icon-button, .dimension-switch button, .biome-find,
  .share-button, .world-toggle, .layer-button { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}
@media (forced-colors: active) {
  .tool-rail button[data-count]::after { background: Highlight; color: HighlightText; border-color: ButtonText; }
  .dimension-mark, .pin-row, .search-result { border-color: ButtonText; box-shadow: none; }
  .dimension-mark { background: Canvas; }
  .dimension-switch button::before { box-shadow: none; }
  .pin-row, .search-result { background: Canvas; }
  .drawer-header h2 { border-color: Highlight; }
  .biome-row:has(input:checked) { box-shadow: none; border-inline-start: 4px solid Highlight; }
}

/* Field relief must preserve the explicit invalid-state cue. */
input[aria-invalid="true"], select[aria-invalid="true"], .seed-entry input[aria-invalid="true"],
.origin-fields .field input[aria-invalid="true"] { box-shadow: inset 0 -2px var(--accent); }
.map-readouts { padding: 4px 7px; border: 1px solid var(--control-line); background-color: var(--panel); color: var(--text); text-shadow: none; box-shadow: inset 0 1px var(--edge-light), 2px 2px 0 var(--edge-dark); gap: 18px; }
@media (min-width: 651px) { .map-readouts { bottom: 8px; } }
@media (max-width: 650px) { .map-readouts { bottom: calc(var(--mobile-rail-height) + 6px); gap: 12px; padding: 4px 6px; } }
@media (forced-colors: active) {
  .map-readouts { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
}

@media (max-width: 650px) {
  .workspace:not(:has(.drawer:not([hidden]))):has(#selectionBar:not([hidden])) .toast {
    bottom: calc(var(--mobile-rail-height) + 33px + var(--selection-height, 54px) + 12px);
  }
}

/* A narrow phone uses a deliberate full-width action row rather than a gap. */
@media (max-width: 360px) {
  .selection-text { flex-basis: 100%; }
  .selection-actions { width: 100%; margin-left: 0; padding-left: 0; border-left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
}

/* Desktop workspace: stable context bar, attached panels and a reserved map HUD lane. */
@media (min-width: 651px) {
  :root { --workspace-gutter: 12px; --drawer-width: 300px; }
  .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px;
    min-height: 76px; padding: 8px var(--workspace-gutter) 8px 0;
  }
  .identity { min-width: 0; }
  .site-menu { width: var(--rail-width); flex: 0 0 var(--rail-width); }
  .site-menu summary { min-width: 0; width: 100%; padding: 0; gap: 6px; box-shadow: none; }
  .site-menu summary > span { display: none; }
  .site-menu .wkd-mark { display: block; width: 24px; height: 20px; }
  .identity h1 { padding: 0 16px; gap: 8px; }
  .app-header .world-form { width: 100%; max-width: 700px; padding: 0; margin: 0; justify-self: center; }
  .app-header .share-button { align-self: end; margin: 0; }
  .app-header.has-seed-draft .loaded-world-summary { grid-column: 2; justify-self: center; }
  .world-form .seed-caption { flex-wrap: wrap; row-gap: 3px; }
  .seed-caption > label { white-space: nowrap; }
  /* Share aligns with the command row even when captions wrap above validation. */
  .app-header:has(#worldError:not([hidden])) .world-form { grid-row: 1 / 3; grid-template-rows: subgrid; row-gap: inherit; }
  .app-header:has(#worldError:not([hidden])) .share-button { align-self: end; margin-top: 0; }
  .app-header.has-seed-draft:has(#worldError:not([hidden])) .loaded-world-summary { grid-row: 3; }
  .workspace { --map-hud-clearance: 44px; }
  .workspace:has(#selectionBar:not([hidden])) { --map-hud-clearance: calc(var(--selection-height, 54px) + 37px + var(--workspace-gutter)); }
  .map-toolbar { grid-column: 1 / -1; padding: 4px var(--workspace-gutter) 4px calc(var(--rail-width) + var(--workspace-gutter)); gap: 12px; }
  .layer-picker { margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); }
  .tool-rail { grid-row: 2; gap: 0; padding: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; box-shadow: none; }
  .tool-rail button {
    flex: 0 0 auto; min-height: 56px; gap: 5px; padding: 7px 0;
    border: 0; border-bottom: 1px solid var(--line); background-color: transparent; box-shadow: none; color: var(--muted);
  }
  .tool-rail button:hover:not(:disabled) { background-color: var(--raised); color: var(--text); border-color: var(--line); }
  .tool-rail button:is([aria-expanded="true"], .active, [aria-pressed="true"]) {
    border: 0; border-bottom: 1px solid var(--selected-line); background-color: var(--selected); color: #fff;
    box-shadow: inset 3px 0 var(--accent), inset 0 1px #dbeeff40, inset 0 -2px var(--selected-depth);
  }
  .tool-rail button:is([aria-expanded="true"], .active, [aria-pressed="true"]):hover:not(:disabled) { background-color: var(--selected-hover); color: #fff; }
  .drawer {
    top: var(--toolbar-height); left: var(--rail-width); bottom: auto; height: auto;
    max-width: calc(100% - var(--rail-width) - 36px);
    max-height: calc(100% - var(--toolbar-height) - var(--map-hud-clearance));
    border: 0; border-right: 1px solid var(--control-line); border-bottom: 1px solid var(--control-line);
    box-shadow: 3px 3px 0 var(--edge-dark);
  }
  .drawer-header { height: 48px; min-height: 48px; padding: 0 12px 0 16px; }
  .drawer-panel { padding: 16px; }
  .biome-row { margin-left: -6px; padding-left: 6px; }
  .biome-row label { padding-left: 0; }
  .map-readouts, .selection-bar,
  .workspace:has(.drawer:not([hidden])) .map-readouts,
  .workspace:has(.drawer:not([hidden])) .selection-bar { left: calc(var(--rail-width) + var(--workspace-gutter)); }
  .workspace:has(.drawer:not([hidden])) .selection-bar { display: flex; max-width: calc(100% - var(--rail-width) - 92px); }
  .map-controls { right: var(--workspace-gutter); bottom: var(--workspace-gutter); }
  .workspace:has(#selectionBar:not([hidden])) .toast { bottom: max(107px, calc(var(--selection-height, 54px) + 37px + var(--workspace-gutter))); }
}
@media (min-width: 651px) and (max-width: 1100px) {
  .app-header { gap: 12px; }
  .identity h1 { padding: 0 12px; }
}
@media (min-width: 651px) and (max-width: 820px) {
  :root { --drawer-width: 270px; }
  .app-header { gap: 9px; padding-right: 8px; }
  .identity h1 { padding: 0 10px; }
  .drawer-header h2 { font-size: 12px; }
}
@media (min-width: 651px) and (max-height: 520px) {
  .app-header { min-height: 50px; padding-block: 2px; }
  .world-form .seed-caption:has(.seed-draft-status[hidden]) { display: none; }
  .tool-rail button { min-height: 44px; padding: 4px 0; gap: 3px; }
  .tool-rail .icon { width: 17px; height: 17px; }
}
@media (min-width: 651px) and (pointer: coarse) {
  .map-toolbar { padding-block: 2px; }
}
@media (min-width: 651px) and (max-height: 520px) and (pointer: coarse) {
  .selection-bar, .workspace:has(.drawer:not([hidden])) .selection-bar { max-width: calc(100% - var(--rail-width) - 130px); }
}
/* A full seed needs its own row only where touch selectors exhaust the header. */
@media (min-width: 651px) and (max-width: 759px) and (min-height: 521px) and (pointer: coarse) {
  .app-header, .app-header.has-seed-draft { row-gap: 6px; }
  .identity { align-self: end; height: 44px; }
  .app-header .world-form { grid-row: 1 / 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px; grid-template-rows: subgrid; row-gap: inherit; }
  .world-form .world-seed { grid-column: 1 / -1; }
  .app-header .share-button { grid-row: 2; }
  .app-header.has-seed-draft .loaded-world-summary { grid-row: 3; }
  .app-header:has(#worldError:not([hidden])) .world-form { grid-row: 1 / 4; }
  .app-header.has-seed-draft:has(#worldError:not([hidden])) .loaded-world-summary { grid-row: 4; }
}
@media (min-width: 651px) and (max-width: 759px) and (max-height: 520px) and (pointer: coarse) {
  .identity h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 651px) and (forced-colors: active) {
  .tool-rail button[aria-expanded="true"] { box-shadow: none; outline: 2px solid Highlight; outline-offset: -4px; }
}

/* Fullscreen is a map canvas with floating commands, independent of the page grid. */
#biomeApp:not(.is-map-fullscreen) .fullscreen-only { display: none; }
#biomeApp.is-map-fullscreen {
  --fs-top: max(12px, env(safe-area-inset-top, 0px));
  --fs-left: max(12px, env(safe-area-inset-left, 0px));
  --fs-right: max(12px, env(safe-area-inset-right, 0px));
  --fs-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --fs-command-size: 46px; --fs-tools-width: 88px; --fs-exit-width: 142px;
  --fs-menu-top: calc(var(--fs-top) + var(--fs-command-size) + 10px);
  --fs-readout-clearance: 36px;
  width: 100%; height: 100dvh; min-height: 0; overflow: hidden;
}
#biomeApp.is-map-fullscreen > .app-header { display: none; }
#biomeApp.is-map-fullscreen .workspace {
  --fs-bottom-lane: calc(var(--fs-readout-clearance) + 12px);
  position: relative; display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0;
}
#biomeApp.is-map-fullscreen .workspace:has(#selectionBar:not([hidden])) {
  --fs-bottom-lane: calc(var(--selection-height, 54px) + var(--fs-readout-clearance) + 24px);
}
#biomeApp.is-map-fullscreen .map-viewport { position: absolute; inset: 0; width: 100%; height: 100%; }
#biomeApp.is-map-fullscreen .fullscreen-tools,
#biomeApp.is-map-fullscreen .fullscreen-exit {
  position: absolute; top: var(--fs-top); z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--fs-command-size); height: var(--fs-command-size); padding: 8px 10px;
  background: var(--command-face); color: var(--text); border: 1px solid var(--control-line);
  box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark), 3px 3px 0 var(--edge-dark);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
#biomeApp.is-map-fullscreen .fullscreen-tools { left: var(--fs-left); width: var(--fs-tools-width); }
#biomeApp.is-map-fullscreen .fullscreen-tools.is-searching::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel);
}
#biomeApp.is-map-fullscreen .fullscreen-exit { right: var(--fs-right); width: var(--fs-exit-width); }
#biomeApp.is-map-fullscreen .fullscreen-tools:hover,
#biomeApp.is-map-fullscreen .fullscreen-exit:hover { background: var(--raised); }
#biomeApp.is-map-fullscreen .fullscreen-tools[aria-expanded="true"] {
  color: #fff; background: var(--selected); border-color: var(--selected-line);
  box-shadow: inset 3px 0 var(--accent), inset 0 1px var(--edge-light), inset 0 -2px var(--selected-depth), 3px 3px 0 var(--edge-dark);
}
#biomeApp.is-map-fullscreen .tool-rail {
  position: absolute; top: var(--fs-menu-top); left: var(--fs-left); right: auto; bottom: auto; z-index: 60;
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px;
  width: 254px; height: auto; max-width: calc(100% - var(--fs-left) - var(--fs-right));
  max-height: calc(100% - var(--fs-menu-top) - var(--fs-bottom)); min-height: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--panel); border: 1px solid var(--control-line);
  box-shadow: inset 0 1px var(--edge-light), 3px 4px 0 var(--edge-dark);
}
#biomeApp.is-map-fullscreen .tool-rail::before { display: none; }
#biomeApp.is-map-fullscreen .tool-rail.is-open { display: grid; }
#biomeApp.is-map-fullscreen .tool-rail button {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px;
  width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; margin: 0;
  border: 1px solid transparent; background: var(--command-face); color: var(--text);
  box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark);
  font-size: 12px; font-weight: 650; text-align: left;
}
#biomeApp.is-map-fullscreen .tool-rail .icon { width: 19px; height: 19px; }
#biomeApp.is-map-fullscreen .tool-rail button:hover:not(:disabled) { background: var(--raised); border-color: var(--control-line); }
#biomeApp.is-map-fullscreen .tool-rail button:is([aria-expanded="true"], .active) {
  color: #fff; background: var(--selected); border-color: var(--selected-line);
  box-shadow: inset 3px 0 var(--accent), inset 0 1px var(--edge-light), inset 0 -2px var(--selected-depth);
}
#biomeApp.is-map-fullscreen .tool-rail button:is([aria-expanded="true"], .active):hover { background: var(--selected-hover); }
#biomeApp.is-map-fullscreen .tool-rail button[data-count]::after { top: 3px; right: 3px; }
#biomeApp.is-map-fullscreen .tool-rail .share-button {
  grid-column: 1 / -1; grid-row: auto; justify-content: center; margin-top: 2px; border-color: var(--control-line);
}
#biomeApp.is-map-fullscreen .tool-rail .share-button > span { display: inline; }
#biomeApp.is-map-fullscreen .map-toolbar {
  position: absolute; top: var(--fs-top); left: calc(var(--fs-left) + var(--fs-tools-width) + 8px);
  right: auto; bottom: auto; z-index: 50; display: flex; align-items: stretch; justify-content: flex-start;
  width: max-content; max-width: calc(100% - var(--fs-left) - var(--fs-right) - var(--fs-tools-width) - var(--fs-exit-width) - 24px);
  height: var(--fs-command-size); min-height: var(--fs-command-size); padding: 0; gap: 0; margin: 0;
  background: var(--panel); border: 1px solid var(--control-line);
  box-shadow: inset 0 1px var(--edge-light), 3px 3px 0 var(--edge-dark);
}
#biomeApp.is-map-fullscreen .fullscreen-dimension { position: relative; display: flex; min-width: 0; }
#biomeApp.is-map-fullscreen .fullscreen-dimension-button {
  display: flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; min-height: 44px;
  padding: 0 10px; color: var(--text); background: var(--command-face); box-shadow: inset 0 -3px var(--accent);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
#biomeApp.is-map-fullscreen .fullscreen-dimension-button:hover { background: var(--raised); }
#biomeApp.is-map-fullscreen .fullscreen-dimension-button[aria-expanded="true"] > .tiny { rotate: 180deg; }
#biomeApp.is-map-fullscreen #fullscreenDimensionLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#biomeApp.is-map-fullscreen #fullscreenDimensionMark { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 28px; }
#biomeApp.is-map-fullscreen #fullscreenDimensionMark .dimension-mark { width: 20px; height: 20px; padding: 1px; margin: 0; }
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 2; width: 242px;
  max-width: calc(100vw - var(--fs-left) - var(--fs-right) - var(--fs-tools-width) - 8px);
  max-height: calc(100dvh - var(--fs-menu-top) - var(--fs-bottom)); padding: 6px; overflow: auto;
  background: var(--panel); border: 1px solid var(--control-line); box-shadow: inset 0 1px var(--edge-light), 3px 4px 0 var(--edge-dark);
}
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu .dimension-switch {
  display: grid; grid-template-columns: minmax(0, 1fr); height: auto; gap: 4px;
}
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu .dimension-switch button {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 44px; padding: 5px 10px; font-size: 12px; line-height: 1.25;
}
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu .dimension-mark { display: block; width: 22px; height: 22px; padding: 2px; }
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu .dimension-copy { display: flex; flex-direction: row; align-items: center; gap: 9px; }
#biomeApp.is-map-fullscreen .fullscreen-dimension-menu .dimension-soon { order: 0; }
#biomeApp.is-map-fullscreen .layer-picker { flex: 0 0 auto; align-self: stretch; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); }
#biomeApp.is-map-fullscreen .layer-button { min-width: 0; min-height: 44px; padding: 0 10px; font-size: 12px; }
#biomeApp.is-map-fullscreen .layer-menu {
  position: absolute; top: calc(100% + 10px); right: 0; left: auto; width: 268px;
  max-width: calc(100vw - var(--fs-left) - var(--fs-right));
  max-height: calc(100dvh - var(--fs-menu-top) - var(--fs-bottom)); overflow: auto; overscroll-behavior: contain;
}
#biomeApp.is-map-fullscreen .workspace .drawer {
  position: absolute; top: var(--fs-menu-top); left: var(--fs-left); right: auto; bottom: auto; z-index: 40;
  width: 360px; max-width: calc(100% - var(--fs-left) - var(--fs-right)); height: auto;
  max-height: calc(100% - var(--fs-menu-top) - var(--fs-bottom) - var(--fs-bottom-lane));
  border: 1px solid var(--control-line); box-shadow: inset 0 1px var(--edge-light), 3px 4px 0 var(--edge-dark);
}
#biomeApp.is-map-fullscreen .drawer-header { min-height: 48px; height: 48px; padding: 0 10px 0 16px; gap: 10px; }
#biomeApp.is-map-fullscreen .drawer-header .icon-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
#biomeApp.is-map-fullscreen .drawer-panel { min-height: 0; padding: 16px; scroll-padding: 16px; }
#biomeApp.is-map-fullscreen .drawer .primary-button,
#biomeApp.is-map-fullscreen .drawer .secondary-button,
#biomeApp.is-map-fullscreen .drawer .text-button,
#biomeApp.is-map-fullscreen .drawer .biome-find,
#biomeApp.is-map-fullscreen .drawer .pin-actions button,
#biomeApp.is-map-fullscreen .drawer .search-result button,
#biomeApp.is-map-fullscreen .drawer-header #clearHighlights,
#biomeApp.is-map-fullscreen .layer-menu > button { min-height: 44px; }
#biomeApp.is-map-fullscreen .drawer .field > input,
#biomeApp.is-map-fullscreen .drawer .field > select,
#biomeApp.is-map-fullscreen .filter-field,
#biomeApp.is-map-fullscreen .height-heading input,
#biomeApp.is-map-fullscreen .height-entry input[type="range"] { min-height: 44px; }
#biomeApp.is-map-fullscreen #panel-search .search-actions { position: static; margin: 0; padding: 0; border: 0; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings { display: grid; gap: 16px; min-width: 0; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .loaded-world-summary {
  display: block; position: static; grid-column: 1 / -1; grid-row: auto;
  width: auto; height: auto; max-height: none; max-width: 100%; min-width: 0;
  overflow: visible; clip-path: none; white-space: normal; overflow-wrap: anywhere; padding: 9px 10px;
  border-left: 3px solid var(--accent); color: var(--muted); background: var(--well); font: 11px/1.5 ui-monospace, Consolas, monospace;
}
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .world-form {
  display: grid; grid-column: 1 / -1; grid-row: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto;
  align-items: end; gap: 14px 10px; width: 100%; max-width: none; margin: 0; padding: 0;
}
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .world-seed,
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .load-button,
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .field-error { grid-column: 1 / -1; grid-row: auto; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .seed-caption { display: flex; min-height: 0; flex-wrap: wrap; gap: 5px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .seed-caption > label,
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .field > span:first-child:not(.version-badge) {
  display: block; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
}
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .seed-entry { height: 46px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .random-button { width: 44px; min-width: 44px; min-height: 44px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .field > select { height: 44px; padding: 8px 9px; font-size: 13px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .load-button { width: 100%; min-height: 44px; height: 44px; font-size: 13px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .load-button .icon { display: block; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .version-field:has(.version-badge:not([hidden])) > select { padding-top: 16px; padding-bottom: 2px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .version-badge { bottom: 29px; }
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .world-status {
  display: block; position: static; grid-column: 1 / -1; grid-row: auto; justify-self: stretch; align-self: auto;
  width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere;
}
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .world-status:empty,
#biomeApp.is-map-fullscreen #fullscreenWorldSettings .loaded-world-summary:empty { display: none; }
#biomeApp.is-map-fullscreen .workspace .map-controls {
  display: flex; flex-direction: column; flex: 0 0 auto; align-items: stretch;
  top: auto; left: auto; right: var(--fs-right); bottom: var(--fs-bottom);
  width: auto; height: auto; grid-template-columns: none; z-index: 20;
}
#biomeApp.is-map-fullscreen .map-controls .icon-button {
  flex: 0 0 44px; min-width: 44px; min-height: 44px; width: 44px; height: 44px; border: 0;
}
#biomeApp.is-map-fullscreen .map-controls .icon-button + .icon-button { border: 0; border-top: 1px solid var(--control-line); }
#biomeApp.is-map-fullscreen #fullscreen { display: none; }
#biomeApp.is-map-fullscreen .workspace .map-readouts {
  display: flex; left: var(--fs-left); bottom: var(--fs-bottom); max-width: calc(100% - var(--fs-left) - var(--fs-right) - 60px);
  flex-wrap: wrap; gap: 4px 16px; font-size: 10.5px; line-height: 1.4;
}
#biomeApp.is-map-fullscreen #coordinateReadout { display: block; min-width: 0; overflow-wrap: anywhere; }
#biomeApp.is-map-fullscreen .workspace .selection-bar {
  display: flex; left: var(--fs-left); right: auto; bottom: calc(var(--fs-bottom) + var(--fs-readout-clearance));
  max-width: calc(100% - var(--fs-left) - var(--fs-right) - 60px); gap: 12px;
}
#biomeApp.is-map-fullscreen .selection-actions .icon-button { min-width: 44px; min-height: 44px; }
#biomeApp.is-map-fullscreen .selection-text > span { white-space: normal; overflow-wrap: anywhere; }
#biomeApp.is-map-fullscreen .workspace .map-status {
  display: block; top: var(--fs-menu-top); left: var(--fs-left); max-width: calc(100% - var(--fs-left) - var(--fs-right)); z-index: 25;
}
#biomeApp.is-map-fullscreen .workspace .map-status:empty { display: none; }
#biomeApp.is-map-fullscreen .workspace:has(.drawer:not([hidden])) .map-status { top: auto; bottom: calc(var(--fs-bottom) + var(--fs-bottom-lane) + 10px); }
#biomeApp.is-map-fullscreen .workspace .toast { left: 50%; bottom: calc(var(--fs-bottom) + var(--fs-bottom-lane) + 12px); max-width: calc(100% - var(--fs-left) - var(--fs-right)); z-index: 65; }
#biomeApp.is-map-fullscreen .map-keyboard-hint { top: var(--fs-menu-top); }
@media (max-width: 650px) {
  #biomeApp.is-map-fullscreen { --fs-tools-width: 46px; --fs-exit-width: 46px; --fs-readout-clearance: 64px; }
  #biomeApp.is-map-fullscreen .fullscreen-tools > span,
  #biomeApp.is-map-fullscreen .fullscreen-exit > span { display: none; }
  #biomeApp.is-map-fullscreen .fullscreen-dimension-button { gap: 5px; padding: 0 7px; font-size: 11px; }
  #biomeApp.is-map-fullscreen #fullscreenDimensionMark { flex-basis: 22px; width: 22px; }
  #biomeApp.is-map-fullscreen .layer-button { width: 64px; padding: 0 5px; gap: 3px; font-size: 11px; }
  #biomeApp.is-map-fullscreen .layer-button > .icon:first-child { display: none; }
  #biomeApp.is-map-fullscreen #layerLabel { display: none; }
  #biomeApp.is-map-fullscreen #layerCompactLabel { display: inline; }
  #biomeApp.is-map-fullscreen .layer-menu { position: fixed; top: var(--fs-menu-top); left: var(--fs-left); right: auto; width: 300px; }
  #biomeApp.is-map-fullscreen .workspace .selection-bar { flex-wrap: wrap; }
}
@media (min-width: 520px) and (max-width: 650px) { #biomeApp.is-map-fullscreen { --fs-readout-clearance: 36px; } }
@media (max-height: 420px) {
  #biomeApp.is-map-fullscreen .drawer-header { min-height: 44px; height: 44px; }
  #biomeApp.is-map-fullscreen .drawer-panel { padding: 12px; }
  #biomeApp.is-map-fullscreen #fullscreenWorldSettings { gap: 12px; }
  #biomeApp.is-map-fullscreen #fullscreenWorldSettings .world-form { gap: 10px; }
}
@media (forced-colors: active) {
  #biomeApp.is-map-fullscreen .fullscreen-tools,
  #biomeApp.is-map-fullscreen .fullscreen-exit,
  #biomeApp.is-map-fullscreen .map-toolbar,
  #biomeApp.is-map-fullscreen .tool-rail,
  #biomeApp.is-map-fullscreen .workspace .drawer,
  #biomeApp.is-map-fullscreen .fullscreen-dimension-menu { border-color: ButtonText; box-shadow: none; }
  #biomeApp.is-map-fullscreen .fullscreen-tools[aria-expanded="true"],
  #biomeApp.is-map-fullscreen .tool-rail button[aria-expanded="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
}

/* A separate destination in the rail keeps sibling apps discoverable. */
.tool-rail .app-crosslink {
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 58px; min-width: 0; margin-top: auto; padding: 9px 2px;
  color: var(--text); background: light-dark(#dbe8df, #21332d); border-top: 1px solid light-dark(#8ca99a, #527568);
  text-decoration: none; font-size: 10px; font-weight: 650; line-height: 1.2; white-space: nowrap;
}
.tool-rail .app-crosslink:hover { color: var(--text); background: light-dark(#c8ded0, #2e493c); }
.app-crosslink-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.app-crosslink-mark img { display: block; width: 22px; height: 22px; }
.app-crosslink-arrow { position: absolute; right: -7px; bottom: -2px; width: 10px; height: 10px; background: var(--panel); fill: none; stroke: var(--text); stroke-width: 1.6; }
@media (max-width: 650px) {
  .tool-rail .app-crosslink { flex: 1; min-height: 44px; margin-top: 0; padding: 4px 1px; gap: 3px; font-size: 9px; border-top: 0; border-left: 1px solid light-dark(#8ca99a, #527568); }
  .app-crosslink-mark img { width: 18px; height: 18px; }
}
@media (min-width: 651px) and (max-height: 520px) {
  .tool-rail .app-crosslink { min-height: 44px; padding-block: 4px; }
  .app-crosslink-mark img { width: 18px; height: 18px; }
}
#biomeApp.is-map-fullscreen .tool-rail .app-crosslink {
  grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 44px; margin: 3px 0 0; padding: 9px 10px;
  border: 1px solid light-dark(#8ca99a, #527568); font-size: 12px;
}
#biomeApp.is-map-fullscreen .app-crosslink-mark img { width: 22px; height: 22px; }
#biomeApp.is-map-fullscreen .app-crosslink-arrow { position: static; margin-left: 4px; background: transparent; }
@media (forced-colors: active) {
  .tool-rail .app-crosslink { color: LinkText; background: Canvas; border-color: ButtonText; }
  .app-crosslink-arrow { background: Canvas; stroke: LinkText; }
}

/* WKD integrations stay in the shell; the map never reserves advertising space. */
.support-header { display: none; }
.site-utilities { padding: 6px 0; border-bottom: 1px solid var(--line); }
.site-links .site-utilities > button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 10px 12px; background: transparent; color: var(--text); font-size: 13px; text-align: left; }
.site-links .site-utilities > button:hover { background: var(--raised); }
.site-links .site-utilities > button[aria-expanded="true"] { background: var(--selected); color: #fff; box-shadow: inset 3px 0 var(--accent); }
.site-utilities > button[data-panel="support"] .icon { color: var(--accent); }
.site-links .site-utilities > a { gap: 12px; font-size: 12px; }
.site-links .menu-sponsor { display: flex; gap: 10px; justify-content: flex-start; margin: 7px 0 0; padding: 12px; border: 1px solid var(--line); background: var(--shell); }
.menu-sponsor > span { display: grid; gap: 3px; flex: 1; }
.menu-sponsor small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.menu-sponsor strong { font-size: 13px; }
.menu-sponsor img, .toolbar-sponsor img { object-fit: contain; flex: 0 0 auto; }
.toolbar-sponsor { display: none; }
@media (min-width: 1100px) {
  .toolbar-sponsor { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; min-height: 32px; max-width: 230px; padding: 4px 8px; color: var(--muted); text-decoration: none; font-size: 11px; border: 1px solid transparent; }
  .toolbar-sponsor > span { font-size: 10px; }
  .toolbar-sponsor strong { color: var(--text); font-weight: 650; }
  .toolbar-sponsor:hover { background: var(--raised); border-color: var(--line); }
  .toolbar-sponsor + .layer-picker { margin-left: 0; }
  .site-links .menu-sponsor { display: none; }
}
@media (min-width: 1200px) {
  .app-header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .support-header { display: inline-flex; align-items: center; gap: 8px; grid-column: 4; grid-row: 1; align-self: end; min-height: 36px; padding: 7px 10px; color: var(--text); background: var(--command-face); border: 1px solid var(--line); box-shadow: inset 0 -2px var(--edge-dark); font-size: 12px; font-weight: 650; white-space: nowrap; }
  .support-header .icon { width: 17px; height: 17px; color: var(--accent); }
  .support-header:hover { border-color: var(--accent); }
  .support-header[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
}
@media (pointer: coarse) { .support-header, .toolbar-sponsor { min-height: 44px; } }
#biomeApp.is-map-fullscreen .toolbar-sponsor { display: none; }
.info-panel { font-size: 13px; line-height: 1.65; }
.info-panel h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 750; letter-spacing: -.25px; }
.info-panel p { color: var(--muted); }
.info-panel .info-eyebrow { display: block; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; line-height: 1.5; }
.info-panel .info-lead { margin: 0 0 12px; }
.support-intro { margin: 0; }
.info-cta { display: flex; width: 100%; min-height: 44px; gap: 9px; margin-top: 16px; text-decoration: none; text-align: center; font-size: 12px; line-height: 1.4; }
.info-cta > .icon:last-child { margin-left: auto; flex: 0 0 auto; }
.info-cta img { object-fit: contain; flex: 0 0 auto; }
.info-card { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.info-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 16px; }
.info-card .info-eyebrow { margin-bottom: 10px; }
.info-card h3 img { object-fit: contain; }
.hosting-card { padding: 16px; margin-top: 24px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--well); }
.hosting-card .info-eyebrow { color: var(--muted); }
.info-panel .affiliate-disclosure { margin-top: 10px; font-size: 10px; line-height: 1.5; }
.info-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.info-link:hover { color: var(--accent); background: transparent; }
.info-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 12px; }
.info-footer a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.help-topics { border-top: 1px solid var(--line); }
.help-topics details { border-bottom: 1px solid var(--line); }
.help-topics summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 0; font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; }
.help-topics summary::-webkit-details-marker { display: none; }
.help-topics summary::after { content: "+"; color: var(--accent); font-size: 18px; font-weight: 400; flex: 0 0 12px; text-align: center; }
.help-topics details[open] > summary::after { content: "−"; }
.help-topics summary:hover { color: var(--accent); }
.help-topics details p { margin: 0 0 12px; font-size: 12px; }
.help-topics code { color: var(--text); font-size: 12px; }
#diagnosticsDisclosure { font-size: 11px; line-height: 1.6; }
.build-info { margin-top: 10px; font: 10px/1.6 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-line; }
#pinsStorageNote { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); line-height: 1.6; }
@media (min-width: 651px) {
  .drawer:has(#panel-support:not([hidden]), #panel-help:not([hidden])) { width: 360px; }
}
@media (forced-colors: active) {
  .support-header, .hosting-card, .site-links .menu-sponsor { border-color: ButtonText; box-shadow: none; }
  .info-panel .info-eyebrow, .support-header .icon { color: CanvasText; }
  .info-cta { border: 1px solid LinkText; }
}

/* Keep filtering available during long browsing without shrinking short panels. */
@media (min-height: 601px) {
  #panel-biomes { scroll-padding-top: 64px; }
  #biomeApp.is-map-fullscreen #panel-biomes { scroll-padding-top: 64px; }
  #panel-biomes .filter-field { position: sticky; top: 0; z-index: 2; background: var(--well); box-shadow: inset 0 2px var(--edge-dark), 0 -16px 0 16px var(--panel); }
}

/* Search preview temporarily exposes the map while retaining a clear way back. */
.search-preview {
  position: absolute; top: calc(var(--toolbar-height) + 12px); left: calc(var(--rail-width) + 12px);
  z-index: 30; display: flex; align-items: stretch; width: max-content;
  max-width: calc(100% - var(--rail-width) - 24px); min-height: 44px;
  background: var(--panel); border: 1px solid var(--control-line);
  box-shadow: inset 0 1px var(--edge-light), 2px 2px 0 var(--edge-dark);
}
.search-preview > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 44px; padding: 8px 12px;
  background: transparent; color: var(--text); font-size: 12px; font-weight: 650;
}
.search-preview > button:hover { background: var(--raised); }
.search-preview .icon { width: 17px; height: 17px; }
.search-preview #closeSearchPreview { min-width: 44px; padding: 8px; border-left: 1px solid var(--line); }
.workspace:has(#searchPreview:not([hidden])) .map-status { top: calc(var(--toolbar-height) + 66px); }
.workspace:has(#searchPreview:not([hidden])) .map-keyboard-hint { top: 66px; }
.workspace:has(#searchPreview:not([hidden])):has(.map-viewport.keyboard-navigation) .map-status { top: calc(var(--toolbar-height) + 110px); }
#biomeApp.is-map-fullscreen .search-preview {
  top: var(--fs-menu-top); left: var(--fs-left);
  max-width: calc(100% - var(--fs-left) - var(--fs-right));
}
#biomeApp.is-map-fullscreen .workspace:has(#searchPreview:not([hidden])) .map-status,
#biomeApp.is-map-fullscreen .workspace:has(#searchPreview:not([hidden])) .map-keyboard-hint { top: calc(var(--fs-menu-top) + 54px); bottom: auto; }
#biomeApp.is-map-fullscreen .workspace:has(#searchPreview:not([hidden])):has(.map-viewport.keyboard-navigation) .map-status { top: calc(var(--fs-menu-top) + 98px); }
@media (forced-colors: active) { .search-preview { border-color: ButtonText; box-shadow: none; } }

/* Theme is a single native radio group: all choices stay visible and keyboard focus
   is distinct from its persistent coral selection edge. */
.theme-setting { min-width: 0; margin: 0 0 5px; padding: 0 0 14px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.theme-setting legend { padding: 0; margin-bottom: 10px; color: var(--text); font-size: 12.5px; font-weight: 650; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--well); border: 1px solid var(--line); box-shadow: inset 0 1px var(--edge-dark); }
.theme-option { position: relative; min-width: 0; cursor: pointer; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.theme-option > input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-option > input:focus-visible { outline: none; }
.theme-option-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; padding: 7px 3px 9px; border: 1px solid transparent; color: var(--muted); background: var(--command-face); font-size: 12px; line-height: 16px; font-weight: 650; box-shadow: inset 0 1px var(--edge-light), inset 0 -2px var(--edge-dark); }
.theme-option-face > .icon { width: 18px; height: 18px; }
.theme-option:hover .theme-option-face { color: var(--text); background: var(--raised); border-color: var(--control-line); }
.theme-option > input:checked + .theme-option-face { color: #fff; background: var(--selected); border-color: var(--selected-line); box-shadow: inset 0 1px #dbeeff59, inset 0 -3px var(--accent); }
.theme-option:hover > input:checked + .theme-option-face { background: var(--selected-hover); }
.theme-option > input:focus-visible + .theme-option-face { outline: 2px solid currentColor; outline-offset: -5px; }
.theme-setting .setting-help { margin: 9px 0 0; }
@media (forced-colors: active) {
  .theme-options { border-color: ButtonText; box-shadow: none; }
  .theme-option-face { color: ButtonText; background: Canvas; border-color: ButtonText; box-shadow: none; }
  .theme-option > input:checked + .theme-option-face { color: ButtonText; background: Canvas; border-color: ButtonText; border-bottom: 4px solid Highlight; padding-bottom: 6px; box-shadow: none; }
  .theme-option:hover > input:checked + .theme-option-face { color: ButtonText; background: Canvas; }
  .theme-option > input:focus-visible + .theme-option-face { outline-color: Highlight; }
}