:root{color-scheme:dark;--bg:#111318;--panel:#17191f;--panel2:#1d2027;--raised:#242731;--line:#2c3039;--line2:#3a3f4b;--text:#e8e9ed;--muted:#8e939f;--accent:#9b87f5;--accent2:#7663d8;--soft:#2c2846;--green:#62c995;--danger:#ef7180;--shadow:0 18px 60px #0007;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root.light{color-scheme:light;--bg:#f2f1ed;--panel:#faf9f6;--panel2:#f0efeb;--raised:#fff;--line:#dfddd6;--line2:#cfcbc1;--text:#25252a;--muted:#777780;--accent:#755ddb;--accent2:#5f49bf;--soft:#ebe7fa;--green:#3b9a67;--danger:#c94e5c;--shadow:0 18px 60px #25202f1c}
*{box-sizing:border-box}html,body{min-width:320px;height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--text)}button,input,textarea{color:inherit;font:inherit}button{cursor:pointer}svg{width:1.2rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.app-shell{display:grid;height:100dvh;grid-template-columns:3.5rem 18rem minmax(0,1fr) 16rem}.rail{z-index:30;display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line);background:var(--bg);padding:.8rem .45rem}.logo{display:grid;width:2.35rem;height:2.35rem;place-items:center;border:0;border-radius:.75rem;background:linear-gradient(145deg,#ae9cff,#7259db);color:#fff;font:700 1.15rem Georgia;box-shadow:0 8px 22px #7961dd4d}.rail nav{display:flex;flex-direction:column;gap:.35rem;margin-top:1.6rem}.rail-bottom{display:flex;flex-direction:column;gap:.35rem;margin-top:auto}.rail-button,.small-icon{display:grid;place-items:center;border:0;background:transparent;color:var(--muted);transition:.14s}.rail-button{width:2.5rem;height:2.5rem;border-radius:.7rem}.rail-button:hover,.rail-button.active,.small-icon:hover{background:var(--soft);color:var(--accent)}.rail-button.active{box-shadow:inset 2px 0 var(--accent)}
.sidebar{z-index:20;display:flex;min-width:0;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);padding:1rem .8rem .7rem}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:.1rem .35rem 1rem}.sidebar-header>div:first-child{display:flex;flex-direction:column;gap:.15rem}.sidebar-header strong{font-size:.95rem}.eyebrow{color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.header-actions{display:flex}.small-icon{width:2.15rem;height:2.15rem;border-radius:.6rem}
.new-note{display:flex;height:2.6rem;align-items:center;gap:.55rem;border:0;border-radius:.65rem;background:var(--accent2);padding:0 .75rem;color:#fff;font-size:.82rem;font-weight:700}.new-note svg{width:1rem}.new-note kbd{margin-left:auto;color:#ffffffa6}.search-box{display:flex;height:2.5rem;align-items:center;gap:.48rem;margin:.75rem 0;border:1px solid transparent;border-radius:.6rem;background:var(--panel2);padding:0 .7rem;color:var(--muted)}.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.search-box svg{width:1rem}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:.78rem}.search-box kbd,.new-note kbd{font-size:.62rem}.explorer-label,.panel-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.63rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.explorer-label{padding:.3rem .45rem .55rem}
.file-tree{min-height:0;flex:1;overflow:auto}.folder-block{margin-bottom:.25rem}.folder-row,.note-row{display:flex;width:100%;align-items:center;border:0;border-radius:.48rem;background:transparent;text-align:left}.folder-row{height:2rem;gap:.4rem;padding:0 .4rem;color:var(--muted);font-size:.75rem;font-weight:700}.folder-row svg{width:.85rem}.folder-row span:last-child{margin-left:auto;font-size:.62rem}.note-row{position:relative;min-height:2.25rem;gap:.5rem;padding:.45rem .55rem .45rem 1.55rem;color:var(--muted);font-size:.78rem}.note-row:hover{background:var(--panel2);color:var(--text)}.note-row.active{background:var(--soft);color:var(--text)}.note-row.active:before{position:absolute;left:.2rem;width:2px;height:1.1rem;border-radius:2px;background:var(--accent);content:""}.note-row svg{width:.8rem;flex:0 0 auto}.note-row .row-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pin-dot{width:.3rem;height:.3rem;margin-left:auto;border-radius:50%;background:var(--accent)}.empty-tree{padding:2rem 1rem;color:var(--muted);font-size:.76rem;text-align:center}.sidebar-footer{display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--line);padding:.8rem .35rem .15rem;color:var(--muted);font-size:.65rem}.status-dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.workspace{display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--panel)}.topbar{display:flex;min-height:3.5rem;align-items:center;border-bottom:1px solid var(--line);padding:0 1rem}.breadcrumbs{display:flex;min-width:0;align-items:center;gap:.55rem;color:var(--muted);font-size:.72rem}.breadcrumbs b{font-weight:400}.breadcrumbs strong{max-width:16rem;overflow:hidden;color:var(--text);text-overflow:ellipsis;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}.save-state{color:var(--muted);font-size:.65rem}.view-switch{display:flex;border:1px solid var(--line);border-radius:.55rem;background:var(--bg);padding:.18rem}.view-switch button{height:1.7rem;border:0;border-radius:.37rem;background:transparent;padding:0 .65rem;color:var(--muted);font-size:.65rem}.view-switch button.active{background:var(--raised);color:var(--text);box-shadow:0 1px 5px #0002}
.editor-view{display:grid;min-height:0;flex:1;grid-template-columns:1fr}.editor-view.split{grid-template-columns:1fr 1fr}.editor-view.preview-only .editor-pane{display:none}.editor-view.edit-only .preview-pane{display:none}.editor-pane{display:flex;min-width:0;min-height:0;flex-direction:column}.document-head{width:min(100%,54rem);margin:0 auto;padding:clamp(2rem,6vh,4rem) clamp(1.4rem,6vw,4rem) 1rem}.note-title{width:100%;border:0;outline:0;background:transparent;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4.5vw,3.4rem);font-weight:650;letter-spacing:-.04em}.note-title::placeholder{color:var(--line2)}.document-meta{display:flex;gap:1rem;margin-top:.65rem;color:var(--muted);font-size:.68rem}.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}.tag-pill{border:0;border-radius:2rem;background:var(--soft);padding:.22rem .55rem;color:var(--accent);font-size:.65rem}.format-bar{display:flex;width:min(calc(100% - 2.8rem),46rem);align-items:center;gap:.18rem;border:1px solid var(--line);border-radius:.6rem;background:var(--panel2);margin:0 auto .8rem;padding:.25rem;overflow-x:auto}.format-bar button{display:grid;min-width:1.85rem;height:1.8rem;place-items:center;border:0;border-radius:.36rem;background:transparent;color:var(--muted);font:650 .68rem ui-monospace,SFMono-Regular,monospace}.format-bar button:hover{background:var(--soft);color:var(--accent)}.format-bar svg{width:.85rem}.note-body{width:min(100%,54rem);min-height:0;flex:1;resize:none;border:0;outline:0;background:transparent;margin:0 auto;padding:.4rem clamp(1.4rem,6vw,4rem) 4rem;color:var(--text);font:1rem/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2}
.preview-pane{min-width:0;overflow:auto;border-left:1px solid var(--line);padding:clamp(2.5rem,7vh,5rem) clamp(1.5rem,6vw,5rem) 5rem}.markdown-body{font:1rem/1.75 Inter,ui-sans-serif,sans-serif}.markdown-body>*{max-width:48rem;margin-left:auto;margin-right:auto}.markdown-body h1,.markdown-body h2,.markdown-body h3{margin-top:1.7em;margin-bottom:.55em;font-family:Georgia,serif;line-height:1.2}.markdown-body h1{font-size:2.2rem}.markdown-body h2{border-bottom:1px solid var(--line);padding-bottom:.35rem;font-size:1.55rem}.markdown-body p{margin:.8rem auto;color:color-mix(in srgb,var(--text) 88%,var(--muted))}.markdown-body a{color:var(--accent);text-decoration:none}.markdown-body .wiki-link{border-radius:.3rem;background:var(--soft);padding:.1rem .3rem}.markdown-body blockquote{border-left:3px solid var(--accent);margin-top:1rem;margin-bottom:1rem;padding:.1rem 1rem;color:var(--muted)}.markdown-body pre,.markdown-body code{border:1px solid var(--line);border-radius:.35rem;background:var(--bg);font-family:ui-monospace,monospace}.markdown-body code{padding:.1rem .3rem;font-size:.88em}.markdown-body pre{overflow:auto;padding:1rem}.markdown-body pre code{border:0;padding:0}.markdown-body table{width:100%;border-collapse:collapse;margin-top:1rem;margin-bottom:1rem}.markdown-body th,.markdown-body td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}.markdown-body th{background:var(--panel2)}.markdown-body img{max-width:100%;border-radius:.7rem}.markdown-body hr{border:0;border-top:1px solid var(--line);margin:2rem auto}.task-list{list-style:none;padding-left:.25rem}.task-list input{accent-color:var(--accent)}
.context-panel{min-width:0;overflow:auto;border-left:1px solid var(--line);background:var(--bg);padding:1rem .8rem}.context-panel section{border-bottom:1px solid var(--line);padding:.6rem 0 1rem;margin-bottom:.6rem}.panel-heading{padding:0 .3rem .6rem}.backlinks,.outline{display:flex;flex-direction:column;gap:.15rem}.backlinks button,.outline button{border:0;border-radius:.4rem;background:transparent;padding:.45rem .5rem;color:var(--muted);font-size:.7rem;text-align:left}.backlinks button:hover,.outline button:hover{background:var(--panel2);color:var(--text)}.panel-empty{padding:.7rem .4rem;color:var(--muted);font-size:.68rem;line-height:1.5}.properties{margin:0}.properties div{display:flex;justify-content:space-between;padding:.35rem .4rem;color:var(--muted);font-size:.65rem}.properties dt,.properties dd{margin:0}
.graph-view,.tags-view{min-height:0;flex:1;overflow:auto;padding:clamp(1.5rem,4vw,3rem)}.graph-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.5rem}.graph-head h1,.collection-head h1{margin:.3rem 0;font:650 clamp(2rem,4vw,3rem) Georgia}.graph-head p,.collection-head p{margin:0;color:var(--muted);font-size:.8rem}.secondary-button,.primary-button{border:1px solid var(--line2);border-radius:.55rem;background:var(--raised);padding:.6rem .85rem;font-size:.72rem;font-weight:700}.primary-button{border-color:var(--accent2);background:var(--accent2);color:#fff}.graph-stage{position:relative;height:calc(100% - 6rem);min-height:28rem;overflow:hidden;border:1px solid var(--line);border-radius:1rem;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--soft) 45%,transparent),transparent 55%),var(--bg)}#graphCanvas{width:100%;height:100%}.graph-legend{position:absolute;right:.8rem;bottom:.8rem;display:flex;gap:1rem;border:1px solid var(--line);border-radius:.55rem;background:color-mix(in srgb,var(--panel) 90%,transparent);padding:.5rem .7rem;color:var(--muted);font-size:.6rem;backdrop-filter:blur(8px)}.graph-legend span{display:flex;align-items:center;gap:.3rem}.graph-legend i{width:.45rem;height:.45rem;border-radius:50%;background:var(--muted)}.graph-legend .legend-active{background:var(--accent)}.tag-cloud{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.7rem;margin-top:2rem}.tag-card{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:.7rem;background:var(--panel2);padding:1rem;color:var(--text)}.tag-card span{color:var(--accent);font-weight:700}.tag-card small{color:var(--muted)}
dialog{color:var(--text)}dialog::backdrop{background:#08090cb3;backdrop-filter:blur(4px)}.command-dialog{width:min(calc(100% - 2rem),38rem);border:1px solid var(--line2);border-radius:.8rem;background:var(--panel);padding:0;box-shadow:var(--shadow);transform:translateY(-10vh)}.command-dialog form>label{display:flex;height:3.6rem;align-items:center;gap:.7rem;border-bottom:1px solid var(--line);padding:0 1rem}.command-dialog input{width:100%;border:0;outline:0;background:transparent}.command-results{max-height:22rem;overflow:auto;padding:.45rem}.command-item{display:flex;width:100%;align-items:center;gap:.7rem;border:0;border-radius:.5rem;background:transparent;padding:.7rem;color:var(--muted);font-size:.78rem;text-align:left}.command-item.selected,.command-item:hover{background:var(--soft);color:var(--text)}.command-item svg{width:1rem}.command-item small{margin-left:auto;color:var(--muted)}.command-dialog footer{display:flex;gap:1rem;border-top:1px solid var(--line);padding:.55rem 1rem;color:var(--muted);font-size:.58rem}kbd{border:1px solid var(--line2);border-radius:.25rem;background:var(--raised);padding:.08rem .25rem;font-family:inherit}
.settings-dialog,.prompt-dialog{width:min(calc(100% - 2rem),33rem);border:1px solid var(--line2);border-radius:.9rem;background:var(--panel);padding:1.2rem;box-shadow:var(--shadow)}.settings-dialog header{display:flex;align-items:center;justify-content:space-between}.settings-dialog h2,.prompt-dialog h2{margin:.2rem 0 1rem;font:650 1.5rem Georgia}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.settings-grid button{display:flex;min-height:5rem;flex-direction:column;gap:.3rem;border:1px solid var(--line);border-radius:.65rem;background:var(--panel2);padding:.85rem;text-align:left}.settings-grid button:hover{border-color:var(--accent)}.settings-grid strong{font-size:.78rem}.settings-grid span{color:var(--muted);font-size:.65rem}.menu-dialog{position:fixed;right:17rem;top:3.5rem;width:11rem;border:1px solid var(--line2);border-radius:.65rem;background:var(--panel);padding:.35rem;box-shadow:var(--shadow)}.menu-dialog button{width:100%;border:0;border-radius:.4rem;background:transparent;padding:.55rem .65rem;color:var(--text);font-size:.72rem;text-align:left}.menu-dialog button:hover{background:var(--soft)}.menu-dialog hr{border:0;border-top:1px solid var(--line)}.danger-text{color:var(--danger)!important}.prompt-dialog input{width:100%;height:2.6rem;border:1px solid var(--line2);border-radius:.5rem;outline:0;background:var(--bg);padding:0 .7rem}.prompt-dialog>form>div{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.toast{position:fixed;z-index:100;left:50%;bottom:1.2rem;translate:-50% 1rem;border:1px solid var(--line2);border-radius:2rem;background:var(--raised);padding:.6rem 1rem;color:var(--text);font-size:.7rem;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow)}.toast.show{translate:-50% 0;opacity:1}.mobile-only{display:none}.backdrop{position:fixed;z-index:15;inset:0;background:#0008}
@media(max-width:1100px){.app-shell{grid-template-columns:3.5rem 17rem minmax(0,1fr)}.context-panel{display:none}.menu-dialog{right:1rem}.editor-view.split{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.mobile-only{display:grid}.app-shell{display:grid;grid-template-columns:3.2rem minmax(0,1fr)}.rail{grid-column:1}.sidebar{position:fixed;z-index:25;inset:0 auto 0 3.2rem;width:min(86vw,19rem);transform:translateX(-110%);box-shadow:var(--shadow);transition:.2s}.sidebar.open{transform:translateX(0)}.workspace{grid-column:2}.topbar{padding:0 .55rem}.breadcrumbs span,.breadcrumbs b,.save-state{display:none}.view-switch button{padding:0 .45rem}.document-head{padding:2rem 1.2rem .8rem}.note-body{padding-inline:1.2rem}.editor-view.split{grid-template-columns:1fr}.editor-view.split .editor-pane{display:none}.editor-view.split .preview-pane{display:block}.format-bar{width:calc(100% - 2rem)}.preview-pane{border-left:0;padding:2rem 1.25rem}.graph-view,.tags-view{padding:1.2rem}.graph-head{align-items:start;gap:1rem}.graph-stage{height:calc(100% - 8rem)}.graph-legend span:last-child{display:none}.settings-grid{grid-template-columns:1fr}.command-dialog{transform:translateY(-4vh)}}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Nyvera notebook identity, rich writing, and account UI */
.logo{width:2.55rem;height:2.55rem;border-radius:.55rem;background:#fff;padding:.12rem;box-shadow:0 5px 18px #0005;rotate:-1deg}
.logo img{width:100%;height:100%}
.account-button span{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1px solid var(--line2);border-radius:50%;background:var(--raised);color:var(--text);font-size:.65rem;font-weight:800}
.account-button.synced span{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.rich-editor{min-height:100%;cursor:text;outline:0}
.rich-editor:focus{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--soft) 12%,transparent),transparent)}
.rich-editor:empty:before{color:var(--muted);content:"Start writing…";pointer-events:none}
.auth-dialog{width:min(calc(100% - 2rem),27rem);border:1px solid var(--line2);border-radius:1rem;background:var(--panel);padding:1.35rem;color:var(--text);box-shadow:var(--shadow)}
.auth-dialog header{display:flex;align-items:center;justify-content:space-between}.auth-brand{display:flex;align-items:center;gap:.8rem}.auth-brand img{width:2.8rem;height:2.8rem;border-radius:.45rem;background:#fff}.auth-dialog h2{margin:.18rem 0 0;font:650 1.55rem Georgia}.auth-dialog>form>p{margin:.8rem 0 1.2rem;color:var(--muted);font-size:.75rem}
.auth-dialog label{display:flex;flex-direction:column;gap:.4rem;margin:.8rem 0;color:var(--muted);font-size:.68rem;font-weight:700}.auth-dialog input{height:2.75rem;border:1px solid var(--line2);border-radius:.55rem;outline:0;background:var(--bg);padding:0 .75rem;color:var(--text);font-size:.8rem}.auth-dialog input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.auth-submit,.sign-out-button{width:100%;height:2.8rem;border:0;border-radius:.55rem;background:var(--accent2);color:#fff;font-size:.78rem;font-weight:800}.auth-switch{width:100%;border:0;background:transparent;padding:.8rem;color:var(--accent);font-size:.7rem}.sign-out-button{background:var(--danger)}.auth-error{min-height:1rem!important;margin:.2rem 0 .55rem!important;color:var(--danger)!important}.sync-error{color:var(--danger)}
.markdown-body mark{border-radius:.2rem;background:#f3d86b;color:#242229;padding:.05rem .18rem}.callout{max-width:48rem;border:1px solid var(--line2);border-left:4px solid var(--accent);border-radius:.55rem;background:var(--soft);margin:1rem auto;padding:.75rem 1rem}.callout strong{color:var(--accent);font-size:.78rem;text-transform:capitalize}.callout p{margin:.3rem 0 0}.callout-warning{border-left-color:#e8a74f}.callout-tip{border-left-color:var(--green)}.footnote-ref{color:var(--accent);font-size:.7em}
.editor-view.preview-only{display:block;overflow:auto}.editor-view.preview-only .editor-pane{display:block;min-height:auto}.editor-view.preview-only .document-head{padding-bottom:.25rem}.editor-view.preview-only .format-bar,.editor-view.preview-only .note-body{display:none}.editor-view.preview-only .preview-pane{min-height:calc(100% - 10rem);border-left:0;overflow:visible;padding-top:1rem}

.conflict-dialog{width:min(calc(100% - 2rem),34rem);border:1px solid var(--line2);border-radius:1rem;background:var(--panel);padding:1.35rem;color:var(--text);box-shadow:var(--shadow)}
.conflict-dialog h2{margin:.35rem 0 .55rem;font:650 1.55rem Georgia}.conflict-dialog p{color:var(--muted);font-size:.78rem;line-height:1.6}
.conflict-items{display:flex;max-height:14rem;flex-direction:column;gap:.4rem;overflow:auto;margin:1rem 0}.conflict-items button{border:1px solid var(--line);border-radius:.5rem;background:var(--panel2);padding:.65rem .75rem;color:var(--text);font-size:.75rem;text-align:left}.conflict-items button:hover{border-color:var(--accent)}
.conflict-actions{display:flex;justify-content:flex-end;gap:.5rem}.save-state.sync-error{color:var(--danger)}
@media(max-width:760px){.save-state{display:inline;max-width:5.8rem;overflow:hidden;font-size:.55rem;text-overflow:ellipsis;white-space:nowrap}.top-actions{gap:.35rem}}

/* Nyvera / Vanta — quieter violet surfaces and a clearer writing workspace */
:root {
  color-scheme: dark;
  --bg: #100e17;
  --panel: #17141f;
  --panel2: #1e1a28;
  --raised: #262131;
  --line: #302a3a;
  --line2: #433a50;
  --text: #f2eef7;
  --muted: #a49cad;
  --accent: #ad91f5;
  --accent2: #8c6de0;
  --soft: #2b2340;
  --green: #6fc49b;
  --danger: #ec8797;
  --shadow: 0 24px 72px #07060b80;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
:root.light {
  color-scheme: light;
  --bg: #f2eff7;
  --panel: #fbfaff;
  --panel2: #f5f2fa;
  --raised: #fff;
  --line: #e6e0ed;
  --line2: #d6cde1;
  --text: #292431;
  --muted: #766e80;
  --accent: #7958c9;
  --accent2: #6949b5;
  --soft: #eee8f8;
  --green: #39875f;
  --danger: #bf4e60;
  --shadow: 0 24px 72px #35244724;
}
html, body { min-width: 320px; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.5; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [contenteditable="true"]:focus-visible,
input:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 75%, white); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.app-shell { grid-template-columns: 4rem 16.75rem minmax(0, 1fr) 16.75rem; background: var(--bg); }
.rail { z-index: 30; gap: .2rem; border-color: var(--line); background: var(--bg); padding: .9rem .55rem; }
.logo { width: 2.55rem; height: 2.55rem; border: 0; border-radius: .8rem; background: transparent; padding: 0; box-shadow: none; rotate: 0deg; }
.logo img { width: 100%; height: 100%; }
.rail nav { gap: .35rem; margin-top: 1.4rem; }
.rail-button { width: 2.55rem; height: 2.55rem; border: 1px solid transparent; border-radius: .75rem; color: var(--muted); }
.rail-button svg { width: 1.1rem; height: 1.1rem; }
.rail-button:hover, .small-icon:hover { background: var(--panel2); color: var(--text); }
.rail-button.active { border-color: color-mix(in srgb, var(--accent) 17%, transparent); background: var(--soft); color: var(--accent); box-shadow: none; }
.account-button.synced span { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 12%, transparent); }
.account-button span { width: 1.7rem; height: 1.7rem; border-color: var(--line2); background: var(--panel2); font-size: .66rem; }
.guest-mode .account-button span { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); color: var(--accent); }
.sidebar { z-index: 20; border-color: var(--line); background: var(--panel); padding: 1.35rem .9rem .8rem; }
.sidebar-header { min-height: 3rem; padding: 0 .35rem 1.1rem; }
.sidebar-header strong { max-width: 12.5rem; overflow: hidden; color: var(--text); font-size: .84rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { color: var(--accent); font-size: .62rem; font-weight: 750; letter-spacing: .14em; }
.sidebar-header .eyebrow { color: var(--muted); }
.sidebar-header .eyebrow span, .auth-brand .eyebrow span { color: var(--accent); }
.small-icon { width: 2.2rem; height: 2.2rem; border: 1px solid transparent; border-radius: .65rem; color: var(--muted); }
.small-icon:hover { border-color: var(--line); }
.small-icon svg { width: 1rem; height: 1rem; }
.new-note { height: 2.65rem; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: .7rem; background: var(--accent2); padding: 0 .85rem; color: #fff; font-size: .78rem; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.new-note:hover { background: color-mix(in srgb, var(--accent2) 88%, white); transform: translateY(-1px); }
.new-note kbd { border: 0; background: transparent; color: #ffffffb8; }
.search-box { height: 2.55rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--bg); margin: .8rem 0 1rem; padding: 0 .65rem; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.search-box input { font-size: .75rem; }
.search-box kbd { border: 0; background: transparent; color: var(--muted); }
.explorer-label, .panel-heading { color: var(--muted); font-size: .61rem; letter-spacing: .12em; }
.explorer-label { padding: .35rem .45rem .65rem; }
.explorer-label span:last-child, .panel-heading span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.file-tree { padding: 0 .08rem; scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }
.folder-block { margin: 0 0 .5rem; }
.folder-row, .note-row { border-radius: .55rem; }
.folder-row { height: 2.1rem; color: var(--muted); font-size: .72rem; font-weight: 650; }
.folder-row:hover { background: color-mix(in srgb, var(--panel2) 65%, transparent); color: var(--text); }
.folder-row svg { width: .8rem; transition: rotate .12s ease; }
.note-row { min-height: 2.3rem; padding: .45rem .5rem .45rem 1.45rem; color: var(--muted); font-size: .75rem; }
.note-row:hover { background: var(--panel2); color: var(--text); }
.note-row.active { background: var(--soft); color: var(--text); }
.note-row.active:before { left: .25rem; width: 2px; height: 1rem; background: var(--accent); }
.note-row svg { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.pin-dot { background: var(--accent); }
.empty-tree { margin: .25rem 0; padding: 1.3rem .8rem; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.sidebar-footer { min-height: 2.8rem; gap: .6rem; border-color: var(--line); padding: .75rem .45rem .2rem; color: var(--muted); font-size: .64rem; }
.status-dot { flex: 0 0 auto; background: var(--green); box-shadow: none; }
.guest-mode .status-dot { background: var(--accent); }
.workspace { position: relative; border-right: 1px solid var(--line); background: var(--bg); }
.topbar { z-index: 2; min-height: 3.65rem; border-color: var(--line); background: var(--panel); padding: 0 1.35rem; }
.breadcrumbs { gap: .65rem; font-size: .7rem; }
.breadcrumbs b { color: var(--line2); }
.breadcrumbs strong { font-weight: 650; }
.top-actions { gap: .75rem; }
.save-state { color: var(--muted); font-size: .65rem; }
.guest-mode .save-state { color: var(--accent); }
.view-switch { gap: .1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); padding: .18rem; }
.view-switch button { min-width: 4.1rem; height: 1.8rem; border-radius: .42rem; font-size: .66rem; }
.view-switch button.active { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px #0002; }
.editor-view { background: var(--bg); }
.editor-view.preview-only { display: block; overflow: auto; scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }
.editor-view.preview-only .editor-pane { display: block; min-height: auto; }
.editor-view.preview-only .document-head { width: min(100%, 58rem); padding: clamp(2.5rem, 7vh, 5rem) clamp(2rem, 8vw, 6rem) .8rem; }
.note-title { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.15rem, 4vw, 3.15rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.13; }
.note-title::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.document-meta { gap: .9rem; margin-top: .9rem; color: var(--muted); font-size: .67rem; }
.document-meta span + span:before { margin-right: .85rem; color: var(--line2); content: "·"; }
.tag-row { gap: .35rem; margin-top: .85rem; }
.tag-pill { border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); background: var(--soft); padding: .24rem .56rem; color: var(--accent); font-size: .63rem; }
.editor-view.preview-only .format-bar, .editor-view.preview-only .note-body { display: none; }
.editor-view.preview-only .preview-pane { width: min(100%, 58rem); min-height: calc(100% - 10rem); border: 0; overflow: visible; margin: 0 auto; padding: .75rem clamp(2rem, 8vw, 6rem) 5rem; }
.rich-editor { cursor: text; outline: 0; }
.rich-editor:focus { background: transparent; }
.rich-editor:empty:before { color: var(--muted); content: "Start writing your note…"; }
.format-bar { width: min(calc(100% - 3rem), 49rem); gap: .15rem; border-radius: .65rem; background: var(--panel); margin: 0 auto .65rem; padding: .3rem; }
.format-bar button { min-width: 2rem; height: 1.95rem; border-radius: .42rem; color: var(--muted); }
.format-bar button:hover { background: var(--soft); color: var(--accent); }
.note-body { width: min(100%, 58rem); padding: .8rem clamp(2rem, 8vw, 6rem) 4rem; font-size: .93rem; line-height: 1.85; }
.preview-pane { border-color: var(--line); scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }
.markdown-body { font-size: .97rem; line-height: 1.82; }
.markdown-body > * { max-width: 48rem; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.025em; }
.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { border-color: var(--line); font-size: 1.45rem; }
.markdown-body h3 { font-size: 1.15rem; }
.markdown-body p { color: color-mix(in srgb, var(--text) 90%, var(--muted)); }
.markdown-body a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent); text-underline-offset: 2px; }
.markdown-body .wiki-link { background: var(--soft); color: var(--accent); text-decoration: none; }
.markdown-body blockquote { border-color: var(--accent); color: var(--muted); }
.markdown-body pre, .markdown-body code { border-color: var(--line); background: var(--panel); }
.markdown-body th { background: var(--panel2); }
.context-panel { border-color: var(--line); background: var(--panel); padding: 1.5rem 1rem; scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }
.context-panel section { border-color: var(--line); padding: .65rem 0 1.05rem; margin-bottom: .7rem; }
.panel-heading { padding: 0 .35rem .6rem; }
.backlinks button, .outline button { border-radius: .45rem; padding: .48rem .5rem; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.backlinks button:hover, .outline button:hover { background: var(--panel2); color: var(--text); }
.panel-empty { padding: .6rem .4rem; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.properties div { padding: .42rem .35rem; color: var(--muted); font-size: .65rem; }
.graph-view, .tags-view { padding: clamp(2rem, 4vw, 3.5rem); }
.graph-head { align-items: center; margin: 0 auto 1.5rem; max-width: 74rem; }
.graph-head h1, .collection-head h1 { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 600; letter-spacing: -.035em; }
.graph-head p, .collection-head p { margin-top: .35rem; color: var(--muted); font-size: .78rem; }
.secondary-button, .primary-button { border-radius: .6rem; background: var(--panel2); padding: .65rem .9rem; font-size: .7rem; transition: border-color .15s, background .15s; }
.secondary-button:hover { border-color: var(--accent); background: var(--soft); }
.primary-button { border-color: var(--accent2); background: var(--accent2); }
.primary-button:hover, .auth-submit:hover { background: color-mix(in srgb, var(--accent2) 88%, white); }
.graph-stage { width: min(100%, 74rem); height: calc(100% - 6rem); min-height: 28rem; border-color: var(--line); border-radius: .9rem; background: var(--panel); margin: 0 auto; }
.graph-legend { border-color: var(--line); border-radius: .55rem; background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--muted); }
.tag-cloud { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; max-width: 74rem; margin: 2rem auto 0; }
.tag-card { min-height: 4.5rem; border-color: var(--line); border-radius: .7rem; background: var(--panel); padding: 1rem 1.1rem; transition: border-color .15s, transform .15s; }
.tag-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
dialog { border-color: var(--line2); border-radius: .95rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: #09070ebd; backdrop-filter: blur(5px); }
.command-dialog { border-radius: .9rem; }
.command-dialog form > label { border-color: var(--line); }
.command-dialog input { color: var(--text); }
.command-item { border-radius: .55rem; }
.command-item.selected, .command-item:hover { background: var(--soft); color: var(--text); }
.command-dialog footer { border-color: var(--line); }
kbd { border-color: var(--line2); border-radius: .3rem; background: var(--raised); color: var(--muted); }
.settings-dialog, .prompt-dialog { border-radius: .95rem; padding: 1.4rem; }
.settings-dialog header { margin-bottom: .55rem; }
.settings-dialog h2, .prompt-dialog h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.02em; }
.settings-grid { gap: .65rem; }
.settings-grid button { min-height: 5.2rem; border-color: var(--line); border-radius: .7rem; background: var(--panel2); padding: .9rem; transition: border-color .15s, background .15s; }
.settings-grid button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--soft); }
.settings-grid strong { font-size: .74rem; font-weight: 650; }
.settings-grid span { font-size: .65rem; line-height: 1.5; }
.product-attribution { border-top: 1px solid var(--line); margin: 1rem 0 0; padding: .9rem .2rem 0; color: var(--muted); font-size: .67rem; line-height: 1.65; text-align: center; }
.product-attribution strong { color: var(--text); font-weight: 650; }
.menu-dialog { right: 17rem; top: 4.1rem; border-radius: .75rem; padding: .35rem; }
.menu-dialog button { border-radius: .45rem; padding: .62rem .7rem; font-size: .7rem; }
.menu-dialog button:hover { background: var(--soft); }
.menu-dialog hr { border-color: var(--line); }
.prompt-dialog input, .auth-dialog input { border-color: var(--line2); border-radius: .6rem; background: var(--bg); }
.prompt-dialog input:focus, .auth-dialog input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent); }
.toast { border-color: var(--line2); border-radius: .65rem; background: var(--raised); padding: .65rem .9rem; font-size: .7rem; }
.auth-dialog { width: min(calc(100% - 2rem), 29rem); border-radius: 1rem; padding: 1.5rem; }
.auth-dialog header { gap: 1rem; }
.auth-brand { gap: .9rem; }
.auth-brand img { width: 2.8rem; height: 2.8rem; border-radius: .75rem; background: transparent; }
.auth-dialog h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 600; letter-spacing: -.025em; }
.auth-dialog > form > p { font-size: .76rem; line-height: 1.65; }
.auth-dialog label { gap: .42rem; font-size: .67rem; }
.auth-dialog input { height: 2.9rem; padding: 0 .8rem; font-size: .78rem; }
.dialog-close { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel2); color: var(--muted); }
.dialog-close:hover { border-color: var(--line2); background: var(--raised); color: var(--text); }
.auth-submit, .sign-out-button { height: 2.9rem; border-radius: .65rem; background: var(--accent2); font-size: .75rem; transition: background .15s; }
.auth-switch { padding: .9rem .5rem .3rem; color: var(--accent); font-size: .7rem; }
.auth-switch:hover { color: var(--text); }
.conflict-dialog { border-radius: 1rem; }
.conflict-dialog h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
.conflict-items button { border-color: var(--line); border-radius: .55rem; background: var(--panel2); }
.conflict-items button:hover { border-color: var(--accent); }
.backdrop { background: #09070eb8; backdrop-filter: blur(2px); }
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 4rem 16rem minmax(0, 1fr); }
  .context-panel { display: none; }
  .menu-dialog { right: 1rem; }
  .editor-view.split { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .rail { grid-column: 1; }
  .sidebar { inset: 0 auto 0 3.6rem; width: min(86vw, 19rem); padding-top: 1rem; }
  .workspace { grid-column: 2; border-right: 0; }
  .topbar { min-height: 3.45rem; padding: 0 .7rem; }
  .top-actions { gap: .4rem; }
  .save-state { max-width: 6rem; overflow: hidden; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
  .view-switch button { min-width: 3.5rem; padding: 0 .4rem; }
  .editor-view.preview-only .document-head { padding: 2.2rem 1.35rem .65rem; }
  .editor-view.preview-only .preview-pane { padding: .65rem 1.35rem 4rem; }
  .document-meta { flex-wrap: wrap; gap: .4rem; }
  .document-meta span + span:before { margin-right: .4rem; }
  .note-body { padding: .7rem 1.35rem 3rem; }
  .format-bar { width: calc(100% - 2.2rem); }
  .editor-view.split { grid-template-columns: 1fr; }
  .editor-view.split .editor-pane { display: none; }
  .editor-view.split .preview-pane { display: block; }
  .graph-view, .tags-view { padding: 1.25rem; }
  .graph-head { align-items: start; gap: .8rem; }
  .graph-head p { max-width: 26rem; }
  .graph-stage { height: calc(100% - 7rem); min-height: 22rem; }
  .graph-legend { right: .5rem; bottom: .5rem; }
  .graph-legend span:last-child { display: none; }
  .settings-dialog, .prompt-dialog { padding: 1.1rem; }
  .settings-grid { grid-template-columns: 1fr; }
  .command-dialog { transform: translateY(-3vh); }
}
@media (max-width: 420px) {
  .topbar { padding: 0 .45rem; }
  .top-actions { gap: .25rem; }
  .save-state { max-width: 4.6rem; }
  .view-switch button { min-width: 2.9rem; font-size: .6rem; }
  .breadcrumbs strong { max-width: 8.5rem; }
  .auth-dialog { padding: 1.15rem; }
  .graph-head { flex-direction: column; }
}

/* Keep settings attached to its rail control instead of covering the workspace. */
.settings-dialog {
  position: fixed;
  z-index: 80;
  inset: auto;
  width: min(23rem, calc(100vw - 4.7rem));
  max-height: min(34rem, calc(100dvh - 1.5rem));
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: left bottom;
}
.settings-dialog header {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--panel);
  padding: .1rem 0 .35rem;
}
.settings-dialog[open] { animation: settings-panel-in .18s cubic-bezier(.2,.75,.25,1) both; }
@keyframes settings-panel-in {
  from { opacity: 0; transform: translateY(.35rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 361px) {
  .settings-dialog .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .settings-dialog .settings-grid { grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }
.settings-grid button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }
.announcement-banner { display: flex; align-items: flex-start; gap: .7rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel)); padding: .7rem 1rem; }
.announcement-mark { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: .5rem; background: var(--soft); color: var(--accent); font: 650 .72rem Georgia,serif; }
.announcement-banner > div { min-width: 0; flex: 1; }
.announcement-banner strong { font-size: .68rem; font-weight: 650; }
.announcement-banner p { margin: .22rem 0 0; color: var(--muted); font-size: .63rem; line-height: 1.5; white-space: pre-wrap; }
.announcement-banner .small-icon { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; font-size: 1rem; }
.setup-dialog, .feedback-dialog { width: min(calc(100% - 2rem), 31rem); max-height: min(90dvh, 48rem); overflow: auto; border: 1px solid var(--line2); border-radius: 1rem; background: var(--panel); padding: 1.45rem; color: var(--text); box-shadow: var(--shadow); }
.setup-dialog header, .feedback-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setup-dialog h2, .feedback-dialog h2 { margin: .18rem 0 0; font: 600 1.48rem Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
.setup-intro, .feedback-intro { margin: .85rem 0 1rem; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.setup-dialog label, .feedback-dialog label { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; color: var(--muted); font-size: .65rem; font-weight: 650; }
.setup-dialog input, .setup-dialog select, .feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea { width: 100%; min-height: 2.7rem; border: 1px solid var(--line2); border-radius: .58rem; outline: 0; background: var(--bg); padding: .65rem .75rem; color: var(--text); font-size: .72rem; }
.setup-dialog textarea, .feedback-dialog textarea { min-height: 7rem; resize: vertical; line-height: 1.65; }
.setup-dialog input:focus, .setup-dialog select:focus, .feedback-dialog input:focus, .feedback-dialog select:focus, .feedback-dialog textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.setup-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.setup-actions button { min-height: 2.65rem; border-radius: .58rem; padding: 0 .85rem; font-size: .68rem; }
.setup-actions .secondary-button { border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); }
.setup-actions .auth-submit { border: 0; background: var(--accent2); color: var(--text); }
.auth-profile-name { border: 1px solid var(--line); border-radius: .65rem; background: var(--panel2); margin: .9rem 0; padding: .7rem .8rem; color: var(--text); font-size: .75rem; font-weight: 650; }
.feedback-dialog .auth-error { min-height: .6rem; color: var(--danger); font-size: .66rem; }
.feedback-dialog .auth-submit { width: 100%; height: 2.8rem; border: 0; border-radius: .6rem; background: var(--accent2); color: var(--text); font-size: .72rem; }
.privacy-indicator { position: fixed; z-index: 110; top: .65rem; right: 1rem; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius: 2rem; background: color-mix(in srgb,var(--panel) 92%,transparent); padding: .42rem .7rem; color: var(--accent); font-size: .59rem; font-weight: 700; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.privacy-indicator svg { width: .85rem; height: .85rem; }
@media (max-width: 520px) { .announcement-banner { padding: .6rem .65rem; } .announcement-banner p { font-size: .59rem; } .setup-dialog,.feedback-dialog { padding: 1.1rem; } .privacy-indicator { top: .45rem; right: .5rem; } }

/* Project Atlas: workspace controls, multi-note panes, and an open-ended canvas. */
:root { --app-height: 100dvh; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
html, body { overscroll-behavior: none; }
.app-shell { position: relative; top: var(--app-top, 0px); height: var(--app-height, 100dvh); }
.workspace { overflow: hidden; }
.workspace-tools { display: flex; min-height: 3.2rem; flex: 0 0 auto; align-items: center; gap: .45rem; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); padding: .4rem .8rem; scrollbar-width: none; }
.workspace-tools::-webkit-scrollbar { display: none; }
.workspace-picker { display: flex; min-width: 0; align-items: center; }
.workspace-picker select { width: auto; max-width: min(13rem, 38vw); min-height: 2.35rem; border: 1px solid var(--line); border-radius: .58rem; outline: 0; background: var(--bg); padding: 0 .7rem; color: var(--text); font-size: .75rem; font-weight: 650; }
.workspace-picker select:focus-visible, .workspace-tool:focus-visible, .workspace-tab button:focus-visible, .pane-new-note:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.workspace-tool { min-height: 2.35rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: .58rem; background: var(--panel2); padding: 0 .72rem; color: var(--muted); font-size: .69rem; font-weight: 650; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.workspace-tool:hover, .workspace-tool[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: var(--soft); color: var(--text); }
.workspace-panes { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--bg); }
.workspace-panes.split-workspace[data-direction="horizontal"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-panes.split-workspace[data-direction="vertical"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.workspace-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--bg); }
.workspace-pane + .workspace-pane { border-left: 1px solid var(--line); }
.workspace-panes[data-direction="vertical"] .workspace-pane + .workspace-pane { border-top: 1px solid var(--line); border-left: 0; }
.workspace-pane-bar { display: flex; min-width: 0; min-height: 2.8rem; flex: 0 0 auto; align-items: stretch; gap: .3rem; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--panel); padding: .25rem .35rem .2rem .55rem; }
.workspace-tabs { display: flex; min-width: 0; flex: 1 1 auto; align-items: stretch; gap: .25rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.workspace-tab { display: flex; min-width: 0; max-width: 14rem; flex: 0 1 auto; align-items: stretch; border: 1px solid transparent; border-radius: .5rem .5rem 0 0; background: transparent; }
.workspace-tab:has([aria-selected="true"]) { border-color: var(--line); border-bottom-color: var(--panel); background: var(--bg); }
.workspace-tab-open, .workspace-tab-close, .pane-new-note { border: 0; background: transparent; color: var(--muted); }
.workspace-tab-open { min-width: 2.5rem; max-width: 12rem; overflow: hidden; padding: 0 .62rem; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tab [aria-selected="true"] { color: var(--text); font-weight: 650; }
.workspace-tab-close { width: 2rem; flex: 0 0 auto; border-radius: .35rem; font-size: 1.05rem; }
.workspace-tab-close:hover { background: var(--soft); color: var(--text); }
.pane-new-note { width: 2.25rem; flex: 0 0 auto; border: 1px solid transparent; border-radius: .5rem; color: var(--accent); font-size: 1.2rem; }
.pane-new-note:hover { border-color: var(--line); background: var(--soft); }
.workspace-pane .editor-view { width: 100%; min-height: 0; flex: 1 1 auto; }
.workspace-pane .document-head { padding-top: clamp(1.5rem, 5vh, 3.5rem); }
.workspace-pane .note-title { font-size: clamp(1.8rem, 4vw, 3rem); }
.workspace-pane .note-body { min-height: 8rem; }
.workspace-pane .editor-view.preview-only { overflow: auto; }
.workspace-pane .editor-view.preview-only .preview-pane { min-height: 100%; }
.workspace-panes[data-direction="vertical"] .workspace-pane .document-head { padding-top: 1.5rem; }
.canvas-view { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; padding: clamp(1rem, 3vw, 2rem); }
.canvas-head { display: flex; min-height: 4.8rem; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 .8rem; }
.canvas-head h1 { margin: .2rem 0; font: 600 clamp(1.55rem, 2.5vw, 2rem) Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.canvas-head p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; }
.canvas-actions { display: flex; flex: 0 0 auto; gap: .45rem; }
.canvas-actions button { min-height: 2.6rem; }
.canvas-stage { position: relative; min-height: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; background-color: var(--panel); background-image: radial-gradient(color-mix(in srgb, var(--line2) 76%, transparent) 1px, transparent 1px); background-position: 0 0; background-size: 22px 22px; touch-action: none; }
.canvas-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.canvas-links { position: absolute; z-index: 1; inset: 0; overflow: visible; pointer-events: none; }
.canvas-links line { stroke: color-mix(in srgb, var(--accent) 62%, var(--line2)); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: .68; }
.canvas-card { position: absolute; z-index: 2; display: flex; width: 260px; height: 166px; flex-direction: column; overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); padding: 14px 15px 12px; box-shadow: 0 9px 25px #09070c24; cursor: grab; }
.canvas-card:active { cursor: grabbing; }
.canvas-card.current-canvas-card { border-color: color-mix(in srgb, var(--accent) 68%, var(--line2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent), 0 12px 30px #09070c30; }
.canvas-card-open { display: -webkit-box; overflow: hidden; border: 0; background: transparent; padding: 0; color: var(--text); font: 600 16px/1.35 Georgia, "Times New Roman", serif; text-align: left; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.canvas-card p { display: -webkit-box; overflow: hidden; margin: .55rem 0 auto; color: var(--muted); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.canvas-card > span { overflow: hidden; border-top: 1px solid var(--line); padding-top: .5rem; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-hint { position: absolute; z-index: 3; right: .75rem; bottom: .75rem; border: 1px solid var(--line); border-radius: .5rem; background: color-mix(in srgb, var(--panel) 92%, transparent); padding: .42rem .6rem; color: var(--muted); font-size: .62rem; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 761px) {
  .workspace-panes.split-workspace[data-direction="horizontal"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-pane .document-head { padding-inline: 1.4rem; }
  .workspace-pane .note-body { padding-inline: 1.4rem; }
}
@media (min-width: 761px) {
  .workspace-panes.split-workspace .workspace-pane .document-head { padding-inline: 1.35rem; }
  .workspace-panes.split-workspace .workspace-pane .note-title { font-size: clamp(1.65rem, 2.7vw, 2.15rem); }
  .workspace-panes.split-workspace .workspace-pane .note-body { padding-inline: 1.35rem; }
}
@media (max-width: 760px) {
  html, body { height: var(--app-height, 100dvh); }
  .app-shell { height: var(--app-height, 100dvh); min-height: 0; grid-template-columns: 3.55rem minmax(0, 1fr); }
  .rail { padding: .55rem .25rem; }
  .rail nav, .rail-bottom { gap: .45rem; }
  .rail-button { width: 2.85rem; height: 2.85rem; }
  .topbar { min-height: 3.1rem; flex: 0 0 auto; padding-inline: .45rem; }
  .breadcrumbs, .top-actions .save-state { display: none; }
  .top-actions { min-width: 0; gap: .25rem; }
  .view-switch button { min-width: 3.6rem; min-height: 2rem; font-size: .68rem; }
  .workspace-tools { min-height: 3.35rem; gap: .35rem; padding: .38rem .45rem; }
  .workspace-picker select, .workspace-tool { min-height: 2.55rem; font-size: .72rem; }
  .workspace-picker select { max-width: 36vw; }
  .workspace-tools .mobile-pane-switch { display: block; }
  .workspace-panes.split-workspace[data-direction="horizontal"], .workspace-panes.split-workspace[data-direction="vertical"] { display: flex; flex-direction: column; }
  .workspace-pane { width: 100%; min-height: 0; flex: 1 1 auto; }
  .workspace-pane + .workspace-pane, .workspace-panes[data-direction="vertical"] .workspace-pane + .workspace-pane { border-top: 0; border-left: 0; }
  .workspace-pane.mobile-inactive { display: none; }
  .workspace-pane-bar { min-height: 3rem; padding-left: .4rem; }
  .workspace-tab { min-height: 2.55rem; max-width: 68vw; }
  .workspace-tab-open { min-height: 2.5rem; max-width: calc(68vw - 2rem); font-size: .74rem; }
  .workspace-tab-close, .pane-new-note { width: 2.6rem; min-height: 2.55rem; font-size: 1.25rem; }
  .workspace-pane .editor-view.split { display: flex; flex-direction: column; overflow: auto; }
  .workspace-pane .editor-view.split .editor-pane, .workspace-pane .editor-view.split .preview-pane { display: flex; min-height: 45dvh; flex: 1 0 45dvh; }
  .workspace-pane .editor-view.split .editor-pane { border-bottom: 1px solid var(--line); }
  .workspace-pane .editor-view.split .preview-pane { overflow: auto; border-left: 0; padding: 1.5rem 1.1rem 3rem; }
  .workspace-pane .document-head { padding: 1.6rem 1.1rem .8rem; }
  .workspace-pane .note-title { font-size: clamp(1.9rem, 8vw, 2.65rem); }
  .workspace-pane .note-body { width: 100%; padding: .5rem 1.1rem 2.4rem; font-size: 16px; }
  .workspace-pane .format-bar { width: calc(100% - 1.2rem); margin-bottom: .45rem; }
  .workspace-pane .format-bar button { min-width: 2.55rem; height: 2.5rem; font-size: .76rem; }
  .workspace-pane .editor-view.preview-only .document-head { padding-top: 1.7rem; }
  .workspace-pane .editor-view.preview-only .preview-pane { min-height: 100%; padding: .6rem 1.1rem 4rem; }
  .workspace-pane .rich-editor { font-size: 1rem; }
  .workspace-pane .tag-pill { min-height: 2rem; padding: .35rem .7rem; font-size: .72rem; }
  .canvas-view { padding: .75rem; }
  .canvas-head { align-items: flex-start; gap: .5rem; padding: .15rem .1rem .65rem; }
  .canvas-head p { max-width: 16rem; font-size: .66rem; line-height: 1.45; }
  .canvas-actions { gap: .3rem; }
  .canvas-actions button { min-height: 2.6rem; padding: 0 .6rem; font-size: .66rem; }
  .canvas-stage { border-radius: .65rem; background-size: 24px 24px; }
  .canvas-card { width: 244px; height: 166px; }
  .canvas-hint { right: .45rem; bottom: .45rem; max-width: calc(100% - .9rem); font-size: .6rem; }
  .command-dialog, .auth-dialog, .setup-dialog, .feedback-dialog, .conflict-dialog { max-height: calc(var(--app-height, 100dvh) - 1rem); overflow: auto; overscroll-behavior: contain; }
  .command-dialog { transform: none; }
  .setup-dialog input, .setup-dialog select, .feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea, .auth-dialog input, .prompt-dialog input, .command-dialog input { font-size: 16px; }
  .settings-dialog { width: min(23rem, calc(100vw - 4.25rem)); max-height: calc(var(--app-height, 100dvh) - 1rem); }
  .settings-grid button, .setup-actions button, .secondary-button, .primary-button { min-height: 2.75rem; }
  .toast { bottom: max(.65rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 5rem); text-align: center; }
}
@media (max-width: 420px) {
  .app-shell { grid-template-columns: 3.3rem minmax(0, 1fr); }
  .rail-button { width: 2.65rem; height: 2.65rem; }
  .workspace-tools { gap: .28rem; padding-inline: .35rem; }
  .workspace-tool { padding-inline: .58rem; }
  .workspace-picker select { max-width: 32vw; padding-inline: .5rem; }
  .canvas-head { flex-direction: column; }
  .workspace-pane .note-title { font-size: clamp(1.05rem, 5.5vw, 1.5rem); letter-spacing: -.03em; }
}
@media (max-height: 540px) and (max-width: 760px) {
  .workspace-tools { min-height: 2.9rem; }
  .workspace-pane-bar { min-height: 2.55rem; }
  .workspace-pane .document-head { padding-top: .8rem; }
  .workspace-pane .editor-view.split .editor-pane, .workspace-pane .editor-view.split .preview-pane { min-height: 35dvh; flex-basis: 35dvh; }
}
@media (max-width: 760px) {
  body.keyboard-open .topbar { min-height: 2.7rem; }
  body.keyboard-open .workspace-tools { min-height: 2.7rem; padding-block: .2rem; }
  body.keyboard-open .workspace-pane-bar { min-height: 2.35rem; }
  body.keyboard-open .workspace-pane .document-head { padding-top: .55rem; padding-bottom: .35rem; }
  body.keyboard-open .workspace-pane .document-meta, body.keyboard-open .workspace-pane .tag-row { display: none; }
  body.keyboard-open .workspace-pane .format-bar { margin-bottom: .3rem; }
  body.keyboard-open .workspace-pane .format-bar button { height: 2.25rem; }
}

/* Tablet header keeps the current note readable beside the editor controls. */
@media (max-width: 900px) and (min-width: 761px) {
  .topbar { gap: .65rem; padding-inline: .85rem; }
  .breadcrumbs { min-width: 0; flex: 1 1 auto; }
  .breadcrumbs span, .breadcrumbs b { display: none; }
  .breadcrumbs strong { max-width: 100%; }
  .top-actions { min-width: 0; flex: 0 0 auto; gap: .4rem; }
  .save-state { display: none; }
}

/* Workspace controls stay in the viewport on narrow phones. */
@media (max-width: 760px) {
  .workspace-tools,
  .workspace-tools.split-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(2.65rem, auto);
    align-content: center;
    gap: .3rem;
    overflow: visible;
    padding: .38rem .4rem;
  }
  .workspace-tools > .workspace-picker,
  .workspace-tools > .workspace-tool { width: 100%; min-width: 0; }
  .workspace-tools > .workspace-picker { min-width: 0; }
  .workspace-tools .workspace-picker select {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-inline: .45rem;
  }
  .workspace-tools .workspace-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: .3rem;
    font-size: clamp(.6rem, 2.6vw, .72rem);
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

/* One calm interaction language for buttons and touch controls. */
button {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease, transform .14s ease;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .54; transform: none; }

/* Atlas design pass: quieter surfaces, stronger type hierarchy, and consistent controls. */
:root {
  --bg: #100e17;
  --panel: #17141f;
  --panel2: #1d1a27;
  --raised: #262232;
  --line: #302a3b;
  --line2: #443b52;
  --text: #f3eff8;
  --muted: #a59cab;
  --accent: #b29bf6;
  --accent2: #8069d9;
  --soft: #2b2440;
  --green: #6ec59c;
  --danger: #e78092;
  --shadow: 0 24px 70px #07060bc2;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
:root.light {
  --bg: #f4f1f8;
  --panel: #fcfbfe;
  --panel2: #f5f2f8;
  --raised: #fff;
  --line: #e5dfea;
  --line2: #d4cbdc;
  --text: #282430;
  --muted: #746d7c;
  --accent: #7659c6;
  --accent2: #654ab3;
  --soft: #ede7f7;
  --green: #39815c;
  --danger: #bd4c60;
  --shadow: 0 24px 70px #30233d20;
}
html, body { min-width: 320px; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.5; }
button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .54; transform: none; }
button:focus-visible, a:focus-visible, [contenteditable="true"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.app-shell { grid-template-columns: 4rem 16.75rem minmax(0, 1fr) 16.75rem; background: var(--bg); }
.rail { padding-block: max(.9rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-bottom)); }
.rail nav { margin-top: 1.2rem; }
.rail-button { width: 2.7rem; height: 2.7rem; border-radius: .8rem; }
.rail-button svg { width: 1.08rem; height: 1.08rem; }
.logo { width: 2.55rem; height: 2.55rem; }
.sidebar { padding-block: max(1.2rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-bottom)); }
.sidebar-header strong { letter-spacing: -.01em; }
.sidebar-footer { line-height: 1.4; }
.new-note { height: 2.8rem; border-radius: .72rem; }
.new-note:hover { background: color-mix(in srgb, var(--accent2) 88%, white); }
.search-box { height: 2.7rem; }
.note-row, .folder-row { min-height: 2.6rem; }
.workspace { border-color: var(--line); }
.topbar { min-height: 3.8rem; padding-inline: 1.2rem; }
.view-switch { padding: .2rem; }
.view-switch button { min-height: 2rem; }
.save-state { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-tools { gap: .45rem; }
.workspace-picker select, .workspace-tool { min-height: 2.55rem; border-radius: .62rem; }
.workspace-tool { font-size: .7rem; }
.workspace-tab { border-radius: .6rem .6rem 0 0; }
.workspace-tab-open { min-height: 2.4rem; }
.workspace-tab-close { min-width: 2.35rem; min-height: 2.35rem; }
.pane-new-note { min-width: 2.5rem; min-height: 2.5rem; }
.workspace-pane .editor-view { background: var(--bg); }
.workspace-pane .note-title { line-height: 1.16; }
.workspace-pane .note-body { font-size: 1rem; line-height: 1.85; }
.workspace-pane .format-bar { min-height: 2.8rem; }
.workspace-pane .format-bar button { min-width: 2.25rem; min-height: 2.2rem; }
.rich-editor { caret-color: var(--accent); }
.rich-editor:focus { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.task-list input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0 .35rem 0 0; vertical-align: -.12em; accent-color: var(--accent2); cursor: pointer; }
.context-hidden { grid-template-columns: 4rem 16.75rem minmax(0, 1fr); }
.context-hidden .context-panel { display: none; }
.context-panel { padding-top: 1rem; }
.context-panel-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); padding: .35rem .15rem .8rem; margin-bottom: .5rem; }
.context-panel-header > div { display: flex; flex-direction: column; gap: .12rem; }
.context-panel-header strong { font-size: .8rem; font-weight: 650; }
.graph-stage { touch-action: none; }
#graphCanvas { touch-action: none; }
.canvas-card { touch-action: none; }
.canvas-card-open { min-height: 2.7rem; }
.canvas-hint { max-width: calc(100% - 1.5rem); line-height: 1.45; }
.tag-card { min-height: 4.8rem; }
.settings-dialog { position: fixed; max-width: calc(100vw - 1.5rem); max-height: min(42rem, calc(100dvh - 1.5rem)); overflow: auto; overscroll-behavior: contain; margin: 0; }
.settings-dialog header { position: sticky; top: -1.4rem; z-index: 1; background: var(--panel); padding: .1rem 0 .4rem; }
.settings-grid button { min-height: 5.1rem; }
.settings-grid button:focus-visible { box-shadow: var(--focus-ring); }
.dialog-close { width: 2.75rem; height: 2.75rem; }
.setup-progress-row { display: flex; align-items: center; gap: .7rem; margin: .9rem 0 1.1rem; color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; }
.setup-progress { height: .28rem; flex: 1; overflow: hidden; border-radius: 1rem; background: var(--raised); }
.setup-progress span { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--accent2); transition: width .2s ease; }
.setup-progress[data-step="2"] span { width: 100%; }
.setup-step { animation: setup-step-in .18s ease both; }
.setup-step[hidden] { display: none; }
.setup-actions { justify-content: space-between; }
.setup-actions #setupBack { margin-left: auto; }
.setup-actions button { min-height: 2.85rem; }
.setup-dialog input, .setup-dialog select, .feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea { font-size: .82rem; }
.privacy-mode [data-private-content] { position: relative; isolation: isolate; user-select: text !important; pointer-events: auto !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
.privacy-mode [data-private-content]::after { content: ""; position: absolute; z-index: 100; inset: 0; border-radius: inherit; background: #100e17; opacity: 1; pointer-events: none; }
.privacy-mode input[data-private-content], .privacy-mode textarea[data-private-content] { color: transparent !important; -webkit-text-fill-color: transparent !important; caret-color: transparent !important; text-shadow: none !important; }
.privacy-mode select[data-private-content] { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; background-color: #100e17 !important; }
.privacy-mode select[data-private-content] option { color: var(--text); }
.privacy-mode input[data-private-content]::placeholder, .privacy-mode textarea[data-private-content]::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.privacy-mode [contenteditable="true"][data-private-content] { color: transparent !important; caret-color: transparent !important; }
.privacy-mode .privacy-indicator { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
@keyframes setup-step-in { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) and (min-width: 901px) {
  .app-shell { grid-template-columns: 4rem 16rem minmax(0, 1fr); }
  .context-panel { display: none; }
  .context-hidden { grid-template-columns: 4rem 16rem minmax(0, 1fr); }
  .topbar { gap: .65rem; padding-inline: .9rem; }
  .breadcrumbs { min-width: 0; flex: 1 1 auto; }
  .breadcrumbs span, .breadcrumbs b { display: none; }
  .breadcrumbs strong { max-width: 100%; }
  .top-actions { min-width: 0; flex: 0 0 auto; gap: .45rem; }
  .save-state { display: none; }
}
@media (max-width: 900px) {
  .mobile-only { display: grid; }
  .app-shell { grid-template-columns: 4rem minmax(0, 1fr); }
  .rail { grid-column: 1; }
  .workspace { grid-column: 2; border-right: 0; }
  .sidebar { position: fixed; z-index: 25; inset: var(--app-top, 0px) auto 0 4rem; width: min(19rem, calc(100vw - 4rem)); max-height: var(--app-height, 100dvh); transform: translateX(calc(-100% - 1rem)); box-shadow: var(--shadow); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .backdrop { z-index: 24; }
  .topbar { min-height: 3.5rem; padding-inline: .8rem; }
  .save-state { display: inline-block; max-width: 7rem; font-size: .6rem; }
  .workspace-tools { min-height: 3.2rem; }
  .workspace-panes.split-workspace[data-direction="horizontal"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .context-panel { display: none; }
  .context-panel.mobile-open { position: fixed; z-index: 25; inset: var(--app-top, 0px) 0 env(safe-area-inset-bottom, 0px) auto; display: flex; width: min(22rem, calc(100vw - 4rem)); flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
  .context-panel-header .mobile-only { display: grid; }
}
@media (max-width: 760px) {
  html, body { height: var(--app-height, 100dvh); }
  .app-shell { height: var(--app-height, 100dvh); min-height: 0; grid-template-columns: 3.6rem minmax(0, 1fr); }
  .rail { padding-inline: .25rem; }
  .rail nav, .rail-bottom { gap: .45rem; }
  .rail-button { width: 2.8rem; height: 2.8rem; }
  .sidebar { inset-inline-start: 3.6rem; width: min(19rem, calc(100vw - 3.6rem)); }
  .workspace { min-height: 0; }
  .topbar { min-height: 3.15rem; flex: 0 0 auto; padding-inline: .45rem; }
  .breadcrumbs { display: none; }
  .top-actions { min-width: 0; gap: .28rem; }
  .save-state { max-width: 4.4rem; font-size: .56rem; }
  .view-switch button { min-width: 3.4rem; min-height: 2.35rem; padding-inline: .4rem; font-size: .68rem; }
  .workspace-tools { min-height: 3.15rem; gap: .3rem; padding: .32rem .38rem; }
  .workspace-picker select, .workspace-tool { min-height: 2.65rem; font-size: .72rem; }
  .workspace-picker select { max-width: 36vw; }
  .workspace-panes.split-workspace[data-direction="horizontal"], .workspace-panes.split-workspace[data-direction="vertical"] { display: flex; flex-direction: column; }
  .workspace-pane { width: 100%; min-height: 0; flex: 1 1 auto; }
  .workspace-pane + .workspace-pane, .workspace-panes[data-direction="vertical"] .workspace-pane + .workspace-pane { border: 0; }
  .workspace-pane.mobile-inactive { display: none; }
  .workspace-pane-bar { min-height: 3rem; padding: .22rem .3rem; }
  .workspace-tab { min-height: 2.65rem; max-width: 68vw; }
  .workspace-tab-open { min-height: 2.6rem; max-width: calc(68vw - 2rem); font-size: .75rem; }
  .workspace-tab-close, .pane-new-note { width: 2.75rem; min-height: 2.7rem; }
  .workspace-pane .editor-view.split { display: flex; flex-direction: column; overflow: auto; }
  .workspace-pane .editor-view.split .editor-pane, .workspace-pane .editor-view.split .preview-pane { display: flex; min-height: 45dvh; flex: 1 0 45dvh; }
  .workspace-pane .editor-view.split .editor-pane { border-bottom: 1px solid var(--line); }
  .workspace-pane .editor-view.split .preview-pane { overflow: auto; border: 0; padding: 1.25rem 1.1rem 3rem; }
  .workspace-pane .document-head { padding: 1.45rem 1.1rem .7rem; }
  .workspace-pane .note-title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .workspace-pane .note-body { width: 100%; padding: .45rem 1.1rem 2.4rem; font-size: 16px; }
  .workspace-pane .format-bar { width: calc(100% - 1.2rem); margin-bottom: .4rem; }
  .workspace-pane .format-bar button { min-width: 2.7rem; height: 2.7rem; font-size: .78rem; }
  .workspace-pane .editor-view.preview-only .document-head { padding-top: 1.6rem; }
  .workspace-pane .editor-view.preview-only .preview-pane { min-height: 100%; padding: .55rem 1.1rem 4rem; }
  .workspace-pane .rich-editor { font-size: 1rem; }
  .workspace-pane .tag-pill { min-height: 2.25rem; padding: .4rem .72rem; }
  .canvas-view { padding: .75rem; }
  .canvas-head { align-items: flex-start; gap: .55rem; padding: .1rem .1rem .65rem; }
  .canvas-head p { max-width: 16rem; font-size: .68rem; line-height: 1.5; }
  .canvas-actions { gap: .35rem; }
  .canvas-actions button { min-height: 2.8rem; padding-inline: .65rem; font-size: .68rem; }
  .canvas-stage { border-radius: .7rem; background-size: 24px 24px; }
  .canvas-card { width: 244px; min-height: 166px; }
  .canvas-hint { right: .45rem; bottom: .45rem; font-size: .62rem; }
  .graph-view, .tags-view { padding: 1rem; }
  .graph-head { align-items: flex-start; gap: .75rem; }
  .graph-head p { max-width: 24rem; font-size: .72rem; line-height: 1.5; }
  .graph-stage { height: calc(100% - 6rem); min-height: 20rem; }
  .graph-legend { right: .45rem; bottom: .45rem; max-width: calc(100% - .9rem); flex-wrap: wrap; }
  .graph-legend span:last-child { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid button { min-height: 4.25rem; padding: .8rem; }
  .settings-dialog { width: min(24rem, calc(100vw - 4.4rem)); max-height: calc(var(--app-height, 100dvh) - 1rem); }
  .command-dialog, .auth-dialog, .setup-dialog, .feedback-dialog, .conflict-dialog { max-height: calc(var(--app-height, 100dvh) - 1rem); overflow: auto; overscroll-behavior: contain; }
  .command-dialog { transform: none; }
  .setup-dialog input, .setup-dialog select, .feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea,
  .auth-dialog input, .prompt-dialog input, .command-dialog input { font-size: 16px; }
  .setup-dialog, .feedback-dialog, .auth-dialog, .conflict-dialog { padding: 1.1rem; }
  .toast { bottom: max(.65rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 5rem); text-align: center; }
}
@media (max-width: 420px) {
  .app-shell { grid-template-columns: 3.45rem minmax(0, 1fr); }
  .rail-button { width: 2.75rem; height: 2.75rem; }
  .sidebar { inset-inline-start: 3.45rem; width: min(19rem, calc(100vw - 3.45rem)); }
  .workspace-tools { gap: .24rem; padding-inline: .3rem; }
  .workspace-tool { padding-inline: .4rem; }
  .workspace-picker select { max-width: 32vw; padding-inline: .4rem; }
  .canvas-head { flex-direction: column; }
  .workspace-pane .note-title { font-size: clamp(1.85rem, 8vw, 2.45rem); letter-spacing: -.035em; }
}
@media (max-height: 540px) and (max-width: 900px) {
  .app-shell { min-height: 0; }
  .rail { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .rail > *, .rail nav, .rail-bottom, .rail-button { flex-shrink: 0; }
  .workspace-tools { min-height: 2.85rem; }
  .workspace-pane-bar { min-height: 2.55rem; }
  .workspace-pane .document-head { padding-top: .8rem; }
  .workspace-pane .editor-view.split .editor-pane, .workspace-pane .editor-view.split .preview-pane { min-height: 35dvh; flex-basis: 35dvh; }
}
@media (max-width: 760px) {
  body.keyboard-open .topbar { min-height: 2.65rem; }
  body.keyboard-open .workspace-tools { min-height: 2.65rem; padding-block: .18rem; }
  body.keyboard-open .workspace-pane-bar { min-height: 2.3rem; }
  body.keyboard-open .workspace-pane .document-head { padding-top: .5rem; padding-bottom: .3rem; }
  body.keyboard-open .workspace-pane .document-meta, body.keyboard-open .workspace-pane .tag-row { display: none; }
  body.keyboard-open .workspace-pane .format-bar { margin-bottom: .25rem; }
  body.keyboard-open .workspace-pane .format-bar button { height: 2.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.setup-privacy-toggle {
  display: flex; width: 100%; align-items: center; gap: .8rem; margin: .9rem 0 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: .75rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel2)); padding: .75rem .85rem;
  color: var(--text); text-align: left;
}
.setup-privacy-toggle[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel2)); }
.setup-privacy-mark { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .6rem; background: var(--soft); color: var(--accent); font-size: 1.15rem; }
.setup-privacy-toggle > span:last-child { display: grid; gap: .2rem; }
.setup-privacy-toggle strong { font-size: .76rem; }
.setup-privacy-toggle small { color: var(--muted); font-size: .63rem; }
.setup-question { min-width: 0; margin: .9rem 0; border: 0; padding: 0; }
.setup-question legend { margin-bottom: .45rem; color: var(--muted); font-size: .65rem; font-weight: 650; }
.setup-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .4rem; }
.setup-dialog label.setup-choice {
  min-width: 0; min-height: 2.7rem; flex-direction: row; align-items: center; gap: .55rem;
  margin: 0; border: 1px solid var(--line); border-radius: .58rem; background: var(--panel2);
  padding: .52rem .65rem; color: var(--text); font-size: .68rem; font-weight: 500;
}
.setup-dialog .setup-choice input[type="radio"] {
  width: 1rem; min-width: 1rem; min-height: 1rem; height: 1rem; margin: 0; padding: 0;
  accent-color: var(--accent); border: 0; background: transparent;
}
.setup-choice:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); background: var(--soft); }
.privacy-mode .setup-choice:has(input:checked) { border-color: var(--line); background: var(--panel2); }
.privacy-mode .setup-choice:has(input:checked) input { opacity: 0; }
.setup-choice span { min-width: 0; }
.setup-choice span[data-private-content] { position: relative; display: inline-block; }
.search-notice { margin: .3rem .4rem .65rem; border-left: 2px solid var(--accent); padding: .5rem .65rem; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.graph-note-browser { width: min(100%, 74rem); margin: .75rem auto 0; color: var(--muted); font-size: .7rem; }
.graph-note-browser summary { width: fit-content; cursor: pointer; border-radius: .4rem; padding: .55rem .65rem; }
.graph-note-browser summary:focus-visible, .graph-note-browser button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.graph-note-browser nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.graph-note-browser button { min-height: 2.5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel2); padding: .45rem .7rem; color: var(--text); text-align: left; }
.graph-note-browser button[aria-current="true"] { border-color: var(--accent); }

@media (max-width: 1100px) {
  #searchNotes { font-size: 16px; }
  .menu-dialog button, .command-item { min-height: 2.75rem; }
}
@media (max-width: 900px) {
  .topbar { min-height: calc(3.5rem + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  .context-panel.mobile-open { top: calc(var(--app-top, 0px) + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 900px) and (min-width: 761px) {
  .topbar { min-height: calc(3.5rem + env(safe-area-inset-top, 0px)); }
  .save-state { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) {
  .topbar { min-height: calc(3.15rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 1100px) {
  .small-icon, .note-row, .folder-row, .workspace-tab, .workspace-tab-close,
  .pane-new-note, .format-bar button, .settings-grid button, .setup-actions button,
  .secondary-button, .primary-button { min-height: 2.75rem; }
  .menu-dialog button, .command-item, .graph-note-browser button { min-height: 2.75rem; }
}
@media (max-width: 1100px) {
  .rail-button { width: 2.8rem; height: 2.8rem; }
  .small-icon { min-width: 2.75rem; min-height: 2.75rem; }
  .new-note, .workspace-tool, .workspace-picker select { min-height: 2.75rem; }
  .workspace-picker select { font-size: 16px; }
  .note-row, .folder-row, .workspace-tab { min-height: 2.75rem; }
  .workspace-tab-close, .pane-new-note, .format-bar button { min-width: 2.75rem; min-height: 2.75rem; }
  .context-panel-header .small-icon { width: 2.75rem; height: 2.75rem; }
  .setup-dialog input, .setup-dialog select, .feedback-dialog input, .feedback-dialog select,
  .feedback-dialog textarea, .auth-dialog input, .prompt-dialog input, .command-dialog input { font-size: 16px; }
}