:root { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#262622; background:#f4f3ef; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:700px; height:100vh; overflow:hidden; }
button { font:inherit; color:inherit; }
.app { width:min(1440px,100%); height:100vh; margin:0 auto; padding:0 28px 28px; }
.topbar { height:72px; display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:1px solid #deddd7; }
.brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:14px; }
.brand>span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#262622; color:#fff; font-family:Georgia,serif; font-size:18px; }
.status { justify-self:end; display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; background:#e4eee5; color:#477050; font-size:11px; font-weight:650; }
.status i { width:7px; height:7px; border-radius:50%; background:#5b9868; }
.workbench { height:calc(100vh - 100px); display:grid; grid-template-columns:minmax(380px,1fr) minmax(540px,1fr); gap:24px; padding-top:24px; }
.left-panel,.keyboard { min-height:0; border:1px solid #dbdad4; border-radius:18px; }
.left-panel { display:grid; grid-template-rows:36px minmax(0,1fr) 44px; gap:10px; padding:16px 24px; background:#ebeae5; }
.panel-heading { display:flex; align-items:center; gap:11px; }
.panel-heading>span { width:28px; height:28px; display:grid; place-items:center; border:1px solid #cfcec8; border-radius:50%; color:#8b8a83; font-size:9px; }
.panel-heading>div { display:grid; gap:3px; }.panel-heading strong { font-size:13px; }.panel-heading small { color:#92918a; font-size:9px; }
.note { min-height:0; margin:0; padding:30px 34px 20px; background:#fff; border:1px solid #e0dfda; border-radius:14px; box-shadow:0 12px 34px rgba(38,38,34,.045); display:flex; flex-direction:column; overflow:hidden; }
.note-label { display:block; margin-bottom:12px; color:#8f8e87; letter-spacing:.14em; font-size:9px; font-weight:750; }
.body { width:100%; flex:1; min-height:60px; padding:0; resize:none; overflow:auto; border:0; outline:0; background:transparent; color:#4f4f49; font:15px/1.7 Georgia,"Times New Roman",serif; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; scrollbar-width:thin; scrollbar-color:#d4d2ca transparent; }
.body::placeholder { color:#c4c3bd; }
.note footer { display:flex; justify-content:space-between; margin-top:22px; padding-top:12px; border-top:1px solid #ecebe7; color:#aaa9a2; font-size:9px; }
.icon-palette { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:8px; min-height:0; }
.field-tabs { display:flex; gap:5px; }
.field-tab { flex:1; min-width:0; padding:5px 4px; border:1px solid #d7d6d0; border-radius:8px; background:#fff; color:#6f6e67; font-size:9px; font-weight:650; cursor:default; }
.field-tab span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field-tab.active { border-color:#df6245; background:#fff3ef; color:#b04a33; }
.palette-bar { display:flex; justify-content:space-between; align-items:center; padding:0 2px; color:#85847e; font-size:9px; font-weight:650; }
.palette-bar small { color:#a8a79f; font-weight:500; }
.palette-bar label { display:flex; align-items:center; gap:6px; }
.palette-bar select { padding:3px 6px; border:1px solid #d3d1ca; border-radius:7px; background:#fff; color:#42423d; font-size:10px; font-weight:650; }
.icon-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:7px; align-content:start; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c9c7be transparent; }
.palette-edit { padding:3px 9px; border:1px solid #d3d1ca; border-radius:7px; background:#fff; color:#42423d; font-size:10px; font-weight:650; cursor:pointer; }
.palette-edit:hover { border-color:#df6245; color:#b04a33; }
.palette-empty { grid-column:1/-1; padding:6px 0; text-align:center; color:#92918a; font-size:9px; }
#icon-editor[hidden] { display:none; }
.editor-backdrop { position:fixed; inset:0; z-index:29; background:rgba(38,38,34,.35); }
.icon-editor { position:fixed; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,92vw); max-height:82vh; overflow:auto; padding:18px 20px; border:1px solid #dbdad4; border-radius:16px; background:#faf9f6; box-shadow:0 24px 60px rgba(25,25,21,.3); }
.editor-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:13px; }
.editor-heading button { width:26px; height:26px; border:1px solid #d3d1ca; border-radius:7px; background:#fff; font-size:11px; cursor:pointer; }
.editor-row { display:flex; gap:8px; }
.editor-row input { flex:1; padding:8px 11px; border:1px solid #d3d1ca; border-radius:8px; background:#fff; font-size:12px; outline-color:#df6245; }
.editor-row button { padding:8px 16px; border:1px solid #a93f29; border-radius:8px; background:#df6245; color:#fff; font-size:11px; font-weight:700; cursor:pointer; }
.editor-row button:disabled { border-color:#d3d1ca; background:#e7e6e1; color:#9b9a93; cursor:default; }
.editor-hint { margin:9px 0; color:#85847e; font-size:10px; }
#editor-search { width:100%; margin-bottom:8px; padding:7px 11px; border:1px solid #d3d1ca; border-radius:8px; background:#fff; font-size:11px; outline-color:#df6245; }
.editor-pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:5px; max-height:200px; overflow:auto; padding:8px; border:1px solid #e3e2dc; border-radius:10px; background:#fff; }
.pick-icon { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:6px 2px; border:1px solid #e3e2dc; border-radius:7px; background:#fff; color:#55554f; cursor:pointer; }
.pick-icon svg { width:15px; height:15px; }
.pick-icon span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; color:#8b8a83; }
.pick-icon[hidden] { display:none; }
.pick-icon:hover { border-color:#c9c7be; }
.pick-icon.selected { border-color:#df6245; background:#fff3ef; color:#b04a33; box-shadow:0 0 0 2px rgba(223,98,69,.18); }
.editor-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.editor-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 8px; border:1px solid #d7d6d0; border-radius:99px; background:#fff; font-size:10px; font-weight:650; color:#55554f; cursor:pointer; }
.editor-chip:hover { border-color:#c9c7be; }
.editor-chip.editing { border-color:#df6245; background:#fff3ef; color:#b04a33; box-shadow:0 0 0 2px rgba(223,98,69,.15); }
.editor-chip svg { width:13px; height:13px; }
.chip-remove { width:16px; height:16px; display:grid; place-items:center; border-radius:50%; background:#eeede8; color:#7a7972; font-size:8px; cursor:pointer; }
.chip-remove:hover { background:#df6245; color:#fff; }
.icon-key.common { background:#fbf7ec; border-color:#e0d6bc; }
.icon-key.action { background:#eef3f0; border-color:#c8d8cd; color:#42604d; }
.icon-key.action span { color:#5f7a6a; }
.icon-key.sentence { background:#eef0f6; border-color:#c9cede; color:#4c5570; }
.icon-key.sentence span { color:#6b7390; }
.icon-key { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; padding:5px 2px 7px; border:1px solid #d7d6d0; border-radius:9px; background:#fff; color:#55554f; box-shadow:0 2px 0 #d0cec7; cursor:default; }
.icon-key[hidden] { display:none; }
.icon-key svg { width:16px; height:16px; }
.icon-key span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; font-weight:650; color:#8b8a83; }
.icon-key.fired span { color:#c9c9c3; }
.controls { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.control { height:44px; padding:0 14px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #d7d6d0; border-radius:10px; background:#faf9f6; font-size:10px; font-weight:650; cursor:default; }
.control b { width:24px; height:24px; display:grid; place-items:center; border-radius:6px; background:#ebeae5; font-size:14px; }
.keyboard { display:grid; grid-template-rows:36px auto minmax(0,1fr) 44px; gap:10px; padding:16px 24px; background:#e9e8e3; }
.keyboard-heading { display:flex; justify-content:space-between; align-items:flex-start; margin:0; padding:0 2px; }
.keyboard-heading span { color:#85847e; font-size:10px; }.mode-label { color:#6f6d65!important; font-weight:600; }
.dwell-speed { display:grid; grid-template-columns:auto 90px auto; align-items:center; gap:7px; color:#85847e; font-size:9px; }.dwell-speed input { width:90px; accent-color:#df6245; }.dwell-speed b { grid-column:1/-1; text-align:center; color:#696861; font-size:9px; font-variant-numeric:tabular-nums; }
.keys { display:grid; gap:7px; justify-content:stretch; align-content:center; margin:0; padding:10px 14px; border-radius:14px; background:#dfded8; }
.key-row { display:flex; justify-content:center; gap:8px; }.key-row:nth-child(3) { transform:translateX(14px); }.key-row:nth-child(4) { transform:translateX(28px); }
.key { position:relative; width:46px; height:38px; padding:0; place-self:center; overflow:hidden; border:1px solid #cfcdc5; border-radius:9px; background:#fff; box-shadow:0 3px 0 #c7c5bd; cursor:default; transition:background .08s,color .08s,transform .08s,box-shadow .08s; }
.key b { position:relative; z-index:1; display:block; white-space:nowrap; font-size:12px; }.key i { position:absolute; inset:auto 0 0; height:4px; background:#df6245; transform:scaleX(0); transform-origin:left; }.key.dwelling { border-color:#d99a89; background:#fff7f4; }.key.dwelling i { animation:key-dwell var(--dwell-time) linear forwards; }.key.wide { width:160px; color:#695f48; background:#f9f3e5; border-color:#d8ccb0; }.key.line-wide { width:82px; }
@keyframes key-dwell { to { transform:scaleX(1); } }
.delete-tools { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:0; padding:0; border:0; }
.delete-key { min-width:0; height:44px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid #d3d1ca; border-radius:10px; background:#f8f7f3; color:#62615b; cursor:default; }
.delete-key b { font-size:13px; }.delete-key span { font-size:9px; font-weight:650; }.delete-key.danger { border-color:#ddc4bd; color:#914d3e; background:#fbf4f2; }
.hover-action { position:relative; overflow:hidden; }.hover-action::after { content:""; position:absolute; inset:auto 0 0; height:4px; background:#df6245; transform:scaleX(0); transform-origin:left; }.hover-action.dwelling { border-color:#d99a89; background:#fff7f4; }.hover-action.dwelling::after { animation:key-dwell var(--dwell-time) linear forwards; }
.hover-action.fired { background:#292925; border-color:#292925; color:#fff; box-shadow:0 2px 0 #171714; transform:translateY(1px); }
.hover-action:hover small,.hover-action.fired small { color:#c9c9c3; }
@media (max-width:960px) { .app{padding-inline:16px}.workbench{grid-template-columns:minmax(320px,.9fr) minmax(460px,1.1fr);gap:14px}.left-panel,.keyboard{padding-inline:16px}.icon-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.note{padding:24px 22px}.keys{gap:10px;padding-inline:8px}.key-row{gap:9px}.key{width:36px;height:34px}.key.wide{width:120px}.key.line-wide{width:72px}.control b,.delete-key b{display:none}.delete-tools{gap:9px} }
@media (max-height:700px) { .topbar{height:62px}.workbench{height:calc(100vh - 78px);padding-top:16px}.left-panel{grid-template-rows:32px minmax(0,1fr) 42px}.keyboard{grid-template-rows:32px auto minmax(0,1fr) 42px}.left-panel,.keyboard{gap:8px;padding-top:8px;padding-bottom:8px}.icon-palette{gap:5px}.icon-grid{gap:5px}.icon-key{padding:4px 2px 6px}.icon-key span{display:none}.palette-bar small{display:none}.note{margin:0;padding-top:20px}.body{line-height:1.45}.keys{gap:7px;padding-block:8px;margin:0}.key{height:32px}.keyboard-heading{margin:0}.dwell-speed b{display:none}.delete-tools{margin:0;padding:0}.delete-key{height:42px}.controls .control{height:42px} }