:root{color:#e8ecf1;background:#0b0e14;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,sans-serif;font-synthesis:none;--bg: #0b0e14;--panel: #11151f;--line: #232a3a;--text: #e8ecf1;--muted: #7c8699;--left: #59d9e7;--left-dim: #245a62;--right: #ff5c66;--right-dim: #702d36;--signal: #ff344d;--key: #1a2030;--key-active: #232c40;--mono: "SFMono-Regular", "SF Mono", Consolas, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px;overscroll-behavior:none;touch-action:none}button{font:inherit}.app{position:relative;display:flex;flex-direction:column;height:100dvh;min-height:0;zoom:var(--ui-scale, 1);background:var(--bg);background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:24px 24px}.topbar{flex:0 0 auto;padding:10px 14px 8px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,52,77,.08),transparent 28%),var(--panel);box-shadow:inset 0 2px #ff344da6}.title{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--muted);font-size:12px;letter-spacing:0}.product-name{display:flex;align-items:baseline;gap:9px;margin-right:auto}.product-name b{color:var(--text);font-family:var(--mono);font-size:15px;font-weight:700}.product-name small{font-family:var(--mono);font-size:9px}.status{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px}.status i{width:5px;height:5px;background:var(--signal);box-shadow:0 0 7px var(--signal)}.reset-button{flex:0 0 auto;padding:4px 10px;border:1px solid var(--line);border-radius:4px;color:var(--muted);background:none;font-family:var(--mono);font-size:11px;cursor:pointer}.reset-button:active{background:var(--key-active)}.zoom-controls{display:flex;flex:0 0 auto;align-items:center;gap:4px;font-family:var(--mono)}.zoom-controls button{display:grid;width:24px;height:24px;place-items:center;padding:0;border:1px solid var(--line);border-radius:4px;color:var(--text);background:var(--key);cursor:pointer}.zoom-controls button:disabled{color:#4b5362;cursor:default}.zoom-controls span{min-width:38px;color:var(--muted);font-size:10px;text-align:center}.scope{position:relative;height:46px;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:var(--bg)}.scope:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent 49px,rgba(255,255,255,.05) 50px)}.scope-label{position:absolute;z-index:1;color:var(--muted);font-family:var(--mono);font-size:8px}.scope-label.left{top:4px;left:6px}.scope-label.right{right:6px;bottom:4px}.mid-line{position:absolute;top:50%;right:0;left:0;height:1px;background:var(--line)}.scope-tick{position:absolute;right:8px;width:2px;height:18px;border-radius:1px;opacity:.95;animation:scope-fade 2.4s linear forwards}.scope-tick.L{top:4px;background:var(--left);box-shadow:0 0 6px var(--left)}.scope-tick.R{bottom:4px;background:var(--right);box-shadow:0 0 6px var(--right)}@keyframes scope-fade{to{opacity:0;transform:translate(calc(-100vw + 54px))}}.stats{display:flex;flex:0 0 auto;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px}.statcol{display:flex;flex:1;gap:18px;padding:8px 14px}.statcol.left{border-right:1px solid var(--line)}.statcol.right{justify-content:flex-end}.stat{display:flex;flex-direction:column;gap:2px;min-width:0}.stat .value{font-size:16px;font-weight:600}.stat .label{color:var(--muted);font-size:10px;letter-spacing:0;white-space:nowrap}.statcol.left .value{color:var(--left)}.statcol.right .value{color:var(--right)}.main{display:flex;flex:1 1 auto;min-height:0;background:#04060a59}.side{position:relative;display:flex;flex:1;flex-direction:column;min-width:0}.side.left{border-right:1px solid var(--line)}.side-heading{display:flex;flex:0 0 24px;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid var(--line);color:var(--muted);background:#11151fe6;font-family:var(--mono);font-size:8px}.side-heading b{font-size:11px}.side.left .side-heading b{color:var(--left)}.side.right .side-heading b{color:var(--right)}.outbox{flex:0 0 clamp(46px,18%,120px);min-height:0;padding:10px 12px;overflow-y:auto;border-bottom:1px solid var(--line);background:var(--panel);font-size:calc(17px * var(--ui-scale, 1));line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.placeholder{color:#515a6c;font-size:13px}.side.left .outbox{box-shadow:inset 3px 0 0 var(--left-dim)}.side.right .outbox{box-shadow:inset -3px 0 0 var(--right-dim)}.cursor{display:inline-block;width:2px;height:1em;margin-left:1px;animation:blink 1s step-end infinite;background:var(--muted);vertical-align:-2px}@keyframes blink{50%{opacity:0}}.keyboard-shell{display:flex;flex:1;gap:5px;min-height:0;padding:calc(8px * var(--ui-scale, 1))}.keyboard{display:grid;flex:1;grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;min-height:0}.krow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:0}.side-rail{display:grid;flex:0 0 clamp(42px,6vw,66px);grid-template-rows:repeat(4,minmax(0,1fr));gap:5px;min-width:0}.flick-key{position:relative;display:flex;min-width:0;min-height:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:3px;color:var(--text);background:var(--key);font-size:calc(22px * var(--ui-scale, 1));-webkit-user-select:none;user-select:none;touch-action:none;transition:background 60ms,transform 60ms}.side.left .flick-key{border-left-color:var(--left-dim);border-bottom:2px solid var(--left-dim)}.side.right .flick-key{border-right-color:var(--right-dim);border-bottom:2px solid var(--right-dim)}.flick-key.active{background:var(--key-active);transform:scale(.97)}.side.left .flick-key.active{box-shadow:inset 0 0 0 1px var(--left),0 0 8px #59d9e72e}.side.right .flick-key.active{box-shadow:inset 0 0 0 1px var(--right),0 0 8px #ff5c662e}.flick-key .ctr{position:relative;z-index:2}.flick-key .hint{position:absolute;z-index:1;color:var(--muted);font-size:calc(10px * var(--ui-scale, 1))}.flick-key .hint.up{top:3px;left:50%;transform:translate(-50%)}.flick-key .hint.right{top:50%;right:5px;transform:translateY(-50%)}.flick-key .hint.down{bottom:3px;left:50%;transform:translate(-50%)}.flick-key .hint.left{top:50%;left:5px;transform:translateY(-50%)}.flick-key.ctrl{color:var(--muted);font-family:var(--mono);font-size:calc(13px * var(--ui-scale, 1))}.side-rail .flick-key.ctrl{border-color:#3b4250;background:#252933;font-family:inherit}.side-rail .ctr{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}.side-rail b{color:var(--text);font-size:calc(18px * var(--ui-scale, 1));line-height:1;white-space:nowrap}.side-rail small{color:var(--muted);font-size:calc(9px * var(--ui-scale, 1));line-height:1;white-space:nowrap}.side-rail.rail-left .flick-key{border-left:2px solid var(--left-dim)}.side-rail.rail-right .flick-key{border-right:2px solid var(--right-dim)}.guide{position:fixed;z-index:50;display:flex;width:128px;height:128px;align-items:center;justify-content:center;pointer-events:none}.g-center{position:absolute;display:flex;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--key-active);font-size:20px}.g-dir{position:absolute;display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);font-size:16px}.g-dir.on{color:var(--text);background:var(--key-active)}.guide.L .g-dir.on{color:var(--left)}.guide.R .g-dir.on{color:var(--right)}.g-dir.up{top:0;left:49px}.g-dir.right{top:49px;left:98px}.g-dir.down{bottom:0;left:49px}.g-dir.left{top:49px;left:0}.logstrip{flex:0 0 auto;min-height:35px;padding:6px 14px 10px;overflow:hidden;border-top:1px solid var(--line);color:var(--muted);background:var(--panel);font-family:var(--mono);font-size:13px;white-space:nowrap}.logstrip .Lc{color:var(--left)}.logstrip .Rc{color:var(--right)}.welcome-backdrop{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#04060ad1;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.welcome-dialog{position:relative;width:min(460px,100%);padding:28px;border:1px solid #495064;border-top:3px solid var(--signal);border-radius:2px;background:#11151f;box-shadow:0 18px 70px #00000080,0 0 24px #ff344d14}.welcome-dialog:after{position:absolute;right:0;bottom:0;width:38px;height:3px;content:"";background:var(--signal)}.welcome-code{color:var(--signal);font-family:var(--mono);font-size:9px}.welcome-dialog h1{margin:9px 0 12px;font-size:22px;letter-spacing:0}.welcome-dialog p{margin:0;color:#c3cad5;font-size:14px;line-height:1.8}.welcome-dialog .welcome-sub{margin-top:8px;color:var(--muted);font-size:12px}.welcome-dialog button{width:100%;margin-top:22px;padding:11px 16px;border:1px solid #ff6b77;border-radius:2px;color:#fff;background:#b92539;font-weight:700;cursor:pointer}.welcome-dialog button:active{background:#8f1d2e}@media(max-width:640px){.product-name small,.status{display:none}.title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zoom-controls span{min-width:32px;font-size:9px}.zoom-controls button{width:22px;height:22px}.statcol{gap:10px;padding-inline:9px}.stat .value{font-size:14px}.stat .label{font-size:8px}.outbox{font-size:15px}.keyboard{gap:4px}.keyboard-shell{gap:3px;padding:5px}.krow{gap:4px}.side-rail{flex-basis:42px;gap:4px}.flick-key{border-radius:2px;font-size:18px}.flick-key.ctrl{font-size:10px}.side-rail b{font-size:14px}.side-rail small{font-size:7px}.welcome-dialog{padding:24px 20px}}@media(max-height:620px){.topbar{padding-block:6px}.scope{height:34px}.stats{display:none}.outbox{flex-basis:48px}.side-heading{flex-basis:20px}}@media(max-height:540px){.scope{display:none}.title{margin-bottom:0}.logstrip{display:none}}@media(max-height:460px){.topbar{padding-block:4px}.side-heading{flex-basis:18px}.outbox{flex-basis:38px;padding-block:5px}}