:root{--bg:#f4f5f1;--paper:#fff;--ink:#1f3540;--muted:#5f7177;--teal:#087d76;--soft:#e7f2ec;--line:#d9e2df;--ice:#2f74c0;--lost:#d9784a;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{color:var(--ink);background:var(--bg);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
h1,h2,h3,p{margin:0}
h1{font-size:1.45rem;letter-spacing:-.03em}
h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;font-weight:700}
h3{font-size:.8rem;color:var(--muted);margin:10px 0 4px;font-weight:700}
a{color:var(--teal);text-underline-offset:3px}
button,input{font:inherit;color:inherit}
button{background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:6px 10px;min-height:34px;cursor:pointer;font-weight:650;touch-action:manipulation}
button:hover{background:#f0f8f3;border-color:#7cb7a9}
button.active,button[aria-pressed=true]{background:var(--soft);color:var(--teal);border-color:#8ebcac}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #d28b54;outline-offset:2px}
.app{display:grid;grid-template-columns:320px 1fr;height:100vh;height:100dvh}
.panel{background:var(--paper);border-right:1px solid var(--line);padding:18px 16px;overflow:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:20px}
.brand{position:relative}
.brand p{color:var(--muted);margin-top:3px}
.year-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.year-out{font-size:2.3rem;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.play{min-width:100px}
#year{width:100%;margin:8px 0 4px;accent-color:var(--teal)}
.year-marks{display:flex;flex-wrap:wrap;gap:4px}
.year-marks button{min-height:28px;padding:2px 7px;font-size:.82rem;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:12px 0 8px}
.stats dt{color:var(--muted)}
.stats dd{margin:0;font-variant-numeric:tabular-nums}
.stats strong{font-size:1.05rem}
#area-change{color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;min-height:30px}
.check input{accent-color:var(--teal);width:17px;height:17px;margin:0}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #0002}
.swatch.lost{background:#e8a985}
.note{color:var(--muted);font-size:.8rem;margin-top:6px}
.chart-box{position:relative}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:#e6ecea;stroke-width:1}
.chart .axis{stroke:#b9c6c3;stroke-width:1}
.chart .tick{fill:var(--muted);font-size:9.5px;font-variant-numeric:tabular-nums}
.chart .value{fill:var(--ink);font-size:10px;font-weight:650}
.chart .line{fill:none;stroke:var(--ice);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .cursor line{stroke:var(--ink);stroke-width:1.5}
.chart .cursor circle{fill:var(--ink);stroke:#fff;stroke-width:2}
.chart .hover line{stroke:#9fb2b0;stroke-width:1;stroke-dasharray:3 3}
.chart .hover circle{fill:#fff;stroke:var(--ice);stroke-width:2}
.chart .hit{cursor:pointer}
.chart-tip{position:absolute;top:-6px;background:var(--ink);color:#fff;font-size:.78rem;border-radius:6px;padding:3px 7px;pointer-events:none;white-space:nowrap}
.table summary{cursor:pointer;color:var(--muted);font-size:.82rem;margin-top:6px}
.table table{border-collapse:collapse;margin-top:6px;font-size:.82rem;font-variant-numeric:tabular-nums}
.table th,.table td{text-align:right;padding:2px 10px 2px 0}
.table th:first-child,.table td:first-child{text-align:left}
.search{position:relative;margin-bottom:8px}
.search input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.results{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px #1f354026;max-height:50vh;overflow:auto;padding:4px}
.results button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;min-height:0;padding:6px 8px;font-weight:600}
.results small{color:var(--muted);font-weight:500;white-space:nowrap}
.results p{padding:8px;color:var(--muted)}
.glacier-list{display:grid;gap:4px}
.glacier-list button{display:grid;text-align:left;padding:6px 10px}
.glacier-list small{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.range-row{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:6px}
.range-row input{flex:1;accent-color:var(--teal)}
.range-row output{min-width:2.6em;color:var(--muted);font-variant-numeric:tabular-nums}
.credits{margin-top:auto;color:var(--muted);font-size:.8rem}
.credits summary{cursor:pointer;font-weight:650;color:var(--ink)}
.credits p{margin-top:8px}
.stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#dfe8ee}
#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.label{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;font-weight:650;color:#24343b;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.label span{display:block;transform:translate(-50%,-100%);padding-bottom:3px}
.label.ort span::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;margin-left:-3px;border-radius:50%;background:#24343b;border:1px solid #fff}
.label.gipfel{font-size:11px;font-weight:600;color:#4b3b30}
.label.gipfel span::before{content:"▲ ";font-size:9px}
.label.gletscher{font-size:11px;font-style:italic;color:#1d5d99}
.label.gewaehlt{font-size:13px;font-weight:750;color:#0f4f8c}
.toolbar{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.toolbar button{pointer-events:auto;box-shadow:0 2px 8px #1f354014}
#fullscreen{margin-left:auto;display:grid;place-items:center}
.mini-time{position:absolute;left:10px;right:10px;bottom:10px;align-items:center;gap:8px;background:#fffe;border:1px solid var(--line);border-radius:10px;padding:6px 8px;box-shadow:0 4px 16px #1f354022}
.mini-time output{font-size:1.25rem;font-weight:750;font-variant-numeric:tabular-nums;min-width:2.6em}
.mini-time input{flex:1;min-width:0;accent-color:var(--teal)}
.mini-time .play{min-width:0}
.status{position:absolute;left:12px;bottom:34px;max-width:min(560px,calc(100% - 24px));background:#fffd;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.88rem}
.status.busy::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{position:absolute;left:12px;bottom:10px;color:var(--muted);font-size:.78rem;background:#ffffffb0;border-radius:5px;padding:0 4px}
.info{position:absolute;right:12px;top:58px;width:min(340px,calc(100% - 24px));max-height:calc(100% - 70px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px #1f354026;padding:12px 14px}
.info header{display:flex;align-items:flex-start;gap:8px}
.info h2{font-size:1.08rem;text-transform:none;letter-spacing:-.01em;color:var(--ink);margin:0;flex:1}
.info header button{border:0;min-height:0;padding:0 4px;font-size:1.3rem;line-height:1;background:none;color:var(--muted)}
.info .fact{margin-top:6px}
.info .summary{margin-top:6px;font-weight:600}
.info .source{margin-top:10px;color:var(--muted);font-size:.75rem}
.bars{display:grid;gap:3px}
.bar-row{display:grid;grid-template-columns:3em 1fr 5.6em;align-items:center;gap:8px;font-size:.84rem;font-variant-numeric:tabular-nums;border-radius:5px;padding:1px 3px}
.bar-row .yr{color:var(--muted)}
.bar-row .bar{height:9px;background:#eef3f2;border-radius:2px;overflow:hidden}
.bar-row .bar span{display:block;height:100%;background:#8fb6dd;border-radius:0 3px 3px 0}
.bar-row .val{text-align:right}
.bar-row.now{background:var(--soft)}
.bar-row.now .bar span{background:var(--ice)}
.chart.small{margin-top:2px}
.app:not(.pano) .pano-only,.app.pano .map-only{display:none!important}
.lead{margin-bottom:8px}
.pano-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pano-buttons button,.toolbar button{display:inline-flex;align-items:center;gap:6px}
button.primary{background:var(--teal);border-color:var(--teal);color:#fff}
button.primary:hover{background:#06665f;border-color:#06665f}
.in-view{display:grid;gap:2px}
.in-view button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:0;min-height:0;padding:4px 6px;font-weight:600;background:none}
.in-view button:hover{background:#f0f8f3}
.in-view small{color:var(--muted);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.in-view p{color:var(--muted);font-size:.82rem}
.status button{margin-left:8px;min-height:28px;padding:2px 8px}
.compass{flex:1 0 100%;height:30px;pointer-events:none;box-shadow:0 2px 8px #1f354014;border-radius:8px}
.peak{position:absolute;left:0;top:0;width:0;height:0}
.peak::before{content:"";position:absolute;left:-.5px;bottom:0;width:1px;height:22px;background:#24343bb0}
.peak button{position:absolute;left:-3px;bottom:22px;transform:rotate(-55deg);transform-origin:0 100%;white-space:nowrap;pointer-events:auto;background:none;border:0;border-radius:4px;min-height:0;padding:0 3px;
 font-size:11px;font-weight:500;color:#24343b;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 5px #fff;cursor:pointer;font-variant-numeric:tabular-nums}
.peak button b{font-weight:650}
.peak.major button{font-size:12.5px}
.peak.major button b{font-weight:750}
.peak button:hover,.peak.target button{background:#fffd;text-shadow:none}
.peak.target::before{background:var(--teal);width:2px}
.peak.target button{color:var(--teal);outline:2px solid var(--teal)}
.peak.hidden::before{background:none;border-left:1px dashed #24343b}
.app.pano .info{top:100px;max-height:calc(100% - 112px)}
.app.pano #scene{cursor:grab}
/* Themes: raindrop, geology, cross-section, cantons */
.segmented{display:flex;gap:0;margin-bottom:8px}
.segmented button{flex:1;border-radius:0;margin-left:-1px}
.segmented button:first-child{border-radius:7px 0 0 7px;margin-left:0}
.segmented button:last-child{border-radius:0 7px 7px 0}
.legend{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px;font-size:.82rem}
.legend li{display:flex;align-items:center;gap:7px}
.legend i,.key-line i,.profile-legend i{flex:none;display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid #0002}
.key-line{display:flex;align-items:center;gap:7px}
.swatch.watershed{background:#b4432f;height:4px;border:0;border-radius:2px}
.swatch.canton{background:#7a4b8c;height:3px;border:0;border-radius:2px}
.label.kanton{font-size:10.5px;font-weight:750;letter-spacing:.06em;color:#5e3470}
.label.kanton span{background:#fffc;border:1px solid #c9b3d3;border-radius:4px;padding:0 4px;text-shadow:none;transform:translate(-50%,-50%)}
.label.scheide{font-size:11px;font-weight:650;font-style:italic;color:#8a3020}
.app.tool #scene{cursor:crosshair}
.marker{position:absolute;left:0;top:0;width:0;height:0}
.marker.drop svg{position:absolute;left:-8px;top:-22px;width:16px;height:22px;filter:drop-shadow(0 1px 2px #0006)}
.marker.a,.marker.b{font-size:0}
.marker.a::before,.marker.b::before{content:"";position:absolute;left:-1px;top:-14px;width:2px;height:14px;background:#1f3540}
.marker.a::after,.marker.b::after{content:attr(data-marker);position:absolute;left:-11px;top:-35px;width:18px;height:18px;border-radius:50%;background:#1f3540;border:2px solid #fff;
 display:grid;place-items:center;text-transform:uppercase;font:750 11px/1 system-ui,sans-serif;color:#fff;box-shadow:0 1px 4px #0005}
.marker.cursor::before{content:"";position:absolute;left:-7px;top:-7px;width:10px;height:10px;border-radius:50%;border:2px solid #1f3540;background:#fff}
.way{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:0}
.way li{display:flex;justify-content:space-between;gap:10px;padding:3px 0 3px 18px;position:relative;font-weight:600}
.way li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:3px;background:#1565c0;border-radius:2px}
.way li.see::before{background:#7fb0e0}
.way li.beyond::before{background:repeating-linear-gradient(#1565c0 0 4px,transparent 4px 7px)}
.way li.sea::before{top:6px;bottom:auto;left:1px;width:11px;height:11px;border-radius:50%}
.way li:first-child::before{top:7px}
.way small{color:var(--muted);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.inset{display:block;width:100%;height:auto;margin-top:10px;border-radius:6px;border:1px solid var(--line)}
.inset .sea-bg{fill:#dcebf5}
.inset .land{fill:#f4f2ea;stroke:#c9d6dc;stroke-width:.5}
.inset .border{fill:none;stroke:#cfc9bd;stroke-width:.5}
.inset .lake{fill:#dcebf5}
.inset .ch{fill:#efd9d0;stroke:#a86f62;stroke-width:.7}
.inset .way{fill:none;stroke:#1565c0;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.inset .start{fill:#1565c0;stroke:#fff;stroke-width:1.5}
.inset .end{fill:#fff;stroke:#1565c0;stroke-width:2}
.inset .sea-name{font-size:9px;fill:#5f7177;font-style:italic}
.inset .sea-name.on{fill:#1f3540;font-weight:700}
.profile{position:absolute;z-index:4;left:12px;right:12px;bottom:12px;max-height:56%;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px #1f354026;padding:10px 14px 12px}
.profile header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.profile h2{font-size:1rem;text-transform:none;letter-spacing:-.01em;color:var(--ink);margin:0}
.profile header p{color:var(--muted);font-size:.84rem;flex:1}
.profile header button{border:0;min-height:0;padding:0 4px;font-size:1.3rem;line-height:1;background:none;color:var(--muted)}
.profile-chart{position:relative;margin-top:4px}
.profile-chart .chart-tip{top:30px;white-space:normal;width:230px;line-height:1.35}
.profile-svg{display:block;width:100%;height:auto;touch-action:pan-y}
.profile-svg:focus-visible{outline:3px solid #d28b54;outline-offset:2px}
.profile-svg .grid{stroke:#e6ecea;stroke-width:1}
.profile-svg .axis{stroke:#9fb2b0;stroke-width:1}
.profile-svg .tick{fill:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.profile-svg .terrain{fill:none;stroke:#1f3540;stroke-width:1.6;stroke-linejoin:round}
.profile-svg .stratum{stroke:#fff;stroke-width:.6;stroke-opacity:.7}
.profile-svg .unknown{fill:#eceeec}
.profile-svg .unknown-text{fill:var(--muted);font-size:11px;font-style:italic}
.profile-svg .band{stroke:none}
.profile-svg .name{fill:var(--ink);font-size:10.5px;font-weight:600}
.profile-svg .name.ort{font-weight:750}
.profile-svg .tick-line{stroke:#1f354055;stroke-width:1}
.profile-svg .end-mark{fill:var(--ink);font-size:12px;font-weight:800}
.profile-svg .hover line{stroke:#1f3540;stroke-width:1}
.profile-svg .hover circle{fill:#fff;stroke:#1f3540;stroke-width:2}
.profile-legend{display:flex;flex-wrap:wrap;gap:3px 12px;align-items:center;font-size:.8rem;margin-top:6px}
.profile-legend strong{flex-basis:100%;font-size:.76rem;color:var(--muted);margin-top:2px}
.profile-legend .key{display:inline-flex;align-items:center;gap:5px}
.profile-legend .key.none i{background:#eceeec}
.profile .table table{font-size:.8rem}
.app.profile-open .status{bottom:auto;top:58px}
.app.profile-open .hint{display:none}
.app.profile-open .info{max-height:calc(100% - var(--profile-h,0px) - 84px)}

.only-mobile{display:none}
.close-panel{position:absolute;top:-4px;right:-6px;border:0;background:none;font-size:1.6rem;line-height:1;min-height:0;padding:4px 8px;color:var(--muted)}
.scrim{display:none}
:fullscreen .app,.app:fullscreen{height:100vh}
@media (max-width:760px),(max-height:500px) and (max-width:1024px){
 .app{grid-template-columns:1fr}
 .panel{position:absolute;z-index:10;inset:0 auto 0 0;width:min(340px,90vw);transform:translateX(-102%);visibility:hidden;transition:transform .2s,visibility 0s .2s;box-shadow:0 0 40px #1f354040}
 .app.panel-open .panel{transform:none;visibility:visible;transition:transform .2s}
 .brand{padding-right:40px}
 .scrim{display:block;position:absolute;z-index:9;inset:0;background:#1f354033;opacity:0;pointer-events:none;transition:opacity .2s}
 .app.panel-open .scrim{opacity:1;pointer-events:auto}
 .only-mobile{display:inline-block}
 .mini-time.only-mobile{display:flex}
 .hint{display:none}
 .status{bottom:64px}
 .toolbar button{padding:6px 8px}
 .wide-only{display:none!important}
 .app.pano .info{top:auto}
 .info{top:auto;bottom:62px;max-height:48%}
 .profile{left:8px;right:8px;bottom:62px;max-height:50%;padding:8px 10px}
 .app.profile-open .info{top:52px;bottom:auto;max-height:calc(100% - var(--profile-h,0px) - 130px)}
 .app.profile-open .status{top:52px}
}