:root{
  --bg:#EEF0EC; --dot:#C9CEC4; --panel:#FBFCFA; --ink:#1E2430; --muted:#5F6773; --line:#D3D8D0;
  --zone:#E3E7DF; --zone-line:#BFC6BA; --inbox:#F6EFD9; --inbox-line:#D9C892;
  --idea-bg:#FFF2B8; --idea-fg:#5E4900; --task-bg:#FFD9D4; --task-fg:#8A1F12;
  --thought-bg:#D8E7FF; --thought-fg:#1C4A8C; --done-bg:#D6F0D8; --done-fg:#23642B;
  --question-bg:#FFE2C2; --question-fg:#8A4300; --project-bg:#E4E7EC; --project-fg:#2F3A4A;
  --core-bg:#E6E2FF; --core-fg:#382D8C; --sphere-fg:#1E2430; --danger:#B42318;
  --claude:#C15F3C; --me-bg:#1E2430; --me-fg:#FBFCFA;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#14171B; --dot:#2A2F36; --panel:#1C2026; --ink:#E7EAEE; --muted:#9AA3AE; --line:#30363F;
  --zone:#1A1E24; --zone-line:#353C46; --inbox:#221F14; --inbox-line:#5A4E25;
  --idea-bg:#3A3210; --idea-fg:#F5DC7A; --task-bg:#3D1A16; --task-fg:#F4A79B;
  --thought-bg:#16263D; --thought-fg:#A9C7F5; --done-bg:#15301A; --done-fg:#9FD9A6;
  --question-bg:#3B260F; --question-fg:#F4BE84; --project-bg:#232831; --project-fg:#C3CBD8;
  --core-bg:#231F45; --core-fg:#C9C1FF; --sphere-fg:#E7EAEE; --danger:#F97066;
  --claude:#E58A64; --me-bg:#E7EAEE; --me-fg:#14171B; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--panel);border-bottom:1px solid var(--line);z-index:5}
.bar h1{font-size:17px;font-weight:600;margin:0;margin-right:auto;letter-spacing:-.01em}
.bar h1 small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.btn{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 11px;cursor:pointer;min-height:34px}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.chipbtn:focus-visible,.qbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.btn.claude{background:var(--claude);color:#fff;border-color:var(--claude)}
.btn.danger{color:var(--danger)}
.btn.small{min-height:28px;padding:4px 9px;font-size:12px}
.grp{display:flex;gap:6px}
#main{flex:1;display:flex;min-height:0;position:relative}
#vp{flex:1;position:relative;overflow:hidden;touch-action:none;cursor:grab;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:24px 24px}
#vp.panning{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#world.glide{transition:transform .35s ease}
.zone{position:absolute;border:1.5px dashed var(--zone-line);background:var(--zone);border-radius:28px}
.zone.inbox{background:var(--inbox);border-color:var(--inbox-line)}
.zl{position:absolute;font-size:30px;font-weight:600;color:var(--muted);white-space:nowrap}
.zl.sub{font-size:18px;font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.card{position:absolute;width:250px;padding:9px 12px 11px;border-radius:10px;background:var(--project-bg);color:var(--project-fg);border:1px solid color-mix(in srgb,currentColor 18%,transparent);cursor:pointer;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;gap:4px}
.card .chip{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;opacity:.8}
.card .txt{font-size:15px;line-height:1.35;outline:none;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.35em}
.card.editing .txt{cursor:text;user-select:text;-webkit-user-select:text}
.card .age{font-family:var(--mono);font-size:11px;align-self:flex-start;padding:1px 6px;border-radius:4px;background:var(--task-fg);color:var(--task-bg)}
.card.sel{outline:2.5px solid var(--ink);outline-offset:2px}
.card.flash{outline:2.5px solid var(--claude);outline-offset:3px}
.t-idea{background:var(--idea-bg);color:var(--idea-fg)}
.t-task{background:var(--task-bg);color:var(--task-fg)}
.t-thought{background:var(--thought-bg);color:var(--thought-fg)}
.t-done{background:var(--done-bg);color:var(--done-fg)}
.t-done .txt{text-decoration:line-through;text-decoration-thickness:1px}
.t-question{background:var(--question-bg);color:var(--question-fg)}
.t-project{background:var(--project-bg);color:var(--project-fg)}
.t-value,.t-goal,.t-belief,.t-principle{background:var(--core-bg);color:var(--core-fg)}
.t-sphere{background:var(--panel);color:var(--sphere-fg);border:2px solid var(--sphere-fg);width:300px;padding:12px 16px 14px}
.t-sphere .txt{font-size:22px;font-weight:600;line-height:1.2}
#selbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(720px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;z-index:6;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid transparent;border-radius:6px;padding:5px 8px;cursor:pointer}
.chipbtn.on{border-color:currentColor;outline:1px solid currentColor}
.selrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.selrow .meta{font-size:12px;color:var(--muted);margin-right:auto}
#status{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:10px;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 9px;z-index:4;pointer-events:none;max-width:calc(100% - 32px)}
#status:empty{display:none}
#empty{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);font-size:15px;max-width:320px;z-index:3;pointer-events:none}

#chat{width:420px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);min-height:0;z-index:7}
.chat-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.chat-head strong{margin-right:auto;font-size:15px;color:var(--claude)}
#msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.msg{max-width:92%;padding:9px 12px;border-radius:12px;line-height:1.45;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--me-bg);color:var(--me-fg)}
.msg.assistant{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.msg.note{align-self:center;background:none;color:var(--muted);font-size:12px;padding:2px}
.msg.err{align-self:flex-start;color:var(--danger);background:none;border:1px solid var(--danger)}
.msg ul{margin:4px 0;padding-left:18px;white-space:normal}
.toolnote{font-family:var(--mono);font-size:11px;color:var(--muted);align-self:flex-start}
.quick{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 0;scrollbar-width:none}
.qbtn{flex:none;font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 11px;cursor:pointer}
#chatForm{display:flex;gap:8px;align-items:flex-end;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))}
#chatInput{flex:1;font:inherit;font-size:16px;resize:none;max-height:140px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg);color:var(--ink)}
@media (max-width:760px){
  .bar h1 small,.zoom{display:none}
  .btn{padding:6px 9px}
  #chat{position:absolute;left:0;right:0;bottom:0;width:auto;height:78%;border-left:none;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
}
#login{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:20;padding:16px}
#loginForm{width:min(360px,100%);display:flex;flex-direction:column;gap:12px}
#loginForm h2{margin:0;font-size:22px}
#loginForm p{margin:0;color:var(--muted);line-height:1.45}
#loginForm input{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
#loginForm .err{color:var(--danger)}
code{font-family:var(--mono);font-size:.9em}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){#world.glide{transition:none}}