.lyfe-pad{--pad-blue:#2563eb;--pad-yellow:#face0b;--pad-ink:#071428;color:#f5f8ff;background:linear-gradient(150deg,#102b50,var(--pad-ink));border:1px solid #41648c;border-radius:24px;padding:clamp(18px,4vw,32px);font:16px/1.5 system-ui,sans-serif;max-width:800px;margin:auto;box-sizing:border-box}.lyfe-pad *{box-sizing:border-box}.pad-heading{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.pad-eyebrow{font-size:12px;letter-spacing:.12em;color:#b8d7ff;font-weight:700}.lyfe-pad h1,.lyfe-pad h2{font-size:clamp(27px,5vw,42px);line-height:1.1;margin:16px 0}.lyfe-pad p{color:#cadcf1;margin:12px 0}.pad-status{font-size:14px;color:#c4d9f3}.pad-status.connected{color:#98f0c2}.lyfe-pad button{border:0;border-radius:14px;background:var(--pad-yellow);color:#071428;font:700 16px system-ui;min-height:48px;padding:12px 20px;cursor:pointer;transition:transform .12s,filter .12s}.lyfe-pad button:hover{filter:brightness(1.08)}.lyfe-pad button:active{transform:scale(.96)}.lyfe-pad button.secondary{background:#1b416f;color:#fff;border:1px solid #6d95c5}.lyfe-pad button:disabled{opacity:.5;cursor:default}.lyfe-pad button:focus-visible,.lyfe-pad input:focus-visible,.lyfe-pad summary:focus-visible{outline:3px solid #face0b;outline-offset:4px}.pad-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.pair-link{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;padding:16px;background:#071428;border-radius:16px}.pair-link label{width:100%;font-size:14px}.pair-link input{min-width:0;width:100%;border:1px solid #628ab8;color:#fff;background:#102b50;border-radius:8px;padding:12px;font-size:14px}.pad-bluetooth{border-top:1px solid #41648c;padding-top:20px;margin-top:24px}.pad-bluetooth p,.lyfe-pad details{font-size:14px}.lyfe-pad summary{cursor:pointer;padding:10px 0;color:#b8d7ff}.phone-pad{min-height:100svh;border-radius:0;max-width:800px}.pad-controls{border:0;padding:20px 0;margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none}.pad-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pad-dpad{display:grid;grid-template:repeat(3,64px)/repeat(3,64px);gap:6px}.lyfe-pad .pad-hold{min-height:64px;padding:6px;touch-action:none}.direction-up{grid-area:1/2}.direction-left{grid-area:2/1}.direction-right{grid-area:2/3}.direction-down{grid-area:3/2}.pad-face{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pad-face button{width:84px}.pad-hint{font-size:13px}.pad-demo{min-height:100svh;background:#030b17;color:#fff;padding:24px;font-family:system-ui}.pad-arena{max-width:800px;height:220px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#1b416f,#071428);border:1px solid #41648c;border-radius:20px;margin:20px auto}.pad-player{position:absolute;width:28px;height:28px;background:#face0b;border-radius:8px;box-shadow:0 0 28px #face0b66}.pad-arena p{position:absolute;bottom:8px;left:16px;color:#cadcf1}.pad-demo>header{max-width:800px;margin:0 auto 20px}.pad-demo a{color:#b8d7ff}@media(max-width:440px){.pad-controls{justify-content:center}.pad-face{justify-content:center;width:100%}.pad-demo{padding:12px}.phone-pad .pad-controls{padding-top:28px}}@media(prefers-reduced-motion:reduce){.lyfe-pad button{transition:none}}
