:root{--page-bg:#101010;--body:#2c3138;--body-edge:#1d2126;--bezel:#15181c;--key-bg:#3d434c;--key-fg:#e9edf2;--key-sub:#9aa3ad;--key-pressed:#59616c;--nav-bg:#4a525c;--ok-bg:#6b7a3e;--ok-fg:#e9edf2;--corner:6px}html{background:var(--page-bg)}*{box-sizing:border-box}html,body{height:100%;color:var(--key-fg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;margin:0;font-family:system-ui,sans-serif;overflow:hidden}#app{justify-content:center;height:100%;display:flex}.phone{width:100%;max-width:500px;height:100%;padding:2px 6px max(6px, env(safe-area-inset-bottom));background-color:var(--body);border:1px solid var(--body-edge);border-radius:var(--corner);flex-direction:column;gap:3px;display:flex;position:relative;box-shadow:inset 7px 0 8px -7px #ffffff40,inset -7px 0 9px -6px #000000a0,inset 0 2px 2px -1px #ffffff40,inset 0 -4px 6px -3px #00000090}[data-tex=plastic] .phone{background-image:linear-gradient(170deg,#ffffff14,#fff0 40%,#00000024)}[data-tex=metal] .phone{background-image:repeating-linear-gradient(90deg,#ffffff0d 0 1px,#0000 1px 2px,#0000000d 2px 3px),linear-gradient(90deg,#ffffff38,#ffffff08 22%,#00000018 55%,#ffffff2a 82%,#00000030)}[data-tex=gloss] .phone{background-image:linear-gradient(115deg,#ffffff30,#ffffff0a 26%,#fff0 27%),linear-gradient(#ffffff12,#00000030)}[data-tex=camo] .phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%232f3522'%3E%3Cpath d='M-5 22 Q18 2 48 16 T78 44 Q44 66 20 50 T-5 22Z'/%3E%3Cpath d='M92 88 Q122 66 152 84 T142 128 Q110 138 96 118Z'/%3E%3C/g%3E%3Cg fill='%236a6f48'%3E%3Cpath d='M88 8 Q116 -6 140 16 T118 50 Q92 44 88 8Z'/%3E%3Cpath d='M8 92 Q34 74 58 92 T52 140 Q20 146 8 92Z'/%3E%3C/g%3E%3Cpath fill='%231c2012' d='M58 62 Q76 54 88 70 T70 92 Q52 84 58 62Z'/%3E%3C/svg%3E")}.brow{flex:0 0 12px;grid-template-columns:1fr 64px 1fr;align-items:center;gap:6px;padding:0 6px;display:grid}.model{letter-spacing:1.2px;text-transform:uppercase;color:var(--key-sub);white-space:nowrap;text-shadow:0 1px #00000080;font:700 8px/1 system-ui,sans-serif;overflow:hidden}.ear{background:repeating-linear-gradient(90deg,#000 0 2px,#2a2a2a 2px 4px);border-radius:3px;height:5px;box-shadow:inset 0 1px 1px #000,0 1px #ffffff30}.led{background:radial-gradient(circle at 35% 30%, #fff, var(--ok-bg) 55%, #000 110%);width:5px;height:5px;box-shadow:0 0 3px var(--ok-bg);border-radius:50%;justify-self:end;animation:3s step-end infinite led}@keyframes led{0%,92%{opacity:.35}93%,to{opacity:1}}.display{background:linear-gradient(180deg, #ffffff12, #0000 12%), var(--bezel);border-radius:min(var(--corner), 10px);flex:auto;justify-content:center;align-items:center;min-height:0;padding:2px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #000000d0,inset 0 -1px 1px #ffffff1a,0 1px #ffffff26,0 -1px #00000080}.screen{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.keypad{flex-direction:column;flex:none;gap:6px;display:flex}.keypad-nav{flex:3 1 0;grid-template-rows:repeat(3,1fr);gap:3px;min-height:0;display:grid;position:relative}.keypad-row{grid-template-columns:1fr 1fr 1fr;gap:5px;min-height:0;display:grid}.keypad-digits{flex:4 1 0;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:3px 5px;min-height:0;display:grid}.key{z-index:1;background-color:var(--key-bg);min-height:0;color:var(--key-fg);font:700 17px/1 var(--key-font,system-ui, sans-serif);text-shadow:0 1px #00000050;touch-action:none;background-image:linear-gradient(#ffffff2e,#fff0 45%,#00000030);border:none;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0;display:flex;position:relative;box-shadow:inset 0 1px #ffffff38,inset 0 -1px #00000050,0 2px 2px #00000080}.key.pressed{background-color:var(--key-pressed);background-image:linear-gradient(#00000030,#ffffff14);transform:translateY(1px);box-shadow:inset 0 2px 3px #00000090}.key-sub{color:var(--key-sub);text-shadow:none;font-size:10px;font-weight:500}.nav{background-color:var(--nav-bg)}.nav-ok{background-color:var(--ok-bg);color:var(--ok-fg)}.soft{background-image:linear-gradient(#ffffff1f,#00000030);font-size:13px}.row-down{grid-template-columns:1fr 1fr 1fr}.row-down .nav-down{grid-column:2}[data-pad=cross] .keypad-nav:before,[data-pad=cross] .keypad-nav:after{content:"";background-color:var(--nav-bg);background-image:linear-gradient(#ffffff2e,#00000030);border-radius:9px;position:absolute;box-shadow:inset 0 1px #ffffff38,0 2px 2px #00000080}[data-pad=cross] .keypad-nav:before{inset:0 33.5%}[data-pad=cross] .keypad-nav:after{background-image:linear-gradient(#ffffff24,#00000024);inset:34% 8%}[data-pad=cross] .nav:not(.nav-ok){box-shadow:none;background:0 0;font-size:14px}[data-pad=cross] .nav.pressed:not(.nav-ok){background:radial-gradient(closest-side,#ffffff40,#fff0);transform:none}[data-pad=cross] .nav-ok{border-radius:8px;margin:3px 16%;font-size:14px}[data-keys=dome] .keypad-digits .key{background-image:radial-gradient(at 50% 22%,#ffffff40,#fff0 58%),linear-gradient(#0000 55%,#00000040);border-radius:46%/58%}[data-keys=pill] .keypad-digits .key{border-radius:999px}[data-keys=square] .keypad-digits .key,[data-keys=square] .soft{border-radius:3px}[data-keys=flat] .keypad-digits{background:#00000060;border-radius:9px;gap:1px;padding:2px;box-shadow:inset 0 1px 2px #000000b0,0 1px #ffffff24}[data-keys=flat] .keypad-digits .key{box-shadow:none;border-radius:0}[data-keys=flat] .keypad-digits .key:first-child{border-top-left-radius:7px}[data-keys=flat] .keypad-digits .key:nth-child(3){border-top-right-radius:7px}[data-keys=flat] .keypad-digits .key:nth-child(10){border-bottom-left-radius:7px}[data-keys=flat] .keypad-digits .key:last-child{border-bottom-right-radius:7px}[data-keys=petal] .keypad-digits .key:nth-child(3n+1){border-radius:70% 10%}[data-keys=petal] .keypad-digits .key:nth-child(3n+2){border-radius:14px}[data-keys=petal] .keypad-digits .key:nth-child(3n){border-radius:10% 70%}[data-keys=glow] .keypad-digits{gap:1px}[data-keys=glow] .keypad-digits .key{box-shadow:none;border-bottom:1px solid var(--key-bg);background:0 0;border-radius:2px}[data-keys=glow] .key{text-shadow:0 0 6px var(--key-fg)}[data-keys=hex] .keypad-digits .key{box-shadow:none;clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);border-radius:0}[data-keys=facet] .keypad-digits .key{box-shadow:none;clip-path:polygon(12% 0,88% 0,100% 24%,100% 76%,88% 100%,12% 100%,0 76%,0 24%);background-image:linear-gradient(135deg,#ffffff70,#fff0 40%,#0000 60%,#00000050);border-radius:0}[data-keys=toy] .keypad-digits .key{color:#16365c;background-image:radial-gradient(at 50% 10%,#ffffffd0,#fff0 55%),linear-gradient(#0000 60%,#00000030);border-radius:999px;font-size:20px;box-shadow:0 3px #0000004d,0 4px 3px #00000060}[data-keys=toy] .keypad-digits .key:nth-child(4n+1){background-color:#ff8f8f}[data-keys=toy] .keypad-digits .key:nth-child(4n+2){background-color:#ffd866}[data-keys=toy] .keypad-digits .key:nth-child(4n+3){background-color:#8fe08f}[data-keys=toy] .keypad-digits .key:nth-child(4n){background-color:#8fc8ff}[data-keys=toy] .key-sub{display:none}[data-round] .keypad-row{grid-template-columns:1fr 64px 1fr}[data-round] .row-soft{grid-template-columns:1fr calc(var(--ring,100px) + 8px) 1fr}[data-round] .keypad-nav:before{content:"";left:50%;top:calc((100% - var(--ring,100px)) / 2);width:var(--ring,100px);height:var(--ring,100px);background-color:var(--nav-bg);background-image:radial-gradient(circle at 50% 28%,#ffffff38,#fff0 60%),linear-gradient(#fff0 55%,#00000050);border-radius:50%;position:absolute;transform:translate(-50%);box-shadow:0 0 0 2px #00000060,0 0 0 3px #ffffff30,inset 0 1px 1px #ffffff50,0 3px 4px #00000090}[data-pad=rocker] .keypad-nav:before{border-radius:24%;box-shadow:0 0 0 1px #00000090,inset 0 1px 1px #ffffff60,0 3px 4px #00000090}[data-pad=rocker] .nav-ok{border-radius:8px!important}[data-pad=wheel] .keypad-nav:before{background-image:repeating-conic-gradient(#ffffff1c 0 2deg, #fff0 2deg 15deg), radial-gradient(circle at 50% 28%, #ffffff28, #fff0 60%)}[data-pad=stick] .keypad-nav:before{width:calc(var(--ring,100px) * .8);height:calc(var(--ring,100px) * .8);top:calc((100% - var(--ring,100px) * .8) / 2);background-image:radial-gradient(circle at 50% 70%,#ffffff18,#00000060 75%);box-shadow:inset 0 3px 6px #000000c0,0 1px #ffffff40}[data-round] .nav:not(.nav-ok){box-shadow:none;background:0 0;font-size:13px;position:relative}[data-round] .nav.pressed:not(.nav-ok){opacity:.55;transform:none}[data-round] .nav-left{justify-content:flex-end;padding-right:6px}[data-round] .nav-right{justify-content:flex-start;padding-left:6px}[data-round] .nav-ok{aspect-ratio:1;background-image:radial-gradient(circle at 42% 30%,#ffffff60,#fff0 58%),linear-gradient(#fff0 50%,#00000050);border-radius:50%;justify-self:center;height:100%;font-size:13px;position:relative;box-shadow:0 0 0 1px #00000080,0 2px 3px #00000090}[data-pad=stick] .nav-ok{background-image:radial-gradient(circle at 42% 30%,#ffffffa0,#fff0 42%),radial-gradient(circle at 50% 55%,#fff0 55%,#00000090);box-shadow:0 0 0 1px #00000090,0 4px 5px #000000c0}[data-pad=wheel] .nav-ok .key-main,[data-pad=stick] .nav-ok .key-main{display:none}[data-round] .soft{position:relative}.soft{white-space:nowrap;padding:0 2px;overflow:hidden}[data-deck=wings] .keypad-nav{grid-template-rows:repeat(3,1fr);grid-template-columns:23% 1fr 62px 1fr 23%;column-gap:3px}[data-deck=wings] .keypad-row{display:contents}[data-deck=wings] .soft-left{grid-area:1/1/4}[data-deck=wings] .soft-right{grid-area:1/5/4}[data-deck=wings] .nav-up{grid-area:1/2/auto/5}[data-deck=wings] .nav-left{grid-area:2/2}[data-deck=wings] .nav-ok{grid-area:2/3}[data-deck=wings] .nav-right{grid-area:2/4}[data-deck=wings] .nav-down{grid-area:3/2/auto/5}[data-deck=wings][data-pad=cross] .keypad-nav:before{left:calc(50% - 38px);right:calc(50% - 38px)}[data-deck=wings][data-pad=cross] .keypad-nav:after{left:24.5%;right:24.5%}[data-deck=wings][data-pad=cross] .nav-ok{margin:3px 0}[data-deck=side] .keypad{flex-direction:row;gap:6px}[data-deck=side] .keypad-nav{flex:0 0 42%;grid-template-rows:32px repeat(3,1fr);grid-template-columns:repeat(6,1fr);gap:4px 0}[data-deck=side] .keypad-digits{flex:1 1 0}[data-deck=side] .keypad-row{display:contents}[data-deck=side] .soft-left{grid-area:1/1/auto/4;margin-right:2px;font-size:12px}[data-deck=side] .soft-right{grid-area:1/4/auto/7;margin-left:2px;font-size:12px}[data-deck=side] .nav-up{grid-area:2/3/auto/5}[data-deck=side] .nav-left{grid-area:3/1/auto/3}[data-deck=side] .nav-ok{grid-area:3/3/auto/5}[data-deck=side] .nav-right{grid-area:3/5/auto/7}[data-deck=side] .nav-down{grid-area:4/3/auto/5}[data-deck=side][data-round] .keypad-nav:before{top:calc(36px + (100% - 36px - var(--ring,100px)) / 2)}[data-deck=side][data-pad=stick] .keypad-nav:before{top:calc(36px + (100% - 36px - var(--ring,100px) * .8) / 2)}[data-deck=side][data-round] .nav-ok{align-self:center;height:74%}[data-deck=side][data-pad=cross] .keypad-nav:before{top:36px;left:33.5%;right:33.5%}[data-deck=side][data-pad=cross] .keypad-nav:after{inset:calc(33.3333% + 27px) 2% calc(33.3333% - 9px)}[data-deck=side][data-pad=cross] .nav-ok{margin:8px 3px}[data-deck=side] .keypad-digits .key{flex-direction:column;gap:1px;font-size:20px}[data-deck=side] .key-sub{font-size:9px}[data-deck=arc] .keypad-digits{column-gap:7px;margin-top:5px}[data-deck=arc] .keypad-digits .key:nth-child(3n+1){transform:translateY(-5px)rotate(-3deg)}[data-deck=arc] .keypad-digits .key:nth-child(3n+2){transform:translateY(1px)}[data-deck=arc] .keypad-digits .key:nth-child(3n){transform:translateY(-5px)rotate(3deg)}[data-phone=mono],[data-phone=military],[data-phone=steel]{--key-font:ui-monospace, "Roboto Mono", monospace}[data-phone=gold],[data-phone=petal],[data-phone=amber]{--key-font:Georgia, "Noto Serif", serif}[data-phone=cube],[data-phone=pocket]{--key-font:"Comic Sans MS", ui-rounded, system-ui, sans-serif}[data-phone=choco],[data-phone=slider]{--key-font:"Roboto Condensed", "Arial Narrow", system-ui, sans-serif}[data-phone=pink] .keypad-digits .key{flex-direction:column;gap:0}[data-phone=pink] .keypad-digits .key-sub{font-size:9px}[data-phone=lamp] .keypad-digits .key{flex-direction:column;gap:0}[data-phone=classic] .display{background:linear-gradient(#aeb7c0,#6e7780);padding:3px}[data-phone=classic] .ear{width:34px;box-shadow:none;background:radial-gradient(circle,#000 1px,#0000 1.4px) 0 0/5px 5px;justify-self:center}[data-phone=mono] .brow{grid-template-columns:1fr 110px 1fr}[data-phone=mono] .ear{background:#000;height:3px}[data-phone=mono] .keypad-digits .key{background-image:none;box-shadow:inset 0 0 0 1px #ffffff14}[data-phone=amber] .keypad-digits .key{color:#ffd9a0;text-shadow:0 0 5px #ff9a3a90;box-shadow:inset 0 1px #ffffff30,inset 0 0 10px #d8641c50,0 2px 2px #00000080}[data-phone=amber] .nav-ok{box-shadow:0 0 8px #ff9a3a,0 0 0 1px #00000080}[data-phone=ice] .phone{background-image:radial-gradient(130% 30% at 50% 66%,#9fd2ff30,#9fd2ff00 70%),linear-gradient(115deg,#ffffff38,#ffffff0a 30%,#fff0 31%)}[data-phone=ice] .key{background-image:linear-gradient(#ffffff40,#9fd2ff14 50%,#00000030)}[data-phone=pink] .brow{background:linear-gradient(#00000060,#ffffff50 30%,#ffffff10 55%,#00000080);border-radius:7px;position:relative}[data-phone=pink] .ear{background:#3a1d27}[data-phone=pink] .model{color:#3a1d27;text-shadow:0 1px #ffffff60}[data-phone=pink] .keypad-digits .key{box-shadow:inset 0 0 0 1px #fff0f6a0}[data-phone=gold] .display{background:linear-gradient(135deg,#fff3b0,#8a6b1f 45%,#e0c066 70%,#6b5216);padding:3px}[data-phone=gold] .led{background:radial-gradient(circle at 35% 30%,#fff,#d03040 55%,#40060c);animation:none;box-shadow:0 0 4px #ff5060}[data-phone=cube] .phone{border-width:3px;border-color:#f2b63b}[data-phone=slider] .keypad{background:linear-gradient(#00000090,#23262b 8px),#23262b;margin:0 -6px -6px;padding:7px 8px 6px;box-shadow:inset 3px 0 #8d939a,inset -3px 0 #8d939a}[data-phone=player] .brow{box-shadow:0 1px #ff7a1a}[data-phone=player] .display{box-shadow:inset 0 2px 4px #000000d0,0 0 0 1px #ff7a1a}[data-phone=player] .key-sub{color:#6a4a22}[data-phone=pocket] .phone{background-image:radial-gradient(circle,#ffd24a 1px,#ffd24a00 1.6px),radial-gradient(circle,#fff .8px,#fff0 1.4px),linear-gradient(115deg,#ffffff30,#fff0 30%);background-position:7px 9px,20px 25px,0 0;background-size:46px 46px,31px 31px,auto}[data-phone=military] .phone:before,[data-phone=military] .phone:after{content:"";pointer-events:none;background:repeating-linear-gradient(135deg,#e7c95a 0 7px,#14170d 7px 14px);height:9px;position:absolute;left:0;right:0}[data-phone=military] .phone:before{display:none}[data-phone=military] .phone:after{height:5px;bottom:0}[data-phone=military] .brow{background:#14170dcc;border-radius:2px}[data-phone=military] .display{box-shadow:0 0 0 2px #14170d,0 0 0 3px #6a6f48}[data-phone=military] .key{box-shadow:inset 0 0 0 1px #6a6f4880,0 2px #000}[data-phone=military] .ear{background:repeating-linear-gradient(90deg,#000 0 3px,#6a6f48 3px 5px)}[data-phone=lamp] .led{background:radial-gradient(circle,#fff 15%,#f5efb0 40%,#8d8a60 75%,#2a2a20);border-radius:3px;width:12px;height:10px;animation:none;box-shadow:0 0 6px #f5efb0,0 0 0 1px #000}[data-phone=lamp] .phone{background-image:repeating-linear-gradient(0deg,#00000040 0 1px,#ffffff0d 1px 4px),linear-gradient(170deg,#ffffff14,#00000024);background-repeat:repeat-y,no-repeat;background-size:7px 100%,auto}[data-phone=steel] .display{background:linear-gradient(#d8dde2,#6e7379);padding:3px}[data-phone=steel] .ear{background:repeating-linear-gradient(90deg,#111315 0 1px,#6e7379 1px 3px);height:4px}[data-phone=steel] .led{background:radial-gradient(circle at 40% 35%,#f2f4f6,#6e7379 60%,#111315);animation:none;box-shadow:inset 0 0 0 1px #111315}[data-phone=petal] .keypad-digits .key{background-image:linear-gradient(160deg,#ffffff70,#fff0 45%,#7a2a3330)}[data-phone=petal] .display{box-shadow:0 0 0 1px #c9a15a,inset 0 2px 4px #000000d0}[data-phone=petal] .model{color:#c9a15a}[data-phone=stick] .brow{box-shadow:0 1px #e86a12}[data-phone=stick] .soft{color:#ffb070}[data-phone=choco] .display{box-shadow:0 2px 0 -1px #ff3b30,0 3px 6px #ff3b3080}[data-phone=choco] .key-sub{color:#6a221c}[data-phone=choco] .led{background:#ff3b30;box-shadow:0 0 5px #ff3b30}.page-wall{width:100%;height:100%;image-rendering:pixelated;z-index:-1;position:fixed;inset:0}[data-phone=cube] .model{color:#fff}[data-phone=lamp] .model{color:#a9c8d6}[data-phone=gold] .model{color:#2a2008;text-shadow:0 1px #fff3b080}[data-phone=slider] .model,[data-phone=steel] .model,[data-phone=stick] .model{color:#23262b;text-shadow:0 1px #ffffff80}[data-phone=choco] .model{color:#ff4a3a}