*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}button{font-family:inherit}body.display-page{background:#0f1328;color:white;overflow:hidden}.display-stage{height:100vh;height:100dvh;width:100%;position:relative}.pairing-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 0%,#26356b 0%,#141b38 45%,#0f1328 100%);padding:22px;text-align:center}.pairing-card{max-width:520px;width:100%}.pairing-icon{font-size:34px;color:#9aafff;line-height:1}.pairing-card h1{font-size:clamp(28px,4vw,52px);margin:10px 0 12px;letter-spacing:-1px}.pairing-subtitle{font-size:clamp(20px,2.2vw,27px);font-weight:500;margin:0 0 22px}.qr-box{width:min(360px,72vh,75vw);height:auto;min-height:160px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin:0 auto;padding:10px;background:#fff;border-radius:17px;box-shadow:0 18px 70px rgba(0,0,0,.4);overflow:hidden}.qr-box canvas,.qr-box table{max-width:100%}.pairing-hint{color:#c1cae0;margin:20px 0 0;font-size:20px}.small-status{color:#94a5c7;font-size:16px}.loading-ring{border:5px solid #ccc;border-top-color:#637bdc;width:56px;height:56px;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.active-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c1023}.digits-display{font-weight:bold;letter-spacing:.02em;line-height:1.12;text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-all;max-width:94%;max-height:92%;overflow:hidden;color:#fff}.pictures-display{width:96%;max-height:94%;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:1.8vw;overflow:hidden}.pictures-display img{object-fit:contain;flex:none}
body.control-page{background:#0f1326;color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow-x:hidden}.connection-view{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(circle at top,#27326a,#10152b 65%)}.connection-symbol{font-size:48px;color:#ab9fff}.connection-content h1{font-size:29px;margin:20px 0 12px}.connection-content p{font-size:17px;line-height:1.5;color:#bdc5dd;max-width:340px}.controller{max-width:650px;margin:0 auto;min-height:100vh;min-height:100dvh}.control-header{height:58px;padding:0 16px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:19px;font-weight:700;letter-spacing:-.4px;color:#e8eafd}.brand span{margin-left:5px}.connection-dot{width:11px;height:11px;border-radius:50%;background:#50deaa;box-shadow:0 0 0 4px rgba(80,222,170,.13)}.tabs{display:flex;gap:5px;margin:0 12px;padding:5px;background:#232b49;border-radius:15px}.tab{border:0;border-radius:11px;background:transparent;color:#aebbe1;font-size:16px;font-weight:700;flex:1;min-height:49px;cursor:pointer}.tab.active{background:#f0f3ff;color:#17203e;box-shadow:0 3px 9px rgba(0,0,0,.2)}.control-main{padding:16px 14px 28px}.panel-caption{font-size:15px;color:#b3c0dd;text-align:center;margin:4px 0 16px}.picker-frame{position:relative;max-width:460px;margin:0 auto;border-radius:19px;overflow:hidden;box-shadow:0 13px 34px rgba(0,0,0,.23);border:5px solid #dce4ff;touch-action:none;user-select:none;-webkit-user-select:none}.picker-frame canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.picker-cursor{position:absolute;left:80%;top:50%;width:32px;height:32px;border:4px solid #fff;box-shadow:0 0 0 2px #222,0 0 7px #000;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.color-result{display:flex;align-items:center;gap:13px;justify-content:center;margin:22px 0;color:#f3f3f8;font-weight:700;font-size:22px;letter-spacing:1px}.color-swatch{display:block;background:#6A44D6;border:3px solid #fff;border-radius:14px;width:57px;height:57px;box-shadow:0 2px 15px #0005}.local-digits{height:76px;display:flex;align-items:center;justify-content:flex-end;text-align:right;background:#1c2545;border-radius:14px;padding:8px 14px;margin-bottom:14px;overflow:hidden;font-weight:bold;white-space:nowrap;letter-spacing:1px;direction:ltr}.key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:530px;margin:0 auto}.key{height:clamp(64px,16vw,89px);min-width:0;border:0;border-radius:17px;box-shadow:0 5px 0 #121b3a;background:#f1f4ff;color:#152046;font-size:43px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}.key:active{transform:translateY(3px);box-shadow:0 2px 0 #121b3a;background:#dce3fd}.delete-key{background:#e96370;color:white;flex-direction:column;gap:1px;box-shadow:0 5px 0 #843e58}.delete-key:active{background:#d94c62;box-shadow:0 2px 0 #843e58}.delete-arrow{font-size:33px;line-height:1}.delete-key small{font-size:12px;letter-spacing:.1px}.local-pictures{height:77px;display:flex;gap:5px;align-items:center;justify-content:flex-end;padding:7px 10px;background:#e9eefb;border-radius:14px;margin-bottom:13px;overflow:hidden}.local-pictures img{width:43px;height:43px;object-fit:contain;flex:none}.symbol-key{background:#fff}.symbol-key img{width:65%;height:75%;object-fit:contain}.symbol-key:active{background:#e2eafd}.picture-grid .delete-key{background:#e96370}.picture-grid .delete-key:active{background:#d94c62}
@media(min-height:800px){.control-main{padding-top:20px}.key{height:clamp(75px,17vw,106px)}.key-grid{gap:12px}}@media(max-height:700px){.control-header{height:47px}.tabs .tab{min-height:43px}.control-main{padding-top:10px}.panel-caption{margin:0 0 10px}.picker-frame{max-width:340px}.local-digits,.local-pictures{height:59px;margin-bottom:9px}.key{height:clamp(53px,13vh,75px)}.key-grid{gap:8px}}@media(max-width:340px){.tab{font-size:14px}.brand{font-size:16px}.key-grid{gap:7px}.key{height:69px;border-radius:12px}}
.clear-key{background:#34456e;color:#fff;font-size:18px;box-shadow:0 5px 0 #1c2b4d}.clear-key:active{background:#293959;box-shadow:0 2px 0 #1c2b4d}
/* Compatibility fallbacks for early webOS/Tizen Chromium versions. */
.pairing-layer,.active-screen,.connection-view{top:0;right:0;bottom:0;left:0}
.qr-box{width:340px;max-width:75vw}
@supports (width: min(10px, 20px)) {.qr-box{width:min(360px,72vh,75vw);max-width:none}}