:root {
  --fondo: #ffffff;
  --inchiostro: #151514;
  --grigio: #8a8781;
  --filo: #dcd8d0;
  --accento: #e2452f;
  --carta: #fbfaf6;
  --bordo-carta: #e3dfd5;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pin__frame {
  position: relative;
  padding-top: 92px;
}

.pin__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  min-width: min(250px, calc(100vw - 84px));
  padding: 0 48px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--inchiostro);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.35s ease;
}

.pin__btn:focus { outline: none; }
.pin__btn:focus-visible { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 4.5px var(--inchiostro); }

@media (hover: hover) {
  .pin__btn:hover { border-color: #a9a59d; }
}

.pin__words {
  position: relative;
  display: grid;
  place-items: center;
}

.pin__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-variation-settings: 'wdth' 100, 'wght' 440;
  letter-spacing: -0.01em;
}

.pin__word--done { opacity: 0; }

.pin__art {
  position: absolute;
  right: 4px;
  top: 0;
  width: 96px;
  height: 120px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.pin__wood { fill: url(#legno); stroke: #a47b48; stroke-width: 0.5; }
.pin__grain { fill: none; stroke: #a47b48; stroke-width: 0.35; opacity: 0.45; stroke-linecap: round; }
.pin__edge { fill: none; stroke: #f4e3c4; stroke-width: 0.7; opacity: 0.8; }
.pin__edge--r { stroke: #9c7442; opacity: 0.5; }
.pin__coil { fill: url(#acciaio); stroke: #50565c; stroke-width: 0.45; }
.pin__turns { stroke: #4b5157; stroke-width: 0.55; opacity: 0.75; }
.pin__wire { fill: none; stroke: #6c737a; stroke-width: 1.1; stroke-linecap: round; }
.pin__shine { stroke: #ffffff; stroke-width: 0.8; opacity: 0.85; stroke-linecap: round; }
.pin__ombra { fill: #000; opacity: 0.16; }
.pin__notch { fill: #3a2b18; opacity: 0.28; }

.pin__tag { opacity: 0; }
.pin__tag-carta { fill: var(--carta); stroke: var(--bordo-carta); stroke-width: 0.6; }
.pin__tag-riga { fill: var(--accento); }
.pin__tag-testo {
  font-family: 'Archivo Variable', system-ui, sans-serif;
  font-size: 8.4px;
  letter-spacing: 0.16em;
  font-variation-settings: 'wdth' 112, 'wght' 600;
  fill: var(--inchiostro);
}

.pin__note {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grigio);
  font-variation-settings: 'wdth' 108, 'wght' 450;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}