:root{--ink:#203d35;--green:#35664a;--muted:#64776b;--paper:#f7f7ef;--line:#dce2d5;--gold:#e5bb66;font-family:Tahoma,"Leelawadee UI",sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit}button:focus-visible,a:focus-visible,section:focus-visible{outline:3px solid #c2862d;outline-offset:5px}button:hover{color:#8a5e24}button:disabled{opacity:.45;cursor:default}button svg{pointer-events:none}[hidden]{display:none!important}.topbar{height:90px;position:fixed;inset:0 0 auto;z-index:10;background:#f7f7eff5;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;gap:20px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font:700 20px Georgia,serif;letter-spacing:1px;white-space:nowrap}.brand-light{font-weight:400}.brand small{display:block;font:9px Tahoma,sans-serif;letter-spacing:2.5px;margin-top:7px}.brand-icon{background:#dce7ce;border:1px solid #bdcfae;width:38px;height:38px;display:grid;place-items:center;color:var(--green);font-size:30px;box-shadow:3px 3px 0 #c7d5ba}.topbar nav{display:flex;gap:36px}.topbar nav button{font-size:13px;padding:14px 0}.topbar nav span{color:var(--muted);margin-left:7px}.map-button{border:1px solid #b9c9b4;border-radius:5px;padding:11px 16px;font-size:12px}.map-button span{margin-right:7px;font-size:18px}#journey{height:650vh;height:650svh}.stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;overflow:hidden;padding-top:90px}.scene-background{position:absolute;inset:90px 0 0;z-index:-1;background:#edf2e6}#scene{width:100%;height:100%;display:block;image-rendering:pixelated}.topline{display:flex;align-items:center;justify-content:space-between;padding:24px 4.4%;font-size:10px;letter-spacing:1.8px}.topline>span{display:flex;align-items:center;gap:10px}.topline i,.tiny-dot{display:inline-block;width:6px;height:6px;background:#5d8050}.topline b{font-weight:400;padding:4px 8px;border:1px solid #bacab2;border-radius:3px;letter-spacing:1px}.topline button{font-size:11px;letter-spacing:0;color:var(--muted)}.topline button span{margin-left:8px}.story{position:absolute;left:6%;top:23%;width:43%;max-width:610px}.eyebrow{font:10px/1.8 Tahoma,sans-serif;letter-spacing:2.4px;color:#71806b;display:block}.eyebrow:before{content:'';display:inline-block;width:22px;height:1px;background:#8c9e7c;vertical-align:middle;margin-right:10px}h1{font-size:clamp(29px,3.2vw,49px);font-weight:700;line-height:1.55;letter-spacing:-1.5px;margin:18px 0 17px;white-space:pre-line}.description{font-size:14px;color:var(--muted);line-height:1.95;max-width:440px;margin:0 0 22px}.profile{display:flex;gap:13px;align-items:center;margin-top:24px}.avatar{width:44px;height:44px;background:#e2e8d7;display:grid;place-items:center;border:1px solid #bdcaaf}.avatar svg{width:32px;height:36px;image-rendering:pixelated}.profile strong{font-size:14px;display:block;margin-bottom:7px}.profile small{display:block;font-size:10px;color:var(--muted);line-height:1.8}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:#345c43;color:#fff!important;padding:13px 20px;border:1px solid #234631;border-radius:4px;box-shadow:0 3px 0 #1c3a29;font-size:12px;min-height:44px}.primary:hover{background:#244b32}.start-actions{display:flex;gap:20px;align-items:center;margin-top:25px}.start-actions small{font-size:10px;color:#71806b;line-height:1.8}.draft-note{display:block;font-size:10px;line-height:1.8;color:#756e54;margin-top:20px}.indicator-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:490px}.indicator-button{border:1px solid #cbd6bd;background:#f9faf3e8;display:flex;align-items:center;text-align:left;gap:9px;padding:10px 11px;border-radius:4px;font-size:11px;line-height:1.65;min-height:43px;box-shadow:0 2px 0 #dce4d1}.indicator-button:hover{background:#e8eedc;border-color:#8ca67b}.indicator-button .id{font:11px Georgia,serif;color:#54734d;background:#e7eddd;padding:4px 5px}.indicator-button .arrow{margin-left:auto;color:#7b8f6f}.scene-label{position:absolute;left:64%;top:23%;background:#f9f8edee;border:1px solid #c1cbb4;padding:10px 15px;box-shadow:3px 3px 0 #ccd6bd;font-size:10px;letter-spacing:.2px;display:flex;gap:9px;align-items:center}.guide-bubble{position:absolute;left:55.8%;bottom:28%;background:#fffdf2;border:2px solid #6a825b;padding:12px 16px;box-shadow:3px 3px 0 #71865a30;font-size:11px;white-space:nowrap}.guide-bubble:after{content:'';position:absolute;left:24px;bottom:-9px;width:12px;height:12px;background:#fffdf2;border-right:2px solid #6a825b;border-bottom:2px solid #6a825b;transform:skewY(40deg)}.scene-caption{position:absolute;right:5%;bottom:18%;display:flex;gap:10px;align-items:center;font-size:9px;line-height:1.9;color:#5b6e4e}.scene-caption b{font-weight:400}.caption-star{font-size:28px;color:#748952}.journey-footer{height:99px;position:absolute;bottom:0;left:0;right:0;background:#f7f7eff5;display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;border-top:1px solid #cdd8bd;gap:30px}.scroll-hint{display:flex;gap:13px;align-items:center;font-size:11px;white-space:nowrap}.scroll-hint small{display:block;font:8px Tahoma,sans-serif;color:#829075;letter-spacing:1.5px;margin-top:7px}.mouse-icon{width:19px;height:28px;border:1px solid #849879;border-radius:12px;position:relative}.mouse-icon:after{content:'';height:6px;width:2px;background:#728569;position:absolute;top:6px;left:7px}.route{display:flex;align-items:center;justify-content:center;flex:1;max-width:680px;gap:0}.route button{position:relative;flex:1;min-height:52px;font-size:9px;line-height:1.6;color:#89937f;display:flex;align-items:center;flex-direction:column;gap:8px;white-space:nowrap;padding:4px}.route button:before{content:'';height:1px;background:#cfd8c3;position:absolute;top:10px;left:-50%;width:100%}.route button:first-child:before{display:none}.route .dot{width:12px;height:12px;background:#e2e8d7;border:3px solid var(--paper);outline:1px solid #c5d0ba;z-index:1}.route button.active{color:#2e5b39}.route button.active .dot{background:#467343;outline-color:#467343}.route button.visited .dot{background:#a5b591}.stop-counter{font:13px Georgia,serif;color:#85927b;white-space:nowrap}.stop-counter>span:first-child{font-size:29px;color:#39583b}.counter-divider{margin:0 11px;color:#b6bfa9}.progress-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:#e3e9da}#progress{height:100%;background:#5f8450;width:0}.stat-row{display:flex;gap:24px;margin:25px 0}.stat-row strong{font:32px Georgia,serif;display:block}.stat-row small{font-size:11px;color:var(--muted)}dialog{color:var(--ink);background:#fafaf3;border:1px solid #a2b391;border-radius:8px;padding:28px;width:min(650px,calc(100% - 32px));max-height:85dvh;box-shadow:10px 10px 0 #213e321f;overscroll-behavior:contain}dialog::backdrop{background:#132e286e;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.close-button{font-size:28px;width:40px;height:40px;border:1px solid var(--line);border-radius:3px;line-height:1}.dialog-top .eyebrow{font-size:9px}dialog h2{font-size:25px;line-height:1.6;margin:17px 0}dialog h3,.report-item h3{font-size:14px;margin:22px 0 9px}dialog p,dialog li,.report-item p,.report-item li{font-size:13px;line-height:1.95;color:#586b5e}.muted{color:var(--muted);font-size:12px}.target-box{padding:14px 18px;background:#eaf0df;border-left:3px solid #92aa78}.pending{display:inline-block;border:1px solid #e0d3aa;background:#faf3de;color:#8b753c;font-size:10px;border-radius:3px;padding:5px 9px}.evidence-list{list-style:none;padding:0}.evidence-list li{border-bottom:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;gap:12px}.evidence-list small{white-space:nowrap;font-size:10px;color:#8c8c78}.source-note{border-top:1px solid var(--line);padding-top:15px;font-size:10px!important;color:#89907e!important}.map-group{border-top:1px solid var(--line);padding:12px 0}.map-heading{display:flex;justify-content:space-between;width:100%;padding:10px 0;font-size:14px;text-align:left;font-weight:700}.map-items{display:flex;flex-wrap:wrap;gap:7px}.map-items button{font-size:10px;text-align:left;border:1px solid var(--line);padding:7px 9px;border-radius:3px}#reading{max-width:850px;margin:0 auto;padding:120px 25px 60px;background:var(--paper)}.reading-toolbar{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:30px}.reading-toolbar button{font-size:12px;padding:10px 14px;background:#e6eddb;border-radius:3px}#reading h1{font-size:30px}#reading h2{font-size:23px;margin-top:40px;line-height:1.7}.report-item{padding:20px 0;border-bottom:1px solid var(--line);break-inside:avoid}.report-item h3{font-size:17px;margin-top:0}.report-item h4{font-size:12px}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;top:100px;left:20px;z-index:40;background:#fff;padding:15px}.no-script{position:fixed;inset:40% 10% auto;z-index:50;background:#fff;padding:30px}.reading-mode #journey{display:none}.reading-mode .topbar nav,.reading-mode .map-button{display:none}
@media(min-width:1500px){.story{top:25%}.description{font-size:16px}.indicator-button{font-size:12px;padding:13px}.scene-label{top:28%}}
@media(max-width:1050px){.topbar nav{gap:20px}.topbar nav span{display:none}.story{left:5%;width:47%;top:22%}h1{font-size:32px}.description{font-size:12px}.route button{font-size:8px}.journey-footer{gap:20px}.scroll-hint{font-size:10px}.guide-bubble{font-size:10px}.scene-caption{display:none}}
@media(max-width:700px){.topbar{height:70px;padding:0 5%;gap:10px}.brand{font-size:16px;gap:8px}.brand-icon{width:30px;height:32px;font-size:25px}.brand small{font-size:7px;letter-spacing:1.8px}.topbar nav{display:none}.map-button{font-size:10px;padding:7px 9px}.stage{padding-top:70px;min-height:0}.scene-background{top:70px}.topline{padding:16px 5%;font-size:8px;letter-spacing:1px}.topline>span{gap:6px}.topline button{font-size:10px}.story{top:145px;left:6%;width:88%;max-width:none}.eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:29px;line-height:1.5;letter-spacing:-1px;margin:11px 0}.description{font-size:12px;line-height:1.8;max-width:95%;margin-bottom:12px}.profile{margin-top:16px;gap:10px}.profile strong{font-size:12px;margin-bottom:3px}.profile small{font-size:9px}.avatar{width:37px;height:39px}.start-actions{margin-top:17px;gap:15px}.primary{font-size:11px;padding:10px 15px;min-height:40px}.start-actions small{font-size:9px}.draft-note{font-size:9px;margin-top:12px}.indicator-grid{gap:5px}.indicator-button{font-size:10px;padding:6px 8px;min-height:38px;gap:6px}.indicator-button .id{font-size:10px;padding:2px 4px}.scene-label{display:none}.guide-bubble{left:39%;bottom:25%;padding:8px 10px;font-size:9px}.journey-footer{height:80px;padding:0 5%;gap:10px}.scroll-hint{display:none}.route{max-width:none}.route button{font-size:0;min-height:36px}.route button:after{content:attr(data-number);font-size:9px}.route button:before{top:9px}.route button{gap:5px}.route .dot{width:10px;height:10px;border-width:2px}.stop-counter{font-size:10px}.stop-counter>span:first-child{font-size:23px}.counter-divider{margin:0 7px}.stat-row{margin:13px 0;gap:25px}.stat-row strong{font-size:26px}.stat-row small{font-size:10px}dialog{padding:20px}dialog h2{font-size:21px}.dialog-top .eyebrow{letter-spacing:1px}.evidence-list li{display:block}.evidence-list small{display:block}.reading-toolbar{position:sticky;top:70px;background:var(--paper);padding-top:12px}#reading{padding-top:90px}#reading h1{font-size:24px}}
@media(max-height:730px) and (min-width:701px){.stage{min-height:0}.story{top:23%}h1{font-size:30px;line-height:1.4;margin:10px 0}.description{margin-bottom:12px;font-size:12px}.profile{margin-top:15px}.start-actions{margin-top:17px}.indicator-button{min-height:34px;padding:5px 8px}.draft-note{margin-top:10px}.guide-bubble{bottom:29%}.journey-footer{height:80px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.topbar,#journey,dialog,.reading-toolbar,.skip-link{display:none!important}#reading{display:block!important;max-width:none;padding:0}body{background:white;color:black}#reading h1{font-size:24px}#reading h2{break-after:avoid}.pending{border:1px solid #888}a{color:black}.report-item{break-inside:avoid}*{box-shadow:none!important}}
/* Modal motion: lift and fade content while the backdrop arrives softly. */
dialog{opacity:0;transform:translateY(14px) scale(.96)}
dialog[open]{animation:modal-in .24s cubic-bezier(.22,.8,.32,1) forwards}
dialog.is-closing{animation:modal-out .16s ease-in forwards}
dialog::backdrop{background:#132e2800;backdrop-filter:blur(0)}
dialog[open]::backdrop{animation:backdrop-in .24s ease-out forwards}
dialog.is-closing::backdrop{animation:backdrop-out .16s ease-in forwards}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modal-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(7px) scale(.98)}}
@keyframes backdrop-in{from{background:#132e2800;backdrop-filter:blur(0)}to{background:#132e286e;backdrop-filter:blur(4px)}}
@keyframes backdrop-out{from{background:#132e286e;backdrop-filter:blur(4px)}to{background:#132e2800;backdrop-filter:blur(0)}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog.is-closing,dialog[open]::backdrop,dialog.is-closing::backdrop{animation:none}dialog[open]{opacity:1;transform:none}}

/* Keep the controls inside the viewport, including short phones and landscape. */
.guide-bubble{bottom:240px}
@media(max-width:700px){.guide-bubble{bottom:218px}}
@media(max-width:700px) and (max-height:780px){
 .story{top:122px;max-height:calc(100svh - 355px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 5px 8px 0}
 .story h1{font-size:25px;line-height:1.45}.story .description{font-size:11px}
 .guide-bubble{font-size:8px;padding:7px 9px}
}
@media(min-width:701px) and (max-height:680px){
 .story{top:155px;max-height:calc(100svh - 265px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 8px 8px 0}
 .scene-label{display:none}.guide-bubble{bottom:220px}
}
@media(max-height:480px){
 .topbar{height:58px}.stage{padding-top:58px}.scene-background{top:58px}
 .topline{padding-top:12px;padding-bottom:10px}.story{top:105px;width:49%;max-height:calc(100svh - 185px)}
 .story h1{font-size:21px}.story .description{font-size:10px}.eyebrow{font-size:7px}
 .journey-footer{height:65px}.guide-bubble{display:none}.scene-label{display:none}
 .indicator-grid{grid-template-columns:1fr}.start-actions small{display:none}
}

.scene-tools{display:flex;align-items:center;gap:16px;letter-spacing:0}
.topline #sound-toggle{border:1px solid #bdcbb1;border-radius:4px;padding:7px 10px;min-height:34px;background:#f7f7efc9;white-space:nowrap}
.topline #sound-toggle[aria-pressed="true"]{color:#315f41;background:#e1ead7;border-color:#91ab7e}
.topline #music-toggle{border:1px solid #d0c5a7;border-radius:4px;padding:7px 10px;min-height:34px;background:#f8f3e6c9;white-space:nowrap;color:#7e704f}
.topline #music-toggle[aria-pressed="false"]{opacity:.6;color:#817f71}
.topline #sound-toggle span{margin-left:0}
@media(max-width:700px){.scene-tools{gap:7px}.topline #sound-toggle,.topline #music-toggle{padding:5px 7px;font-size:9px}.topline>span{font-size:7px;letter-spacing:.4px}}
@media(max-width:360px){.topline>span{max-width:90px;flex-wrap:wrap;gap:3px}.scene-tools{gap:6px}}