/*
  Layout concept: an extensible canvas — a plane much larger than the
  viewport, panned by dragging empty space or scrolling; items drift
  freely on it. The orb is the voice/text interaction surface, not a
  node in the relationship graph — only cards link to other cards (the
  backend's GraphEdge is item-to-item), so threads only ever connect
  card to card, never orb to card.
*/
:root{
  --paper:#F6F4F0; --surface:rgba(255,253,249,.88); --ink:#27303D;
  --slate:#526071; --ash:#8C94A0; --line:rgba(70,90,116,.16);
  --tone-a:#4E7FBC; --tone-b:#84AADA; --tone-deep:#325885;
  --amber:#B86018; --amber-dim:#96500E; --amber-soft:#FFF4E6;
  --accent-keep:#C98A5E; --accent-work:#4E7FBC; --accent-who:#C06B7A;
  --accent-ahead:#6E9C7C; --accent-remember:#A68FC9; --accent-identity:#B99347;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1C2430; --surface:rgba(42,52,67,.88); --ink:#EDF1F6;
    --slate:#C5CEDB; --ash:#8591A3; --line:rgba(151,190,226,.18);
    --tone-a:#6E9BD6; --tone-b:#9BC0E8; --tone-deep:#4E7FBC;
    --amber:#C4854A; --amber-dim:#7A5230; --amber-soft:#1E1610;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1C2430; --surface:rgba(42,52,67,.88); --ink:#EDF1F6;
  --slate:#C5CEDB; --ash:#8591A3; --line:rgba(151,190,226,.18);
  --tone-a:#6E9BD6; --tone-b:#9BC0E8; --tone-deep:#4E7FBC;
  --amber:#C4854A; --amber-dim:#7A5230; --amber-soft:#1E1610;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;overflow:hidden}
.app{display:flex;flex-direction:column;height:100%}
body.visitor-mode .app{display:none}

.topbar{position:relative;z-index:6;padding:24px 24px 16px calc(24px + env(safe-area-inset-left,0px));
  background:linear-gradient(var(--paper) 60%,transparent)}
:root{--controls-w:300px}
.brand{max-width:min(420px, calc(100vw - var(--controls-w) - 48px))}
.brand h1{font-family:'Fraunces',serif;font-weight:460;font-size:clamp(24px,3.4vw,32px);
  line-height:1.1;margin:0 0 6px;text-wrap:balance}
.brand p{margin:0;color:var(--slate);font-size:13.5px;line-height:1.5}

.controls{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));
  right:calc(20px + env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px;z-index:15}
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.toggle button{border:0;background:none;font:500 12px 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--slate);padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:background .2s,color .2s}
.toggle button.active{background:var(--tone-a);color:#fff}

.add-wrap{position:relative}
.pill-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px 'Plus Jakarta Sans',sans-serif;
  padding:9px 16px;border-radius:999px;cursor:pointer;transition:border-color .2s,transform .15s}
.pill-btn:hover{border-color:var(--tone-a)}
.pill-btn:active{transform:scale(.97)}
.pill-btn.primary{background:var(--tone-deep);color:#fff;border-color:transparent}

.identity-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--accent-identity);flex:none;transition:border-color .2s}
.identity-btn:hover{border-color:var(--accent-identity)}
.identity-btn svg{width:17px;height:17px}

.add-cascade{position:absolute;top:calc(100% + 10px);right:0;display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:20;
  align-items:flex-end}
.add-cascade.on{opacity:1;transform:translateY(0);pointer-events:auto}
.type-pill{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:600 12.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;padding:11px 20px;border-radius:999px;
  cursor:pointer;white-space:nowrap;box-shadow:0 10px 26px rgba(39,48,61,.1);transform-origin:right center;
  transition:border-color .2s,transform .12s ease-out}
.type-pill:hover{border-color:var(--tone-a)}

.type-chip{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--tone-a);
  background:color-mix(in srgb, var(--tone-a) 10%, var(--surface));color:var(--tone-deep);
  font:600 12.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;padding:10px 10px 10px 20px;
  border-radius:999px;align-self:flex-end;box-shadow:0 10px 26px rgba(39,48,61,.1)}
.type-chip button{width:22px;height:22px;border-radius:50%;border:none;
  background:color-mix(in srgb, var(--tone-a) 18%, transparent);color:var(--tone-deep);
  display:grid;place-items:center;cursor:pointer;flex:none}

.field-stack{display:none;position:absolute;top:calc(100% + 10px);right:0;flex-direction:column;gap:10px;
  width:270px;max-height:calc(100vh - 110px);overflow-y:auto;z-index:20}
.field-stack.on{display:flex}
.field-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  box-shadow:0 10px 26px rgba(39,48,61,.08)}
.field-card .tag{display:block;font:600 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ash);margin-bottom:6px}
.field-card .tag b{color:var(--tone-a);font-weight:700}
.field-card input, .field-card textarea{width:100%;border:none;background:none;outline:none;padding:0;
  font:400 15px 'Plus Jakarta Sans',sans-serif;color:var(--ink);resize:none}
.field-card input::placeholder, .field-card textarea::placeholder{color:var(--ash)}

.add-more-btn{background:none;border:1.4px dashed var(--line);border-radius:14px;padding:12px 16px;
  color:var(--tone-a);font:600 12.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-align:left;
  transition:border-color .2s}
.add-more-btn:hover{border-color:var(--tone-a)}
.field-submit{background:var(--tone-deep);color:#fff;border:none;border-radius:999px;padding:13px;
  font:700 12.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}

.upload-zone{border:1.4px dashed var(--line);border-radius:10px;padding:14px 10px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s}
.upload-zone:hover{border-color:var(--tone-a);background:color-mix(in srgb, var(--tone-a) 5%, transparent)}
.upload-zone svg{color:var(--ash);margin-bottom:4px}
.upload-zone .t{font:600 12.5px 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.upload-zone .d{font-size:11px;color:var(--ash);margin-top:2px}
.drive-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);
  border-radius:10px;padding:9px;background:var(--surface);cursor:pointer;font:600 12.5px 'Plus Jakarta Sans',sans-serif;
  color:var(--ink);transition:border-color .2s;width:100%;margin-top:10px}
.drive-btn:hover{border-color:var(--tone-a)}
.drive-btn.connected{border-color:var(--tone-a);color:var(--tone-a);background:color-mix(in srgb, var(--tone-a) 8%, transparent)}

.email-addr{display:flex;align-items:center;gap:8px}
.email-addr code{flex:1;font:400 12px 'Plus Jakarta Sans',monospace;color:var(--ink);overflow-wrap:anywhere}
.email-addr button{flex:none;border:none;background:var(--tone-deep);color:#fff;border-radius:7px;padding:6px 10px;
  font:600 11px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.qf-note{font-size:11.5px;color:var(--ash);line-height:1.5;margin:0 0 10px}

.canvas-viewport{flex:1;position:relative;overflow:auto;cursor:grab;scrollbar-width:thin}
.canvas-viewport.panning{cursor:grabbing}
.canvas-plane{position:relative;width:2400px;height:1500px}

.card{position:absolute;width:218px;
  background:linear-gradient(color-mix(in srgb, var(--accent, var(--tone-a)) 9%, var(--surface)),
    color-mix(in srgb, var(--accent, var(--tone-a)) 9%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--accent, var(--tone-a)) 22%, var(--line));
  border-radius:16px;padding:14px 16px 14px 19px;box-shadow:0 10px 28px rgba(39,48,61,.07);cursor:grab;
  z-index:2;backdrop-filter:blur(6px);transition:box-shadow .2s,opacity .25s,filter .25s,background .2s,border-color .2s}
.card:active{cursor:grabbing}
.card:hover{box-shadow:0 16px 36px rgba(39,48,61,.12)}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:16px 0 0 16px;
  background:var(--accent, var(--tone-a))}
.card .eyebrow{font:600 10px 'Plus Jakarta Sans',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent, var(--tone-a));margin:0 0 5px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.card h3{font-family:'Fraunces',serif;font-weight:460;font-size:17px;margin:0 0 3px;line-height:1.25}
.card .meta{margin:0;font-size:12.5px;color:var(--ash)}
.card.pinned{box-shadow:0 10px 28px rgba(39,48,61,.07),0 0 0 1.5px var(--accent,var(--tone-a))}

.share-dot{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--ash);background:transparent;cursor:pointer;flex:none}
.share-dot.on{background:var(--tone-a);border-color:var(--tone-a)}
body.owner-mode .card[data-shareable="0"] .share-dot{opacity:.5}

.link-btn{display:flex;align-items:center;justify-content:center;color:var(--ash);cursor:pointer;flex:none;
  width:16px;height:16px;border-radius:50%;transition:color .15s,background .15s}
.link-btn:hover{color:var(--tone-a);background:color-mix(in srgb, var(--tone-a) 12%, transparent)}
.link-btn.link-hint{color:var(--tone-a);background:color-mix(in srgb, var(--tone-a) 16%, transparent);
  animation:linkHintPulse 1.8s ease-out}
@keyframes linkHintPulse{0%,40%,80%{box-shadow:0 0 0 0 color-mix(in srgb, var(--tone-a) 35%, transparent)}
  20%,60%{box-shadow:0 0 0 6px transparent}}
.card.link-source{outline:1.5px solid var(--tone-a);outline-offset:2px}
.card.link-target{outline:1.5px dashed var(--tone-a);outline-offset:2px;background:color-mix(in srgb, var(--tone-a) 6%, var(--surface))}
body.linking .card{cursor:crosshair}
/* A soft, ambient glow — not the link-gesture's dashed outline above,
   which means "drop here to link deliberately". This means "you're close
   enough that the system is about to notice this on its own", live while
   dragging, not only revealed after release via the toast. */
.card.proximity-near{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent, var(--tone-a)) 40%, transparent),
  0 0 18px color-mix(in srgb, var(--accent, var(--tone-a)) 35%, transparent),
  0 10px 28px rgba(39,48,61,.07);transition:box-shadow .15s}
#link-drag-svg{position:absolute;inset:0;pointer-events:none;z-index:9}
#link-drag-svg path{stroke:var(--tone-a);stroke-width:1.6;fill:none;stroke-dasharray:3 4}

.card-links{position:absolute;inset:0;pointer-events:none;z-index:1}
.card-links path.visible{fill:none;stroke:var(--tone-a);
  stroke-width:calc(0.6px + var(--link-strength, 0.7) * 2.6px);
  opacity:calc(0.12 + var(--link-strength, 0.7) * 0.78)}
.card-links path.visible.inferred{stroke-dasharray:2 5}
.card-links path.visible.lit{opacity:.92;stroke-width:2.2px}
.card-links path.hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
#unlink-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.unlink-btn{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--surface);
  border:1.3px solid var(--line);color:var(--ash);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transform:translate(-50%,-50%) scale(.6);z-index:4;font-size:12px;box-shadow:0 3px 10px rgba(39,48,61,.1);
  opacity:0;pointer-events:none;transition:border-color .15s,color .15s,transform .15s,opacity .15s}
.unlink-btn.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.unlink-btn:hover{border-color:#c0392b;color:#c0392b;transform:translate(-50%,-50%) scale(1.12)}
.why-label{position:absolute;transform:translate(-50%,-50%);font:italic 11px 'Fraunces',serif;color:var(--slate);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  pointer-events:none;z-index:4;white-space:nowrap}
.why-prompt{position:absolute;display:none;transform:translate(-50%,-50%);width:150px;z-index:6;
  border:1.4px dashed var(--tone-a);border-radius:999px;background:var(--surface);padding:6px 12px;
  font:italic 12px 'Fraunces',serif;color:var(--ink);outline:none;text-align:center}
.why-prompt.on{display:block}
.why-prompt::placeholder{color:var(--ash)}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-12px);
  background:var(--ink);color:var(--paper);font:500 12.5px 'Plus Jakarta Sans',sans-serif;padding:11px 20px;
  border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.2);z-index:35;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;white-space:nowrap;display:flex;align-items:center;gap:8px}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast .tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);
  border:1px solid color-mix(in srgb, var(--amber) 50%, transparent);border-radius:999px;padding:2px 7px}
.toast-undo{display:none;border:none;background:none;color:var(--paper);font:700 11.5px 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;padding:0;margin-left:2px}
.toast.has-undo .toast-undo{display:inline}

.orb-zone{position:absolute;left:1200px;top:750px;transform:translate(-50%,-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.orb{width:80px;height:80px;border-radius:50%;background:var(--paper);border:1.5px solid var(--amber);
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:none;position:relative;box-shadow:0 0 40px color-mix(in srgb, var(--amber) 14%, transparent),0 20px 50px rgba(39,48,61,.14);
  transition:width .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1),border-radius .4s cubic-bezier(.22,1,.36,1)}
.orb-ring{position:absolute;border-radius:50%;border:1px solid var(--amber);opacity:0;pointer-events:none}
.orb-ring-1{inset:-14px}.orb-ring-2{inset:-26px}.orb-ring-3{inset:-40px}
.orb.listening .orb-ring{animation:ring-pulse 2.2s ease-out infinite}
.orb.listening .orb-ring-2{animation-delay:.45s}.orb.listening .orb-ring-3{animation-delay:.9s}
@keyframes ring-pulse{0%{transform:scale(.94);opacity:.28}100%{transform:scale(1.06);opacity:0}}
.orb-bars{display:flex;align-items:center;gap:3px}
.orb-bar{width:3px;height:8px;border-radius:2px;background:var(--amber);opacity:.4}
.orb.listening .orb-bar{animation:bar-anim .75s ease-in-out infinite}
.orb.listening .orb-bar:nth-child(1){animation-delay:0s}.orb.listening .orb-bar:nth-child(2){animation-delay:.12s}
.orb.listening .orb-bar:nth-child(3){animation-delay:.06s}.orb.listening .orb-bar:nth-child(4){animation-delay:.18s}
.orb.listening .orb-bar:nth-child(5){animation-delay:.09s}
@keyframes bar-anim{0%,100%{height:4px;opacity:.35}50%{height:22px;opacity:1}}

.orb-zone.typing .orb{width:min(420px,78vw);height:56px;border-radius:999px}
.orb-zone.typing .orb-bars,.orb-zone.typing .orb-ring{display:none}
.orb-input{opacity:0;pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;gap:8px;
  padding:0 8px 0 20px;transition:opacity .2s .1s}
.orb-zone.typing .orb-input{opacity:1;pointer-events:auto}
.orb-input input{flex:1;border:0;outline:none;background:none;min-width:0;font:400 15px 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.orb-input input::placeholder{color:var(--ash)}
.orb-send{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:var(--amber);color:#fff;
  display:grid;place-items:center;cursor:pointer}

.orb-hint{font-size:12.5px;color:var(--ash);font-style:italic;font-family:'Fraunces',serif;text-align:center;
  transition:opacity .2s;white-space:nowrap}
.orb-zone.typing .orb-hint{opacity:0}

.orb-response{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(6px) scale(.97);
  width:min(300px,78vw);padding:12px 16px;border:1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-radius:16px;background:var(--surface);box-shadow:0 16px 40px rgba(45,57,73,.14);backdrop-filter:blur(14px);
  font:italic 13.5px/1.5 'Fraunces',serif;color:var(--slate);text-align:center;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.orb-response.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

.center-btn{position:fixed;right:20px;bottom:144px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--slate);display:grid;place-items:center;
  cursor:pointer;z-index:8;box-shadow:0 8px 20px rgba(39,48,61,.1);transition:border-color .2s,color .2s}
.center-btn:hover{border-color:var(--tone-a);color:var(--tone-a)}
.minimap{position:fixed;right:20px;bottom:20px;width:150px;height:94px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(8px);z-index:8;
  box-shadow:0 10px 26px rgba(39,48,61,.12);cursor:pointer;overflow:hidden}
.minimap-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent,var(--tone-a))}
.minimap-cluster{position:absolute;min-width:14px;height:14px;padding:0 3px;border-radius:999px;
  background:var(--tone-deep);color:#fff;font:700 8.5px 'Plus Jakarta Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);
  box-shadow:0 2px 6px rgba(39,48,61,.25)}
.minimap-orb{position:absolute;width:7px;height:7px;border-radius:50%;border:1px solid var(--amber);transform:translate(-50%,-50%)}
.minimap-view{position:absolute;border:1.4px solid var(--tone-a);border-radius:4px;
  background:color-mix(in srgb, var(--tone-a) 10%, transparent);pointer-events:none}

.offscreen-ping{position:fixed;width:34px;height:34px;border-radius:50%;background:var(--tone-deep);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:30;
  opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 20px rgba(39,48,61,.25)}
.offscreen-ping.on{opacity:1;pointer-events:auto}
.offscreen-ping svg{width:16px;height:16px}

.visitor-view{display:none;height:100%;flex-direction:column;align-items:center;justify-content:center;
  position:relative;gap:28px;padding:24px}
body.visitor-mode .visitor-view{display:flex}
.vv-orb-zone{position:relative;left:auto;top:auto;transform:none;flex-direction:column;align-items:center;gap:18px}
.vv-greeting{font-family:'Fraunces',serif;font-style:italic;font-weight:420;font-size:17px;color:var(--slate);
  text-align:center;line-height:1.5;max-width:360px;margin:0}
.vv-back{position:absolute;top:24px;left:24px;border:1px solid var(--line);background:var(--surface);
  color:var(--slate);font:500 12.5px 'Plus Jakarta Sans',sans-serif;padding:8px 14px;border-radius:999px;
  cursor:pointer;transition:border-color .2s}
.vv-back:hover{border-color:var(--tone-a)}
#vv-orb-response{position:static;opacity:1;transform:none;pointer-events:none;width:min(380px,84vw);display:none}
#vv-orb-response.on{display:block}

/* ── Sign-in — voice is the default (matches the product's own trust
   model), the static key stays an explicit, always-available fallback. ── */
.signin-overlay{position:fixed;inset:0;background:var(--paper);z-index:50;display:none;align-items:center;justify-content:center}
.signin-overlay.on{display:flex}
.signin-card{width:min(380px,88vw);text-align:center;padding:36px 30px;border:1px solid var(--line);
  border-radius:20px;background:var(--surface);box-shadow:0 30px 70px rgba(28,36,48,.16)}
.signin-card h2{font-family:'Fraunces',serif;font-weight:460;font-size:26px;margin:0 0 8px}
.signin-sub{color:var(--slate);font-size:13.5px;line-height:1.5;margin:0 0 22px}
.signin-voicemark-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:1px solid var(--line);border-radius:999px;padding:11px 20px;background:var(--paper);color:var(--ink);
  font:600 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:border-color .2s}
.signin-voicemark-btn:hover{border-color:var(--tone-a)}
.signin-divider{color:var(--ash);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin:16px 0}
.signin-input{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin-bottom:10px;font:400 14px 'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--paper);
  outline:none;transition:border-color .2s}
.signin-input:focus{border-color:var(--tone-a)}
.signin-record-btn{display:block;width:100%;background:var(--tone-deep);color:#fff;border:none;border-radius:999px;
  padding:12px 28px;margin-top:4px;font:700 13px 'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;
  text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.signin-record-btn:disabled{opacity:.5;cursor:default}
.signin-status{font-size:12.5px;color:var(--ash);min-height:18px;margin:12px 0 0}
.signin-fallback{display:block;margin:18px auto 0;border:none;background:none;color:var(--slate);
  font:500 12px 'Plus Jakarta Sans',sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.scrim{position:fixed;inset:0;background:rgba(28,36,48,.32);opacity:0;pointer-events:none;transition:opacity .25s;z-index:10}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;right:0;top:0;bottom:0;width:min(380px,92vw);background:var(--paper);
  border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(28,36,48,.18);transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:11;padding:24px 22px;overflow-y:auto}
.sheet.on{transform:translateX(0)}
.sheet h2{font-family:'Fraunces',serif;font-weight:460;font-size:22px;margin:0 0 4px}
.sheet .sub{color:var(--ash);font-size:13px;margin:0 0 20px}
.sheet .section-label{font:600 10.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);margin:26px 0 4px}
.sheet .section-label:first-of-type{margin-top:4px}
.sheet .row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);gap:12px}
.sheet .row .label{font:600 14px 'Plus Jakarta Sans',sans-serif}
.sheet .row .desc{font-size:12px;color:var(--ash);margin-top:2px}
.switch{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch.on{background:var(--tone-a)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.switch.on::after{transform:translateX(16px)}
.recipe-pair{display:flex;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.recipe-pair .side{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;
  transition:border-color .2s,background .2s}
.recipe-pair .side.on{border-color:var(--tone-a);background:color-mix(in srgb, var(--tone-a) 8%, transparent)}
.recipe-pair .side .t{font:600 12.5px 'Plus Jakarta Sans',sans-serif}
.recipe-pair .side .d{font-size:11px;color:var(--ash);margin-top:2px}
.close-sheet{position:absolute;top:22px;right:20px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--slate)}

.card-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:min(560px,92vw);
  max-height:85vh;overflow-y:auto;background:var(--paper);border-radius:20px;border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(28,36,48,.28);z-index:12;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.card-modal.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.cm-topbar{height:4px;background:var(--accent,var(--tone-a));border-radius:20px 20px 0 0}
.cm-body{padding:28px 30px 24px}
.cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.cm-eyebrow{font:600 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent,var(--tone-a));padding-top:4px}
.cm-nav{display:flex;align-items:center;gap:8px;flex:none}
.cm-nav button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--slate);transition:border-color .2s}
.cm-nav button:hover{border-color:var(--tone-a)}
.cm-title{font-family:'Fraunces',serif;font-weight:460;font-size:36px;line-height:1.1;margin:0 0 10px;outline:none;text-wrap:balance}
.cm-title[contenteditable="true"]{border-bottom:1.5px dashed var(--tone-a)}
.cm-subtitle{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--slate);margin:0 0 22px;outline:none}
.cm-subtitle[contenteditable="true"]{border-bottom:1.5px dashed var(--tone-a)}
.cm-share{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ash);cursor:pointer;margin-bottom:16px;padding:4px 0}
.cm-share .dot{width:8px;height:8px;border-radius:50%;border:1.4px solid var(--ash)}
.cm-share.on .dot{background:var(--tone-a);border-color:var(--tone-a)}
.cm-note-zone{border:1.6px dashed var(--line);border-radius:10px;padding:13px 16px;cursor:pointer;
  color:var(--slate);font-size:13.5px;transition:border-color .2s,background .2s;min-height:20px}
.cm-note-zone:hover{border-color:var(--tone-a)}
.cm-note-zone textarea{width:100%;border:none;background:none;outline:none;resize:vertical;min-height:60px;
  font:400 13.5px 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.cm-colours{display:flex;align-items:center;gap:9px;margin-top:18px}
.cm-colours .label{font:600 10.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-right:3px}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}
.swatch:hover{transform:scale(1.12)}
.swatch.on{border-color:var(--ink)}
.swatch.reset{background:var(--surface);border:1.4px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--ash);font-size:11px}
.swatch-divider{width:1px;height:20px;background:var(--line);margin:0 2px}
.colour-picker-wrap{position:relative;width:22px;height:22px}
.colour-picker-trigger{width:22px;height:22px;border-radius:50%;border:1.4px dashed var(--ash);
  display:flex;align-items:center;justify-content:center;color:var(--ash);cursor:pointer;font-size:13px;
  transition:border-color .15s,color .15s}
.colour-picker-trigger:hover{border-color:var(--tone-a);color:var(--tone-a)}
.colour-picker{position:absolute;inset:0;opacity:0;pointer-events:none;width:22px;height:22px}
.cm-actions{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.cm-save{background:var(--tone-a);color:#fff;border:none;border-radius:999px;padding:10px 22px;
  font:600 12.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.cm-btn{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:10px 18px;font:600 12.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase;
  cursor:pointer;transition:border-color .2s}
.cm-btn:hover{border-color:var(--tone-a)}
.cm-btn.danger{color:#c0392b;margin-left:auto}
.cm-btn.danger:hover{border-color:#c0392b}

@media (max-width:760px){
  .canvas-plane{width:1600px;height:2400px}
  .orb-zone{left:800px;top:1200px}
}
@media (max-width:460px){
  :root{--controls-w:250px}
  .topbar{padding-left:16px;padding-right:16px}
  .controls{top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));gap:8px}
  .toggle button{padding:7px 10px;font-size:11px}
  .pill-btn{padding:8px 12px;font-size:12px}
  .identity-btn{width:34px;height:34px;flex:none}
}