html {
			scroll-behavior: smooth;
			-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
		}

		a { color: inherit; }
		h1, h2, h3, h4, h5, h6 {
			font-family: "Raleway", Helvetica, sans-serif;
			letter-spacing: .10em;
			text-transform: uppercase;
		}

		#wrapper, #footer{
			position: relative;
			z-index: 1;
		}





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

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

		.section-shell {
			max-width: 1180px;
			margin: 0 auto;
			padding: 0 1rem;
		}

		.hero-card,
		.section-panel,
		.side-card,
		.nav-card,
		.topic-card {
			background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
			border: 1px solid rgba(255,255,255,.10);
			border-radius: var(--radius);
			box-shadow: var(--shadow-glow);
			backdrop-filter: blur(12px);
		}
.board-wall {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 18px;
	padding: 1.1rem;
}

.board-wall::before {
	content: none;
}

		main {
			padding: 2rem 0 4rem;
			display: flex;
			flex-direction: column;
			gap: 2rem;
		}

		.page-wrap {
			max-width: 1280px;
			margin: 0 auto;
			padding: 0 1.25rem;
		}

		.hero-card {
			position: relative;
			overflow: hidden;
			padding: 2.4rem;
		}

		.hero-card::before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background:
				linear-gradient(120deg, rgba(255,255,255,.14), transparent 18%),
				radial-gradient(circle at 86% 18%, rgba(255,255,255,.12) 0 5px, transparent 9px);
		}

		.hero-grid {
			position: relative;
			z-index: 1;
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 2rem;
			align-items: end;
		}

		.logo-shell {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1rem;
		}

		.logo-shell .image {
			width: 72px;
			height: 72px;
			border-radius: 18px;
			overflow: hidden;
			background: rgba(255,255,255,.06);
			border: 1px solid rgba(255,255,255,.18);
			box-shadow: 0 12px 28px rgba(0,0,0,.25);
		}

		.logo-shell img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.badge-live {
			display: inline-flex;
			align-items: center;
			gap: .6rem;
			padding: .46rem .88rem;
			border-radius: 999px;
			background: rgba(255,255,255,.14);
			border: 1px solid rgba(255,255,255,.22);
			backdrop-filter: blur(8px);
			font-size: .84rem;
			margin-bottom: 1rem;
			color: #fff;
		}

		.dot-live {
			width: .55rem;
			height: .55rem;
			border-radius: 50%;
			background: #7cff8e;
			box-shadow: 0 0 0 6px rgba(124,255,142,.16);
			animation: pulse-live 1.8s ease-in-out infinite;
		}

		@keyframes pulse-live {
			0%,100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(124,255,142,.16); }
			50% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(124,255,142,.06); }
		}

		.hero-kicker {
			font-size: .8rem;
			text-transform: uppercase;
			letter-spacing: .16em;
			color: rgba(255,255,255,.68);
			margin-bottom: .45rem;
		}

		.hero-title {
			font-size: clamp(2.2rem, 4.5vw, 3.75rem);
			font-weight: 900;
			line-height: 1;
			color: #fff;
			text-shadow: 0 2px 20px rgba(0,0,0,.28);
			margin-bottom: 1rem;
		}

		.hero-subtitle {
			color: rgba(255,255,255,.85);
			max-width: 48rem;
			line-height: 1.65;
			margin-bottom: 1.2rem;
			font-size: 1rem;
		}

		.hero-tags {
			display: flex;
			flex-wrap: wrap;
			gap: .5rem;
			margin-bottom: 1.2rem;
		}

		.hero-tag {
			padding: .38rem .78rem;
			border-radius: 999px;
			font-size: .82rem;
			background: rgba(255,255,255,.10);
			border: 1px solid rgba(255,255,255,.16);
			color: rgba(255,255,255,.9);
		}

		.btn-row {
			display: flex;
			flex-wrap: wrap;
			gap: .75rem;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			gap: .5rem;
			min-height: 2.75rem;
			padding: 0 1.1rem;
			border-radius: 999px;
			border: 1px solid rgba(255,255,255,.20);
			background: rgba(255,255,255,.12);
			color: #fff;
			font-size: .88rem;
			font-weight: 600;
			cursor: pointer;
			transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
			backdrop-filter: blur(8px);
		}

		.btn:hover {
			transform: translateY(-1px);
			background: rgba(255,255,255,.18);
			box-shadow: 0 8px 24px rgba(0,0,0,.18);
		}

		.btn svg {
			width: 15px;
			height: 15px;
		}

		.hero-stats {
			min-width: 220px;
			padding: 1.25rem;
			border-radius: 20px;
			background: rgba(255,255,255,.055);
			border: 1px solid rgba(255,255,255,.10);
		}

		.stats-label {
			font-size: .72rem;
			text-transform: uppercase;
			letter-spacing: .12em;
			color: rgba(255,255,255,.45);
			margin-bottom: 1rem;
			display: flex;
			align-items: center;
			gap: .5rem;
		}

		.stats-grid-2 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: .6rem;
		}

		.stat-mini {
			padding: .75rem;
			border-radius: 14px;
			background: rgba(255,255,255,.04);
			border: 1px solid rgba(255,255,255,.06);
		}

		.stat-mini .sm-label {
			display: block;
			font-size: .72rem;
			color: rgba(255,255,255,.45);
			margin-bottom: .2rem;
		}

		.stat-mini .sm-value {
			font-size: 1.5rem;
			font-weight: 900;
			color: #fff;
			line-height: 1;
		}

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

		.weather-panel,
		.embed-card,
		.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;
		}

		.board-toolbar {
			display: grid;
			grid-template-columns: 1fr 160px 160px;
			gap: .75rem;
			margin-bottom: 1rem;
		}

		.board-toolbar input,
		.board-toolbar select {
			width: 100%;
			min-height: 2.75rem;
			padding: 0 .9rem;
			border-radius: 14px;
			border: 1px solid rgba(255,255,255,.12);
			background: rgba(255,255,255,.06);
			color: #fff;
			font-size: .88rem;
			outline: none;
		}

		.board-toolbar input::placeholder {
			color: rgba(255,255,255,.38);
		}

		.board-toolbar select option {
			color: #0d1e32;
			background: #fff;
		}


		.wall-inner {
			position: relative;
			z-index: 1;
		}

		.section-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			margin-bottom: 1rem;
			flex-wrap: wrap;
		}

		.section-head h2,
		.section-head h3 {
			display: flex;
			align-items: center;
			gap: .6rem;
			font-size: 1.08rem;
			font-weight: 700;
		}

		.section-head svg {
			width: 17px;
			height: 17px;
			color: var(--accent);
		}

		.pill {
			display: inline-flex;
			align-items: center;
			gap: .45rem;
			padding: .3rem .7rem;
			border-radius: 999px;
			font-size: .78rem;
			background: rgba(255,255,255,.05);
			border: 1px solid rgba(255,255,255,.09);
			color: rgba(255,255,255,.72);
		}

		.pill .dot {
			width: .45rem;
			height: .45rem;
			border-radius: 50%;
			background: var(--good);
		}

		.pill.live {
			background: rgba(104,229,154,.10);
			border-color: rgba(104,229,154,.22);
			color: #8ff5b2;
		}

		.event-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
			max-height: 480px;
			overflow-y: auto;
			padding-right: .2rem;
		}

		.note-card {
			position: relative;
			padding: 1.05rem;
			border-radius: 18px;
			overflow: hidden;
			box-shadow: 0 16px 32px rgba(0,0,0,.22);
			border: 1px solid rgba(0,0,0,.12);
			min-width: 0;
			/* Testo nero per leggibilità */
			color: #111 !important;
		}

		.note-card h4, .note-card p, .note-card .note-title, .note-card .note-desc, .note-card .note-link, .note-card .note-type, .note-card .note-date, .note-card .note-tag {
			color: #111 !important;
		}

		.note-card a.note-link {
			color: #0056b3 !important;
			border-bottom-color: #0056b3;
		}

		.note-card a.note-link:hover {
			color: #003d82 !important;
		}

		.note-card:nth-child(1) { transform: rotate(-1.4deg); }
		.note-card:nth-child(2) { transform: rotate(1.1deg); }
		.note-card:nth-child(3) { transform: rotate(-.6deg); }
		.note-card:nth-child(4) { transform: rotate(.8deg); }
		.note-card:nth-child(5) { transform: rotate(-1.6deg); }
		.note-card:nth-child(6) { transform: rotate(.5deg); }

		.note-tape {
			position: absolute;
			left: 50%;
			top: -8px;
			width: 64px;
			height: 14px;
			transform: translateX(-50%);
			border-radius: 4px;
			background: rgba(255,255,255,.42);
			box-shadow: 0 2px 6px rgba(0,0,0,.08);
		}

		.note-pin {
			position: absolute;
			right: 11px;
			top: 11px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: rgba(0,0,0,.20);
		}

		.note-yellow { background: linear-gradient(180deg, #fff8d6 0%, #f3e39a 100%); color: #111; }
		.note-blue { background: linear-gradient(180deg, #dff3ff 0%, #c0e6fa 100%); color: #111; }
		.note-pink { background: linear-gradient(180deg, #ffe4ef 0%, #f5cede 100%); color: #111; }
		.note-cream { background: linear-gradient(180deg, #fffcf0 0%, #ede6d0 100%); color: #111; }

		.note-top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: .6rem;
			margin-bottom: .5rem;
		}

		.note-type {
			display: inline-flex;
			align-items: center;
			padding: .26rem .58rem;
			border-radius: 999px;
			background: rgba(0,0,0,.07);
			border: 1px solid rgba(0,0,0,.08);
			font-size: .70rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: .07em;
			white-space: nowrap;
			color: #111;
		}

		.note-date {
			font-size: .80rem;
			font-weight: 700;
			text-align: right;
			line-height: 1.22;
			opacity: .75;
			color: #111;
		}

		.note-title {
			font-size: 1rem;
			font-weight: 900;
			line-height: 1.24;
			margin-bottom: .6rem;
			color: #111;
		}

		.note-tags {
			display: flex;
			flex-wrap: wrap;
			gap: .35rem;
			margin-bottom: .6rem;
		}

		.note-tag {
			padding: .24rem .52rem;
			border-radius: 999px;
			font-size: .72rem;
			font-weight: 700;
			background: rgba(0,0,0,.07);
			border: 1px solid rgba(0,0,0,.07);
			color: #111;
		}

		.note-desc {
			font-size: .86rem;
			line-height: 1.52;
			opacity: .82;
			margin-bottom: .6rem;
			color: #111;
		}

		.note-link {
			display: inline-flex;
			font-size: .82rem;
			font-weight: 800;
			border-bottom: 1px solid rgba(0,0,0,.30);
			text-decoration: none;
			opacity: .85;
			transition: opacity .18s;
			color: #0056b3;
		}

		.note-link:hover { opacity: 1; color: #003d82; }

		.bottom-grid {
			display: grid;
			grid-template-columns: 1fr 320px;
			gap: 1.25rem;
		}

		.side-stack {
			display: flex;
			flex-direction: column;
			gap: .85rem;
		}

		.side-card {
			border-radius: 18px;
			padding: 1rem;
			background: rgba(255,255,255,.055);
			border: 1px solid rgba(255,255,255,.10);
		}

		.news-list {
			border-radius: 14px;
			overflow: hidden;
			background: rgba(255,255,255,.03);
			border: 1px solid rgba(255,255,255,.06);
		}

		.news-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: .75rem;
			padding: .75rem 1rem;
			border-bottom: 1px solid rgba(255,255,255,.06);
		}

		.news-item:last-child {
			border-bottom: 0;
		}

		.news-title {
			font-size: .88rem;
			color: rgba(255,255,255,.88);
			line-height: 1.3;
		}

		.news-meta {
			display: flex;
			align-items: center;
			gap: .5rem;
			flex-shrink: 0;
		}

		.news-badge {
			padding: .2rem .5rem;
			border-radius: 999px;
			font-size: .70rem;
			background: rgba(255,255,255,.06);
			border: 1px solid rgba(255,255,255,.09);
			color: rgba(255,255,255,.55);
			white-space: nowrap;
		}

		.news-date {
			font-size: .70rem;
			color: rgba(255,255,255,.38);
			white-space: nowrap;
		}

		.source-item {
			padding: .7rem .9rem;
			border-bottom: 1px solid rgba(255,255,255,.06);
		}

		.source-item:last-child {
			border-bottom: 0;
		}

		.source-name {
			font-size: .88rem;
			font-weight: 600;
			color: rgba(255,255,255,.88);
			margin-bottom: .3rem;
		}

		.source-sub {
			display: flex;
			align-items: center;
			gap: .5rem;
		}

		.legend-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: .55rem;
		}

		.legend-item {
			padding: .65rem .75rem;
			border-radius: 12px;
			background: rgba(255,255,255,.04);
			border: 1px solid rgba(255,255,255,.06);
		}

		.legend-label {
			font-size: .72rem;
			color: rgba(255,255,255,.42);
			margin-bottom: .2rem;
		}

		.legend-value {
			font-size: .88rem;
			font-weight: 700;
			color: rgba(255,255,255,.88);
		}

		.theory-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1.25rem;
			align-items: start;
		}

		.theory-grid .section-panel {
			padding: 1.25rem;
		}

		.rose-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
		}

		.rose-ring {
			position: relative;
			width: min(100%, 320px);
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background: radial-gradient(circle at center, rgba(124,196,255,.10) 0%, rgba(255,255,255,.04) 44%, rgba(0,0,0,.12) 100%);
			border: 1px solid rgba(124,196,255,.18);
			box-shadow: inset 0 0 0 12px rgba(255,255,255,.02), 0 20px 60px rgba(0,0,0,.30);
		}

		.rose-ring-inner {
			position: absolute;
			inset: 15px;
			border-radius: 50%;
			border: 1px dashed rgba(255,255,255,.18);
		}

		.rose-ring-inner2 {
			position: absolute;
			inset: 30%;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255,.07);
		}

		.rose-needle {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 0;
			height: 0;
			transform-origin: center center;
			filter: drop-shadow(0 6px 12px rgba(0,0,0,.32));
			z-index: 2;
			transition: transform .35s ease;
		}

		.rose-needle-n {
			position: absolute;
			left: -4px;
			top: -68px;
			width: 8px;
			height: 68px;
			background: linear-gradient(180deg, #ff4d4d 0%, #ff8888 100%);
			border-radius: 999px 999px 0 0;
		}

		.rose-needle-s {
			position: absolute;
			left: -4px;
			top: 0;
			width: 8px;
			height: 68px;
			background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.70) 100%);
			border-radius: 0 0 999px 999px;
		}

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

		.rose-btn {
			position: absolute;
			width: 2.3rem;
			height: 2.3rem;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255,.12);
			background: rgba(255,255,255,.06);
			color: rgba(255,255,255,.86);
			font-size: .74rem;
			font-weight: 700;
			cursor: pointer;
			display: grid;
			place-items: center;
			z-index: 3;
			transition: all .18s ease;
		}

		.rose-btn:hover {
			background: rgba(124,196,255,.16);
			border-color: rgba(124,196,255,.30);
			transform: scale(1.06);
		}

		.rose-btn.active {
			background: rgba(124,196,255,.24);
			border-color: rgba(124,196,255,.45);
			box-shadow: 0 0 0 5px rgba(124,196,255,.10);
			color: #fff;
		}

		.rose-btn.n { left: 50%; top: 4px; transform: translateX(-50%); }
		.rose-btn.ne { right: 14%; top: 14%; }
		.rose-btn.e { right: 4px; top: 50%; transform: translateY(-50%); }
		.rose-btn.se { right: 14%; bottom: 14%; }
		.rose-btn.s { left: 50%; bottom: 4px; transform: translateX(-50%); }
		.rose-btn.sw { left: 14%; bottom: 14%; }
		.rose-btn.w { left: 4px; top: 50%; transform: translateY(-50%); }
		.rose-btn.nw { left: 14%; top: 14%; }

		.rose-info {
			width: min(100%, 320px);
			border-radius: 16px;
			padding: .9rem 1rem;
			background: rgba(255,255,255,.055);
			border: 1px solid rgba(255,255,255,.10);
		}

		.rose-info .ri-label {
			font-size: .72rem;
			text-transform: uppercase;
			letter-spacing: .10em;
			color: rgba(255,255,255,.42);
			margin-bottom: .3rem;
		}

		.rose-info .ri-name {
			font-size: 1.15rem;
			font-weight: 800;
			color: #fff;
			margin-bottom: .25rem;
		}

		.rose-info .ri-note {
			font-size: .85rem;
			color: rgba(255,255,255,.65);
			line-height: 1.5;
		}

		.sim-stage {
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			aspect-ratio: 1 / 1;
			max-height: 440px;
			background: linear-gradient(145deg, #111827 0%, #162033 52%, #0b111b 100%);
			border: 1px solid rgba(255,255,255,.09);
		}

		.sim-stage svg {
			display: block;
			width: 100%;
			height: 100%;
		}

		.sim-mode-badge {
			position: absolute;
			bottom: 12px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			gap: .5rem;
			padding: .4rem .9rem;
			border-radius: 999px;
			background: rgba(4,18,36,.85);
			backdrop-filter: blur(8px);
			font-size: .78rem;
			font-weight: 700;
			transition: all .4s ease;
		}

		.sim-mode-dot {
			width: .55rem;
			height: .55rem;
			border-radius: 50%;
		}

		.sim-hud {
			position: absolute;
			background: rgba(4,18,36,.75);
			backdrop-filter: blur(8px);
			border-radius: 10px;
			padding: .4rem .7rem;
			font-size: .74rem;
			font-family: monospace;
		}

		.sim-hud.top-left {
			top: 10px;
			left: 10px;
			border: 1px solid rgba(124,196,255,.18);
			color: rgba(124,196,255,.90);
		}

		.sim-hud.top-right {
			top: 10px;
			right: 10px;
			border: 1px solid rgba(255,255,255,.10);
			color: rgba(255,255,255,.75);
		}

		.sim-info-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			flex-wrap: wrap;
			border-radius: 14px;
			padding: .8rem 1rem;
			margin-top: .75rem;
			transition: all .4s ease;
		}

		.sim-info-item .ib-label {
			font-size: .70rem;
			text-transform: uppercase;
			letter-spacing: .10em;
			opacity: .55;
			margin-bottom: .18rem;
		}

		.sim-info-item .ib-value {
			font-size: .9rem;
			font-weight: 700;
		}

		.sim-controls {
			border-radius: 18px;
			padding: 1rem;
			background: rgba(255,255,255,.055);
			border: 1px solid rgba(255,255,255,.10);
			display: flex;
			flex-direction: column;
			gap: .9rem;
			margin-top: .75rem;
		}

		.ctrl-label-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: .3rem;
		}

		.ctrl-label {
			font-size: .75rem;
			text-transform: uppercase;
			letter-spacing: .10em;
			color: rgba(255,255,255,.50);
		}

		.ctrl-value {
			font-size: .75rem;
			font-weight: 700;
			color: var(--accent);
		}

		.ctrl-value.green {
			color: var(--good);
		}

		input[type="range"] {
			width: 100%;
			appearance: none;
			height: 4px;
			border-radius: 999px;
			background: rgba(255,255,255,.10);
			outline: none;
			cursor: pointer;
		}

		input[type="range"]::-webkit-slider-thumb {
			appearance: none;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: var(--accent);
			box-shadow: 0 0 0 4px rgba(124,196,255,.18);
			cursor: pointer;
			transition: transform .15s ease;
		}

		input[type="range"]::-webkit-slider-thumb:hover {
			transform: scale(1.15);
		}

		.dir-grid {
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			gap: .45rem;
		}

		.dir-btn {
			height: 2.25rem;
			border-radius: 10px;
			font-size: .75rem;
			font-weight: 600;
			border: 1px solid rgba(255,255,255,.10);
			background: rgba(255,255,255,.05);
			color: rgba(255,255,255,.70);
			cursor: pointer;
			transition: all .18s ease;
		}

		.dir-btn:hover {
			background: rgba(124,196,255,.12);
			border-color: rgba(124,196,255,.26);
			color: #fff;
		}

		.dir-btn.active {
			background: rgba(124,196,255,.22);
			border-color: rgba(124,196,255,.42);
			color: #fff;
			transform: scale(1.04);
		}

		.andature-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: .6rem;
			margin-top: .75rem;
		}

		.andatura-item {
			border-radius: 12px;
			padding: .65rem .75rem;
			display: flex;
			align-items: flex-start;
			gap: .55rem;
		}

		.andatura-dot {
			width: .55rem;
			height: .55rem;
			border-radius: 50%;
			margin-top: .18rem;
			flex-shrink: 0;
		}

		.andatura-name {
			font-size: .8rem;
			font-weight: 700;
			color: rgba(255,255,255,.90);
		}

		.andatura-range {
			font-size: .68rem;
			color: rgba(255,255,255,.42);
			display: block;
		}

		.tips-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: .75rem;
			margin-top: .75rem;
		}

		.tip-card {
			border-radius: 16px;
			padding: .9rem;
			background: rgba(255,255,255,.055);
			border: 1px solid rgba(255,255,255,.10);
		}

		.tip-card h4 {
			font-size: .92rem;
			font-weight: 700;
			margin-bottom: .4rem;
			color: #fff;
		}

		.tip-card p {
			font-size: .84rem;
			color: rgba(255,255,255,.62);
			line-height: 1.52;
		}

		.physics-panel {
			margin-top: 1.5rem;
			border-radius: var(--radius);
			background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 100%);
			border: 1px solid rgba(255,255,255,.10);
			padding: 1.2rem;
		}

		.physics-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;
			margin-bottom: 1rem;
		}

		.physics-stat {
			background: rgba(0,0,0,.3);
			border-radius: 18px;
			padding: .8rem;
			text-align: center;
		}

		.physics-stat .stat-label {
			font-size: .7rem;
			text-transform: uppercase;
			letter-spacing: .1em;
			color: var(--accent);
		}

		.physics-stat .stat-value {
			font-size: 1.8rem;
			font-weight: 800;
			color: white;
			line-height: 1.2;
		}

		.physics-stat .stat-unit {
			font-size: .8rem;
			font-weight: normal;
			color: rgba(255,255,255,.5);
		}

		.physics-note {
			font-size: .85rem;
			line-height: 1.5;
			color: rgba(255,255,255,.7);
			border-top: 1px solid rgba(255,255,255,.1);
			padding-top: .8rem;
			margin-top: .4rem;
		}

		.physics-note strong { color: var(--good); }

		.physics-example {
			margin-top: .65rem;
			padding: .8rem .9rem;
			border-radius: 14px;
			background: rgba(124,196,255,.08);
			border: 1px solid rgba(124,196,255,.18);
			color: rgba(255,255,255,.92);
			font-size: .88rem;
			line-height: 1.5;
		}

		.physics-example strong { color: #fff; }

		.physics-diagram {
			margin-top: 1rem;
			border-radius: 18px;
			padding: 1rem;
			background: rgba(255,255,255,.03);
			border: 1px solid rgba(255,255,255,.06);
		}

		.physics-diagram svg,
		.physics-diagram img {
			width: 100%;
			height: auto;
			display: block;
		}

		.physics-diagram img {
			max-width: 100%;
			border-radius: 12px;
		}

		.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;
		}

		.quick-note {
			display: flex;
			gap: 1rem;
			align-items: flex-start;
		}

		.quick-note .qn-icon {
			width: 52px;
			height: 52px;
			border-radius: 16px;
			display: grid;
			place-items: center;
			background: rgba(124,196,255,.14);
			border: 1px solid rgba(124,196,255,.24);
			flex-shrink: 0;
		}

		.quick-note .qn-title {
			margin: 0 0 .25rem;
		}

		.quick-note .qn-text {
			margin: 0;
			color: rgba(255,255,255,.76);
			line-height: 1.55;
		}

		.footer-note {
			opacity: .8;
			font-size: .94rem;
		}

		footer {
			border-top: 1px solid rgba(255,255,255,.07);
			background: rgba(4,14,27,.60);
			backdrop-filter: blur(12px);
			padding: 1.5rem 0;
		}

		.footer-inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: .75rem;
		}

		.footer-inner p {
			font-size: .78rem;
			color: rgba(255,255,255,.38);
		}

		@media (max-width: 1100px) {
			.hero-grid { grid-template-columns: 1fr; }
			.hero-stats { display: none; }
			.weather-grid { grid-template-columns: 1fr; }
			.theory-grid { grid-template-columns: 1fr; }
			.bottom-grid { grid-template-columns: 1fr; }
			.nav-card { padding: 1rem; }
			.board-toolbar {
				grid-template-columns: 1fr;
			}
			.event-grid {
				max-height: 420px;
			}
			.nav-topline .hint {
				max-width: none;
				text-align: left;
			}
		}

		@media (max-width: 768px) {
			.event-grid { grid-template-columns: 1fr; }
			.andature-grid { grid-template-columns: repeat(2, 1fr); }
			.tips-grid { grid-template-columns: 1fr 1fr; }
			.dir-grid { grid-template-columns: repeat(4, 1fr); }
			.physics-grid { grid-template-columns: 1fr; gap: .8rem; }
			.news-item {
				align-items: flex-start;
				flex-direction: column;
			}
			.legend-grid { grid-template-columns: 1fr 1fr; }
			#banner { min-height: clamp(24rem, 58vh, 34rem); }
		}

		@media (max-width: 520px) {
			.hero-card { padding: 1rem; }
			.forecast-strip,
			.kpi-grid,
			.legend-grid,
			.tips-grid {
				grid-template-columns: 1fr;
			}
			.andature-grid { grid-template-columns: 1fr 1fr; }
			.compass-wrap { width: min(82vw, 190px); }
			.big-value { font-size: clamp(1.9rem, 14vw, 3rem); }
			#banner { min-height: 22rem; }
		}
	


#banner {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

		#banner::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
		}

		#banner .inner {
			position: relative;
			z-index: 2;
			max-width: 1180px;
			margin: 0 auto;
			padding-top: clamp(5.5rem, 15vh, 8.25rem);
			padding-bottom: clamp(4rem, 12vh, 7rem);
		}

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

		@media (max-width: 736px) {
			#banner {
				min-height: clamp(24rem, 58vh, 34rem);
			}
		}

		@media (max-width: 480px) {
			#banner {
				min-height: 22rem;
			}
		}
/* === Responsive mobile fixes - 2026-04-30 === */
*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

img, svg, video, canvas, iframe {
	max-width: 100%;
}

button, input, select, textarea {
	font: inherit;
}

.flyer-panel {
	margin-bottom: 2rem;
}

.flyer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 420px));
	gap: 1rem;
	align-items: start;
	margin-top: 1rem;
}

.flyer-item {
	width: 100%;
	max-width: 420px;
	min-width: 0;
}

.flyer-image {
	display: block;
	width: 100%;
	height: clamp(320px, 54vw, 560px);
	object-fit: cover;
	border-radius: 14px;
	margin-bottom: 1rem;
}

.refresh-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
}

.refresh-row .btn {
	padding: 0 1rem;
	margin-left: 0;
}

#bacheca-live .inner,
#wrapper .inner,
.weather-panel,
.nav-card,
.board-wall,
.section-panel,
.side-card,
.sim-stage,
.rose-ring,
.physics-diagram,
.event-grid,
.note-card {
	min-width: 0;
}

.mode-switch button,
.gyro-btn,
.dir-btn,
.rose-btn,
.btn,
.board-toolbar input,
.board-toolbar select {
	touch-action: manipulation;
}

@media (max-width: 980px) {
	.flyer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 736px) {
	#wrapper > .wrapper > .inner,
	#footer .inner {
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#wrapper .inner .inner {
		padding-left: 0;
		padding-right: 0;
	}

	#banner .inner {
		padding: 5rem 1.25rem 3.25rem;
	}

	#banner h2 {
		font-size: clamp(1.75rem, 10vw, 2.35rem);
		letter-spacing: .06em;
		line-height: 1.15;
	}

	#banner p {
		font-size: .95rem;
		line-height: 1.55;
	}

	.weather-panel,
	.nav-card,
	.board-wall,
	.section-panel,
	.side-card,
	.physics-panel,
	.sim-controls {
		padding: .9rem;
		border-radius: 16px;
	}

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

	.flyer-item {
		max-width: none;
	}

	.flyer-image {
		height: auto;
		max-height: none;
		object-fit: contain;
		background: rgba(255,255,255,.04);
	}

	.refresh-row {
		align-items: stretch;
	}

	.refresh-row .btn,
	.btn,
	.mode-switch button,
	.board-toolbar input,
	.board-toolbar select {
		width: 100%;
		justify-content: center;
		min-height: 3rem;
	}

	.mode-switch {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .6rem;
	}

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

	.board-toolbar {
		grid-template-columns: 1fr;
		gap: .65rem;
	}

	.event-grid {
		grid-template-columns: 1fr;
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.note-card,
	.note-card:nth-child(n) {
		transform: none;
	}

	.note-top {
		gap: .45rem;
		flex-wrap: wrap;
	}

	.note-date {
		text-align: left;
	}

	.theory-grid {
		gap: 1rem;
	}

	.rose-ring {
		width: min(100%, 280px);
	}

	.rose-btn {
		width: 2.1rem;
		height: 2.1rem;
	}

	.sim-stage {
		aspect-ratio: 1 / 1;
		max-height: none;
	}

	.sim-hud {
		font-size: .68rem;
		padding: .35rem .55rem;
	}

	.sim-mode-badge {
		bottom: 8px;
		font-size: .72rem;
		max-width: calc(100% - 1rem);
		white-space: nowrap;
	}

	.sim-info-bar {
		display: grid;
		grid-template-columns: 1fr;
		gap: .65rem;
		text-align: left;
	}

	.sim-info-item,
	.sim-info-item[style] {
		text-align: left !important;
	}

	.dir-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.andature-grid,
	.tips-grid,
	.legend-grid {
		grid-template-columns: 1fr;
	}

	.physics-stat .stat-value {
		font-size: 1.55rem;
	}

	.footer-inner,
	#footer .copyright {
		text-align: center;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	#wrapper > .wrapper > .inner,
	#footer .inner {
		padding-left: .85rem;
		padding-right: .85rem;
	}

	.weather-panel,
	.nav-card,
	.board-wall,
	.section-panel,
	.side-card,
	.physics-panel,
	.sim-controls {
		padding: .75rem;
	}

	.kpi-grid,
	.mode-switch,
	.dir-grid {
		grid-template-columns: 1fr;
	}

	.big-value {
		font-size: clamp(1.85rem, 18vw, 2.65rem);
	}

	.note-card {
		padding: .9rem;
	}

	.rose-ring {
		width: min(100%, 244px);
	}

	.rose-btn {
		width: 1.95rem;
		height: 1.95rem;
		font-size: .68rem;
	}

	.sim-hud.top-left,
	.sim-hud.top-right {
		top: 8px;
	}

	.sim-hud.top-left {
		left: 8px;
	}

	.sim-hud.top-right {
		right: 8px;
	}
}