/* The typewritten page: a stage as big as the window, an SVG the script fills. Every colour is a variable here:
   the table, the typewriter, the sheet, the ink and the ribbon, the cup of coffee and the pencil. */
:root {
  --table: #5b3a27;         /* the background: a walnut table */
  --table-light: #74503a;   /* the light planks */
  --table-deep: #3a2418;    /* the grain and the corners */
  --body: #2f5d56;          /* the typewriter's enamel */
  --body-light: #4f8277;    /* its highlight */
  --body-deep: #1b3934;     /* its shade */
  --well: #101513;          /* inside the type basket */
  --felt: #5a2a2a;          /* the felt the typebars rest on */
  --chrome: #dfe3e5;        /* the bright metal */
  --chrome-deep: #848d93;   /* the darker metal */
  --platen: #1a1a1d;        /* the rubber roller and the knobs */
  --platen-light: #45454c;  /* its highlight */
  --key: #1d1d21;           /* the keys */
  --key-light: #4a4a52;     /* their highlight */
  --key-letter: #f2ead8;    /* the letters on the keys */
  --ribbon: #b3262d;        /* the red half of the ribbon */
  --ribbon-dark: #1f1c1e;   /* the black half */
  --paper: #fbf8f0;         /* the sheet */
  --paper-shade: #c9bfa9;   /* where it bends round the roller */
  --ink: #1d1a27;           /* the typed letters */
  --brand: #e8dcc0;         /* the name on the typewriter */
  --cup: #f3efe6;           /* the cup and the saucer */
  --coffee: #3b2214;        /* the coffee */
  --crema: #a8703f;         /* the crema */
  --pencil: #e7b43a;        /* the pencil */
  --pencil-deep: #b9862a;   /* its sides */
  --eraser: #e48a8a;        /* the eraser */
  --shadow: #120a05;        /* the shadows */
  --hint: #d9c3a6;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--table);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* the table */
.tavolo { fill: var(--table); }
.tavolo-asse { fill: var(--table-light); }
.tavolo-vena { fill: none; stroke: var(--table-deep); stroke-linecap: round; }
.tavolo-giunto { stroke: var(--table-deep); }
.ombra { fill: var(--shadow); }

/* the cup and the pencil */
.piattino { fill: var(--cup); }
.piattino-bordo { fill: none; stroke: #d9d2c4; }
.tazza { fill: var(--cup); stroke: #d6cfc0; stroke-width: 2; }
.caffe { fill: var(--coffee); }
.crema { fill: none; stroke: var(--crema); stroke-linecap: round; }
.riflesso { fill: none; stroke: #ffffff; stroke-linecap: round; opacity: 0.55; }
.matita { fill: var(--pencil); }
.matita-lato { fill: var(--pencil-deep); }
.matita-legno { fill: #efcf9f; }
.matita-mina { fill: #3a3a3a; }
.matita-ghiera { fill: var(--chrome-deep); }
.matita-gomma { fill: var(--eraser); }

/* the typewriter */
.corpo { fill: url(#tw-body); stroke: var(--body-deep); stroke-width: 3; }
.corpo-luce { fill: none; stroke: var(--body-light); stroke-linecap: round; }
.pozzo { fill: url(#tw-well); }
.feltro { fill: none; stroke: var(--felt); stroke-linecap: round; }
.settore { fill: none; stroke: var(--chrome-deep); stroke-linecap: round; }
.leva-tasto { fill: none; stroke: var(--chrome-deep); stroke-linecap: round; }
.martello { stroke: var(--chrome-deep); stroke-linecap: round; }
.martello-testa { fill: var(--chrome); stroke: var(--chrome-deep); stroke-width: 1.5; }
.cromo { fill: url(#tw-chrome); stroke: var(--chrome-deep); stroke-width: 1.5; }
.cromo-linea { fill: none; stroke: url(#tw-chrome); stroke-linecap: round; }
.cromo-scuro { fill: var(--chrome-deep); }
.rullo { fill: url(#tw-platen); }
.rullo-luce { fill: #ffffff; opacity: 0.1; }
.manopola { fill: var(--platen); stroke: #000; stroke-width: 1.5; }
.zigrino { stroke: var(--platen-light); }
.leva-punta { fill: var(--platen); stroke: #000; stroke-width: 1.5; }
.rotella { fill: var(--platen); }
.tacca { stroke: var(--chrome-deep); }
.piano { fill: var(--chrome-deep); opacity: 0.5; }
.bobina { fill: var(--chrome-deep); stroke: var(--body-deep); stroke-width: 2; }
.bobina-nastro { fill: var(--ribbon-dark); }
.bobina-raggio { stroke: var(--chrome); stroke-linecap: round; }
.nastro-rosso { stroke: var(--ribbon); }
.nastro-nero { stroke: var(--ribbon-dark); }
.nastro-rosso-pieno { fill: var(--ribbon); }
.nastro-nero-pieno { fill: var(--ribbon-dark); }
.tasto-ombra { fill: var(--shadow); opacity: 0.35; }
.tasto-anello { fill: url(#tw-chrome); stroke: var(--chrome-deep); stroke-width: 1.2; }
.tasto { fill: url(#tw-key); }
.tasto-lettera {
  fill: var(--key-letter);
  font-family: 'Special Elite', 'Courier New', monospace;
}
.tasto-segno { fill: none; stroke: var(--key-letter); stroke-linecap: round; stroke-linejoin: round; }
.marchio {
  fill: var(--brand);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stop-corpo-luce { stop-color: var(--body-light); }
.stop-corpo { stop-color: var(--body); }
.stop-corpo-scuro { stop-color: var(--body-deep); }
.stop-pozzo { stop-color: var(--well); }
.stop-pozzo-bordo { stop-color: var(--body-deep); }
.stop-cromo-luce { stop-color: #ffffff; }
.stop-cromo { stop-color: var(--chrome); }
.stop-cromo-scuro { stop-color: var(--chrome-deep); }
.stop-rullo-luce { stop-color: var(--platen-light); }
.stop-rullo { stop-color: var(--platen); }
.stop-tasto-luce { stop-color: var(--key-light); }
.stop-tasto { stop-color: var(--key); }

/* the sheet and the ink */
.foglio { fill: var(--paper); }
.foglio-bordo { fill: none; stroke: var(--paper-shade); stroke-width: 1; opacity: 0.6; }
.stop-piega { stop-color: var(--paper-shade); }
.stop-inchiostro { stop-color: var(--ink); }
.battuta {
  font-family: 'Special Elite', 'Courier New', monospace;
}

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font: 400 14px/1.3 'Special Elite', 'Courier New', monospace;
  letter-spacing: 0.04em;
  color: var(--hint);
  opacity: 0;
  pointer-events: none;
}