/* =====================================================================
   GCD_OS — sistema operativo retro, caldo, fatto a mano.
   Niente verde-hacker: scrivania ambra, telaio osso, accento dosato.
   Token e componenti in un unico foglio (nessun build step).
   ===================================================================== */

:root {
	/* Superfici */
	--desk:        oklch(0.785 0.128 72);
	--desk-2:      oklch(0.690 0.130 64);
	--chrome:      oklch(0.918 0.012 85);
	--chrome-edge: oklch(0.820 0.016 82);
	--chrome-hi:   oklch(0.985 0.006 85);
	--paper:       oklch(0.972 0.008 85);
	--paper-2:     oklch(0.945 0.010 84);

	/* Inchiostri */
	--ink:   oklch(0.245 0.018 64);
	--ink-2: oklch(0.430 0.020 62);
	--ink-3: oklch(0.500 0.018 62);

	/* Accento (ambra di default) */
	--accent:       oklch(0.715 0.158 62);
	--accent-press: oklch(0.640 0.150 60);
	--on-accent:    oklch(0.235 0.030 60);
	--petrol:       oklch(0.520 0.072 216);

	/* Linee / stati */
	--line:   oklch(0.245 0.018 64 / 0.14);
	--line-2: oklch(0.245 0.018 64 / 0.07);
	--good:   oklch(0.560 0.110 150);
	--warn:   oklch(0.640 0.150 50);
	/* Varianti "ink" dei semantici: leggibili come TESTO su carta (≥4.5:1 AA).
	   I --good/--warn pieni restano per fondi scuri (terminale, cookie, badge). */
	--good-ink: oklch(0.505 0.110 150);
	--warn-ink: oklch(0.530 0.140 48);

	/* Forme */
	--radius:    9px;
	--radius-sm: 6px;
	--shadow-win:
		0 1px 0 var(--chrome-hi) inset,
		0 18px 40px -16px oklch(0.30 0.05 60 / .55),
		0 6px 14px -8px oklch(0.30 0.05 60 / .45);
	--shadow-pop: 0 10px 26px -12px oklch(0.30 0.05 60 / .5);

	/* Tipografia */
	--ui:    "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono:  "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--pixel: "Silkscreen", var(--mono);
	--step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
	--step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
	--step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.45rem);
	--step-2:  clamp(1.55rem, 1.40rem + 0.80vw, 2.10rem);
	--step-3:  clamp(2.00rem, 1.70rem + 1.60vw, 3.10rem);

	/* Motion / chrome */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--menubar-h: 42px;
}

[data-accent="terracotta"] {
	--accent:       oklch(0.628 0.148 42);
	--accent-press: oklch(0.560 0.140 40);
	--on-accent:    oklch(0.200 0.030 42); /* testo scuro: AA su accento e sul bevel chiaro */
}
[data-accent="petrolio"] {
	--accent:       oklch(0.460 0.092 216); /* abbassato da .555: bianco passa AA anche sul top del bevel */
	--accent-press: oklch(0.400 0.088 216);
	--on-accent:    oklch(0.985 0.010 210);
}

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

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

body.gcd-body {
	margin: 0;
	font-family: var(--ui);
	font-size: var(--step-0);
	line-height: 1.6;
	color: var(--ink);
	background: var(--desk);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.gcd-body a { color: inherit; }

/* solo screen-reader (titolo della scrivania, ecc.) */
.gcd-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.gcd-skip {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 1000;
	transform: translateY(-150%);
	background: var(--ink);
	color: var(--paper);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font: 600 var(--step--1)/1 var(--mono);
	transition: transform .2s var(--ease);
}
.gcd-skip:focus { transform: translateY(0); }

/* ---------- Shell ---------- */
.gcd-os {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

/* ---------- Menubar ---------- */
.gcd-menubar {
	position: sticky;
	top: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--menubar-h);
	padding: 0 12px 0 14px;
	padding-top: env(safe-area-inset-top, 0);
	background: linear-gradient(var(--chrome-hi), var(--chrome));
	border-bottom: 1px solid var(--chrome-edge);
	box-shadow: 0 1px 0 oklch(1 0 0 / .5) inset, 0 2px 8px -4px oklch(0.3 0.04 60 / .35);
}
.gcd-menubar__brand { display: inline-flex; align-items: center; text-decoration: none; }
.gcd-menubar__brand .custom-logo { display: block; width: auto; height: 26px; image-rendering: auto; }
.gcd-menubar__mark {
	font: 700 15px/1 var(--pixel);
	letter-spacing: .02em;
	color: var(--ink);
}
.gcd-menubar__menu {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	border-left: 1px solid var(--line);
	padding-left: 14px;
	overflow: hidden;
}
.gcd-menubar__crumb {
	font: 500 var(--step--1)/1 var(--mono);
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gcd-menubar__right { display: flex; align-items: center; gap: 12px; }

.gcd-menubar__clock {
	font: 500 var(--step--1)/1 var(--mono);
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	min-width: 6.5ch;
	text-align: right;
}

/* ---------- Desktop ---------- */
.gcd-desktop {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	outline: none;
	background:
		radial-gradient(120% 90% at 18% 0%, oklch(0.84 0.10 80 / .55), transparent 55%),
		radial-gradient(130% 110% at 100% 100%, var(--desk-2), transparent 60%),
		var(--desk);
}
/* trama a puntini, morbida */
.gcd-desktop::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(oklch(0.30 0.04 60 / .08) 1px, transparent 1.4px);
	background-size: 22px 22px;
	pointer-events: none;
	mix-blend-mode: multiply;
}
/* vignettatura calda */
.gcd-desktop::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 160px 10px oklch(0.40 0.07 55 / .28);
	pointer-events: none;
}

/* ---------- Icone desktop ---------- */
.gcd-icons {
	position: absolute;
	top: 18px; left: 16px;
	/* Altezza DEFINITA (viewport), non max-height: serve all'auto-fill per
	   contare quante righe ci stanno. Riempie una colonna dall'alto e, quando
	   lo spazio verticale finisce, le icone scalano in una nuova colonna a
	   destra — così si adattano se la pagina è più bassa. */
	height: calc(100svh - var(--menubar-h) - 36px);
	z-index: 2;
	margin: 0; padding: 0;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(auto-fill, 92px);
	grid-auto-columns: 86px;
	justify-content: start;
	align-content: start;
	gap: 4px 8px;
}
.gcd-icon {
	display: grid;
	justify-items: center;
	gap: 5px;
	width: 86px;
	padding: 9px 6px 7px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
	border: 1px solid transparent;
	transition: background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
.gcd-icon__glyph {
	display: grid;
	place-items: center;
	width: 50px; height: 46px;
	border-radius: 11px;
	background: linear-gradient(var(--chrome-hi), var(--chrome));
	border: 1px solid var(--chrome-edge);
	box-shadow: 0 1px 0 oklch(1 0 0 /.7) inset, 0 4px 9px -6px oklch(0.3 0.04 60 /.6);
	color: var(--ink);
}
.gcd-icon__glyph .gcd-ico { width: 27px; height: 27px; }
.gcd-icon__label {
	font: 500 var(--step--1)/1.2 var(--mono);
	text-align: center;
	max-width: 110px;
	padding: 2px 7px;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: oklch(0.22 0.03 60);
	text-shadow: 0 1px 0 oklch(0.92 0.10 80 / .6);
}
.gcd-icon:hover { transform: translateY(-1px); }
.gcd-icon:hover .gcd-icon__glyph { border-color: var(--accent); }
.gcd-icon:focus-visible { outline: none; }
.gcd-icon:focus-visible .gcd-icon__glyph {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.gcd-icon:focus-visible .gcd-icon__label,
.gcd-icon.is-active .gcd-icon__label {
	background: var(--accent);
	color: var(--on-accent);
	text-shadow: none;
}

/* ---------- Layer finestre ---------- */
.gcd-windows {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

/* ---------- Finestra ---------- */
.gcd-window {
	position: absolute;
	inset-inline: 0;
	margin-inline: auto;
	top: var(--win-y, 70px);
	width: min(var(--win-w, 720px), 94vw);
	max-height: calc(100svh - var(--menubar-h) - 96px);
	display: none;
	flex-direction: column;
	pointer-events: auto;
	background: var(--chrome);
	border: 1px solid var(--chrome-edge);
	border-radius: var(--radius);
	box-shadow: var(--shadow-win);
	overflow: hidden;
	animation: gcd-win-in .26s var(--ease) both;
}
.gcd-window.is-open { display: flex; }
.gcd-window.is-min { display: none !important; }
@keyframes gcd-win-in {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.gcd-window__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	padding: 0 8px 0 12px;
	background: linear-gradient(var(--chrome-hi), var(--chrome));
	border-bottom: 1px solid var(--chrome-edge);
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.gcd-window.is-focused .gcd-window__bar {
	background: linear-gradient(oklch(from var(--accent) calc(l + .07) c h), var(--accent));
	border-bottom-color: var(--accent-press);
}
.gcd-window.is-focused .gcd-window__title { color: var(--on-accent); }
.gcd-window__bar:active { cursor: grabbing; }
.gcd-window__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	font: 500 13px/1 var(--mono);
	color: var(--ink-2);
}
.gcd-window__icon { width: 17px; height: 17px; flex: 0 0 auto; }
.gcd-window__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gcd-window__controls { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.gcd-wbtn {
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: oklch(1 0 0 / .35);
	color: var(--ink-2);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.gcd-wbtn .gcd-ico { width: 15px; height: 15px; }
.gcd-wbtn:hover { background: var(--chrome-hi); border-color: var(--chrome-edge); color: var(--ink); }
.gcd-wbtn--close:hover { background: var(--warn); color: oklch(0.99 0.01 60); border-color: transparent; }
.gcd-window.is-focused .gcd-wbtn { color: var(--on-accent); background: oklch(1 0 0 / .18); }
.gcd-window.is-focused .gcd-wbtn:hover { background: oklch(1 0 0 / .4); }

.gcd-window__body {
	flex: 1 1 auto;
	min-height: 0; /* permette al corpo di restringersi e scrollare (flexbox) */
	overflow: auto;
	background: var(--paper);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* maximize */
.gcd-window.is-max {
	inset: calc(var(--menubar-h) + 8px) 8px 8px 8px !important;
	width: auto !important;
	margin: 0 !important;
	max-height: none !important;
	border-radius: var(--radius);
}

/* ---------- File-manager (portfolio) ---------- */
.gcd-fm { display: flex; flex-direction: column; min-height: 0; }
.gcd-fm__toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
	position: sticky; top: 0; z-index: 2;
}
.gcd-fm__path { font: 500 var(--step--1)/1 var(--mono); color: var(--ink-2); }
.gcd-fm__spacer { flex: 1 1 auto; }
.gcd-fm__count { font: 500 var(--step--1)/1 var(--mono); color: var(--ink-3); }
.gcd-fm__views { display: inline-flex; gap: 3px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: var(--paper); }
.gcd-fm__view {
	display: grid; place-items: center;
	width: 26px; height: 24px;
	border: 0; border-radius: 5px;
	background: transparent; color: var(--ink-3);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease);
}
.gcd-fm__view .gcd-ico { width: 16px; height: 16px; }
.gcd-fm__view.is-active { background: var(--accent); color: var(--on-accent); }

.gcd-fm__list { margin: 0; padding: 6px; list-style: none; }
.gcd-fm__row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 9px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ink);
	transition: background .12s var(--ease);
}
.gcd-fm__item:nth-child(odd) .gcd-fm__row { background: var(--paper-2); }
.gcd-fm__row:hover { background: oklch(from var(--accent) l c h / .16); }
.gcd-fm__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gcd-fm__thumb {
	display: grid; place-items: center;
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: 7px; overflow: hidden;
	background: var(--paper-2);
	border: 1px solid var(--line);
	color: var(--ink-3);
}
.gcd-fm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gcd-fm__thumb .gcd-ico { width: 22px; height: 22px; }
.gcd-fm__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.gcd-fm__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcd-fm__sub { display: flex; gap: 9px; min-width: 0; align-items: baseline; font-size: var(--step--1); }
.gcd-fm__tags { color: var(--ink-2); font-family: var(--mono); white-space: nowrap; flex: 0 0 auto; }
.gcd-fm__desc { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gcd-fm__go { flex: 0 0 auto; color: var(--ink-3); font-size: 17px; opacity: 0; transition: opacity .12s var(--ease), transform .12s var(--ease); }
.gcd-fm__row:hover .gcd-fm__go { opacity: 1; transform: translateX(2px); color: var(--accent); }

.gcd-fm__grid {
	display: none;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
	padding: 14px;
}
.gcd-fm__cell {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 12px 8px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
	transition: background .12s var(--ease), transform .12s var(--ease);
}
.gcd-fm__cell:hover { background: oklch(from var(--accent) l c h / .14); transform: translateY(-2px); }
.gcd-fm__cell-thumb {
	display: grid; place-items: center;
	width: 100%; aspect-ratio: 4 / 3;
	border-radius: 8px; overflow: hidden;
	background: var(--paper-2);
	border: 1px solid var(--line);
	color: var(--ink-3);
}
.gcd-fm__cell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gcd-fm__cell-name { font: 500 var(--step--1)/1.3 var(--mono); text-align: center; }

.gcd-fm[data-view="grid"] .gcd-fm__list { display: none; }
.gcd-fm[data-view="grid"] .gcd-fm__grid { display: grid; }

.gcd-fm--empty { padding: 40px 24px; text-align: center; }
.gcd-fm__empty-line { font: 500 var(--step-1)/1.3 var(--mono); color: var(--ink-2); margin: 0 0 8px; }
.gcd-fm__empty-hint { color: var(--ink-3); margin: 0; }
.gcd-fm__empty-hint a { color: var(--petrol); text-underline-offset: 3px; }

/* ---------- Progetto ---------- */
.gcd-proj { padding-bottom: 26px; }
.gcd-proj__hero {
	margin: 0;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
}
/* height:auto + attributi width/height intrinseci = il browser riserva lo spazio
   via aspect-ratio (niente CLS), poi max-height + cover lo limitano. */
.gcd-proj__hero img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; }
.gcd-proj__head { padding: 22px clamp(18px, 4vw, 34px) 4px; }
.gcd-proj__title { font-size: var(--step-3); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 10px; font-weight: 700; }
.gcd-proj__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin: 0 0 14px;
	font: 500 var(--step--1)/1 var(--mono);
	color: var(--ink-2);
}
.gcd-proj__meta a { color: inherit; text-decoration: none; }
.gcd-proj__dot { color: var(--ink-3); }
.gcd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gcd-tag {
	font: 500 var(--step--1)/1 var(--mono);
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	color: var(--ink-2);
}
.gcd-proj__body, .gcd-page { padding: 8px clamp(18px, 4vw, 34px) 0; max-width: 72ch; }
.gcd-proj__video { padding: 16px clamp(18px, 4vw, 34px) 0; }
.gcd-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); background: var(--ink); display: block; }
.gcd-proj__video :where(iframe, video) { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-sm); }

/* Galleria "file" → carosello */
.gcd-gal { padding: 22px clamp(18px, 4vw, 34px) 0; }
.gcd-gal__head { font: 500 var(--step--1)/1 var(--mono); color: var(--ink-3); text-transform: lowercase; margin: 0 0 10px; }

.gcd-carousel { position: relative; }
.gcd-carousel__viewport {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper-2);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.gcd-carousel__viewport::-webkit-scrollbar { display: none; }
.gcd-carousel__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcd-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
}
.gcd-carousel__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: var(--ink);
}
.gcd-carousel__cap { border-top: 1px solid var(--line); }

/* Frecce — centrate sull'immagine, non sull'intera slide con caption */
.gcd-carousel__nav {
	position: absolute;
	top: clamp(60px, 28%, 140px);
	display: grid; place-items: center;
	width: 38px; height: 38px;
	border-radius: 999px;
	border: 1px solid var(--chrome-edge);
	background: oklch(from var(--paper) l c h / .86);
	color: var(--ink);
	cursor: pointer;
	box-shadow: var(--shadow-pop);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: transform .12s var(--ease), background .12s var(--ease), opacity .12s var(--ease);
	z-index: 2;
}
.gcd-carousel__nav:hover { background: var(--paper); transform: scale(1.06); }
.gcd-carousel__nav .gcd-ico { width: 20px; height: 20px; }
.gcd-carousel__nav--prev { left: 10px; }
.gcd-carousel__nav--prev .gcd-ico { transform: scaleX(-1); }
.gcd-carousel__nav--next { right: 10px; }
.gcd-carousel__nav[disabled] { opacity: .3; cursor: default; pointer-events: none; box-shadow: none; }

/* Pallini — area tap 24×24 (WCAG 2.5.8); il punto visibile è il ::before da 8px. */
.gcd-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 8px 0 0; }
.gcd-carousel__dot {
	width: 24px; height: 24px; padding: 0;
	display: grid; place-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.gcd-carousel__dot::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 999px;
	border: 1px solid var(--ink-3);
	background: transparent;
	transition: background .12s var(--ease), border-color .12s var(--ease), transform .12s var(--ease);
}
.gcd-carousel__dot:hover::before { border-color: var(--accent); }
/* attivo: border --accent-press (3.24:1 su carta, ≥3 per 1.4.11) + scale come segnale non cromatico */
.gcd-carousel__dot.is-active::before { background: var(--accent); border-color: var(--accent-press); transform: scale(1.25); }
.gcd-carousel__dot:focus-visible { outline: none; }
.gcd-carousel__dot:focus-visible::before { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.gcd-carousel__viewport { scroll-behavior: auto; }
	.gcd-carousel__nav { transition: none; }
}

.gcd-gal__cap {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 7px 9px;
	border-top: 1px solid var(--line);
	font: 500 var(--step--1)/1.2 var(--mono);
	color: var(--ink-3);
}
.gcd-gal__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcd-gal__dl {
	display: inline-flex; align-items: center; gap: 4px;
	text-decoration: none; color: var(--petrol);
	flex: 0 0 auto;
}
.gcd-gal__dl .gcd-ico { width: 14px; height: 14px; }
.gcd-gal__dl:hover { color: var(--accent-press); }

.gcd-proj__actions { padding: 24px clamp(18px, 4vw, 34px) 0; }

/* ---------- Bottoni ---------- */
.gcd-btn {
	display: inline-flex; align-items: center; gap: 7px;
	font: 600 var(--step-0)/1 var(--ui);
	padding: 11px 16px;
	border-radius: 8px;
	border: 1px solid var(--chrome-edge);
	background: linear-gradient(var(--chrome-hi), var(--chrome));
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}
.gcd-btn .gcd-ico { width: 17px; height: 17px; }
.gcd-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.gcd-btn--primary { background: linear-gradient(oklch(from var(--accent) calc(l + .05) c h), var(--accent)); border-color: var(--accent-press); color: var(--on-accent); }

/* ---------- Prose ---------- */
.gcd-prose { font-size: var(--step-0); color: var(--ink); }
.gcd-prose > * + * { margin-top: 1em; }
.gcd-prose h1 { font-size: var(--step-2); line-height: 1.08; margin: 0 0 .4em; }
.gcd-prose h2 { font-size: var(--step-1); line-height: 1.15; margin-top: 1.6em; }
.gcd-prose h3 { font-size: var(--step-0); font-weight: 700; margin-top: 1.4em; }
.gcd-prose p, .gcd-prose ul, .gcd-prose ol { max-width: 70ch; }
.gcd-prose a { color: var(--petrol); text-underline-offset: 3px; }
.gcd-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.gcd-prose blockquote {
	margin-inline: 0; padding: 4px 0 4px 18px;
	border-left: 3px solid var(--accent);
	color: var(--ink-2); font-style: italic;
}
.gcd-page { padding-block: 22px 28px; }
.gcd-page__title { font-size: var(--step-3); line-height: 1.04; margin: 0 0 .5em; }
.gcd-page__thumb img { width: 100%; border-radius: var(--radius-sm); }
.gcd-doc { padding: 24px clamp(18px, 4vw, 30px); }

/* Lista documenti (blog/ricerca) */
.gcd-doclist { margin: 0; padding: 8px; list-style: none; }
.gcd-doclist__row {
	display: grid; gap: 3px;
	padding: 12px 12px;
	border-radius: 8px; text-decoration: none; color: var(--ink);
	transition: background .12s var(--ease);
}
.gcd-doclist__item:nth-child(odd) .gcd-doclist__row { background: var(--paper-2); }
.gcd-doclist__row:hover { background: oklch(from var(--accent) l c h / .16); }
.gcd-doclist__name { font-weight: 600; }
.gcd-doclist__ex { color: var(--ink-2); font-size: var(--step--1); }
.gcd-doclist__pag { padding: 8px 16px 18px; font: 500 var(--step--1)/1.4 var(--mono); }
.gcd-doclist__pag a, .gcd-doclist__pag .current { padding: 4px 8px; }

/* README / Cestino interni */
.gcd-readme { padding: 6px 18px 18px; }
.gcd-readme__pre {
	margin: 0; padding: 14px 0;
	font: 400 var(--step--1)/1.7 var(--mono);
	color: var(--ink);
	white-space: pre-wrap;
	word-break: break-word;
}
.gcd-trash { padding: 40px 24px; text-align: center; color: var(--ink-2); }
.gcd-trash__ico { width: 46px; height: 46px; color: var(--ink-3); }
.gcd-trash__line { font: 500 var(--step-1)/1.2 var(--mono); margin: 12px 0 4px; color: var(--ink); }
.gcd-trash__sub { margin: 0; color: var(--ink-3); font-size: var(--step--1); }

/* ---------- Taskbar ---------- */
.gcd-taskbar {
	display: none;
	gap: 6px;
	padding: 6px 10px;
	padding-bottom: max(6px, env(safe-area-inset-bottom));
	background: linear-gradient(var(--chrome), var(--chrome-edge));
	border-top: 1px solid var(--chrome-edge);
	overflow-x: auto;
	z-index: 410;
}
.gcd-taskbar.has-items { display: flex; }
.gcd-task {
	display: inline-flex; align-items: center; gap: 7px;
	flex: 0 0 auto;
	max-width: 220px;
	padding: 6px 11px;
	border: 1px solid var(--chrome-edge);
	border-radius: 7px;
	background: var(--chrome-hi);
	color: var(--ink-2);
	font: 500 var(--step--1)/1 var(--mono);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease);
}
.gcd-task .gcd-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.gcd-task__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcd-task:hover { color: var(--ink); }
.gcd-task.is-focused { background: var(--accent); color: var(--on-accent); border-color: var(--accent-press); }

/* ---------- Boot ---------- */
.gcd-boot {
	display: none;
	position: fixed; inset: 0; z-index: 900;
	place-items: center;
	background:
		radial-gradient(120% 90% at 50% 30%, oklch(0.80 0.11 74), var(--desk-2));
}
.gcd-boot.is-on { display: grid; }
.gcd-boot.is-off { opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.gcd-boot__inner { text-align: center; }
.gcd-boot__mark {
	font: 700 clamp(34px, 9vw, 70px)/1 var(--pixel);
	color: oklch(0.26 0.04 60);
	margin: 0 0 18px;
	text-shadow: 0 2px 0 oklch(0.92 0.10 80 / .55);
}
.gcd-boot__log { list-style: none; margin: 0; padding: 0; min-height: 8.5em; }
.gcd-boot__log li {
	font: 400 var(--step-0)/1.7 var(--mono);
	color: oklch(0.30 0.04 60);
}
.gcd-boot__log li::before { content: "› "; color: oklch(0.40 0.10 55); }

/* ---------- Progressive enhancement (no-JS) ---------- */
html:not(.gcd-js) .gcd-window__controls,
html:not(.gcd-js) .gcd-menubar__clock { display: none; }
html:not(.gcd-js) .gcd-window { position: relative; inset: auto; margin: 18px auto; animation: none; }
html:not(.gcd-js) .gcd-windows { position: static; }
html:not(.gcd-js) .gcd-desktop { overflow: auto; }

/* ---------- Mobile: finestre come sheet ---------- */
@media (max-width: 720px) {
	.gcd-icons {
		position: static;
		height: auto;
		grid-auto-flow: row;
		/* minmax(0,1fr): senza lo 0, le label nowrap (es. "Impostazioni")
		   gonfiano le colonne oltre il viewport e si vedono tagliate ai bordi. */
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 12px 6px;
		padding: 16px 12px;
	}
	.gcd-icons__item { min-width: 0; }
	.gcd-icon { width: 100%; min-width: 0; padding: 10px 4px 8px; gap: 7px; }
	.gcd-icon__glyph {
		width: 100%; max-width: 66px; height: 60px;
		border-radius: 15px;
	}
	.gcd-icon__glyph .gcd-ico { width: 33px; height: 33px; }
	.gcd-icon__label { max-width: 100%; }

	.gcd-windows { position: fixed; inset: var(--menubar-h) 0 0 0; z-index: 500; pointer-events: none; }
	.gcd-window {
		position: fixed !important;
		/* --gcd-kb = altezza della tastiera virtuale (impostata dal JS): alza il
		   fondo della finestra sopra la tastiera così l'input resta visibile. */
		inset: var(--menubar-h) 0 var(--gcd-kb, 0px) 0 !important;
		width: auto !important;
		max-height: none !important;
		margin: 0 !important;
		border-radius: 0;
		border: 0;
		transition: bottom .2s var(--ease);
	}
	.gcd-window:not(.is-open) { display: none; }
	.gcd-window__bar { cursor: default; height: 44px; }
	/* controlli finestra più generosi al tocco nella barra da 44px */
	.gcd-wbtn { width: 30px; height: 30px; }
	/* clearance per la toolbar/home-indicator del browser mobile */
	.gcd-window__body { padding-bottom: env(safe-area-inset-bottom, 0px); }
	.gcd-fm__desc { display: none; }
	.gcd-proj__hero img { max-height: 240px; }
}

/* =====================================================================
   Logo del sito (marchio monocromatico via maschera: si ricolora a
   seconda del fondo, così un logo bianco si vede anche su crema)
   ===================================================================== */
.gcd-logo-mark {
	display: inline-block;
	height: 20px;
	aspect-ratio: 803 / 140;
	background-color: var(--ink);
	-webkit-mask: var(--gcd-logo, none) left center / contain no-repeat;
	mask: var(--gcd-logo, none) left center / contain no-repeat;
}
.gcd-menubar__logo { height: clamp(18px, 2.4vw, 22px); }
.gcd-boot__logo {
	display: block;
	height: clamp(30px, 7vw, 56px);
	margin: 0 auto 20px;
	background-color: oklch(0.27 0.045 60);
}

/* =====================================================================
   Filigrana "GCD_OS non attivato" (omaggio al watermark di Windows)
   ===================================================================== */
.gcd-watermark {
	position: absolute;
	right: clamp(16px, 3vw, 30px);
	bottom: clamp(14px, 3vh, 26px);
	z-index: 1;
	display: grid;
	gap: 3px;
	text-align: right;
	pointer-events: none;
	user-select: none;
	color: oklch(0.30 0.03 60 / 0.42);
	text-shadow: 0 1px 0 oklch(0.96 0.06 85 / 0.32);
}
.gcd-watermark__l1 { font: 600 var(--step-1)/1.05 var(--ui); letter-spacing: .005em; }
.gcd-watermark__l2 { font: 400 var(--step--1)/1.2 var(--ui); }
.gcd-os.is-crt .gcd-watermark { color: oklch(0.30 0.03 60 / 0.5); }
@media (max-width: 720px) { .gcd-watermark { display: none; } }

/* Logo grande, filigrana al centro della scrivania */
.gcd-desktop__logo {
	position: absolute;
	left: 50%; top: 46%;
	transform: translate(-50%, -50%);
	width: min(48vw, 600px);
	height: auto;
	background-color: oklch(0.36 0.05 58 / 0.15);
	z-index: 0;
	pointer-events: none;
}
.gcd-os.is-crt .gcd-desktop__logo { background-color: oklch(0.30 0.06 58 / 0.20); }
/* Su mobile le icone sono un blocco statico in alto: porto la filigrana
   nell'area vuota in basso, ancorata al fondo, così non ci finisce sopra. */
@media (max-width: 720px) {
	.gcd-desktop__logo {
		width: 72vw;
		top: auto;
		bottom: clamp(40px, 10vh, 110px);
		transform: translateX(-50%);
	}
}

/* =====================================================================
   Banner cookie (stile terminale, $ accetta_tutto)
   ===================================================================== */
.gcd-cookie {
	position: fixed;
	left: 50%;
	bottom: clamp(12px, 3vh, 26px);
	transform: translateX(-50%) translateY(10px);
	z-index: 520;
	width: min(680px, calc(100vw - 24px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 12px 14px;
	background: oklch(0.18 0.018 66);
	color: oklch(0.86 0.04 80);
	border: 1px solid oklch(0.36 0.03 64);
	border-radius: 10px;
	box-shadow: var(--shadow-pop);
	font: 400 var(--step--1)/1.5 var(--mono);
	opacity: 0;
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* `display:flex` qui sopra vince sull'attributo [hidden] (regola autore > UA):
   senza questo, il banner dismesso resta display:flex + opacity:0 e, invisibile,
   intercetta i tap in basso — su mobile copre "Ripristina predefiniti". */
.gcd-cookie[hidden] { display: none; }
.gcd-cookie.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.gcd-cookie__text { margin: 0; flex: 1 1 240px; }
.gcd-cookie__ps { color: var(--accent); }
.gcd-cookie__link { color: oklch(0.78 0.10 200); text-underline-offset: 3px; }
.gcd-cookie__dot { opacity: .5; }
.gcd-cookie__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.gcd-cookie__btn {
	font: 500 var(--step--1)/1 var(--mono);
	padding: 7px 11px;
	border: 1px solid oklch(0.40 0.03 64);
	border-radius: 7px;
	background: oklch(0.24 0.02 64);
	color: oklch(0.86 0.04 80);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.gcd-cookie__btn::before { content: "$ "; color: var(--accent); opacity: .85; }
.gcd-cookie__btn:hover { border-color: var(--accent); color: oklch(0.95 0.03 80); }
.gcd-cookie__btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-press); }
.gcd-cookie__btn--primary::before { color: var(--on-accent); opacity: .7; }
@media (max-width: 720px) {
	.gcd-cookie { left: 8px; right: 8px; width: auto; transform: translateY(10px); }
	.gcd-cookie.is-on { transform: translateY(0); }
}

/* =====================================================================
   Pannello Impostazioni
   ===================================================================== */
.gcd-set { padding: 18px clamp(16px, 3vw, 24px) 26px; display: grid; gap: 22px; }
.gcd-set__group { display: grid; gap: 11px; }
.gcd-set__h {
	margin: 0;
	font: 600 var(--step--1)/1 var(--mono);
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--ink-3);
}
.gcd-set__row { display: flex; flex-wrap: wrap; gap: 8px; }
.gcd-set__chip, .gcd-set__wp {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--paper-2);
	color: var(--ink);
	cursor: pointer;
	font: 500 var(--step--1)/1 var(--ui);
	transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.gcd-set__chip:hover, .gcd-set__wp:hover { border-color: var(--accent); }
.gcd-set__chip[aria-pressed="true"], .gcd-set__wp[aria-pressed="true"] {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / .28);
}
.gcd-set__sw { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid oklch(0 0 0 / .15); }
.gcd-set__wp { flex-direction: column; gap: 6px; padding: 8px; width: 98px; }
.gcd-set__wpprev { width: 100%; height: 44px; border-radius: 6px; border: 1px solid var(--line); }
.gcd-set__wpprev--ambra { background: radial-gradient(120% 100% at 20% 0%, oklch(0.84 0.10 80), oklch(0.69 0.13 64)); }
.gcd-set__wpprev--tramonto { background: radial-gradient(120% 100% at 20% 0%, oklch(0.82 0.13 55), oklch(0.60 0.16 25)); }
.gcd-set__wpprev--notte { background: radial-gradient(120% 100% at 30% 0%, oklch(0.34 0.05 60), oklch(0.20 0.03 62)); }
.gcd-set__wpprev--carta { background: oklch(0.95 0.012 85); }
.gcd-set__toggle {
	display: flex; align-items: center; gap: 10px;
	font: 500 var(--step-0)/1.3 var(--ui);
	color: var(--ink); cursor: pointer;
}
.gcd-set__toggle input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.gcd-set__reset {
	justify-self: start;
	font: 500 var(--step--1)/1 var(--mono);
	padding: 9px 13px;
	border: 1px solid var(--line); border-radius: 8px;
	background: var(--paper-2); color: var(--ink-2); cursor: pointer;
	transition: border-color .12s var(--ease), color .12s var(--ease);
}
.gcd-set__reset:hover { border-color: var(--warn); color: var(--warn-ink); }

.gcd-set__activate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gcd-set__actbtn {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 var(--step-0)/1 var(--ui);
	padding: 10px 16px;
	border: 1px solid var(--accent-press);
	border-radius: 8px;
	background: linear-gradient(oklch(from var(--accent) calc(l + .08) c h), var(--accent));
	color: var(--on-accent);
	cursor: pointer;
	transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.gcd-set__actbtn:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.gcd-set__actbtn.is-on {
	background: var(--paper-2);
	color: var(--good-ink);
	border-color: var(--line);
	box-shadow: none;
}
.gcd-set__actkey {
	flex: 1 1 180px;
	min-width: 0;
	font: 500 var(--step-0)/1 var(--mono);
	letter-spacing: .04em;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
}
.gcd-set__actkey::placeholder { color: var(--ink-3); letter-spacing: normal; }
.gcd-set__actkey:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gcd-set__actnote { font: 500 var(--step--1)/1.4 var(--mono); color: var(--ink-3); }
.gcd-set__actnote.is-err { color: var(--warn-ink); }

/* GCD_OS attivato: la filigrana sparisce */
.gcd-os.is-activated .gcd-watermark { display: none; }

/* =====================================================================
   Sfondi alternativi
   ===================================================================== */
.gcd-os[data-wallpaper="tramonto"] .gcd-desktop {
	background:
		radial-gradient(120% 90% at 20% 0%, oklch(0.82 0.13 55 / .6), transparent 55%),
		radial-gradient(130% 110% at 100% 100%, oklch(0.60 0.16 25), transparent 60%),
		oklch(0.73 0.135 42);
}
.gcd-os[data-wallpaper="notte"] .gcd-desktop {
	background:
		radial-gradient(120% 90% at 30% 0%, oklch(0.33 0.05 60 / .85), transparent 60%),
		radial-gradient(130% 110% at 100% 100%, oklch(0.19 0.03 62), transparent 60%),
		oklch(0.235 0.03 62);
}
.gcd-os[data-wallpaper="carta"] .gcd-desktop {
	background:
		radial-gradient(120% 90% at 20% 0%, oklch(0.975 0.008 85), transparent 60%),
		oklch(0.948 0.012 85);
}
.gcd-os[data-wallpaper="carta"] .gcd-desktop::after { box-shadow: inset 0 0 140px 8px oklch(0.40 0.03 60 / .10); }

/* Sfondo scuro: etichette e filigrane leggibili */
.gcd-os[data-wallpaper="notte"] .gcd-icon__label { color: oklch(0.93 0.02 85); text-shadow: 0 1px 2px oklch(0 0 0 / .55); }
.gcd-os[data-wallpaper="notte"] .gcd-icon:focus-visible .gcd-icon__label,
.gcd-os[data-wallpaper="notte"] .gcd-icon.is-active .gcd-icon__label { color: var(--on-accent); text-shadow: none; }
.gcd-os[data-wallpaper="notte"] .gcd-watermark { color: oklch(0.86 0.03 80 / .4); text-shadow: none; }
.gcd-os[data-wallpaper="notte"] .gcd-desktop__logo { background-color: oklch(0.86 0.04 80 / .12); }

/* =====================================================================
   Console / terminale  (la parte "hacker": un terminale letterale,
   CRT ambra a fosfori, niente verde-Matrix dell'anti-reference)
   ===================================================================== */
:root { --term-bg: oklch(0.165 0.018 66); --term-fg: var(--accent); }

/* Finestra console: chrome scuro */
.gcd-window--term {
	height: min(560px, 72svh);
	border-color: oklch(0.34 0.03 64);
}
.gcd-window--term .gcd-window__bar {
	background: linear-gradient(oklch(0.30 0.02 64), oklch(0.22 0.02 64));
	border-bottom-color: oklch(0.12 0.02 64);
}
.gcd-window--term .gcd-window__title { color: oklch(0.80 0.04 70); }
.gcd-window--term.is-focused .gcd-window__bar {
	background: linear-gradient(oklch(0.34 0.03 64), oklch(0.26 0.03 64));
}
.gcd-window--term.is-focused .gcd-window__title { color: var(--term-fg); }
.gcd-window--term .gcd-wbtn { background: oklch(1 0 0 / .08); color: oklch(0.80 0.03 70); }
.gcd-window--term .gcd-wbtn:hover { background: oklch(1 0 0 / .18); color: oklch(0.92 0.03 70); }
.gcd-window--term .gcd-window__body { padding: 0; background: var(--term-bg); }

/* Schermo del terminale */
.gcd-term {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(120% 130% at 50% 0%, oklch(0.21 0.02 66), var(--term-bg));
	color: var(--term-fg);
	font: 400 13.5px/1.55 var(--mono);
	overflow: hidden;
	cursor: text;
}
/* scanline + glow CRT */
.gcd-term::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(oklch(0 0 0 / 0) 0 2px, oklch(0 0 0 / .16) 2px 3px);
	mix-blend-mode: multiply;
	z-index: 3;
}
.gcd-term__out {
	flex: 1 1 auto;
	overflow: auto;
	padding: 14px 16px 4px;
	white-space: pre-wrap;
	word-break: break-word;
	text-shadow: 0 0 6px oklch(from var(--term-fg) l c h / .45);
	overscroll-behavior: contain;
}
.gcd-term__line { margin: 0; }
.gcd-term__line--cmd { color: oklch(0.92 0.03 80); }
.gcd-term__line--cmd .gcd-term__ps { color: var(--term-fg); opacity: .9; margin-right: 8px; }
.gcd-term__line--err { color: oklch(0.72 0.16 35); text-shadow: 0 0 6px oklch(0.72 0.16 35 / .4); }
.gcd-term__line--dim { color: oklch(from var(--term-fg) calc(l - .12) c h); opacity: .8; }
.gcd-term__line a { color: oklch(0.78 0.10 200); }
.gcd-term__banner { color: var(--term-fg); opacity: .92; }

.gcd-term__form {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 16px 14px;
	position: relative;
	z-index: 4;
}
.gcd-term__prompt { color: var(--term-fg); white-space: nowrap; text-shadow: 0 0 6px oklch(from var(--term-fg) l c h / .5); }
.gcd-term__in {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: oklch(0.95 0.02 80);
	font: inherit;
	caret-color: var(--term-fg);
	outline: none;
	text-shadow: 0 0 6px oklch(from var(--term-fg) l c h / .4);
}
.gcd-term__cursor { /* cursore a blocco lampeggiante */
	display: inline-block;
	width: 0.6em; height: 1.05em;
	margin-left: 1px;
	background: var(--term-fg);
	box-shadow: 0 0 8px oklch(from var(--term-fg) l c h / .6);
	animation: gcd-blink 1.05s steps(1) infinite;
	vertical-align: text-bottom;
}
@keyframes gcd-blink { 50% { opacity: 0; } }

/* Mobile: l'input del terminale eredita 13.5px e Safari iOS fa auto-zoom sul
   focus di ogni campo < 16px, mandando in tilt il layout fixed a tutto schermo.
   16px lo disinnesca; deve stare DOPO .gcd-term per ordine sorgente. */
@media (max-width: 720px) {
	.gcd-term__in { font-size: 16px; }
}

/* CRT globale (toggle): scanline + bagliore su tutto l'OS */
.gcd-os.is-crt::after {
	content: "";
	position: fixed; inset: 0;
	z-index: 480;
	pointer-events: none;
	background:
		repeating-linear-gradient(oklch(0 0 0 / 0) 0 2px, oklch(0.2 0.03 60 / .07) 2px 3px),
		radial-gradient(120% 100% at 50% 50%, transparent 60%, oklch(0.25 0.06 55 / .22));
	animation: gcd-flicker 4s steps(60) infinite;
}
@keyframes gcd-flicker { 0%,100% { opacity: 1; } 48% { opacity: .96; } 52% { opacity: 1; } }
.gcd-os.is-crt .gcd-desktop { filter: saturate(1.04) contrast(1.02); }

/* =====================================================================
   Easter egg — caccia alla chiave: filigrana cliccabile, flash, toast
   "chiave trovata" e righe speciali della console.
   ===================================================================== */
.gcd-watermark--live { pointer-events: auto; cursor: help; }

.gcd-egg-flash {
	position: fixed; inset: 0; z-index: 9998; pointer-events: none;
	background: radial-gradient(120% 100% at 50% 50%, oklch(from var(--accent) l c h / .24), transparent 70%);
	animation: gcd-egg-flash .66s ease-out forwards;
}
@keyframes gcd-egg-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.gcd-toast {
	position: fixed;
	left: 50%; bottom: 72px;
	transform: translate(-50%, 14px);
	z-index: 9999;
	max-width: min(92vw, 420px);
	padding: 14px 18px;
	border-radius: 14px;
	background: oklch(0.20 0.02 66 / .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid oklch(from var(--accent) l c h / .5);
	box-shadow: 0 12px 44px oklch(0 0 0 / .5), inset 0 1px 0 oklch(1 0 0 / .06);
	color: oklch(0.95 0.02 80);
	font: 400 14px/1.5 var(--ui);
	text-align: center;
	opacity: 0;
	transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.gcd-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.gcd-toast__t {
	font: 600 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 9px;
}
.gcd-toast__key {
	display: inline-block; font: 700 18px/1.2 var(--mono); letter-spacing: .04em;
	color: oklch(0.96 0.03 85); padding: 7px 13px; margin: 2px 0 2px;
	background: oklch(0 0 0 / .35); border-radius: 8px; user-select: all;
	border: 1px dashed oklch(from var(--accent) l c h / .6);
	text-shadow: 0 0 10px oklch(from var(--accent) l c h / .4);
}
.gcd-toast__sub { font-size: 12px; opacity: .7; margin-top: 6px; }
.gcd-toast__row { display: flex; gap: 8px; justify-content: center; margin-top: 13px; }
.gcd-toast__btn {
	font: 600 13px var(--ui); padding: 8px 18px; border-radius: 8px; cursor: pointer;
	border: 0; background: var(--accent); color: oklch(0.18 0.02 60);
}
.gcd-toast__btn:hover { filter: brightness(1.08); }
.gcd-toast__x {
	font: 400 13px var(--ui); padding: 8px 13px; border-radius: 8px; cursor: pointer;
	border: 1px solid oklch(1 0 0 / .18); background: transparent; color: oklch(0.85 0.02 80);
}
.gcd-toast__x:hover { background: oklch(1 0 0 / .08); }
.gcd-toast--hint { font-style: italic; line-height: 1.6; }

/* Righe speciali del terminale (chiave svelata, pioggia matrix) */
.gcd-term__line--key { color: oklch(0.95 0.16 95); font-weight: 700; text-shadow: 0 0 10px oklch(0.9 0.17 95 / .55); }
.gcd-term__line--matrix { color: oklch(0.82 0.18 145); letter-spacing: .14em; text-shadow: 0 0 9px oklch(0.82 0.20 145 / .6); }

@media (prefers-reduced-motion: reduce) {
	.gcd-toast { transition: opacity .2s; transform: translate(-50%, 0); }
	.gcd-egg-flash { animation: none; opacity: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.gcd-window { animation: none; }
}
