/*
 * Raalhu / Ocean Atlas Interface
 * Visual layer only: it does not modify prediction files or calculations.
 * All original DOM control IDs, map canvases and events are preserved.
 */
:root {
  --paper:#eef4f4; --panel:#ffffff; --raise:#f2f7f7;
  --ink:#102e3b; --ink2:#55717e; --ink3:#8099a2;
  --line:#d6e3e5; --line2:#e7eff0;
  --accent:#e0a66b; --accent-soft:#fff0df;
  --sea:#087e83; --sea-soft:#e2f4f2;
  --warn:#99591e; --warn-soft:#fff2df;
  --mapbg:#badadd; --shadow:0 10px 36px rgba(9,48,57,.11),0 1px 2px rgba(7,49,57,.06);
  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --headfont:'Manrope','DM Sans',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) {
  --paper:#091d27;--panel:#102c38;--raise:#183844;--ink:#f2f9f9;--ink2:#b6ccd2;--ink3:#93b0b8;
  --line:#315260;--line2:#244553;--accent:#f4b980;--accent-soft:#493524;--sea:#6ed9d0;--sea-soft:#193f44;
  --warn:#ffce8e;--warn-soft:#3d3429;--mapbg:#123841;--shadow:0 12px 35px rgba(0,0,0,.3);color-scheme:dark;
 }
}
:root[data-theme="dark"] {
 --paper:#091d27;--panel:#102c38;--raise:#183844;--ink:#f2f9f9;--ink2:#b6ccd2;--ink3:#93b0b8;
 --line:#315260;--line2:#244553;--accent:#f4b980;--accent-soft:#493524;--sea:#6ed9d0;--sea-soft:#193f44;
 --warn:#ffce8e;--warn-soft:#3d3429;--mapbg:#123841;--shadow:0 12px 35px rgba(0,0,0,.3);color-scheme:dark;
}
html,body { min-width:0; }
body {background:var(--paper);letter-spacing:-.006em;}
.app { height:100%;height:100dvh; }
::selection{background:#99e6dd;color:#0b3d46;}
button,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid #efae6e;outline-offset:3px; }

/* 1 — Coastal-studio masthead */
.bar {
 position:relative;z-index:10; min-height:87px; padding:15px clamp(17px,2vw,34px);
 gap:clamp(12px,1.8vw,30px); background:var(--panel);border-bottom:1px solid var(--line);
 box-shadow:0 5px 22px rgba(10,49,60,.035);
}
.bar:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#073c4d 0%,#0aa39f 54%,#eac28e 100%);}
.brand{gap:12px;color:var(--ink);align-items:center;text-decoration:none;}
.brand svg{box-sizing:content-box;padding:11px;width:32px;height:32px;background:#0c3b49;border-radius:18px;color:#a3ebe1;stroke-width:2.35;box-shadow:0 5px 12px rgba(4,58,65,.17);}
.brand-lockup{display:flex;flex-direction:column;gap:3px;white-space:nowrap;}
.brand-name{font:800 27px/1 var(--headfont);letter-spacing:-.075em;text-transform:lowercase;}
.brand-stop{color:#14aaa4;}
.brand-kicker{font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--ink3);}
.bar-pick{gap:11px;}
.sel select{height:43px;max-width:100%;padding:8px 29px 8px 13px;background-color:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:11px;font-weight:750;letter-spacing:-.02em;}
.sel select:hover{border-color:var(--sea);}
.sel select option{background:var(--panel);color:var(--ink);}
.datepick{gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--raise);}
.datepick .sel select{border:0;background-color:transparent;}
.datepick .ib{color:var(--ink2);}
.datepick .ib:hover{background:var(--sea-soft);color:var(--sea);}
.run{max-width:370px;font-size:11.5px;color:var(--ink2);line-height:1.36;}
.run.stale{background:var(--warn-soft);color:var(--warn);padding:7px 10px;border-radius:9px;max-width:310px;font-weight:650;}
.bar-end{gap:9px;}
.seg{gap:2px;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--raise);}
.seg button{padding:7px 12px;border-radius:7px;color:var(--ink2);font-size:12px;}
.seg button[aria-pressed="true"]{background:#0a4a56;color:#fff;box-shadow:0 2px 6px rgba(9,59,69,.14);}
.bar-end .ib{width:39px;height:39px;border:1px solid var(--line);border-radius:10px;color:var(--ink2);}
.bar-end .ib:hover{color:var(--sea);background:var(--sea-soft);}
.tag{border-radius:9px;padding:8px 10px;color:var(--warn);background:var(--warn-soft);border:1px solid rgba(194,141,81,.2);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;}
.bar .link{font-size:12px;color:var(--ink2);text-decoration:none;margin-left:1px;}
.bar .link:hover{color:var(--sea);}

/* 2 — Immersive, gently inset map + information dock */
.stage{grid-template-columns:minmax(0,1fr) clamp(352px,28.5vw,422px);gap:12px;padding:12px 14px 10px;background:var(--paper);}
.mapwrap{background:var(--mapbg);border-radius:18px;box-shadow:0 4px 24px rgba(14,51,60,.10);border:1px solid rgba(17,75,87,.13);isolation:isolate;}
.mapwrap::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);border-radius:18px;}
.mapwrap .base,.mapwrap .gl,.mapwrap .fx,.mapwrap .ov{z-index:0;}
.mapwrap .layers,.mapwrap .tools,.mapwrap .legend,.mapwrap .tip,.mapwrap .attr,.mapwrap .mapmsg,.mapwrap .atlas-map-index,.mapwrap .map-helper{z-index:2;}
.atlas-map-index{position:absolute;top:19px;left:19px;display:flex;gap:7px;align-items:center;font-size:9px;letter-spacing:.13em;font-weight:800;border-radius:99px;color:#effffc;background:rgba(5,44,58,.83);backdrop-filter:blur(12px);padding:9px 14px;pointer-events:none;box-shadow:0 3px 15px rgba(10,53,63,.12);}
.status-ping,.signal-dot{height:7px;width:7px;background:#51d9c4;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 4px rgba(81,217,196,.13);}
.map-index-slash{color:#7ab0b7;}
.layers{top:62px;left:19px;max-height:calc(100% - 170px);padding:6px;background:rgba(250,255,254,.96);border:1px solid rgba(24,79,88,.15);border-radius:13px;gap:3px;box-shadow:0 8px 25px rgba(4,35,47,.16);}
.layers button{padding:9px 11px 9px 7px;font-size:12px;min-height:39px;border-radius:8px;color:#456773;font-weight:700;}
.layers button i{width:15px;height:15px;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(16,69,78,.12);}
.layers button:hover{background:#e9f4f3;color:#0e5864;}
.layers button[aria-pressed="true"]{color:#fff;background:#0b5661;box-shadow:0 3px 10px rgba(7,66,73,.18);}
.layers button[aria-pressed="true"] i{box-shadow:0 0 0 1px rgba(255,255,255,.7);}
.tools{top:18px;right:18px;padding:5px;gap:1px;border-radius:13px;background:rgba(250,255,254,.96);box-shadow:0 8px 25px rgba(4,35,47,.16);border:1px solid rgba(24,79,88,.14);}
.tools .ib{width:38px;height:38px;color:#3c6672;border-radius:9px;}
.tools .ib:hover{background:#e5f5f2;color:#0b6266;}
.pop{top:0;right:49px;width:258px;max-width:calc(100vw - 70px);padding:17px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);z-index:6;}
.map-helper{position:absolute;right:19px;bottom:21px;display:flex;align-items:center;gap:11px;padding:11px 15px;max-width:270px;border-radius:12px;background:rgba(5,44,58,.83);color:white;backdrop-filter:blur(13px);pointer-events:none;}
.map-helper-icon{display:grid;place-items:center;width:29px;height:29px;font-size:22px;font-weight:300;border:1px solid rgba(155,235,225,.45);color:#b6f3e9;border-radius:50%;flex:none;}
.map-helper strong,.map-helper small{display:block;}
.map-helper strong{font-size:12px;letter-spacing:-.01em;}
.map-helper small{font-size:10px;color:#aad6d9;line-height:1.4;margin-top:1px;}
.legend{left:19px;bottom:21px;padding:13px 16px 10px;background:rgba(250,255,254,.97);border:1px solid rgba(24,79,88,.12);border-radius:13px;width:min(310px,calc(100% - 38px));box-shadow:0 8px 24px rgba(4,35,47,.16);color:#174653;}
.legend h3{font-size:12.5px;}
.legend h3 span{font-size:11px;color:#67828b;}
.legend .rampbar{height:10px;border-radius:9px;margin-top:10px;}
.legend .lticks{font-size:10.5px;margin-top:4px;color:#66818a;}
.legend p{font-size:10.8px;color:#6d858e;}
.tip{border-radius:12px;padding:10px 12px;background:#082f40;color:#fff;box-shadow:0 8px 24px rgba(3,32,42,.25);}
.mapmsg{border-radius:18px;background:var(--mapbg);}
.attr{z-index:2;right:6px;bottom:5px;}

/* 3 — Reading room: dark ocean side panel, airy typography */
.panel{
 --ink:#f0fbfb;--ink2:#a9c9cf;--ink3:#83abb5;--line:rgba(192,230,231,.17);--line2:rgba(192,230,231,.10);--raise:#103b4c;
 --panel:#082d3d;--sea:#64ded2;--sea-soft:rgba(100,222,210,.10);--accent:#f4b980;
 background:linear-gradient(160deg,#0c3545,#082b3b 65%,#092f41);color:var(--ink);border:1px solid rgba(134,203,209,.15);border-radius:18px;overflow:hidden;
 box-shadow:0 6px 25px rgba(9,47,58,.12);position:relative;
}
.panel::before{content:'';position:absolute;pointer-events:none;top:0;left:0;right:0;height:115px;background:radial-gradient(ellipse at 100% 0%,rgba(73,181,176,.20),transparent 60%);}
.panel-section-label{z-index:1;position:relative;display:flex;align-items:center;gap:9px;padding:20px 20px 11px;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:#85d4cd;}
.panel-section-count{margin-left:auto;color:#779ca6;font-size:10px;letter-spacing:.08em;}
.tabs{z-index:1;position:relative;border-bottom:1px solid rgba(218,248,250,.13);padding:0 13px;gap:4px;}
.tabs button{min-width:0;flex:1;padding:12px 4px 13px;font-size:12px;font-weight:700;color:#91b6c0;border-bottom:2px solid transparent;line-height:1.2;transition:.2s ease;}
.tabs button:hover{color:#e1fbf8;}
.tabs button[aria-selected="true"]{color:#e9fffb;border-color:#64ddd0;}
.pane{z-index:1;position:relative;padding:25px 23px 29px;scrollbar-width:thin;scrollbar-color:#477b84 transparent;}
.pt-head:before{display:block;content:'SELECTED LOCATION';font-size:9px;color:#68cfc7;letter-spacing:.16em;font-weight:800;margin-bottom:11px;}
.pt-head h2{font:800 clamp(20px,1.6vw,24px)/1.13 var(--headfont);letter-spacing:-.045em;color:#f4f9f7;}
.pt-head p{color:#98bac5;font-size:11px;margin-top:8px;line-height:1.45;}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:169px;display:grid;align-items:center;gap:6px;grid-template-columns:minmax(0,1fr) auto;padding:22px 18px 19px;margin:22px 0 15px;border-radius:16px;border:1px solid rgba(125,234,216,.25);background:linear-gradient(135deg,#116476 0%,#0a5365 62%,#0b465b 100%);box-shadow:0 12px 24px rgba(1,22,32,.25);}
.hero::after{content:'';position:absolute;z-index:-1;right:-52px;top:-75px;width:250px;height:250px;border:1px solid rgba(220,255,247,.13);border-radius:50%;box-shadow:0 0 0 26px rgba(220,255,247,.035),0 0 0 60px rgba(220,255,247,.025),0 0 0 98px rgba(220,255,247,.018);}
.hero .big{font:800 clamp(50px,4.7vw,72px)/1.03 var(--headfont);letter-spacing:-.075em;color:#fff;white-space:nowrap;}
.hero .big small{font:700 21px var(--headfont);margin-left:6px;color:#b9f3e8;}
.hero .cap{font-size:10px;letter-spacing:.015em;color:#d0e7eb;margin-top:9px;max-width:220px;}
.hero .dirline{font-size:12px;margin-top:10px;color:#f3ffff;}
.hero .dirline span{color:#b0dce1;}
.hero .rose{width:89px;height:89px;}
.hero .rose text{fill:#d0f2ee;}
.hero .rose .ring{stroke:rgba(214,247,242,.25);}
.hero .rose .arrow{fill:#c0f5eb;stroke:#c0f5eb;}
.facts{border:0;margin-top:11px;gap:10px;grid-template-columns:1fr 1fr;}
.facts div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;justify-content:space-between;min-width:0;min-height:85px;padding:15px 14px;border:1px solid rgba(193,236,233,.10);border-radius:13px;background:rgba(213,243,239,.045);}
.facts dt{font-size:10.5px;font-weight:650;color:#9cbcc6;}
.facts dd{font:800 22px/1 var(--headfont);letter-spacing:-.04em;color:#f4fbf9;}
.facts dd small{font:600 11px var(--font);color:#a4cbd0;margin-left:4px;}
.sub{gap:7px;flex-wrap:wrap;font-size:13px;margin:23px 0 12px;color:#e9f6f7;}
.sub span{font-size:10.5px;color:#95b7c3;}
.chart{padding:13px 6px 5px;border-radius:12px;background:rgba(5,35,49,.37);border:1px solid rgba(193,236,233,.10);}
.chart text{fill:#accdd2;}
.chart .grid{stroke:rgba(193,236,233,.12);}
.chart .hs-area{fill:#6dd9d0;opacity:.13;}
.chart .hs-line{stroke:#7ce8d7;stroke-width:2.7;}
.chart .per-line{stroke:#e8bc82;stroke-width:2;}
.chart .per2-line{stroke:#a5c5d0;}
.chart .cur{stroke:#f6b180;}
.chart .cur-dot{fill:#f6b180;stroke:#0a3747;}
.chart .arr{stroke:#c9f5f0;}
.chart .lab{fill:#f0fcfa;}
.key{font-size:11px;margin:11px 2px 0;color:#acc8d0;}
.key i{border-color:#7ce8d7;}.key i.k2{border-color:#e8bc82;}.key i.k3{border-color:#a5c5d0;}
.acts{margin-top:17px;gap:9px;}
.acts .btn{padding:11px 11px;border-radius:10px;background:rgba(103,224,208,.09);border-color:rgba(103,224,208,.15);color:#b6f5ea;font-size:11px;}
.acts .btn:hover{background:rgba(103,224,208,.16);border-color:rgba(103,224,208,.35);}
.note{font-size:11px;line-height:1.6;color:#8fafb8;margin-top:17px;}
.empty{color:#bfdbe0;}
.wind{margin:12px 0;}.wind .big{color:#fff;}
.tbl{color:#d3ebef;font-size:11.5px;table-layout:auto;}
.tbl th{font-size:9px;color:#88aab5;}
.tbl td{border-bottom-color:rgba(183,228,227,.1);padding:11px 3px;}
.tbl tr[data-i]:hover td{background:rgba(95,220,210,.08);}
.tbl tr.on td:first-child{color:#84eadc;}
.tbl .sw{width:10px;height:10px;}
.panel .grip{color:#d9fbf8;}

/* 4 — Forecast tape: more like a calibrated instrument */
.time{z-index:4;position:relative;margin:0 14px 13px;min-height:83px;padding:11px 20px calc(11px + env(safe-area-inset-bottom));gap:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 5px 19px rgba(13,66,77,.07);}
.time-intro{display:flex;align-items:center;gap:11px;padding-right:18px;border-right:1px solid var(--line);flex:none;font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--ink2);line-height:1.3;}
.time-intro small{display:block;margin-top:5px;font-weight:550;font-size:10.5px;letter-spacing:0;color:var(--ink3);}
.time-intro-bar{width:3px;height:30px;background:linear-gradient(180deg,#13b3a7,#a9e7da);border-radius:3px;}
.tctl{gap:2px;}
.tctl .ib{width:30px;height:38px;}
.play{width:42px;height:42px;color:#fff;background:#0a5560;box-shadow:0 5px 11px rgba(8,86,95,.22);}
.play:hover{background:#067b7c;}
.tnow{width:97px;line-height:1.1;}
.tnow strong{font:800 26px/1.05 var(--headfont);color:var(--ink);letter-spacing:-.06em;}
.tnow span{font-size:10px;color:var(--ink2);}
.track{height:52px;min-width:0;flex:1;border-radius:10px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line2);}
.spark{top:5px;height:26px;}.spark path{fill:#0a999a;opacity:.17;}
.ticks{top:30px;border-top:1px solid var(--line);}.ticks b{color:var(--ink3);font-size:10px;}
.thumb{top:4px;bottom:17px;border-color:#e3a468;}.thumb::after{background:#e3a468;box-shadow:0 0 0 3px var(--panel),0 0 0 6px rgba(229,171,110,.20);}
.nowmark{top:3px;}.btn.ghost{color:var(--sea);}

/* 5 — Documentation, tooltips, dialog */
.modal{border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 25px 75px rgba(3,36,47,.28);}
.modal h2{font-family:var(--headfont);letter-spacing:-.055em;}
.modal .btn.primary{background:#0a5d64;color:#fff;border:0;border-radius:10px;}
.doc .bar{box-shadow:none;}
.doc .back-map{background:#0a5861;color:#fff;border:0;padding:11px 16px;border-radius:10px;font-weight:700;}
.doc-wrap{max-width:840px;padding-top:49px;}
.doc-wrap h1{font-family:var(--headfont);font-weight:800;letter-spacing:-.06em;max-width:720px;}
.doc-wrap h2{font-family:var(--headfont);letter-spacing:-.04em;}
.doc-wrap .callout{border:1px solid var(--line);border-left:4px solid #dc9f63;background:var(--warn-soft);border-radius:13px;}
.doc-wrap a{font-weight:650;}

/* 6 — Responsive geometry retains original sheet interactions */
@media(max-width:1380px){
 .bar{gap:12px;padding:13px 17px;}.bar-pick{gap:7px;}.bar-end{gap:6px;}
 .run:not(.stale){display:none;}.bar .link{font-size:11px;}
 .stage{grid-template-columns:minmax(0,1fr) 365px;}
 .time-intro{padding-right:12px;}
}
@media(max-width:1110px){
 .bar{gap:9px;}.brand{gap:9px;}.brand svg{padding:8px;width:29px;height:29px;border-radius:14px;}
 .brand-name{font-size:23px;}.brand-kicker{font-size:8px;}
 .run.stale{display:none;}
 .stage{grid-template-columns:minmax(0,1fr) 342px;gap:9px;padding:9px;}
 .pane{padding:22px 17px 26px;}.panel-section-label{padding-left:16px;padding-right:16px;}
 .time-intro{display:none;}.time{margin:0 9px 9px;}
 .hero .big{font-size:56px;}.hero .rose{width:70px;height:70px;}
}
@media(max-width:860px){
 .bar{padding:10px 12px 11px;gap:7px;min-height:0;flex-wrap:wrap;}
 .brand svg{width:28px;height:28px;padding:7px;border-radius:12px;}
 .brand-name{font-size:22px;}.brand-kicker{letter-spacing:.1em;font-size:7.5px;}
 .bar-pick{order:3;flex:1 1 100%;gap:7px;min-width:0;align-items:center;flex-wrap:wrap;}
 .bar-pick .run.stale{display:block;flex:1 1 100%;max-width:100%;font-size:10px;padding:5px 7px;}
 .bar-end{margin-left:auto;gap:7px;}
 .bar-end .ib{width:34px;height:34px;}
 .tag{display:none;}.bar .link{font-size:11px;}
 .sel select{height:36px;padding:5px 26px 5px 9px;font-size:12px;}
 .datepick{padding:1px;gap:0;}.datepick .ib{width:29px;height:32px;}
 .stage{grid-template-columns:minmax(0,1fr);padding:7px 7px 0;gap:0;}
 .mapwrap{border-radius:14px;}
 .mapwrap::before{border-radius:14px;}
 .atlas-map-index{left:9px;top:9px;font-size:8px;padding:7px 10px;}
 .layers{top:44px;left:9px;right:53px;flex-direction:row;max-height:none;overflow-x:auto;gap:2px;padding:4px;border-radius:9px;scrollbar-width:none;}
 .layers button{min-height:32px;padding:6px 9px 6px 6px;white-space:nowrap;font-size:11px;}
 .tools{right:9px;top:9px;padding:4px;border-radius:10px;}
 .tools .ib{width:33px;height:33px;}
 .legend{bottom:60px;left:9px;max-width:260px;padding:9px 11px 6px;border-radius:10px;}
 .legend p{display:none;}.legend p#arrowNote{display:block;}
 .map-helper{display:none;}
 .panel{position:absolute;left:7px;right:7px;bottom:0;width:auto;z-index:5;border-radius:15px 15px 0 0;height:min(74%,560px);box-shadow:0 -8px 26px rgba(4,35,45,.25);transition:transform .25s ease;}
 .panel[data-sheet="peek"]{transform:translateY(calc(100% - 51px));}
 .panel[data-sheet="half"]{transform:translateY(calc(100% - 235px));}
 .panel[data-sheet="full"]{transform:none;}
 .panel[data-sheet="peek"] .panel-section-label,.panel[data-sheet="peek"] .tabs,.panel[data-sheet="peek"] .pane{visibility:hidden;}
 .grip{display:flex;align-items:center;justify-content:center;width:100%;height:51px;position:relative;flex:none;font-size:12px;padding-top:9px;}
 .grip i{top:7px;background:rgba(194,239,235,.47);}
 .panel[data-sheet="half"] .grip,.panel[data-sheet="full"] .grip{height:22px;padding:0;}
 .panel-section-label{padding:8px 16px 10px;}
 .tabs{padding:0 10px;}.tabs button{font-size:12px;padding:10px 4px;}
 .pane{padding:18px 16px 25px;}
 .time{min-height:65px;margin:0 7px 7px;padding:7px 9px calc(7px + env(safe-area-inset-bottom));gap:9px;border-radius:12px;}
 .play{width:37px;height:37px;}.tnow{width:73px;}.tnow strong{font-size:20px;}.tnow span{font-size:9px;}
 .track{height:46px;}.ticks{top:27px;}.spark{height:23px;}.ticks b{font-size:9px;}
 .hero{padding:20px 17px;min-height:144px;}.hero .big{font-size:56px;}.hero .rose{width:75px;height:75px;}
}
@media(max-width:450px){
 .bar{padding:8px 9px 9px;}.brand{gap:7px;}.brand svg{width:24px;height:24px;padding:7px;}
 .brand-name{font-size:20px;}.brand-kicker{font-size:6.8px;letter-spacing:.07em;}
 .bar-end{gap:4px;}.bar .link{padding:4px 2px;font-size:10px;}.seg button{min-width:28px;padding:5px 8px;}
 .bar-end .ib{width:32px;height:32px;}
 .bar-pick{gap:5px;}#atollSel{max-width:130px;}.datepick{max-width:calc(100vw - 153px);}#dateSel{max-width:calc(100vw - 230px);min-width:84px;}
 .layers button{font-size:10px;padding-left:6px;padding-right:8px;}.layers button i{width:12px;height:12px;}
 .atlas-map-index{max-width:calc(100% - 65px);letter-spacing:.06em;}
 .legend{max-width:220px;}.panel{left:7px;right:7px;}
 .hero{min-height:131px;gap:4px;padding:17px 14px;}.hero .big{font-size:47px;}.hero .rose{width:66px;height:66px;}
 .facts{gap:8px;}.facts div{padding:12px 11px;min-height:76px;}.facts dd{font-size:19px;}
 .pane{padding:15px 13px 23px;}.pt-head h2{font-size:22px;}
 .time{gap:6px;padding-left:6px;padding-right:6px;}.tctl{gap:0;}.play{width:36px;height:36px;}.tnow{width:63px;}.tnow strong{font-size:18px;}
}
@media(max-width:370px){
 .brand-kicker{display:none;}.bar .link{display:none;}
 #atollSel{max-width:115px;}.datepick{max-width:calc(100vw - 136px);}#dateSel{max-width:calc(100vw - 218px);}
 .ticks b:not(.day){font-size:8px;}
}
@media(max-height:660px) and (min-width:861px){
 .bar{min-height:65px;padding:9px 14px;}.brand svg{padding:7px;}
 .stage{padding-top:7px;padding-bottom:6px;}.time{min-height:62px;padding-top:6px;padding-bottom:6px;}.atlas-map-index{top:13px;left:13px;}.layers{top:53px;left:13px;}
}
@media(prefers-reduced-motion:reduce){.panel,.layers button,.play{transition:none;}}