.sw-entry {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 14px;
    border: 1px solid #b8d8e54d;
    border-radius: 14px;
    color: #f2f8fc;
    background: #0b2030 linear-gradient(110deg,#0b2131,#17374b);
    box-shadow: 0 10px 30px #102e421c;
}
.sw-entry--mekar::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: linear-gradient(90deg,#071723f5 2%,#0a1e2cd9 43%,#0a233a22 100%),url('../img/story-themes/mekar-putih/world-surface-indonesia.webp') center 54%/cover;
}
.sw-entry__content { max-width: 760px; padding: clamp(20px,3vw,38px); }
.sw-entry__content h2 { margin: 0 0 8px; color: #f3faff; font-size: clamp(25px,3vw,43px); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
.sw-entry__content h2 span { margin-left: .35em; color: #a9d0e2; font-size: .58em; letter-spacing: .07em; font-variant-numeric: tabular-nums; }
.sw-entry__content > p { max-width: 57ch; margin: 0 0 14px; color: #e0edf4; line-height: 1.6; font-size: 14px; }
.sw-entry__actions,.sw-tabs,.sw-map-tools,.sw-depth__stops,.sw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sw-entry__button,.sw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .36rem;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #a1ccdf52;
    border-radius: 7px;
    background: #173449c9;
    color: #e7f2fb;
    font: 650 12px/1.25 Arial,sans-serif;
    text-align: center;
    cursor: pointer;
    transition: background .16s,border-color .16s;
}
.sw-entry__button:hover,.sw-button:hover { border-color: #b3e0ee; background: #234d62; color: #fff; }
.sw-entry__button--primary { background: #d9f1fc; border-color: #d9f1fc; color: #102a3b; }
.sw-entry__button--primary:hover { background: #fff; border-color: #fff; color: #102a3b; }
.sw-entry :focus-visible,.sw-dialog :focus-visible { outline: 2px solid #a7ecfa; outline-offset: 3px; }
.sw-entry [hidden],.sw-dialog [hidden] { display: none!important; }
.sw-readable { margin-top: 11px; font-size: 12px; color: #d5edf7; }
.sw-readable summary { cursor: pointer; }
.sw-entry .sw-readable h3 { margin: 12px 0 5px; font-size: 14px; color: #f2f9ff!important; }
.sw-readable details { margin: 4px 0; }
.sw-readable p { white-space: pre-line; margin: 4px 0 7px; }
.sw-readable a { color: #d4f1ff; text-decoration: underline; }

.sw-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #071521;
    color: #e8f3fb;
    color-scheme: dark;
    font: 14px/1.4 Arial,sans-serif;
    --sw-line: #91b8cc33;
    --sw-ice: #a0d7ed;
}
.sw-dialog[open] { animation: sw-enter .44s cubic-bezier(.16,.75,.3,1) both; }
.sw-dialog::backdrop { background: #03101ce8; }
.sw-dialog[data-mode=dive] { --sw-ice: #9cebe9; }
@keyframes sw-enter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
.sw-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); }
.sw-top { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 12px clamp(12px,2vw,26px); border-bottom: 1px solid var(--sw-line); background: #081a2a; }
.sw-heading { min-width: 0; }
.sw-heading span { color: var(--sw-ice); font-size: 10px; letter-spacing: .085em; text-transform: uppercase; }
.sw-heading h2 { margin: 2px 0 0; color: #edf8ff; font-size: clamp(16px,2vw,23px); font-weight: 720; line-height: 1.12; }
.sw-tabs { gap: 3px; padding: 3px; border: 1px solid var(--sw-line); border-radius: 9px; background: #050e19; }
.sw-tabs .sw-button { min-height: 34px; background: transparent; border-color: transparent; }
.sw-tabs .sw-button:hover { background: #193348; }
.sw-button[aria-pressed=true],.sw-region[aria-pressed=true],.sw-archive[aria-pressed=true] { background: #d3eef9; color: #0a2737; border-color: #c2e7f8; }
.sw-tabs .sw-button[aria-pressed=true]:hover { background: #effaff; color: #0a2737; }
.sw-close { justify-self: end; }
.sw-close span { font-size: 20px; line-height: 13px; }
.sw-content { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) clamp(300px,25vw,418px); }
.sw-stage { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 0; background: radial-gradient(ellipse at 40% 30%,#234b61,#071521 78%); }
.sw-stage canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; }
.sw-stage__label { position: absolute; inset: 16px 16px auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; pointer-events: none; }
.sw-stage__label span,.sw-map-note { width: fit-content; padding: 6px 9px; border: 1px solid var(--sw-line); border-radius: 6px; background: #071521e8; color: #dcedf8; font-size: 11px; font-variant-numeric: tabular-nums; }
.sw-stage__label span:first-child { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sw-stage__footer { position: absolute; inset: auto 16px 16px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 7px; pointer-events: none; }
.sw-stage__footer button,.sw-depth { pointer-events: auto; }
.sw-dialog[data-mode=dive] .sw-map-tools,.sw-dialog[data-mode=dive] .sw-map-readouts,.sw-dialog[data-map-mode=directory] .sw-map-tools { display: none; }
.sw-map-readouts { display: flex; flex-wrap: wrap; gap: 5px; }
.sw-dialog[data-map-mode=gis] canvas { cursor: grab; }
.sw-dialog[data-map-mode=gis] canvas:active { cursor: grabbing; }
.sw-dialog[data-map-mode=gis] { --sw-list-height: 21vh; }
.sw-map-tools { margin-left: auto; }
.sw-icon-button { min-width: 34px; font-size: 17px; }
.sw-depth { width: min(100%,600px); padding: 9px 11px; border: 1px solid var(--sw-line); border-radius: 9px; background: #071521eb; }
.sw-depth__rail { display: grid; grid-template-columns: auto minmax(0,1fr) 40px; align-items: center; gap: 9px; margin-bottom: 6px; }
.sw-depth__rail label,.sw-depth__rail output { margin: 0; color: #deedf6; font-size: 11px; font-weight: 650; }
.sw-depth__rail output { text-align: right; font-variant-numeric: tabular-nums; }
.sw-depth__rail input { width: 100%; min-width: 0; accent-color: var(--sw-ice); }
.sw-depth__stops .sw-button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.sw-sidebar { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px clamp(12px,1.6vw,22px) 22px; border-left: 1px solid var(--sw-line); background: linear-gradient(160deg,#0c2031,#081521 70%); scrollbar-color: #52718a #0a1a29; }
.sw-map-layers { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--sw-line); }
.sw-map-layer-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.sw-map-layer-buttons .sw-button { min-height: 29px; padding: 4px 8px; font-size: 11px; }
.sw-map-layers #world-geo-credit,.sw-map-layers .sw-terrain-credit { margin: 6px 0 0; color: #b9d2e1; font-size: 11px; }
#world-map-layers a { color: #e3f6ff!important; text-decoration: underline; }
.sw-sea-level { margin-top: 11px; }
.sw-island-shortcuts { margin-top: 10px; }
.sw-country-detail-buttons { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--sw-line); }
.sw-country-detail-buttons[hidden] { display: none; }
.sw-key-heading { margin-bottom: 5px; color: #b4d3e4; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sw-map-layers .sw-terrain-key { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: #ffb88d; font-size: 11px; }
.sw-terrain-key span { display: block; width: 9px; height: 9px; border-radius: 2px; background: #f4985e; }
.sw-map-layers .sw-terrain-key--land { color: #c7deed; }
.sw-terrain-key--land span { border: 1px solid #9eb9cb; background: #263e50; }
.sw-area-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 9px; margin: 9px 0 0; padding: 0; list-style: none; color: #d7e7f2; font-size: 11px; }
.sw-area-key li { display: flex; align-items: center; gap: 5px; }
.sw-area-key li::before { content: ''; flex: 0 0 11px; height: 11px; border: 1px solid #e5f2ff55; border-radius: 2px; background: var(--sw-zone-color); }
.sw-area-key [data-zone=major] { --sw-zone-color: #20b86b; }
.sw-area-key [data-zone=limited] { --sw-zone-color: #adc96c; }
.sw-area-key [data-zone=flood] { --sw-zone-color: #f39a62; }
.sw-area-key [data-zone=collapsed] { --sw-zone-color: #7f8796; }
.sw-local-key { position: absolute; inset: auto auto 60px 16px; max-width: min(310px,calc(100% - 32px)); padding: 8px 11px; border: 1px solid var(--sw-line); border-radius: 8px; background: #081a2af5; pointer-events: none; }
.sw-dialog .sw-local-key h3 { margin: 0; color: #edf8ff!important; font-size: 12px; font-weight: 700; }
.sw-local-key .sw-area-key { margin-top: 5px; }
.sw-dialog .sw-local-key p { margin: 6px 0 0; color: #b9d2e1; font-size: 10px; line-height: 1.35; }
.sw-dialog .sw-terrain-detail { margin: 0 0 8px; color: #ffbc98; font-size: 12px; font-weight: 650; }
.sw-terrain-detail[data-zone=major],.sw-terrain-detail[data-zone=limited] { color: #b7dd93; }
.sw-terrain-detail[data-zone=collapsed] { color: #c7d4df; }
.sw-filters { margin-bottom: 11px; }
.sw-filters button { min-height: 28px; font-size: 11px; }
.sw-filters button[data-world-category]:not([data-world-category=""])::before { content: ''; flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--sw-entry-color); }
.sw-filters button[aria-pressed=true]::before { outline: 1px solid #14334466; }
.sw-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-height: min(var(--sw-list-height,30vh),280px); overflow: auto; padding: 3px; scrollbar-color: #52718a #0a1a29; }
.sw-list .sw-button,.sw-region,.sw-archive { min-width: 0; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.sw-list .sw-region { align-items: flex-start; justify-content: center; flex-direction: column; gap: 3px; min-height: 43px; }
.sw-region small { font-size: 10px; line-height: 1.2; color: var(--sw-entry-color,#b8d9e7); }
.sw-region[aria-pressed=true] small { color: #345366; }
.sw-list .sw-empty { grid-column: 1/-1; margin: 3px 0; color: #bfd5e5; font-size: 12px; }
.sw-detail { margin-top: 14px; padding: 15px 13px; border: 1px solid var(--sw-line); border-radius: 9px; background: #102738; overflow-wrap: anywhere; }
.sw-dialog .sw-detail__kicker { margin: 0 0 4px; color: var(--sw-ice); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sw-detail__kicker:empty { display: none; }
.sw-dialog .sw-detail h3 { margin: 0 0 7px; color: #f1f9ff!important; font-size: clamp(17px,1.6vw,24px); font-weight: 720; }
#world-detail-text { margin: 0; color: #d9e8f4; line-height: 1.65; white-space: pre-line; font-size: 13px; }
body:has(.sw-dialog[open]) { overflow: hidden; }

@media (max-width: 840px) {
    .sw-content { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(190px,47dvh) minmax(0,1fr); }
    .sw-top { grid-template-columns: minmax(0,1fr) auto; }
    .sw-tabs { grid-column: 1/-1; grid-row: 2; justify-self: start; }
    .sw-close { grid-column: 2; grid-row: 1; }
    .sw-sidebar { border-left: 0; border-top: 1px solid var(--sw-line); }
    .sw-list { max-height: 120px; }
    .sw-stage__label { inset: 9px 9px auto; }
    .sw-stage__footer { inset: auto 9px 9px; }
    .sw-map-note { max-width: 100%; }
    .sw-local-key { left: 9px; bottom: 54px; max-width: min(280px,calc(100% - 18px)); }
}
@media (max-width: 380px) { .sw-local-key { bottom: 79px; } }
@media (max-height: 540px) and (max-width: 840px) {
    .sw-content { grid-template-rows: minmax(0,48dvh) minmax(0,1fr); }
    .sw-top { gap: 4px 10px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .sw-dialog[open],.sw-dialog *,.sw-entry * { animation: none!important; transition: none!important; }
}

.sw-method-note,.sw-evidence { margin-top: 10px; font-size: 12px; color: #d1e4f0; }
.sw-method-note summary,.sw-evidence summary { cursor: pointer; color: #edf7ff; font-weight: 650; }
.sw-method-note p { line-height: 1.55; }
.sw-evidence { border-top: 1px solid var(--sw-line); padding-top: 12px; }
.sw-evidence p { margin: 10px 0; line-height: 1.5; }
.sw-evidence strong { display: block; color: #a9cfdf; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.sw-evidence a { display: inline-block; color: #e3f6ff!important; text-decoration: underline; margin: 3px 10px 3px 0; }
.sw-evidence-sites { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.sw-country-evidence-label { display: block; margin: 10px 0 5px; color: #b4d3e4; font-size: 11px; }
.sw-country-evidence-select { display: block; width: 100%; min-height: 34px; margin-bottom: 10px; border: 1px solid var(--sw-line); border-radius: 7px; background: #173449; color: #edf7ff; padding: 5px 8px; font: inherit; font-size: 12px; }
.sw-dialog[data-mode=dive] .sw-country-evidence-label,.sw-dialog[data-mode=dive] .sw-country-evidence-select { display: none; }
#story-world #world-evidence-body a,#story-world #world-evidence-body a:visited { color: #e3f6ff!important; }

.sw-zone-link { border-left: 3px solid #8acb88; }

/* Story information stays ahead of geographic controls. */
.sw-story-locations { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--sw-line); }
.sw-dialog .sw-story-locations > h3 { margin: 0 0 6px; color: #f1f9ff!important; font-size: 22px; line-height: 1.2; }
.sw-story-locations__intro { margin: 0 0 12px; color: #bed5e4; font-size: 12px; line-height: 1.5; }
.sw-landmark-search-label { display: block; margin-bottom: 5px; color: #d7eaf5; font-size: 11px; }
.sw-landmark-search { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid #91b8cc66; border-radius: 7px; background: #071725; color: #f2f9ff; font: 12px/1.4 Arial,sans-serif; }
.sw-landmark-search::placeholder { color: #96b4c8; opacity: 1; }
.sw-landmark-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sw-landmark-filter { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; padding: 5px 8px; border: 1px solid var(--sw-line); border-radius: 6px; background: #153246; color: #d7eaf5; font: 650 11px/1.3 Arial,sans-serif; cursor: pointer; }
.sw-landmark-filter[aria-pressed=true] { background: #d3eef9; color: #102c3c; border-color: #d3eef9; }
.sw-landmark-count { margin: 9px 0; color: #a8c7d9; font-size: 11px; }
.sw-landmark-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 250px; overflow: auto; padding: 3px; scrollbar-color: #52718a #0a1a29; }
.sw-landmark-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; border: 1px solid #91b8cc38; border-radius: 8px; background: linear-gradient(145deg,#153449,#0d2536); color: #e7f5fd; font: 12px/1.35 Arial,sans-serif; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.sw-landmark-card:hover { background: #1e4257; border-color: #95c8dd; }
.sw-landmark-card[aria-pressed=true] { background: #21485c; border-color: #c3eafa; box-shadow: inset 3px 0 #b4e0f0; }
.sw-landmark-card__kind { color: #a9d4e5; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sw-landmark-card__name { color: #eff9ff; font-size: 12px; font-weight: 700; }
.sw-landmark-card__meta { color: #a9c3d4; font-size: 10px; }
.sw-landmark-empty { grid-column: 1/-1; color: #bed5e4; font-size: 12px; }
.sw-landmark-detail { padding: 13px; margin-bottom: 12px; border: 1px solid #a5d7e76b; border-radius: 9px; background: linear-gradient(145deg,#1b3c50,#0e2637); overflow-wrap: anywhere; }
.sw-landmark-detail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#world-landmark-kind { margin: 0; color: #c6e7f5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sw-landmark-close { min-height: 26px; min-width: 26px; padding: 1px 6px; font-size: 19px; }
.sw-dialog #world-landmark-title { margin: 0 0 8px; color: #f3faff!important; font-size: 21px; font-weight: 700; line-height: 1.2; }
#world-landmark-summary { margin: 0 0 10px; color: #e4f2fa; font-size: 13px; font-weight: 650; line-height: 1.5; }
#world-landmark-body { margin: 0; color: #d3e6f1; font-size: 12px; line-height: 1.65; white-space: pre-line; }
#world-landmark-location-note { margin: 12px 0 0; padding: 8px 9px; border-left: 2px solid #a6c9da; background: #07192580; color: #c8dce9; font-size: 11px; line-height: 1.5; }
#world-landmark-source { margin: 9px 0 0; color: #a9c4d6; font-size: 10px; line-height: 1.5; }
#world-landmark-focus { margin-top: 10px; min-height: 29px; font-size: 11px; }
.sw-sidebar > .sw-detail { margin: 0 0 15px; }
.sw-map-tooltip { position: absolute; z-index: 3; max-width: min(235px,calc(100% - 20px)); padding: 8px 11px; border: 1px solid #b5d9e67a; border-radius: 7px; background: #071521f5; color: #eefaff; box-shadow: 0 4px 18px #0005; font: 600 12px/1.45 Arial,sans-serif; white-space: pre-line; pointer-events: none; }
.sw-dialog[data-mode=dive] .sw-story-locations,.sw-dialog[data-mode=dive] .sw-map-tooltip { display: none!important; }
@media (max-width: 840px) { .sw-landmark-list { max-height: 190px; } .sw-story-locations__intro { margin-bottom: 9px; } }

.sw-landmark-group { display: grid; grid-column: 1/-1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.sw-dialog .sw-landmark-group__title { grid-column: 1/-1; margin: 5px 0 1px; color: #bcd9e8!important; font-size: 11px; font-weight: 650; }
.sw-landmark-list > .sw-empty { grid-column: 1/-1; margin: 0; color: #bed5e4; font-size: 12px; }