:root{color-scheme:dark;--bg:#0b1020;--panel:#151e30;--panel-2:#1c2940;--line:#2b3a55;--text:#f4f7fc;--muted:#a8b5ca;--accent:#86efac;--accent-strong:#22c55e;--green:#6ee7b7;--error:#fda4af;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#26365a 0,#11192b 42%,var(--bg) 78%);color:var(--text)}button,input{font:inherit}.shell{width:min(100% - 30px,520px);margin:auto;padding:35px 0 28px}.hero{text-align:center;padding:8px 10px 18px}.mark{width:44px;height:44px;display:grid;place-items:center;margin:0 auto 17px;border-radius:15px;background:var(--accent);color:#17122d;font-size:1.55rem;font-weight:850;box-shadow:0 8px 30px #22c55e55}.eyebrow{margin:0 0 6px;color:#86efac;font-size:.7rem;font-weight:750;letter-spacing:.14em}.hero h1{margin:0;font-size:clamp(2rem,8vw,2.7rem);letter-spacing:-.04em;line-height:1.1}.intro{margin:12px auto 0;max-width:360px;color:var(--muted);font-size:.98rem}.card{margin-top:14px;padding:19px;background:#151e30ed;border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 42px #0003}.section-title,.remote-heading{display:flex;gap:12px;align-items:flex-start}.step{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#173426;color:#bbf7d0;font-size:.85rem;font-weight:750}.section-title h2,.remote-heading h2{font-size:1.08rem;margin:0}.section-title p{color:var(--muted);font-size:.85rem;margin:3px 0 0}.instructions{margin:16px 0 0 40px;border-top:1px solid var(--line);padding-top:12px}.instructions summary,.more-controls summary{cursor:pointer;color:#dcfce7;font-size:.9rem;font-weight:650}.instructions ol,.recovery ol{padding-left:20px;color:#d4deec;font-size:.87rem;line-height:1.55}.instructions li,.recovery li{margin:6px 0}.tip,.helper{color:var(--muted);font-size:.8rem;line-height:1.5}.tip{margin:10px 0 0}.connect>.section-title{margin-bottom:18px}label{display:block;margin-bottom:7px;font-size:.87rem;color:#d9e1ef}.ip-row{display:flex;gap:8px}.ip-row input{min-width:0;flex:1;border:1px solid #455674;border-radius:12px;background:#0d1424;color:white;padding:12px}.ip-row input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}.button{border:1px solid transparent;border-radius:12px;padding:11px 15px;cursor:pointer;font-weight:700}.primary{background:var(--accent-strong);color:white}.primary:hover{background:#4ade80}.secondary{background:#27354d;border-color:#43516b;color:var(--text)}.helper{margin:8px 0 0}.permission-note{display:flex;gap:10px;margin-top:14px;padding:12px;border-radius:13px;background:#202a3d;color:#d7e0ee}.permission-note p{margin:0;font-size:.81rem;line-height:1.45}.lock{color:var(--green);font-weight:800}.status{min-height:1.2em;margin-top:10px;color:var(--muted);font-size:.85rem}.status.error{color:var(--error)}.recovery{margin-top:12px;padding:14px;border:1px solid #37664c;border-radius:14px;background:#172b23}.recovery h3{margin:0 0 7px;font-size:.98rem}.recovery code{word-break:break-all;color:#bbf7d0}.remote-card{padding:19px}.remote-heading{justify-content:space-between;align-items:center}.remote-heading .eyebrow{font-size:.65rem}.remote-heading h2{font-size:1rem}.text-button{border:0;background:none;color:#bbf7d0;padding:7px;cursor:pointer;font-size:.86rem}.dpad{width:min(100%,276px);margin:18px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.key{min-height:55px;border:1px solid #374964;border-radius:15px;background:linear-gradient(150deg,#24324a,#192439);color:#f5f7fb;cursor:pointer;touch-action:manipulation;user-select:none;font-size:.9rem;font-weight:600}.key:hover{border-color:#4ade80;background:#2b3853}.key:active{transform:scale(.97);background:#176b42}.arrow{font-size:1.2rem}.select{border-color:#4ade80;background:#173d2b;font-weight:800}.spacer{visibility:hidden}.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.key-grid .key{display:flex;align-items:center;justify-content:center;gap:8px;min-height:53px;padding:7px;font-size:.8rem}.key-grid .key span{font-size:1.15rem}.more-controls{margin-top:16px;border-top:1px solid var(--line);padding-top:13px}.more-controls>.key-grid{margin-top:10px}footer{padding:17px 7px 0;text-align:center;color:var(--muted);font-size:.76rem;line-height:1.5}footer p{margin:6px 0}footer a{color:#86efac}dialog{width:min(100% - 30px,390px);padding:0;border:1px solid #345d44;border-radius:20px;background:#171d2d;color:var(--text);box-shadow:0 25px 90px #0009}dialog::backdrop{background:#050916c9;backdrop-filter:blur(4px)}.dialog-body{padding:25px}.dialog-icon{width:44px;height:44px;display:grid;place-items:center;margin-bottom:15px;border-radius:14px;background:#183c2a;color:#bbf7d0;font-size:1.5rem}.dialog-body h2{margin:0;font-size:1.35rem}.dialog-body>p:not(.eyebrow){color:var(--muted);font-size:.93rem;line-height:1.5}.full{width:100%;margin-top:8px}.text-button.full{margin-top:5px}[hidden]{display:none!important}@media(max-width:390px){.shell{width:min(100% - 22px,520px);padding-top:21px}.card{padding:15px}.ip-row{flex-direction:column}.ip-row .button{width:100%}.instructions{margin-left:0}.key-grid .key{font-size:.76rem;padding:6px}}

.remote-actions,.media-actions{display:flex;justify-content:center;gap:12px;margin:10px auto;max-width:390px}.remote-actions .key,.media-actions .key{flex:1;min-width:0}.icon-key{font-size:1.45rem!important;font-weight:700!important}.play-key{font-size:1.15rem!important}.type-text{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.type-text label{font-weight:650}.type-text .ip-row{margin-top:8px}.type-text input{min-width:0}.type-text .button{flex:0 0 auto}@media(max-width:390px){.remote-actions,.media-actions{gap:8px}.icon-key{min-height:52px;font-size:1.3rem!important}.play-key{font-size:1rem!important}.type-text .ip-row{flex-direction:row}.type-text .button{width:auto}}

.top-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,260px);margin:12px auto 0}.top-actions .key{min-height:51px}.dpad{margin:12px auto}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,260px);margin:14px auto}.secondary-actions .key{min-height:51px}.media-actions{width:min(100%,300px);margin:12px auto}.keyboard-button{display:block;width:min(100%,300px);margin:16px auto 5px;font-size:1.5rem}.keyboard-dialog-body{position:relative;padding-top:35px}.dialog-close{position:absolute;top:10px;right:12px;font-size:1.5rem}.keyboard-dialog-body h2{margin-bottom:7px}.keyboard-input-row{display:flex;gap:8px;margin-top:15px}.keyboard-input-row input{min-width:0;flex:1;border:1px solid #455674;border-radius:12px;background:#0d1424;color:white;padding:12px}.keyboard-input-row .key{flex:0 0 58px}.keyboard-dialog-body .status{min-height:1.2em}@media(max-width:390px){.top-actions,.secondary-actions{gap:12px;width:min(100%,240px)}.media-actions{gap:8px}.keyboard-input-row .key{flex-basis:54px}}

.keyboard-enter{width:100%;margin-top:10px}

.mark{width:50px;height:50px;border-radius:16px;font-family:Georgia,serif;font-size:2rem}