/* The inkjet-printer logo: a stage as big as the window, an SVG the script fills with the printer and the sheet.
   Every colour is a variable here: the desk, the paper, the printer, the four inks and the brand colour they make. */
:root {
  --desk: #dfe5ea;          /* the background: the desk */
  --desk-deep: #c7d0d8;     /* the desk towards the corners */
  --paper: #fffdf8;         /* the sheet of paper */
  --paper-edge: #d6d2c8;    /* its edge */
  --shade: #27323d;         /* the shadows on the desk */
  --brand: #ee4630;         /* the brand colour: the dots blend into it */
  --cyan: #12b0e3;          /* the four inks of the print head */
  --magenta: #e8217f;
  --yellow: #ffd21f;
  --key: #1d1f24;
  --body: #f6f4ef;          /* the printer's body */
  --body-front: #e2ded5;    /* its front, with the slot */
  --body-line: #23262c;     /* the outline of the printer */
  --window: #3a4049;        /* the window over the rail */
  --rail: #9aa2ac;          /* the rail the head runs on */
  --carriage: #eceae5;      /* the print head */
  --tray: #c3cad1;          /* the paper trays */
  --tray-deep: #aab3bc;     /* inside the output tray */
  --button: #b9bfc6;        /* the buttons */
  --shine: #ffffff;         /* the shine of fresh ink */
  --dust: #f2f5f7;          /* the little puffs of air */
  --hint: #6c7682;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(120% 90% at 50% 45%, var(--desk) 55%, var(--desk-deep));
  background-color: var(--desk);
  overflow: hidden;
}

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

/* the logo is printed in this face: the script reads it to measure the letters */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Lexend Variable', 'Arial Black', sans-serif;
  font-weight: 700;
}

/* the printer: flat colours with an outline */
.corpo,
.corpo-bordo,
.vassoio,
.vano,
.carrello,
.cartuccia,
.tasto {
  stroke: var(--body-line);
  stroke-linejoin: round;
}
.corpo { fill: var(--body); }
.corpo-bordo { fill: none; }
.corpo-fronte { fill: var(--body-front); }
.corpo-riga { stroke: var(--body-line); opacity: 0.35; }
.corpo-luce { fill: none; stroke: var(--shine); stroke-linecap: round; opacity: 0.7; }
.griglia { stroke: var(--body-line); stroke-linecap: round; opacity: 0.3; }
.tasto { fill: var(--button); }
.vassoio { fill: var(--tray); }
.vassoio-fondo { fill: var(--tray-deep); opacity: 0.6; }
.risma { fill: var(--paper); }
.risma--cima { stroke: var(--paper-edge); }
.vano { fill: var(--window); }
.vano-ombra { fill: #000; opacity: 0.22; }
.binario { fill: var(--rail); }
.cinghia { stroke: var(--rail); stroke-linecap: round; opacity: 0.55; }
.fessura { fill: var(--body-line); }
.carrello { fill: var(--carriage); }
.carrello-ombra { fill: #000; opacity: 0.3; }
.cartuccia--cyan { fill: var(--cyan); }
.cartuccia--magenta { fill: var(--magenta); }
.cartuccia--yellow { fill: var(--yellow); }
.cartuccia--key { fill: var(--key); }
.cartuccia-luce { fill: var(--shine); opacity: 0.55; }
.ugelli { fill: var(--body-line); }
.ombra { fill: var(--shade); opacity: 0.22; }
.labbro-stop { stop-color: var(--shade); stop-opacity: 0.32; }
.labbro-stop--via { stop-opacity: 0; }

/* the sheet and the print */
.foglio { fill: var(--paper); }
.foglio-bordo { fill: none; stroke: var(--paper-edge); stroke-linejoin: round; }
.foglio-ombra { fill: var(--shade); }
.punti-strato { mix-blend-mode: multiply; }
.punto--cyan, .goccia--cyan { fill: var(--cyan); }
.punto--magenta, .goccia--magenta { fill: var(--magenta); }
.punto--yellow, .goccia--yellow { fill: var(--yellow); }
.punto--key, .goccia--key { fill: var(--key); }
.marchio { fill: var(--brand); }
.tinta-marchio { flood-color: var(--brand); }
.lucido-stop { stop-color: var(--shine); stop-opacity: 0.7; }
.lucido-stop--via { stop-opacity: 0; }

/* the effects */
.polvere { fill: var(--dust); }

.nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: 'Lexend Variable', 'Arial Black', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--hint);
  pointer-events: none;
}