.keyboard{--keyboard-scale:2;--row-width:calc(700px * var(--keyboard-scale));--key-height:calc(38px * var(--keyboard-scale));--key-gap:calc(6px * var(--keyboard-scale));--keyboard-padding:calc(14px * var(--keyboard-scale));transform-style:preserve-3d;gap:var(--key-gap);border-radius:calc(10px * var(--keyboard-scale));width:var(--row-width);isolation:isolate;opacity:.2;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;display:flex;transform:rotateX(-24deg)rotateY(32deg)rotateX(90deg)translateZ(-100px)scale(2)}.row{gap:var(--key-gap);width:100%;display:flex;transform:translateZ(100px)}.key{border-radius:calc(5px * var(--keyboard-scale));color:#fff;font-size:calc(12px * var(--keyboard-scale));height:var(--key-height);-webkit-user-select:none;user-select:none;text-transform:lowercase;box-shadow:0 calc(2px * var(--keyboard-scale)) 0 #000;cursor:pointer;background-color:#111118;border:1px solid #191924;flex:1;justify-content:center;align-items:center;transition:all .24s;display:flex;position:relative}.key[data-key^=F]{text-transform:uppercase;font-family:var(--font-t26)}.main-character{font-size:calc(12px * var(--keyboard-scale));text-transform:none}.option-symbol{right:calc(-8px * var(--keyboard-scale));font-size:calc(8px * var(--keyboard-scale));opacity:.7;color:#c8c8da;position:absolute}.key-label{width:100%;height:100%;padding:calc(2px * var(--keyboard-scale));flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.shift-symbol{font-size:calc(8px * var(--keyboard-scale));opacity:.4;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.key-symbols{top:calc(-60px * var(--keyboard-scale));border-radius:calc(5px * var(--keyboard-scale));padding:calc(6px * var(--keyboard-scale));gap:calc(4px * var(--keyboard-scale));z-index:10;min-width:calc(60px * var(--keyboard-scale));box-shadow:0 calc(2px * var(--keyboard-scale)) calc(10px * var(--keyboard-scale)) #0000004d;background-color:#333;flex-direction:column;display:flex;position:absolute;left:50%;transform:translate(-50%)}.symbol-row{gap:calc(8px * var(--keyboard-scale));justify-content:center;display:flex}.symbol-row span{padding:calc(2px * var(--keyboard-scale)) calc(4px * var(--keyboard-scale));border-radius:calc(3px * var(--keyboard-scale));background-color:#111118}.main-symbol{text-align:center;padding-top:calc(4px * var(--keyboard-scale));margin-top:calc(2px * var(--keyboard-scale));border-top:1px solid #111118}.key.caps-on{background-color:#191924}.key.caps-on:after{content:"";top:calc(4px * var(--keyboard-scale));right:calc(4px * var(--keyboard-scale));width:calc(4px * var(--keyboard-scale));height:calc(4px * var(--keyboard-scale));background-color:#0f0;border-radius:50%;position:absolute}.row:first-child{margin-bottom:calc(var(--key-gap) * 2)}.row:first-child .key{height:calc(var(--key-height) * .8);font-size:calc(10px * var(--keyboard-scale))}.key-space{flex:5}.key-command{font-size:calc(16px * var(--keyboard-scale));flex:1.2}.key-modifier{font-size:calc(14px * var(--keyboard-scale));flex:1}.key-delete,.key-tab{flex:1.5}.key-return{flex:1.8}.key-shift{font-size:calc(14px * var(--keyboard-scale));flex:2.2}.key-caps{font-size:calc(14px * var(--keyboard-scale));flex:1.7}.key-esc{font-size:calc(10px * var(--keyboard-scale));flex:1}.key-arrow{font-size:calc(16px * var(--keyboard-scale));flex:1}.key.pressed{transform:translateY(calc(2px * var(--keyboard-scale)));box-shadow:none;background-color:#0c0c12;top:-20px}.key:hover{background-color:#15151e}.row:first-child .key,.key-arrow,.key-modifier,.key-command{color:#c8c8da}.keyboard.small{--keyboard-scale:.75}.keyboard.medium{--keyboard-scale:1}.keyboard.large{--keyboard-scale:1.25}.key-symbols{transform-origin:bottom;animation:.2s ease-out popup}@keyframes popup{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (max-width:768px){.keyboard{--keyboard-scale:.8}}@media (max-width:480px){.keyboard{--keyboard-scale:.6}}@media (prefers-contrast:high){.key{border-color:#fff}.key-symbols{border:1px solid #fff}}@media (prefers-reduced-motion:reduce){.key,.key-symbols{transition:none;animation:none}}@media print{.keyboard{background-color:#fff}.key{color:#000;background-color:#fff;border:1px solid #000}}
.ai{-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;gap:2ch;display:flex}.ai h2{clear:both;width:100%}.ai .sepa{text-transform:uppercase;min-width:6ch;color:var(--color-text-3);justify-content:center;align-items:center;font-size:24px;font-weight:300;line-height:1;display:flex}.ai div{border:1px solid var(--color-text-4);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);aspect-ratio:1;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2lh;width:120px;height:120px;padding:24px;display:flex}.ai div svg{stroke:none;width:auto;height:12px}.ai div span{color:var(--color-text-3)}.saga{scroll-snap-type:y mandatory;flex-direction:column;gap:10vh;scroll-margin-top:10vh;scroll-padding-top:10vh;display:flex}.saga section{flex-direction:column;gap:1lh;height:100vh;padding-block:4vh;display:flex;position:relative}.saga section:empty{height:max-content}.saga section h2{text-transform:uppercase;color:var(--color-text-3);font-size:1vh}.saga section p{text-wrap:balance;font-size:4vh;line-height:1.4}