.wind-panel{max-width:980px;margin:68px auto 0;padding:0 2px}.wind-layout{align-items:center;background:linear-gradient(135deg,rgba(30,22,59,.92),rgba(13,18,38,.92));border:1px solid rgba(85,216,255,.18);border-radius:24px;display:flex;gap:clamp(28px,6vw,90px);padding:24px 30px;box-shadow:0 28px 80px -55px rgba(85,216,255,.8)}.compass{background:radial-gradient(circle,#2a2351 0,#161532 58%,#0e1025 60%);border:1px solid rgba(142,248,236,.24);border-radius:50%;height:190px;position:relative;flex:0 0 190px}.compass:before,.compass:after{background:rgba(142,248,236,.12);content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px}.compass:after{bottom:auto;height:1px;left:10px;right:10px;top:50%;width:auto}.compass-ring{border:1px dashed rgba(255,134,189,.42);border-radius:50%;inset:28px;position:absolute}.compass span{color:#b79ca5;font:500 10px 'DM Mono',monospace;position:absolute}.compass .north{left:50%;top:12px;transform:translateX(-50%);color:#ff86bd}.compass .east{right:13px;top:50%;transform:translateY(-50%)}.compass .south{bottom:12px;left:50%;transform:translateX(-50%)}.compass .west{left:13px;top:50%;transform:translateY(-50%)}.compass-arrow{background:linear-gradient(180deg,#ff86bd 0 50%,#55d8ff 50%);clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);height:72px;left:calc(50% - 5px);position:absolute;top:24px;transform-origin:5px 71px;width:10px;transition:transform .8s ease}.compass-center{align-items:center;background:#8ef8ec;border:4px solid #1b183c;border-radius:50%;color:#0f1530;display:flex;font-size:16px;height:28px;justify-content:center;left:calc(50% - 14px);position:absolute;top:calc(50% - 14px);width:28px}.wind-copy{min-width:0}.wind-copy strong{color:#fff6ed;display:block;font-size:54px;letter-spacing:-.08em;line-height:1;margin:10px 0}.wind-copy>span{color:#b79ca5;font:11px 'DM Mono',monospace}.wind-legend{border-top:1px solid rgba(255,221,207,.14);display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;padding-top:14px}.wind-legend span{color:#b79ca5;font:10px 'DM Mono',monospace}.wind-legend b{color:#8ef8ec}.wind-panel .section-head{margin-bottom:15px}@media(max-width:600px){.wind-panel{margin-top:52px}.wind-layout{gap:22px;padding:20px}.compass{height:150px;flex-basis:150px}.compass-arrow{height:57px;top:22px;transform-origin:5px 56px}.wind-copy strong{font-size:40px}.wind-legend{display:block}.wind-legend span{display:block;margin-top:7px}}
