:root{--bg: #0a0a0e;--bg-elevated: #15151c;--bg-key: #1a1a23;--bg-key-top: #22222d;--bg-key-hover: #25252f;--bg-key-press: #14141a;--border: #2a2a36;--border-strong: #3a3a48;--text: #f2f2f5;--text-dim: #8b8b97;--text-mute: #5a5a66;--accent: #7c5cff;--accent-dim: #5b3ad9;--accent-soft: rgba(124, 92, 255, .18);--ok: #4ade80;--warn: #facc15;--err: #f87171;--key-tint: var(--bg-key);--radius-key: 16px;--radius-modal: 18px;--gap-key: 10px;--header-height: 56px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;width:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif;font-size:15px;line-height:1.4;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}input,textarea,select{user-select:text;-webkit-user-select:text}button{font:inherit;color:inherit;background:transparent;border:none;cursor:pointer}code{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:.92em;color:var(--text)}.app{display:flex;flex-direction:column;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background:radial-gradient(ellipse at top,rgba(124,92,255,.08),transparent 60%),var(--bg)}.header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 14px;border-bottom:1px solid var(--border);background:#0a0a0ec7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;position:relative;z-index:2}.header__left{display:flex;align-items:center;gap:12px;min-width:0}.header__title{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:var(--text-dim);transition:background .12s ease,color .12s ease}.header__icon-btn:hover,.header__icon-btn:focus-visible{background:var(--bg-key);color:var(--text);outline:none}.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim)}.status__dot{width:9px;height:9px;border-radius:50%;background:var(--err);box-shadow:0 0 0 0 currentColor;transition:background .2s ease}.status__dot--connecting{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}.status__dot--connected{background:var(--ok);box-shadow:0 0 10px #4ade8073}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.deck-region{flex:1 1 auto;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;padding:12px}.deck{display:grid;gap:var(--gap-key);--cols: 3;--rows: 5;--key-cap: 180px;--key-from-w: calc( (100cqw - 24px - (var(--cols) - 1) * var(--gap-key)) / var(--cols) );--key-from-h: calc( (100cqh - 24px - (var(--rows) - 1) * var(--gap-key)) / var(--rows) );--key-size: min(var(--key-from-w), var(--key-from-h), var(--key-cap));grid-template-columns:repeat(var(--cols),var(--key-size));grid-template-rows:repeat(var(--rows),var(--key-size))}.key{aspect-ratio:1 / 1;container-type:size;border-radius:var(--radius-key);background:linear-gradient(180deg,var(--bg-key-top),var(--key-tint));border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;gap:4%;position:relative;overflow:hidden;color:var(--text);transition:transform 80ms ease-out,border-color .18s ease,box-shadow .22s ease;box-shadow:inset 0 1px #ffffff0a,0 1px #0006;will-change:transform}.key:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff0f,#fff0 35%);pointer-events:none}.key:hover{border-color:var(--border-strong)}.key:active{transform:scale(.96);box-shadow:inset 0 1px #ffffff05,inset 0 4px 8px #00000059}.key.is-firing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 24px var(--accent-soft);animation:fire .22s ease-out}@keyframes fire{0%{transform:scale(.93)}60%{transform:scale(1.02)}to{transform:scale(1)}}.key__icon{font-size:clamp(20px,36cqh,56px);line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}.key__label{font-size:clamp(9px,10cqh,13px);color:var(--text-dim);text-align:center;word-break:break-word;line-height:1.15;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.key--empty{background:transparent;border:1px dashed var(--border);box-shadow:none;color:var(--text-mute);transition:border-color .18s ease,color .18s ease,background .18s ease}.key--empty:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.key--empty:before{display:none}.key__plus{font-size:clamp(20px,30cqh,44px);line-height:1;font-weight:300}.key--preview{width:96px;height:96px;aspect-ratio:1/1}.notice{margin:12px auto 0;padding:12px 14px;background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--err);border-radius:12px;display:flex;align-items:center;gap:12px;font-size:13px;max-width:720px;width:calc(100% - 28px);animation:slide-in .22s ease-out}@keyframes slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.notice--warn{border-left-color:var(--warn)}.notice__body{flex:1;min-width:0}.notice__title{font-weight:600;color:var(--text)}.notice__detail{color:var(--text-dim);font-size:12px;margin-top:2px}.btn{padding:8px 14px;border-radius:10px;background:var(--bg-key);color:var(--text);border:1px solid var(--border);font-size:13px;font-weight:500;transition:background .12s ease,border-color .12s ease}.btn:hover,.btn:focus-visible{background:var(--bg-key-hover);border-color:var(--border-strong);outline:none}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:hover,.btn--primary:focus-visible{background:var(--accent-dim);border-color:var(--accent-dim)}.btn--ghost{background:transparent;border-color:transparent;color:var(--text-dim)}.btn--ghost:hover{background:var(--bg-key);color:var(--text);border-color:var(--border)}.btn--danger{background:transparent;border-color:var(--border);color:var(--err)}.btn--danger:hover{background:#f8717114;border-color:var(--err)}.form{display:flex;flex-direction:column;gap:10px;padding:0 18px 12px}.form__row{display:flex;align-items:center;gap:12px}.form__row--stack{flex-direction:column;align-items:stretch;gap:6px}.form__row--actions{justify-content:flex-end}.form__label{font-size:12px;color:var(--text-dim);flex:0 0 80px}.form__row--stack .form__label{flex:0 0 auto}.form__input{flex:1;padding:10px 12px;background:var(--bg-key);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .12s ease,background .12s ease}.form__input:focus{border-color:var(--accent);background:var(--bg-key-hover)}.form__input--icon{max-width:100px;text-align:center;font-size:22px}.form__input--code{font-family:SF Mono,ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:18px;text-align:center}.form__input--multiline{resize:vertical;min-height:64px;font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:13px}.form__warn{margin:0;font-size:11px;color:var(--warn);padding-left:92px}.swatches{flex:1;display:flex;gap:8px;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;background:var(--bg-key);transition:transform .12s ease,border-color .12s ease}.swatch:hover{transform:scale(1.08)}.swatch.is-selected{border-color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade-in .18s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:420px;max-height:calc(100dvh - 32px);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-modal);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px #0009,0 0 0 1px #ffffff05;animation:lift-in .22s cubic-bezier(.2,1,.2,1)}@keyframes lift-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}.modal__title{margin:0;font-size:16px;font-weight:600}.modal__close{width:32px;height:32px;border-radius:8px;color:var(--text-dim);font-size:16px}.modal__close:hover{background:var(--bg-key);color:var(--text)}.modal__preview{display:flex;justify-content:center;padding:18px;background:var(--bg);border-bottom:1px solid var(--border)}.modal__footer{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--border)}.modal__spacer{flex:1}.drawer-backdrop{position:fixed;inset:0;background:#00000080;opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:20}.drawer-backdrop.is-open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--bg-elevated);border-left:1px solid var(--border);transform:translate(100%);transition:transform .26s cubic-bezier(.2,1,.2,1);z-index:21;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow-y:auto}.drawer.is-open{transform:translate(0)}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-elevated);z-index:1}.drawer__title{margin:0;font-size:16px;font-weight:600}.drawer__close{width:32px;height:32px;border-radius:8px;color:var(--text-dim)}.drawer__close:hover{background:var(--bg-key);color:var(--text)}.drawer__section{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}.drawer__heading{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.drawer__hint{margin:0;font-size:12px;color:var(--text-dim);line-height:1.45}.drawer__hint--mono{font-family:SF Mono,ui-monospace,Menlo,monospace}.drawer__footer{margin-top:auto;padding:14px 18px 18px;font-size:11px;color:var(--text-mute)}.drawer__footer a{color:var(--text-dim);text-decoration:none}.drawer__footer a:hover{color:var(--text)}.status-text{text-transform:capitalize}.status-text--connected{color:var(--ok)}.status-text--connecting{color:var(--warn)}.status-text--disconnected{color:var(--err)}.footer{flex:0 0 auto;padding:6px 16px 10px;font-size:11px;color:var(--text-mute);text-align:center;min-height:22px}.footer a{color:var(--text-mute);text-decoration:underline}