/*! Copyright (c) 2026 JTIAPBNAI. All rights reserved. Third-party notices: /THIRD_PARTY_NOTICES.txt */
:root{--ocean:#0B3C5D;--sky:#328CC1;--steel:#34495E;--concrete:#ECF0F1;--signal-red:#D9534F;--industrial-yellow:#F5B041;--eco:#2ECC71;--ink:#eaf2f7;--muted:#b6cad9;--blue:#80c0e6;--line:#4f7189;--analysis-space:290px;--side-space:352px;color:var(--ink);font-family:Thonburi,Noto Sans Thai,Tahoma,system-ui,sans-serif}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;overflow:hidden;background:#d5e2e7}button,input,select{font:inherit}button,select{border:1px solid #678397;background:var(--steel);color:#f1f6fa;border-radius:6px;padding:9px 12px;cursor:pointer}button:hover{background:#405b70;border-color:#8eb6cf}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--industrial-yellow);outline-offset:3px}button[aria-pressed=true],button.active{background:var(--sky);color:#041822;border-color:#81b9d8;font-weight:600}[hidden]{display:none!important}#world{position:fixed;inset:0}#world canvas{display:block;touch-action:none}.panel{background:#0b3c5df5;border:1px solid #769ab447;border-radius:10px;box-shadow:0 10px 26px #153d5525}header{position:fixed;left:18px;right:18px;top:16px;display:flex;align-items:center;gap:14px;padding:10px 14px;z-index:30;font-size:13px}.brand{background:none;border:0;text-align:left;font-size:22px;font-weight:700;padding:0 12px 0 0;color:#f3f7fa;white-space:nowrap}.brand:hover{background:#214a66}.brand small{display:block;font-size:9px;letter-spacing:2.4px;color:#bcd2e1;font-weight:500}.headerNote{color:#bcd2e1;flex:1}header #weather{width:100px}#intro{position:fixed;left:32px;top:113px;color:#183246;pointer-events:none;z-index:5}#intro>span{font-size:12px;color:#46697e}#intro h1{font-size:35px;font-weight:500;line-height:1.3;letter-spacing:-1.1px;margin:10px 0 12px}#intro p{font-size:11px;color:#46697e}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;flex:none}.panelHead b,.panelHead>span:first-child{color:#eef4f8}.panelHead span{color:#b8d0df;font-size:11px}.panelHead button{border:0;background:none;padding:2px 7px;font-size:23px;color:#e6f1f8}#detail,#lightPanel,#labPanel,#opsPanel{position:fixed;right:18px;top:50%;transform:translateY(-50%);width:320px;z-index:25;max-height:calc(100dvh - 220px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 32px #142d443b}#detail .panelHead,#lightPanel .panelHead,#labPanel .panelHead,#opsPanel .panelHead{border-top:2px solid var(--sky);border-radius:10px 10px 0 0}#detailBody,.scroll{padding:16px;overflow:auto;min-height:0;scrollbar-color:#5d7e93 var(--ocean);scrollbar-width:thin}#detailBody h2{font-weight:500;font-size:24px;line-height:1.35;margin:5px 0 14px}#detailBody h3{font-size:14px;margin:20px 0 8px;color:#a4d1eb}#detailBody p{font-size:13px;line-height:1.8;color:#c7dce9}#detailBody .category{font-size:10px;letter-spacing:1.5px;color:#a4d1eb}#detailBody dl{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;border-top:1px solid var(--line);padding-top:16px}dt{line-height:1.6}dd{margin:0;font-weight:600}#detailBody dd{max-width:165px;text-align:right;line-height:1.6;color:#f3c56f}#detailBody small{color:var(--muted);font-size:11px}#detailBody a{color:#a0d4f1;font-size:12px;line-height:1.7}.panelFoot{padding:12px 16px;display:flex;gap:8px;border-top:1px solid var(--line);flex:none}.panelFoot button{flex:1;font-size:12px}.operationStatus{background:#1a506f;color:#dbf1fb!important;padding:10px;border-left:3px solid var(--sky)}.presets{display:flex;gap:5px;margin-bottom:18px}.presets button{padding:8px 10px;font-size:12px}.scroll>label{display:block;font-size:12px;margin:15px 0}.scroll output{float:right;color:var(--industrial-yellow);font-variant-numeric:tabular-nums}input[type=range]{width:100%;display:block;accent-color:var(--sky);margin-top:9px}.checks label{display:block;font-size:12px;padding:6px 0}.checks input{accent-color:var(--sky)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.actions button{font-size:12px}.labNote{font-size:11px;line-height:1.8;color:var(--muted);margin:0 0 14px}.labMetrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.labMetrics span{display:block;font-size:10px;color:var(--muted)}.labMetrics strong{font-size:19px;font-weight:500;color:var(--industrial-yellow)}.labMetrics div:nth-child(6) strong{font-size:15px}#labTime{font-size:11px;color:var(--industrial-yellow)}#labWarning{font-size:12px;line-height:1.8;padding:10px;background:#194b68;border-radius:6px;color:#daedf6}#labWarning.warning{background:#77434a;color:#fff0ee;border-left:3px solid var(--signal-red)}.opsTabs{display:flex;padding:10px 14px 0;gap:6px}.opsTabs button{font-size:12px;flex:1}.opsNote,.opsLegend{font-size:11px;line-height:1.8;color:var(--muted);padding:0 16px}.opsNote{margin:10px 0}.opsNote #opsClock{font-size:17px;letter-spacing:1px;color:var(--industrial-yellow)}.opsLegend{padding:10px 16px;border-top:1px solid var(--line);font-size:10px;margin-top:auto}#vesselRows{padding:0 14px 12px;overflow:auto;min-height:0}#vesselRows button{display:grid;grid-template-columns:85px 1fr;gap:5px;text-align:left;width:100%;font-size:12px;padding:10px;margin:5px 0;background:#204b68;color:#e7f2f9;border-color:#54768f;border-left:3px solid #7697ad}#vesselRows strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.1px;color:#f3c26c}#vesselRows button>span:last-of-type{grid-column:1/-1}#vesselRows small{font-size:10px;color:var(--muted)}#vesselRows button[data-state=unloading]{border-left-color:var(--sky)}#vesselRows button[data-state=ready],#vesselRows button[data-state=berthing]{border-left-color:var(--industrial-yellow)}.berthRow{display:grid;gap:6px;font-size:12px;padding:12px 18px}.berthRow strong{color:#f4c36c}.berthRow small{color:var(--muted)}#berthRows{overflow:auto}#railOps{padding:0 18px 18px;overflow:auto}#railOps h3{font-size:17px;font-weight:500}#railLiveStatus{font-size:12px;color:#d5eef9}#railSteps{padding-left:22px;font-size:12px;line-height:1.7}#railSteps li{padding:5px}#railSteps .active{background:#235d76;color:#dcf6ed;border-left:3px solid var(--eco);font-weight:600;border-radius:4px}#railOps button{font-size:12px;width:100%}#tools{position:fixed;left:18px;bottom:28px;display:flex;align-items:center;gap:5px;padding:7px;z-index:35;max-width:calc(100vw - 36px);overflow-x:auto;white-space:nowrap;font-size:11px}#tools button,#tools select{padding:8px 10px}.side-open #tools{max-width:calc(100vw - var(--side-space) - 30px)}.analysis-open #tools,.study-open #tools{bottom:calc(20px + var(--analysis-space) + 12px)}#restore,#expand{position:fixed;bottom:24px;left:18px;z-index:40}#help{position:fixed;bottom:3px;left:0;right:0;text-align:center;font-size:10px;color:#466277;pointer-events:none}#compass{position:fixed;right:26px;bottom:106px;font-size:14px;display:grid;text-align:center;color:#284f69;pointer-events:none}#compass span{font-size:40px;line-height:1}#compass small{font-size:10px}#labels{position:fixed;inset:0;z-index:7;pointer-events:none}.worldLabel{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;white-space:nowrap;font-size:11px;background:#0b3c5ded;color:#edf5fb;border:1px solid #85aec43d;border-radius:4px;padding:5px 9px;box-shadow:0 3px 12px #123b5530}.worldLabel:after{content:"";position:absolute;width:1px;height:15px;background:var(--sky);left:50%;top:100%;pointer-events:none}.worldLabel small{font-size:9px;color:#c4d6df;margin-left:6px}.selectedWorldLabel{background:var(--sky);color:#041822;border-color:#afdaee}#study,#analysisPanel{position:fixed;left:18px;right:18px;bottom:20px;z-index:24;height:var(--analysis-space);overflow:hidden;display:flex;flex-direction:column}.side-open #study,.side-open #analysisPanel{right:calc(var(--side-space) + 12px)}.journey{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 12px;flex:none}.journey button{background:none;border:none;border-radius:0;text-align:left;padding:5px 10px;border-right:1px solid var(--line);font-size:12px}.journey button:last-child{border:0}.journey b{display:block;font-size:11px;color:var(--industrial-yellow);margin-bottom:8px}.journey span{line-height:1.6}.journey output{display:block;font-size:13px;color:#e7f5ff;font-weight:600;margin-top:8px;white-space:nowrap}.flowHistory{padding:0 18px 4px;min-height:0}.flowHistory canvas{width:100%;height:55px;touch-action:auto}.flowHistory span{font-size:10px;color:#b8d1e1}#modalReadout{padding:0 18px;margin:4px 0;font-size:11px;line-height:1.7;color:#b8d1e1}#journeyNote{font-size:11px;line-height:1.8;color:#d1e8f5;background:#1b4b66;padding:6px 18px;margin:auto 0 0}#analysisPanel .panelHead{padding:6px 12px;font-size:11px;border-bottom:none}#analysisPanel .panelHead button{font-size:20px}.analysisTabs{display:flex;gap:6px;padding:0 12px 5px;border-bottom:1px solid var(--line);flex:none}.analysisTabs button{font-size:11px;padding:5px 13px}#analysisPanel .scroll{padding:8px 14px}#analysisPanel h3{font-size:13px;font-weight:500;line-height:1.5;margin:0 0 4px}#analysisPanel h3 span{float:right;font-size:10px;font-weight:400;color:var(--muted)}.analysisChartGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}#analysisPanel canvas{width:100%;height:125px;touch-action:auto;background:#203e53;border:1px solid #577489;border-radius:5px}.chartLegend{display:flex;gap:20px;height:16px;font-size:10px;margin:4px 0}.chartLegend span:before{content:"";display:inline-block;vertical-align:middle;width:20px;height:2px;background:#328cc1;margin-right:7px}.chartLegend .queueKey:before{background:repeating-linear-gradient(90deg,#F5B041 0 5px,transparent 5px 8px)}.chartSubtitle{height:16px;font-size:10px;color:var(--muted);line-height:1.8;margin:4px 0}.analysisNote{font-size:11px;color:var(--muted);line-height:1.8;margin:4px 0}.analysisCallout{font-size:11px;line-height:1.8;color:#c3d9e4;padding:3px 0;margin:4px 0}.analysisChartGrid+p+p{display:none}#comparePane{display:grid;grid-template-columns:1fr 1.5fr;gap:10px 20px}#comparePane>h3,#comparePane>.analysisNote,#comparePane>.compareControls,#comparePane>#compareStatus,#comparePane>details{grid-column:1}#comparePane>.comparisonScroll{grid-column:2;grid-row:1/6;overflow:visible;min-height:0}.compareControls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;margin:0}.compareControls label{display:flex;align-items:center;gap:6px}.compareControls button{font-size:12px;min-height:36px}.compareControls select{font-size:12px}#analysisPanel table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}#analysisPanel th,#analysisPanel td{padding:8px 7px;text-align:right;border-bottom:1px solid var(--line);color:#dce9f1}#analysisPanel th:first-child{text-align:left;width:38%;font-weight:500}#analysisPanel thead{background:var(--steel)}#analysisPanel th small{display:inline;margin-left:5px;font-size:10px;color:var(--muted)}#analysisPanel details{font-size:12px;margin:8px 0}#analysisPanel summary{cursor:pointer;color:#a0d4f1}#compareParams p{font-size:11px;margin:9px 0;color:#c5d9e5}#calculationRows{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px}.calculation{padding:6px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}.calculation b{font-size:11px;font-weight:500}.calculation span{font-size:10px;color:var(--muted)}.calculation strong{font-size:14px;color:#f2c46d;font-weight:500}.assumptions{display:grid;grid-template-columns:1fr 1fr;font-size:11px;gap:14px}.assumptions dd{text-align:right}.lessonList{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}.lessonList button{font-size:10px;text-align:left;padding:7px}.lessonList+#lessonBody{color:#c9dce7;font-size:11px}body.hide-ui .ui{display:none!important}body.night #intro,body.night #help,body.night #compass{color:#dbe9f2}body.night #intro>span,body.night #intro p{color:#bed0dc}.muted{font-size:11px!important;color:var(--muted)!important}dialog{width:min(580px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid #7098b0;border-radius:12px;background:var(--ocean);color:#e9f2f8;padding:22px;box-shadow:0 25px 100px #0e263d55}dialog::backdrop{background:#132e4260;backdrop-filter:blur(4px)}dialog .panelHead{padding:0 0 10px}dialog h2{font-size:27px;font-weight:500}dialog p{font-size:13px;line-height:1.9}dialog a{display:block;color:#a0d4f1;padding:9px 0;font-size:13px}#loading{position:fixed;inset:0;z-index:100;background:var(--ocean);color:#f5f8fa;display:grid;place-items:center}#loading span{font-size:11px;letter-spacing:3px;color:#a7c4d8}#loading h1{font-size:28px;font-weight:500}#loading p{font-size:13px;color:#b8cedc}@media(max-width:1000px)and (min-width:761px){:root{--side-space:315px;--analysis-space:315px}#detail,#lightPanel,#labPanel,#opsPanel{width:285px;right:14px}#comparePane{grid-template-columns:.8fr 1.5fr}#analysisPanel table{font-size:10px}#analysisPanel th,#analysisPanel td{padding:8px 5px}.side-open #tools{font-size:10px}#tools button,#tools select{padding:7px 6px}#calculationRows{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){:root{--analysis-space:245px;--side-space:0px}header{left:10px;right:10px;top:10px;padding:10px;gap:5px;display:grid;grid-template-columns:1fr 1fr 1fr}header .brand{grid-column:1/3;font-size:16px}header .brand small{font-size:8px;letter-spacing:.7px}header .headerNote{display:none}header #weather{grid-column:3;width:100%;font-size:11px}header #area{grid-column:1/-1;order:5;width:100%;font-size:12px}header button:not(.brand){font-size:10px;padding:7px 6px}#intro{top:160px;left:20px}#intro>span{font-size:10px}#intro h1{font-size:20px;margin:5px 0;line-height:1.25;white-space:nowrap;letter-spacing:-.5px}#intro h1 br{display:none}#intro p{font-size:9px;margin:6px 0}#detail,#lightPanel,#labPanel,#opsPanel{inset:auto 10px 145px;transform:none;width:auto;height:220px;max-height:220px}#detailBody h2{font-size:22px}.panelHead{padding:8px 12px}#detailBody,.scroll{padding:12px}.panelFoot{padding:8px 12px}#tools,.side-open #tools{left:10px;bottom:22px;max-width:none;width:calc(100vw - 20px);padding:6px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible}#tools button,#tools select{font-size:9px;padding:5px;min-height:40px;white-space:normal}#tools #collapse{display:none}.analysis-open #tools,.study-open #tools{bottom:calc(20px + var(--analysis-space) + 8px)}#help{font-size:8px;bottom:4px}#compass{right:15px;bottom:135px}#study,#analysisPanel,.side-open #study,.side-open #analysisPanel{left:10px;right:10px;bottom:20px;width:auto;height:var(--analysis-space);max-height:var(--analysis-space)}#analysisPanel .scroll{padding:8px 10px}.analysisTabs{gap:4px;padding:0 10px 5px}.analysisTabs button{padding:5px 7px;font-size:10px}.analysisChartGrid{gap:8px}.analysisChartGrid canvas{height:100px!important}.chartLegend{font-size:8px;gap:5px}.chartSubtitle{font-size:8px}#analysisPanel h3{font-size:11px}#comparePane{display:block}.comparisonScroll{overflow-x:auto!important}.comparisonScroll table{min-width:430px}#analysisPanel table{font-size:10px}#analysisPanel th,#analysisPanel td{padding:7px 5px}.compareControls button,.compareControls label{font-size:11px}.compareControls{margin:5px 0}#calculationRows{grid-template-columns:repeat(2,1fr)}.lessonList{grid-template-columns:1fr 1fr}.worldLabel{font-size:10px;padding:4px 7px}.worldLabel small{display:none}.journey{padding:6px 4px}.journey button{font-size:10px;padding:3px 8px}.journey b{margin-bottom:4px}.journey output{font-size:10px}.flowHistory{padding:0 12px 4px}.flowHistory canvas{height:45px}#modalReadout{font-size:10px;padding:0 12px}#journeyNote{padding:6px 12px;font-size:10px}}@media(max-height:600px){#intro{display:none}#detail,#lightPanel,#labPanel,#opsPanel{max-height:calc(100dvh - 140px)}:root{--analysis-space:260px}}@media(prefers-reduced-transparency:reduce){.panel{background:var(--ocean)}dialog::backdrop{backdrop-filter:none}}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}header #musicToggle{min-width:38px;font-size:21px;line-height:1;padding:7px}@media(max-width:759px){header{grid-template-columns:repeat(4,minmax(0,1fr))}header .brand{grid-column:1/4}header #weather{grid-column:4}}.mainTime{display:flex;flex-direction:column;gap:2px;flex-shrink:0;text-align:center}.mainTime small{font-size:9px;color:var(--muted)}#mainClock{font-size:14px;font-variant-numeric:tabular-nums;color:var(--industrial-yellow);letter-spacing:.5px}@media(max-width:759px){header .brand{grid-column:1/3}header .mainTime{grid-column:3;grid-row:1}header #weather{grid-column:4;grid-row:1}#mainClock{font-size:11px}.mainTime small{font-size:8px}}.trendMode{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.trendMode select{padding:2px 7px;font-size:10px}.chartLegend .trendMode{margin-left:auto}.chartLegend .trendMode select{font-size:9px;padding:0 5px;height:18px}