/* The try-it calculator on the store front (try.js draws it). */
.sim { width: 100%; max-width: 380px; }
/* the body: 560 x 1190 units, everything inside is placed in % of that (try.js); text sizes use the body's width (cqw) */
.calc { position: relative; width: 100%; aspect-ratio: 560 / 1190; container-type: inline-size; border-radius: 15% 15% 18% 18% / 7% 7% 8.5% 8.5%;
  background: linear-gradient(90deg, #121214 0%, #222225 6%, #1c1c1f 50%, #222225 94%, #121214 100%);
  box-shadow: 0 30px 70px rgba(12,27,51,.32), inset 0 2px 0 rgba(255,255,255,.07), inset 0 -3px 0 rgba(0,0,0,.5); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.calc:focus-visible { outline: 3px solid #7fc4e3; outline-offset: 5px; }
.face { position: absolute; left: 4%; right: 4%; border-radius: 9cqw 9cqw 4cqw 4cqw; background: linear-gradient(180deg, #0f0f11, #161618); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.bezel { position: absolute; background: #08090b; border-radius: 4.5cqw; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 6px 14px rgba(0,0,0,.7); }
.screen-box { position: absolute; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .6cqw; background: #000; box-shadow: 0 0 0 1px #000; }
.screen { position: absolute; left: 0; top: 0; width: 320px; height: 240px; transform-origin: 0 0; overflow: hidden; font-family: "VT323", ui-monospace, monospace; font-size: 16px; line-height: 16px; }
.screen * { box-sizing: border-box; }

/* keys */
.k { position: absolute; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; border-radius: 1.9cqw;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 3.6cqw; letter-spacing: -.01em;
  background: linear-gradient(180deg, #2b2b2e, #0d0d0f 70%); color: #fff; box-shadow: 0 .5cqw 0 #000, inset 0 .3cqw 0 rgba(255,255,255,.12); }
.k:active, .k.down { transform: translateY(.4cqw); box-shadow: 0 .1cqw 0 #000, inset 0 .3cqw 0 rgba(255,255,255,.12); }
.k.small { font-size: 2.9cqw; }
.k.fn { border-radius: 3.2cqw; font-size: 3.1cqw; background: linear-gradient(180deg, #fbf7ec, #e7e0cc); color: #111; box-shadow: 0 .5cqw 0 #9d977f, inset 0 .3cqw 0 #fff; }
.k.num, .k.op { background: linear-gradient(180deg, #fffdf6, #ebe6d6); color: #111; box-shadow: 0 .6cqw 0 #a7a190, inset 0 .3cqw 0 #fff; }
.k.num { font-size: 6cqw; border-radius: 2.2cqw; }
.k.op { font-size: 5cqw; }
.k[data-k="enter"] { font-size: 3.6cqw; }
.k[data-k="neg"] { font-size: 4.2cqw; }
.k.second { background: linear-gradient(180deg, #8fcbea, #63aed6); color: #fff; box-shadow: 0 .5cqw 0 #3c7ea3, inset 0 .3cqw 0 rgba(255,255,255,.35); }
.k.alpha { background: linear-gradient(180deg, #b3e07f, #8cc653); color: #fff; box-shadow: 0 .5cqw 0 #5c8c2e, inset 0 .3cqw 0 rgba(255,255,255,.35); }
.k.lit { outline: .5cqw solid #fff; outline-offset: .4cqw; }
.lb { position: absolute; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 2.65cqw; line-height: 1; white-space: nowrap; }
.lb i { font-style: normal; color: #7cc6ec; }
.lb b { color: #9fd468; margin-left: auto; }

/* arrow pad: four keys in a ring */
.dpad { position: absolute; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 45deg, #f5f1e4, #e3dcc8, #f5f1e4, #e3dcc8, #f5f1e4); box-shadow: 0 .6cqw 0 #8e8874, inset 0 .3cqw 0 #fff; overflow: hidden; }
.dpad::before, .dpad::after { content: ""; position: absolute; left: 50%; top: -10%; width: .5cqw; height: 120%; background: #1c1c1f; transform: rotate(45deg); }
.dpad::after { transform: rotate(-45deg); }
.dpad .hub { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2c2c30, #0d0d0f); z-index: 2; pointer-events: none; }
.dpad button { position: absolute; border: 0; background: none; cursor: pointer; width: 50%; height: 50%; z-index: 1; }
.dpad button::after { content: ""; position: absolute; border: 1.6cqw solid transparent; }
.dpad .u { left: 25%; top: 0; } .dpad .u::after { left: 50%; top: 22%; transform: translateX(-50%); border-bottom: 2cqw solid #111; border-top: 0; }
.dpad .d { left: 25%; bottom: 0; } .dpad .d::after { left: 50%; bottom: 22%; transform: translateX(-50%); border-top: 2cqw solid #111; border-bottom: 0; }
.dpad .l { left: 0; top: 25%; } .dpad .l::after { top: 50%; left: 22%; transform: translateY(-50%); border-right: 2cqw solid #111; border-left: 0; }
.dpad .r { right: 0; top: 25%; } .dpad .r::after { top: 50%; right: 22%; transform: translateY(-50%); border-left: 2cqw solid #111; border-right: 0; }
.dpad button:active::after { opacity: .5; }

/* screens */
.s-home { width: 100%; height: 100%; background: linear-gradient(180deg, rgb(18,36,88), rgb(63,96,178)); color: rgb(245,248,255); position: relative; }
.bar { position: absolute; left: 0; top: 0; width: 320px; height: 22px; background: rgb(10,18,45); display: flex; align-items: center; padding: 0 6px; color: rgb(245,248,255); }
.bar .clock { position: absolute; left: 0; right: 0; text-align: center; }
.bar .net { margin-left: auto; margin-right: 8px; color: rgb(52,168,83); position: relative; }
.bar .batt { position: relative; width: 24px; height: 10px; border: 1px solid rgb(190,205,235); padding: 1px; display: flex; gap: 1px; }
.bar .batt i { display: block; width: 4px; background: rgb(52,168,83); }
.home-sub { position: absolute; top: 30px; left: 0; right: 0; text-align: center; color: rgb(190,205,235); }
.tile { position: absolute; width: 72px; height: 56px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; }
.tile.sel { box-shadow: 0 0 0 3px #fff; }
.tile svg { width: 30px; height: 26px; }
.tile span { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 15px; }
.home-hint { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; color: rgb(190,205,235); font-size: 14px; }

.s-chat { width: 100%; height: 100%; background: #e6eefb; color: #12224a; position: relative; }
.chat-head { display: flex; justify-content: space-between; padding: 3px 6px 2px; border-bottom: 1px solid #9fb4d8; height: 20px; }
.chat-head span:last-child { color: #8796b5; }
.chat-log { position: absolute; top: 22px; left: 0; right: 0; bottom: 42px; padding: 2px 6px; overflow: hidden; }
.chat-log .q { color: #3a5fb0; margin-top: 4px; }
.chat-log .a { white-space: pre-wrap; margin-top: 2px; }
.chat-log .muted { color: #8796b5; }
.chat-in { position: absolute; left: 6px; right: 6px; bottom: 18px; height: 22px; border: 1px solid #6f8bc4; border-radius: 10px; display: flex; align-items: center; padding: 0 8px; background: #f4f8ff; }
.chat-in input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: #12224a; outline: none; padding: 0; height: 20px; }
.chat-in em { font-style: normal; color: #8796b5; margin-left: 6px; }
.chat-foot { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; color: #8796b5; font-size: 15px; }

.s-app { width: 100%; height: 100%; background: #f5f6f8; color: #16181d; position: relative; }
.app-head { height: 22px; background: rgb(10,18,45); color: #fff; padding: 3px 6px; display: flex; justify-content: space-between; }
.app-head span:last-child { color: rgb(190,205,235); }
.app-body { padding: 6px 10px; }
.menu-row { padding: 3px 6px; border-radius: 4px; }
.menu-row.sel { background: rgb(66,133,244); color: #fff; }
.menu-row small { font-size: 16px; opacity: .7; }
.field { display: flex; gap: 8px; padding: 2px 6px; border-radius: 4px; }
.field.sel { background: #dbe6fb; }
.field b { font-weight: 400; width: 26px; color: #4a5568; }
.field i { font-style: normal; }
.field.sel i::after { content: "_"; animation: blink 1s steps(1) infinite; }
.result { margin-top: 6px; padding-top: 4px; border-top: 1px solid #cfd5df; }
.result .big { color: rgb(30,90,200); }
.app-foot { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; color: #7a8394; font-size: 15px; }
.tri { position: absolute; right: 8px; bottom: 22px; }

.s-info { width: 100%; height: 100%; background: linear-gradient(180deg, rgb(18,36,88), rgb(63,96,178)); color: rgb(245,248,255); position: relative; }
.s-info .app-body p { margin-bottom: 8px; }
.s-info .needs { color: rgb(250,210,40); }
.s-info .app-foot { color: rgb(190,205,235); }

.s-ti { width: 100%; height: 100%; background: #fbfbf8; color: #111; padding: 4px 6px; position: relative; }
.ti-lines { position: absolute; left: 6px; right: 6px; bottom: 20px; }
.ti-lines .ans { text-align: right; }
.ti-cur::after { content: "█"; animation: blink 1s steps(1) infinite; }
.ti-mode { position: absolute; top: 2px; right: 6px; color: #7a8394; }
.ti-hint { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; color: #9aa0ab; font-size: 14px; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .field.sel i::after, .ti-cur::after { animation: none; } }