:root {
  --black: #0a0a0b;
  --panel: #151517;
  --edge: #2c2c31;
  --white: #f4f4f1;
  --grey: #9a9aa1;
  --volt: #d4ff1f;
  --wide: Archivo, "Arial Black", sans-serif;
  --marker: "Permanent Marker", "Marker Felt", cursive;
}
* { box-sizing: border-box; }
html { background: var(--black); overflow-x: clip; }
body { margin: 0; background: var(--black); color: var(--white); font: 400 16px/1.5 var(--wide); font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.chalk { fill: none; stroke: var(--white); stroke-linecap: round; stroke-linejoin: round; }
.volt { stroke: var(--volt); }

/* ---- Ringraziamenti: scritta a pennarello in alto a sinistra, apre una scheda ---- */
.thanks-btn { position: absolute; top: 14px; left: 16px; z-index: 5; padding: 6px 8px; border: 0; background: none; cursor: pointer; font: 400 19px/1 var(--marker); color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--volt); transition: color .15s; }
.thanks-btn:hover { color: var(--volt); }
.thanks-btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ---- Musica: interruttore in alto a destra, spento all'arrivo ---- */
.music { position: absolute; top: 14px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; background: none; color: var(--grey); font: 700 16px/1 var(--wide); font-stretch: 62%; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.music:hover { color: var(--white); }
.music:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.music-track { width: 32px; height: 16px; padding: 2px; border: 1px solid currentColor; transform: skewX(-8deg); }
.music-knob { display: block; width: 10px; height: 10px; background: currentColor; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.music[aria-checked="true"] { color: var(--volt); }
.music[aria-checked="true"] .music-knob { transform: translateX(16px); }
/* barrette: ferme da spenta, in movimento quando la musica suona */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 4px; background: currentColor; transform-origin: bottom; }
.music[aria-checked="true"] .eq i { height: 14px; animation: eq .9s ease-in-out infinite alternate; }
.music[aria-checked="true"] .eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
.music[aria-checked="true"] .eq i:nth-child(3) { animation-duration: .75s; animation-delay: -.5s; }
.music[aria-checked="true"] .eq i:nth-child(4) { animation-duration: 1.05s; animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---- Testata: scritta larga e inclinata, sottolineata a pennarello ---- */
.top { position: relative; max-width: 1000px; margin: 0 auto; padding: 78px 20px 0; text-align: center; }
.board { position: absolute; left: 0; top: 40px; width: 100%; opacity: .2; pointer-events: none; }
.board .chalk { stroke-width: 3; }
@media (max-width: 1040px) { .board .low { display: none; } }
@media (max-width: 760px) { .board .side { display: none; } }
.kicker { position: relative; margin: 0 0 10px; font: 400 clamp(13px, 4.1vw, 27px)/1 var(--marker); white-space: nowrap; color: var(--volt); transform: rotate(-2deg); }
.wordwrap { position: relative; display: inline-block; }
.word { position: relative; margin: 0; font: italic 900 clamp(58px, 15.5vw, 150px)/.86 var(--wide); font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase; }
.under { display: block; width: 100%; height: 26px; margin-top: 2px; overflow: visible; }
.under .chalk { stroke-width: 6; }
.tagline { position: relative; margin: 16px auto 0; max-width: 44ch; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.35; color: #d0d0cc; }

/* ---- Filtri ---- */
.filters { position: relative; max-width: 1000px; margin: 34px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.filter { font: 700 19px/1 var(--wide); font-stretch: 62%; letter-spacing: .05em; text-transform: uppercase; padding: 11px 15px 10px; border: 1px solid var(--edge); background: none; color: var(--grey); cursor: pointer; transform: skewX(-8deg); transition: color .15s, border-color .15s, background .15s; }
.filter:hover { color: var(--white); border-color: var(--white); }
.filter[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--black); }
.filter:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* ---- Griglia: tessere digitali nette, con un segno a pennarello sopra ---- */
main { position: relative; padding: 46px 16px 70px; }

/* ---- Riga di chiusura in fondo alla pagina ---- */
.foot { padding: 0 16px 34px; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--grey); }
.foot span { white-space: nowrap; }
.foot .sep { white-space: pre; }
/* su telefono il contatto va a capo e il trattino che lo precede sparisce */
@media (max-width: 520px) { .foot .sep { display: none; } .foot .contact { display: block; } }
.foot a { color: var(--white); text-decoration: underline; text-decoration-color: var(--volt); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.foot a:hover, .foot a:focus-visible { color: var(--volt); outline: none; }
.grid { position: relative; list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 40px 18px; }
.grid li { width: var(--card, 170px); text-align: center; }
.grid li[hidden] { display: none; }
.tool { display: block; text-decoration: none; color: inherit; }
.tile {
  --bg: var(--panel); --fg: var(--white);
  position: relative; display: block; width: var(--tile, 150px); height: var(--tile, 150px); margin: 0 auto;
  background: var(--bg); border: 1px solid var(--edge);
  transition: background .16s, border-color .16s, transform .22s cubic-bezier(.2, .8, .2, 1);
}
/* tacche agli angoli, come un mirino */
.tile::before, .tile::after { content: ""; position: absolute; width: 11px; height: 11px; border: 2px solid var(--volt); }
.tile::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.tile::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.tile svg { position: absolute; overflow: visible; }
.tile .glyph { inset: 19%; width: 62%; height: 62%; }
.tile .art { fill: none; stroke: var(--fg); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .16s; }
.tile .art .t { stroke-width: 1.5; }
.tile .art .f { fill: var(--fg); stroke: none; }
.tile .art .k { fill: var(--bg); }
.tile .art .d { stroke-width: 1.8; stroke-dasharray: .1 4.7; }
.tile .no { position: absolute; left: 9px; top: 7px; font: 600 11px/1 var(--wide); letter-spacing: .08em; color: var(--grey); font-variant-numeric: tabular-nums; transition: color .16s; }
.tile .mark { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tile .mark .chalk { stroke-width: 3.2; stroke: var(--volt); transition: stroke .16s; }
a.tool:hover .tile, a.tool:focus-visible .tile { --bg: var(--volt); --fg: var(--black); border-color: var(--volt); transform: translateY(-5px); }
a.tool:hover .no, a.tool:focus-visible .no { color: var(--black); }
a.tool:hover .mark .chalk, a.tool:focus-visible .mark .chalk { stroke: var(--black); }
a.tool:focus-visible { outline: 2px solid var(--volt); outline-offset: 6px; }

/* tool non ancora pronti: nastro volt di traverso, icona attenuata, niente clic */
.soon .tool { cursor: default; }
.soon .tile .glyph, .soon .tile .mark { opacity: .28; }
.soon .name { color: var(--grey); }
.soon-tag { position: absolute; left: -7%; right: -7%; top: 50%; padding: 7px 0 6px; background: var(--volt); color: var(--black); font: 400 16px/1 var(--marker); letter-spacing: .03em; text-align: center; text-transform: uppercase; transform: translateY(-50%) rotate(-9deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.grid.compact .soon-tag { font-size: 11.5px; padding: 5px 0 4px; }

.name { display: block; margin-top: 14px; font: 700 21px/1.05 var(--wide); font-stretch: 62%; letter-spacing: .04em; text-transform: uppercase; transition: color .15s; }
a.tool:hover .name, a.tool:focus-visible .name { color: var(--volt); }
.tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; }
.badge { font: 600 11px/1 var(--wide); letter-spacing: .08em; padding: 5px 7px 4px; border: 1px solid var(--white); color: var(--white); }
.badge.nt { background: var(--volt); border-color: var(--volt); color: var(--black); }
/* info: l'unica etichetta scritta a pennarello */
.badge.info { border: 0; padding: 2px 4px; background: none; cursor: pointer; font: 400 16px/1 var(--marker); letter-spacing: 0; color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--volt); }
.badge.info:hover, .badge.info:focus-visible { color: var(--volt); outline: none; }

.grid.compact { gap: 32px 10px; }
.grid.compact .name { font-size: 16px; margin-top: 11px; }
.grid.compact .badge { font-size: 9.5px; padding: 4px 5px 3px; }
.grid.compact .badge.info { font-size: 14px; }

/* ---- Scheda INFO ---- */
dialog { width: min(450px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--edge); border-top: 6px solid var(--volt); background: var(--panel); color: var(--white); box-shadow: 0 40px 90px #000; }
dialog::backdrop { background: rgba(10, 10, 11, .84); }
.d-top { position: relative; display: flex; align-items: center; gap: 16px; padding: 24px 24px 0; }
/* icona a due facce: davanti quella di Oracle, dietro il logo originale del tool */
.d-flip { flex: none; width: 82px; height: 82px; perspective: 600px; }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3, .1, .2, 1); }
.d-flip.flipped .flip-inner { transform: rotateY(180deg); }
.d-flip.instant .flip-inner { transition: none; }
.flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.d-flip .tile { width: 100%; height: 100%; margin: 0; --bg: var(--volt); --fg: var(--black); border-color: var(--volt); }
.d-flip .tile::before, .d-flip .tile::after { display: none; }
.flip-back { transform: rotateY(180deg); border-radius: 22%; overflow: hidden; background: #fff; }
.flip-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flip-back.contain img { object-fit: contain; padding: 8px; }
.d-top h3 { margin: 0; font: italic 900 22px/1 var(--wide); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; }
.d-cat { margin: 7px 0 0; font-size: 14px; color: var(--grey); }
.d-body { padding: 18px 24px 24px; }
.d-body > p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.people { margin: 0 0 10px; font-weight: 600; line-height: 1.4; }
.people small { display: block; font: 400 17px/1.2 var(--marker); color: var(--volt); }
.go { display: block; margin-top: 18px; padding: 14px; background: var(--volt); color: var(--black); font: italic 900 17px/1 var(--wide); font-stretch: 125%; text-transform: uppercase; text-align: center; text-decoration: none; }
.go:hover, .go:focus-visible { background: var(--white); outline: none; }
.go.off { background: var(--edge); color: var(--grey); pointer-events: none; }
/* scheda dei ringraziamenti: più larga, per un testo lungo */
dialog.letter { width: min(580px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; }
dialog.letter .d-top { padding: 26px 26px 0; }
dialog.letter h3 { font-size: clamp(15px, 4.4vw, 32px); line-height: 1.02; padding-right: 30px; }
dialog.letter h3 span { display: block; }
dialog.letter h3 span + span { color: var(--volt); }
/* i nomi: in evidenza e mai spezzati sul trattino */
dialog.letter .names b { font-weight: 600; color: var(--volt); white-space: nowrap; }
dialog.letter .d-body { padding: 18px 26px 28px; }
dialog.letter .d-body p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
dialog.letter .d-body p:last-child { margin-bottom: 0; }
dialog.letter .sign { font: 400 21px/1.2 var(--marker); color: var(--volt); }

.x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; color: var(--white); font-size: 26px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile .art, .filter, .flip-inner, .music, .music-knob { transition: none; }
  .music[aria-checked="true"] .eq i { animation: none; }
}