HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="speak and spell with-labels" id="device"></div>
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;
}
//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(","));
*/
Also see: Tab Triggers