:root{--navy:#021526;--teal:#03a6a1;--cyan:#5ff5ff;--pearl:#f3efe6;--coral:#ff7a8a;--glow:0.5}
html,body{margin:0;background:var(--navy);color:var(--pearl);font-family:'Martian Mono',monospace;overflow-x:hidden}
#sea{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
#root{position:relative;z-index:1}
.title{font-family:'Italiana',serif;letter-spacing:.25em;text-shadow:0 0 calc(30px*var(--glow)) var(--cyan),0 0 4px var(--teal)}
.italic{font-family:'Fraunces',serif;font-style:italic}
.glass{background:rgba(8,40,60,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(95,245,255,.18);border-radius:22px 22px 30px 30px;transition:transform .5s}
.glass:hover{animation:wob 1.6s ease-in-out infinite}
@keyframes wob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-.3deg)}}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.kbd-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kbd{position:relative;min-width:720px;height:230px;user-select:none}
.wkey{position:absolute;top:0;height:100%;border-radius:0 0 14px 14px;touch-action:none;cursor:pointer;
 background:linear-gradient(170deg,#fffaf0 0%,#e7f3f1 35%,#d6e6f5 60%,#f5e3ea 80%,#e8f7f2 100%);
 box-shadow:inset 0 -10px 18px rgba(0,60,90,.25),0 6px 12px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.5);overflow:hidden}
.bkey{position:absolute;top:0;height:60%;z-index:2;border-radius:0 0 10px 10px;touch-action:none;cursor:pointer;
 background:linear-gradient(180deg,#0b0d14,#1a1f2c 70%,#05060a);box-shadow:inset 0 -6px 0 rgba(255,122,138,.55),0 6px 10px rgba(0,0,0,.6);border:1px solid #2a3040;overflow:hidden}
.meter{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,rgba(3,166,161,.85),rgba(95,245,255,.3));pointer-events:none}
.klabel{position:absolute;bottom:8px;width:100%;text-align:center;font-size:10px;color:#35607a;pointer-events:none}
.bkey .klabel{color:#ff9eaa}
.membrane{border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.35),rgba(95,245,255,.08) 60%,rgba(0,0,0,.2));border:1px solid rgba(95,245,255,.35)}
input[type=range]{accent-color:var(--teal);width:100%}
.btn{border:1px solid rgba(95,245,255,.35);border-radius:999px;padding:6px 14px;font-size:11px;transition:all .2s;background:rgba(3,166,161,.12)}
.btn:hover{background:rgba(95,245,255,.25);box-shadow:0 0 14px rgba(95,245,255,.4)}
.btn.on{background:var(--coral);color:var(--navy);border-color:var(--coral)}
.depth{writing-mode:vertical-lr;direction:rtl;height:110px;width:22px}
a{color:var(--cyan)}