:root{color-scheme:light;font:15px/1.45 Inter,system-ui,sans-serif;color:#282c26;background:#f8f6ee;--line:#deddd2;--paper:#fcfaf4;--muted:#666b60;--ink:#303a31}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button,input,select,textarea{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px}
button{cursor:pointer}
button:hover{background:#eeeee4}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #536c55;outline-offset:2px}
a{color:#34563c}
label{display:grid;gap:4px}
input,select,textarea{min-width:0;width:100%}
button.primary,#unlock button,#add{background:var(--ink);color:white}
h1,h2,p{margin:0}
h1{font-size:16px;font-weight:650;margin-right:auto}
h2{font-size:18px}
#lock{min-height:100dvh;display:grid;place-items:center;padding:24px}
#unlock{display:grid;gap:9px;width:min(100%,260px)}
#login-error:empty{display:none}
#login-error,#status{color:#92382f}
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);z-index:3;background:var(--paper)}
#workspace{position:relative;display:flex;flex:1;min-height:0}
#sidebar,#details{width:248px;flex:none;overflow:auto;background:var(--paper);padding:16px;z-index:2}
#sidebar{border-right:1px solid var(--line)}
#details{width:320px;border-left:1px solid var(--line)}
#filters,form.fields,#details .stack{display:grid;gap:12px}
#tree{margin:18px 0}
.tree-row{display:flex;align-items:center;gap:4px;margin:3px 0}
.tree-row button{padding:4px 7px;text-align:left}
.tree-row button:last-child{flex:1;overflow-wrap:anywhere}
.tree-child{padding-left:20px}
.selected{outline:2px solid #536c55}
#map{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:none;cursor:grab;background-image:radial-gradient(#d9d8cd 1px,transparent 1px);background-size:20px 20px}
#map.dragging{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0}
#edges{position:absolute;pointer-events:none}
.node{position:absolute;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%);white-space:nowrap}
.node button{border-radius:999px;box-shadow:0 2px 5px #292a2116}
.node button:first-child{max-width:118px;overflow:hidden;text-overflow:ellipsis}
.node .branch{padding:4px 8px}
.node .root{background:#303a31;color:white}
.node .green{background:#d4e7cf}.node .yellow{background:#f0e7ad}.node .orange{background:#f5d5ad}.node .red{background:#f0c1b8}.node .gray{background:#e5e6df}
#controls{position:absolute;right:16px;bottom:16px;display:flex;gap:5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted)}
textarea{min-height:75px;resize:vertical}
dialog{width:min(480px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--paper);color:inherit}
dialog::backdrop{background:#25291d55}
dialog .stack{display:grid;gap:12px}
#status{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);z-index:5;background:var(--paper);border:1px solid var(--line);padding:10px;border-radius:7px}
@media(max-width:760px){
 header{padding:8px;gap:4px}header button{padding:6px;font-size:13px}
 #sidebar{position:absolute;inset:0 auto 0 0;box-shadow:3px 0 12px #24231820}
 #details{position:absolute;inset:auto 0 0;width:100%;max-height:56%;border:1px solid var(--line);border-radius:16px 16px 0 0}
}
.fields{display:grid;gap:12px}
.notes{white-space:pre-wrap;overflow-wrap:anywhere}