/* The one-stroke logo: a stage as big as the window, an SVG the script fills with the traced outline of the logo.
   Minimal: a cool pale grey ground, one ink for the line and the letters, one blue for the square nib. */
:root {
  --ground: #e8e9ec;        /* the background */
  --ink: #12151c;           /* the line and the letters */
  --accent: #2747ff;        /* the square nib, the full stop and the glint round a letter */
  --hint: #8d929c;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--ground);
  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 set in this face: the script draws it on a canvas to trace its outline */
.palco {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: 'Syne Variable', 'Syne', 'Futura', 'Century Gothic', sans-serif;
  font-weight: 800;
}

.tratto,
.riempi,
.filo,
.scia {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tratto,
.riempi,
.filo { stroke: var(--ink); }
.scia { stroke: var(--accent); }
.punto { fill: var(--accent); }

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