.welcome-help{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;padding:0;border:1px solid #cbdcd2;border-radius:50%;background:#fff;color:#16685e;font:700 15px/1 system-ui;cursor:pointer;}
.welcome-help:hover{background:#eaf3e9;}
body.welcome-open{overflow:hidden;}
/* Every step renders in the same box so Back/Next never move between steps. */
.welcome-tour[open]{display:flex;}
.welcome-tour{width:min(740px,calc(100vw - 32px));height:min(690px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:0;flex-direction:column;overflow:hidden;overscroll-behavior:contain;border:1px solid #d9e5dc;border-radius:20px;background:#fbfcf8;color:#17343a;box-shadow:0 24px 90px #092c3440;font-family:'DM Sans',system-ui,sans-serif;}
.welcome-tour::backdrop{background:#102d35a6;backdrop-filter:blur(4px);}
.welcome-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;font-size:10px;letter-spacing:1.7px;font-weight:700;color:#16685e;}
.welcome-top button{border:0;background:transparent;width:30px;height:30px;border-radius:50%;font:26px/1 system-ui;color:#526b6d;}
.welcome-art{--scene-height:clamp(180px,30dvh,260px);flex:0 0 auto;position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:12px 12px 28px;background:linear-gradient(135deg,#e2ebe4,#f4f7f0);border-block:1px solid #dce5df;}
/* The frame has the screenshots' 1200x480 shape so overlay percentages land on the picture itself. */
.welcome-image-frame{display:block;position:relative;width:min(100%,calc(var(--scene-height) * 2.5));aspect-ratio:2.5;margin:0 auto;}
.welcome-art img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;}
/* The introduction has no picture, so it keeps its natural, shorter height. */
.welcome-tour[data-intro="true"]{height:fit-content;}
.welcome-tour[data-intro="true"] .welcome-copy{padding-top:28px;padding-bottom:18px;flex:0 0 auto;}
.welcome-tour[data-intro="true"] #welcome-description{white-space:pre-line;line-height:1.9;}
.welcome-image-caption{position:absolute;bottom:7px;right:9px;padding:3px 6px;border-radius:4px;background:#fffffff0;color:#526b6d;font-size:9px;}
.welcome-copy{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 26px 8px;}
.welcome-step{margin:0 0 8px;color:#16685e;font-size:10px;font-weight:700;letter-spacing:1.2px;}
.welcome-copy h2{font:800 clamp(21px,3vw,27px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:-.7px;margin:0 0 10px;}
.welcome-copy h2:focus{outline:none;}
.welcome-copy #welcome-description{font-size:14px;line-height:1.65;margin:0;color:#526b6d;}
.welcome-navigation{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 26px 18px;}
.welcome-primary,.welcome-secondary{min-height:40px;padding:9px 16px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;}
.welcome-primary{border:1px solid #17343a;background:#17343a;color:#daef8f;}
.welcome-secondary{border:1px solid #d3dfd5;background:transparent;color:#17343a;}
.welcome-dots{display:flex;gap:2px;}
.welcome-dots button{display:grid;place-items:center;width:26px;height:32px;padding:0;border:0;background:transparent;}
.welcome-dots button::after{content:'';width:7px;height:7px;border-radius:10px;background:#c3d1c7;transition:width .2s;}
.welcome-dots button[aria-current]::after{width:19px;background:#16685e;}
.welcome-bottom{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:12px 26px;border-top:1px solid #dce5df;font-size:11px;color:#6a7e80;}
.welcome-bottom label{display:flex;align-items:center;gap:8px;min-height:26px;color:#17343a;cursor:pointer;}
.welcome-bottom input{accent-color:#16685e;width:16px;height:16px;margin:0;}
.welcome-motion{position:absolute;inset:0;pointer-events:none;}
.welcome-pointer{position:absolute;left:55%;top:55%;width:20px;height:27px;background:#17343a;clip-path:polygon(0 0,0 90%,27% 68%,45% 100%,63% 91%,45% 62%,78% 62%);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(1px 3px 3px #0005);animation:welcome-point 3s ease-in-out infinite;}
.welcome-highlight{position:absolute;left:3%;top:10%;width:94%;height:80%;border:2px solid #d3ef8b;border-radius:8px;box-shadow:0 0 0 100vmax #12363820;animation:welcome-glow 3s ease-in-out infinite;}
.welcome-demo-label{position:absolute;left:8%;top:6%;padding:7px 11px;border-radius:20px;background:#17343af2;color:#daef8f;font-size:11px;box-shadow:0 3px 12px #17343a25;}
/* Overlay positions are percentages of the 1200x480 help screenshots. */
[data-tip="history"] .welcome-highlight{left:2%;top:54%;width:26%;height:44%;}
[data-tip="history"] .welcome-pointer{left:7%;top:74%;}
[data-tip="history"] .welcome-demo-label{left:31%;top:8%;}
[data-tip="scrubbing"] .welcome-highlight{left:86%;top:8%;width:13%;height:88%;}
[data-tip="scrubbing"] .welcome-pointer{left:90%;top:40%;animation:welcome-scrub 4s ease-in-out infinite;}
[data-tip="scrubbing"] .welcome-demo-label{left:auto;right:16%;top:8%;}
[data-tip="tracks"] .welcome-highlight{left:6%;top:2%;width:18%;height:36%;}
[data-tip="tracks"] .welcome-pointer{left:17%;top:34%;}
[data-tip="tracks"] .welcome-demo-label{left:27%;top:6%;animation:welcome-glow 3s ease-in-out infinite;}
[data-tip="measurements"] .welcome-highlight{left:44%;top:51%;width:21%;height:28%;}
[data-tip="measurements"] .welcome-pointer{left:48%;top:41%;}
[data-tip="measurements"] .welcome-demo-label{left:7%;top:5%;}
[data-tip="forecast"] .welcome-highlight{left:62%;top:46%;width:24%;height:52%;}
[data-tip="forecast"] .welcome-pointer{left:70%;top:61%;}
[data-tip="forecast"] .welcome-demo-label{left:5%;top:6%;}
@keyframes welcome-point{0%,100%{transform:translate(0,0)}45%,65%{transform:translate(4px,8px) scale(.88)}}
@keyframes welcome-scrub{0%,100%{transform:translateY(0)}50%{transform:translateY(90px)}}
@keyframes welcome-glow{0%,100%{opacity:.65}50%{opacity:1}}
@media(min-width:1025px){.topbar .welcome-help{position:absolute;right:25px;top:22px;}}
@media(min-width:1500px){.topbar .welcome-help{right:34px;}}
@media(max-width:1024px){.topbar .welcome-help{width:44px;height:44px;font-size:19px;margin-left:7px;border:0;background:transparent;color:#e5f0ce;}}
@media(max-width:600px){.welcome-tour{width:calc(100vw - 20px);height:min(600px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);border-radius:15px;}.welcome-art{--scene-height:clamp(150px,24dvh,200px);padding:10px 8px 28px;}.welcome-top{padding:8px 15px;}.welcome-copy{padding:16px 18px 6px;}.welcome-copy #welcome-description{font-size:13px;}.welcome-navigation{padding:10px 14px 15px;gap:4px;}.welcome-dots{gap:0;}.welcome-dots button{width:20px;}.welcome-primary,.welcome-secondary{font-size:12px;}.welcome-tour[data-intro="true"] .welcome-navigation{flex-wrap:wrap;}.welcome-tour[data-intro="true"] #welcome-next{margin-left:auto;}.welcome-primary,.welcome-secondary{padding:9px 11px;}.welcome-bottom{padding:10px 18px;}.welcome-image-caption{font-size:8px;}.welcome-demo-label{font-size:9px;padding:5px 8px;}}
@media(prefers-reduced-motion:reduce){.welcome-tour *, .welcome-tour *::after{animation:none!important;transition:none!important;}}
/* Enhanced view notice: the welcome tour's look, as a short single-step panel. */
.enhance-warning{width:min(520px,calc(100vw - 32px));}
.enhance-warning .welcome-copy{min-height:0;}
.enhance-warning .welcome-navigation{justify-content:flex-end;}
.enhance-warning .welcome-bottom a{color:#16685e;}