@charset "UTF-8";
:root { --paper:#f4f1e9; --ink:#263b35; --muted:#6a756e; --line:#d7d9cd; --green:#426752; --green-soft:#dbe5d5; --orange:#c37851; --yellow:#dfaa3c; --shade:#a85b4b; --night:#d2d6d5; --clear:#dfe8d8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.5 "Bahnschrift","Trebuchet MS",sans-serif; }
button,input,select { font:inherit; color:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; }
button { border:0; background:none; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
button:hover { color:#0d2118; }
.masthead { height:78px; border-bottom:1px solid var(--line); margin:0 44px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.wordmark { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; letter-spacing:1.9px; font-size:18px; }
.wordmark-light { margin-left:-7px; font-weight:400; }
.sun-mark { width:24px; height:24px; background:var(--orange); border-radius:50%; position:relative; overflow:hidden; }
.sun-mark:after { content:""; position:absolute; height:1px; width:100%; top:50%; background:var(--paper); transform:rotate(-35deg); }
.masthead-note,.eyebrow,.intro-side,.small-caption,.section-index,footer,.range-ends { font-family:"Consolas","Courier New",monospace; font-size:11px; letter-spacing:1.4px; }
.masthead-note { color:var(--muted); }
.text-button { padding:6px 0; font-size:12px; }
.text-button span { margin-left:10px; }
.muted { color:var(--muted); }
main { max-width:1600px; margin:auto; padding:0 44px; }
.intro { display:flex; justify-content:space-between; align-items:center; padding:32px 0 28px; }
.eyebrow { color:var(--muted); margin:0 0 9px; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-1.6px; }
h1 { font-size:clamp(32px,3.1vw,49px); line-height:1.15; margin:0; }
.intro-copy { color:var(--muted); margin:10px 0 0; font-size:14px; }
.intro-side { text-align:right; margin-top:20px; font-size:10px; }
.intro-side-sub { display:block; letter-spacing:0; font-family:"Bahnschrift","Trebuchet MS",sans-serif; color:var(--muted); font-size:12px; margin-top:7px; }
.live-dot { width:6px; height:6px; display:inline-block; background:var(--green); border-radius:50%; margin-right:8px; }
.workspace { display:grid; grid-template-columns:276px minmax(0,1fr); border:1px solid var(--line); }
.controls { border-right:1px solid var(--line); padding:23px 23px 20px; background:#edece3; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.section-heading h2 { margin:0; font-size:23px; letter-spacing:-.6px; }
h3 { margin:0; font-size:14px; font-weight:500; }
.section-index { color:var(--muted); }
.field-label { font-size:12px; display:block; margin:18px 0 7px; }
select { width:100%; background:var(--paper); border:1px solid var(--line); padding:9px 8px; font-size:12px; border-radius:0; }
.field-note { font-size:11px; line-height:1.5; color:var(--muted); margin:8px 0 0; }
.control-divider { border-top:1px solid var(--line); margin:19px 0 17px; }
.parameter { margin:12px 0 0; }
.parameter label { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12px; }
.dimension-letter { color:var(--green); margin-right:5px; font-family:Georgia,serif; font-style:italic; font-size:16px; }
.number-wrap { white-space:nowrap; color:var(--muted); font-size:11px; }
.number-wrap input { width:50px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:right; padding:2px 1px; color:var(--ink); font-variant-numeric:tabular-nums; font-size:12px; }
input[type="range"] { appearance:none; -webkit-appearance:none; width:100%; background:transparent; height:19px; margin:6px 0 0; cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track { height:3px; background:var(--line); }
input[type="range"]::-moz-range-track { height:3px; background:var(--line); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:11px; height:11px; margin-top:-4px; background:var(--green); border-radius:50%; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--green); }
input[type="range"]::-moz-range-thumb { width:9px; height:9px; background:var(--green); border:2px solid var(--paper); border-radius:50%; }
.orientation-readout { margin-top:17px; font-size:11px; display:grid; gap:3px; }
.orientation-readout strong { font-weight:500; }
.orientation-readout .field-note { margin:0; }
.check { display:flex; align-items:center; gap:9px; font-size:12px; margin-top:9px; cursor:pointer; }
input[type="checkbox"] { accent-color:var(--green); width:14px; height:14px; margin:0; }
.experiment { min-width:0; display:flex; flex-direction:column; }
.scene-wrap { position:relative; background:#e8e9df; flex:1; min-height:460px; overflow:hidden; }
.scene-top { position:absolute; top:20px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:start; gap:15px; z-index:3; pointer-events:none; }
.scene-top .eyebrow { font-size:10px; margin:0; }
.scene-subtitle { margin:5px 0 0; font-family:Georgia,serif; font-size:18px; }
.view-buttons { display:flex; padding:3px; border:1px solid #cdd3c4; background:#f4f1e9e8; pointer-events:auto; }
.view-buttons button { font-size:11px; padding:5px 12px; }
.view-buttons button.active { background:var(--ink); color:var(--paper); }
.view-buttons #look-around { border-left:1px solid #cdd3c4; }
#scene { position:absolute; inset:0; touch-action:none; }
#scene canvas { display:block; width:100%; height:100%; }
#scene-loading { position:absolute; top:45%; left:20%; right:20%; text-align:center; color:var(--muted); }
#scene-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.scene-label { position:absolute; font:11px/1.2 "Consolas",monospace; color:var(--ink); white-space:nowrap; transform:translate(-50%,-50%); text-shadow:0 1px 2px #f4f1e9; }
.scene-label.point { padding:3px 5px; background:#f4f1e9e8; border:1px solid #263b3520; }
.scene-label.x-point { color:#fff; background:var(--green); padding:4px 7px; font-size:13px; text-shadow:none; border-radius:50%; }
.scene-label.building-name { letter-spacing:1.2px; color:#52675b; font-size:10px; }
.scene-label.sun-label { color:#705113; background:#f4f1e9e8; padding:3px 6px; }
.scene-label.dimension { background:#e8e9dfcc; padding:2px 4px; }
.scene-label.solar-panel-label { width:min(250px,calc(100% - 24px));white-space:normal;text-align:center;background:transparent;padding:0;color:#f3f5ec;text-shadow:0 1px 3px #11271e,0 0 5px #11271e;line-height:1.5; }
.panel-label-title,.panel-label-angles { display:block; }
.panel-label-title { font-size:9px;letter-spacing:1px;color:#ffe0a0; }
.panel-label-angles { font-size:11px; }
.scene-wrap[data-phase="night"] .scene-label.solar-panel-label { background:transparent;color:#deebfc; }
.scene-bottom { position:absolute; bottom:51px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; font-size:11px; color:#667467; z-index:3; }
.scene-bottom button { pointer-events:auto; color:var(--ink); }
.scene-legend { position:absolute; bottom:0; left:0; right:0; padding:14px 24px; border-top:1px solid #cdd3c480; display:flex; justify-content:center; flex-wrap:wrap; gap:18px; background:#e8e9dfdd; font-size:10px; z-index:3; }
.scene-legend span,.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; display:inline-block; }
.legend-dot.receiver { background:var(--green); }
.legend-dot.blocker { background:var(--orange); }
.legend-line { display:inline-block; width:18px; height:2px; }
.legend-line.sun { background:#ce9223; }
.legend-line.reference { background:#a2aaa0; }
.legend-dot.clear { background:#b5cba4; }
.legend-dot.shaded { background:var(--shade); }
.legend-dot.night { background:var(--night); }
.metric { display:flex; flex-direction:column; gap:4px; white-space:nowrap; }
.metric span { font-size:10px; color:var(--muted); }
.metric strong { font-size:18px; font-weight:400; font-variant-numeric:tabular-nums; }
.time-controls { display:grid; grid-template-columns:1fr 1fr; padding:20px 24px; gap:32px; border-top:1px solid var(--line); }
.time-controls label { font-size:12px; }
output { font-size:17px; font-family:Georgia,serif; }
.range-ends { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; letter-spacing:.7px; }
.date-presets { display:flex; gap:5px; margin-top:12px; flex-wrap:wrap; }
.date-presets button { font-size:10px; padding:4px 7px; border:1px solid var(--line); }
.date-presets button.active { border-color:var(--green); color:var(--green); background:var(--green-soft); }
.time-value { display:flex; gap:6px; align-items:baseline; }
.time-value input { border:0; width:92px; background:transparent; font-size:17px; font-family:Georgia,serif; }
.time-value span { color:var(--muted); font-size:10px; }
.time-slider-row { display:flex; align-items:center; gap:12px; margin-top:5px; }
#play { font-size:10px; border:1px solid var(--green); background:var(--green); color:var(--paper); padding:6px 10px; white-space:nowrap; min-width:72px; }
.time-slider-row input { margin:0; }
.time-ends { margin-left:85px; }
.daylight-info { font-size:11px; color:var(--muted); margin:13px 0 0; }
.analysis-section { margin:38px 0 0; }
.analysis-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; }
.analysis-heading h2,.geometry-section h2 { font-size:30px; margin:0; letter-spacing:-.8px; }
.outline-button { border:1px solid var(--line); padding:9px 14px; font-size:11px; }
.outline-button span { margin-left:10px; }
.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.chart-section { min-width:0; position:relative; }
.small-caption { font-size:9px; color:var(--muted); white-space:nowrap; }
.chart-description { font-size:12px; color:var(--muted); margin:6px 0 12px; }
.chart-container { height:290px; position:relative; }
.chart-container svg { width:100%; height:100%; display:block; }
.chart-container text { font-family:"Bahnschrift","Trebuchet MS",sans-serif; fill:var(--muted); font-size:10px; }
.chart-container .axis-title { fill:var(--ink); font-size:11px; }
.chart-legend { display:flex; gap:16px; flex-wrap:wrap; margin:12px 0 0; font-size:11px; }
.year-container { height:290px; position:relative; }
#year-map { width:100%; height:100%; display:block; cursor:crosshair; touch-action:pan-y; }
.chart-tooltip { position:absolute; background:var(--ink); color:var(--paper); padding:8px 11px; font-size:11px; pointer-events:none; z-index:5; max-width:220px; box-shadow:0 3px 10px #263b3520; }
.chart-tooltip[hidden] { display:none; }
.annual-summary { font-size:11px; color:var(--muted); margin:9px 0 0; }
.geometry-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; border-top:1px solid var(--line); margin-top:36px; padding:28px 0; }
.geometry-copy { color:var(--muted); max-width:360px; font-size:12px; }
.daily-summary { font-size:12px; color:var(--green); }
table { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
th { color:var(--muted); font-size:10px; text-align:right; font-weight:400; padding:8px 0; border-bottom:1px solid var(--line); }
td { text-align:right; padding:10px 0; border-bottom:1px solid var(--line); }
th:first-child,td:first-child { text-align:left; }
td:first-child { font-family:Georgia,serif; font-size:15px; }
.table-note { color:var(--muted); font-size:10px; }
footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 0 26px; font-size:9px; color:var(--muted); letter-spacing:.7px; }
dialog { max-width:660px; width:calc(100% - 36px); border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:35px; max-height:85vh; overflow-y:auto; }
dialog::backdrop { background:#263b3577; backdrop-filter:blur(4px); }
.dialog-close { float:right; }
dialog h2 { font-size:34px; margin:10px 0; }
dialog h3 { margin-top:24px; }
dialog p,dialog li { font-size:13px; color:#53665b; }
dialog li { margin-bottom:10px; }
.formula { font-family:Consolas,monospace; line-height:2; background:#e8e9df; padding:15px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.error-message { padding:14px; margin:100px 25px 0; background:var(--paper); border:1px solid var(--shade); color:var(--shade); font-size:13px; position:relative; z-index:5; }
@media(min-width:1440px) { .scene-wrap { min-height:535px; } .controls { padding-top:26px; } }
@media(max-width:1100px) { main { padding:0 26px; } .masthead { margin:0 26px; } .workspace { grid-template-columns:242px minmax(0,1fr); } .controls { padding:20px 17px; } .metric { flex-direction:row; align-items:baseline; justify-content:space-between; } .metric strong { font-size:15px; } .scene-wrap { min-height:460px; } .time-controls { gap:20px; padding:18px; } .scene-top { left:18px; right:18px; } .scene-subtitle { font-size:16px; } .view-buttons button { padding:5px 9px; } .masthead-note { display:none; } .analysis-grid { gap:24px; } }
@media(max-width:780px) { .intro-side { display:none; } .workspace { grid-template-columns:1fr; } .controls { border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; } .controls>.section-heading:first-child,.controls>.field-label,.controls>select,.controls>#preset-note { grid-column:1/-1; } .controls>.field-label { margin:0; } .controls>select { margin-top:-7px; } .controls>#preset-note { margin:0; } .controls>.control-divider { grid-column:1/-1; margin:6px 0 0; } .controls>.section-heading { grid-column:1/-1; } #location-controls,#geometry-controls { grid-column:1/-1; } #geometry-controls { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } .controls>.field-note { grid-column:1/-1; margin:0; } .orientation-readout { grid-column:1/-1; margin:0; } .check { margin:0; } .scene-wrap { min-height:510px; } .analysis-grid { grid-template-columns:1fr; gap:30px; } .geometry-section { grid-template-columns:1fr; gap:10px; } .geometry-copy { max-width:none; } .chart-container,.year-container { height:310px; } .analysis-heading { align-items:start; } .analysis-heading h2 { font-size:27px; } .outline-button { max-width:140px; } }
@media(max-width:480px) { main { padding:0 14px; } .masthead { margin:0 14px; height:65px; } .wordmark { font-size:15px; gap:7px; } .intro { padding:25px 0 23px; } .intro-copy { font-size:12px; max-width:260px; } .eyebrow { font-size:9px; letter-spacing:1px; } .controls { padding:18px 15px; } .scene-wrap { min-height:440px; } .scene-top { top:16px; left:14px; right:14px; flex-wrap:wrap; } .scene-subtitle { display:none; } .view-buttons button { font-size:10px; padding:5px 8px; } .scene-bottom { left:14px; right:14px; bottom:64px; font-size:9px; } .scene-legend { gap:7px 12px; padding:10px; font-size:9px; } .metric { display:block; white-space:normal; } .metric span { display:block; font-size:9px; } .metric strong { font-size:17px; } .time-controls { grid-template-columns:1fr; gap:20px; padding:17px 14px; } .analysis-heading { flex-wrap:wrap; } .outline-button { max-width:none; } .small-caption { font-size:8px; } .chart-description { font-size:11px; } .chart-legend { font-size:10px; gap:12px; } .chart-container,.year-container { height:280px; } th { font-size:9px; } td { font-size:11px; } dialog { padding:23px; } footer span { width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; } }
@media(max-width:360px) { #geometry-controls { grid-template-columns:1fr; } }
.experiment-mode { font:10px/1.5 Consolas,monospace;letter-spacing:1.5px;color:var(--green);margin:14px 0 3px; }
.controls>.experiment-mode { grid-column:1/-1; }
.date-value { display:flex;align-items:center;gap:10px; }
#season-label { font-size:10px;color:var(--muted); }
.date-slider-row { display:flex;gap:10px;align-items:center;margin-top:5px; }
.date-slider-row input { margin:0; }
#play-dates { font-size:10px;border:1px solid var(--green);background:var(--green);color:var(--paper);padding:6px 9px;white-space:nowrap;min-width:78px; }
#play-dates[aria-pressed="true"],#play[aria-pressed="true"] { background:#a65f37;border-color:#a65f37; }
#date-mode { margin-top:10px;font-size:11px;padding:5px 7px; }
#date-play-note { font-size:10px; }
.scene-wrap { min-height:540px;background:#9ecfe9; }
.scene-top>div:first-child { padding:9px 12px;background:#f4f1e9c9;backdrop-filter:blur(8px); }
.scene-bottom { color:#fff;text-shadow:0 1px 4px #162d29; }
.scene-bottom button { color:#fff;text-shadow:0 1px 4px #162d29; }
.scene-legend { background:#f4f1e9d9;backdrop-filter:blur(6px); }
.scene-label { background:#f4f1e9d9;padding:2px 4px;text-shadow:none; }
.scene-label.building-name { color:#263b35;font-size:9px; }
.scene-label.hour-label,.scene-label.cardinal { background:#f4f1e9c9; }
.scene-wrap[data-phase="night"] .scene-top>div:first-child { background:#15253ce8;color:#dbeaff; }
.scene-wrap[data-phase="night"] .scene-top .eyebrow { color:#bed0e8; }
.scene-wrap[data-phase="night"] .scene-label:not(.x-point):not(.solar-panel-label) { background:#182b42d9;color:#deebfc; }
@media(max-width:480px) { .scene-wrap { min-height:440px; } .scene-top>div:first-child { padding:5px 7px; } }
/* The experiment occupies the page; charts continue below it. */
main { max-width:none;padding:14px 18px 0; }
.masthead { height:64px;margin:0 18px; }
.workspace { grid-template-columns:260px minmax(0,1fr);align-items:start; }
.controls { position:sticky;top:14px;max-height:calc(100svh - 90px);overflow:auto;scrollbar-width:thin; }
.scene-wrap { flex:none;height:calc(100svh - 190px);min-height:570px;max-height:1100px; }
.camera-toolbar { display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:auto; }
.navigation-buttons { display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end; }
.navigation-buttons button { border:1px solid #cdd3c4;background:#f4f1e9e8;padding:6px 10px;font-size:11px; }
.navigation-buttons button[aria-pressed="true"] { background:var(--green);color:var(--paper);border-color:var(--green); }
.scene-top>.camera-toolbar { padding:0;background:transparent;backdrop-filter:none; }
.sunlight-panel { border-top:1px solid var(--line);padding:18px 24px 16px;background:#edece3; }
.panel-info { border-top:1px solid var(--line);padding:16px 24px;background:#f4f1e9; }
.panel-info-heading { display:flex;gap:14px;align-items:baseline;margin-bottom:12px; }
.panel-info-heading>span { font:10px Consolas,monospace;color:var(--muted); }
.panel-info-heading>button { margin-left:auto;font-size:11px;white-space:nowrap; }
.panel-info-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
.panel-info-grid span { display:block;font-size:11px;color:var(--muted);margin-bottom:3px; }
.panel-info-grid strong { display:block;font:23px Georgia,serif;font-variant-numeric:tabular-nums;font-weight:400; }
.panel-note { color:var(--muted);font-size:11px;margin:10px 0 0; }
@media(max-width:600px) {
 .panel-info { padding:14px 16px; }.panel-info-heading { gap:8px;flex-wrap:wrap; }
 .panel-info-heading>span { font-size:9px; }.panel-info-heading>button { font-size:10px; }
 .panel-info-grid { gap:10px; }.panel-info-grid span { font-size:9px; }.panel-info-grid strong { font-size:17px; }
 .panel-note { font-size:10px; }.panel-label-angles { font-size:10px; }
}
.sunlight-heading { display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:14px; }
.sunlight-heading>span { font:10px Consolas,monospace;color:var(--muted); }
.sunlight-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.15fr 1.3fr;gap:20px; }
.sunlight-grid>div { border-left:1px solid var(--line);padding-left:14px; }
.sunlight-grid>div:first-child { border-left:0;padding-left:0; }
.sunlight-grid span { font-size:11px;color:var(--muted);display:block;margin-bottom:3px; }
.sunlight-grid strong { font-size:21px;font-weight:400;display:block;font-variant-numeric:tabular-nums; }
.sunlight-grid small { display:block;font-size:10px;color:var(--muted);margin-top:2px; }
.sunlight-note { color:var(--muted);font-size:10px;margin:15px 0 0;max-width:960px; }
.sunlight-note a { text-underline-offset:2px; }
@media(max-width:1250px) {
 .sunlight-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
 .sunlight-grid>div:nth-child(4) { border-left:0;padding-left:0; }
}
@media(max-width:900px) {
 .workspace { grid-template-columns:224px minmax(0,1fr); }
 .controls { padding:18px 15px; }
 .scene-top { gap:8px; }
 .scene-top>div:first-child { padding:6px 8px; }
 .scene-subtitle { font-size:14px; }
 .navigation-buttons button { padding:5px 7px;font-size:10px; }
 .sunlight-grid strong { font-size:18px; }
}
@media(max-width:780px) {
 main { padding:12px 12px 0; }.masthead { margin:0 12px; }
 .workspace { display:flex;flex-direction:column; }
 .experiment { width:100%;order:0; }
 .controls { width:100%;order:1;position:static;max-height:none;border-top:1px solid var(--line); }
 .scene-wrap { height:70svh;min-height:500px;max-height:850px; }
 .sunlight-panel { padding:17px 14px; }
 .sunlight-heading { flex-wrap:wrap;gap:3px; }
}
@media(max-width:480px) {
 .scene-top { left:12px;right:12px;flex-wrap:nowrap; }
 .scene-top>div:first-child { max-width:90px; }
 .camera-toolbar { max-width:205px; }
 .navigation-buttons { gap:4px; }
 .navigation-buttons button { padding:5px 6px;font-size:9px; }
 .view-buttons button { padding:5px 8px; }
 .scene-wrap { height:72svh;min-height:490px; }
 .sunlight-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px; }
 .sunlight-grid>div:nth-child(odd) { border-left:0;padding-left:0; }
 .sunlight-grid>div:nth-child(4) { border-left:1px solid var(--line);padding-left:14px; }
 .scene-bottom { font-size:9px;left:12px;right:12px; }
 #scene-hint { max-width:73%; }
}
.hemisphere-control { display:grid;grid-template-columns:1fr 112px;gap:4px 12px;align-items:center;margin-top:10px; }
.hemisphere-control>label { font-size:12px; }
.hemisphere-control>select { font-size:11px;padding:6px; }
.hemisphere-control>.field-note { grid-column:1/-1;margin-top:4px; }

/* A planetary companion to the local experiment. */
:root { --globe-width:clamp(380px,29vw,470px); }
[hidden] { display:none !important; }
.masthead-actions { display:flex;gap:25px;align-items:center; }
.earth-toggle { border:1px solid var(--green);padding:8px 13px;font-size:12px;white-space:nowrap; }
.earth-toggle span { margin-left:12px; }
.earth-toggle[aria-expanded="true"] { background:var(--green);color:var(--paper); }
.globe-panel { position:fixed;inset:0 0 0 auto;width:var(--globe-width);z-index:25;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-left:1px solid #b9c6bd;box-shadow:-12px 0 36px #152c2b16;scrollbar-width:thin; }
.globe-header { position:sticky;top:0;z-index:2;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 22px 16px; }
.globe-header .eyebrow { font-size:9px;margin:0 0 5px; }
.globe-header h2 { margin:0;font-size:29px;letter-spacing:-1px; }
.globe-header button { white-space:nowrap; }
.globe-context { display:flex;justify-content:space-between;gap:10px;padding:0 22px 12px;color:var(--muted);font:11px Consolas,monospace; }
.globe-scene { position:relative;width:100%;height:clamp(320px,37svh,390px);overflow:hidden;background:radial-gradient(ellipse at 65% 25%,#1a3547,#081421 75%); }
.globe-scene>canvas { display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none; }
.globe-loading { position:absolute;inset:40% 20px auto;text-align:center;color:#b1c9d9;font-size:12px;pointer-events:none; }
.globe-label { position:absolute;pointer-events:none;transform:translate(-50%,-145%);font:10px Consolas,monospace;white-space:nowrap;padding:3px 5px;background:#0c1c2bdd;border:1px solid #6583946b;color:#dce7ef; }
.subsolar-label { color:#ffd27a;transform:translate(-50%,55%);border-color:#ffd27a66; }
.observer-label { color:#95e5d0;border-color:#95e5d066; }
.pole-label { border:0;background:none;padding:0;font-size:11px; }
.globe-scene-caption { position:absolute;bottom:12px;left:17px;right:17px;display:flex;justify-content:space-between;gap:8px;color:#9bb4c5;font:9px Consolas,monospace;pointer-events:none; }
.globe-view-tools { display:flex;align-items:center;gap:9px;padding:10px 17px;border-bottom:1px solid var(--line);font-size:10px; }
.globe-view-tools button { border:1px solid var(--line);padding:5px 7px; }
.globe-view-tools label { display:flex;align-items:center;gap:3px;white-space:nowrap; }
.globe-view-tools label:first-of-type { margin-left:auto; }
.globe-view-tools input { accent-color:var(--green);margin:0; }
.globe-legend { display:flex;justify-content:space-between;gap:5px;padding:12px 22px 0;font-size:9px;color:var(--muted); }
.globe-legend>span { display:flex;align-items:center;gap:5px;white-space:nowrap; }
.globe-key { width:6px;height:6px;display:inline-block;border-radius:50%; }
.globe-key.amber { background:#d9a442; }.globe-key.cyan { background:#53a4bc; }.globe-key.mint { background:#519b82; }
.globe-content { padding:20px 22px 24px; }
.subsolar-section .section-heading h3 { font-size:12px; }
.subsolar-section .small-caption { font-size:8px;letter-spacing:.5px;color:var(--muted); }
.subsolar-readout { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:5px 0 14px; }
.subsolar-readout strong { font:36px Georgia,serif;letter-spacing:-1px;color:#9a6627;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0; }
.subsolar-readout>span { font-size:10px;color:var(--muted);text-align:right;max-width:135px; }
.migration-track { height:4px;background:linear-gradient(90deg,#c8944e,#cfdbce 50%,#c8944e);position:relative;margin:0 5px; }
.migration-midpoint { position:absolute;width:1px;height:12px;top:-4px;left:50%;background:#698671; }
#globe-migration-marker { position:absolute;left:50%;top:-4px;width:12px;height:12px;border-radius:50%;background:#e2b04e;border:2px solid var(--paper);box-shadow:0 0 0 1px #a87931;transform:translateX(-50%); }
.migration-ends { display:flex;justify-content:space-between;color:var(--muted);font:9px Consolas,monospace;margin-top:9px; }
.globe-explanation { font-size:11px;line-height:1.6;color:var(--muted);margin:13px 0 0; }
.globe-observer-info { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.globe-observer-info>div:last-child { border-left:1px solid var(--line);padding-left:18px; }
.globe-observer-info span { display:block;font-size:10px;color:var(--muted); }
.globe-observer-info strong { display:block;font-size:17px;font-weight:400;margin-top:3px; }
.globe-observer-info small { display:block;font-size:10px;color:var(--muted);margin-top:2px; }
.globe-reading-note { border-top:1px solid var(--line);padding-top:16px;margin-top:20px; }
.globe-method { margin-top:16px;font-size:10px;color:var(--muted); }
.globe-method summary { cursor:pointer;color:var(--ink);font-size:11px;padding:4px 0; }
.globe-method p { line-height:1.6; }.globe-method a { text-underline-offset:2px; }
.globe-scrim { position:fixed;inset:0;background:#10262166;z-index:24; }
@media(min-width:1101px) {
 body.globe-open main { margin-right:var(--globe-width); }
 body.globe-open .masthead { margin-right:calc(var(--globe-width) + 18px); }
 body.globe-open .masthead-note { display:none; }
 body.globe-open .workspace { grid-template-columns:224px minmax(0,1fr); }
 body.globe-open .controls { padding:20px 15px; }
 body.globe-open .controls .section-heading h2 { font-size:20px;white-space:nowrap; }
 body.globe-open .sunlight-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
 body.globe-open .sunlight-grid>div:nth-child(4) { border-left:0;padding-left:0; }
 body.globe-open .scene-top { gap:8px; }
 body.globe-open .scene-subtitle { font-size:15px; }
 body.globe-open .navigation-buttons button { padding:5px 7px; }
 .globe-scrim { display:none !important; }
}
@media(min-width:1101px) and (max-width:1350px) {
 body.globe-open .scene-top { flex-wrap:wrap; }
 body.globe-open .analysis-grid { grid-template-columns:1fr; }
 body.globe-open .geometry-section { grid-template-columns:1fr; }
}
@media(max-width:1100px) {
 .globe-panel { position:relative;inset:auto;width:100%;grid-column:1/-1;z-index:1;overflow:visible;border-left:0;border-top:1px solid var(--line);box-shadow:none; }
 .globe-header { position:static; }
 .globe-scene { height:420px; }
 body.globe-open { overflow:auto; }
}
@media(max-width:480px) {
 .masthead-actions { gap:12px; }.earth-toggle { padding:6px 8px;font-size:10px; }.earth-toggle span { margin-left:4px; }
 .masthead-actions #open-guide { font-size:10px; }.masthead-actions #open-guide span { display:none; }
 .masthead { gap:8px; }.wordmark { font-size:13px;gap:5px;letter-spacing:1px; }.sun-mark { width:19px;height:19px; }
 .globe-header { padding:18px 17px 14px; }.globe-header h2 { font-size:27px; }.globe-context { padding:0 17px 11px; }
 .globe-content { padding:18px 17px 22px; }.globe-legend { padding:12px 17px 0;gap:4px;font-size:8px; }
 .globe-view-tools { gap:5px;padding:9px 12px;font-size:9px; }.globe-view-tools button { padding:5px; }
 .globe-scene { height:340px; }.globe-scene-caption { font-size:8px; }
 .subsolar-section .small-caption { font-size:7px; }.subsolar-section .section-heading h3 { font-size:11px; }
}

/* Keep the shared solar clock within reach directly below the scene. */
.geometry-settings { grid-column:1/-1; }
.geometry-settings summary { display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer;list-style:none; }
.geometry-settings summary::-webkit-details-marker { display:none; }
.geometry-settings summary .section-index { margin-left:auto; }
.geometry-settings summary::after { content:"";width:6px;height:6px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:rotate(-45deg);margin-right:2px; }
.geometry-settings[open] summary::after { transform:rotate(45deg); }
.geometry-settings>.field-note { margin:12px 0 0; }
.time-controls { border-top:1px solid var(--line);border-bottom:0;background:#faf8f0;padding:14px 20px;gap:24px; }
.time-controls .date-presets { margin-top:8px; }
#date-mode { margin-top:8px; }
#date-play-note { margin-top:6px; }
.daylight-info { margin-top:10px; }
.playground { display:flex;flex-direction:column;height:calc(100svh - 90px);min-height:560px;max-height:1200px; }
.playground>.time-controls { flex:none; }
.playground>.scene-wrap { flex:1;height:auto;min-height:350px;max-height:none; }
.scene-metrics { position:absolute;left:24px;bottom:86px;z-index:3;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:18px;max-width:430px;padding:0;color:#f6f5ed;text-shadow:0 1px 3px #11271e,0 0 7px #11271ecc;pointer-events:none; }
.scene-metrics .metric { display:block;min-width:0; }
.scene-metrics .metric span { display:block;font-size:9px;color:#ecf3ec; }
.scene-metrics .metric strong { display:block;margin-top:2px;font-size:17px;white-space:nowrap; }
.scene-wrap[data-phase="night"] .scene-metrics { color:#deebfc; }
.scene-wrap[data-phase="night"] .scene-metrics .metric span { color:#bed0e8; }
.scene-compass { position:absolute;left:24px;top:50%;transform:translateY(-50%);width:92px;z-index:3;pointer-events:none;color:#f5f4eb;text-align:center;filter:drop-shadow(0 1px 2px #10261be6); }
.scene-compass svg { width:100%;display:block;overflow:visible; }
.compass-rim { fill:none;stroke:currentColor;stroke-width:.7;opacity:.7; }
.compass-rose { stroke:currentColor;stroke-width:1;opacity:.8; }
.compass-north { fill:#ffd27b; }.compass-south { fill:#e8eee9;opacity:.7; }
.compass-pivot { fill:#f4f4ea; }
.scene-compass text { fill:currentColor;font:10px Consolas,monospace;text-anchor:middle;dominant-baseline:central; }
.scene-compass .compass-north-label { fill:#ffd27b;font-weight:700; }
.compass-heading { display:block;margin-top:-1px;font:10px Consolas,monospace;letter-spacing:.5px;white-space:nowrap;text-shadow:0 1px 3px #10261b; }
.exact-location-tools { margin-top:13px; }
.exact-location-button { display:flex;align-items:center;justify-content:space-between;width:100%;padding:7px 9px;border:1px solid #bbc8b9;color:var(--green);font-size:11px;text-align:left; }
.exact-location-button:hover { background:#dbe5d5; }
.selected-location { margin-top:9px; }
.selected-location strong { display:block;font-size:11px;font-weight:500;overflow-wrap:anywhere; }
.selected-location span { display:block;margin-top:3px;font:9px/1.6 Consolas,monospace;color:var(--muted);overflow-wrap:anywhere; }
.location-dialog { width:min(640px,calc(100% - 28px));max-width:640px;max-height:calc(100svh - 28px);padding:25px;border:1px solid #b7c3b8;background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 22px 80px #10251d40; }
.location-dialog::backdrop { background:#10231eb3;backdrop-filter:blur(3px); }
.location-dialog-heading { display:flex;justify-content:space-between;align-items:start;gap:15px; }
.location-dialog-heading .eyebrow { margin:0 0 5px;font-size:9px; }
.location-dialog-heading h2 { font:normal 30px/1.2 Georgia,serif;letter-spacing:-.8px;margin:0; }
.location-dialog-heading button { padding:0;white-space:nowrap;font-size:11px; }
.location-intro { margin:13px 0;font-size:12px;color:var(--muted); }
.location-search { margin-bottom:12px; }
.location-search gmp-place-autocomplete { width:100%;color-scheme:light; }
.location-map-wrap { position:relative;min-height:290px; }
.location-map { width:100%;height:290px;background:#e4e8dd; }
.location-map-message { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;background:#e9ece2;color:var(--muted);font-size:12px; }
.location-selection { display:flex;flex-direction:column;gap:4px;margin-top:13px;min-height:44px; }
.location-selection strong { font-size:13px;font-weight:500;overflow-wrap:anywhere; }
.location-selection span { font:11px Consolas,monospace;color:var(--green); }
.location-coordinate-details { margin-top:10px;border-top:1px solid var(--line);padding-top:11px; }
.location-coordinate-details summary { cursor:pointer;font-size:11px; }
#location-coordinate-form { display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:10px; }
#location-coordinate-form label { font-size:11px; }
#location-coordinate-form label span { display:block;font-size:9px;color:var(--muted); }
#location-coordinate-form input { display:block;width:100%;min-width:0;border:1px solid var(--line);background:#faf8f0;padding:7px;font:12px Consolas,monospace;margin-top:5px; }
#location-coordinate-form button { padding:8px 10px;border:1px solid #bbc8b9;font-size:11px; }
.location-time-note { margin-top:14px;font-size:10px; }
.location-dialog-actions { display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line); }
.location-primary { background:var(--green);color:var(--paper);padding:9px 15px;font-size:12px; }
.location-primary:hover { background:#2f513d;color:var(--paper); }
.location-primary:disabled { opacity:.45; }
@media(max-width:480px) {
 .location-dialog { padding:18px; }
 .location-dialog-heading h2 { font-size:26px; }
 .location-map { height:250px; }
 .location-map-wrap { min-height:250px; }
 #location-coordinate-form { grid-template-columns:1fr 1fr;gap:10px; }
 #location-coordinate-form button { grid-column:1/-1; }
 .location-selection span { font-size:10px; }
}
@media(max-width:480px) and (max-height:700px) {
 .location-dialog-heading h2 { font-size:24px; }
 .location-intro { margin:9px 0; }
 .location-map { height:160px; }.location-map-wrap { min-height:160px; }
 .location-dialog-actions { margin-top:12px;padding-top:12px; }
}
@media(max-width:1100px) {
 .scene-metrics { left:18px;gap:14px; }.scene-compass { left:18px; }
}
@media(max-width:780px) {
 .time-controls { padding:14px 16px;gap:20px; }
 .geometry-settings .orientation-readout { margin-top:15px; }
 .globe-panel { order:2; }
}
@media(max-width:480px) {
 .time-controls { grid-template-columns:1fr;gap:16px;padding:14px; }
 .time-value input { width:92px; }
 .scene-metrics { left:12px;right:12px;bottom:102px;max-width:none;gap:12px; }
 .scene-metrics .metric strong { font-size:14px; }
 .scene-metrics .metric span { font-size:8px; }
 .scene-compass { left:12px;top:16px;transform:none;width:68px; }
 .compass-heading { font-size:9px;letter-spacing:0; }
 .scene-top>div:first-child { display:none; }
 .scene-top>.camera-toolbar { margin-left:auto;max-width:calc(100% - 80px); }
 .playground { height:calc(100svh - 90px);min-height:min-content;max-height:none; }
 .playground>.scene-wrap { flex:1;height:auto;min-height:260px;max-height:none; }
}

/* One compact camera group and an Earth toggle at the edge of the scene. */
.navigation-buttons { gap:8px; }
.navigation-buttons .earth-toggle { border-radius:20px;padding:5px 12px;border-color:#738d78;background:#f4f1e9f0;color:var(--ink); }
.navigation-buttons .earth-toggle[aria-expanded="true"] { background:var(--green);color:var(--paper); }
.navigation-buttons .earth-toggle span { margin-left:5px; }
.scene-top>div:first-child { padding:7px 10px; }
.scene-top .eyebrow { font-size:8px; }
.scene-subtitle { font-size:15px; }
.solar-time-note { font-size:10px; }
.time-value input { width:124px; }
.guide-method { margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:12px; }
.guide-method summary { cursor:pointer;color:var(--ink); }
.footer-links { display:flex;align-items:center;gap:18px; }
.footer-links a { font:11px "Bahnschrift","Trebuchet MS",sans-serif;letter-spacing:0;text-underline-offset:3px; }
.policy-page { max-width:760px;margin:60px auto;padding:0 24px 50px; }
.policy-page h1 { font-size:42px; }
.policy-page h2 { font-size:25px;margin:28px 0 8px;letter-spacing:-.5px; }
.policy-page p,.policy-page li { font-size:14px; }
.policy-page .policy-back { display:inline-block;margin-bottom:30px;font-size:12px; }
.policy-page .policy-date { color:var(--muted);font-size:11px; }
.maps-attribution { font-family:"Trebuchet MS",sans-serif;font-weight:400;font-style:normal;font-size:12px;letter-spacing:normal;white-space:nowrap;color:#5e5e5e; }
@media(min-width:1101px) and (max-width:1250px) {
 body.globe-open .scene-top>div:first-child { display:none; }
 body.globe-open .scene-top { justify-content:flex-end; }
}
@media(max-width:480px) {
 .view-buttons { flex-wrap:wrap;justify-content:flex-end;gap:1px; }
 .view-buttons button { padding:4px 7px; }
 .view-buttons #look-around { border-left:0; }
 .navigation-buttons button { padding:5px 7px;font-size:10px; }
 .navigation-buttons .earth-toggle { padding:5px 9px;font-size:10px; }
 .scene-top .camera-toolbar { max-width:calc(100% - 72px); }
 .globe-scene { height:340px; }
 .sunlight-note { font-size:10px; }
 .time-value input { width:116px;font-size:15px; }
}