:root,:root[data-theme=dark]{color-scheme:dark;--gula-bg: #0a0a0f;--gula-line: #ffffff;--gula-face: #0c0c11;--gula-face-top: #18181f;--gula-face-side: #111117;--gula-ground-a: rgba(255, 255, 255, .1);--gula-ground-b: rgba(255, 255, 255, .16);--gula-ground-edge: rgba(255, 255, 255, .25);--switch-track: #1c1c24;--switch-border: rgba(255, 255, 255, .14);--switch-knob: #ffffff;--switch-icon: #0a0a0f;--cta-bg: #ffffff;--cta-text: #0a0a0f;--cta-glow: rgba(196, 181, 253, .45);--kb-tested: #c4b5fd;--cta-shine: rgba(196, 181, 253, .6);--spot-color: rgba(196, 181, 253, .16);--spot-blend: screen;--title-face: #ffffff;--title-stroke: transparent;--title-side-1: #d4d4de;--title-side-2: #a3a3b2;--title-side-3: #707080;--title-shadow: rgba(0, 0, 0, .55);--aurora-1: rgba(236, 72, 153, .42);--aurora-2: rgba(139, 92, 246, .42);--aurora-3: rgba(45, 212, 191, .3);--aurora-4: rgba(59, 130, 246, .34);--aurora-ray: rgba(10, 10, 15, .45);--aurora-blend: screen;--orbit-line: rgba(255, 255, 255, .07);--particle-colors: #f9a8d4, #c4b5fd, #5eead4, #ffffff}:root[data-theme=light]{color-scheme:light;--gula-bg: #f3f3f6;--gula-line: #0a0a0f;--gula-face: #ffffff;--gula-face-top: #f6f6f9;--gula-face-side: #e9e9ef;--gula-ground-a: rgba(10, 10, 15, .06);--gula-ground-b: rgba(10, 10, 15, .1);--gula-ground-edge: rgba(10, 10, 15, .18);--switch-track: #e3e3ea;--switch-border: rgba(10, 10, 15, .12);--switch-knob: #0a0a0f;--switch-icon: #ffffff;--cta-bg: #0a0a0f;--cta-text: #ffffff;--cta-glow: rgba(124, 58, 237, .3);--kb-tested: #7c3aed;--cta-shine: rgba(255, 255, 255, .28);--spot-color: rgba(139, 92, 246, .1);--spot-blend: normal;--title-face: #ffffff;--title-stroke: #0a0a0f;--title-side-1: #2a2a35;--title-side-2: #1a1a22;--title-side-3: #0a0a0f;--title-shadow: rgba(10, 10, 15, .2);--aurora-1: rgba(236, 72, 153, .2);--aurora-2: rgba(139, 92, 246, .22);--aurora-3: rgba(20, 184, 166, .16);--aurora-4: rgba(59, 130, 246, .16);--aurora-ray: rgba(243, 243, 246, .55);--aurora-blend: normal;--orbit-line: rgba(10, 10, 15, .08);--particle-colors: #db2777, #7c3aed, #0d9488, #0a0a0f}body{margin:0;background:var(--gula-bg);transition:background-color .4s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}a,img{-webkit-user-drag:none}.has-custom-cursor,.has-custom-cursor *{cursor:none!important}.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;border-radius:50%;pointer-events:none;mix-blend-mode:difference;opacity:0;will-change:translate,scale;transition:opacity .3s ease,scale .25s cubic-bezier(.2,.8,.2,1)}.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}.cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid #fff;transition:opacity .3s ease,scale .25s cubic-bezier(.2,.8,.2,1),background-color .25s ease}.cursor-dot.is-visible,.cursor-ring.is-visible{opacity:1}.cursor-ring.is-hover{scale:1.6;background-color:#ffffff1f}.cursor-dot.is-hover{scale:0}.cursor-ring.is-down{scale:.8}.cursor-ring.is-hover.is-down{scale:1.3}.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 16px 56px;box-sizing:border-box}.keyboard-stage{--u: clamp(18px, calc((100vw - 48px) / 16.2), 34px);display:flex;flex-direction:column;align-items:center;margin-top:56px}.kb-frame{position:relative}.kb{perspective:1100px;transition:opacity .4s ease}.kb.is-hidden{opacity:0;pointer-events:none}.kb-case{display:flex;flex-direction:column;gap:calc(var(--u) * .1);padding:calc(var(--u) * .32) calc(var(--u) * .3) calc(var(--u) * .42);border:2px solid var(--gula-line);border-radius:calc(var(--u) * .35);background:var(--gula-face);box-shadow:0 calc(var(--u) * .24) 0 var(--gula-line),0 calc(var(--u) * .9) calc(var(--u) * 1.2) calc(var(--u) * -.5) #00000080;transform:rotateX(28deg);transform-origin:50% 60%;transition:background-color .4s ease,border-color .4s ease}.kb-row{display:flex;gap:calc(var(--u) * .1)}.kb-key{position:relative;width:calc(var(--u) * var(--w) - var(--u) * .1);height:calc(var(--u) * .9);touch-action:none;cursor:pointer}.kb-cap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;box-sizing:border-box;border:2px solid var(--gula-line);border-radius:calc(var(--u) * .16);background:var(--gula-face-top);color:var(--gula-line);font:700 calc(var(--u) * .36) / 1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 calc(var(--u) * .14) 0 var(--gula-line);transform:translateY(calc(var(--u) * -.14));transition:transform .09s ease-out,box-shadow .09s ease-out,color .3s ease,background-color .4s ease}.kb-key.is-word .kb-cap{font-size:calc(var(--u) * .24)}.kb-gap{flex:none;width:calc(var(--u) * var(--w) - var(--u) * .1)}.kb-key.is-tall .kb-cap{bottom:calc(var(--u) * -1);align-content:start;padding-top:calc(var(--u) * .24)}.kb-key.has-sub .kb-cap{place-items:stretch;padding:calc(var(--u) * .08) calc(var(--u) * .12)}.kb-key.has-sub .kb-legend{align-self:start;justify-self:start;font-size:calc(var(--u) * .3)}.kb-key.has-sub.is-word .kb-legend{font-size:calc(var(--u) * .22)}.kb-sub{align-self:end;justify-self:end;font:600 calc(var(--u) * .24) / 1 system-ui,"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif}.kb-sub.is-long{font-size:calc(var(--u) * .17)}.kb-key.has-sub .kb-cap>*{grid-area:1 / 1}.kb-sub:lang(ja){font-family:Hiragino Sans,Yu Gothic UI,Meiryo,system-ui,sans-serif}.kb-key[data-down] .kb-cap{transform:translateY(calc(var(--u) * -.02));box-shadow:0 calc(var(--u) * .02) 0 var(--gula-line);transition-duration:.04s}.kb-key[data-tested] .kb-cap{color:var(--kb-tested)}.kb-canvas{position:absolute;left:50%;top:50%;width:calc(var(--u) * 17.5);width:round(calc(var(--u) * 17.5),4px);height:calc(var(--u) * 8.4);height:round(calc(var(--u) * 8.4),4px);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .4s ease}.keyboard-stage.is-3d .kb-canvas{opacity:1;pointer-events:auto}.kb-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:calc(var(--u) * 1.1);color:var(--gula-line);font:500 13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;opacity:.8}.kb-status kbd{display:inline-block;min-width:1.6em;margin-left:4px;padding:1px 7px;border:1.5px solid var(--gula-line);border-radius:6px;box-shadow:0 2px 0 var(--gula-line);font:700 12px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;text-align:center}.kb-status-sep{opacity:.5}.kb-reset{padding:3px 12px;border:1px solid var(--switch-border);border-radius:999px;background:var(--switch-track);color:var(--gula-line);font:600 12px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer}.kb-sound{display:grid;place-items:center;width:28px;height:24px;padding:0;border:1px solid var(--switch-border);border-radius:999px;background:var(--switch-track);color:var(--gula-line);cursor:pointer}.kb-sound svg{width:15px;height:15px}.kb-sound[aria-pressed=false]{opacity:.55}.kb-sound:focus-visible{outline:2px solid var(--gula-line);outline-offset:2px}.kb-reset:disabled{opacity:.45;cursor:default}.kb-reset:focus-visible{outline:2px solid var(--gula-line);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kb-cap{transition:none}}.logo-stage{--stage-scale: 1;position:relative}@media(max-width:480px){.logo-stage{--stage-scale: .6}}.cube-canvas{position:absolute;left:calc(100px * var(--stage-scale));top:calc(118px * var(--stage-scale));width:calc(760px * var(--stage-scale));height:calc(640px * var(--stage-scale));transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s ease}.logo-stage .gula-loader{z-index:1;pointer-events:none}.logo-stage .gula-loader .caption{pointer-events:auto}.logo-stage .gula-loader .stage,.logo-stage .gula-loader .ground{transition:opacity .4s ease}.logo-stage.is-3d .cube-canvas{opacity:1}.logo-stage.is-3d .gula-loader .stage,.logo-stage.is-3d .gula-loader .ground{opacity:0}.github-cta{position:relative;overflow:hidden;isolation:isolate;will-change:translate;display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:22px;padding:0 22px;border-radius:999px;background:var(--cta-bg);color:var(--cta-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px -10px var(--cta-glow);transition:transform .2s ease,box-shadow .2s ease,background-color .4s ease,color .4s ease}.github-cta svg{width:20px;height:20px;flex:none}.github-cta .github-cta-arrow{width:16px;height:16px;transition:transform .2s ease}.github-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--cta-glow)}.github-cta:hover .github-cta-arrow{transform:translate(2px,-2px)}.github-cta:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,var(--cta-shine) 50%,transparent 70%);transform:translate(-120%);pointer-events:none}.github-cta:hover:after{transform:translate(120%);transition:transform .7s ease}.github-cta:focus-visible{outline:2px solid var(--gula-line);outline-offset:3px}.bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-aurora{position:absolute;top:0;right:0;bottom:25%;left:0;isolation:isolate;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 35%,transparent 100%);animation:bg-breathe 11s ease-in-out infinite alternate}.bg-aurora:before{content:"";position:absolute;inset:-40% -10% auto;height:60%;background:radial-gradient(ellipse at 50% 0%,var(--aurora-2),transparent 70%);opacity:.5;filter:blur(30px)}.bg-curtain{position:absolute;top:-12%;left:var(--x);width:var(--w);height:var(--h);background:linear-gradient(to bottom,var(--c) 0%,var(--c) 30%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);filter:blur(var(--blur));mix-blend-mode:var(--aurora-blend);transform-origin:50% 0;will-change:transform,opacity;animation:bg-curtain-sway var(--dur) ease-in-out var(--delay) infinite alternate,bg-curtain-glow calc(var(--dur) * .6) ease-in-out var(--delay) infinite alternate}.bg-rays{position:absolute;top:0;right:-40px;bottom:0;left:-40px;background-image:repeating-linear-gradient(90deg,transparent 0 7px,var(--aurora-ray) 7px 8px),repeating-linear-gradient(90deg,transparent 0 13px,var(--aurora-ray) 13px 15px),repeating-linear-gradient(90deg,transparent 0 29px,var(--aurora-ray) 29px 32px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);mask-image:linear-gradient(to bottom,#000 0%,transparent 85%);filter:blur(1px);will-change:transform;animation:bg-rays 40s ease-in-out infinite alternate}@keyframes bg-curtain-sway{0%{transform:translate(calc(var(--sway) * -1)) skew(-7deg) scaleY(.88)}50%{transform:translate(calc(var(--sway) * .3)) skew(3deg) scaleY(1.05)}to{transform:translate(var(--sway)) skew(8deg) scaleY(.95)}}@keyframes bg-curtain-glow{0%{opacity:.45}to{opacity:1}}@keyframes bg-rays{to{transform:translate(32px)}}.bg-orbits{position:absolute;left:50%;top:55%;width:max(140vmin,900px);height:max(140vmin,900px);transform:translate(-50%,-50%);overflow:visible}.bg-orbits circle{fill:none;stroke:var(--orbit-line);stroke-width:1.5;vector-effect:non-scaling-stroke}.bg-orbits .bg-planet{stroke-width:2}.bg-ring{transform-origin:500px 500px;animation:bg-spin linear infinite}.bg-spotlight{position:absolute;left:-320px;top:-320px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--spot-color) 0%,transparent 65%);mix-blend-mode:var(--spot-blend);opacity:0;will-change:transform,opacity}.bg-particles{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.bg-fade{position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(to bottom,transparent,var(--gula-bg));transition:background .4s ease}@keyframes bg-breathe{0%{opacity:.7}to{opacity:1}}@keyframes bg-spin{to{transform:rotate(360deg)}}.top-controls{position:fixed;z-index:2;top:20px;right:20px;display:flex;align-items:center;gap:10px}.segmented{position:relative;display:grid;grid-template-columns:1fr 1fr;box-sizing:border-box;height:34px;padding:3px;border:1px solid var(--switch-border);border-radius:999px;background:var(--switch-track);transition:background-color .4s ease,border-color .4s ease}.segmented-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--switch-knob);transition:transform .35s cubic-bezier(.4,0,.2,1),background-color .4s ease}.segmented[data-index="1"] .segmented-thumb{transform:translate(100%)}.segmented button{position:relative;min-width:0;padding:0 7px;border:0;border-radius:999px;background:none;color:var(--gula-line);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;opacity:.7;cursor:pointer;transition:color .35s ease,opacity .35s ease}.segmented button[aria-checked=true]{color:var(--switch-icon);opacity:1}.segmented button:focus-visible{outline:2px solid var(--gula-line);outline-offset:2px}.theme-switch{position:relative;width:64px;height:34px;padding:0;border:1px solid var(--switch-border);border-radius:999px;background:var(--switch-track);cursor:pointer;transition:background-color .4s ease,border-color .4s ease}.theme-switch:focus-visible{outline:2px solid var(--gula-line);outline-offset:3px}.theme-switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--switch-knob);color:var(--switch-icon);transition:transform .4s cubic-bezier(.4,0,.2,1),background-color .4s ease,color .4s ease}.theme-switch[aria-checked=false] .knob{transform:translate(30px)}.theme-switch svg{width:16px;height:16px}@media(prefers-reduced-motion:reduce){body,.github-cta,.github-cta .github-cta-arrow,.theme-switch,.theme-switch .knob,.segmented-thumb,.segmented button{transition:none}.bg-aurora,.bg-curtain,.bg-rays,.bg-ring{animation:none}}
