.ed-frame{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#050505;place-items:center;width:100dvw;height:100dvh;display:grid;position:fixed;inset:0;overflow:hidden}.ed-frame>canvas{z-index:0;pointer-events:none;position:absolute;inset:0}.ed{--lx:0;--ly:0;--red:#ff3b30;--mono:"Space Mono", "Courier New", ui-monospace, monospace;--sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--w:min(calc((100dvh - 28px) / 2.05), calc(100dvw - 28px));--u:calc(var(--w) / 100);z-index:1;gap:calc(var(--u) * 3.2);padding:calc(var(--u) * 4.2) calc(var(--u) * 4.2) calc(var(--u) * 3);width:var(--w);height:calc(var(--w) * 2.05);border-radius:calc(var(--u) * 7.5);color:#e9e5dc;font-family:var(--sans);background:radial-gradient(90% 50% at calc(50% + var(--lx) * 45%) calc(18% + var(--ly) * 25%), #ffffff1c, transparent 62%), repeating-linear-gradient(90deg, #ffffff06 0 1px, #0000000a 1px 2px, transparent 2px 3px), linear-gradient(180deg, #1c1c1e 0%, #121213 55%, #0c0c0d 100%);box-shadow:inset 0 1px 0 #ffffff29, inset 0 -2px 0 #000000b3, inset calc(var(--lx) * -3px) 0 0 #ffffff0d, 0 50px 90px -30px #000000e6, 0 0 0 1px #000;grid-template-rows:minmax(0,1fr) auto;display:grid;position:relative;container-type:size}.ed-sheen{border-radius:inherit;pointer-events:none;z-index:0;mix-blend-mode:screen;background:linear-gradient(calc(105deg + var(--lx) * 22deg), transparent calc(32% + var(--lx) * 18%), #ffffff12 calc(46% + var(--lx) * 18%), transparent calc(60% + var(--lx) * 18%));position:absolute;inset:0}.ed-edge{border-radius:inherit;pointer-events:none;z-index:0;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 0 0 2px #0000008c}@media (max-width:640px),(max-height:520px) and (max-width:1000px){.ed{--w:100dvw;width:100dvw;height:100dvh;padding:calc(env(safe-area-inset-top,0px) + var(--u) * 3) calc(var(--u) * 3) calc(env(safe-area-inset-bottom,0px) + var(--u) * 2.4);gap:calc(var(--u) * 3);border-radius:0;box-shadow:inset 0 1px #ffffff1a}}.ed-screen{z-index:1;background:#050505;border-radius:3.4cqw;min-height:0;padding:.9cqw;position:relative;box-shadow:inset 0 2px 3px #000000e6,0 1px #ffffff17,0 0 0 1px #000}.ed-screen-in{background:#000;border-radius:2.6cqw;height:100%;position:relative;overflow:hidden;container-type:size}.ed-glass{pointer-events:none;z-index:5;background:linear-gradient(calc(120deg + var(--lx) * 18deg), #ffffff0e 0%, transparent calc(28% + var(--ly) * 8%));border-radius:2.6cqw;position:absolute;inset:.9cqw;box-shadow:inset 0 0 0 1px #ffffff0d}.ed-deck{z-index:1;justify-items:center;gap:2.6cqw;display:grid;position:relative}.ed-keys{justify-content:center;align-items:center;gap:7cqw;width:100%;display:flex}.ed-20{font-family:var(--mono);color:#8d8880;letter-spacing:.02em;text-shadow:0 1px #000c,0 -1px #ffffff0d;font-size:4.4cqw;font-weight:700}.ed-key{color:#8d8880;cursor:pointer;background:0 0;border:0;justify-items:center;gap:1.4cqw;padding:0;display:grid}.ed-key small,.ed-snd small{font-family:var(--mono);letter-spacing:.08em;text-transform:lowercase;font-size:2.5cqw}.ed-key-cap{aspect-ratio:1;background:radial-gradient(circle at calc(38% + var(--lx) * 14%) calc(30% + var(--ly) * 14%), #ff8a7f 0%, #ff3b30 26%, #c41d14 62%, #6e0c07 100%);border-radius:50%;width:15cqw;transition:transform .45s cubic-bezier(.34,1.9,.5,1),filter .2s,box-shadow .2s;display:block;box-shadow:0 0 0 .7cqw #070707,0 0 0 calc(.7cqw + 1px) #ffffff14,0 1.6cqw 1.8cqw -.6cqw #000000e6,inset 0 -.8cqw 1.2cqw #00000059}.ed-key.down .ed-key-cap{filter:brightness(1.35)saturate(1.1);transition-duration:60ms;transform:translateY(.5cqw)scale(.92);box-shadow:0 0 0 .7cqw #070707,0 0 0 calc(.7cqw + 1px) #ffffff14,0 0 5cqw 1cqw #ff3b30bf,inset 0 .6cqw 1cqw #0000004d}.ed-key:hover .ed-key-cap{filter:brightness(1.12)}.ed-key:focus-visible{outline:none}.ed-key:focus-visible .ed-key-cap{box-shadow:0 0 0 .7cqw #070707,0 0 0 calc(.7cqw + 2px) #e9e5dc}.ed-hw{grid-template-columns:1fr auto 1fr;align-items:center;gap:6cqw;width:100%;padding:0 2cqw;display:grid}.ed-spk{aspect-ratio:1;background:radial-gradient(circle, #000 0 30%, transparent 34%) 0 0 / 2.2cqw 2.2cqw, radial-gradient(circle at calc(40% + var(--lx) * 12%) 30%, #1d1d1f, #0a0a0b);border-radius:50%;justify-self:start;width:17cqw;box-shadow:inset 0 .6cqw 1cqw #000000e6,0 1px #ffffff12}.ed-wheel{aspect-ratio:1;cursor:ns-resize;touch-action:none;background:#0a0a0b;border:0;border-radius:50%;width:21cqw;padding:0;position:relative;box-shadow:0 1.4cqw 2cqw -.6cqw #000000e6,0 0 0 1px #000,inset 0 0 0 1px #ffffff0f}.ed-wheel-knurl{transform:rotate(var(--rot,0deg));background:repeating-conic-gradient(#3a3a3d 0 3deg, #121214 3deg 6deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 61%,#000 62%);mask:radial-gradient(circle,#0000 61%,#000 62%)}.ed-wheel-cap{transform:rotate(var(--rot,0deg));background:radial-gradient(circle at calc(40% + var(--lx) * 18%) calc(32% + var(--ly) * 18%), #4a4a4e, #1a1a1c 55%, #0d0d0e), repeating-conic-gradient(#ffffff08 0 2deg, transparent 2deg 4deg);border-radius:50%;position:absolute;inset:19%;box-shadow:inset 0 1px #ffffff24,0 .4cqw .8cqw #000c}.ed-wheel-cap:after{content:"";opacity:.5;background:#e9e5dc;border-radius:50%;width:1.2cqw;height:1.2cqw;margin-left:-.6cqw;position:absolute;top:12%;left:50%}.ed-wheel:focus-visible{outline-offset:3px;outline:2px solid #e9e5dc}.ed-snd{color:#8d8880;cursor:pointer;background:0 0;border:0;justify-self:end;justify-items:center;gap:1.4cqw;padding:0;display:grid}.ed-snd-slot{background:#050505;border-radius:3cqw;width:13cqw;height:5.6cqw;display:block;position:relative;box-shadow:inset 0 .5cqw .8cqw #000000f2,0 1px #ffffff12}.ed-snd-slot i{background:radial-gradient(circle at calc(38% + var(--lx) * 15%) 32%, #d9d6cf, #6f6c66 70%);border-radius:50%;width:4.2cqw;height:4.2cqw;transition:transform .4s cubic-bezier(.34,1.7,.5,1);position:absolute;top:.7cqw;left:.7cqw;box-shadow:0 .4cqw .6cqw #000c}.ed-snd.on .ed-snd-slot i{background:radial-gradient(circle at 38% 32%,#fff,#ffb3ad 40%,#ff3b30);transform:translate(7.4cqw);box-shadow:0 0 2.4cqw #ff3b30b3}.ed-snd.on small{color:#e9e5dc}.ed-snd:focus-visible{outline-offset:3px;outline:2px solid #e9e5dc}.ed-e{font:600 3.6cqw/1 var(--sans);color:#6d6962;text-shadow:0 1px #000000e6,0 -1px #ffffff0f}.ed-dots{aspect-ratio:1;--ph:0;touch-action:manipulation;cursor:crosshair;grid-template-columns:repeat(16,minmax(0,1fr));width:100%;min-width:0;display:grid;position:relative}.ed-dots i{background:radial-gradient(circle at 40% 35%,#3a1512,#1d0807);border-radius:50%;margin:19%;display:block}.ed-dots i.on{background:radial-gradient(circle at 40% 35%,#ff7a70,#ff3b30 45%,#c71e15);box-shadow:0 0 .9cqw .1cqw #ff3b30d9,0 0 2.6cqw .2cqw #ff3b3059}.ed-dots i.hit{background:radial-gradient(circle at 40% 35%,#fff,#ffe9e6);box-shadow:0 0 1.2cqw .3cqw #ffffffd9,0 0 3.4cqw .4cqw #ff786e80}.ed-dots i.rip{animation:.62s cubic-bezier(.2,.8,.3,1) both ed-rip}@keyframes ed-rip{0%{filter:none;transform:scale(1)}30%{filter:brightness(2.4)drop-shadow(0 0 .8cqw #ff3b30e6);transform:scale(1.5)}to{filter:none;transform:scale(1)}}.ed-ph{top:-1%;bottom:-1%;left:calc(var(--ph) * 6.25% + 3.125%);pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 1.4cqw #ffffffb3}@media (prefers-reduced-motion:reduce){.ed-key-cap,.ed-snd-slot i{transition:none}.ed-dots i.rip{animation:none}}.ed-frame.open .ed,.ed-frame.dive .ed{--w:min(calc((100dvh - 28px) / 2.05), calc(100dvw - 28px));width:var(--w);height:calc(var(--w) * 2.05);border-radius:calc(var(--u) * 7.5);padding:calc(var(--u) * 4.2) calc(var(--u) * 4.2) calc(var(--u) * 3);gap:calc(var(--u) * 3.2);transform:translate(var(--tx,0px), var(--ty,0px)) perspective(1700px) rotateX(var(--rx,9deg)) rotateY(var(--ry,-15deg)) rotateZ(var(--rz,2deg)) scale(var(--s,.82));transform-origin:var(--ox,50%) var(--oy,36%);will-change:transform}.ed-frame.open .ed{cursor:pointer}.ed-frame.open .ed *,.ed-frame.dive .ed *{pointer-events:none}.ed-open-ui{z-index:2;left:0;right:0;bottom:max(env(safe-area-inset-bottom,0px), 14px);letter-spacing:.06em;color:#f5f5f280;pointer-events:none;justify-content:center;align-items:baseline;gap:14px;margin:0;font-family:Space Mono,ui-monospace,monospace;font-size:12px;transition:opacity .3s;display:flex;position:absolute}.ed-open-ui button{pointer-events:auto;font:inherit;color:#f5f5f2d1;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #ff3b30;padding:6px 2px}.ed-frame:not(.open) .ed-open-ui{opacity:0}.ed-frame:not(.open) .ed-open-ui button{pointer-events:none}.ed-frame.app{--deck:calc(92px + env(safe-area-inset-bottom,0px))}.ed-frame.app .ed{width:100%;height:100%;box-shadow:none;background:0 0;border-radius:0;padding:0;display:block;position:absolute;inset:0;transform:none}.ed-frame.app .ed-sheen,.ed-frame.app .ed-edge,.ed-frame.app .ed-glass,.ed-frame.app .ed-spk,.ed-frame.app .ed-e{display:none}.ed-frame.app .ed-screen{box-shadow:none;background:0 0;border-radius:0;padding:0;position:absolute;inset:0}.ed-frame.app .ed-screen-in{background:#02020280;border-radius:0;transition:background .9s}.ed-frame.app .ed-deck{z-index:3;height:var(--deck);padding:0 12px env(safe-area-inset-bottom,0px);justify-content:center;align-items:center;gap:6cqw;width:min(100%,520px);margin:0 auto;display:flex;position:absolute;bottom:0;left:0;right:0;container-type:inline-size}.ed-frame.app .ed:after{content:"";height:var(--deck);z-index:2;pointer-events:none;background:linear-gradient(#05050500,#050505e6 34%);position:absolute;bottom:0;left:0;right:0}.ed-frame.app .ed-keys,.ed-frame.app .ed-hw{display:contents}.ed-frame.app .ed-snd{order:-1}.ed-frame.app .ed-wheel{order:5;width:max(44px,11.5cqw)}.ed-frame.app .ed-key-cap{width:max(40px,10.5cqw)}.ed-frame.app .ed-key small,.ed-frame.app .ed-snd small{font-size:max(10px,2.4cqw)}.ed-frame.app .ed-20{font-size:max(15px,4.2cqw)}.ed-frame.app .ed-snd-slot{border-radius:9px;width:36px;height:17px}.ed-frame.app .ed-snd-slot i{width:12px;height:12px;top:2.5px;left:2.5px}.ed-frame.app .ed-snd.on .ed-snd-slot i{transform:translate(19px)}@media (prefers-reduced-motion:reduce){.ed-frame.open .ed{--rx:0deg;--ry:0deg;--rz:0deg}}
