:root{
  --bg:#f3f3f8;--surface:#fcfcfe;--ink:#25262e;--ink-2:#4a4c5a;--ink-3:#7b7d8c;--line:#d6d7e4;--line-strong:#b9bbd0;
  --accent:#5b5f97;--accent-ink:#fcfcfe;
  --ui:"Yu Gothic UI","Meiryo UI","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#17181f;--surface:#1e2029;--ink:#e5e6f0;--ink-2:#c3c5d6;--ink-3:#8d90a3;--line:#32344a;--line-strong:#464863;
  --accent:#a4a8e0;--accent-ink:#17181f;color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17181f;--surface:#1e2029;--ink:#e5e6f0;--ink-2:#c3c5d6;--ink-3:#8d90a3;--line:#32344a;--line-strong:#464863;
  --accent:#a4a8e0;--accent-ink:#17181f;color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--ui);display:flex;flex-direction:column;min-height:100dvh}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hdr{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;margin:0;font-weight:600}
.logo{width:28px;height:28px;color:var(--ink);flex-shrink:0}
.brand-name{font-size:19px;letter-spacing:.04em}
.brand-sub{font-size:12px;font-weight:400;color:var(--ink-3)}
.docname{font-weight:600;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch;margin-left:8px}
.privacy{margin:0 0 0 auto;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 10px;white-space:nowrap}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:8px;width:34px;height:30px}
.icon-btn:hover{border-color:var(--line-strong)}

.toolbar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line)}
.grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sel{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2)}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);cursor:pointer}
.chk input{accent-color:var(--accent)}
button,select{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:4px 11px;line-height:1.4}
select{padding:4px 6px}
button:hover,select:hover{border-color:var(--line-strong)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.07)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.stage{position:relative;flex:1;min-height:420px;border-bottom:1px solid var(--line);background:var(--surface)}
.stage.dragging{outline:2px dashed var(--accent);outline-offset:-6px}
#map{position:absolute;inset:0}
/* mind-elixir's default font list is Simplified-Chinese first, which picks the wrong kanji forms on Windows. */
.map-container{font-family:var(--ui)!important}
.map-container me-tpc{max-width:28em}
.tips{margin:0;padding:8px 16px;font-size:12px;color:var(--ink-3)}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(720px,92vw);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-size:13px;box-shadow:0 4px 18px #0004;z-index:200}
.toast[hidden]{display:none}
.toast[data-kind="error"]{background:#8d3d34;color:#fff}

.tz-foot{display:flex;justify-content:center;padding:22px 16px calc(28px + env(safe-area-inset-bottom))}
.tz-link{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:12px;line-height:1.4;--tz-gap:var(--surface);transition:border-color .15s,color .15s}
.tz-link:hover{border-color:var(--line-strong);color:var(--ink)}
.tz-mark{width:24px;height:24px;color:#8E5532;flex-shrink:0}
.tz-name{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.tz-sub{color:var(--ink-3)}
:root[data-theme="dark"] .tz-mark{color:#C9A063}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tz-mark{color:#C9A063}}

@media (max-width:760px){
  .brand-sub,.privacy{display:none}
  .docname{max-width:16ch}
}
@media print{.hdr,.toolbar,.tips,.tz-foot{display:none!important}.stage{border:0}}