Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="speak and spell with-labels" id="device"></div>
              
            
!

CSS

              
                div {
  --unit: 1.75vmin;
  --color-test: hsl(143 100% 60% / 80%);
  --color-test-key: hsl(143 100% 60% / 80%);
  --color-base: hsl(8 100% 50%);
  --color-base-highlight: hsl(8 100% 78%);
  --color-base-crack: hsl(8 100% 26%);
  --color-base-shadow: hsl(8 100% 30%);
  --color-base-shadow-offset: hsl(8 100% 33%);
  --color-base-shadow-alt: hsl(8 100% 40%);
  --color-black: hsl(0 100% 0%);
  --color-transparent: hsl(343 100% 0% / 0%);
  --color-dust: hsl(0 0% 20%);
  --color-text: hsl(173 100% 27% / 100%);
  --color-text-transparent: hsl(173 100% 50% / 0%);
  --color-yellow: hsl(53 100% 50%);
  --color-cyan: hsl(188 100% 39%);
  --color-orange: hsl(28 100% 54%);
  --color-red: hsl(3 100% 58%);
  --color-reddish: hsl(8 100% 54%);
  --color-dark-blue: hsl(223 100% 30%);
  --color-green: hsl(128 100% 48%);
  --color-text-key: var(--color-transparent);
  --color-text-key-alt: var(--color-transparent);
  --color-vowel: var(--color-yellow);
  --color-consonant: var(--color-orange);
  --color-test-1: var(--color-test);
  --color-test-2: var(--color-test);
  --color-logo-1: var(--color-reddish);
  --color-logo-2: var(--color-cyan);
  --color-keyboard-1: var(--color-yellow);
  --color-keyboard-2: var(--color-reddish);
  --color-keyboard-3: var(--color-cyan);
  --color-key-ctrl: var(--color-red);
  --color-helper-text: var(--color-yellow);
}
@media screen and (max-aspect-ratio: 5/7) {
  div {
    --unit: 2.25vmin;
  }
}
.with-labels {
  --color-text-key: hsl(0 100% 5%);
  --color-text-key-alt: var(--color-text-key);
}
.read {
  --color-base: hsl(48 100% 50%);
  --color-base-highlight: hsl(48 100% 78%);
  --color-base-crack: hsl(48 100% 26%);
  --color-base-shadow: hsl(48 100% 30%);
  --color-base-shadow-offset: hsl(48 100% 33%);
  --color-base-shadow-alt: hsl(48 100% 40%);
  --color-read-yellow: hsl(48 100% 54%); /* yellow */
  --color-read-cyan: hsl(188 100% 45%);  /* cyan */
  --color-vowel: var(--color-yellow);
  --color-consonant: var(--color-yellow);
  --color-keyboard-1: var(--color-dark-blue); /*dark-blue*/
  --color-keyboard-2: var(--color-read-cyan);
  --color-keyboard-3: var(--color-green);
  --color-key-ctrl: var(--color-read-cyan);
  --color-helper-text: var(--color-dark-blue);
  --color-logo-1: var(--color-green);
  --color-logo-2: var(--color-read-yellow);
}
.read.with-labels {
  --color-text-key-alt: var(--color-read-yellow);
}
.spooky {
  --color-base: hsl(28 100% 45%);
  --color-base-highlight: hsl(28 100% 58%);
  --color-base-crack: hsl(28 100% 26%);
  --color-base-shadow: hsl(28 100% 30%);
  --color-base-shadow-offset: hsl(28 100% 33%);
  --color-base-shadow-alt: hsl(28 100% 40%);
  --color-spook-dark: hsl(308 100% 4%); /* dark purple */
  --color-spook-witch: hsl(118 100% 65%);  /* green */
  --color-spook-bat: hsl(308 100% 45%);  /* purple */
  --color-text: hsl(323 100% 27% / 100%);
  --color-text-transparent: hsl(143 100% 50% / 0%);
  --color-vowel: hsl(28 100% 90%);
  --color-consonant: var(--color-orange);
  --color-keyboard-1: var(--color-spook-dark); 
  --color-keyboard-2: var(--color-spook-bat);
  --color-keyboard-3: var(--color-spook-witch);
  --color-key-ctrl: var(--color-spook-dark);
  --color-helper-text: var(--color-spook-dark);
  --color-logo-2: var(--color-green);
  --color-logo-1: var(--color-base-highlight);
}
.spooky.with-labels {
  --color-text-key-alt: var(--color-spook-bat);
}
div,
div::after {
  width: calc(37 * var(--unit));
  height: calc(53 * var(--unit));
  border-radius: calc(var(--unit) * 6);
}
/* Base Shape, composed of handle, screen, and red base */
div {
  position: relative;

  background: var(--base-case-top-shadow), var(--base-case-top), var(--screen),
    var(--base-case-bottom);
  background-repeat: no-repeat;

  --handle-radius: calc(var(--unit) * 2.925);
  --handle-left-mid-x: calc(var(--unit) * 4.5 + var(--handle-radius));
  --handle-left-mid-y: calc(var(--unit) * 4 + var(--handle-radius));
  --handle-right-mid-x: calc(var(--unit) * 26.8 + var(--handle-radius));
  --handle-right-mid-y: calc(var(--unit) * 4 + var(--handle-radius));
  /**/
  clip-path: polygon(
    evenodd,
    50% 0%,
    0% 0%,
    0% 100%,
    100% 100%,
    100% 0%,
    50% 0%,
    50% calc(var(--unit) * 4),
    var(--path-left),
    var(--path-right),
    50% calc(var(--unit) * 4)
  );
  /**/
  --path-left: calc(
        var(--handle-left-mid-x) + calc(cos(270deg) * var(--handle-radius))
      )
      calc(var(--handle-left-mid-y) + calc(sin(270deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(265deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(265deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(260deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(260deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(255deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(255deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(250deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(250deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(245deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(245deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(240deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(240deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(235deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(235deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(230deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(230deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(225deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(225deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(220deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(220deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(215deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(215deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(210deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(210deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(205deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(205deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(200deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(200deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(195deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(195deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(190deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(190deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(185deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(185deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(180deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(180deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(175deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(175deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(170deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(170deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(165deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(165deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(160deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(160deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(155deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(155deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(150deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(150deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(145deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(145deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(140deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(140deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(135deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(135deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(130deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(130deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(125deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(125deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(120deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(120deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(115deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(115deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(110deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(110deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(105deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(105deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(100deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(100deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(95deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(95deg) * var(--handle-radius))),
    calc(var(--handle-left-mid-x) + calc(cos(90deg) * var(--handle-radius)))
      calc(var(--handle-left-mid-y) + calc(sin(90deg) * var(--handle-radius)));

  --path-right: calc(
        var(--handle-right-mid-x) + calc(cos(90deg) * var(--handle-radius))
      )
      calc(var(--handle-right-mid-y) + calc(sin(90deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(85deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(85deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(80deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(80deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(75deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(75deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(70deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(70deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(65deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(65deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(60deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(60deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(55deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(55deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(50deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(50deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(45deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(45deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(40deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(40deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(35deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(35deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(30deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(30deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(25deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(25deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(20deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(20deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(15deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(15deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(10deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(10deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(5deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(5deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(0deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(0deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-5deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-5deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-10deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-10deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-15deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-15deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-20deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-20deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-25deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-25deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-30deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-30deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-35deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-35deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-40deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-40deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-45deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-45deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-50deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-50deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-55deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-55deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-60deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-60deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-65deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-65deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-70deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-70deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-75deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-75deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-80deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-80deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-85deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-85deg) * var(--handle-radius))),
    calc(var(--handle-right-mid-x) + calc(cos(-90deg) * var(--handle-radius)))
      calc(var(--handle-right-mid-y) + calc(sin(-90deg) * var(--handle-radius)));
  /**/
}

/* Base Speak & Spell case (minus the screen) */
div {
  --base-case-bottom: var(--img-base-case-bottom) var(--pos-base-case-bottom) /
    var(--size-base-case-bottom);
  --img-base-case-bottom: linear-gradient(
    to bottom,
    var(--color-base-highlight) calc(var(--unit) * 0.2),
    var(--color-base) calc(var(--unit) * 0.5),
    var(--color-base)
  );
  --pos-base-case-bottom: bottom left;
  --size-base-case-bottom: 100% 58%;

  --base-case-top: var(--img-base-case-top) var(--pos-base-case-top) /
    var(--size-base-case-top);
  --img-base-case-top: linear-gradient(
    to top,
    var(--color-base-shadow) calc(var(--unit) * 0.3),
    var(--color-base) calc(var(--unit) * 0.5),
    var(--color-base)
  );
  --pos-base-case-top: top left;
  --size-base-case-top: 100% 22%;

  --base-case-top-shadow: var(--img-base-case-top-left-highlight-cover)
      var(--pos-base-case-top-left-highlight-cover) /
      var(--size-base-case-top-left-highlight-cover),
    var(--img-base-case-top-left-highlight)
      var(--pos-base-case-top-left-highlight) /
      var(--size-base-case-top-left-highlight),
    var(--img-base-case-top-right-highlight-cover)
      var(--pos-base-case-top-right-highlight-cover) /
      var(--size-base-case-top-right-highlight-cover),
    var(--img-base-case-top-right-highlight)
      var(--pos-base-case-top-right-highlight) /
      var(--size-base-case-top-right-highlight),
    var(--img-base-case-top-shadow-center)
      var(--pos-base-case-top-shadow-center) /
      var(--size-base-case-top-shadow-center),
    var(--img-base-case-top-crack-round) var(--pos-base-case-top-crack-left) /
      var(--size-base-case-top-crack-round),
    var(--img-base-case-top-crack-round) var(--pos-base-case-top-crack-right) /
      var(--size-base-case-top-crack-round),
    var(--img-base-case-top-shadow-round) var(--pos-base-case-top-shadow-left) /
      var(--size-base-case-top-shadow-round),
    var(--img-base-case-top-shadow-round) var(--pos-base-case-top-shadow-right) /
      var(--size-base-case-top-shadow-round);

  --img-base-case-top-left-highlight: radial-gradient(
    ellipse at 100% 0%,
    var(--color-transparent) 46%,
    var(--color-base) 49%,
    var(--color-base-highlight) 50% 51.6%,
    var(--color-base) 55%,
    var(--color-transparent) 61%
  );
  --pos-base-case-top-left-highlight: calc(var(--unit) * 1.55)
    calc(var(--unit) * 6.845);
  --size-base-case-top-left-highlight: calc(var(--unit) * 6.15)
    calc(var(--unit) * 4.5);

  --img-base-case-top-left-highlight-cover: radial-gradient(
    ellipse at 140% 50%,
    var(--color-transparent) 39%,
    var(--color-base-shadow-alt) 56%,
    var(--color-transparent) 61%
  );
  --pos-base-case-top-left-highlight-cover: calc(var(--unit) * 1.9)
    calc(var(--unit) * 0.45);
  --size-base-case-top-left-highlight-cover: calc(var(--unit) * 3.15)
    calc(var(--unit) * 9.5);

  --img-base-case-top-right-highlight: radial-gradient(
    ellipse at 0% 0%,
    var(--color-transparent) 46%,
    var(--color-base) 49%,
    var(--color-base-highlight) 50% 51.6%,
    var(--color-base) 55%,
    var(--color-transparent) 61%
  );
  --pos-base-case-top-right-highlight: calc(var(--unit) * 29.275)
    calc(var(--unit) * 6.845);
  --size-base-case-top-right-highlight: calc(var(--unit) * 6.15)
    calc(var(--unit) * 4.5);

  --img-base-case-top-right-highlight-cover: radial-gradient(
    ellipse at -40% 50%,
    var(--color-transparent) 39%,
    var(--color-base-shadow-alt) 56%,
    var(--color-transparent) 61%
  );
  --pos-base-case-top-right-highlight-cover: calc(var(--unit) * 31.95)
    calc(var(--unit) * 0.45);
  --size-base-case-top-right-highlight-cover: calc(var(--unit) * 3.15)
    calc(var(--unit) * 9.5);

  --img-base-case-top-crack-round: radial-gradient(
    circle,
    var(--color-transparent) 34%,
    var(--color-base-crack) 34.5% 35.5%,
    var(--color-transparent) 36% 71%
  );
  --pos-base-case-top-crack-left: calc(var(--unit) * 0.75)
    calc(var(--unit) * -0.35);
  --pos-base-case-top-crack-right: calc(var(--unit) * 23.075)
    calc(var(--unit) * -0.35);
  --size-base-case-top-crack-round: calc(var(--unit) * 13.5)
    calc(var(--unit) * 13.5);

  --img-base-case-top-shadow-round: radial-gradient(
    circle,
    var(--color-base-shadow) 34%,
    /* var(--color-base-crack) 34.5% 36.5%, */ var(--color-base-shadow) 38.5%
      41%,
    var(--color-base-shadow-offset) 53%,
    var(--color-base-shadow-alt) 64% 69%,
    var(--color-base) 71%
  );
  --pos-base-case-top-shadow-left: calc(var(--unit) * 2.75)
    calc(var(--unit) * 0.75);
  --pos-base-case-top-shadow-right: calc(var(--unit) * 24.75)
    calc(var(--unit) * 0.75);
  --size-base-case-top-shadow-round: calc(var(--unit) * 9.5)
    calc(var(--unit) * 9.5);
  --img-base-case-top-shadow-center: linear-gradient(
    to top,
    var(--color-base),
    var(--color-base-highlight) calc(var(--unit) * 0.15)
      calc(var(--unit) * 0.27),
    var(--color-base) calc(var(--unit) * 0.35),
    var(--color-base-shadow) calc(var(--unit) * 0.5) calc(var(--unit) * 7.15),
    var(--color-base-crack) calc(var(--unit) * 7.2) calc(var(--unit) * 7.3),
    var(--color-base-shadow) calc(var(--unit) * 7.3) calc(var(--unit) * 7.4),
    var(--color-base-shadow-offset) calc(var(--unit) * 8.4),
    var(--color-base-shadow-alt) calc(var(--unit) * 9) calc(var(--unit) * 9.4),
    var(--color-base)
  );
  --pos-base-case-top-shadow-center: calc(var(--unit) * 7.7)
    calc(var(--unit) * 0.75);
  --size-base-case-top-shadow-center: calc(var(--unit) * 22)
    calc(var(--unit) * 9.55);
}
div {
  /* Screen and Speaker components */
  --screen: var(--message), var(--speaker-lines-top), var(--speaker),
    var(--speaker-lines), var(--speaker-lines-shadow), var(--base-screen);

  --base-screen: var(--img-base-screen) var(--pos-base-screen) /
    var(--size-base-screen);
  --img-base-screen: linear-gradient(
    to top,
    var(--color-black),
    var(--color-black)
  );
  --size-base-screen: 98.5% 20%;
  --pos-base-screen: 70% 27.5%;

  --speaker: var(--img-speaker) var(--pos-speaker) / var(--size-speaker);
  --img-speaker: radial-gradient(
    circle,
    var(--color-black),
    var(--color-black) 50%,
    var(--color-transparent) 50%
  );
  --pos-speaker: 8% 23%;
  --size-speaker: 33% 33%;

  --speaker-lines: var(--img-speaker-lines) var(--pos-speaker-lines) /
    var(--size-speaker-lines);
  --img-speaker-lines: repeating-linear-gradient(
    to bottom,
    var(--color-black) 0 calc(var(--unit) * 0.56),
    var(--color-transparent) calc(var(--unit) * 0.56) calc(var(--unit) * 1.13)
  );
  --pos-speaker-lines: 22% 27.5%;
  --size-speaker-lines: 98% 20%;

  --speaker-lines-shadow: var(--img-speaker-lines-shadow)
    var(--pos-speaker-lines-shadow) / var(--size-speaker-lines-shadow);
  --img-speaker-lines-shadow: repeating-linear-gradient(
    to bottom,
    var(--color-black) 0 calc(var(--unit) * 0.56),
    var(--color-dust) calc(var(--unit) * 1.13)
  );
  --pos-speaker-lines-shadow: 2% 27.5%;
  --size-speaker-lines-shadow: 33% 20%;

  --speaker-lines-top: var(--img-speaker-lines-top) var(--pos-speaker-lines-top) /
    var(--size-speaker-lines-top);
  --img-speaker-lines-top: repeating-linear-gradient(
    to bottom,
    var(--color-transparent) 0 calc(var(--unit) * 0.86),
    var(--color-dust) calc(var(--unit) * 1.13)
  );
  --pos-speaker-lines-top: 2% 27.5%;
  --size-speaker-lines-top: 33% 20%;
}

/* Main interactive area on the device */
div::before {
  display: inline-block;
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--unit) * 1.5);
  right: calc(var(--unit) * 1.75);
  top: calc(var(--unit) * 25);
  bottom: calc(var(--unit) * 5.5);

  border-top-left-radius: calc(var(--unit) * 2.5);
  border-top-right-radius: calc(var(--unit) * 2.5);
  border-bottom-left-radius: calc(var(--unit) * 4);
  border-bottom-right-radius: calc(var(--unit) * 4);

  background: var(--helper-text-0-6), var(--helper-text-0-7),
    var(--helper-text-0-9), var(--helper-text-1-3), var(--helper-text-1-4),
    var(--helper-text-1-5), var(--helper-text-1-6), var(--helper-text-1-7),
    var(--helper-text-1-8), var(--helper-text-1-9), var(--helper-text-1-10),
    var(--helper-text-5-8), var(--helper-text-5-9), var(--helper-text-5-10),
    var(--helper-text-6-8), var(--key-a), var(--key-b), var(--key-c),
    var(--key-d), var(--key-e), var(--key-f), var(--key-g), var(--key-h),
    var(--key-i), var(--key-j), var(--key-k), var(--key-l), var(--key-m),
    var(--key-n), var(--key-o), var(--key-p), var(--key-q), var(--key-r),
    var(--key-s), var(--key-t), var(--key-u), var(--key-v), var(--key-w),
    var(--key-x), var(--key-y), var(--key-z), var(--key--1), var(--key--2),
    var(--key--3), var(--key--4), var(--key--5), var(--key--6), var(--key--7),
    var(--key--8), var(--key--9), var(--key--10), var(--key--11), var(--key--12),
    var(--key--13), var(--key--14), var(--keyboard-area-3),
    var(--keyboard-area-2), var(--logo);

  background-color: var(--color-keyboard-1);
  background-repeat: no-repeat;

  box-shadow: inset 0 calc(var(--unit) * 0.2) calc(var(--unit) * 0.2)
      var(--color-base-shadow),
    0 calc(var(--unit) * 0.05) calc(var(--unit) * 0.15) var(--color-base),
    0 calc(var(--unit) * 0.4) calc(var(--unit) * 0.15)
      var(--color-base-highlight);
}
/* Red Keyboard layer custom properties */
div {
  --keyboard-area-2: var(--keyboard-area-2-3),
    var(--keyboard-area-2-4), var(--keyboard-area-2-5),
    var(--keyboard-area-2-6), var(--keyboard-area-2-1),
    var(--keyboard-area-2-2);
  --keyboard-area-2-1: var(--img-keyboard-area-2-1)
    var(--pos-keyboard-area-2-1) / var(--size-keyboard-area-2-1);
  --img-keyboard-area-2-1: linear-gradient(
    to bottom,
    var(--color-keyboard-2),
    var(--color-keyboard-2)
  );
  --pos-keyboard-area-2-1: calc(var(--unit) * 0.7) calc(var(--unit) * 2.5);
  --size-keyboard-area-2-1: calc(var(--unit) * 32) calc(var(--unit) * 11.2);

  --keyboard-area-2-2: var(--img-keyboard-area-2-2)
    var(--pos-keyboard-area-2-2) / var(--size-keyboard-area-2-2);
  --img-keyboard-area-2-2: linear-gradient(
    to bottom,
    var(--color-keyboard-2),
    var(--color-keyboard-2)
  );
  --pos-keyboard-area-2-2: calc(var(--unit) * 2) calc(var(--unit) * 0.85);
  --size-keyboard-area-2-2: calc(var(--unit) * 29.4)
    calc(var(--unit) * 14.5);

  --keyboard-area-2-3: var(--img-keyboard-area-2-corner)
    var(--pos-keyboard-area-2-3) / var(--size-keyboard-area-2-corner);
  --img-keyboard-area-2-corner: radial-gradient(
    var(--color-keyboard-2),
    var(--color-keyboard-2) 70%,
    var(--color-transparent) 50%
  );
  --pos-keyboard-area-2-3: calc(var(--unit) * 0.7) calc(var(--unit) * 0.85);
  --size-keyboard-area-2-corner: calc(var(--unit) * 3)
    calc(var(--unit) * 3);

  --keyboard-area-2-4: var(--img-keyboard-area-2-corner)
    var(--pos-keyboard-area-2-4) / var(--size-keyboard-area-2-corner);
  --pos-keyboard-area-2-4: calc(var(--unit) * 29.7)
    calc(var(--unit) * 0.85);

  --keyboard-area-2-5: var(--img-keyboard-area-2-corner)
    var(--pos-keyboard-area-2-5) / var(--size-keyboard-area-2-corner);
  --pos-keyboard-area-2-5: calc(var(--unit) * 0.7)
    calc(var(--unit) * 12.35);

  --keyboard-area-2-6: var(--img-keyboard-area-2-corner)
    var(--pos-keyboard-area-2-6) / var(--size-keyboard-area-2-corner);
  --pos-keyboard-area-2-6: calc(var(--unit) * 29.7)
    calc(var(--unit) * 12.35);
}

/* Cyan Keyboard layer custom properties */
div {
  --keyboard-area-3: var(--keyboard-area-3-3), var(--keyboard-area-3-4),
    var(--keyboard-area-3-5), var(--keyboard-area-3-6),
    var(--keyboard-area-3-1), var(--keyboard-area-3-2);
  --keyboard-area-3-1: var(--img-keyboard-area-3-1)
    var(--pos-keyboard-area-3-1) / var(--size-keyboard-area-3-1);
  --img-keyboard-area-3-1: linear-gradient(
    to bottom,
    var(--color-keyboard-3),
    var(--color-keyboard-3)
  );
  --pos-keyboard-area-3-1: calc(var(--unit) * 1.6) calc(var(--unit) * 3.7);
  --size-keyboard-area-3-1: calc(var(--unit) * 30.3) calc(var(--unit) * 10.2);

  --keyboard-area-3-2: var(--img-keyboard-area-3-2)
    var(--pos-keyboard-area-3-2) / var(--size-keyboard-area-3-2);
  --img-keyboard-area-3-2: linear-gradient(
    to bottom,
    var(--color-keyboard-3),
    var(--color-keyboard-3)
  );
  --pos-keyboard-area-3-2: calc(var(--unit) * 3) calc(var(--unit) * 3.1);
  --size-keyboard-area-3-2: calc(var(--unit) * 27.5) calc(var(--unit) * 11.4);

  --keyboard-area-3-3: var(--img-keyboard-area-3-corner)
    var(--pos-keyboard-area-3-3) / var(--size-keyboard-area-3-corner);
  --img-keyboard-area-3-corner: radial-gradient(
    var(--color-keyboard-3),
    var(--color-keyboard-3) 70%,
    var(--color-transparent) 50%
  );
  --pos-keyboard-area-3-3: calc(var(--unit) * 1.6) calc(var(--unit) * 3.1);
  --size-keyboard-area-3-corner: calc(var(--unit) * 2.5)
    calc(var(--unit) * 1.5);

  --keyboard-area-3-4: var(--img-keyboard-area-3-corner)
    var(--pos-keyboard-area-3-4) / var(--size-keyboard-area-3-corner);
  --pos-keyboard-area-3-4: calc(var(--unit) * 29.4) calc(var(--unit) * 3.1);

  --keyboard-area-3-5: var(--img-keyboard-area-3-corner)
    var(--pos-keyboard-area-3-5) / var(--size-keyboard-area-3-corner);
  --pos-keyboard-area-3-5: calc(var(--unit) * 1.6) calc(var(--unit) * 13);

  --keyboard-area-3-6: var(--img-keyboard-area-3-corner)
    var(--pos-keyboard-area-3-6) / var(--size-keyboard-area-3-corner);
  --pos-keyboard-area-3-6: calc(var(--unit) * 29.4) calc(var(--unit) * 13);
}

/* Keyboard helper text */
div {
  --helper-text-0-6: var(--img-helper-text) var(--pos-helper-text-0-6) /
    var(--size-helper-text);
  --helper-text-0-7: var(--img-helper-text) var(--pos-helper-text-0-7) /
    var(--size-helper-text);
  --helper-text-0-9: var(--img-helper-text) var(--pos-helper-text-0-9) /
    var(--size-helper-text-3);

  --helper-text-1-3: var(--img-helper-text) var(--pos-helper-text-1-3) /
    var(--size-helper-text);
  --helper-text-1-4: var(--img-helper-text) var(--pos-helper-text-1-4) /
    var(--size-helper-text);
  --helper-text-1-5: var(--img-helper-text) var(--pos-helper-text-1-5) /
    var(--size-helper-text-2);
  --helper-text-1-6: var(--img-helper-text) var(--pos-helper-text-1-6) /
    var(--size-helper-text-2);
  --helper-text-1-7: var(--img-helper-text) var(--pos-helper-text-1-7) /
    var(--size-helper-text-2);
  --helper-text-1-8: var(--img-helper-text) var(--pos-helper-text-1-8) /
    var(--size-helper-text);
  --helper-text-1-9: var(--img-helper-text) var(--pos-helper-text-1-9) /
    var(--size-helper-text-4);
  --helper-text-1-10: var(--img-helper-text) var(--pos-helper-text-1-10) /
    var(--size-helper-text-2);

  --helper-text-5-8: var(--img-helper-text) var(--pos-helper-text-5-8) /
    var(--size-helper-text);
  --helper-text-5-9: var(--img-helper-text) var(--pos-helper-text-5-9) /
    var(--size-helper-text-2);
  --helper-text-5-10: var(--img-helper-text) var(--pos-helper-text-5-10) /
    var(--size-helper-text-2);

  --helper-text-6-8: var(--img-helper-text) var(--pos-helper-text-6-8) /
    var(--size-helper-text-2);

  --img-helper-text: repeating-linear-gradient(
    to right,
    var(--color-helper-text) 0 calc(var(--unit) * 0.18),
    var(--color-transparent) calc(var(--unit) * 0.1) calc(var(--unit) * 0.33)
  );
  --size-helper-text: calc(var(--unit) * 2) calc(var(--unit) * 0.35);
  --size-helper-text-2: calc(var(--unit) * 1.5) calc(var(--unit) * 0.35);
  --size-helper-text-3: calc(var(--unit) * 1.2) calc(var(--unit) * 0.35);
  --size-helper-text-4: calc(var(--unit) * 0.8) calc(var(--unit) * 0.35);

  --pos-helper-text-0-6: calc(var(--unit) * 17.15) calc(var(--unit) * 2.3);
  --pos-helper-text-0-7: calc(var(--unit) * 20.2) calc(var(--unit) * 2.3);
  --pos-helper-text-0-9: calc(var(--unit) * 26.5) calc(var(--unit) * 2.3);
  --pos-helper-text-1-3: calc(var(--unit) * 8.3) calc(var(--unit) * 3.2);
  --pos-helper-text-1-4: calc(var(--unit) * 11.2) calc(var(--unit) * 3.2);
  --pos-helper-text-1-5: calc(var(--unit) * 14.4) calc(var(--unit) * 3.2);
  --pos-helper-text-1-6: calc(var(--unit) * 17.4) calc(var(--unit) * 3.2);
  --pos-helper-text-1-7: calc(var(--unit) * 20.4) calc(var(--unit) * 3.2);
  --pos-helper-text-1-8: calc(var(--unit) * 23.2) calc(var(--unit) * 3.2);
  --pos-helper-text-1-9: calc(var(--unit) * 26.85) calc(var(--unit) * 3.2);
  --pos-helper-text-1-10: calc(var(--unit) * 29.35) calc(var(--unit) * 3.2);
  --pos-helper-text-5-8: calc(var(--unit) * 23.2) calc(var(--unit) * 13.8);
  --pos-helper-text-5-9: calc(var(--unit) * 26.45) calc(var(--unit) * 13.8);
  --pos-helper-text-5-10: calc(var(--unit) * 29.45) calc(var(--unit) * 13.8);
  --pos-helper-text-6-8: calc(var(--unit) * 23.4) calc(var(--unit) * 14.7);
}

/* keys! */
div {
  --col-1: calc(var(--unit) * 1.9);
  --col-2: calc(var(--unit) * 4.9);
  --col-3: calc(var(--unit) * 7.9);
  --col-4: calc(var(--unit) * 10.9);
  --col-5: calc(var(--unit) * 13.9);
  --col-6: calc(var(--unit) * 16.9);
  --col-7: calc(var(--unit) * 19.9);
  --col-8: calc(var(--unit) * 22.9);
  --col-9: calc(var(--unit) * 25.9);
  --col-10: calc(var(--unit) * 28.9);

  --row-1: calc(var(--unit) * 3.8);
  --row-2: calc(var(--unit) * 6.4);
  --row-3: calc(var(--unit) * 9);
  --row-4: calc(var(--unit) * 11.6);

  --key-a: var(--key-letter-a,) var(--img-key-vowel) var(--col-1) var(--row-2) / var(--size-key);
  --key-b: var(--key-letter-b,) var(--img-key) var(--col-2) var(--row-2) / var(--size-key);
  --key-c: var(--key-letter-c,) var(--img-key) var(--col-3) var(--row-2) / var(--size-key);
  --key-d: var(--key-letter-d,) var(--img-key) var(--col-4) var(--row-2) / var(--size-key);
  --key-e: var(--key-letter-e,) var(--img-key-vowel) var(--col-5) var(--row-2) / var(--size-key);
  --key-f: var(--key-letter-f,) var(--img-key) var(--col-6) var(--row-2) / var(--size-key);
  --key-g: var(--key-letter-g,) var(--img-key) var(--col-7) var(--row-2) / var(--size-key);
  --key-h: var(--key-letter-h,) var(--img-key) var(--col-8) var(--row-2) / var(--size-key);
  --key-i: var(--key-letter-i,) var(--img-key-vowel) var(--col-9) var(--row-2) / var(--size-key);
  --key-j: var(--key-letter-j,) var(--img-key) var(--col-10) var(--row-2) / var(--size-key);
  --key-k: var(--key-letter-k,) var(--img-key) var(--col-1) var(--row-3) / var(--size-key);
  --key-l: var(--key-letter-l,) var(--img-key) var(--col-2) var(--row-3) / var(--size-key);
  --key-m: var(--key-letter-m,) var(--img-key) var(--col-3) var(--row-3) / var(--size-key);
  --key-n: var(--key-letter-n,) var(--img-key) var(--col-4) var(--row-3) / var(--size-key);
  --key-o: var(--key-letter-o,) var(--img-key-vowel) var(--col-5) var(--row-3) / var(--size-key);
  --key-p: var(--key-letter-p,) var(--img-key) var(--col-6) var(--row-3) / var(--size-key);
  --key-q: var(--key-letter-q,) var(--img-key) var(--col-7) var(--row-3) / var(--size-key);
  --key-r: var(--key-letter-r,) var(--img-key) var(--col-8) var(--row-3) / var(--size-key);
  --key-s: var(--key-letter-s,) var(--img-key) var(--col-9) var(--row-3) / var(--size-key);
  --key-t: var(--key-letter-t,) var(--img-key) var(--col-10) var(--row-3) / var(--size-key);
  --key-u: var(--key-letter-u,) var(--img-key-vowel) var(--col-1) var(--row-4) / var(--size-key);
  --key-v: var(--key-letter-v,) var(--img-key) var(--col-2) var(--row-4) / var(--size-key);
  --key-w: var(--key-letter-w,) var(--img-key) var(--col-3) var(--row-4) / var(--size-key);
  --key-x: var(--key-letter-x,) var(--img-key) var(--col-4) var(--row-4) / var(--size-key);
  --key-y: var(--key-letter-y,) var(--img-key) var(--col-5) var(--row-4) / var(--size-key);
  --key-z: var(--key-letter-z,) var(--img-key) var(--col-6) var(--row-4) / var(--size-key);
  --key--1: var(--key-off,) var(--img-key-ctrl) var(--col-1) var(--row-1) / var(--size-key);
  --key--2: var(--key-go,) var(--img-key-ctrl) var(--col-2) var(--row-1) / var(--size-key);
  --key--3: var(--key-replay,) var(--img-key-ctrl) var(--col-3) var(--row-1) / var(--size-key);
  --key--4: var(--key-repeat,) var(--img-key-ctrl) var(--col-4) var(--row-1) / var(--size-key);
  --key--5: var(--key-clue,) var(--img-key-ctrl) var(--col-5) var(--row-1) / var(--size-key);
  --key--6: var(--key-word,) var(--img-key-ctrl) var(--col-6) var(--row-1) / var(--size-key);
  --key--7: var(--key-code,) var(--img-key-ctrl) var(--col-7) var(--row-1) / var(--size-key);
  --key--8: var(--key-letters,) var(--img-key-ctrl) var(--col-8) var(--row-1) / var(--size-key);
  --key--9: var(--key-say-it,) var(--img-key-ctrl) var(--col-9) var(--row-1) / var(--size-key);
  --key--10: var(--key-on,) var(--img-key-ctrl) var(--col-10) var(--row-1) / var(--size-key);
  --key--11: var(--key-tick,) var(--img-key-ctrl) var(--col-7) var(--row-4) / var(--size-key);
  --key--12: var(--key-pound,) var(--img-key-ctrl) var(--col-8) var(--row-4) / var(--size-key);
  --key--13: var(--key-slash,) var(--img-key-ctrl) var(--col-9) var(--row-4) / var(--size-key);
  --key--14: var(--key-enter,) var(--img-key-ctrl) var(--col-10) var(--row-4) / var(--size-key);
  --img-key: radial-gradient(
    var(--color-consonant) 85%,
    var(--color-transparent) 50%
  );
  --img-key-vowel: radial-gradient(
    var(--color-vowel) 85%,
    var(--color-transparent) 50%
  );
  --img-key-ctrl: radial-gradient(
    var(--color-key-ctrl) 85%,
    var(--color-transparent) 50%
  );
  --size-key: calc(var(--unit) * 2.6) calc(var(--unit) * 2.1);
}
div {
  /* Letters... I like it simple so I didn't finish the alphabet... but if I do again... The structure here is to include a closing comma as this background image is prepended to the --key-* background lists */
  /**/
  --key-letter-a:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 2.85) calc(var(--unit) * 7.4) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        75deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.55),
        var(--color-transparent) calc(var(--unit) * 0.55)
      )
      calc(var(--unit) * 3.1) calc(var(--unit) * 6.8) / calc(var(--unit) * .8)
      calc(var(--unit) * 1.2),
    linear-gradient(
        285deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.55),
        var(--color-transparent) calc(var(--unit) * 0.55)
      )
      calc(var(--unit) * 2.45) calc(var(--unit) * 6.8) / calc(var(--unit) * .8)
      calc(var(--unit) * 1.2),;
  --key-letter-b:
    radial-gradient(
        ellipse at 0% 25%,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 6.1) calc(var(--unit) * 6.25) / calc(var(--unit) * 3.5)
      calc(var(--unit) * 3.3),
    radial-gradient(
        ellipse at 0% 25%,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 6.1) calc(var(--unit) * 6.8) / calc(var(--unit) * 3.5)
      calc(var(--unit) * 3.4),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 5.9) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    /**/;
  --key-letter-c:
    radial-gradient(
        ellipse at 90% 50%,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 7.3) calc(var(--unit) * 5) / calc(var(--unit) * 2.2)
      calc(var(--unit) * 4.8),;
  --key-letter-d:
    radial-gradient(
        ellipse at 0% 50%,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 12.1) calc(var(--unit) * 4.8) / calc(var(--unit) * 2.2)
      calc(var(--unit) * 5.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 11.9) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    /**/;
  --key-letter-e:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 14.95) calc(var(--unit) * 6.8) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 14.95) calc(var(--unit) * 7.3) / calc(var(--unit) * .5)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 14.95) calc(var(--unit) * 7.8) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 14.8) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-f:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.95) calc(var(--unit) * 6.8) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.95) calc(var(--unit) * 7.3) / calc(var(--unit) * .5)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.8) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-g:
    radial-gradient(
        ellipse at 87.5% 50%,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 19.1) calc(var(--unit) * 4.9) / calc(var(--unit) * 2.4)
      calc(var(--unit) * 5),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 21.25) calc(var(--unit) * 7.35) / calc(var(--unit) * .2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 21.45) calc(var(--unit) * 7.35) / calc(var(--unit) * .2)
      calc(var(--unit) * .6),;
  --key-letter-h:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 23.85) calc(var(--unit) * 7.35) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 23.75) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 24.45) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-i:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 27.1) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-j:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 30.3) calc(var(--unit) * 6.8) / calc(var(--unit) * .2)
      calc(var(--unit) * .8),
    radial-gradient(
        ellipse at 50% 0%,
        var(--color-transparent) calc(var(--unit) * 0.2),
        var(--color-text-key) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) calc(var(--unit) * 0.4)
      )
      calc(var(--unit) * 29.6) calc(var(--unit) * 7.5) / calc(var(--unit) * 1)
      calc(var(--unit) * .6),;
  --key-letter-k:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 2.75) calc(var(--unit) * 9.45) / calc(var(--unit) * .25)
      calc(var(--unit) * 1.2),
    linear-gradient(
        -135deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.55),
        var(--color-transparent) calc(var(--unit) * 0.55)
      )
      calc(var(--unit) * 2.75) calc(var(--unit) * 9.95) / calc(var(--unit) * .8)
      calc(var(--unit) * .7),
    linear-gradient(
        -45deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.55),
        var(--color-transparent) calc(var(--unit) * 0.55)
      )
      calc(var(--unit) * 2.75) calc(var(--unit) * 9.45) / calc(var(--unit) * .8)
      calc(var(--unit) * .7),;
  --key-letter-l:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 5.95) calc(var(--unit) * 10.45) / calc(var(--unit) * .6)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 5.85) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-m:
    linear-gradient(
        70deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 8.8) calc(var(--unit) * 9.45) / calc(var(--unit) * .8)
      calc(var(--unit) * 1),
    linear-gradient(
        290deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 8.8) calc(var(--unit) * 9.45) / calc(var(--unit) * .9)
      calc(var(--unit) * 1),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 8.65) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 9.6) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-n:
    linear-gradient(
        65deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 12) calc(var(--unit) * 9.45) / calc(var(--unit) * 1.2)
      calc(var(--unit) * 1.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 12.4) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 11.8) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-o: radial-gradient(
        ellipse,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 14.4) calc(var(--unit) * 9.05) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 2),
    /**/;
  --key-letter-p:
    radial-gradient(
        ellipse at 0% 25%,
        var(--color-transparent) calc(var(--unit) * 0.4),
        var(--color-text-key) 0 calc(var(--unit) * 0.6),
        var(--color-transparent) calc(var(--unit) * 0.6)
      )
      calc(var(--unit) * 18) calc(var(--unit) * 8.45) / calc(var(--unit) * 5.5)
      calc(var(--unit) * 5.8),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.85) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
  --key-letter-q: radial-gradient(
        ellipse,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 20.4) calc(var(--unit) * 9.05) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 2),
    linear-gradient(
        -135deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 21.15) calc(var(--unit) * 10.15) / calc(var(--unit) * .5)
      calc(var(--unit) * .5),
    /**/;
  --key-letter-r:
    radial-gradient(
        ellipse at 0% 25%,
        var(--color-transparent) calc(var(--unit) * 0.4),
        var(--color-text-key) 0 calc(var(--unit) * 0.6),
        var(--color-transparent) calc(var(--unit) * 0.6)
      )
      calc(var(--unit) * 24) calc(var(--unit) * 8.45) / calc(var(--unit) * 5.5)
      calc(var(--unit) * 5.8),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 23.9) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),
    linear-gradient(
        -135deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 24.15) calc(var(--unit) * 10.15) / calc(var(--unit) * .5)
      calc(var(--unit) * .5),;
  --key-letter-s:
    radial-gradient(
        ellipse at 50% 0%,
        var(--color-transparent) calc(var(--unit) * 0.2),
        var(--color-text-key) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) calc(var(--unit) * 0.4)
      )
      calc(var(--unit) * 26.7) calc(var(--unit) * 10.25) / calc(var(--unit) * 1)
      calc(var(--unit) * .6),
    radial-gradient(
        ellipse at 50% 100%,
        var(--color-transparent) calc(var(--unit) * 0.2),
        var(--color-text-key) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) calc(var(--unit) * 0.4)
      )
      calc(var(--unit) * 26.7) calc(var(--unit) * 9.2) / calc(var(--unit) * 1)
      calc(var(--unit) * .6),
    linear-gradient(
        -145deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 26.8) calc(var(--unit) * 9.8) / calc(var(--unit) * .75)
      calc(var(--unit) * .5),;
  --key-letter-t:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 29.8) calc(var(--unit) * 9.45) / calc(var(--unit) * .8)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 30.1) calc(var(--unit) * 9.45) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.2),;
    /**/;
  --key-letter-u:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 2.8) calc(var(--unit) * 12.1) / calc(var(--unit) * .2)
      calc(var(--unit) * .8),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 3.4) calc(var(--unit) * 12.1) / calc(var(--unit) * .2)
      calc(var(--unit) * .8),
    radial-gradient(
        ellipse at 50% 0%,
        var(--color-transparent) calc(var(--unit) * 0.2),
        var(--color-text-key) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) calc(var(--unit) * 0.4)
      )
      calc(var(--unit) * 2.7) calc(var(--unit) * 12.8) / calc(var(--unit) * 1)
      calc(var(--unit) * .6),;
  --key-letter-v:
    linear-gradient(
        75deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 5.8) calc(var(--unit) * 12.1) / calc(var(--unit) * .8)
      calc(var(--unit) * 1.2),
    linear-gradient(
        285deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 5.8) calc(var(--unit) * 12.1) / calc(var(--unit) * .9)
      calc(var(--unit) * 1.2),;
  --key-letter-w:
    linear-gradient(
        75deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 8.5) calc(var(--unit) * 12.1) / calc(var(--unit) * .8)
      calc(var(--unit) * 1.2),
    linear-gradient(
        285deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 8.7) calc(var(--unit) * 12.3) / calc(var(--unit) * .6)
      calc(var(--unit) * 1),
    linear-gradient(
        75deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 9.05) calc(var(--unit) * 12.3) / calc(var(--unit) * .6)
      calc(var(--unit) * 1),
    linear-gradient(
        285deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key) 0 calc(var(--unit) * 0.5),
        var(--color-transparent) calc(var(--unit) * 0.5)
      )
      calc(var(--unit) * 9) calc(var(--unit) * 12.1) / calc(var(--unit) * .9)
      calc(var(--unit) * 1.2),;
  --key-letter-x:
    linear-gradient(
        60deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 11.75) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 1.2),
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 11.05) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 1.2),;
  --key-letter-y:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 15.1) calc(var(--unit) * 12.45) / calc(var(--unit) * .2)
      calc(var(--unit) * .8),
    linear-gradient(
        60deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 14.45) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * .6),
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 14.4) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * .6),;
  --key-letter-z:
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.85) calc(var(--unit) * 12.1) / calc(var(--unit) * .7)
      calc(var(--unit) * .2),
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 17.05) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 1.2),
    linear-gradient(
        to right,
        var(--color-text-key),
        var(--color-text-key)
      )
      calc(var(--unit) * 17.95) calc(var(--unit) * 13.1) / calc(var(--unit) * .7)
      calc(var(--unit) * .2),;
  --key-off:
    radial-gradient(
        ellipse,
        var(--color-transparent) calc(var(--unit) * .2),
        var(--color-text-key-alt) 0 calc(var(--unit) * .3),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 2.2) calc(var(--unit) * 4.35) / calc(var(--unit) * .7)
      calc(var(--unit) * 1),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 2.9) calc(var(--unit) * 4.4) / calc(var(--unit) * .6)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 2.9) calc(var(--unit) * 4.75) / calc(var(--unit) * .5)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 2.9) calc(var(--unit) * 4.4) / calc(var(--unit) * .15)
      calc(var(--unit) * .85),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 3.55) calc(var(--unit) * 4.4) / calc(var(--unit) * .6)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 3.55) calc(var(--unit) * 4.75) / calc(var(--unit) * .5)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 3.55) calc(var(--unit) * 4.4) / calc(var(--unit) * .15)
      calc(var(--unit) * .85),;
  --key-go:
    radial-gradient(
        ellipse at 87.5% 50%,
        var(--color-transparent) calc(var(--unit) * 0.375),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.525),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 5.4) calc(var(--unit) * 4.35) / calc(var(--unit) * .7)
      calc(var(--unit) * 1),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 5.75) calc(var(--unit) * 4.8) / calc(var(--unit) * .2)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 5.95) calc(var(--unit) * 4.8) / calc(var(--unit) * .15)
      calc(var(--unit) * .4),
    radial-gradient(
        ellipse,
        var(--color-transparent) calc(var(--unit) * .2),
        var(--color-text-key-alt) 0 calc(var(--unit) * .3),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 6.2) calc(var(--unit) * 4.35) / calc(var(--unit) * .7)
      calc(var(--unit) * 1),;
  --key-replay:
    linear-gradient(
        30deg,
        var(--color-transparent) 0 calc(var(--unit) * .25),
        var(--color-text-key-alt) 0
      )
      calc(var(--unit) * 8.6) calc(var(--unit) * 5.1) / calc(var(--unit) * .5)
      calc(var(--unit) * .3),
    linear-gradient(
        -210deg,
        var(--color-transparent) 0 calc(var(--unit) * .25),
        var(--color-text-key-alt) 0
      )
      calc(var(--unit) * 8.6) calc(var(--unit) * 4.8) / calc(var(--unit) * .5)
      calc(var(--unit) * .3),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 9.1) calc(var(--unit) * 4.55) / calc(var(--unit) * .5)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 9.1) calc(var(--unit) * 5) / calc(var(--unit) * .5)
      calc(var(--unit) * .2),
    radial-gradient(
        circle at 0% 50%,
        var(--color-transparent) calc(var(--unit) * .1),
        var(--color-text-key-alt) 0 calc(var(--unit) * .3),
        var(--color-transparent) 0 
      )
      calc(var(--unit) * 9.5) calc(var(--unit) * 4.55) / calc(var(--unit) * .6)
      calc(var(--unit) * .6),;
  --key-repeat: 
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 11.9) calc(var(--unit) * 4.5) / calc(var(--unit) * .6)
      calc(var(--unit) * .8),
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 12.3) calc(var(--unit) * 4.5) / calc(var(--unit) * .6)
      calc(var(--unit) * .8),;
  --key-clue:
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 14.7) calc(var(--unit) * 4.65) / calc(var(--unit) * 1)
      calc(var(--unit) * .2),;
  --key-word: 
    linear-gradient(
        to right,
        var(--color-key-ctrl),
        var(--color-key-ctrl)
      )
      calc(var(--unit) * 17.75) calc(var(--unit) * 4.65) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 18.15) calc(var(--unit) * 4.85) / calc(var(--unit) * .2)
      calc(var(--unit) * .4),
    radial-gradient(
        circle,
        var(--color-transparent) 0 calc(var(--unit) * 0.2),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 17.85) calc(var(--unit) * 4.25) / calc(var(--unit) * .8)
      calc(var(--unit) * .8),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.125),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 18.1) calc(var(--unit) * 5.25) / calc(var(--unit) * .3)
      calc(var(--unit) * .3),;
  --key-code: 
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.35),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 20.85) calc(var(--unit) * 4.25) / calc(var(--unit) * .8)
      calc(var(--unit) * .8),
    linear-gradient(
        -80deg,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 20.8) calc(var(--unit) * 4.85) / calc(var(--unit) * .5)
      calc(var(--unit) * .6),
    linear-gradient(
        80deg,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 21.15) calc(var(--unit) * 4.85) / calc(var(--unit) * .5)
      calc(var(--unit) * .6),;
  --key-letters: 
    linear-gradient(
        to right,
        var(--color-key-ctrl),
        var(--color-key-ctrl)
      )
      calc(var(--unit) * 24.05) calc(var(--unit) * 4.35) / calc(var(--unit) * .2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 24.25) calc(var(--unit) * 4.55) / calc(var(--unit) * .1)
      calc(var(--unit) * .2),
    radial-gradient(
        circle,
        var(--color-transparent) 0 calc(var(--unit) * 0.1),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.2),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 24.05) calc(var(--unit) * 4.15) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.0625),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 24.225) calc(var(--unit) * 4.8) / calc(var(--unit) * .15)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-key-ctrl),
        var(--color-key-ctrl)
      )
      calc(var(--unit) * 23.45) calc(var(--unit) * 4.75) / calc(var(--unit) * .2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 23.65) calc(var(--unit) * 4.95) / calc(var(--unit) * .1)
      calc(var(--unit) * .2),
    radial-gradient(
        circle,
        var(--color-transparent) 0 calc(var(--unit) * 0.1),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.2),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 23.45) calc(var(--unit) * 4.55) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.0625),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 23.625) calc(var(--unit) * 5.2) / calc(var(--unit) * .15)
      calc(var(--unit) * .15),
    linear-gradient(
        to right,
        var(--color-key-ctrl),
        var(--color-key-ctrl)
      )
      calc(var(--unit) * 24.65) calc(var(--unit) * 4.75) / calc(var(--unit) * .2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 24.85) calc(var(--unit) * 4.95) / calc(var(--unit) * .1)
      calc(var(--unit) * .2),
    radial-gradient(
        circle,
        var(--color-transparent) 0 calc(var(--unit) * 0.1),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.2),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 24.65) calc(var(--unit) * 4.55) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.0625),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 24.825) calc(var(--unit) * 5.2) / calc(var(--unit) * .15)
      calc(var(--unit) * .15),;
  --key-say-it: 
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.25),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 26.5) calc(var(--unit) * 4.2) / calc(var(--unit) * .6)
      calc(var(--unit) * .6),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.25),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 27.25) calc(var(--unit) * 4.2) / calc(var(--unit) * .6)
      calc(var(--unit) * .6),
    radial-gradient(
        circle at 50% -20%,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.6),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 26.5) calc(var(--unit) * 4.9) / calc(var(--unit) * 1.35)
      calc(var(--unit) * .7),;
  --key-on:
    radial-gradient(
        ellipse,
        var(--color-transparent) calc(var(--unit) * .2),
        var(--color-text-key-alt) 0 calc(var(--unit) * .3),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 29.5) calc(var(--unit) * 4.35) / calc(var(--unit) * .7)
      calc(var(--unit) * 1),
    linear-gradient(
        65deg,
        var(--color-transparent) calc(var(--unit) * 0.3),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) calc(var(--unit) * 0.4)
      )
      calc(var(--unit) * 30.3) calc(var(--unit) * 4.4) / calc(var(--unit) * .8)
      calc(var(--unit) * .8),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 30.2) calc(var(--unit) * 4.45) / calc(var(--unit) * .15)
      calc(var(--unit) * .8),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 30.65) calc(var(--unit) * 4.45) / calc(var(--unit) * .15)
      calc(var(--unit) * .8),;
  --key-tick: 
    linear-gradient(
        300deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 21.1) calc(var(--unit) * 12.3) / calc(var(--unit) * .6)
      calc(var(--unit) * .8),;
  --key-pound:
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 23.6) calc(var(--unit) * 12.3) / calc(var(--unit) * 1.2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 23.6) calc(var(--unit) * 12.8) / calc(var(--unit) * 1.2)
      calc(var(--unit) * .2),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 23.8) calc(var(--unit) * 12.1) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.1),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 24.4) calc(var(--unit) * 12.1) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.1),;
  --key-slash: 
    linear-gradient(
        60deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.8),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 26.7) calc(var(--unit) * 12.1) / calc(var(--unit) * 1.6)
      calc(var(--unit) * 1.2),;
  --key-enter: 
    linear-gradient(
        -60deg,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 29.75) calc(var(--unit) * 12.1) / calc(var(--unit) * .5)
      calc(var(--unit) * .6),
    linear-gradient(
        60deg,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 30.15) calc(var(--unit) * 12.1) / calc(var(--unit) * .5)
      calc(var(--unit) * .6),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 30.0) calc(var(--unit) * 12.7) / calc(var(--unit) * .4)
      calc(var(--unit) * .55),;
  /**/
}

/* logo */
div {
  --logo: 
    var(--logo-1),
    var(--logo-2),
    var(--logo-3),
    var(--logo-4),
    var(--logo-5),
    var(--logo-6),
    var(--logo-7),
    var(--logo-8),
    var(--logo-9),
    var(--logo-10),
    var(--logo-11)/**,
    url('https://assets.codepen.io/61811/speakspelllogo.png?format=auto') calc(var(--unit) * 1.82) calc(var(--unit) * 15.45) / calc(var(--unit) * 44.2 / 2.85) calc(var(--unit) * 17.5 / 2.85)/**/;
  
  --logo-1: 
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 2.0) calc(var(--unit) * 17.85) / calc(var(--unit) * .4) calc(var(--unit) * .5),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 3.25) calc(var(--unit) * 16.55) / calc(var(--unit) * .35) calc(var(--unit) * .5),
    linear-gradient(15deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-1) 0 calc(var(--unit) * 1.15), var(--color-transparent) 0) calc(var(--unit) * 2.15) calc(var(--unit) * 16.95) / calc(var(--unit) * 1.35) calc(var(--unit) * 1.2),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 3.25) calc(var(--unit) * 16.35) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 3.2) calc(var(--unit) * 16.85) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 2) calc(var(--unit) * 18.2) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .25), var(--color-transparent) 0) calc(var(--unit) * 2) calc(var(--unit) * 17.6) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    radial-gradient(circle at 50% 105%, var(--color-transparent) 0 calc(var(--unit) * .4), var(--color-logo-1) 0 calc(var(--unit) * .9), var(--color-transparent) 0) calc(var(--unit) * 2.05) calc(var(--unit) * 15.75) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.4),
    radial-gradient(circle at 50% -5%, var(--color-transparent) 0 calc(var(--unit) * .4), var(--color-logo-1) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 1.95) calc(var(--unit) * 17.75) / calc(var(--unit) * 1.7) calc(var(--unit) * 1.3),
    radial-gradient(circle at 0% 50%, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-1) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 2.9) calc(var(--unit) * 17.25) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3),
    radial-gradient(circle at 100% 50%, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-1) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 1.55) calc(var(--unit) * 16.35) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3);
  
  --logo-2: 
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 3.6) calc(var(--unit) * 16.95) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 3.6) calc(var(--unit) * 18.75) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 4.5) calc(var(--unit) * 18.75) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 3.95) calc(var(--unit) * 16.95) / calc(var(--unit) * .4) calc(var(--unit) * 2.2),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 4.05) calc(var(--unit) * 17.35) / calc(var(--unit) * .4) calc(var(--unit) * 1.8),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 3.85) calc(var(--unit) * 16.95) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 3.85) calc(var(--unit) * 18.75) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-1) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 3.95) calc(var(--unit) * 16.95) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  --logo-3: 
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .25), var(--color-transparent) 0) calc(var(--unit) * 6.55) calc(var(--unit) * 17.45) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 5.85) calc(var(--unit) * 17) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-keyboard-1), var(--color-keyboard-1)) calc(var(--unit) * 6.25) calc(var(--unit) * 17.4) / calc(var(--unit) * .85) calc(var(--unit) * .2),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-1) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 5.5) calc(var(--unit) * 16.4) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  --logo-4: 
    radial-gradient(ellipse at 50% -20%, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-1) 0 calc(var(--unit) * .75), var(--color-transparent) 0) calc(var(--unit) * 7.05) calc(var(--unit) * 16.95) / calc(var(--unit) * 1.5) calc(var(--unit) * .8),
    linear-gradient(-20deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-1) 0 calc(var(--unit) * 1.05), var(--color-transparent) 0) calc(var(--unit) * 7.05) calc(var(--unit) * 16.35) / calc(var(--unit) * 1) calc(var(--unit) * 1.2),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 8.05) calc(var(--unit) * 16.15) / calc(var(--unit) * .45) calc(var(--unit) * 1.2),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .275), var(--color-transparent) 0) calc(var(--unit) * 7.15) calc(var(--unit) * 16.05) / calc(var(--unit) * .55) calc(var(--unit) * .55),
    radial-gradient(ellipse, var(--color-logo-1) 0 calc(var(--unit) * .35), var(--color-transparent) 0) calc(var(--unit) * 8.1) calc(var(--unit) * 17.15) / calc(var(--unit) * .8) calc(var(--unit) * .5),
    radial-gradient(circle at 50% 150%, var(--color-transparent) 0 calc(var(--unit) * 1.35), var(--color-logo-1) 0 calc(var(--unit) * 1.7), var(--color-transparent) 0) calc(var(--unit) * 7.2) calc(var(--unit) * 15.65) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3);
  
  --logo-5: 
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 8.85) calc(var(--unit) * 16.2) / calc(var(--unit) * .55) calc(var(--unit) * 2.15),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 8.65) calc(var(--unit) * 17.95) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-1), var(--color-logo-1)) calc(var(--unit) * 9.65) calc(var(--unit) * 16.75) / calc(var(--unit) * .5) calc(var(--unit) * .4),
    linear-gradient(-35deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-1) 0 calc(var(--unit) * 1.15), var(--color-transparent) 0) calc(var(--unit) * 9.15) calc(var(--unit) * 16.75) / calc(var(--unit) * 1.35) calc(var(--unit) * 1.2),
    linear-gradient(60deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-1) 0 calc(var(--unit) * 1.2), var(--color-transparent) 0) calc(var(--unit) * 9.3) calc(var(--unit) * 17.25) / calc(var(--unit) * 1.35) calc(var(--unit) * 1.1),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 10.4) calc(var(--unit) * 17.95) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 9.75) calc(var(--unit) * 17.95) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 9.3) calc(var(--unit) * 17.95) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 8.45) calc(var(--unit) * 17.95) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 8.6) calc(var(--unit) * 16.2) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 10.4) calc(var(--unit) * 16.75) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 9.55) calc(var(--unit) * 16.75) / calc(var(--unit) * .45) calc(var(--unit) * .45);
  
  --logo-6: radial-gradient(circle at 50% 95%, var(--color-transparent) 0 calc(var(--unit) * .675), var(--color-logo-2) 0 calc(var(--unit) * .775), var(--color-transparent) 0) calc(var(--unit) * 6.4) calc(var(--unit) * 16.3) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    radial-gradient(circle at 50% 97.5%, var(--color-transparent) 0 calc(var(--unit) * .225), var(--color-logo-2) 0 calc(var(--unit) * .325), var(--color-transparent) 0) calc(var(--unit) * 6.4) calc(var(--unit) * 16.1) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    radial-gradient(circle at 50% 105%, var(--color-transparent) 0 calc(var(--unit) * .625), var(--color-logo-2) 0 calc(var(--unit) * .725), var(--color-transparent) 0) calc(var(--unit) * 7.75) calc(var(--unit) * 16.85) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    radial-gradient(circle at 50% 5%, var(--color-transparent) 0 calc(var(--unit) * .25), var(--color-logo-2) 0 calc(var(--unit) * .35), var(--color-transparent) 0) calc(var(--unit) * 8.05) calc(var(--unit) * 19.2) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    radial-gradient(circle at 5% 50%, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0) calc(var(--unit) * 8.9) calc(var(--unit) * 19.25) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    linear-gradient(-32deg, var(--color-transparent) 0 calc(var(--unit) * .5), var(--color-logo-2) 0 calc(var(--unit) * .6), var(--color-transparent) 0 ) calc(var(--unit) * 7.65) calc(var(--unit) * 18.75) / calc(var(--unit) * .65) calc(var(--unit) * .65),
    linear-gradient(62deg, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0 ) calc(var(--unit) * 7.25) calc(var(--unit) * 18.5) / calc(var(--unit) * .3) calc(var(--unit) * .3),
    linear-gradient(62deg, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0 ) calc(var(--unit) * 6.8) calc(var(--unit) * 18.7) / calc(var(--unit) * .3) calc(var(--unit) * .3),
    linear-gradient(-72deg, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-2) 0 calc(var(--unit) * .4), var(--color-transparent) 0 ) calc(var(--unit) * 8) calc(var(--unit) * 19.2) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    linear-gradient(-65deg, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-2) 0 calc(var(--unit) * .4), var(--color-transparent) 0 ) calc(var(--unit) * 8.05) calc(var(--unit) * 19.2) / calc(var(--unit) * .8) calc(var(--unit) * .8),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 8.8) calc(var(--unit) * 19.15) / calc(var(--unit) * .25) calc(var(--unit) * .075),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 8.65) calc(var(--unit) * 20.2) / calc(var(--unit) * .25) calc(var(--unit) * .1),
    linear-gradient(42deg, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0 ) calc(var(--unit) * 8.35) calc(var(--unit) * 19.95) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(42deg, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0 ) calc(var(--unit) * 7.95) calc(var(--unit) * 20.4) / calc(var(--unit) * .4) calc(var(--unit) * .35),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 8.3) calc(var(--unit) * 20.65) / calc(var(--unit) * .6) calc(var(--unit) * .1),
    linear-gradient(-32deg, var(--color-transparent) 0 calc(var(--unit) * .2), var(--color-logo-2) 0 calc(var(--unit) * .3), var(--color-transparent) 0 ) calc(var(--unit) * 7.5) calc(var(--unit) * 18.55) / calc(var(--unit) * .35) calc(var(--unit) * .35),
    linear-gradient(56deg, var(--color-transparent) 0 calc(var(--unit) * .5), var(--color-logo-2) 0 calc(var(--unit) * .6), var(--color-transparent) 0 ) calc(var(--unit) * 7.5) calc(var(--unit) * 19.15) / calc(var(--unit) * .65) calc(var(--unit) * .65),
    linear-gradient(56deg, var(--color-transparent) 0 calc(var(--unit) * .9), var(--color-logo-2) 0 calc(var(--unit) * 1), var(--color-transparent) 0 ) calc(var(--unit) * 6.8) calc(var(--unit) * 19.35) / calc(var(--unit) * 1) calc(var(--unit) * 1),
    linear-gradient(56deg, var(--color-transparent) 0 calc(var(--unit) * .9), var(--color-keyboard-1) 0 calc(var(--unit) * 1.7), var(--color-transparent) 0 ) calc(var(--unit) * 7.15) calc(var(--unit) * 18.85) / calc(var(--unit) * 1.2) calc(var(--unit) * 2),
    radial-gradient(circle, var(--color-transparent) 0 calc(var(--unit) * .9), var(--color-logo-2) 0 calc(var(--unit) * 1), var(--color-transparent) 0) calc(var(--unit) * 6.05) calc(var(--unit) * 18.7) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45),
    radial-gradient(circle, var(--color-transparent) 0 calc(var(--unit) * .45), var(--color-logo-2) 0 calc(var(--unit) * .55), var(--color-transparent) 0) calc(var(--unit) * 6.1) calc(var(--unit) * 18.65) / calc(var(--unit) * 2.45) calc(var(--unit) * 2.45);
  
  
  --logo-7: 
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) 
      calc(var(--unit) * 9.7) calc(var(--unit) * 19.95) / calc(var(--unit) * .4) calc(var(--unit) * .6),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) 
      calc(var(--unit) * 11) calc(var(--unit) * 18.75) / calc(var(--unit) * .35) calc(var(--unit) * .5),
    linear-gradient(15deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-2) 0 calc(var(--unit) * 1.15), var(--color-transparent) 0)
      calc(var(--unit) * 9.9) calc(var(--unit) * 19.15) / calc(var(--unit) * 1.35) calc(var(--unit) * 1.2),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) 
      calc(var(--unit) * 11) calc(var(--unit) * 18.55) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .225), var(--color-transparent) 0) 
      calc(var(--unit) * 10.95) calc(var(--unit) * 19.05) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) 
      calc(var(--unit) * 9.75) calc(var(--unit) * 20.4) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .25), var(--color-transparent) 0) 
      calc(var(--unit) * 9.75) calc(var(--unit) * 19.8) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    radial-gradient(circle at 50% 105%, var(--color-transparent) 0 calc(var(--unit) * .4), var(--color-logo-2) 0 calc(var(--unit) * .9), var(--color-transparent) 0) 
      calc(var(--unit) * 9.8) calc(var(--unit) * 17.95) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.4),
    radial-gradient(circle at 50% -5%, var(--color-transparent) 0 calc(var(--unit) * .4), var(--color-logo-2) 0 calc(var(--unit) * .85), var(--color-transparent) 0) 
      calc(var(--unit) * 9.7) calc(var(--unit) * 19.95) / calc(var(--unit) * 1.7) calc(var(--unit) * 1.3),
    radial-gradient(circle at 0% 50%, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) 
      calc(var(--unit) * 10.65) calc(var(--unit) * 19.45) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3),
    radial-gradient(circle at 100% 50%, var(--color-transparent) 0 calc(var(--unit) * .3), var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) 
      calc(var(--unit) * 9.3) calc(var(--unit) * 18.55) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3);
  
  --logo-8: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 11.4) calc(var(--unit) * 19.15) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 11.4) calc(var(--unit) * 20.95) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 12.3) calc(var(--unit) * 20.95) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 11.75) calc(var(--unit) * 19.15) / calc(var(--unit) * .4) calc(var(--unit) * 2.2),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 11.85) calc(var(--unit) * 19.55) / calc(var(--unit) * .4) calc(var(--unit) * 1.8),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 11.65) calc(var(--unit) * 19.15) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 11.65) calc(var(--unit) * 20.95) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 11.75) calc(var(--unit) * 19.15) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7)
    ;
  
  --logo-9: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .25), var(--color-transparent) 0) calc(var(--unit) * 14.35) calc(var(--unit) * 20.15) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 13.65) calc(var(--unit) * 19.7) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-keyboard-1), var(--color-keyboard-1)) calc(var(--unit) * 14.05) calc(var(--unit) * 20.1) / calc(var(--unit) * .85) calc(var(--unit) * .2),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-2) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 13.3) calc(var(--unit) * 19.1) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  --logo-10: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 14.7) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 15.3) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 14.7) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 14.7) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 15.1) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * 2.2),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 15.25) calc(var(--unit) * 18.85) / calc(var(--unit) * .4) calc(var(--unit) * 1.8),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 14.95) calc(var(--unit) * 18.65) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 14.95) calc(var(--unit) * 20.45) / calc(var(--unit) * .85) calc(var(--unit) * .4);
  
  --logo-11: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 15.6) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 16.2) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 15.6) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 16.5) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 16.05) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * 2.2),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 16.15) calc(var(--unit) * 18.85) / calc(var(--unit) * .4) calc(var(--unit) * 1.8),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 15.85) calc(var(--unit) * 18.65) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 15.85) calc(var(--unit) * 20.45) / calc(var(--unit) * .85) calc(var(--unit) * .4);
} 

.read {
  --logo-7: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 10) calc(var(--unit) * 18.55) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 10) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 10.9) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 10.35) calc(var(--unit) * 18.55) / calc(var(--unit) * .4) calc(var(--unit) * 2.3),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 10.45) calc(var(--unit) * 18.95) / calc(var(--unit) * .4) calc(var(--unit) * 1.9),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 10.25) calc(var(--unit) * 18.55) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 10.25) calc(var(--unit) * 18.55) / calc(var(--unit) * .8) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 10.25) calc(var(--unit) * 20.45) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    linear-gradient(45deg, var(--color-transparent) 0 calc(var(--unit) * .4) , var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 11.15) calc(var(--unit) * 19) / calc(var(--unit) * 1.95) calc(var(--unit) * 1.8),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 11.6) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 11.9) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 11.75) calc(var(--unit) * 20.45) / calc(var(--unit) * .3) calc(var(--unit) * .4),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 10.35) calc(var(--unit) * 18.55) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  
  --logo-8: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .25), var(--color-transparent) 0) calc(var(--unit) * 13.15) calc(var(--unit) * 20.15) / calc(var(--unit) * .5) calc(var(--unit) * .5),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 12.45) calc(var(--unit) * 19.7) / calc(var(--unit) * .85) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-keyboard-1), var(--color-keyboard-1)) calc(var(--unit) * 12.85) calc(var(--unit) * 20.1) / calc(var(--unit) * .85) calc(var(--unit) * .2),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-2) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 12.1) calc(var(--unit) * 19.1) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  --logo-9:
    radial-gradient(ellipse at 50% -20%, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-2) 0 calc(var(--unit) * .75), var(--color-transparent) 0) calc(var(--unit) * 13.8) calc(var(--unit) * 20.15) / calc(var(--unit) * 1.5) calc(var(--unit) * .8),
    linear-gradient(-20deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-2) 0 calc(var(--unit) * 1.05), var(--color-transparent) 0) calc(var(--unit) * 13.85) calc(var(--unit) * 19.55) / calc(var(--unit) * 1) calc(var(--unit) * 1.2),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 14.85) calc(var(--unit) * 19.35) / calc(var(--unit) * .45) calc(var(--unit) * 1.2),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .275), var(--color-transparent) 0) calc(var(--unit) * 13.9) calc(var(--unit) * 19.25) / calc(var(--unit) * .55) calc(var(--unit) * .55),
    radial-gradient(ellipse, var(--color-logo-2) 0 calc(var(--unit) * .35), var(--color-transparent) 0) calc(var(--unit) * 14.9) calc(var(--unit) * 20.45) / calc(var(--unit) * .8) calc(var(--unit) * .5),
    radial-gradient(circle at 50% 150%, var(--color-transparent) 0 calc(var(--unit) * 1.35), var(--color-logo-2) 0 calc(var(--unit) * 1.7), var(--color-transparent) 0) calc(var(--unit) * 14) calc(var(--unit) * 18.85) / calc(var(--unit) * 1.3) calc(var(--unit) * 1.3);
  
  
  --logo-10: 
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 16.4) calc(var(--unit) * 18.55) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    radial-gradient(circle, var(--color-logo-2) 0 calc(var(--unit) * .2), var(--color-transparent) 0) calc(var(--unit) * 17.1) calc(var(--unit) * 20.45) / calc(var(--unit) * .4) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 16.75) calc(var(--unit) * 18.55) / calc(var(--unit) * .4) calc(var(--unit) * 2.3),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 16.65) calc(var(--unit) * 18.55) / calc(var(--unit) * .2) calc(var(--unit) * .4),
    linear-gradient(to right, var(--color-logo-2), var(--color-logo-2)) calc(var(--unit) * 16.75) calc(var(--unit) * 20.45) / calc(var(--unit) * .5) calc(var(--unit) * .4),
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .4), var(--color-logo-2) 0 calc(var(--unit) * .8), var(--color-transparent) 0) calc(var(--unit) * 15.55) calc(var(--unit) * 19.05) / calc(var(--unit) * 1.5) calc(var(--unit) * 1.8)
    ;
  
  --logo-11: 
    radial-gradient(circle, var(--color-transparent), var(--color-transparent)) calc(var(--unit) * 15.6) calc(var(--unit) * 18.65) / calc(var(--unit) * .4) calc(var(--unit) * .4);
}

.read {
  --key-repeat: 
    linear-gradient(
        45deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.75),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 11.8) calc(var(--unit) * 4.45) / calc(var(--unit) * .9)
      calc(var(--unit) * .9),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 11.5) calc(var(--unit) * 4.75) / calc(var(--unit) * 1.5)
      calc(var(--unit) * .175),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 12.15) calc(var(--unit) * 4.1) / calc(var(--unit) * .2)
      calc(var(--unit) * 1.5),
    linear-gradient(
        -45deg,
        var(--color-transparent) calc(var(--unit) * 0.6),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.75),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 11.8) calc(var(--unit) * 4.45) / calc(var(--unit) * .9)
      calc(var(--unit) * .9),;
  --key-clue:
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 15.15) calc(var(--unit) * 4.65) / calc(var(--unit) * .2)
      calc(var(--unit) * .8),
    radial-gradient(
        ellipse,
        var(--color-transparent) 0 calc(var(--unit) * .2),
        var(--color-text-key-alt) 0 calc(var(--unit) * .4),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 14.8) calc(var(--unit) * 4.15) / calc(var(--unit) * 1)
      calc(var(--unit) * .6),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 15.35) calc(var(--unit) * 4.95) / calc(var(--unit) * .25)
      calc(var(--unit) * .35),;
  --key-word:
    linear-gradient(
        60deg,
        var(--color-transparent) 0 calc(var(--unit) * .15),
        var(--color-text-key-alt) 0 calc(var(--unit) * .25),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 17.85) calc(var(--unit) * 4.9) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    linear-gradient(
        -60deg,
        var(--color-transparent) 0 calc(var(--unit) * .15),
        var(--color-text-key-alt) 0 calc(var(--unit) * .25),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 18.3) calc(var(--unit) * 4.9) / calc(var(--unit) * .4)
      calc(var(--unit) * .4),
    radial-gradient(
        ellipse at 50% 70%,
        var(--color-transparent) 0 calc(var(--unit) * .5),
        var(--color-text-key-alt) 0 calc(var(--unit) * .6),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 17.65) calc(var(--unit) * 4.15) / calc(var(--unit) * 1.2)
      calc(var(--unit) * .75),
    linear-gradient(
        to right,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 18) calc(var(--unit) * 5.15) / calc(var(--unit) * .55)
      calc(var(--unit) * .35),;
  --key-code:
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 20.65) calc(var(--unit) * 4.5) / calc(var(--unit) * .1)
      calc(var(--unit) * .9),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 21.2) calc(var(--unit) * 4.5) / calc(var(--unit) * .1)
      calc(var(--unit) * .9),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 21.75) calc(var(--unit) * 4.5) / calc(var(--unit) * .1)
      calc(var(--unit) * .9),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 20.65) calc(var(--unit) * 5.3) / calc(var(--unit) * 1.15)
      calc(var(--unit) * .1),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 20.95) calc(var(--unit) * 5.25) / calc(var(--unit) * .65)
      calc(var(--unit) * .1),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 20.75) calc(var(--unit) * 4.5) / calc(var(--unit) * .25)
      calc(var(--unit) * .1),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 21.5) calc(var(--unit) * 4.5) / calc(var(--unit) * .25)
      calc(var(--unit) * .1),
    linear-gradient(
        to top,
        var(--color-text-key-alt),
        var(--color-text-key-alt)
      )
      calc(var(--unit) * 20.95) calc(var(--unit) * 4.4) / calc(var(--unit) * .65)
      calc(var(--unit) * .1),;
  --key-letters: 
    radial-gradient(
        circle,
        var(--color-transparent) 0 calc(var(--unit) * 0.05),
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.15),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 23.6) calc(var(--unit) * 4.2) / calc(var(--unit) * .6)
      calc(var(--unit) * .6),
    radial-gradient(
        circle,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.15),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 24.35) calc(var(--unit) * 4.2) / calc(var(--unit) * .6)
      calc(var(--unit) * .6),
    radial-gradient(
        circle at 50% -20%,
        var(--color-text-key-alt) 0 calc(var(--unit) * 0.45),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 23.6) calc(var(--unit) * 5) / calc(var(--unit) * 1.35)
      calc(var(--unit) * .7),;
  --key-say-it:
    radial-gradient(
        ellipse,
        var(--color-transparent) 0 calc(var(--unit) * .3),
        var(--color-text-key-alt) 0 calc(var(--unit) * .5),
        var(--color-transparent) 0
      )
      calc(var(--unit) * 26.5) calc(var(--unit) * 4.5) / calc(var(--unit) * 1.1)
      calc(var(--unit) * .7),
    linear-gradient(
        33deg,
        var(--color-transparent) 0 calc(var(--unit) * .3),
        var(--color-text-key-alt) 0 calc(var(--unit) * .5)
      )
      calc(var(--unit) * 27.35) calc(var(--unit) * 4.8) / calc(var(--unit) * .5)
      calc(var(--unit) * .5),
    linear-gradient(
        123deg,
        var(--color-transparent) 0 calc(var(--unit) * .3),
        var(--color-text-key-alt) 0 calc(var(--unit) * .5)
      )
      calc(var(--unit) * 27.35) calc(var(--unit) * 4.5) / calc(var(--unit) * .5)
      calc(var(--unit) * .5),;
}
.spooky {
  
  --logo-3: 
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-1) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 5.5) calc(var(--unit) * 16.4) / calc(var(--unit) * 1.6) calc(var(--unit) * 1.7);
  
  --logo-4: 
    radial-gradient(ellipse, var(--color-transparent) 0 calc(var(--unit) * .35), var(--color-logo-1) 0 calc(var(--unit) * .85), var(--color-transparent) 0) calc(var(--unit) * 6.6) calc(var(--unit) * 15.6) / calc(var(--unit) * 2.6) calc(var(--unit) * 2.7),
    
    linear-gradient(125deg, var(--color-transparent) 0 calc(var(--unit) * 1.25), var(--color-logo-1) 0 calc(var(--unit) * 1.75), var(--color-transparent) 0) calc(var(--unit) * 10.6) calc(var(--unit) * 15.85) / calc(var(--unit) * 2.5) calc(var(--unit) * 2),
    linear-gradient(60deg, var(--color-transparent) 0 calc(var(--unit) * .65), var(--color-logo-1) 0 calc(var(--unit) * 1.2), var(--color-transparent) 0) calc(var(--unit) * 10.5) calc(var(--unit) * 15.85) / calc(var(--unit) * 1.35) calc(var(--unit) * 1),
    
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 10.6) calc(var(--unit) * 15.85) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 11.2) calc(var(--unit) * 15.85) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 11.8) calc(var(--unit) * 15.85) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 12.3) calc(var(--unit) * 15.85) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 10.6) calc(var(--unit) * 17.4) / calc(var(--unit) * .45) calc(var(--unit) * .45),
    radial-gradient(circle, var(--color-logo-1) 0 calc(var(--unit) * .225), var(--color-transparent) 0) calc(var(--unit) * 11.1) calc(var(--unit) * 17.4) / calc(var(--unit) * .45) calc(var(--unit) * .45);
}

/* Screen Messages VFD */
div {
  --letter-blank: linear-gradient(
    to top,
    var(--color-transparent),
    var(--color-transparent)
  );
  --letter-active: linear-gradient(
    to top,
    var(--color-text),
    var(--color-text)
  );
  --letter-active-vertical: linear-gradient(
    96deg,
    var(--color-text-transparent) 30%,
    /* 20% */ var(--color-text) 35% 65%,
    var(--color-text-transparent) 70% /* 85 */
  );
  --letter-active-n-e: linear-gradient(
    -50deg,
    var(--color-text-transparent) 48%,
    var(--color-text) 52% 65%,
    var(--color-text-transparent) 70%
  );
  --letter-active-n-w: linear-gradient(
    70deg,
    var(--color-text-transparent) 48%,
    var(--color-text) 52% 65%,
    var(--color-text-transparent) 70%
  );

  --message: var(--img-letter-1-1) var(--pos-letter-1-1) / var(--size-letter-y),
    var(--img-letter-1-2) var(--pos-letter-1-2) / var(--size-letter-y),
    var(--img-letter-1-3) var(--pos-letter-1-3) / var(--size-letter-y),
    var(--img-letter-1-4) var(--pos-letter-1-4) / var(--size-letter-y),
    var(--img-letter-1-5) var(--pos-letter-1-5) / var(--size-letter-x),
    var(--img-letter-1-6) var(--pos-letter-1-6) / var(--size-letter-x),
    var(--img-letter-1-7) var(--pos-letter-1-7) / var(--size-letter-x),
    var(--img-letter-1-8) var(--pos-letter-1-8) / var(--size-letter-dl),
    var(--img-letter-1-9) var(--pos-letter-1-9) / var(--size-letter-dl),
    var(--img-letter-1-10) var(--pos-letter-1-10) / var(--size-letter-dl),
    var(--img-letter-1-11) var(--pos-letter-1-11) / var(--size-letter-dl),
    var(--img-letter-1-12) var(--pos-letter-1-12) / var(--size-letter-y),
    var(--img-letter-1-13) var(--pos-letter-1-13) / var(--size-letter-y),
    var(--img-letter-2-1) var(--pos-letter-2-1) / var(--size-letter-y),
    var(--img-letter-2-2) var(--pos-letter-2-2) / var(--size-letter-y),
    var(--img-letter-2-3) var(--pos-letter-2-3) / var(--size-letter-y),
    var(--img-letter-2-4) var(--pos-letter-2-4) / var(--size-letter-y),
    var(--img-letter-2-5) var(--pos-letter-2-5) / var(--size-letter-x),
    var(--img-letter-2-6) var(--pos-letter-2-6) / var(--size-letter-x),
    var(--img-letter-2-7) var(--pos-letter-2-7) / var(--size-letter-x),
    var(--img-letter-2-8) var(--pos-letter-2-8) / var(--size-letter-dl),
    var(--img-letter-2-9) var(--pos-letter-2-9) / var(--size-letter-dl),
    var(--img-letter-2-10) var(--pos-letter-2-10) / var(--size-letter-dl),
    var(--img-letter-2-11) var(--pos-letter-2-11) / var(--size-letter-dl),
    var(--img-letter-2-12) var(--pos-letter-2-12) / var(--size-letter-y),
    var(--img-letter-2-13) var(--pos-letter-2-13) / var(--size-letter-y),
    var(--img-letter-3-1) var(--pos-letter-3-1) / var(--size-letter-y),
    var(--img-letter-3-2) var(--pos-letter-3-2) / var(--size-letter-y),
    var(--img-letter-3-3) var(--pos-letter-3-3) / var(--size-letter-y),
    var(--img-letter-3-4) var(--pos-letter-3-4) / var(--size-letter-y),
    var(--img-letter-3-5) var(--pos-letter-3-5) / var(--size-letter-x),
    var(--img-letter-3-6) var(--pos-letter-3-6) / var(--size-letter-x),
    var(--img-letter-3-7) var(--pos-letter-3-7) / var(--size-letter-x),
    var(--img-letter-3-8) var(--pos-letter-3-8) / var(--size-letter-dl),
    var(--img-letter-3-9) var(--pos-letter-3-9) / var(--size-letter-dl),
    var(--img-letter-3-10) var(--pos-letter-3-10) / var(--size-letter-dl),
    var(--img-letter-3-11) var(--pos-letter-3-11) / var(--size-letter-dl),
    var(--img-letter-3-12) var(--pos-letter-3-12) / var(--size-letter-y),
    var(--img-letter-3-13) var(--pos-letter-3-13) / var(--size-letter-y),
    var(--img-letter-4-1) var(--pos-letter-4-1) / var(--size-letter-y),
    var(--img-letter-4-2) var(--pos-letter-4-2) / var(--size-letter-y),
    var(--img-letter-4-3) var(--pos-letter-4-3) / var(--size-letter-y),
    var(--img-letter-4-4) var(--pos-letter-4-4) / var(--size-letter-y),
    var(--img-letter-4-5) var(--pos-letter-4-5) / var(--size-letter-x),
    var(--img-letter-4-6) var(--pos-letter-4-6) / var(--size-letter-x),
    var(--img-letter-4-7) var(--pos-letter-4-7) / var(--size-letter-x),
    var(--img-letter-4-8) var(--pos-letter-4-8) / var(--size-letter-dl),
    var(--img-letter-4-9) var(--pos-letter-4-9) / var(--size-letter-dl),
    var(--img-letter-4-10) var(--pos-letter-4-10) / var(--size-letter-dl),
    var(--img-letter-4-11) var(--pos-letter-4-11) / var(--size-letter-dl),
    var(--img-letter-4-12) var(--pos-letter-4-12) / var(--size-letter-y),
    var(--img-letter-4-13) var(--pos-letter-4-13) / var(--size-letter-y),
    var(--img-letter-5-1) var(--pos-letter-5-1) / var(--size-letter-y),
    var(--img-letter-5-2) var(--pos-letter-5-2) / var(--size-letter-y),
    var(--img-letter-5-3) var(--pos-letter-5-3) / var(--size-letter-y),
    var(--img-letter-5-4) var(--pos-letter-5-4) / var(--size-letter-y),
    var(--img-letter-5-5) var(--pos-letter-5-5) / var(--size-letter-x),
    var(--img-letter-5-6) var(--pos-letter-5-6) / var(--size-letter-x),
    var(--img-letter-5-7) var(--pos-letter-5-7) / var(--size-letter-x),
    var(--img-letter-5-8) var(--pos-letter-5-8) / var(--size-letter-dl),
    var(--img-letter-5-9) var(--pos-letter-5-9) / var(--size-letter-dl),
    var(--img-letter-5-10) var(--pos-letter-5-10) / var(--size-letter-dl),
    var(--img-letter-5-11) var(--pos-letter-5-11) / var(--size-letter-dl),
    var(--img-letter-5-12) var(--pos-letter-5-12) / var(--size-letter-y),
    var(--img-letter-5-13) var(--pos-letter-5-13) / var(--size-letter-y),
    var(--img-letter-6-1) var(--pos-letter-6-1) / var(--size-letter-y),
    var(--img-letter-6-2) var(--pos-letter-6-2) / var(--size-letter-y),
    var(--img-letter-6-3) var(--pos-letter-6-3) / var(--size-letter-y),
    var(--img-letter-6-4) var(--pos-letter-6-4) / var(--size-letter-y),
    var(--img-letter-6-5) var(--pos-letter-6-5) / var(--size-letter-x),
    var(--img-letter-6-6) var(--pos-letter-6-6) / var(--size-letter-x),
    var(--img-letter-6-7) var(--pos-letter-6-7) / var(--size-letter-x),
    var(--img-letter-6-8) var(--pos-letter-6-8) / var(--size-letter-dl),
    var(--img-letter-6-9) var(--pos-letter-6-9) / var(--size-letter-dl),
    var(--img-letter-6-10) var(--pos-letter-6-10) / var(--size-letter-dl),
    var(--img-letter-6-11) var(--pos-letter-6-11) / var(--size-letter-dl),
    var(--img-letter-6-12) var(--pos-letter-6-12) / var(--size-letter-y),
    var(--img-letter-6-13) var(--pos-letter-6-13) / var(--size-letter-y),
    var(--img-letter-7-1) var(--pos-letter-7-1) / var(--size-letter-y),
    var(--img-letter-7-2) var(--pos-letter-7-2) / var(--size-letter-y),
    var(--img-letter-7-3) var(--pos-letter-7-3) / var(--size-letter-y),
    var(--img-letter-7-4) var(--pos-letter-7-4) / var(--size-letter-y),
    var(--img-letter-7-5) var(--pos-letter-7-5) / var(--size-letter-x),
    var(--img-letter-7-6) var(--pos-letter-7-6) / var(--size-letter-x),
    var(--img-letter-7-7) var(--pos-letter-7-7) / var(--size-letter-x),
    var(--img-letter-7-8) var(--pos-letter-7-8) / var(--size-letter-dl),
    var(--img-letter-7-9) var(--pos-letter-7-9) / var(--size-letter-dl),
    var(--img-letter-7-10) var(--pos-letter-7-10) / var(--size-letter-dl),
    var(--img-letter-7-11) var(--pos-letter-7-11) / var(--size-letter-dl),
    var(--img-letter-7-12) var(--pos-letter-7-12) / var(--size-letter-y),
    var(--img-letter-7-13) var(--pos-letter-7-13) / var(--size-letter-y),
    var(--img-letter-8-1) var(--pos-letter-8-1) / var(--size-letter-y),
    var(--img-letter-8-2) var(--pos-letter-8-2) / var(--size-letter-y),
    var(--img-letter-8-3) var(--pos-letter-8-3) / var(--size-letter-y),
    var(--img-letter-8-4) var(--pos-letter-8-4) / var(--size-letter-y),
    var(--img-letter-8-5) var(--pos-letter-8-5) / var(--size-letter-x),
    var(--img-letter-8-6) var(--pos-letter-8-6) / var(--size-letter-x),
    var(--img-letter-8-7) var(--pos-letter-8-7) / var(--size-letter-x),
    var(--img-letter-8-8) var(--pos-letter-8-8) / var(--size-letter-dl),
    var(--img-letter-8-9) var(--pos-letter-8-9) / var(--size-letter-dl),
    var(--img-letter-8-10) var(--pos-letter-8-10) / var(--size-letter-dl),
    var(--img-letter-8-11) var(--pos-letter-8-11) / var(--size-letter-dl),
    var(--img-letter-8-12) var(--pos-letter-8-12) / var(--size-letter-y),
    var(--img-letter-8-13) var(--pos-letter-8-13) / var(--size-letter-y);
  
  --unit-letter-1-1-start-x: 20;
  --unit-letter-1-2-start-x: 19.85;
  --unit-letter-1-3-start-x: 20.7;
  --unit-letter-1-4-start-x: 20.6;
  --unit-letter-1-5-start-x: 20.3;
  --unit-letter-1-6-start-x: 20.2;
  --unit-letter-1-7-start-x: 20.1;
  --unit-letter-1-8-start-x: 20;
  --unit-letter-1-9-start-x: 20.5;
  --unit-letter-1-10-start-x: 19.9;
  --unit-letter-1-11-start-x: 20.25;
  --unit-letter-1-12-start-x: 20.35;
  --unit-letter-1-13-start-x: 20.25;
  --unit-letter-1-start-y: 17;
  --unit-letter-2-start-y: 17.7;
  --unit-letter-3-start-y: 17;
  --unit-letter-4-start-y: 17.7;
  --unit-letter-5-start-y: 16.9;
  --unit-letter-6-start-y: 17.6;
  --unit-letter-7-start-y: 18.25;
  --unit-letter-8-start-y: 17.05;
  --unit-letter-9-start-y: 17.05;
  --unit-letter-10-start-y: 17.75;
  --unit-letter-11-start-y: 17.75;
  --unit-letter-12-start-y: 17;
  --unit-letter-13-start-y: 17.7;
  --unit-letter-2-offset-x: 1.5;
  --unit-letter-3-offset-x: 3;
  --unit-letter-4-offset-x: 4.5;
  --unit-letter-5-offset-x: 6;
  --unit-letter-6-offset-x: 7.5;
  --unit-letter-7-offset-x: 9;
  --unit-letter-8-offset-x: 10.5;

  --img-letter-1-1: var(--letter-active-vertical);
  --img-letter-1-2: var(--letter-blank);
  --img-letter-1-3: var(--letter-blank);
  --img-letter-1-4: var(--letter-active-vertical);
  --img-letter-1-5: var(--letter-active);
  --img-letter-1-6: var(--letter-active);
  --img-letter-1-7: var(--letter-active);
  --img-letter-1-8: var(--letter-blank);
  --img-letter-1-9: var(--letter-blank);
  --img-letter-1-10: var(--letter-blank);
  --img-letter-1-11: var(--letter-blank);
  --img-letter-1-12: var(--letter-blank);
  --img-letter-1-13: var(--letter-blank);

  --pos-letter-1-1: calc(var(--unit) * var(--unit-letter-1-1-start-x)) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-1-2: calc(var(--unit) * var(--unit-letter-1-2-start-x)) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-1-3: calc(var(--unit) * var(--unit-letter-1-3-start-x)) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-1-4: calc(var(--unit) * var(--unit-letter-1-4-start-x)) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-1-5: calc(var(--unit) * var(--unit-letter-1-5-start-x)) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-1-6: calc(var(--unit) * var(--unit-letter-1-6-start-x)) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-1-7: calc(var(--unit) * var(--unit-letter-1-7-start-x)) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-1-8: calc(var(--unit) * var(--unit-letter-1-8-start-x)) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-1-9: calc(var(--unit) * var(--unit-letter-1-9-start-x)) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-1-10: calc(var(--unit) * var(--unit-letter-1-10-start-x)) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-1-11: calc(var(--unit) * var(--unit-letter-1-11-start-x)) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-1-12: calc(var(--unit) * var(--unit-letter-1-12-start-x)) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-1-13: calc(var(--unit) * var(--unit-letter-1-13-start-x)) calc(var(--unit) * var(--unit-letter-13-start-y));

  --img-letter-2-1: var(--letter-active-vertical);
  --img-letter-2-2: var(--letter-active-vertical);
  --img-letter-2-3: var(--letter-active-vertical);
  --img-letter-2-4: var(--letter-blank);
  --img-letter-2-5: var(--letter-active);
  --img-letter-2-6: var(--letter-active);
  --img-letter-2-7: var(--letter-blank);
  --img-letter-2-8: var(--letter-blank);
  --img-letter-2-9: var(--letter-blank);
  --img-letter-2-10: var(--letter-blank);
  --img-letter-2-11: var(--letter-blank);
  --img-letter-2-12: var(--letter-blank);
  --img-letter-2-13: var(--letter-blank);

  --pos-letter-2-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-2-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-2-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-2-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-2-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-2-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-2-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-2-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-2-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-2-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-2-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-2-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-2-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-2-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));

  --img-letter-3-1: var(--letter-active-vertical);
  --img-letter-3-2: var(--letter-active-vertical);
  --img-letter-3-3: var(--letter-blank);
  --img-letter-3-4: var(--letter-blank);
  --img-letter-3-5: var(--letter-active);
  --img-letter-3-6: var(--letter-active);
  --img-letter-3-7: var(--letter-active);
  --img-letter-3-8: var(--letter-blank);
  --img-letter-3-9: var(--letter-blank);
  --img-letter-3-10: var(--letter-blank);
  --img-letter-3-11: var(--letter-blank);
  --img-letter-3-12: var(--letter-blank);
  --img-letter-3-13: var(--letter-blank);

  --pos-letter-3-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-3-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-3-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-3-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-3-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-3-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-3-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-3-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-3-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-3-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-3-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-3-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-3-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-3-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));

  --img-letter-4-1: var(--letter-active-vertical);
  --img-letter-4-2: var(--letter-active-vertical);
  --img-letter-4-3: var(--letter-blank);
  --img-letter-4-4: var(--letter-blank);
  --img-letter-4-5: var(--letter-blank);
  --img-letter-4-6: var(--letter-blank);
  --img-letter-4-7: var(--letter-active);
  --img-letter-4-8: var(--letter-blank);
  --img-letter-4-9: var(--letter-blank);
  --img-letter-4-10: var(--letter-blank);
  --img-letter-4-11: var(--letter-blank);
  --img-letter-4-12: var(--letter-blank);
  --img-letter-4-13: var(--letter-blank);

  --pos-letter-4-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-4-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-4-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-4-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-4-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-4-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-4-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-4-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-4-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-4-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-4-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-4-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-4-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-4-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));

  --img-letter-5-1: var(--letter-active-vertical);
  --img-letter-5-2: var(--letter-active-vertical);
  --img-letter-5-3: var(--letter-blank);
  --img-letter-5-4: var(--letter-blank);
  --img-letter-5-5: var(--letter-blank);
  --img-letter-5-6: var(--letter-blank);
  --img-letter-5-7: var(--letter-active);
  --img-letter-5-8: var(--letter-blank);
  --img-letter-5-9: var(--letter-blank);
  --img-letter-5-10: var(--letter-blank);
  --img-letter-5-11: var(--letter-blank);
  --img-letter-5-12: var(--letter-blank);
  --img-letter-5-13: var(--letter-blank);

  --pos-letter-5-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-5-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-5-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-5-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-5-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-5-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-5-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-5-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-5-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-5-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-5-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-5-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-5-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-5-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));
  

  --img-letter-6-1: var(--letter-blank);
  --img-letter-6-2: var(--letter-blank);
  --img-letter-6-3: var(--letter-blank);
  --img-letter-6-4: var(--letter-blank);
  --img-letter-6-5: var(--letter-blank);
  --img-letter-6-6: var(--letter-blank);
  --img-letter-6-7: var(--letter-active);
  --img-letter-6-8: var(--letter-blank);
  --img-letter-6-9: var(--letter-blank);
  --img-letter-6-10: var(--letter-blank);
  --img-letter-6-11: var(--letter-blank);
  --img-letter-6-12: var(--letter-blank);
  --img-letter-6-13: var(--letter-blank);

  --pos-letter-6-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-6-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-6-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-6-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-6-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-6-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-6-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-6-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-6-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-6-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-6-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-6-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-6-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-6-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));
  

  --img-letter-7-1: var(--letter-blank);
  --img-letter-7-2: var(--letter-blank);
  --img-letter-7-3: var(--letter-blank);
  --img-letter-7-4: var(--letter-blank);
  --img-letter-7-5: var(--letter-blank);
  --img-letter-7-6: var(--letter-blank);
  --img-letter-7-7: var(--letter-blank);
  --img-letter-7-8: var(--letter-blank);
  --img-letter-7-9: var(--letter-blank);
  --img-letter-7-10: var(--letter-blank);
  --img-letter-7-11: var(--letter-blank);
  --img-letter-7-12: var(--letter-blank);
  --img-letter-7-13: var(--letter-blank);

  --pos-letter-7-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-7-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-7-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-7-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-7-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-7-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-7-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-7-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-7-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-7-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-7-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-7-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-7-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-7-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));

  --img-letter-8-1: var(--letter-blank);
  --img-letter-8-2: var(--letter-blank);
  --img-letter-8-3: var(--letter-blank);
  --img-letter-8-4: var(--letter-blank);
  --img-letter-8-5: var(--letter-blank);
  --img-letter-8-6: var(--letter-blank);
  --img-letter-8-7: var(--letter-blank);
  --img-letter-8-8: var(--letter-blank);
  --img-letter-8-9: var(--letter-blank);
  --img-letter-8-10: var(--letter-blank);
  --img-letter-8-11: var(--letter-blank);
  --img-letter-8-12: var(--letter-blank);
  --img-letter-8-13: var(--letter-blank);

  --pos-letter-8-1: calc(var(--unit) * (var(--unit-letter-1-1-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-1-start-y));
  --pos-letter-8-2: calc(var(--unit) * (var(--unit-letter-1-2-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-2-start-y));
  --pos-letter-8-3: calc(var(--unit) * (var(--unit-letter-1-3-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-3-start-y));
  --pos-letter-8-4: calc(var(--unit) * (var(--unit-letter-1-4-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-4-start-y));
  --pos-letter-8-5: calc(var(--unit) * (var(--unit-letter-1-5-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-5-start-y));
  --pos-letter-8-6: calc(var(--unit) * (var(--unit-letter-1-6-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-6-start-y));
  --pos-letter-8-7: calc(var(--unit) * (var(--unit-letter-1-7-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-7-start-y));
  --pos-letter-8-8: calc(var(--unit) * (var(--unit-letter-1-8-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-8-start-y));
  --pos-letter-8-9: calc(var(--unit) * (var(--unit-letter-1-9-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-9-start-y));
  --pos-letter-8-10: calc(var(--unit) * (var(--unit-letter-1-10-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-10-start-y));
  --pos-letter-8-11: calc(var(--unit) * (var(--unit-letter-1-11-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-11-start-y));
  --pos-letter-8-12: calc(var(--unit) * (var(--unit-letter-1-12-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-12-start-y));
  --pos-letter-8-13: calc(var(--unit) * (var(--unit-letter-1-13-start-x) + var(--unit-letter-8-offset-x))) calc(var(--unit) * var(--unit-letter-13-start-y));

  --size-letter-x: calc(var(--unit) * 0.5) calc(var(--unit) * 0.125);
  --size-letter-y: calc(var(--unit) * 0.35) calc(var(--unit) * 0.6);
  --size-letter-dl: calc(var(--unit) * .6) calc(var(--unit) * .55);
}

/* Device shadows/highlights */
div::after {
  content: "";
  position: absolute;

  box-shadow: inset calc(var(--unit) * 0.2) calc(var(--unit) * 0.4)
      calc(var(--unit) * 0.2) var(--color-base-highlight),
    inset calc(var(--unit) * -0.4) calc(var(--unit) * -0.6)
      calc(var(--unit) * 0.2) var(--color-base-shadow-alt);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 21%,
    0% 21%,
    0% 42%,
    100% 42%,
    100% 100%,
    0% 100%
  );
}

/* Using content to style actual text on screen */
/*
div::before {
  position: absolute;
  display: block;
  content: "Spell";
  text-transform: uppercase;
  font-family: monospace;
  transform: skewX(-5deg);
  letter-spacing: 0.175em;
  font-weight: 100;
  filter: blur(1px);
  font-size: calc(var(--unit) * 1.45);
  color: var(--color-text);
  top: calc(var(--unit) * 16.35);
  right: calc(var(--unit) * 8);
  text-align: right;
}
*/

div {
  margin: auto;
}
body {
  display: flex;
  height: 100vh;
  overflow-x: hidden;

  background: radial-gradient(
    circle,
    hsl(60 100% 50%),
    hsl(34 100% 60%),
    hsl(20 100% 30%)
  );
  transition: background-image 1400ms ease-out;

  /* development grid for reference image */
  /**
  background: linear-gradient(
    to bottom,
    hsl(0 0% 0% / 10%) 1px,
    transparent 1px 10px
  );
  background-size: 100% 10px;
  /**/
}
body:has(.read) {
  background: radial-gradient(
    circle,
    hsl(160 100% 50%),
    hsl(184 100% 60%),
    hsl(220 100% 30%)
  );
}
body:has(.spooky) {
  background: radial-gradient(
    circle,
    hsl(360 100% 20%),
    hsl(324 100% 30%),
    hsl(340 100% 60%)
  );
}

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

              
            
!

JS

              
                //So yes... this isn't one of those "look, no js!" demos... but I wanted to make it interactive with Speech Synthesis. The following JS is to support speech, interaction via keyboard/pointer events, some fallback CSS generation for Chrome/Edge.

const device = document.getElementById('device');

// Enable basic interaction with keyboard and pointer actions
device.addEventListener("pointerup", pointer);
document.body.addEventListener("keyup", keyboard);

// Yep, some basic Speech Synthesis as well.. I'm not ttrying to find the perfect voice on each device, so this will use the default. Sometimes this is a low voice, and sometimes it is a high voice. I think this gives it some modern flair and a little bit of randomized charm that will be different based on the device you use
var synth = window.speechSynthesis;

//Track what's currently displayed on the screen
var current = [];

// Since this is a single div, it does not have an appropriate collection of semantic buttons to trigger specific actions. Instead it uses some capturing of classic pointer coordinates and mapping those in relation to locations of each button. As a reminder... actual semantic HTML with actual CSS and layered on JS when needed is the right way to do this in a real project.
const ranges = {
  x1: .094,
  x2: .894,
  y1: .54,
  y2: .74
};

// Mapping of button labels to pass to Speech renderer
const keysSpell = [
  ['off','go','replay','repeat','clue','mystery word','secret code','letters','say it','spell'],
  ['a','b','c','d','e','f','g','h','i','j',],
  ['k','l','m','n','o','p','q','r','s','t',],
  ['u','v','w','x','y','z','apostrophe','module select','erase','enter',],
]
const keysRead = [
  ['off','go','replay','word zapper','word maker','reed it','picture reed','letter stumper','hear it','word zap'],
  ['a','b','c','d','e','f','g','h','i','j',],
  ['k','l','m','n','o','p','q','r','s','t',],
  ['u','v','w','x','y','z','apostrophe','module select','erase','enter',],
]

// On pointer press, check if the press is on a "button", and if so, pass the button label to the Speech Synthesis Utterance
function pointer(e) {
  const target = {
    width: e.target.clientWidth,
    height: e.target.clientHeight,
    x: e.target.offsetLeft,
    y: e.target.offsetTop,
    isRead: e.target.classList.contains('read')
  };
  const x = (e.clientX - target.x) / target.width;
  const y = (e.clientY - target.y) / target.height;
  
  if (x > ranges.x1 && x < ranges.x2 && y > ranges.y1 && y < ranges.y2) {
    const indices = {
      col: Math.floor((x - ranges.x1) * 10 / (ranges.x2 - ranges.x1)),
      row: Math.floor(((y - ranges.y1) * 10 / (ranges.y2 - ranges.y1)) / 2.5),
    };
    
    const keys = target.isRead ? keysRead : keysSpell;
    speak(keys[indices.row][indices.col])
  }
}

// On key press, pass in the key value to the Speech Synthesis
function keyboard(e) {
  speak(e?.key);
}

// Let the computer talk
function speak(toSpeak = 'spell; level a'){
  if (toSpeak && synth && window?.SpeechSynthesisUtterance) {
    var utterThis = new SpeechSynthesisUtterance(toSpeak);
    
    if (toSpeak.length === 1) {
      //If we are on a single character, add it to the screen
      addLetter(toSpeak);
      write();
      easterEggItOnUp()
    } else if (toSpeak === 'apostrophe') {
      //Special handling of apostrophes so it can both be spoken and rendered properly
      addLetter("'");
      write();
    } else if (current.length > 0 && (toSpeak.toLowerCase() === 'backspace' || toSpeak.toLowerCase() === 'erase' )) {
      //Allow for backspace via keyboard or pointer 
      current.pop();
      write();
    }
    
    utterThis.pitch = 1.1;
    synth.speak(utterThis);
  }
}

// Add the latest letter typed
function addLetter(letter) {
  if (current.length > 7) {
    current = [];
  }
  current.push(letter.toLowerCase());
}

// VFD stands for Vaccuum Flourescent Display (https://en.wikipedia.org/wiki/Vacuum_fluorescent_display) which is what the original Speak and Spell used for the lighted screen
const vfdMap = generateVfdMap();

// display the letter to the screen (if known: currently letters, numbers and apostrophe)
function write() {
  blankOut();
  
  current.forEach((letter,i) => {
    vfdMap[letter]?.forEach(item => {
      const j = i+1;
      if (item < 5 || item > 11) {
        device.style.setProperty(`--img-letter-${j}-${item}`, 'var(--letter-active-vertical)')
      } else if (item > 4 && item < 8) {
        device.style.setProperty(`--img-letter-${j}-${item}`, 'var(--letter-active)')
      } else if (item === 8 || item === 11) {
        device.style.setProperty(`--img-letter-${j}-${item}`, 'var(--letter-active-n-w)')
      } else if (item === 9 || item === 10) {
        device.style.setProperty(`--img-letter-${j}-${item}`, 'var(--letter-active-n-e)')
      }
    })
  })
  
  //move the cursor
  device.style.setProperty(`--img-letter-${current.length+1}-7`, 'var(--letter-active)')
}

//reset the screen
function blankOut() {
  for (let i = 1; i <= 8; ++i) {
    for (let j = 0; j <=13; ++j) {
      device.style.setProperty(`--img-letter-${i}-${j}`, 'var(--letter-blank)')
    }
  }
}

/* I didn't put much logic to what lines mapped to what position of a character's display, but effectively I broke the system to 13 options (it's not exactly what the Speak and Spell used, but goodness it felt close enough to generate readable characters for all the alphabet): 
1: Upper left vertical line
2: Bottom left vertical line
3: Upper right vertical line
4: Bottom left vertical line
5: Upper horizontal line
6: Middle horizontal line
7: Bottom horizontal line
8: Upper left diagonal line
9: Upper right diagonal line
10: Bottom left diagonal line
11: Bottom right diagonal line
12: Upper middle vertical line
13: Bottom middle vertical line
*/
function generateVfdMap() {
  const map = {
    a: [1,2,3,4,5,6],
    b: [13,12,3,4,5,6,7],
    c: [1,2,5,7],
    d: [3,4,5,7,12,13],
    e: [1,2,5,6,7],
    f: [1,2,5,6],
    g: [1,2,4,5,7],
    h: [1,2,3,4,6],
    i: [5,7,12,13],
    j: [2,3,4,7],
    k: [1,2,9,11],
    l: [1,2,7],
    m: [1,2,3,4,8,9],
    n: [1,2,3,4,8,11],
    o: [1,2,3,4,5,7],
    p: [1,2,3,5,6],
    q: [1,2,3,4,5,7,11],
    r: [1,2,3,5,6,11],
    s: [1,4,5,6,7],
    t: [5,12,13],
    u: [1,2,3,4,7],
    v: [1,3,2,10],
    w: [1,2,3,4,10,11],
    x: [8,9,10,11],
    y: [8,9,13],
    z: [5,7,9,10],
    "'": [9],
    1: [3,4],
    2: [2,3,5,6,7],
    3: [3,4,5,6,7],
    4: [1,3,4,6],
    5: [1,4,5,6,7],
    6: [1,2,4,5,6,7],
    7: [1,3,4,5],
    8: [1,2,3,4,5,6,7],
    9: [1,3,4,5,6,7],
    0: [1,2,3,4,5,7]
  }
  
  return map;
}

// Oh I'm sure this doesn't do anything
function easterEggItOnUp() {
  const joined = current.join('');
  if (joined.includes('read')) {
    device.classList.add('read');
    current = [];
  } else if (joined.includes('spell')) {
    device.classList.remove('read');
    device.classList.add('spooky');
    current = [];
  } else if (joined.includes('spooky')) {
    device.classList.add('spooky');
    current = [];
  }
}

//Do an initial animation, but cancel it if people start interacting early
const timeouts = []
timeouts.push(setTimeout(() => {
  addLetter('s');
  write();
}, 200))
timeouts.push(setTimeout(() => {
  addLetter('p');
  write();
}, 700))
timeouts.push(setTimeout(() => {
  addLetter('e');
  write();
}, 1000))
timeouts.push(setTimeout(() => {
  addLetter('l');
  write();
}, 1500))
timeouts.push(setTimeout(() => {
  addLetter('l');
  write();
  current = [];
}, 1600));

function cancelInitialAnimation() {
  console.log('hmm')
  timeouts.forEach(timeout => clearTimeout(timeout))
}

document.body.addEventListener('pointerup', cancelInitialAnimation, { once: true })
document.body.addEventListener('keyup', cancelInitialAnimation, { once: true })





// The Fallback Section!!!

// For browsers that do not support CSS Trigonometry functions (sine, cosine, etc), such as Chrome/Edge (Feb 2023)... fallback to Javascript's Math.sin() and Math.cos() and set the style here

if (!(window?.CSS?.supports('opacity: sin(5deg)'))) {
  document.querySelector('div').style.setProperty('--path-left', `${generateLeftViaFallbackJs()}`);
  document.querySelector('div').style.setProperty('--path-right', `${generateRightViaFallbackJs()}`);
}

function generateLeftViaFallbackJs() {
  let points = [];
  const full = Math.PI * 2;
  const increment = full / 60;
  
  for (let i = full * 0.75; i >= full * 0.25; i = i - increment) {
    points.push(
      `calc(var(--handle-left-mid-x) + calc(${Math.cos(
        i
      )} * var(--handle-radius))) calc(var(--handle-left-mid-y) + calc(${Math.sin(i)} * var(--handle-radius)))`
    );
  }
  
  return points;
}
function generateRightViaFallbackJs() {
  let points = [];
  const full = Math.PI * 2;
  const increment = full / 60;
  
  for (let i = full * 1.25; i >= full * .75; i = i - increment) {
    points.push(
      `calc(var(--handle-right-mid-x) + calc(${Math.cos(
        i
      )} * var(--handle-radius))) calc(var(--handle-right-mid-y) + calc(${Math.sin(i)} * var(--handle-radius)))`
    );
  }

  return points;
}

//This was used to generate the initial clip path cutouts using CSS Trig functions and approximate curves via polygon points
/* 
let paths = [];
for (let i = 90; i >= -90; i = i - 5) {
  paths.push(`calc(var(--handle-right-mid-x) + calc(cos(${i}deg) * var(--handle-radius))) 
  calc(var(--handle-right-mid-y) + calc(sin(${i}deg) * var(--handle-radius)))`);
}
console.log(paths.join(","));
*/

              
            
!
999px

Console