#banner {
				position: relative;
				overflow: hidden;
				background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.48) 100%);
			}

			#banner .inner {
				position: relative;
				z-index: 2;
			}

			#banner .logo,
			#banner h2,
			#banner p {
				position: relative;
				z-index: 2;
			}

			.weather-grid {
				display: grid;
				grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
				gap: 1.2rem;
				align-items: start;
			}

			.weather-panel,
			.nav-card {
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.10);
				border-radius: 18px;
				padding: 1.1rem;
			}

			.small-label {
				font-size: .82rem;
				letter-spacing: .10em;
				text-transform: uppercase;
				opacity: .8;
				margin-bottom: .35rem;
			}

			.big-value {
				font-size: clamp(2rem, 4vw, 3.6rem);
				line-height: 1;
				margin: 0;
			}

			.sub-value {
				margin-top: .35rem;
				opacity: .85;
			}

			.kpi-grid {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: .8rem;
				margin-top: 1rem;
			}

			.kpi {
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.08);
				border-radius: 16px;
				padding: .9rem 1rem;
				min-width: 0;
			}

			.kpi .label {
				display: block;
				font-size: .78rem;
				letter-spacing: .04em;
				text-transform: uppercase;
				opacity: .75;
				margin-bottom: .2rem;
			}

			.kpi .value {
				display: block;
				font-size: 1.15rem;
				font-weight: 700;
				word-break: break-word;
			}

			.mini-note,
			.helper-text,
			.panel-note,
			.embed-note,
			.footer-note {
				opacity: .8;
				font-size: .94rem;
			}

			.mode-switch {
				display: flex;
				flex-wrap: wrap;
				gap: .7rem;
				margin-top: 1rem;
			}

			.mode-switch button,
			.gyro-btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-height: 2.95rem;
				padding: 0 1rem;
				border-radius: 999px;
				border: 1px solid rgba(255,255,255,.18);
				background: rgba(255,255,255,.08);
				color: inherit;
				cursor: pointer;
				transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
			}

			.mode-switch button:hover,
			.gyro-btn:hover {
				transform: translateY(-1px);
				background: rgba(255,255,255,.14);
			}

			.mode-switch button.active {
				background: rgba(124,196,255,.18);
				border-color: rgba(124,196,255,.35);
			}

			.nav-card {
				position: relative;
				overflow: hidden;
			}

			.nav-topline {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				gap: .85rem;
				margin-bottom: 1rem;
				flex-wrap: wrap;
			}

			.nav-topline .hint {
				opacity: .75;
				font-size: .88rem;
				text-align: right;
				max-width: 30ch;
				line-height: 1.25;
			}

			.nav-shell {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 1rem;
				min-width: 0;
			}

			.compass-stage {
				display: grid;
				place-items: center;
				padding: .25rem 0 .15rem;
			}

			.compass-wrap {
				--compass-rotate: 0deg;
				--needle-rotate: 0deg;
				position: relative;
				width: min(100%, clamp(220px, 26vw, 300px));
				aspect-ratio: 1 / 1;
				display: grid;
				place-items: center;
				border-radius: 50%;
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.16);
				box-shadow: inset 0 0 0 12px rgba(255,255,255,.03);
				cursor: grab;
				user-select: none;
				touch-action: none;
				margin-inline: auto;
				overflow: hidden;
			}

			.compass-wrap:active {
				cursor: grabbing;
			}

			.compass-glow {
				position: absolute;
				inset: 18px;
				border-radius: 50%;
				background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 65%);
			}

			.compass {
				position: relative;
				width: 72%;
				height: 72%;
				border-radius: 50%;
				border: 2px solid rgba(255,255,255,.84);
				background:
					radial-gradient(circle at center, rgba(255,255,255,.14) 0 16px, transparent 17px),
					conic-gradient(from 0deg, rgba(255,255,255,.12), rgba(255,255,255,.03), rgba(255,255,255,.12));
				transform: rotate(var(--compass-rotate));
				transition: transform .6s cubic-bezier(.2,.8,.2,1);
			}

			.compass::before {
				content: "";
				position: absolute;
				inset: 14px;
				border-radius: 50%;
				border: 1px dashed rgba(255,255,255,.36);
			}

			.compass::after {
				content: "";
				position: absolute;
				inset: 30%;
				border-radius: 50%;
				border: 1px solid rgba(255,255,255,.12);
			}

			.compass .cardinal {
				position: absolute;
				inset: 0;
				font-size: .82rem;
				font-weight: 700;
			}

			.compass .cardinal span {
				position: absolute;
				transform: translate(-50%, -50%);
				text-shadow: 0 1px 10px rgba(0,0,0,.28);
			}

			.cardinal .n { left: 50%; top: 10px; }
			.cardinal .e { left: 90%; top: 50%; }
			.cardinal .s { left: 50%; top: 90%; }
			.cardinal .o { left: 10%; top: 50%; }

			.needle {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 0;
				height: 0;
				transform-origin: center center;
				transform: translate(-50%, -50%) rotate(var(--needle-rotate));
				transition: transform .75s cubic-bezier(.2,.8,.2,1);
			}

			.needle::before {
				content: "";
				position: absolute;
				left: -4px;
				top: -60px;
				width: 8px;
				height: 122px;
				border-radius: 999px;
				background: linear-gradient(180deg, #fff 0%, #ffdf85 50%, #ff7b54 100%);
			}

			.needle::after {
				content: "";
				position: absolute;
				left: -15px;
				top: -64px;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 28px solid #ff4d4d;
			}

			.needle-tail {
				position: absolute;
				left: -12px;
				top: 28px;
				width: 24px;
				height: 14px;
				border-radius: 999px;
				background: rgba(255,255,255,.92);
			}

			.compass-center {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				transform: translate(-50%, -50%);
				background: #fff;
				box-shadow: 0 0 0 6px rgba(255,255,255,.20);
			}

			.nav-meta {
				display: grid;
				gap: .72rem;
				min-width: 0;
			}

			.nav-quick {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: .65rem;
			}

			.quick-chip {
				padding: .76rem .82rem;
				border-radius: 16px;
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.08);
				min-width: 0;
			}

			.quick-chip .label {
				display: block;
				font-size: .74rem;
				letter-spacing: .04em;
				text-transform: uppercase;
				opacity: .75;
				margin-bottom: .18rem;
			}

			.quick-chip .value {
				display: block;
				font-size: .98rem;
				font-weight: 700;
				line-height: 1.2;
				word-break: break-word;
			}

			.status-box {
				padding: 1rem 1.05rem;
				border-radius: 18px;
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.08);
				overflow: hidden;
				min-width: 0;
			}

			.line {
				display: grid;
				grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
				gap: .75rem;
				align-items: start;
				margin: .18rem 0;
				font-size: .92rem;
				line-height: 1.28;
				min-width: 0;
			}

			.line span,
			.line strong {
				min-width: 0;
				word-break: break-word;
			}

			.line strong {
				text-align: right;
				overflow-wrap: anywhere;
			}

			.status-pill {
				display: inline-flex;
				align-items: center;
				gap: .45rem;
				padding: .40rem .78rem;
				border-radius: 999px;
				font-weight: 700;
				font-size: .92rem;
				margin-top: .6rem;
				max-width: 100%;
			}

			.status-good { background: rgba(89,226,139,.18); color: #8ff5b2; border: 1px solid rgba(89,226,139,.28); }
			.status-warn { background: rgba(255,209,102,.18); color: #ffe08d; border: 1px solid rgba(255,209,102,.28); }
			.status-bad { background: rgba(255,107,107,.18); color: #ffb1b1; border: 1px solid rgba(255,107,107,.28); }

			.nav-action {
				display: grid;
				gap: .55rem;
			}

			.gyro-btn {
				width: 100%;
				min-height: 3rem;
				padding-inline: 1rem;
				text-align: center;
				white-space: normal;
				line-height: 1.15;
			}

			.forecast-strip {
				display: grid;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: .75rem;
				margin-top: 1rem;
			}

			.forecast-item {
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.08);
				border-radius: 16px;
				padding: .82rem .7rem;
				text-align: center;
				min-width: 0;
			}

			.forecast-item .time {
				opacity: .75;
				font-size: .82rem;
				margin-bottom: .35rem;
			}

			.forecast-item .temp {
				font-size: 1.08rem;
				font-weight: 700;
				margin: .2rem 0;
			}

			.forecast-item .wind {
				opacity: .8;
				font-size: .85rem;
			}

			.chart-box {
				background: rgba(255,255,255,.04);
				border: 1px solid rgba(255,255,255,.08);
				border-radius: 18px;
				padding: .95rem;
				margin-top: 1rem;
			}

			.chart-legend {
				display: flex;
				justify-content: space-between;
				gap: .75rem;
				margin-top: .55rem;
				font-size: .86rem;
				opacity: .8;
			}

	

			@media (max-width: 1100px) {
				.weather-grid {
					grid-template-columns: 1fr;
				}

				.nav-card {
					padding: 1rem;
				}

				.compass-wrap {
					width: min(100%, clamp(200px, 34vw, 260px));
				}

				.nav-topline .hint {
					max-width: none;
					text-align: left;
				}

				.windfinder-frame {
					height: clamp(500px, 66vh, 620px);
				}

				.windfinder-frame iframe {
					min-height: 500px !important;
				}
			}

			@media (max-width: 736px) {
				.compass-wrap {
					width: min(100%, clamp(180px, 58vw, 220px));
				}

				.forecast-strip {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}

				.kpi-grid {
					grid-template-columns: 1fr 1fr;
				}

				.nav-quick {
					grid-template-columns: 1fr 1fr;
				}

				.windfinder-frame {
					height: clamp(460px, 62vh, 520px);
				}

				.windfinder-frame iframe {
					min-height: 460px !important;
				}

				.line {
					font-size: .86rem;
				}

				#banner {
					min-height: clamp(24rem, 58vh, 34rem);
				}
			}

			@media (max-width: 480px) {
				.kpi-grid,
				.forecast-strip,
				.nav-quick {
					grid-template-columns: 1fr;
				}

				.chart-legend {
					font-size: .8rem;
				}

				.compass-wrap {
					width: min(82vw, 190px);
				}

				.big-value {
					font-size: clamp(1.9rem, 14vw, 3rem);
				}

				#banner {
					min-height: 22rem;
				}
			}
			#windfinder-widget {
  width: 100%;
  min-height: 650px; 
}
.embed-card.windfinder-card {
  width: 100%;
    display: flex;
  flex-direction: column;
}

.windfinder-frame {
  width: 100%;
  display: block;
}

.windfinder-frame iframe,
.windfinder-frame > div {
  width: 100% !important;
}

/* Responsive fixes - Meteo Live */
*,*::before,*::after{box-sizing:border-box}
html,body,#page-wrapper{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,iframe,embed,object{max-width:100%}
img{height:auto}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.weather-grid,.kpi-grid,.forecast-strip,.nav-quick,.nav-meta,.nav-shell,.weather-panel,.nav-card,.status-box,.chart-box,.embed-card,.windfinder-frame{min-width:0}
.weather-panel,.nav-card,.chart-box,.status-box,.quick-chip,.forecast-item,.kpi{overflow-wrap:anywhere}
#banner .inner,#wrapper>.wrapper>.inner,#footer .inner{width:min(100%,1180px)}
#banner .logo .image img{display:block;width:100%;height:100%;object-fit:cover}
.mode-switch button,.gyro-btn{min-width:0;touch-action:manipulation}
#windChart{display:block;width:100%;height:auto;min-height:170px}.chart-box{overflow:hidden}
.windfinder-card{min-width:0;overflow:hidden}.windfinder-frame{position:relative;overflow:hidden;border-radius:14px}
.windfinder-frame iframe,.windfinder-frame>div,.windfinder-frame table{max-width:100%!important}
@media(max-width:1100px){.weather-grid{grid-template-columns:1fr}.weather-panel,.nav-card{width:100%}}
@media(max-width:736px){#wrapper>.wrapper>.inner{padding-left:1rem;padding-right:1rem}.weather-panel,.nav-card,.chart-box,.status-box{border-radius:16px;padding:.95rem}.weather-grid{gap:1rem}.kpi-grid,.forecast-strip,.nav-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.kpi,.forecast-item,.quick-chip{padding:.75rem}.kpi .value,.quick-chip .value{font-size:1rem;line-height:1.25}.mode-switch{gap:.55rem}.mode-switch button{flex:1 1 calc(50% - .55rem);min-height:2.8rem;padding:0 .8rem;white-space:normal;line-height:1.15;text-align:center}.nav-topline{gap:.55rem}.nav-topline .hint{width:100%;text-align:left}.compass-stage{padding:.35rem 0}.compass-wrap{width:min(74vw,230px)}.line{grid-template-columns:1fr;gap:.12rem}.line strong{text-align:left}.status-pill{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.2}.chart-legend{font-size:.78rem}.windfinder-frame{height:auto;min-height:460px}}
@media(max-width:480px){#banner{min-height:20rem}#banner .inner{padding-left:1rem;padding-right:1rem}#banner h2,.major{word-break:normal;overflow-wrap:anywhere}.weather-panel,.nav-card,.chart-box,.status-box{padding:.85rem;border-radius:14px}.big-value{font-size:clamp(2rem,17vw,3rem)}.kpi-grid,.forecast-strip,.nav-quick{grid-template-columns:1fr}.mode-switch{flex-direction:column}.mode-switch button,.gyro-btn{width:100%;min-height:2.9rem;padding:0 .9rem}.compass-wrap{width:min(78vw,205px)}.compass .cardinal{font-size:.76rem}.needle::before{top:-52px;height:106px}.needle::after{top:-56px}#windChart{min-height:145px}.chart-legend{flex-direction:column;gap:.2rem}.windfinder-frame,.windfinder-frame iframe{min-height:430px!important}#windfinder-widget{min-height:0}}
@media(max-width:360px){#wrapper>.wrapper>.inner{padding-left:.8rem;padding-right:.8rem}.weather-panel,.nav-card,.chart-box,.status-box{padding:.75rem}.small-label,.kpi .label,.quick-chip .label{font-size:.7rem;letter-spacing:.07em}.compass-wrap{width:min(76vw,185px)}}
@media(orientation:landscape) and (max-height:520px) and (max-width:940px){#banner{min-height:18rem}.compass-wrap{width:min(42vw,190px)}}