/* InstantDj product tour: fixed full-height frame with header, horseshoe rails, stage,
   bottom band and footer. Colors match js/core/palette.js. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Caveat-SemiBold.woff2") format("woff2"); }

:root {
	--bg-0: #03050D;
	--bg-1: #0B0F22;
	--panel: #11162A;
	--grid-minor: rgba(27, 42, 85, 0.2);
	--grid-major: rgba(42, 74, 138, 0.35);
	--gold: #FFB020;
	--gold-hot: #FFD27A;
	--amber-deep: #D76F02;
	--red: #FF3B2F;
	--led-on: #FF2A1F;
	--led-off: #2A0B09;
	--wave-red: #E21818;
	--green: #2EE05A;
	--logo-green: #0CFF00;
	--blue: #64B5FF;
	--blue-white: #BFD3FF;
	--logo-blue: #0079E1;
	--logo-cyan: #02F8FE;
	--spectrum-blue: #007FFF;
	--text: #F3F6FF;
	--text-dim: #B8C7FF;
	--muted: #4A4F6E;
	--rail-future: #6F7898;
	--rail-current: #FFF3D6;
	--chalk: #EDEDE4;

	--font-ui: "Inter", system-ui, "Segoe UI", "Noto Sans", sans-serif;
	--font-hand: "Caveat", system-ui, "Segoe UI", "Noto Sans", cursive, sans-serif;
	--header-h: 56px;
	--band-h: 48px;
	--footer-h: 28px;
	--rail-w: clamp(180px, 15vw, 280px);
	/* Extra distance of header, rails and footer to the left and right window edge (wide layout). */
	--edge: 20px;
	/* Size of the labels, captions and handwritten notes in the 3D scenes: world size and the
	   on-screen minimum (small stages such as phones use the minimum). */
	--caption-scale: 2;
	--caption-min-scale: 1.5;
	--rail-font: clamp(12px, 0.95vw, 16px);
	--subtitle-font: clamp(16px, 1.6vw, 28px);
	--neon-gold: 0 0 2px rgba(255, 176, 32, 0.9), 0 0 8px rgba(255, 176, 32, 0.55), 0 0 24px rgba(255, 176, 32, 0.35);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg-0);
	color: var(--text);
	font-family: var(--font-ui);
	font-weight: 500;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

body { overscroll-behavior: none; }

button, select, a { font: inherit; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Microsoft Store trailer (msstore/index.html): no header with controls, no footer with imprint
   and credits, no download buttons and no buttons to start or start again: its start screen is the
   final picture (logo, word mark and claim), and a click into the stage starts it. */
html[data-variant="msstore"] { --header-h: var(--edge); --footer-h: 0px; }
html[data-variant="msstore"] .tour-header, html[data-variant="msstore"] .tour-footer,
html[data-variant="msstore"] .finale-actions { display: none; }

/* ---------- Frame ---------- */

.tour {
	position: fixed;
	inset: 0;
	height: 100svh;
	display: grid;
	grid-template-columns: calc(var(--rail-w) + var(--edge)) minmax(0, 1fr) calc(var(--rail-w) + var(--edge));
	grid-template-rows: var(--header-h) minmax(0, 1fr) var(--band-h) var(--footer-h);
	grid-template-areas:
		"header header header"
		"left stage right"
		"band band band"
		"footer footer footer";
	background: radial-gradient(ellipse at 50% 45%, var(--bg-1) 0%, var(--bg-0) 72%);
	overflow: hidden;
}

.layer-gl, .layer-css {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.layer-gl canvas { display: block; width: 100%; height: 100%; }
.layer-css { overflow: hidden; z-index: 1; }
.layer-css > div { pointer-events: none; }

.rail-svg, .rail-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}
.rail-canvas { z-index: 3; }

/* ---------- Header ---------- */

.tour-header {
	grid-area: header;
	position: relative;
	z-index: 20; /* above the footer, so its panels are not covered */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 calc(16px + var(--edge));
	background: linear-gradient(180deg, rgba(3, 5, 13, 0.92), rgba(3, 5, 13, 0.6));
	border-bottom: 1px solid rgba(74, 79, 110, 0.35);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-icon { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.brand-wordmark { font-weight: 800; font-size: 20px; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; }
.brand-subtitle { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: clip; }

.header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.controls { display: flex; align-items: center; gap: 4px; }

.control-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(74, 79, 110, 0.6);
	border-radius: 9px;
	background: rgba(17, 22, 42, 0.85);
	color: var(--text-dim);
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
}
.control-button:hover { background: #1A2142; color: var(--gold-hot); border-color: rgba(255, 176, 32, 0.55); }
.control-button:active { background: #0A0E1E; transform: translateY(1px); }
.control-button:focus-visible, .rail-button:focus-visible, .cta-button:focus-visible, .footer-link:focus-visible, .credits-close:focus-visible {
	outline: 2px solid var(--gold-hot);
	outline-offset: 2px;
}
.control-button[aria-pressed="true"] { color: var(--bg-0); background: var(--gold); border-color: var(--gold); }
.control-button .icon-play { display: none; }
.control-button.is-paused .icon-play { display: block; fill: currentColor; stroke: none; }
.control-button.is-paused .icon-pause { display: none; }

.control-button[data-tip]:hover::after, .control-button[data-tip]:focus-visible::after, .credits-close[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 9px;
	border-radius: 6px;
	background: #1A2142;
	border: 1px solid rgba(255, 176, 32, 0.4);
	color: var(--text);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	z-index: 20;
}

.control-button.is-open { background: #1A2142; color: var(--gold-hot); border-color: var(--gold); }
.control-button.is-open::after { display: none; }
.control-button[hidden] { display: none; }
.control-button .icon-sound-on { display: none; }
.control-button.is-sound-on { color: var(--gold-hot); }
.control-button.is-sound-on .icon-sound-on { display: block; }
.control-button.is-sound-on .icon-sound-off { display: none; }
/* While the browser blocks the music, the hint below the button replaces its tooltip. */
.control-button.is-sound-waiting::after { display: none; }

.sound-hint {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 34;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 32px);
	padding: 7px 12px;
	border: 1px solid rgba(255, 176, 32, 0.6);
	border-radius: 10px;
	background: #1A2142;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.sound-hint[hidden] { display: none; }
.sound-hint .icon { color: var(--gold-hot); }
.sound-hint::before {
	content: "";
	position: absolute;
	top: -6px;
	left: var(--arrow-x, 50%);
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: #1A2142;
	border-top: 1px solid rgba(255, 176, 32, 0.6);
	border-left: 1px solid rgba(255, 176, 32, 0.6);
	transform: rotate(45deg);
}
.sound-hint:hover { border-color: var(--gold-hot); }
.sound-hint:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }

/* ---------- Settings panel (speed, flash and camera sliders) ---------- */

.settings-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: calc(16px + var(--edge));
	z-index: 35;
	width: min(340px, calc(100vw - 32px));
	padding: 10px 16px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 176, 32, 0.45);
	background: rgba(17, 22, 42, 0.97);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
	color: var(--text);
}
[dir="rtl"] .settings-panel { right: auto; left: calc(16px + var(--edge)); }
.settings-panel[hidden] { display: none; }
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.settings-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--gold-hot); }
.settings-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(74, 79, 110, 0.6);
	border-radius: 8px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
}
.settings-close:hover { color: var(--gold-hot); border-color: var(--gold); }
.settings-close:active { background: #0A0E1E; }
.settings-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 4px;
	padding: 10px 0;
	border-top: 1px solid rgba(74, 79, 110, 0.35);
}
.settings-label { font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.settings-value { min-width: 4.5ch; font-size: 14px; font-weight: 800; color: var(--gold-hot); text-align: end; font-variant-numeric: tabular-nums; }
.settings-hint { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.settings-range {
	--fill: 50%;
	grid-column: 1 / -1;
	width: 100%;
	height: 24px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.settings-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--gold) var(--fill), #2A3154 var(--fill)); }
[dir="rtl"] .settings-range::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--gold) var(--fill), #2A3154 var(--fill)); }
.settings-range::-moz-range-track { height: 6px; border-radius: 3px; background: #2A3154; }
.settings-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gold); }
.settings-range::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -6px;
	border: 2px solid #1A1205;
	border-radius: 50%;
	background: var(--gold-hot);
	box-shadow: 0 0 8px rgba(255, 176, 32, 0.6);
	transition: transform 100ms, background-color 100ms;
	-webkit-appearance: none;
	appearance: none;
}
.settings-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #1A1205; border-radius: 50%; background: var(--gold-hot); box-shadow: 0 0 8px rgba(255, 176, 32, 0.6); }
.settings-range:hover::-webkit-slider-thumb { transform: scale(1.12); background: #FFE2A6; }
.settings-range:hover::-moz-range-thumb { background: #FFE2A6; }
.settings-range:active::-webkit-slider-thumb { transform: scale(0.94); background: var(--gold); }
.settings-range:active::-moz-range-thumb { background: var(--gold); }
.settings-range:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; border-radius: 4px; }
.settings-actions { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid rgba(74, 79, 110, 0.35); }
.settings-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid rgba(74, 79, 110, 0.8);
	border-radius: 8px;
	background: rgba(3, 5, 13, 0.6);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.settings-reset:hover { color: var(--gold-hot); border-color: var(--gold); background: #1A2142; }
.settings-reset:active { background: #0A0E1E; transform: translateY(1px); }
.settings-reset:focus-visible, .settings-close:focus-visible, .control-button.is-open:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }

.language { position: relative; display: flex; align-items: center; }
.language[hidden] { display: none; }
.language-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(74, 79, 110, 0.8);
	border-radius: 9px;
	background: #11162A;
	color: var(--text);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.language-button:hover, .language-button.is-open { background: #1A2142; color: var(--gold-hot); border-color: rgba(255, 176, 32, 0.55); }
.language-button:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.language-button[data-tip]:hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 6px; background: #1A2142; border: 1px solid rgba(255, 176, 32, 0.4); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap; pointer-events: none; z-index: 20; }
.language-button.is-open::after { display: none; }
.language-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 36;
	width: min(560px, calc(100vw - 32px));
	max-height: min(70svh, 560px);
	overflow: auto;
	padding: 10px 12px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 176, 32, 0.45);
	background: #11162A;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
[dir="rtl"] .language-panel { right: auto; left: 0; }
.language-panel[hidden] { display: none; }
.language-title { margin: 0 4px 8px; font-size: 13px; font-weight: 800; color: var(--gold-hot); letter-spacing: 0.04em; text-transform: uppercase; }
.language-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.language-option {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}
.language-option:hover { background: #1A2142; border-color: rgba(255, 176, 32, 0.35); }
.language-option:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 1px; }
.language-option.is-current { background: rgba(255, 176, 32, 0.16); border-color: rgba(255, 176, 32, 0.6); color: var(--gold-hot); }

.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 16px;
	border: 1px solid var(--gold);
	border-radius: 10px;
	background: linear-gradient(180deg, #FFC248, var(--gold));
	color: #1A1205;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 0 18px rgba(255, 176, 32, 0.35);
	transition: filter 120ms, box-shadow 120ms, transform 80ms;
}
.cta-button:hover { filter: brightness(1.08); box-shadow: 0 0 26px rgba(255, 210, 122, 0.55); }
.cta-button:active { transform: translateY(1px); filter: brightness(0.94); }
.cta-secondary { background: rgba(17, 22, 42, 0.92); color: var(--gold-hot); }

/* ---------- Rails (horseshoe path) ---------- */

.rail {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 14px 0 8px;
	opacity: 1;
	transition: opacity 400ms;
}
.rail-left { grid-area: left; padding-inline-start: var(--edge); }
.rail-right { grid-area: right; padding-inline-end: var(--edge); text-align: end; }
.rail.is-hidden { opacity: 0; }

.rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.rail-right .rail-list { flex-direction: column-reverse; }

.rail-item { display: flex; min-height: 0; transition: opacity 300ms; }
.rail-right .rail-item { justify-content: flex-end; }

.rail-button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 3px 12px 3px 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rail-future);
	font-size: var(--rail-font);
	line-height: 1.2;
	text-align: start;
	cursor: pointer;
	transition: background-color 120ms, color 200ms;
}
.rail-right .rail-button { flex-direction: row-reverse; padding: 3px 0 3px 12px; text-align: end; }
.rail-button:hover { background: rgba(255, 176, 32, 0.08); color: var(--text); }
.rail-button:active { background: rgba(255, 176, 32, 0.16); }

.rail-node {
	position: relative;
	flex: none;
	width: 34px;
	height: 22px;
}
.rail-node::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 17px;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 1.5px solid #4A4F6E;
	background: var(--bg-0);
	transition: all 250ms;
}
.rail-number { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.rail-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	/* Long single words (e.g. Malayalam, Finnish) may break instead of being cut off. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.rail-item.is-done .rail-button { color: rgba(184, 199, 255, 0.7); }
.rail-item.is-done .rail-node::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 176, 32, 0.6); }
.rail-item.is-current .rail-button { color: var(--rail-current); text-shadow: 0 0 12px rgba(255, 210, 122, 0.55); }
.rail-item.is-current .rail-node::before {
	width: 20px; height: 20px; margin: -10px 0 0 -10px;
	background: var(--gold-hot);
	border-color: var(--gold-hot);
	box-shadow: 0 0 10px var(--gold-hot), 0 0 24px rgba(255, 176, 32, 0.8);
}
.rail-item.is-current .rail-node::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 17px;
	width: 20px; height: 20px; margin: -10px 0 0 -10px;
	border-radius: 50%;
	border: 2px solid var(--gold-hot);
	animation: rail-pulse 1.4s ease-out infinite;
}
.rail.is-calm-ghost .rail-item { opacity: 0; }

/* --blink is the remaining strength of flash and blink effects (settings panel). */
@keyframes rail-pulse {
	0% { transform: scale(1); opacity: calc(0.9 * var(--blink, 1)); }
	100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- Mini map (narrow and portrait windows) ---------- */

.minimap { display: none; }

/* ---------- Stage ---------- */

.stage {
	grid-area: stage;
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: 0;
	pointer-events: none;
}

.stage-chapter {
	position: absolute;
	top: 10px;
	left: 14px;
	margin: 0;
	max-width: calc(100% - 28px);
	font-size: calc(var(--rail-font) * 2);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--gold-hot);
	text-shadow: 0 0 8px rgba(255, 176, 32, 0.5);
	transition: opacity 300ms;
	z-index: 3;
}

.stage-loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	color: var(--text-dim);
	font-size: 15px;
	z-index: 4;
	transition: opacity 400ms;
}
.stage-loader.is-done { opacity: 0; }
.loader-spark {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px #fff, 0 0 24px var(--gold-hot), 0 0 48px var(--gold);
	animation: loader-pulse 1.1s ease-in-out infinite;
}
@keyframes loader-pulse {
	0%, 100% { transform: scale(0.8); opacity: 0.75; }
	50% { transform: scale(1.25); opacity: 1; }
}

.stage-notice {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	max-width: min(640px, 92%);
	margin: 0;
	padding: 8px 14px;
	border-radius: 10px;
	background: rgba(17, 22, 42, 0.9);
	border: 1px solid rgba(255, 176, 32, 0.4);
	color: var(--text);
	font-size: 14px;
	text-align: center;
	z-index: 4;
}
.stage-notice[hidden] { display: none; }

.stage-fade {
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
}

/* Calm version: screenshot crop, keyword and subtitles with cross-fades. */
.stage-calm { position: absolute; inset: 0; z-index: 2; }
.stage-calm[hidden] { display: none; }
.calm-slide {
	position: absolute;
	inset: 6% 4% 22%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4%;
	opacity: 0;
	transition: opacity 600ms ease;
}
.calm-slide.is-visible { opacity: 1; }
.calm-image {
	max-width: 100%;
	max-height: 62%;
	min-height: 0;
	object-fit: contain;
	border-radius: 10px;
	border: 1px solid rgba(255, 176, 32, 0.6);
	box-shadow: 0 0 28px rgba(255, 176, 32, 0.25);
}
.calm-keyword {
	margin: 0;
	font-weight: 800;
	font-size: clamp(28px, 4.2vw, 76px);
	letter-spacing: 0.03em;
	line-height: 1.05;
	text-align: center;
	color: #FFF3D6;
	text-shadow: var(--neon-gold);
	overflow-wrap: anywhere;
}

.finale-actions {
	grid-area: stage;
	align-self: end;
	justify-self: center;
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: max(8px, calc(var(--subtitle-font) * 3.2 + 8px));
	padding: 0 12px;
	opacity: 0;
	transition: opacity 500ms;
}
.finale-actions.is-visible { opacity: 1; }
.finale-actions[hidden] { display: none; }
.finale-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Download buttons: platform on the first line, the store on the second. */
.cta-platform { flex-direction: column; gap: 1px; min-width: 150px; min-height: 52px; padding: 6px 18px; line-height: 1.15; }
.cta-platform-name { font-size: 15px; font-weight: 800; }
.cta-platform-store { font-size: 12px; font-weight: 600; color: #3A2A06; }
/* Store logos: the platform name and the store line sit next to the logo. */
.cta-platform:has(.cta-brand) { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; justify-content: center; }
.cta-brand { grid-row: 1 / span 2; width: 22px; height: 22px; color: #1A1205; }
.cta-platform:has(.cta-brand) .cta-platform-name, .cta-platform:has(.cta-brand) .cta-platform-store { justify-self: start; }
/* "Start again" stands above the download buttons and keeps its space while hidden, so the download
   buttons do not move when it appears. */
.finale-start { display: flex; justify-content: center; margin-bottom: 10px; }
.tour-restart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 20px;
	border: 1px solid var(--gold);
	border-radius: 10px;
	background: rgba(17, 22, 42, 0.92);
	color: var(--gold-hot);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: opacity 400ms;
}
.tour-restart.is-ready { visibility: visible; opacity: 1; }
.tour-restart:hover { background: #1A2142; box-shadow: 0 0 22px rgba(255, 176, 32, 0.4); }
.tour-restart:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
/* Start screen: when the browser blocks the sound, the tour opens on its final picture and this
   button reads "Start the tour" (filled) instead of "Start again". */
.tour-restart .welcome-icon, .tour-restart .welcome-label { display: none; }
.tour-restart.is-welcome .welcome-icon, .tour-restart.is-welcome .welcome-label { display: inline; }
.tour-restart.is-welcome .restart-icon, .tour-restart.is-welcome .restart-label { display: none; }
.tour-restart .welcome-icon { fill: currentColor; stroke: none; }
.tour-restart.is-welcome { background: linear-gradient(180deg, #FFC248, var(--gold)); color: #1A1205; box-shadow: 0 0 32px rgba(255, 176, 32, 0.5); }
.tour-restart.is-welcome:hover { background: linear-gradient(180deg, #FFD06A, #FFB830); box-shadow: 0 0 44px rgba(255, 210, 122, 0.65); }
.tour-restart.is-welcome:focus-visible { outline-color: #FFFFFF; }
[dir="rtl"] .tour-restart .welcome-icon { transform: scaleX(-1); }
/* Start screen: "Start the tour" glows in a slow pulse to invite the click. */
.tour-restart.is-welcome { animation: welcome-glow 2.2s ease-in-out infinite; }
.tour-restart.is-welcome:hover { animation-play-state: paused; }
@keyframes welcome-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(255, 176, 32, 0.45), 0 0 0 0 rgba(255, 210, 122, 0); }
	50% { box-shadow: 0 0 46px rgba(255, 210, 122, 0.95), 0 0 0 6px rgba(255, 210, 122, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
	.tour-restart.is-welcome { animation: none; }
}
/* On the start screen a click into the stage (outside the buttons) starts the tour. The texts and
   pictures of the stage lie above it, so Controls marks the hovered area with is-stage-pointer. */
html.is-stage-pointer, html.is-stage-pointer * { cursor: pointer !important; }

/* ---------- Subtitles and beat bar ---------- */

.subtitles {
	grid-area: stage;
	align-self: end;
	justify-self: center;
	position: relative;
	z-index: 4;
	width: min(92%, 1100px);
	padding-bottom: 12px;
	pointer-events: none;
}
.subtitle-stack { position: relative; min-height: calc(var(--subtitle-font) * 1.3 * 2); }
.subtitle-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	font-size: var(--subtitle-font);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease;
	overflow-wrap: break-word;
}
.subtitle-line.is-visible { opacity: 1; transform: translateY(0); }

/* The beat bar is not shown (operator decision 2026-10-18); the station progress is on the rails and the progress bar. */
.beatbar { display: none !important; gap: 4px; justify-content: center; margin: 10px auto 0; width: min(320px, 50%); height: 3px; }
.beat-segment { flex: 1; position: relative; border-radius: 2px; background: rgba(74, 79, 110, 0.55); overflow: hidden; }
.beat-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--gold); box-shadow: 0 0 6px var(--gold); }
[dir="rtl"] .beat-fill { transform-origin: right center; }

/* ---------- Footer ---------- */

.tour-footer {
	grid-area: footer;
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 calc(16px + var(--edge));
	font-size: 12px;
	color: var(--text-dim);
	background: rgba(3, 5, 13, 0.85);
	border-top: 1px solid rgba(74, 79, 110, 0.3);
}
.footer-note { margin: 0; min-width: 0; overflow: hidden; text-overflow: clip; }
.footer-links { display: flex; gap: 14px; flex: none; }
.footer-link {
	padding: 2px 4px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--gold-hot);
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-link:active { color: var(--gold); }

/* ---------- Credits dialog ---------- */

.credits {
	width: min(680px, calc(100vw - 32px));
	max-height: calc(100svh - 48px);
	padding: 0 22px 18px;
	border: 1px solid rgba(255, 176, 32, 0.45);
	border-radius: 14px;
	background: var(--panel);
	color: var(--text);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
	overflow: auto;
}
.credits::backdrop { background: rgba(3, 5, 13, 0.72); }
.credits-header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 0 8px; background: var(--panel); }
.credits-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--gold-hot); }
.credits-close { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(74, 79, 110, 0.6); border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; }
.credits-close:hover { color: var(--gold-hot); border-color: var(--gold); }
.credits-close:active { background: #0A0E1E; }
.credits-text { margin: 10px 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.credits-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.credits-item { padding: 10px 12px; border-radius: 10px; background: rgba(3, 5, 13, 0.5); border: 1px solid rgba(74, 79, 110, 0.4); font-size: 13px; line-height: 1.45; }
.credits-item a { color: var(--gold-hot); overflow-wrap: anywhere; }
.credits-item a:hover { color: #fff; }
.credits-person { font-weight: 800; color: var(--text); }
.credits-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin-top: 4px; color: var(--text-dim); }
.credits-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ---------- Static short version (no JavaScript) ---------- */

.summary { display: none; max-width: 860px; margin: 0 auto; padding: 32px 20px 48px; overflow: auto; height: 100%; }
.summary-title { margin: 0; font-size: 40px; font-weight: 800; color: var(--gold); }
.summary-claim { font-size: 20px; color: #FFF3D6; }
.summary-notice, .summary-note { color: var(--text-dim); font-size: 14px; }
.summary-list { padding-left: 1.4em; line-height: 1.5; }
.summary-list strong { color: var(--gold-hot); }
.summary-links a { color: var(--gold-hot); }

/* ---------- Debug overlay ---------- */

.debug {
	position: fixed;
	top: calc(var(--header-h) + 6px);
	right: calc(var(--rail-w) + var(--edge) + 8px);
	z-index: 30;
	margin: 0;
	padding: 6px 9px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.72);
	color: #9EF7B3;
	font: 12px/1.35 ui-monospace, Consolas, monospace;
	pointer-events: none;
	white-space: pre;
}

/* ---------- CSS3D texts in the 3D space ----------
   --px is set by the renderer: world units per screen pixel at the base camera distance. */

/* left/top are explicit: in right-to-left documents the static position of an absolute element is the right edge. */
.c3d { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--font-ui); color: var(--text); will-change: opacity; }
.c3d.is-off { display: none; }

.c3d-keyword {
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.04;
	text-align: center;
	color: #FFF6E0;
	text-shadow: 0 0 calc(2px * var(--px)) rgba(255, 210, 122, 0.95), 0 0 calc(8px * var(--px)) rgba(255, 176, 32, 0.7), 0 0 calc(24px * var(--px)) rgba(255, 140, 20, 0.45);
}
.c3d-keyword.is-wrapping { white-space: normal; }
.c3d-keyword .kw-word { display: inline-block; position: relative; }
.c3d-keyword .kw-underline { position: absolute; left: -4%; top: 88%; width: 108%; height: 0.2em; overflow: visible; pointer-events: none; }
.c3d-keyword .kw-underline path { fill: none; stroke: var(--red); stroke-linecap: round; filter: drop-shadow(0 0 calc(5px * var(--px)) rgba(255, 59, 47, 0.85)); }

.c3d-label {
	font-size: max(calc(22px * var(--caption-scale)), calc(11px * var(--caption-min-scale) * var(--px)));
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-dim);
	text-shadow: 0 0 calc(6px * var(--px)) rgba(3, 5, 13, 0.9);
}
.c3d-label.is-small { font-size: max(calc(18px * var(--caption-scale)), calc(10px * var(--caption-min-scale) * var(--px))); }
.c3d-label.is-large { font-size: max(calc(30px * var(--caption-scale)), calc(13px * var(--caption-min-scale) * var(--px))); }
.c3d-label.is-wrap { white-space: normal; text-align: center; }

.c3d-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.28em 0.75em;
	border-radius: 999px;
	font-size: max(19px, calc(10px * var(--px)));
	font-weight: 600;
	line-height: 1.15;
	color: #10131F;
	background: var(--gold);
	box-shadow: 0 0 calc(10px * var(--px)) rgba(255, 176, 32, 0.25);
}
.c3d-chip.is-outline { background: rgba(17, 22, 42, 0.85); color: var(--text); border: calc(1.5px * var(--px)) solid currentColor; box-shadow: none; }

.c3d-note {
	font-family: var(--font-hand);
	font-weight: 600;
	font-size: max(calc(38px * var(--caption-scale)), calc(16px * var(--caption-min-scale) * var(--px)));
	line-height: 1;
	white-space: nowrap;
	color: var(--gold-hot);
	text-shadow: 0 0 calc(2px * var(--px)) currentColor, 0 0 calc(8px * var(--px)) currentColor, 0 0 calc(24px * var(--px)) rgba(0, 0, 0, 0.6);
}
.c3d-arrow { overflow: visible; }
.c3d-arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.c3d-formula {
	font-size: max(34px, calc(14px * var(--px)));
	color: var(--text);
	text-shadow: 0 0 calc(8px * var(--px)) rgba(191, 211, 255, 0.45);
	line-height: 1.1;
}
.c3d-formula .katex { font-size: 1em; }
.c3d-formula.is-chalk { color: #EDEDE4; text-shadow: 0 0 calc(4px * var(--px)) rgba(237, 237, 228, 0.5); }
.c3d-formula.is-green { color: var(--green); text-shadow: 0 0 calc(10px * var(--px)) rgba(46, 224, 90, 0.7); }
.c3d-formula .formula-strike { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; overflow: visible; }
.c3d-formula .formula-strike path { fill: none; stroke: var(--red); stroke-linecap: round; filter: drop-shadow(0 0 calc(5px * var(--px)) rgba(255, 59, 47, 0.85)); }
.c3d-formula .formula-icon { display: inline-block; width: 0.9em; height: 1.2em; vertical-align: -0.3em; overflow: visible; }
.c3d-formula .formula-icon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.c3d-led { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; color: var(--text-dim); }
.c3d-led > svg { display: block; overflow: visible; }
.c3d-led svg svg { overflow: hidden; }
.led-on { fill: var(--led-on); filter: drop-shadow(0 0 calc(3px * var(--px)) rgba(255, 42, 31, 0.9)); }
.led-off { fill: var(--led-off); }
.c3d-led .led-unit { font-size: max(24px, calc(11px * var(--px))); color: var(--text-dim); }

.c3d-caption { text-align: center; color: var(--blue-white); text-shadow: 0 0 calc(8px * var(--px)) rgba(100, 181, 255, 0.7); }
.c3d-caption .caption-name { display: block; max-width: 8.6em; margin: 0 auto; white-space: normal; text-wrap: balance; line-height: 1.08; font-weight: 800; font-size: max(calc(25px * var(--caption-scale)), calc(11px * var(--caption-min-scale) * var(--px))); letter-spacing: 0.02em; }
.c3d-caption .caption-dates { display: block; font-weight: 500; font-size: max(calc(21px * var(--caption-scale)), calc(10px * var(--caption-min-scale) * var(--px))); opacity: 0.85; font-variant-numeric: tabular-nums; }

.c3d-badge {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 0.6em 0.9em;
	border-radius: 0.6em;
	border: calc(1.5px * var(--px)) solid #76B900;
	background: rgba(17, 22, 42, 0.9);
	font-size: max(21px, calc(10px * var(--px)));
	box-shadow: 0 0 calc(18px * var(--px)) rgba(118, 185, 0, 0.35);
}
.c3d-badge .badge-title { font-weight: 800; color: #B6F05C; }
.c3d-badge .badge-text { display: inline-flex; align-items: center; gap: 0.3em; color: var(--text); font-weight: 600; }

.c3d-bubble { font-weight: 600; font-size: max(26px, calc(12px * var(--px))); color: #10131F; padding: 0.5em 0.9em; }

.c3d-search {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: max(24px, calc(11px * var(--px)));
	font-weight: 600;
	color: var(--text);
	font-variant-ligatures: none;
}
.c3d-search .search-caret { display: inline-block; width: 0.08em; height: 1.1em; background: var(--gold-hot); }

.c3d-warp { font-weight: 800; font-size: 46px; color: #FFF3D6; letter-spacing: 0.03em; text-shadow: 0 0 6px rgba(255, 210, 122, 0.9), 0 0 22px rgba(255, 176, 32, 0.6); }
.c3d-logo { display: block; -webkit-mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%); image-rendering: auto; }
.c3d-wordmark { font-weight: 800; font-size: max(64px, calc(30px * var(--px))); color: #FFFFFF; letter-spacing: 0.01em; text-shadow: 0 0 calc(10px * var(--px)) rgba(255, 210, 122, 0.6); }
.c3d-claim { font-weight: 600; font-size: max(30px, calc(15px * var(--px))); color: #FFF3D6; text-shadow: var(--neon-gold); white-space: normal; text-align: center; width: 1300px; }

.c3d-gallery { font: 600 28px/1 ui-monospace, Consolas, monospace; color: #9EF7B3; }

/* ---------- Medium widths: slimmer rails ---------- */

@media (min-width: 900px) and (max-width: 1279px) {
	:root { --rail-w: clamp(130px, 13vw, 180px); --rail-font: 12px; }
	.rail-button { gap: 6px; padding-right: 6px; }
	.rail-right .rail-button { padding-left: 6px; }
	.brand-subtitle { display: none; }
}

/* ---------- Narrow or portrait windows: mini map instead of rails ---------- */

/* Narrow, portrait and low windows (phones in landscape) use the progress bar instead of the rails. */
@media (max-width: 899px), (orientation: portrait), (max-height: 560px) {
	:root { --edge: 0px; }
	html, body { overflow: auto; }
	.tour {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto minmax(0, 1fr) auto;
		grid-template-areas: "header" "minimap" "stage" "subs" "footer";
		height: 100svh;
	}
	.rail { display: none; }
	.rail-svg { display: none; }
	.tour-header { flex-wrap: wrap; row-gap: 8px; padding: 8px 16px; min-height: var(--header-h); }
	/* Progress bar instead of the rails: a continuous line with one dot per station, no text. */
	.minimap {
		grid-area: minimap;
		position: relative;
		z-index: 4;
		display: block;
		padding: 12px 22px 6px;
	}
	.progress-track { position: relative; height: 14px; }
	[dir="rtl"] .progress-track { transform: scaleX(-1); }
	.progress-track::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 2px;
		margin-top: -1px;
		background: repeating-linear-gradient(90deg, #4A4F6E 0 4px, transparent 4px 8px);
	}
	.progress-fill { position: absolute; left: 0; top: 50%; width: 0; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 6px rgba(255, 176, 32, 0.7); }
	.progress-dot { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1.5px solid #4A4F6E; border-radius: 50%; background: var(--bg-0); }
	.progress-dot.is-done { border-color: var(--gold); background: var(--gold); }
	.progress-dot.is-current { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-color: var(--gold); background: #FFD27A; box-shadow: 0 0 8px rgba(255, 176, 32, 0.8); }
	.progress-head { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px #FFD27A, 0 0 12px rgba(255, 176, 32, 0.8); }
	.stage { width: 100%; aspect-ratio: 16 / 10; height: auto; }
	.stage-chapter { display: none; }
	.subtitles { grid-area: subs; align-self: start; justify-self: stretch; width: auto; padding: 10px 16px 12px; }
	/* Below the stage in the free subtitle area, so the buttons do not cover the logo. */
	.finale-actions { grid-area: subs; align-self: start; margin: 12px 0 0; }
	.tour-footer { flex-wrap: wrap; row-gap: 4px; padding: 6px 16px; }
	.footer-note { white-space: normal; }
	.debug { right: 8px; top: 8px; }
}

@media (max-width: 560px) {
	/* Phones: the on-screen minimum decides the size, so it stays a little smaller there. */
	:root { --caption-min-scale: 1.25; }
	.brand-subtitle { display: none; }
	/* Brand and download button share the first row, the playback buttons get their own row. */
	.header-actions { display: contents; }
	/* The globe joins the control row; brand and download button keep the first row. */
	#cta-header { order: 1; margin-inline-start: auto; }
	.language { order: 3; }
	.language-button { width: 34px; height: 34px; padding: 0; justify-content: center; }
	.language-code { display: none; }
	.language-panel { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; max-height: calc(100svh - 72px); }
	.language-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.controls { order: 2; flex: 1 1 calc(100% - 34px - 16px - 1px); min-width: 0; justify-content: space-between; }
	.control-button { width: 34px; height: 34px; }
	.cta-button { padding: 0 12px; font-size: 13px; }
	.finale-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 360px); }
	.cta-platform { min-width: 0; min-height: 46px; padding: 5px 8px; }
	.cta-platform-name { font-size: 13px; }
	.cta-platform-store { font-size: 11px; }
}

/* Phones in landscape: the height is the limit, so the stage keeps 16:10 inside the free height
   and everything fits into the window without scrolling. */
@media (orientation: landscape) and (max-height: 560px) {
	:root { --caption-min-scale: 1.25; --subtitle-font: 14px; }
	html, body { overflow: hidden; }
	.tour { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
	.tour-header { flex-wrap: nowrap; min-height: 0; padding: 4px 16px; }
	.brand-subtitle { display: none; }
	.header-actions { display: flex; flex: 0 1 auto; }
	.control-button { width: 32px; height: 32px; }
	.minimap { padding: 4px 22px 2px; }
	.stage { width: auto; height: 100%; max-width: 100%; justify-self: center; aspect-ratio: 16 / 10; min-height: 0; }
	/* The subtitle row always has room for one line of finale buttons, so nothing jumps. */
	.subtitles { padding: 4px 16px 4px; min-height: 46px; display: flex; flex-direction: column; justify-content: center; }
	.subtitle-stack { min-height: calc(var(--subtitle-font) * 1.3); width: 100%; }
	.finale-actions { grid-area: subs; align-self: center; flex-direction: row; margin: 0; gap: 6px; }
	.finale-downloads { gap: 6px; }
	.cta-platform { min-width: 0; min-height: 38px; padding: 3px 10px; }
	.cta-platform-name { font-size: 13px; }
	/* One line: the logo names the store, so the store line is left out. */
	.finale-downloads { flex-wrap: nowrap; }
	.cta-platform-store { display: none; }
	.cta-brand { width: 18px; height: 18px; }
	.cta-platform:has(.cta-brand) { grid-template-rows: auto; }
	.finale-start { margin-bottom: 0; }
	.tour-restart { min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
	.tour-footer { flex-wrap: nowrap; padding: 2px 16px; font-size: 11px; }
	.footer-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Scripts without Inter glyphs use the system fonts of the device. CJK fonts are named so the
   browser picks the regional variant; joined scripts (Arabic, Urdu, Indic) get no letter spacing,
   which would break the joining of the letters. */
:lang(ja) { --font-ui: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; --font-hand: var(--font-ui); }
:lang(ko) { --font-ui: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; --font-hand: var(--font-ui); }
:lang(zh-Hans) { --font-ui: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; --font-hand: var(--font-ui); }
:lang(zh-Hant) { --font-ui: "Inter", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; --font-hand: var(--font-ui); }
:lang(ar), :lang(ur), :lang(he), :lang(hi), :lang(bn), :lang(mr), :lang(gu), :lang(pa), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(or), :lang(th) { --font-hand: var(--font-ui); }
:lang(ar) .c3d-keyword, :lang(ur) .c3d-keyword, :lang(ar) .c3d-label, :lang(ur) .c3d-label,
:lang(hi) .c3d-keyword, :lang(bn) .c3d-keyword, :lang(mr) .c3d-keyword, :lang(gu) .c3d-keyword, :lang(pa) .c3d-keyword, :lang(ta) .c3d-keyword,
:lang(te) .c3d-keyword, :lang(kn) .c3d-keyword, :lang(ml) .c3d-keyword, :lang(or) .c3d-keyword, :lang(th) .c3d-keyword { letter-spacing: 0; }
/* Tall scripts need more line height in wrapped headlines. */
:lang(hi) .c3d-keyword, :lang(bn) .c3d-keyword, :lang(mr) .c3d-keyword, :lang(gu) .c3d-keyword, :lang(pa) .c3d-keyword, :lang(ta) .c3d-keyword,
:lang(te) .c3d-keyword, :lang(kn) .c3d-keyword, :lang(ml) .c3d-keyword, :lang(or) .c3d-keyword, :lang(th) .c3d-keyword, :lang(ar) .c3d-keyword, :lang(ur) .c3d-keyword { line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
	.rail-item.is-current .rail-node::after, .loader-spark { animation: none; }
}

.calm-image.is-icon { max-height: 42%; border: 0; border-radius: 22%; box-shadow: 0 0 40px rgba(255, 176, 32, 0.3); }