:root{color-scheme:light;--ink:#112f3a;--paper:#f5f3e9;--accent:#d8ff35}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #6743b9;outline-offset:5px}header,footer{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px}.brand{display:flex;align-items:center;font-size:25px;font-weight:800;letter-spacing:-1px;gap:8px}.brand span{margin-left:-8px;font-weight:450}main{max-width:1060px;margin:auto;padding:22px 30px 65px}.intro{max-width:680px;margin-bottom:32px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.16em}h1{font-size:clamp(38px,6vw,66px);line-height:1.02;letter-spacing:-.055em;margin:15px 0}p{font-size:17px;line-height:1.6}.intro>p:last-child{max-width:560px}.tour-layout{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(36px,8vw,105px);align-items:center}figure{margin:0}.phone{position:relative;width:100%;overflow:hidden;border:7px solid var(--ink);border-radius:44px;box-shadow:0 22px 55px #112f3a22;background:var(--paper)}.phone>img{display:block;width:100%;height:auto}.spot{position:absolute;left:50%;top:42.106%;width:88%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid #6743b9;border-radius:50%;box-shadow:0 0 0 6px #d8ff3590;pointer-events:none}figcaption{font-size:11px;text-align:center;margin-top:15px;color:#53666c}.explanation h2{font-size:clamp(30px,4vw,45px);line-height:1.1;letter-spacing:-.035em;margin:20px 0}.explanation #step-description{max-width:470px;min-height:110px}.hint{font-size:15px;font-weight:650;min-height:48px}.progress{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}.progress button{border:1px solid #112f3a35;border-radius:24px;background:transparent;padding:10px 15px;font-size:14px;min-height:44px}.progress button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--accent)}.controls{display:flex;align-items:center;gap:18px;margin:24px 0}.controls button{border:0;background:var(--accent);height:48px;width:58px;border-radius:28px;font-size:24px}.controls button:disabled{opacity:.32;cursor:default}.controls span{font-size:13px}.footnote{font-size:12px;color:#52656a;max-width:450px}footer{border-top:1px solid #112f3a25;justify-content:flex-start;font-size:14px}[data-step=weather] .spot{left:84%;top:42%;width:25%;height:11%;border-radius:25px}[data-step=start] .spot{left:50%;top:80%;width:90%;height:8%;border-radius:30px}[data-step=speed] .spot{left:19.403%;top:28.146%;width:35%;height:auto}[data-step=metrics] .spot{left:80%;top:33%;width:37%;height:26%;border-radius:30px}[data-step=wind] .spot{left:77%;top:17%;width:42%;height:8%;border-radius:22px}[data-step=report] .spot{left:16.915%;top:88.101%;width:18%;height:auto}[data-step=controls] .spot{left:66.542%;top:88.101%;width:52%;height:8.696%;border-radius:999px}@media(max-width:680px){header,footer{padding:20px}header>a:last-child{font-size:14px}main{padding:5px 22px 40px}.intro{margin-bottom:24px}.intro p{font-size:15px}.tour-layout{grid-template-columns:minmax(0,1fr);gap:23px}figure{width:min(66vw,260px);margin:0 auto}.phone{border-width:5px;border-radius:32px}.explanation{max-width:500px;margin:auto}.explanation h2{margin:12px 0}.explanation #step-description,.hint{min-height:0}.progress{gap:7px;margin:16px 0}.progress button{padding:8px 12px}.controls{margin:16px 0}.eyebrow{margin-top:0}.footnote{font-size:11px}footer{flex-wrap:wrap}}@media(prefers-reduced-motion:no-preference){.spot{transition:top .22s,left .22s,width .22s,height .22s,border-radius .22s}}@media(forced-colors:active){.spot{border:4px solid Highlight}.progress button[aria-pressed=true]{border:3px solid Highlight}}
