:root{
  color-scheme:light;
  --bg:#f4f6f8;--surface:#ffffff;--border:#d5dbe1;--text:#17202a;--muted:#5d6b78;--accent:#1f6f9f;--accent-text:#fff;
  --case:#d7dadd;--case-edge:#c2c6ca;--cap:#fbfbfa;--cap-edge:#b9bec4;--mod:#e3e6e9;--legend:#1d2731;--jis:#9aa4ae;
  --i:#2f6fb2;--f:#b5651d;--c:#2f6fb2;--v:#2e8b57;--y:#7a4fb0;--k:#8a3b5c;--l:#1d2731;--x:#6b7680;--a:#7a4fb0;--n:#2e8b57;--j:#7a4fb0;
  --menu:rgba(250,250,252,.92);--sel:rgba(31,111,159,.9);--pressed:#bcd8ea;--mark:#1f6f9f;--warn:#fff4d6;--warn-border:#e8c766;
  --kr:"Apple SD Gothic Neo","Noto Sans KR",sans-serif;--ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12171c;--surface:#1a2128;--border:#2d3741;--text:#e6ebef;--muted:#9aa7b3;--accent:#6fb3dc;--accent-text:#0d1318;
  --case:#262c32;--case-edge:#1a1f24;--cap:#353c44;--cap-edge:#20262c;--mod:#2b3138;--legend:#eef2f5;--jis:#77828c;
  --i:#7fb2e8;--f:#e8a265;--c:#7fb2e8;--v:#76c79a;--y:#b896e6;--k:#e48bb0;--l:#eef2f5;--x:#9aa7b3;--a:#b896e6;--n:#76c79a;--j:#b896e6;
  --menu:rgba(38,44,52,.94);--sel:rgba(111,179,220,.85);--pressed:#2f5873;--mark:#6fb3dc;--warn:#3a3015;--warn-border:#7a6420;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans","Noto Sans KR","Noto Sans JP",sans-serif}
button,select,input,textarea{font:inherit;color:inherit}
button,select{font-size:.9rem;border:1px solid var(--border);background:var(--surface);padding:5px 11px;border-radius:8px;cursor:pointer}
button:disabled,select:disabled,input:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.muted{color:var(--muted)}
header{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5}
.brand{font-size:1.1rem;display:flex;align-items:center;gap:8px}
.brand img{display:block}
.about img{display:block;margin-bottom:8px}
.about h2{margin:0;font-size:1.6rem}
.spacer{flex:1}
.link{color:var(--muted);text-decoration:none;font-size:.9rem}
.mode{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.mode button{border:0;border-radius:0;padding:5px 12px;background:transparent}
.mode button span{color:var(--muted);font-size:.8rem;margin-left:4px}
.mode button.on{background:var(--accent);color:var(--accent-text)}
.mode button.on span{color:inherit;opacity:.8}
main{max-width:1180px;margin:0 auto;padding:18px 16px 40px}
.warning{background:var(--warn);border:1px solid var(--warn-border);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:.9rem}

/* The text field: a textarea over a backdrop that draws the marked text's underline. */
.editor{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;height:230px}
.editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.editor textarea,.backdrop{position:absolute;inset:0;margin:0;padding:14px 16px;border:0;width:100%;height:100%;
  font:20px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans","Noto Sans KR","Noto Sans JP",sans-serif;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;letter-spacing:normal;tab-size:4;overflow-y:auto}
.editor textarea{background:transparent;resize:none;outline:none;z-index:1}
.backdrop{color:transparent;pointer-events:none;overflow:hidden;scrollbar-gutter:stable}
.editor textarea{scrollbar-gutter:stable}
.backdrop .mark{border-bottom:2px solid var(--mark)}
.status{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin:8px 2px 18px;min-height:1.3em}
.status b{color:var(--text);font-weight:600}

/* The suggestion menu (mac/Sources/SuggestionWindow.swift). */
.menu{position:absolute;z-index:3;min-width:180px;background:var(--menu);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:.5px solid var(--border);border-radius:13px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:5px;font-size:15px;max-height:145px;overflow:hidden}
.menu .row{display:flex;gap:18px;align-items:center;height:27px;padding:0 7px;border-radius:7px;white-space:nowrap;position:relative}
.menu .row + .row::before{content:"";position:absolute;left:7px;right:7px;top:0;border-top:.5px solid color-mix(in srgb,var(--muted) 35%,transparent)}
.menu .row.sel::before,.menu .row.sel + .row::before{display:none}
.menu .row .note{margin-left:auto;color:var(--muted);font-size:12px}
.menu .row.sel{background:var(--sel);color:#fff}
.menu .row.sel .note{color:rgba(255,255,255,.75)}
.menu .row .idx{color:var(--muted);font-size:11px;width:1.6em;text-align:right;font-variant-numeric:tabular-nums}
.menu .row.sel .idx{color:rgba(255,255,255,.75)}
.menu .ja{font-family:var(--ja)}
.menu.horizontal{display:flex;max-height:none}
.menu.horizontal .cell{width:34px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 0;border-radius:8px;font-size:19px;line-height:1.2}
.menu.horizontal .cell small{font-size:10px;color:var(--muted)}
.menu.horizontal .cell.sel{background:var(--sel);color:#fff}
.menu.horizontal .cell.sel small{color:rgba(255,255,255,.85)}

/* The keyboard (tools/render). */
.board-wrap{overflow-x:auto}
.board svg{width:100%;height:auto;display:block;max-width:1100px;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.key{cursor:pointer}
.key .cap{fill:var(--cap);stroke:var(--cap-edge);stroke-width:1}
.key.mod .cap{fill:var(--mod)}
.key.on .cap,.key.latched .cap{fill:var(--pressed)}
.key.lang .cap{stroke:var(--accent)}
.key.active .cap{stroke:var(--accent);stroke-width:2}
.lg{font-family:var(--kr);fill:var(--legend)}
.c-k{font-family:var(--ja)}
.c-i{fill:var(--i)}.c-f{fill:var(--f)}.c-c{fill:var(--c)}.c-v{fill:var(--v)}.c-k{fill:var(--k)}.c-l{fill:var(--l)}.c-x{fill:var(--x)}.c-a{fill:var(--a)}.c-n{fill:var(--n)}.c-j{fill:var(--j)}
.jis{fill:var(--jis);font-family:-apple-system,sans-serif}
.modl{fill:var(--muted);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}
.board.shift .lg.base{opacity:.35}
.board:not(.shift) .lg.shift{opacity:.75}
.help{color:var(--muted);font-size:.85rem;text-align:center;margin-top:14px}
.help kbd{font:inherit;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--surface);color:var(--text)}

.loading{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 85%,transparent);display:grid;place-items:center;z-index:20}
.loading[hidden]{display:none}
.loading-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 26px;width:min(420px,90vw);display:grid;gap:10px}
.loading .bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.loading .bar div{height:100%;width:0;background:var(--accent);transition:width .15s}

/* Settings (mac/Sources/SettingsWindow.swift). */
dialog{border:1px solid var(--border);border-radius:14px;padding:0;width:min(760px,96vw);max-height:88vh;background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog[open]{display:flex;flex-direction:column;height:min(680px,88vh)}
dialog::backdrop{background:rgba(0,0,0,.3)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);margin:0}
.dialog-head .close{border:0;font-size:1.4rem;line-height:1;padding:0 6px;background:transparent}
.tabs{display:flex;gap:2px;padding:8px 14px 0;border-bottom:1px solid var(--border);overflow-x:auto}
.tabs button{border:0;border-radius:8px 8px 0 0;background:transparent;padding:7px 12px;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text);background:var(--bg);font-weight:600}
.pages{overflow-y:auto;padding:16px 22px 24px}
.page{display:grid;gap:10px;align-content:start}
.page h3{margin:12px 0 0;font-size:1rem}
.page h3:first-child{margin-top:0}
.page .hint{color:var(--muted);font-size:.82rem;margin:-4px 0 0;max-width:620px}
.page label.check{display:flex;gap:8px;align-items:flex-start}
.page label.check input{margin-top:4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cands{display:grid;gap:4px}
.cand{display:flex;align-items:center;gap:8px}
.cand label{flex:1;display:flex;gap:8px;align-items:center}
.cand input[type=number]{width:62px;text-align:right}
input[type=text],input[type=number],textarea.code{border:1px solid var(--border);background:var(--bg);border-radius:7px;padding:4px 8px}
textarea.code{font:12px/1.4 ui-monospace,Menlo,monospace;width:100%;min-height:140px}
.indent{padding-left:26px}
.ok{color:var(--v)}.err{color:var(--x)}