/* Aurora spectrum */
#app{background:radial-gradient(ellipse at 3% 5%,#b269ee28,transparent 39%),radial-gradient(ellipse at 98% 14%,#509ff326,transparent 38%),radial-gradient(ellipse at 45% 72%,#42d5bb14,transparent 40%),linear-gradient(145deg,var(--bg0),var(--bg1))}
.intro h1{background-image:linear-gradient(105deg,#f1c1ef,#c2adff 28%,#91c8ff 60%,#9af1cf);background-size:180% 100%;animation:title-spectrum 9s ease-in-out infinite alternate}
.eyebrow{color:#c7b2fa}.topbar{border-image:linear-gradient(90deg,transparent,#d498f255,#79c7ff55,#90edd355,transparent) 1}
.keyboardWrap{isolation:isolate;overflow:hidden;border:1px solid #b6acff45;box-shadow:0 15px 60px #00000020,0 0 38px #986aff12;background:linear-gradient(130deg,#9873ef16,#479fdf10,#4ed4b90c)}
.keyboardWrap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(110deg,#f299d6,#b394ff,#6bbaff,#78e5c7,#f7cc83,#f299d6);background-size:300% 100%;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:3;animation:edge-spectrum 12s linear infinite}
.keyboardWrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(270px circle at var(--pointer-x,50%) var(--pointer-y,40%),#b394ff25,transparent 100%);opacity:0;transition:opacity .3s}
.keyboardWrap.is-lit::after{opacity:1}
.key{--tone:#bca7ff;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 15%,#24273d),#21273a);border-color:color-mix(in srgb,var(--tone) 28%,transparent);color:color-mix(in srgb,var(--tone) 57%,#fff);box-shadow:inset 0 1px 0 #ffffff0c,0 4px 0 #0d10216b,0 8px 14px #00000013}
.key:hover{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 29%,#24273d),#292d44);border-color:var(--tone);box-shadow:0 0 23px color-mix(in srgb,var(--tone) 24%,transparent),0 4px 0 #0d10216b;transform:translateY(-2px)}
.key[data-code^="F"],.key[data-code="Escape"],.key[data-code^="Arrow"],.key[data-code="Enter"],.key[data-code="NumpadEnter"]{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 19%,#24273d),#21273a);color:color-mix(in srgb,var(--tone) 70%,#fff)}
.key.is-down,.key.is-latched{background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 60%,white),var(--tone));border-color:#ffffff90;color:#22243d;box-shadow:0 0 26px color-mix(in srgb,var(--tone) 42%,transparent),inset 0 1px 0 #ffffff70;transform:translateY(3px)}
.fx-ring{position:absolute;pointer-events:none;width:32px;height:32px;margin:-16px;border-radius:50%;border:2px solid var(--ring-color,#bca7ff);z-index:4;animation:ring-expand .65s ease-out forwards}
.pill{position:relative;overflow:hidden}.pill::after{content:"";position:absolute;inset:-60% auto -60% -75%;width:35%;background:linear-gradient(90deg,transparent,#ffffff18,transparent);transform:rotate(25deg);pointer-events:none}.pill:hover::after{animation:button-glint .65s ease-out}.pill:nth-child(3n+1){border-color:#a499ee35}.pill:nth-child(3n+2){border-color:#7fbeeb35}.pill:nth-child(3n){border-color:#84d1b535}
.guide article:nth-child(1){border-top:2px solid #b397ed}.guide article:nth-child(2){border-top:2px solid #77bce9}.guide article:nth-child(3){border-top:2px solid #7acfb6}.guide article:nth-child(2) .step{color:#9ed9fc;background:#75bbef18}.guide article:nth-child(3) .step{color:#a2e8d1;background:#78d4b718}
.logo img{transition:transform .3s,filter .3s}.brand:hover .logo img{transform:rotate(-7deg) scale(1.08);filter:drop-shadow(0 0 14px #b394ff70)}
.theme-day .key{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 20%,white),#e7edf5);color:#35445d;border-color:color-mix(in srgb,var(--tone) 65%,#bcc6d7)}.theme-day .key.is-down,.theme-day .key.is-latched{background:var(--tone);color:#22243d}.theme-day .eyebrow{color:#725694}
@keyframes title-spectrum{to{background-position:100% 50%}}@keyframes edge-spectrum{to{background-position:300% 50%}}@keyframes button-glint{to{left:140%}}@keyframes ring-expand{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(6)}}
@media(hover:none),(max-width:760px){.keyboardWrap::after{display:none}.keyboardWrap::before,.intro h1{animation:none}.fx-ring{display:none}.key:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.fx-ring,.keyboardWrap::after{display:none}}