:root{color-scheme:light;--bg:#f6f8fc;--ink:#16253f;--muted:#697890;--line:#e3eaf2;--blue:#3086f2;--blue-soft:#eaf4ff;--panel:#fff;--radius:17px}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:14px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1{font-size:24px;line-height:1.22;letter-spacing:-.8px;margin-bottom:9px}h2{font-size:16px;letter-spacing:-.3px;margin-bottom:5px}h3{font-size:14px;letter-spacing:-.15px;margin-bottom:10px}p{margin-bottom:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;top:-70px;left:20px;background:#fff;z-index:3000;padding:12px}.skip:focus{top:10px}.shell{max-width:2200px;margin:auto;min-height:100vh;display:flex;flex-direction:column}.topbar{height:70px;background:#fff;display:flex;align-items:center;padding:0 25px;gap:16px;border-bottom:1px solid var(--line);flex-shrink:0}.brand{display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.65px;white-space:nowrap}.mark{display:grid;place-items:center;background:linear-gradient(150deg,#80ccff,#2785f4);color:#fff;border-radius:9px;width:31px;height:31px;font-weight:800;font-size:21px}.divider,.toolbar-separator{height:22px;width:1px;background:var(--line)}.appname{font-size:14px;white-space:nowrap}.appname span{font-weight:450;color:var(--muted)}.privacy{margin-left:8px;font-size:11px;background:#edf9f5;color:#25725c;padding:5px 9px;border-radius:50px;white-space:nowrap}.privacy-dot{display:inline-block;width:7px;height:7px;background:#31af84;border-radius:50%;margin-right:6px}.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.btn{border:1px solid var(--line);background:#fff;color:#354866;border-radius:9px;min-height:35px;padding:7px 12px;font-weight:600;white-space:nowrap}.btn:hover:not(:disabled){border-color:#adccec;background:#f7fbff}.btn.primary{background:#2e85f1;color:#fff;border-color:#2e85f1;box-shadow:0 3px 9px #287bf122}.btn.primary:hover:not(:disabled){background:#1d75df}.btn.subtle{background:0 0;border-color:transparent}.btn.secondary{background:#f9fbfe}.btn.danger{color:#b44d56}.toolbar{padding:11px 19px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.tool-left,.tool-right{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.select,input,textarea{background:#fff;border:1px solid #dbe4ee;border-radius:9px;color:var(--ink);padding:9px 10px;outline:0;width:100%;min-height:36px}.select{cursor:pointer}.toolbar select{width:185px}.seg{border:1px solid transparent;border-radius:9px;padding:8px 11px;background:#f5f7fa;color:#67778b;font-weight:650}.seg.active{color:#2274d5;background:var(--blue-soft);border-color:#d1e6ff}.workspace{display:grid;grid-template-columns:257px minmax(0,1fr) 266px;flex:1;min-height:0}.inspector,.left-panel{background:#fff}.left-panel{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.inspector-head,.inspector-section,.panel-section{padding:22px 19px;border-bottom:1px solid var(--line)}.panel-section:first-child{padding-top:29px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.25px;color:#377fcb}.hint,.muted,.small-note,.tiny{color:var(--muted)}.muted{font-size:12px}.small-note{font-size:11px;line-height:1.55;margin:10px 0 0}.tiny{font-size:11px;line-height:1.55;color:#8a95a8;margin:6px 0 11px}.hint{font-size:11px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.field-label{display:block;font-size:11px;font-weight:750;color:#53637b;margin:13px 0 5px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.add-key{width:100%;background:#edf5ff;color:#2679d8;border:1px solid #d4e8ff}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.tool-grid .btn{min-width:0;padding:6px}.toggle{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:#506580}.toggle input{width:16px;height:16px;min-height:0;accent-color:var(--blue)}.storage-state{font-size:11px;color:#697890;margin:9px 0 0}.help-compact{font-size:12px;background:#f7fbff}.help-compact p{color:#647790;margin:4px 0 0}.main-area{min-width:0;padding:24px;display:flex;flex-direction:column;gap:15px}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.workspace-head h2{font-size:22px;letter-spacing:-.55px;margin:3px 0}.workspace-head p{margin:0;color:var(--muted);font-size:12px}.zoom-row{display:flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:3px}.zoom-row button{border:0;background:0 0;min-width:30px;height:30px;color:#546782;font-weight:750}.zoom-row output{display:inline-block;text-align:center;min-width:47px;font-size:12px;font-weight:700}.canvas-holder{border:1px solid #dfe8f3;border-radius:18px;position:relative;overflow:hidden;min-height:390px;background-color:#f8fafc;background-image:radial-gradient(#cbd7e5 1px,transparent 1px);background-size:18px 18px}.canvas-scroll{height:100%;max-height:590px;min-height:390px;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:32px;scrollbar-color:#c6d5e5 transparent}.board{position:relative;flex:none;transform-origin:top left;border-radius:20px;background:linear-gradient(155deg,#f0f5fb,#e4ebf4);border:1px solid #d0dbe8;box-shadow:0 12px 27px #2539561a,inset 0 1px #fff;outline:0}.board.dark{background:linear-gradient(155deg,#2f3b4f,#1e2b3c);border-color:#152333;box-shadow:0 15px 30px #17243730}.board:focus-visible{outline:3px solid #4691f1;outline-offset:4px}.keys-surface{position:absolute;inset:0}.keyboard-key{position:absolute;border:1px solid #cbd7e6;box-shadow:0 3px 0 #cad6e4,0 4px 9px #617a971b;border-radius:8px;background:#fff;color:#293b56;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;touch-action:none;user-select:none;padding:4px}.keyboard-key:hover{filter:brightness(.99);border-color:#8dbbeb}.keyboard-key:focus-visible{outline:3px solid #2192ff;outline-offset:2px;z-index:7}.keyboard-key.selected{outline:2px solid #2989f5;outline-offset:2px;z-index:4}.keyboard-key.active-key{background:#2b86ef!important;color:#fff!important;border-color:#2b86ef;transform:translateY(2px);box-shadow:0 1px 1px #3c6fa633}.keyboard-key .legend{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.keyboard-key .sublegend{font-size:8px;color:#8f9bb0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.keyboard-key.active-key .sublegend{color:#daeaff}.keyboard-key.modifier{background:#e9f1fa}.keyboard-key.system{background:#deebff;color:#22558d}.keyboard-key.accent{background:#d1e7ff;color:#1f62ab}.board.dark .keyboard-key{background:#41536c;color:#ecf4ff;border-color:#5b6e86;box-shadow:0 3px 0 #1a2636}.board.dark .keyboard-key.modifier{background:#33455e}.board.dark .keyboard-key.accent{background:#2264a7}.board.dark .keyboard-key.system{background:#374e7c}.canvas-corner{position:absolute;right:14px;bottom:12px;font-size:10px;color:#526781;background:#fffefded;border:1px solid #e0e9f4;border-radius:15px;padding:5px 10px;pointer-events:none}.bullet{padding:0 5px}.bottom-panel,.test-area{border:1px solid var(--line);border-radius:15px;background:#fff;padding:18px 20px}.bottom-panel .section-head{margin-bottom:8px}.diagnostics{font-size:12px;color:#60718b}.text-button{border:0;color:#2a79d1;background:0 0;font-size:12px;font-weight:750}.inspector-head{padding-top:30px}.inspector-head h2{font-size:19px;margin:4px 0}.empty-inspector{display:flex;flex-direction:column;text-align:center;align-items:center;padding:50px 22px;color:#66768d;font-size:12px}.empty-inspector p{margin-top:8px}.empty-icon{width:54px;height:54px;display:grid;place-items:center;font-size:26px;border-radius:14px;background:#edf5ff;color:#2f8ae4;margin-bottom:15px}.inspector-section h3{margin-bottom:5px}.inspector-section input{font-size:13px}.inspector-section button{width:100%}.inspector-footer{padding:17px 20px;font-size:11px;color:#7d8da1}.test-area{padding:21px}.test-area .section-head{align-items:flex-start}.test-area h2{font-size:19px;margin-top:4px}.test-status{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.test-status>div{border:1px solid #e6edf6;border-radius:12px;padding:10px 12px;background:#fbfdff}.metric-title{display:block;color:#71839a;font-size:10px}.test-status strong{font-size:23px;font-weight:800;letter-spacing:-.6px}.test-status small{font-size:10px;font-weight:500;color:#7d8fa1}.test-area textarea{resize:vertical;min-height:96px;font-family:ui-monospace,Consolas,monospace;font-size:15px;line-height:1.65;background:#f8fbff;cursor:text}.target-input{font-size:13px}.test-bottom{display:flex;justify-content:space-between;align-items:center;color:#71849b;font-size:11px;padding-top:13px}.toast{position:fixed;bottom:22px;right:23px;max-width:min(430px,calc(100vw - 40px));background:#1d344f;color:#fff;padding:12px 16px;border-radius:11px;z-index:100;box-shadow:0 10px 24px #12253d55}.toast.error{background:#8f3546}footer{display:flex;justify-content:space-between;gap:15px;padding:13px 24px;font-size:11px;color:#8492a5;border-top:1px solid var(--line)}dialog{width:min(540px,calc(100% - 26px));border:1px solid #dce7f3;border-radius:17px;padding:0;color:var(--ink);box-shadow:0 30px 90px #17345344}dialog::backdrop{background:#16243c77}.dialog-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:19px 23px}.dialog-heading h2{margin:0}.dialog-heading .close{background:0 0;border:0;font-size:25px;color:#61748a}.guide-body{padding:20px 23px;max-height:65vh;overflow:auto;font-size:13px;color:#586c82}.guide-body h3{margin-top:15px}.dialog-actions{padding:14px 23px;text-align:right;border-top:1px solid var(--line)}:focus-visible{outline:3px solid #3491f5;outline-offset:2px}[hidden]{display:none!important}@media(max-width:1170px){.workspace{grid-template-columns:220px minmax(0,1fr) 235px}.main-area{padding:17px}.inspector-section,.panel-section{padding:18px 13px}.topbar{padding:0 15px}}@media(max-width:945px){.workspace{grid-template-columns:220px minmax(0,1fr)}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:200px 1fr}.inspector-head{padding:21px}.inspector #keyInspector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.inspector-section{border-left:1px solid var(--line);border-bottom:0}.inspector-footer{grid-column:1/-1}.privacy{display:none}}@media(max-width:700px){.topbar{height:auto;min-height:61px;flex-wrap:wrap;padding:10px 12px;gap:9px}.brand{font-size:15px}.appname{font-size:12px}.topbar .divider{display:none}.header-actions{width:100%;justify-content:flex-start;margin:0}.header-actions .btn{font-size:12px}.toolbar{padding:10px}.toolbar select{max-width:170px}.workspace{display:flex;flex-direction:column}.main-area{order:0}.left-panel{order:1;display:grid;grid-template-columns:1fr 1fr;border:0}.inspector{order:2}.left-panel .panel-section{border-right:1px solid var(--line)}.left-panel .panel-section:first-child{grid-column:1/-1;padding:17px}.left-panel h1{font-size:19px}.left-panel .panel-section{padding:15px}.main-area{padding:14px}.workspace-head h2{font-size:18px}.canvas-scroll{min-height:320px;max-height:420px;padding:20px}.canvas-holder{min-height:325px}.inspector{display:block}.inspector-head{padding:18px}.inspector #keyInspector{display:grid;grid-template-columns:1fr 1fr}.inspector-section{border-top:1px solid var(--line)}.test-status{grid-template-columns:repeat(2,1fr)}footer{display:block;padding:13px}footer span{display:block}}@media(max-width:450px){.left-panel{display:block}.left-panel .panel-section{padding:15px 17px}.left-panel .help-compact{display:none}.tool-left,.tool-right{width:100%;justify-content:flex-start}.toolbar .btn,.toolbar .seg{padding:6px 9px;font-size:11px}.workspace-head{align-items:flex-start;flex-wrap:wrap}.inspector #keyInspector{display:block}.inspector-section{border-left:0}.canvas-holder{min-height:300px}.canvas-scroll{min-height:300px;max-height:360px}.test-area{padding:14px}.test-status strong{font-size:19px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}.layer-control{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#59718b;white-space:nowrap}.layer-control .select{width:148px;min-width:135px;padding:6px 7px}.library-list{display:flex;flex-direction:column;gap:9px;margin:14px 0}.library-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f8fbff;border:1px solid var(--line);border-radius:11px;padding:12px}.library-entry strong{display:block;word-break:break-word}.library-entry small{display:block;color:var(--muted)}.library-entry .tool-grid{margin:0;display:flex}.keyboard-key.has-usage{box-shadow:inset 0 0 0 var(--heat-size,3px) #e77d54aa,0 3px 0 #cad6e4}.test-bottom{gap:10px;flex-wrap:wrap}.test-bottom .toggle{margin:0}.test-bottom .btn{font-size:11px}#libraryState{color:#647890}@media(max-width:700px){.layer-control{width:100%;justify-content:flex-start}.library-entry{align-items:flex-start;flex-direction:column}}.canvas-holder,.canvas-scroll,.main-area,.workspace{min-width:0;max-width:100%}.main-area{overflow:hidden}.canvas-scroll{overflow:auto}body,html{max-width:100%;overflow-x:clip}