.keys-board{--case:#4e4e4e;--edge:#151515;--plate:#2b2b2b;--cap:#f5f5f5;--ink:#000000b3;--mod:#737373;--mod-ink:#ffffffb3;--hot:#f57644;--hot-ink:#00000080;background:var(--case);border:.26cqw solid var(--edge);border-radius:2.5cqw;flex-direction:column;gap:0;padding:1.75cqw 1.75cqw 1.65cqw;display:flex;position:relative;box-shadow:inset 0 .16cqw #ffffff1a,0 3cqw 4.4cqw -1.8cqw #0000006b,0 .8cqw 1.1cqw #0000002e}.keys-board:before{content:"";background:var(--plate);border-radius:.7cqw;position:absolute;inset:1.6cqw 1.6cqw 1.5cqw}.keys-row{gap:0;display:flex;position:relative}.keys-key{--a:var(--cap);--s:color-mix(in srgb, var(--a) 80%, #000);--t:var(--ink);--l:color-mix(in srgb, var(--s) 62%, #000);appearance:none;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(to bottom right, transparent calc(50% - .055cqw), var(--l) calc(50% - .055cqw), var(--l) calc(50% + .055cqw), transparent calc(50% + .055cqw)) left .1cqw bottom .1cqw / .72cqw 1.2cqw no-repeat, linear-gradient(to bottom left, transparent calc(50% - .055cqw), var(--l) calc(50% - .055cqw), var(--l) calc(50% + .055cqw), transparent calc(50% + .055cqw)) right .1cqw bottom .1cqw / .72cqw 1.2cqw no-repeat, linear-gradient(180deg, var(--s) 0%, var(--s) 70%, color-mix(in srgb, var(--s) 93%, #000) 100%);min-width:0;height:5.5cqw;box-shadow:inset 0 0 0 .075cqw var(--l);border:0;border-radius:.5cqw;outline:none;margin:0;padding:0;display:block;position:relative}.keys-key:before{content:"";background:linear-gradient(180deg, color-mix(in srgb, var(--a) 96%, #fff) 0%, var(--a) 100%);box-shadow:0 0 0 .075cqw var(--l), inset 0 .08cqw 0 #ffffff59;border-radius:.55cqw;transition:transform 50ms ease-out,filter 50ms ease-out;position:absolute;inset:.16cqw .78cqw 1.2cqw}.keys-key b{pointer-events:none;white-space:nowrap;font:400 1.32cqw/1 var(--font-inter), system-ui, sans-serif;color:var(--t);flex-direction:column;justify-content:flex-start;align-items:center;gap:.5cqw;padding-top:.75cqw;transition:transform 50ms ease-out;display:flex;position:absolute;inset:.16cqw .78cqw 1.2cqw}.keys-key b i{font-style:normal;line-height:1;display:block}.keys-key b svg{width:1.45cqw;height:1.45cqw;display:block}.keys-key b i+svg,.keys-key b i svg{margin-top:-.1cqw}.keys-key.is-mod{--a:var(--mod);--t:var(--mod-ink)}.keys-key.is-mod b{font-size:1.22cqw}.keys-key.is-accent{--a:var(--hot);--t:var(--hot-ink)}.keys-key.is-accent b{font-size:1.22cqw}.keys-key.is-down:before{filter:brightness(.95);transform:translateY(.5cqw)}.keys-key.is-down b{transform:translateY(.5cqw)}.keys-board[data-theme=mint]{--cap:#eee;--ink:#447b82;--mod:#447b82;--hot:#86c8ac;--hot-ink:#ffffffb3}.keys-board[data-theme=retro]{--cap:#eee9dc;--ink:#5a5346;--mod:#bdb7a6;--mod-ink:#0009;--hot:#d98f8a;--hot-ink:#ffffffe6}.keys-board[data-theme=sky]{--cap:#f1f3f6;--ink:#3d5a8c;--mod:#6f97d6;--mod-ink:#ffffffe0;--hot:#f3c552;--hot-ink:#0009}.keys-board[data-theme=sand]{--cap:#efefef;--mod:#893d36;--hot:#c94e41;--hot-ink:#ffffffb3}.keys-board[data-theme=scarlet]{--cap:#e4d7d7;--ink:#8f4246;--mod:#d5868a;--hot:#e1e1e1;--hot-ink:#8f4246}.keys-card{appearance:none;font:inherit;text-align:left;background:0 0;border:0;padding:0}.keys-thumb{aspect-ratio:16/10;background:radial-gradient(120% 90% at 50% 15%,#fbfaf8,#e7e4df);position:relative;overflow:hidden}html.nerd-mode .keys-thumb{background:radial-gradient(120% 90% at 50% 15%,#34322f,#1f1e1c)}.keys-mini{width:118%;transition:transform .6s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:41%;transform:translateY(-50%);container-type:inline-size}.keys-card:hover .keys-mini{transform:translate(-3%,-50%)}.keys-mini .keys-key{cursor:inherit}.keys-modal{z-index:10000;--bg-a:#f3f1ee;--bg-b:#e9e6e1;--dot:#00000017;background:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(180deg, var(--bg-a), var(--bg-b));outline:none;place-items:center;animation:.35s cubic-bezier(.16,1,.3,1) both keys-in;display:grid;position:fixed;inset:0;overflow:hidden}.keys-modal[data-theme=mint]{--bg-a:#eaf3ee;--bg-b:#dbe9e1;--dot:#143c321a}.keys-modal[data-theme=retro]{--bg-a:#f5f0e3;--bg-b:#ebe3d0;--dot:#4637141a}.keys-modal[data-theme=sky]{--bg-a:#eaf0f8;--bg-b:#dbe4f1;--dot:#192d5a1a}.keys-modal[data-theme=sand]{--bg-a:#f6eeea;--bg-b:#ecdfd8;--dot:#5a23191a}.keys-modal[data-theme=scarlet]{--bg-a:#f8edee;--bg-b:#eedddf;--dot:#64232d1a}html.nerd-mode .keys-modal{--bg-a:#2a2927;--bg-b:#1d1c1a;--dot:#ffffff12}@keyframes keys-in{0%{opacity:0;transform:scale(.98)}}.keys-close{width:36px;height:36px;color:var(--text-secondary);background:0 0;border:0;border-radius:50%;place-items:center;transition:background-color .2s,color .2s,transform .2s cubic-bezier(.16,1,.3,1);display:grid;position:absolute;top:22px;right:22px}.keys-close:hover{color:var(--text-primary);background:color-mix(in srgb, currentColor 10%, transparent);transform:scale(1.06)}.keys-stage{flex-direction:column;align-items:stretch;gap:3.2cqw;width:min(92vw,1040px,150vh);display:flex;container-type:inline-size}.keys-typed{min-height:3em;max-height:4.5em;font:400 2.1cqw/1.55 var(--font-typewriter), "Courier New", Courier, monospace;letter-spacing:0;color:var(--text-primary);white-space:pre-wrap;word-break:break-word;text-align:center;flex-wrap:wrap;place-content:flex-end center;margin:0;display:flex;overflow:hidden}.keys-typed i{background:var(--brand-red,#e2412f);align-self:flex-end;width:.22cqw;min-width:1.5px;height:1.1em;margin-left:.3cqw;animation:1.1s step-end infinite keys-caret;display:inline-block}@keyframes keys-caret{50%{opacity:0}}.keys-reset{width:36px;height:36px;color:var(--text-secondary);background:0 0;border:0;border-radius:50%;place-items:center;transition:background-color .2s,color .2s,transform .2s cubic-bezier(.16,1,.3,1);animation:.25s both keys-in;display:grid;position:absolute;top:22px;right:255px}.keys-reset:hover{color:var(--text-primary);background:color-mix(in srgb, currentColor 10%, transparent);transform:scale(1.06)}.keys-themes{gap:12px;display:flex;position:absolute;top:31px;right:76px}.keys-theme{cursor:pointer;outline-offset:3px;border:0;border-radius:50%;outline:1.5px solid #0000;width:18px;height:18px;padding:0;transition:transform .25s cubic-bezier(.16,1,.3,1),outline-color .25s;box-shadow:inset 0 0 0 .5px #00000047,inset 0 1px 1px #ffffff73,0 1px 2px #00000038}.keys-theme:hover{transform:scale(1.14)}.keys-theme[aria-checked=true]{outline-color:var(--text-muted)}@layer base{.keys-modal,.keys-modal *{cursor:default!important}.keys-modal .keys-board,.keys-modal .keys-board *,.keys-close,.keys-close *,.keys-reset,.keys-reset *,.keys-theme{cursor:pointer!important}}@media (max-width:640px){.keys-typed{font-size:4.4cqw}.keys-close{top:calc(14px + env(safe-area-inset-top));right:14px}.keys-themes{top:calc(23px + env(safe-area-inset-top));gap:10px;right:60px}.keys-reset{top:calc(14px + env(safe-area-inset-top));right:223px}.keys-stage{width:96vw}}@media (prefers-reduced-motion:reduce){.keys-key:before,.keys-key b,.keys-mini{transition:none}.keys-typed i,.keys-modal{animation:none}}
@layer base{.cam-modal,.cam-modal *{cursor:default!important}.cam3d[data-cursor=pointer],.cam3d[data-cursor=pointer] *{cursor:pointer!important}.cam3d[data-cursor=grab],.cam3d[data-cursor=grab] *{cursor:grab!important}.cam3d[data-cursor=grabbing],.cam3d[data-cursor=grabbing] *{cursor:grabbing!important}.cam-corner,.cam-corner *{cursor:pointer!important}}.cam-card{appearance:none;font:inherit;text-align:left;background:0 0;border:0;padding:0}.cam-thumb{aspect-ratio:16/10;background:radial-gradient(120% 90% at 50% 15%,#fbfaf8,#e7e4df);place-items:center;display:grid;position:relative;overflow:hidden}html.nerd-mode .cam-thumb{background:radial-gradient(120% 90% at 50% 15%,#34322f,#1f1e1c)}.cam-thumb .cam-mini{aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 14px 14px #281e0f38);width:66%;height:auto;transition:transform .6s cubic-bezier(.16,1,.3,1);display:block;transform:none}.cam-card:hover .cam-thumb .cam-mini{transform:translateY(-3%)scale(1.04)}.cam-modal{z-index:10000;background:radial-gradient(75% 46% at 50% 56%,#fff 0%,#fff0 72%),linear-gradient(#dedbd6 0%,#efedea 46%,#f3f1ee 60%,#d4d0ca 100%);outline:none;animation:.35s cubic-bezier(.16,1,.3,1) both cam-in;position:fixed;inset:0;overflow:hidden}html.nerd-mode .cam-modal{background:radial-gradient(75% 46% at 50% 56%,#45423e 0%,#45423e00 72%),linear-gradient(#1b1a18 0%,#2a2826 55%,#161514 100%)}@keyframes cam-in{0%{opacity:0;transform:scale(.98)}}.cam-corner{z-index:2;width:36px;height:36px;color:var(--text-secondary);background:0 0;border:0;border-radius:50%;place-items:center;transition:background-color .2s,color .2s,transform .2s cubic-bezier(.16,1,.3,1);display:grid;position:absolute;top:22px;right:22px}.cam-corner:hover{color:var(--text-primary);background:color-mix(in srgb, currentColor 10%, transparent);transform:scale(1.06)}.cam-sound{right:66px}.cam3d-wrap{position:absolute;inset:0}.cam3d{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.cam3d-canvas{-webkit-tap-highlight-color:transparent;outline:none;width:100%;height:100%;display:block}.cam3d-video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.cam-note{text-align:center;color:var(--text-muted);place-items:center;margin:0;padding:0 24px;font-size:14px;display:grid;position:absolute;inset:0}@media (max-width:640px){.cam-corner{top:calc(14px + env(safe-area-inset-top));right:14px}.cam-sound{right:58px}}@media (prefers-reduced-motion:reduce){.cam-mini{transition:none}.cam-modal{animation:none}}