:root {
  color-scheme: dark;
  --bg: #07111e;
  --rail: #091626;
  --panel: #0b1929;
  --panel-raised: #102139;
  --panel-soft: #0e1d30;
  --line: rgba(143, 172, 208, .12);
  --line-strong: rgba(143, 172, 208, .2);
  --text: #edf3fb;
  --muted: #a0b0c5;
  --quiet: #7588a3;
  --blue: #3b83ff;
  --blue-bright: #4a91ff;
  --cyan: #52d5f3;
  --coral: #f1a79f;
  --green: #40cda4;
  --red: #ff7788;
  --radius: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--text); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [contenteditable="true"]:focus-visible { outline: 2px solid rgba(74,145,255,.8); outline-offset: 2px; }
button { border: 0; }
.icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app-frame {
  width: 100%; height: 100dvh; min-height: 0; display: grid;
  grid-template-columns: 222px 320px minmax(0, 1fr);
  background: var(--bg);
}

/* Whalyn's navigation keeps the palette quiet and lets the note cover bring in color. */
.nav-rail {
  min-width: 0; height: 100%; display: flex; flex-direction: column; padding: 22px 13px 14px;
  background: linear-gradient(180deg, #0a1728 0%, #091525 100%); border-right: 1px solid var(--line);
}
.brand-lockup { width: 100%; min-height: 49px; display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 29px; background: transparent; text-align: left; cursor: pointer; }
.brand-mark { width: 42px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; filter: drop-shadow(0 5px 12px rgba(28,112,255,.24)); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font: 800 23px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.9px; color: #f2f6fc; }
.rail-section-label { padding: 0 12px; margin: 0 0 9px; color: #7487a1; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; }
.primary-nav, .secondary-nav { display: grid; gap: 4px; }
.nav-item { position: relative; min-height: 43px; display: flex; align-items: center; gap: 13px; width: 100%; padding: 0 12px; border-radius: 11px; background: transparent; color: #afbdd0; text-align: left; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.nav-item .icon { width: 19px; height: 19px; color: #a6b7cb; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-item.active { color: #eaf3ff; background: linear-gradient(105deg, rgba(47,111,221,.34), rgba(31,83,157,.18)); box-shadow: inset 0 0 0 1px rgba(84,148,255,.12); }
.nav-item.active .icon { color: #72a8ff; }
.nav-item.active::before { content: ''; width: 3px; position: absolute; left: -13px; top: 9px; bottom: 9px; border-radius: 0 4px 4px 0; background: #4e91ff; }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50px; color: #d9e9ff; background: rgba(72,126,207,.24); font-size: 11px; }
.rail-rule { height: 1px; margin: 19px 8px 18px; background: var(--line); }
.rail-spacer { flex: 1; min-height: 18px; }
.storage-card { padding: 12px 11px 10px; margin: 0 1px 12px; border: 1px solid rgba(103,143,198,.13); border-radius: 13px; background: rgba(17,36,59,.55); }
.storage-brand { display: flex; align-items: center; gap: 7px; color: #cad7e6; font-size: 11px; font-weight: 600; }
.storage-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 9px rgba(62,151,255,.5); }
.storage-more { margin-left: auto; color: #7e91aa; letter-spacing: 1px; }
.storage-meter { height: 5px; margin: 12px 0 8px; border-radius: 99px; overflow: hidden; background: rgba(142,164,196,.13); }
.storage-meter span { display: block; width: 31%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #386fff, #42c8ed); }
.storage-caption { display: flex; justify-content: space-between; gap: 5px; color: #8497b0; font-size: 9px; }
.storage-caption span:last-child { color: #78d5bb; }
.profile-row { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 4px 7px; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; }
.profile-row:hover { background: rgba(255,255,255,.04); }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(134,177,255,.2); border-radius: 50%; background: linear-gradient(145deg, #203f6c, #142843); color: #ecf4ff; font-size: 12px; font-weight: 700; }
.avatar-small { width: 33px; height: 33px; font-size: 10px; }
.profile-copy { min-width: 0; display: grid; gap: 3px; flex: 1; }
.profile-copy strong { overflow: hidden; color: #dce6f3; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: #8193aa; font-size: 10px; }
.profile-row > .icon { width: 15px; color: #7f91a8; }

.library-pane {
  min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #0a1726; border-right: 1px solid var(--line);
}
.library-heading { padding: 24px 20px 15px; }
.eyebrow { color: #7c93b1; font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.library-title-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.library-title-line h1 { margin: 0; font: 700 23px/1.25 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.7px; }
.library-heading p { margin: 5px 0 0; color: #8798ae; font-size: 11px; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #adbed2; cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button:hover { color: white; border-color: var(--line-strong); background: rgba(255,255,255,.055); }
.icon-button:active, .primary-button:active { transform: translateY(1px); }
.icon-button.subtle { width: 31px; height: 31px; color: #8294ab; }
.library-tabs { display: flex; align-items: center; gap: 3px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.library-tab { position: relative; min-height: 43px; padding: 0 10px; color: #8fa1b9; background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.library-tab:hover { color: #eaf3ff; }
.library-tab.selected { color: #f1f6ff; }
.library-tab.selected::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, #3980ff, #54c5ee); }
.tab-more { width: 31px; height: 31px; margin-left: auto; }
.tab-more .icon { width: 17px; }
.list-toolbar { min-height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; }
.filter-pills { display: flex; gap: 5px; }
.filter-pill { min-height: 31px; padding: 0 12px; border: 1px solid transparent; border-radius: 99px; color: #8fa1b8; background: transparent; font-size: 10px; font-weight: 600; cursor: pointer; }
.filter-pill:hover { color: white; background: rgba(255,255,255,.04); }
.filter-pill.selected { color: #e8f2ff; border-color: rgba(102,153,227,.13); background: #14263c; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.list-toolbar-actions { display: flex; align-items: center; gap: 6px; }
.library-action-button { min-height: 31px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(104,157,229,.16); border-radius: 9px; color: #a9cbf7; background: rgba(29,64,105,.32); font-size: 9px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.library-action-button:hover { border-color: rgba(104,157,229,.3); color: #e4f1ff; background: rgba(40,85,140,.4); }
.library-action-button .icon { width: 13px; height: 13px; }
.empty-trash-button { min-height: 31px; padding: 0 12px; border: 1px solid rgba(255,133,124,.18); border-radius: 99px; color: #ffaaa2; background: rgba(117,43,49,.18); font-size: 10px; font-weight: 650; cursor: pointer; }
.empty-trash-button:hover { border-color: rgba(255,133,124,.35); background: rgba(117,43,49,.3); }
.filter-button { width: 31px; height: 31px; border-color: rgba(115,151,195,.12); background: rgba(19,38,62,.62); }
.filter-button .icon { width: 15px; height: 15px; }
.active-scope { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 0 20px; color: #9db0c8; font-size: 10px; }
.active-scope[hidden] { display: none; }
.active-scope button { padding: 3px 5px; color: #71a5ff; background: transparent; cursor: pointer; font-size: 10px; }
.note-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(120,145,178,.26) transparent; }
.note-row { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding: 10px; margin: 3px 0; border: 1px solid transparent; border-radius: 13px; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.note-row:hover { background: rgba(255,255,255,.035); }
.note-row.selected { border-color: rgba(89,145,229,.22); background: linear-gradient(110deg, rgba(32,80,144,.52), rgba(18,41,69,.8)); box-shadow: 0 8px 18px rgba(1,8,16,.13); }
.note-thumb { width: 64px; height: 61px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(175,198,227,.1); border-radius: 10px; background: linear-gradient(145deg, #183451, #18223f 58%, #50394f); }
.note-thumb img { width: 100%; height: 100%; object-fit: cover; }
.note-thumb.doc-thumb { background: #eaf0f9; color: #5286df; }
.note-thumb.doc-thumb .icon { width: 27px; height: 27px; stroke-width: 1.5; }
.pdf-thumb-mark { color: #ed424d; font-size: 15px; font-weight: 850; letter-spacing: -.4px; }
.note-thumb.image-thumb { background: #f2f5f9; }
.note-thumb.clip-thumb { background: linear-gradient(145deg, #153750, #17284a 65%, #633d58); color: #aadfff; }
.note-thumb.clip-thumb .icon { width: 25px; height: 25px; }
.note-thumb.plain-thumb { background: linear-gradient(145deg, #233e52, #1b2841 70%, #354052); color: #b5d9e6; }
.note-row-copy { min-width: 0; padding: 1px 2px 0 0; }
.note-row-top { display: flex; align-items: center; gap: 5px; }
.note-row-title { flex: 1; min-width: 0; overflow: hidden; color: #e8f0fa; font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.row-star { width: 17px; height: 17px; display: grid; place-items: center; color: #f3bd4e; }
.row-star .icon { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.note-row-preview { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: #a4b3c6; font-size: 10px; line-height: 1.42; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #8296af; font-size: 9px; }
.note-row-meta .meta-space { max-width: 90px; overflow: hidden; color: #8fc2ff; text-overflow: ellipsis; white-space: nowrap; }
.row-dot { width: 3px; height: 3px; border-radius: 50%; background: #586b84; }
.list-empty { padding: 38px 24px; color: #93a5bc; text-align: center; font-size: 12px; line-height: 1.6; }
.list-empty .icon { width: 26px; height: 26px; margin: 0 auto 10px; color: #6288bd; }
.list-footer { min-height: 43px; display: flex; align-items: center; gap: 7px; padding: 0 20px; border-top: 1px solid rgba(145,173,207,.08); color: #70849d; font-size: 9px; }
.footer-indicator { width: 6px; height: 6px; border-radius: 50%; background: #44cfa8; box-shadow: 0 0 8px rgba(68,207,168,.34); }
.mobile-library-actions { display: none; }

.main-pane { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 48% -12%, rgba(32,75,128,.13), transparent 39%), #081421; }
.workspace-bar { height: 72px; min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(8,19,32,.84); }
.breadcrumbs { min-width: 130px; display: flex; align-items: center; gap: 8px; overflow: hidden; color: #9bacc1; font-size: 10px; white-space: nowrap; }
.breadcrumbs .icon { width: 14px; height: 14px; color: #768da9; }
.breadcrumbs .crumb-icon { display: grid; place-items: center; }
.breadcrumbs strong { overflow: hidden; color: #dce7f5; font-weight: 600; text-overflow: ellipsis; }
.workspace-search-wrap { position: relative; height: 42px; display: flex; align-items: center; gap: 9px; min-width: 120px; max-width: 430px; flex: 1; margin-left: auto; padding: 0 11px; border: 1px solid rgba(134,164,202,.12); border-radius: 12px; background: rgba(19,39,64,.7); color: #8095b0; transition: border .2s, background .2s; }
.workspace-search-wrap:focus-within { border-color: rgba(75,140,237,.58); background: #10223a; }
.workspace-search-wrap > .icon { width: 17px; height: 17px; }
.workspace-search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #ecf4ff; font-size: 11px; }
.workspace-search-wrap input::placeholder { color: #8da0b8; opacity: 1; }
.workspace-search-wrap kbd { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(136,159,192,.18); border-radius: 5px; color: #9baec5; background: rgba(255,255,255,.035); font-family: inherit; font-size: 9px; }
.primary-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(121,169,255,.24); border-radius: 11px; color: white; background: linear-gradient(125deg, #347afa, #2867e4); box-shadow: 0 7px 18px rgba(28,87,204,.2), inset 0 1px 0 rgba(255,255,255,.12); font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .18s, filter .18s, box-shadow .18s; }
.primary-button .icon { width: 17px; height: 17px; }
.primary-button:hover { filter: brightness(1.1); box-shadow: 0 9px 22px rgba(28,87,204,.29), inset 0 1px 0 rgba(255,255,255,.14); }
.new-note-button { min-width: 117px; height: 41px; }
.assistant-button { width: 41px; height: 41px; border-color: rgba(94,143,218,.12); background: linear-gradient(145deg, rgba(24,49,78,.88), rgba(16,33,55,.85)); color: #80b3ff; }
.assistant-button .icon { width: 19px; height: 19px; }
.user-avatar { cursor: pointer; }
.profile-chevron { width: 27px; height: 35px; margin-left: -9px; }
.profile-chevron .icon { width: 15px; }
.mobile-back, .mobile-brand, .mobile-search { display: none; }
.mobile-new-note { display: none; }
.mobile-editor-tabs { display: none; }

.workspace-content { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 284px; }
.editor-column { position: relative; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(112,142,180,.23) transparent; }
.note-editor { width: min(100%, 910px); margin: 0 auto; padding: 21px clamp(22px, 3.2vw, 48px) 56px; }
.note-editor[hidden] { display: none; }
.editor-breadcrumb { display: flex; align-items: center; gap: 7px; margin: 1px 0 14px; color: #8296af; font-size: 10px; }
.editor-breadcrumb .icon { width: 14px; height: 14px; color: #728aa9; }
.editor-breadcrumb .crumb-active { color: #b4c5da; }
.editor-top-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 2px; }
.editor-location { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: #8fa3bb; font-size: 10px; }
.editor-location .icon { width: 15px; height: 15px; color: #6e8aaa; }
.editor-location .location-space { overflow: hidden; color: #78aefe; text-overflow: ellipsis; white-space: nowrap; }
.editor-actions { display: flex; align-items: center; gap: 5px; }
.editor-actions .icon-button { width: 34px; height: 34px; }
.editor-actions .icon-button .icon { width: 17px; height: 17px; }
.share-button { height: 33px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(117,151,192,.12); border-radius: 10px; color: #ccd9e9; background: rgba(21,41,65,.56); font-size: 10px; font-weight: 600; cursor: pointer; }
.share-button .icon { width: 15px; height: 15px; color: #9cb6d5; }
.note-title { width: 100%; min-height: 46px; resize: none; overflow: hidden; margin: 4px 0 7px; padding: 0; border: 0; outline: 0; color: #f1f5fb; background: transparent; font: 750 clamp(28px, 3vw, 39px)/1.16 ui-sans-serif, system-ui, sans-serif; letter-spacing: -1.5px; }
.note-title::placeholder { color: #8496ad; }
.note-subtitle { display: flex; align-items: center; gap: 8px; min-height: 28px; color: #8093ab; font-size: 10px; }
.note-subtitle .icon { width: 14px; height: 14px; }
.subtitle-divider { width: 3px; height: 3px; border-radius: 50%; background: #5c718b; }
.save-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #79cdb4; font-size: 9px; }
.save-status .icon { width: 12px; height: 12px; }
.editor-toolbar { display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 47px; margin: 12px 0 9px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border: 1px solid rgba(116,150,191,.11); border-radius: 12px; background: rgba(16,33,53,.68); }
.tool-button { min-width: 31px; height: 31px; display: grid; place-items: center; padding: 0 7px; border-radius: 8px; color: #9eb1ca; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.tool-button:hover { color: white; background: rgba(255,255,255,.07); }
.tool-button .icon { width: 17px; height: 17px; }
.toolbar-rule { height: 18px; width: 1px; margin: 0 5px; background: var(--line-strong); }
.toolbar-spacer { flex: 1; }
.cover-image { position: relative; width: 100%; height: clamp(156px, 22vw, 250px); overflow: hidden; border: 1px solid rgba(155,184,218,.14); border-radius: 15px; background: linear-gradient(130deg, #132b48, #2b4055 45%, #b57a80); box-shadow: 0 12px 26px rgba(0,0,0,.17); }
.cover-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 52%; }
.cover-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(5,13,22,.22)); pointer-events: none; }
.cover-label { position: absolute; z-index: 1; right: 12px; bottom: 11px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: rgba(247,250,255,.9); background: rgba(7,17,30,.33); backdrop-filter: blur(10px); font-size: 8px; letter-spacing: .15px; }
.section-title { margin: 18px 0 9px; color: #e9f0f8; font: 700 16px/1.3 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.25px; }
.project-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 12px 14px; border: 1px solid rgba(116,154,202,.13); border-radius: 14px; background: linear-gradient(135deg, rgba(17,37,61,.9), rgba(13,29,47,.9)); }
.project-field { min-width: 0; display: grid; grid-template-columns: 17px minmax(67px, .7fr) minmax(0, 1fr); align-items: center; gap: 7px; min-height: 22px; color: #d8e4f2; font-size: 10px; }
.project-field .icon { width: 15px; height: 15px; color: #7baeff; }
.project-field:nth-child(2) .icon { color: var(--green); }
.project-field:nth-child(3) .icon { color: #ef8990; }
.project-field:nth-child(4) .icon { color: #91a7c8; }
.project-field strong { font-weight: 600; }
.project-field span:last-child { overflow: hidden; color: #aebdd0; text-overflow: ellipsis; white-space: nowrap; }
.project-field.wide-field { grid-column: 1 / -1; }
.reminder-control { min-width: 0; display: flex; align-items: center; gap: 9px; }
.reminder-control input { min-width: 0; width: min(100%, 230px); padding: 6px 8px; border: 1px solid rgba(116,154,202,.18); border-radius: 8px; background: rgba(5,15,29,.5); color: #dce9f7; color-scheme: dark; font: inherit; }
.reminder-control input::-webkit-calendar-picker-indicator { filter: invert(.8); opacity: .85; cursor: pointer; }
.reminder-control button { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(116,154,202,.18); border-radius: 7px; background: rgba(255,255,255,.04); color: #aec5e3; font: inherit; cursor: pointer; }
.reminder-control button:hover { color: #fff; border-color: rgba(116,154,202,.35); }
.tasks-card, .note-body-card { padding: 11px 13px; border: 1px solid rgba(116,154,202,.12); border-radius: 14px; background: rgba(14,31,51,.78); }
.tasks-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tasks-header h3 { margin: 0; color: #e9f1fb; font: 700 13px/1.4 ui-sans-serif, system-ui, sans-serif; }
.task-progress { margin-left: auto; color: #849ab5; font-size: 9px; }
.task-list { display: grid; gap: 1px; }
.task-row { min-height: 27px; display: flex; align-items: center; gap: 9px; color: #cad7e7; font-size: 10px; }
.task-check { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #7188a5; border-radius: 5px; color: white; background: transparent; cursor: pointer; }
.task-check .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.task-row.done .task-check { border-color: #327bf0; background: #327bf0; }
.task-row.done .task-copy { color: #7589a2; text-decoration: line-through; }
.task-copy { flex: 1; min-width: 0; padding: 4px 0; outline: 0; }
.task-add { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; margin-top: 4px; padding: 0 10px; border: 1px solid rgba(119,157,204,.13); border-radius: 9px; color: #99b7dd; background: rgba(28,55,86,.55); font-size: 9px; font-weight: 600; cursor: pointer; }
.task-add:hover { color: white; border-color: rgba(93,148,225,.3); }
.task-add .icon { width: 14px; height: 14px; }
.note-body-card { min-height: 72px; color: #bfccdc; font-size: 11px; line-height: 1.65; }
.note-body-card [contenteditable="true"] { min-height: 45px; outline: 0; white-space: pre-wrap; }
.note-body-card [contenteditable="true"]:empty::before { content: 'Add a thought, a detail, or a little context…'; color: #70849f; }
.note-body-card img[data-whalyn-attachment-id] { display: block; max-width: 100%; max-height: 680px; height: auto; margin: 13px auto; border: 1px solid rgba(143,172,208,.16); border-radius: 10px; object-fit: contain; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-chip { min-height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid rgba(114,150,194,.15); border-radius: 99px; color: #c5d4e6; background: rgba(19,39,63,.68); font-size: 9px; cursor: pointer; }
.tag-chip:hover { border-color: rgba(83,145,238,.43); color: #e7f1ff; }
.tag-chip.add-tag { border-style: dashed; color: #8eacd0; background: transparent; }
.tag-chip .icon { width: 12px; height: 12px; }
.editor-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.editor-mini-card { min-width: 0; padding: 12px; border: 1px solid rgba(116,154,202,.12); border-radius: 14px; background: rgba(14,31,51,.72); }
.mini-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.mini-card-head h3 { margin: 0; color: #e4edf8; font: 700 12px/1.3 ui-sans-serif, system-ui, sans-serif; }
.mini-card-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; color: #c6dbf3; background: rgba(72,120,180,.22); font-size: 9px; }
.attachment-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.attachment-tile { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(128,160,200,.12); border-radius: 9px; color: #92b6e0; background: linear-gradient(145deg,#203d60,#132943); cursor: pointer; }
.attachment-tile:hover { border-color: rgba(86,152,245,.45); transform: translateY(-1px); }
.attachment-tile .icon { width: 25px; height: 25px; }
.attachment-tile.image-attachment img { width: 100%; height: 100%; object-fit: cover; }
.attachment-tile .file-ext { color: #ff737e; font: 800 8px/1 ui-sans-serif, system-ui, sans-serif; }
.attachment-name { display: block; overflow: hidden; margin-top: 4px; color: #899db6; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.add-attachment { width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; border: 1px solid rgba(113,151,198,.12); border-radius: 9px; color: #99afd0; background: rgba(28,54,84,.46); font-size: 9px; cursor: pointer; }
.add-attachment:hover { color: white; border-color: rgba(86,152,245,.35); }
.add-attachment .icon { width: 14px; height: 14px; }
.related-list { display: grid; }
.related-row { min-width: 0; display: flex; align-items: center; gap: 3px; border-bottom: 1px solid rgba(129,157,191,.08); }
.related-item { width: 100%; min-width: 0; flex: 1; display: grid; grid-template-columns: 31px minmax(0,1fr) 14px; align-items: center; gap: 8px; padding: 5px 0; color: #d9e5f3; background: transparent; text-align: left; cursor: pointer; }
.related-item:last-child { border-bottom: 0; }
.related-unlink { width: 24px; height: 28px; flex: 0 0 auto; border-radius: 6px; color: #7f93ac; background: transparent; font-size: 16px; cursor: pointer; }
.related-unlink:hover { color: #ff9da7; background: rgba(255,115,126,.1); }
.related-link-button { min-height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; border-radius: 7px; color: #81b7ff; background: rgba(49,127,220,.1); font-size: 9px; cursor: pointer; }
.related-link-button:hover { color: #c6e0ff; background: rgba(49,127,220,.2); }
.related-link-button:disabled { opacity: .45; cursor: not-allowed; }
.related-link-button .icon { width: 12px; height: 12px; }
.related-inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.related-picker-dialog { width: min(440px, calc(100vw - 24px)); max-width: none; max-height: min(78vh, 640px); padding: 0; overflow: hidden; border: 1px solid rgba(129,161,201,.22); border-radius: 17px; color: #e5edf8; background: #0d1d30; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.related-picker-dialog::backdrop { background: rgba(3,10,19,.68); backdrop-filter: blur(5px); }
.related-picker-panel { display: flex; max-height: min(78vh, 640px); flex-direction: column; padding: 18px; }
.clip-panel { gap: 12px; overflow-y: auto; }
.clip-field { display: grid; gap: 6px; color: #9db0c8; font-size: 10px; font-weight: 600; }
.clip-field input, .clip-field textarea { width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid rgba(129,161,201,.16); border-radius: 9px; outline: 0; color: #e5edf8; background: rgba(24,43,68,.85); font-size: 11px; font-weight: 400; }
.clip-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.clip-field input::placeholder, .clip-field textarea::placeholder { color: #768ba5; }
.clip-field input:focus, .clip-field textarea:focus { border-color: rgba(75,140,237,.58); }
.clip-error { margin: 0; color: #ff9ca5; font-size: 10px; line-height: 1.5; }
.clip-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.clip-actions .auth-local-button { width: auto; min-height: 39px; margin: 0; padding: 0 13px; }
.clip-actions .primary-button { min-height: 39px; }
.account-delete-warning { margin: 0; color: #c5d2e2; font-size: 11px; line-height: 1.6; }
.account-password-note { margin: 0; color: #879bb4; font-size: 10px; line-height: 1.5; }
.account-delete-submit { min-height: 39px; padding: 0 13px; border: 1px solid rgba(255,126,139,.28); border-radius: 10px; color: #fff; background: #9f2d40; font-size: 10px; font-weight: 700; cursor: pointer; }
.account-delete-submit:hover { background: #b6374c; }
.account-delete-submit:disabled { opacity: .55; cursor: wait; }
.related-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.related-picker-header .eyebrow { color: #7790ae; font-size: 8px; letter-spacing: .16em; }
.related-picker-header h2 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.02em; }
.related-picker-header .icon-button { width: 32px; height: 32px; font-size: 20px; }
.related-picker-search { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(129,161,201,.16); border-radius: 10px; color: #91a6c0; background: rgba(24,43,68,.85); }
.related-picker-search .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.related-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #e5edf8; background: transparent; font: inherit; font-size: 11px; }
.related-picker-search input::placeholder { color: #768ba5; }
.related-picker-results { min-height: 100px; max-height: min(52vh, 430px); display: grid; gap: 3px; overflow-y: auto; margin-top: 10px; }
.related-picker-option { min-width: 0; display: grid; grid-template-columns: 31px minmax(0,1fr) 14px; align-items: center; gap: 9px; padding: 8px; border-radius: 9px; color: #cbd9e9; background: transparent; text-align: left; cursor: pointer; }
.related-picker-option:hover, .related-picker-option:focus-visible { outline: none; background: rgba(69,119,180,.18); }
.related-picker-option > .icon { width: 14px; height: 14px; color: #82b3f2; }
.related-picker-empty { display: grid; min-height: 100px; place-items: center; padding: 18px; color: #8296ae; font-size: 10px; text-align: center; }
.related-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #91b9ea; background: linear-gradient(145deg, rgba(80,130,196,.22), rgba(36,71,111,.23)); }
.related-icon .icon { width: 17px; height: 17px; }
.related-copy { min-width: 0; display: grid; gap: 3px; }
.related-copy strong { overflow: hidden; color: #d8e4f2; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.related-copy small { overflow: hidden; color: #8498b0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.related-item > .icon { width: 13px; height: 13px; color: #758da9; }
.more-related { padding: 8px 0 0; color: #62a3ff; background: transparent; font-size: 9px; cursor: pointer; }
.attachment-empty { min-height: 53px; display: grid; place-items: center; padding: 9px; border: 1px dashed rgba(116,150,191,.15); border-radius: 9px; color: #8195ae; text-align: center; font-size: 9px; line-height: 1.45; }
.space-card { width: calc(100% - 8px); min-height: 68px; display: grid; grid-template-columns: 49px minmax(0,1fr) 15px; align-items: center; gap: 10px; margin: 4px; padding: 8px; border: 1px solid rgba(121,154,193,.11); border-radius: 12px; color: #dce8f6; background: rgba(17,36,58,.58); text-align: left; cursor: pointer; }
.space-card:hover { border-color: rgba(83,147,235,.32); background: rgba(24,50,81,.78); }
.space-art { width: 49px; height: 49px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; color: #92bcf0; background: linear-gradient(140deg,#143c5e,#31365b,#814a64); }
.space-art img { width: 100%; height: 100%; object-fit: cover; }
.space-card-copy { min-width: 0; display: grid; gap: 5px; }
.space-card-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.space-card-copy small { overflow: hidden; color: #8fa3bb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.space-card > .icon { width: 14px; height: 14px; color: #768ca6; }
.tag-collection { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; }
.tag-collection-card { min-width: 0; min-height: 87px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 11px; border: 1px solid rgba(121,154,193,.12); border-radius: 12px; color: #c9d7e8; background: linear-gradient(150deg, rgba(19,42,68,.88), rgba(14,30,49,.88)); text-align: left; cursor: pointer; }
.tag-collection-card:hover { border-color: rgba(83,147,235,.35); transform: translateY(-1px); }
.tag-collection-card > span { color: #75abf5; }
.tag-collection-card .icon { width: 16px; height: 16px; }
.tag-collection-card strong { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tag-collection-card small { color: #8297b0; font-size: 8px; }
.note-body-card table { width: 100%; margin: 7px 0; border-collapse: collapse; color: #c8d7e8; font-size: 10px; }
.note-body-card td, .note-body-card th { padding: 7px; border: 1px solid rgba(128,159,197,.2); text-align: left; }
.note-body-card th { color: #e4effc; background: rgba(52,103,164,.15); }
.action-popover { position: fixed; z-index: 90; width: 225px; display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(129,161,201,.2); border-radius: 13px; background: rgba(13,29,48,.97); box-shadow: 0 17px 46px rgba(0,0,0,.45); backdrop-filter: blur(18px); animation: pop-in .12s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.action-popover button { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 8px; color: #c8d6e7; background: transparent; text-align: left; font-size: 10px; cursor: pointer; }
.action-popover button:hover { color: #f4f8ff; background: rgba(92,139,202,.14); }
.action-popover button .icon { width: 16px; height: 16px; color: #91afd4; }
.action-popover button small { margin-left: auto; color: #7f93ac; font-size: 8px; }
.action-popover button.destructive, .action-popover button.destructive .icon { color: #ff8793; }
.popover-divider { height: 1px; margin: 3px 6px; background: var(--line); }
.empty-note { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; }
.empty-note[hidden] { display: none; }
.empty-symbol { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid rgba(100,151,219,.18); border-radius: 17px; color: #78adff; background: linear-gradient(145deg, rgba(36,76,125,.34), rgba(20,43,71,.65)); }
.empty-symbol .icon { width: 25px; height: 25px; }
.empty-note h2 { margin: 0; font: 700 20px ui-sans-serif, system-ui, sans-serif; }
.empty-note p { max-width: 300px; margin: 8px 0 20px; color: #92a5bd; font-size: 12px; line-height: 1.6; }

.inspector { min-width: 0; overflow-y: auto; padding: 12px 13px 20px; border-left: 1px solid var(--line); background: rgba(9,23,38,.53); scrollbar-width: thin; scrollbar-color: rgba(112,142,180,.2) transparent; }
.inspector-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3px; padding: 3px; border: 1px solid rgba(124,157,198,.12); border-radius: 11px; background: rgba(16,34,56,.75); }
.inspector-tab { min-width: 0; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; color: #90a3bb; background: transparent; font-size: 9px; cursor: pointer; }
.inspector-tab .icon { width: 14px; height: 14px; }
.inspector-tab.active { color: #e4efff; background: rgba(50,96,159,.36); box-shadow: inset 0 0 0 1px rgba(101,154,229,.12); }
.inspector-section { padding: 14px 3px 13px; border-bottom: 1px solid rgba(134,162,196,.1); }
.inspector-section:last-child { border-bottom: 0; }
.inspector-section h3 { margin: 0 0 10px; color: #e0eaf6; font: 700 11px/1.4 ui-sans-serif, system-ui, sans-serif; }
.detail-row { display: grid; grid-template-columns: minmax(66px,.8fr) minmax(0,1.2fr); gap: 8px; align-items: center; min-height: 29px; color: #a4b4c8; font-size: 9px; }
.detail-row strong { overflow: hidden; color: #d5e0ed; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.owner-value { display: inline-flex; align-items: center; gap: 6px; }
.owner-value .avatar { width: 20px; height: 20px; font-size: 7px; }
.space-value { color: #6eabff !important; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.detail-tag { min-height: 22px; padding: 0 8px; border: 1px solid rgba(120,154,194,.12); border-radius: 99px; color: #c3d4e7; background: rgba(20,41,66,.78); font-size: 8px; cursor: pointer; }
.inspector-attachment { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.inspector-attachment .attachment-tile { border-radius: 7px; }
.inspector-empty { padding: 21px 10px; border: 1px dashed rgba(124,153,189,.14); border-radius: 10px; color: #8295ac; text-align: center; font-size: 9px; line-height: 1.5; }
.connection-card { display: grid; gap: 4px; padding: 11px; border: 1px solid rgba(119,156,203,.13); border-radius: 11px; background: rgba(15,34,56,.7); }
.connection-card strong { color: #dceafb; font-size: 10px; }
.connection-card p { margin: 0; color: #91a5bd; font-size: 9px; line-height: 1.55; }
.connection-suggestion { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid rgba(134,162,196,.08); color: #afc2d9; font-size: 9px; }
.connection-suggestion .icon { width: 15px; height: 15px; color: #72a9f6; }

.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 210px; max-width: 340px; padding: 12px 15px; border: 1px solid rgba(115,161,221,.2); border-radius: 12px; color: #e9f3ff; background: rgba(17,37,61,.95); box-shadow: 0 13px 32px rgba(0,0,0,.3); backdrop-filter: blur(12px); font-size: 11px; animation: toast-in .22s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.mobile-bottom-nav { display: none; }

@media (max-width: 1420px) {
  .app-frame { grid-template-columns: 204px 300px minmax(0,1fr); }
  .workspace-content { grid-template-columns: minmax(0,1fr) 260px; }
  .inspector { padding-inline: 11px; }
}
@media (max-width: 1220px) {
  .app-frame { grid-template-columns: 198px 286px minmax(0,1fr); }
  .workspace-content { grid-template-columns: minmax(0,1fr); }
  .inspector { display: none; }
  .workspace-bar { gap: 7px; padding-inline: 13px; }
  .breadcrumbs { max-width: 185px; }
  .note-editor { padding-inline: clamp(20px,3vw,38px); }
}
@media (max-width: 970px) {
  .app-frame { grid-template-columns: 70px 278px minmax(0,1fr); }
  .nav-rail { align-items: center; padding-inline: 8px; }
  .brand-lockup { justify-content: center; padding: 0; }
  .brand-name, .rail-section-label, .nav-item > span:not(.icon), .nav-count, .rail-rule, .storage-card, .profile-copy, .profile-row > .icon { display: none; }
  .brand-mark { width: 43px; height: 29px; }
  .primary-nav, .secondary-nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item > .icon { width: 21px; height: 21px; }
  .nav-item.active::before { left: -8px; }
  .profile-row { justify-content: center; margin-top: 7px; padding: 0; }
  .library-heading { padding-inline: 17px; }
  .library-tab { padding-inline: 8px; }
  .library-tabs { padding-inline: 11px; }
  .workspace-search-wrap { max-width: 330px; }
  .breadcrumbs { max-width: 142px; }
  .breadcrumbs > span:not(.crumb-icon), .breadcrumbs > strong { display: none; }
  .breadcrumbs .crumb-icon { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; }
  .cover-image { height: clamp(150px, 24vw, 220px); }
}
@media (max-width: 720px) {
  html, body { overflow: hidden; background: #081321; }
  .app-frame { position: relative; display: block; height: 100dvh; min-height: 0; overflow: hidden; }
  .nav-rail { display: none; }
  .library-pane { position: absolute; inset: 0; z-index: 2; display: flex; width: 100%; height: 100%; padding-bottom: calc(65px + env(safe-area-inset-bottom)); border: 0; background: #081321; }
  .library-heading { padding: 21px 19px 13px; }
  .library-heading .eyebrow { font-size: 9px; }
  .library-title-line h1 { font-size: 25px; }
  .library-heading p { font-size: 11px; }
  .mobile-library-actions { display: flex; align-items: center; gap: 9px; padding: 0 16px 14px; }
  .mobile-search-box { height: 41px; display: flex; align-items: center; flex: 1; gap: 9px; min-width: 0; padding: 0 11px; border: 1px solid rgba(134,164,202,.12); border-radius: 12px; color: #8095b0; background: #102139; }
  .mobile-search-box .icon { width: 17px; height: 17px; }
  .mobile-search-box input { min-width: 0; width: 100%; border: 0; outline: 0; color: #edf4ff; background: transparent; font-size: 11px; }
  .mobile-search-box input::placeholder { color: #8da0b8; }
  .mobile-create-note { width: 41px; min-width: 41px; height: 41px; padding: 0; }
  .mobile-create-note span:last-child { display: none; }
  .library-tabs { min-height: 44px; padding-inline: 13px; }
  .library-tab { min-height: 42px; padding-inline: 10px; font-size: 11px; }
  .list-toolbar { min-height: 55px; padding-inline: 15px; }
  .note-list { padding: 0 9px 16px; }
  .note-row { grid-template-columns: 65px minmax(0,1fr); gap: 11px; padding: 9px; margin: 3px 0; }
  .note-thumb { width: 65px; height: 61px; }
  .note-row-title { font-size: 12px; }
  .note-row-preview { font-size: 10px; }
  .list-footer { display: none; }
  .main-pane { position: absolute; inset: 0; z-index: 3; display: none; height: 100%; padding-bottom: calc(62px + env(safe-area-inset-bottom)); background: #081321; }
  .app-frame.mobile-editor .library-pane { display: none; }
  .app-frame.mobile-editor .main-pane { display: flex; }
  .workspace-bar { height: 57px; min-height: 57px; gap: 6px; padding: 0 10px; background: rgba(8,19,32,.96); }
  .mobile-back { width: 35px; height: 35px; display: grid; color: #acd0ff; }
  .mobile-back .icon { width: 20px; height: 20px; }
  .mobile-brand { display: none; }
  .breadcrumbs { display: none; }
  .workspace-search-wrap, .new-note-button, .assistant-button { display: none; }
  .user-avatar { width: 33px; height: 33px; margin-left: auto; font-size: 10px; }
  .profile-chevron { display: none; }
  .mobile-search { display: grid; width: 35px; height: 35px; }
  .mobile-new-note { display: grid; width: 35px; height: 35px; color: #9fc4f4; background: rgba(35,69,109,.3); }
  .workspace-content { display: block; min-height: 0; overflow: hidden; }
  .editor-column { height: 100%; padding-bottom: 10px; }
  .note-editor { width: 100%; padding: 12px 17px 30px; }
  .editor-breadcrumb { margin: 1px 0 9px; font-size: 9px; }
  .editor-top-actions { margin-bottom: 5px; }
  .editor-actions { gap: 1px; }
  .editor-actions .icon-button { width: 31px; height: 31px; }
  .share-button { width: 33px; padding: 0; justify-content: center; }
  .share-button span:last-child { display: none; }
  .note-title { min-height: 42px; margin-top: 4px; margin-bottom: 5px; font-size: clamp(27px, 7vw, 34px); letter-spacing: -1.15px; }
  .note-subtitle { font-size: 9px; }
  .editor-toolbar { min-height: 43px; gap: 0; margin: 10px 0 8px; padding: 0 3px; overflow-x: auto; scrollbar-width: none; }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .tool-button { min-width: 30px; height: 30px; padding: 0 6px; }
  .toolbar-rule { margin-inline: 3px; }
  .cover-image { height: clamp(170px, 52vw, 250px); border-radius: 13px; }
  .section-title { margin-top: 15px; font-size: 15px; }
  .project-card { grid-template-columns: 1fr; gap: 6px; padding: 11px 12px; }
  .project-field { grid-template-columns: 18px 82px minmax(0,1fr); min-height: 22px; font-size: 10px; }
  .project-field.wide-field { grid-column: auto; }
  .tasks-card, .note-body-card { padding: 10px 11px; }
  .task-row { min-height: 30px; font-size: 10px; }
  .task-check { width: 17px; height: 17px; }
  .editor-lower-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 15px; }
  .editor-mini-card { padding: 11px; }
  .attachment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inspector { display: none; }
  .mobile-bottom-nav { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: calc(61px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 4px 10px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(128,157,192,.15); background: rgba(8,19,32,.97); backdrop-filter: blur(16px); }
  .mobile-bottom-nav button { position: relative; min-width: 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 12px; color: #8397b0; background: transparent; cursor: pointer; }
  .mobile-bottom-nav button .icon { width: 19px; height: 19px; }
  .mobile-bottom-nav button small { font-size: 8px; }
  .mobile-bottom-nav button.active { color: #6fa9ff; background: rgba(45,100,175,.12); }
  .mobile-bottom-nav button.active { color: #70aaff; background: rgba(45,100,175,.12); }
  .editor-toolbar .tool-button:last-child { display: none; }
  .toast-region { left: 14px; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast { width: 100%; max-width: none; }
}

@media (max-width: 380px) {
  .library-heading { padding-top: 16px; }
  .note-row { grid-template-columns: 57px minmax(0,1fr); gap: 9px; padding: 8px; }
  .note-thumb { width: 57px; height: 57px; }
  .note-row-preview { -webkit-line-clamp: 1; }
  .editor-actions .icon-button:nth-child(2) { display: none; }
  .project-field { grid-template-columns: 17px 75px minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.sync-pill { min-height: 31px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(116,151,195,.15); border-radius: 99px; color: #9cadc3; background: rgba(16,33,55,.68); font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sync-pill:hover { color: #eaf3ff; border-color: rgba(116,151,195,.3); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #7f91a8; box-shadow: 0 0 0 3px rgba(127,145,168,.1); }
.sync-pill.synced .sync-dot { background: #42d0a2; box-shadow: 0 0 0 3px rgba(66,208,162,.11); }
.sync-pill.syncing .sync-dot, .sync-pill.checking .sync-dot { background: #67bdff; box-shadow: 0 0 0 3px rgba(103,189,255,.12); animation: sync-pulse 1.15s ease-in-out infinite alternate; }
.sync-pill.offline .sync-dot, .sync-pill.error .sync-dot { background: #f0ad83; box-shadow: 0 0 0 3px rgba(240,173,131,.12); }
@keyframes sync-pulse { to { opacity: .42; } }
.auth-overlay { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px; background: rgba(3,9,17,.76); backdrop-filter: blur(12px); }
.auth-overlay[hidden] { display: none; }
.auth-card { width: min(100%, 430px); padding: 31px; border: 1px solid rgba(117,157,210,.2); border-radius: 23px; background: linear-gradient(150deg, #10223a, #0a1728 75%); box-shadow: 0 24px 90px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.035); }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; color: #f2f7ff; font-size: 19px; font-weight: 760; letter-spacing: -.6px; }
.auth-brand .brand-mark { width: 38px; height: 25px; }
.auth-card > .eyebrow { margin-bottom: 9px; color: #6ca7ef; }
.auth-card h1 { margin: 0; color: #f1f6ff; font-size: clamp(25px, 7vw, 31px); line-height: 1.12; letter-spacing: -1.2px; }
.auth-intro { margin: 10px 0 23px; color: #9eafc5; font-size: 13px; line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 19px; border: 1px solid rgba(129,159,198,.12); border-radius: 12px; background: rgba(1,9,19,.25); }
.auth-tab { min-height: 36px; border-radius: 9px; color: #90a2bb; background: transparent; font-size: 11px; font-weight: 650; cursor: pointer; }
.auth-tab.active { color: #ecf5ff; background: #1c3554; box-shadow: 0 1px 3px rgba(0,0,0,.24); }
#auth-form { display: grid; gap: 13px; }
.auth-field { display: grid; gap: 7px; color: #bbc9da; font-size: 11px; font-weight: 600; }
.auth-field input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid rgba(131,162,204,.19); border-radius: 10px; outline: 0; color: #f0f6ff; background: rgba(2,11,21,.45); font-size: 13px; }
.auth-field input:focus { border-color: rgba(74,145,255,.7); box-shadow: 0 0 0 3px rgba(74,145,255,.12); }
.auth-field input::placeholder { color: #70839d; }
.auth-submit { width: 100%; min-height: 43px; margin-top: 2px; font-size: 12px; }
.auth-submit:disabled { opacity: .65; cursor: progress; }
.auth-error { padding: 10px 11px; border: 1px solid rgba(255,119,136,.2); border-radius: 9px; color: #ffb0b8; background: rgba(112,30,47,.18); font-size: 11px; line-height: 1.45; }
.auth-local-button { width: 100%; min-height: 40px; margin-top: 12px; border: 1px solid rgba(131,162,204,.15); border-radius: 10px; color: #c3d1e2; background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.auth-local-button:hover { background: rgba(255,255,255,.045); }
.auth-footnote { margin: 16px 3px 0; color: #768aa5; font-size: 10px; line-height: 1.5; text-align: center; }
.auth-legal { margin: 9px 0 0; color: #8296ae; font-size: 10px; text-align: center; }
.auth-legal a { color: #93bfff; text-underline-offset: 3px; }

/* Desktop workspace layout based on the supplied Whalyn landing reference. */
body { background: radial-gradient(ellipse at 50% -12%, #0e2b50 0, #07182c 42%, #061225 100%); }
.app-frame {
  width: calc(100% - 40px); height: calc(100dvh - 38px); margin: 19px auto;
  grid-template-columns: 248px 363px minmax(0, 1fr) 356px;
  grid-template-rows: 84px minmax(0, 1fr);
  overflow: hidden; border: 1px solid rgba(136,167,207,.2); border-radius: 15px;
  background: #081525; box-shadow: 0 22px 64px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
}
.nav-rail { grid-column: 1; grid-row: 1 / -1; padding: 19px 13px 14px; }
.window-controls { height: 14px; display: flex; align-items: center; gap: 10px; padding-left: 6px; margin: 0 0 30px; }
.window-controls span { width: 14px; height: 14px; display: block; border-radius: 50%; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.window-controls span:nth-child(1) { background: #f0525b; }
.window-controls span:nth-child(2) { background: #f6c344; }
.window-controls span:nth-child(3) { background: #25c775; }
.brand-lockup { min-height: 49px; margin-bottom: 20px; }
.brand-mark { width: 48px; height: 32px; }
.brand-name { font-size: 25px; }
.rail-section-label { display: none; }
.nav-item { min-height: 48px; gap: 13px; border-radius: 11px; font-size: 14px; }
.nav-item .icon { width: 21px; height: 21px; }
.nav-item.active::before { left: -13px; top: 8px; bottom: 8px; }
.rail-rule { margin: 18px 8px 17px; }
.nav-rail > .profile-row { display: none; }
.storage-card { padding: 10px 10px 9px; margin-bottom: 4px; }
.storage-caption { font-size: 9px; }

.library-pane { grid-column: 2; grid-row: 2; min-height: 0; }
.app-frame[data-view="home"] .library-heading { display: none; }
.library-tabs { min-height: 58px; padding-inline: 14px; gap: 7px; }
.library-tab { min-height: 51px; padding-inline: 11px; font-size: 14px; }
.tab-more { width: 35px; height: 35px; }
.list-toolbar { min-height: 65px; padding-inline: 17px; }
.filter-pills { gap: 7px; }
.filter-pill { min-height: 36px; padding-inline: 14px; font-size: 11px; }
.filter-button { width: 36px; height: 36px; }
.note-list { padding: 0 10px 16px; }
.note-row { grid-template-columns: 76px minmax(0,1fr); gap: 13px; padding: 10px; margin: 3px 0; border-radius: 13px; }
.note-thumb { width: 76px; height: 74px; border-radius: 9px; }
.note-row-title { font-size: 14px; }
.note-row-preview { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.note-row-meta { margin-top: 6px; font-size: 10px; }
.list-footer { min-height: 45px; font-size: 10px; }

.main-pane { display: contents; }
.workspace-bar {
  grid-column: 2 / -1; grid-row: 1; height: auto; min-height: 84px;
  gap: 12px; padding: 0 23px; border-bottom: 1px solid rgba(143,172,208,.14);
  background: rgba(8,20,36,.94); backdrop-filter: blur(18px);
}
.breadcrumbs { display: none; }
.workspace-search-wrap { max-width: none; height: 46px; margin-left: 0; padding-inline: 16px; border-radius: 14px; }
.workspace-search-wrap > .icon { width: 20px; height: 20px; }
.workspace-search-wrap input { font-size: 15px; }
.workspace-search-wrap kbd { padding: 4px 7px; font-size: 11px; }
.sync-pill { display: none; }
.new-note-button { min-width: 136px; height: 46px; font-size: 13px; }
.new-note-button .icon { width: 20px; height: 20px; }
.assistant-button { width: 46px; height: 46px; }
.assistant-button .icon { width: 20px; height: 20px; }
.user-avatar { width: 45px; height: 45px; font-size: 14px; }
.profile-chevron { width: 27px; height: 40px; margin-left: -7px; }
.workspace-content {
  grid-column: 3 / -1; grid-row: 2; min-width: 0; min-height: 0; height: auto; flex: initial;
  grid-template-columns: minmax(0,1fr) 356px;
  background: radial-gradient(ellipse at 48% -12%, rgba(32,75,128,.13), transparent 39%), #081421;
}
.editor-column { min-height: 0; }
.note-editor { width: 100%; max-width: 950px; padding: 27px 5px 52px 22px; }
.editor-breadcrumb { margin: 1px 0 18px; font-size: 13px; }
.note-title { min-height: 47px; margin: 0 0 5px; font-size: clamp(34px,3vw,41px); letter-spacing: -1.6px; }
.note-subtitle { display: none; }
.editor-toolbar { min-height: 37px; gap: 4px; margin: 0 0 13px; padding: 0 0 2px; border: 0; border-bottom: 1px solid rgba(143,172,208,.13); border-radius: 0; background: transparent; }
.tool-button { min-width: 34px; height: 34px; font-size: 13px; }
.tool-button .icon { width: 19px; height: 19px; }
.toolbar-rule { height: 20px; margin-inline: 7px; }
.share-button { height: 35px; padding-inline: 11px; font-size: 12px; }
.editor-toolbar .icon-button { width: 35px; height: 35px; }
.editor-toolbar .icon-button .icon { width: 17px; height: 17px; }
.cover-image { height: clamp(190px, 17vw, 240px); border-radius: 14px; }
.cover-label { display: none; }
.section-title { margin: 10px 0 8px; font-size: 20px; letter-spacing: -.4px; }
.cover-image + .section-title { margin-bottom: 3px; }
.project-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 1px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.project-field { grid-template-columns: 10px auto minmax(0,1fr); gap: 6px; min-height: 24px; font-size: 13px; }
.project-field::before { content: '•'; grid-column: 1; color: #e1eaf6; font-size: 15px; line-height: 1.35; }
.project-field .icon { display: none; }
.project-field strong { grid-column: 2; font-weight: 650; }
.project-field span:last-child { grid-column: 3; overflow: visible; color: #e0e8f3; white-space: normal; }
.project-field.wide-field { grid-column: auto; }
.reminder-control { position: relative; width: 18px; height: 19px; display: flex; align-items: center; gap: 6px; }
.reminder-control > span { display: none; }
.reminder-control::before { content: ''; position: absolute; inset: 2px; border: 1px solid #9aafc9; border-radius: 3px; background: linear-gradient(#9aafc9,#9aafc9) 0 4px/100% 1px no-repeat; }
.reminder-control input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.reminder-control.has-reminder { width: auto; min-width: 18px; height: 24px; }
.reminder-control.has-reminder::before { display: none; }
.reminder-control.has-reminder > span { display: inline; color: #c6d5e7; font-size: 11px; }
.reminder-control.has-reminder input { position: relative; inset: auto; width: min(100%,190px); height: 22px; padding: 4px 6px; border: 1px solid rgba(116,154,202,.18); border-radius: 7px; opacity: 1; color: #dce9f7; background: rgba(5,15,29,.5); font: inherit; }
.reminder-control.has-reminder input::-webkit-calendar-picker-indicator { filter: invert(.8); opacity: .85; cursor: pointer; }
.reminder-control.has-reminder button { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(116,154,202,.18); border-radius: 7px; background: rgba(255,255,255,.04); color: #aec5e3; font: inherit; cursor: pointer; }
.tasks-card, .note-body-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.tasks-header { display: none; }
.task-row { min-height: 30px; gap: 11px; font-size: 13px; }
.task-check { width: 19px; height: 19px; border-radius: 5px; }
.task-copy { padding: 3px 0; }
.task-add { min-height: 26px; margin-top: 5px; padding: 0 7px; border: 0; color: #8ca9d0; background: transparent; font-size: 11px; }
.reminder-tool { position: relative; overflow: hidden; }
.reminder-tool input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.clear-reminder-tool { color: #f1a79f; }
.section-title > .task-progress { display: none; }
.note-body-card { min-height: 0; color: #e1e8f3; font-size: 14px; line-height: 1.55; }
.note-body-card [contenteditable="true"] { min-height: 28px; }
.tag-row { gap: 8px; }
.tag-chip { min-height: 32px; padding-inline: 12px; font-size: 11px; }
.editor-lower-grid { display: none; }

.inspector { padding: 18px 16px 20px; border-left: 1px solid rgba(143,172,208,.12); background: rgba(8,21,36,.66); }
.inspector-tabs { min-height: 50px; gap: 3px; padding: 4px; border-radius: 12px; }
.inspector-tab { min-height: 41px; gap: 6px; border-radius: 8px; font-size: 11px; }
.inspector-tab .icon { width: 16px; height: 16px; }
.inspector-tab.active { background: linear-gradient(110deg,rgba(49,110,216,.3),rgba(25,68,124,.18)); box-shadow: inset 0 -2px #4287ff; }
#inspector-content { padding-top: 14px; }
.inspector-section { padding: 15px 14px 14px; margin: 0 0 14px; border: 1px solid rgba(134,162,196,.12); border-radius: 13px; background: rgba(11,27,45,.8); }
.inspector-section h3 { margin-bottom: 11px; font-size: 14px; }
.attachment-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.attachment-section-heading .mini-card-count { flex: 0 0 auto; min-width: 23px; height: 23px; font-size: 10px; }
.inspector-info-card .detail-row { border-bottom: 1px solid rgba(134,162,196,.1); }
.inspector-info-card .detail-row:nth-child(4) { border-bottom: 0; }
.inspector-tags-block { padding-top: 13px; margin-top: 10px; border-top: 1px solid rgba(134,162,196,.1); }
.inspector-tags-block h3 { margin-bottom: 9px; }
.detail-row { grid-template-columns: minmax(80px,.8fr) minmax(0,1.2fr); min-height: 37px; font-size: 12px; }
.detail-row strong { font-size: 12px; }
.owner-value { gap: 8px; }
.owner-value .avatar { width: 27px; height: 27px; font-size: 9px; }
.detail-tag { min-height: 29px; padding-inline: 10px; font-size: 10px; }
.inspector-attachment { gap: 7px; }
.inspector-attachment .attachment-tile { border-radius: 8px; }
.inspector-section .add-attachment { min-height: 36px; font-size: 11px; }
.related-item { grid-template-columns: 38px minmax(0,1fr) 14px; gap: 9px; padding: 7px 0; }
.related-icon { width: 38px; height: 38px; border-radius: 9px; }
.related-icon .icon { width: 19px; height: 19px; }
.related-copy strong { font-size: 11px; }
.related-copy small { font-size: 10px; }
.related-link-button { min-height: 28px; font-size: 10px; }
.more-related { padding-top: 10px; font-size: 11px; }
.connection-card { display: none; }
.mobile-assistant-tool { display: none; }
.assistant-panel { padding: 16px 14px 14px; }
.assistant-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.assistant-heading h3 { margin: 0 0 5px; font-size: 15px; }
.assistant-heading p { margin: 0; color: #9aacc2; font-size: 11px; line-height: 1.45; }
.assistant-panel-close { display: none; flex: 0 0 auto; width: 31px; height: 31px; margin: -4px -4px 0 0; color: #a9bbd2; }
.assistant-field { display: grid; gap: 7px; margin-top: 16px; color: #b7c6d9; font-size: 11px; font-weight: 600; }
.assistant-field input, .assistant-field textarea { width: 100%; min-width: 0; border: 1px solid rgba(129,161,201,.18); border-radius: 9px; outline: 0; padding: 10px 11px; color: #e5edf8; background: rgba(5,15,29,.5); font: inherit; font-size: 12px; font-weight: 400; }
.assistant-field input { height: 39px; }
.assistant-field textarea { min-height: 99px; resize: vertical; line-height: 1.5; }
.assistant-field input::placeholder, .assistant-field textarea::placeholder { color: #758aa4; }
.assistant-field input:focus, .assistant-field textarea:focus { border-color: rgba(75,140,237,.62); box-shadow: 0 0 0 3px rgba(74,145,255,.1); }
.assistant-field input:disabled, .assistant-field textarea:disabled { opacity: .65; }
.assistant-key-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: #8194ad; font-size: 10px; }
.assistant-clear-key { padding: 3px 0; border: 0; color: #8bb8fb; background: none; font-size: 10px; cursor: pointer; }
.assistant-clear-key:disabled { opacity: .42; cursor: default; }
.assistant-ask-button { width: 100%; min-height: 39px; justify-content: center; gap: 7px; margin-top: 14px; font-size: 11px; }
.assistant-ask-button .icon { width: 16px; height: 16px; }
.assistant-ask-button:disabled { opacity: .46; cursor: not-allowed; }
.assistant-response { margin-top: 15px; padding: 13px; border: 1px solid rgba(115,157,211,.16); border-radius: 11px; color: #dce8f7; background: rgba(18,38,62,.76); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.assistant-response h4 { margin: 0 0 7px; color: #a8caff; font-size: 11px; }
.assistant-response p { margin: 0; }
.assistant-error { border-color: rgba(232,132,132,.24); color: #ffc0c0; background: rgba(76,28,37,.3); }
.assistant-thinking { color: #a8caff; }
.assistant-disclosure { margin-top: 15px; padding-top: 11px; border-top: 1px solid rgba(134,162,196,.1); color: #8295ad; font-size: 9px; line-height: 1.55; }
.assistant-disclosure p { margin: 0 0 8px; }
.assistant-disclosure p:last-child { margin-bottom: 0; }
.assistant-disclosure code { color: #b8cbee; font-size: 9px; }
.assistant-disclosure a { color: #82b1fb; text-underline-offset: 2px; }
.assistant-secure-notice { margin-top: 16px; padding: 12px; border: 1px solid rgba(231,172,111,.18); border-radius: 10px; color: #e9cba9; background: rgba(71,48,27,.22); font-size: 11px; line-height: 1.5; }
.assistant-empty-close { display: block; padding: 8px 0 0; border: 0; color: #8bb8fb; background: none; font-size: 11px; cursor: pointer; }

@media (min-width: 721px) {
  .project-card + .section-title { margin-top: 2px; }
  .tasks-card + .section-title { margin-top: 6px; }
  .task-add { display: none; }
  .tasks-card:hover .task-add, .tasks-card:focus-within .task-add { display: inline-flex; min-height: 29px; height: auto; margin-top: 4px; padding-inline: 7px; }
}

@media (max-width: 1420px) {
  .app-frame { width: calc(100% - 32px); height: calc(100dvh - 30px); margin: 15px auto; grid-template-columns: 220px 300px minmax(0,1fr) 320px; }
  .workspace-content { grid-template-columns: minmax(0,1fr) 320px; }
  .inspector { padding-inline: 13px; }
  .workspace-bar { padding-inline: 19px; }
}
@media (max-width: 1220px) {
  .app-frame { width: calc(100% - 28px); height: calc(100dvh - 26px); margin: 13px auto; grid-template-columns: 198px 286px minmax(0,1fr); }
  .workspace-content { grid-column: 3 / -1; grid-template-columns: minmax(0,1fr); }
  .inspector { display: none; }
  .workspace-bar { grid-column: 2 / -1; min-height: 76px; padding-inline: 17px; gap: 9px; }
  .workspace-search-wrap { height: 43px; }
  .new-note-button { min-width: 118px; height: 42px; }
  .assistant-button { width: 42px; height: 42px; }
  .user-avatar { width: 41px; height: 41px; }
  .note-editor { padding-inline: clamp(20px,2.5vw,34px); }
  .editor-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .editor-mini-card { padding: 12px; border: 1px solid rgba(116,154,202,.12); border-radius: 14px; background: rgba(14,31,51,.72); }
  .mini-card-head h3 { font-size: 12px; }
  .attachment-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .attachment-tile { border-radius: 9px; }
  .add-attachment { min-height: 30px; font-size: 9px; }
  .related-item { grid-template-columns: 31px minmax(0,1fr) 14px; gap: 8px; padding: 5px 0; }
  .related-icon { width: 31px; height: 31px; }
  .related-copy strong { font-size: 9px; }
  .related-copy small { font-size: 8px; }
}

@media (max-width: 1220px) {
  .app-frame { position: relative; }
  .app-frame.assistant-open .inspector { position: absolute; z-index: 7; top: 84px; right: 10px; bottom: 10px; display: block; width: min(360px,calc(100% - 20px)); overflow-y: auto; border: 1px solid rgba(143,172,208,.2); border-radius: 17px; background: #0a192b; box-shadow: 0 24px 65px rgba(0,0,0,.48); }
  .app-frame.assistant-open .assistant-panel-close { display: grid; }
}
@media (max-width: 970px) and (min-width: 721px) {
  .app-frame { grid-template-columns: 70px 278px minmax(0,1fr); }
  .nav-rail { align-items: center; padding-inline: 8px; }
  .window-controls { justify-content: center; padding: 0; margin-bottom: 25px; }
  .window-controls span { width: 10px; height: 10px; }
  .brand-lockup { justify-content: center; padding: 0; }
  .brand-name, .rail-section-label, .nav-item > span:not(.icon), .nav-count, .rail-rule, .storage-card, .profile-copy, .profile-row > .icon { display: none; }
  .brand-mark { width: 43px; height: 29px; }
  .primary-nav, .secondary-nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.active::before { left: -8px; }
  .nav-rail > .profile-row { display: flex; justify-content: center; margin-top: auto; padding: 0; }
  .workspace-bar { padding-inline: 12px; gap: 7px; }
  .workspace-search-wrap { min-width: 90px; padding-inline: 10px; }
  .workspace-search-wrap input { font-size: 12px; }
  .workspace-search-wrap kbd { display: none; }
  .new-note-button { min-width: 102px; padding-inline: 9px; font-size: 11px; }
  .assistant-button { width: 37px; height: 38px; }
  .user-avatar { width: 36px; height: 36px; }
  .profile-chevron { width: 22px; margin-left: -7px; }
  .note-editor { padding-inline: 20px; }
}
@media (max-width: 720px) {
  body { background: #081321; }
  .app-frame { width: 100%; height: 100dvh; margin: 0; display: block; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
  .window-controls { display: none; }
  .app-frame[data-view="home"] .library-heading { display: block; }
  .main-pane { display: none; }
  .app-frame.mobile-editor .main-pane { display: flex; }
  .app-frame.mobile-editor .mobile-back { display: none; }
  .app-frame.mobile-editor .mobile-brand { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; padding: 0; color: #edf4ff; background: transparent; }
  .app-frame.mobile-editor .mobile-brand .brand-mark { width: 34px; height: 23px; }
  .app-frame.mobile-editor .mobile-brand strong { font-size: 16px; font-weight: 700; letter-spacing: -.35px; }
  .app-frame.mobile-editor .mobile-editor-tabs { min-height: 45px; display: flex; flex: 0 0 45px; gap: 3px; padding: 0 13px; }
  .app-frame.mobile-editor .mobile-editor-tab { min-height: 44px; padding-inline: 10px; font-size: 11px; }
  .app-frame.mobile-editor .mobile-editor-tabs .tab-more { margin-left: auto; }
  .workspace-bar { height: 57px; min-height: 57px; gap: 6px; padding: 0 10px; }
  .workspace-content { display: block; min-height: 0; height: auto; overflow: hidden; }
  .note-editor { width: 100%; padding: 12px 17px 30px; }
  .editor-breadcrumb { margin: 1px 0 9px; font-size: 9px; }
  .note-title { min-height: 42px; margin: 4px 0 5px; font-size: clamp(27px,7vw,34px); letter-spacing: -1.15px; }
  .note-subtitle { display: flex; }
  .editor-toolbar { min-height: 43px; gap: 0; margin: 10px 0 8px; padding: 0 3px; border: 1px solid rgba(116,150,191,.11); border-radius: 12px; background: rgba(16,33,53,.68); overflow-x: auto; }
  .cover-image { height: clamp(170px,52vw,250px); border-radius: 13px; }
  .section-title { margin-top: 15px; font-size: 15px; }
  .project-card { gap: 6px; padding: 11px 12px; border: 1px solid rgba(116,154,202,.13); border-radius: 14px; background: linear-gradient(135deg,rgba(17,37,61,.9),rgba(13,29,47,.9)); }
  .project-field { grid-template-columns: 18px 82px minmax(0,1fr); min-height: 22px; font-size: 10px; }
  .project-field::before { display: none; }
  .project-field .icon { display: block; width: 15px; height: 15px; }
  .project-field strong { grid-column: auto; }
  .project-field span:last-child { grid-column: auto; overflow: hidden; white-space: nowrap; }
  .project-field.wide-field { grid-column: auto; }
  .tasks-card, .note-body-card { padding: 10px 11px; border: 1px solid rgba(116,154,202,.12); border-radius: 14px; background: rgba(14,31,51,.78); }
  .tasks-header { display: flex; }
  .task-row { min-height: 30px; font-size: 10px; }
  .task-check { width: 17px; height: 17px; }
  .note-body-card { font-size: 11px; }
  .tag-chip { min-height: 27px; font-size: 9px; }
  .editor-lower-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 15px; }
}

@media (max-width: 720px) {
  .sync-pill { min-height: 30px; padding-inline: 8px; font-size: 9px; }
  .app-frame.assistant-open .inspector { top: 9px; right: 9px; bottom: calc(69px + env(safe-area-inset-bottom)); left: 9px; width: auto; padding: 15px; border-radius: 18px; }
  .mobile-assistant-tool { display: inline-grid; }
  .auth-overlay { align-items: flex-start; padding: max(20px, env(safe-area-inset-top)) 15px max(20px, env(safe-area-inset-bottom)); }
  .auth-card { padding: 24px 21px; margin: auto 0; border-radius: 19px; }
}

/* Public landing page, shown before a visitor enters the workspace. */
html.landing-page-active, html.landing-page-active body {
  height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto;
}
body.landing-page-active { background: #061326; }
.public-landing { min-height: 100vh; overflow: hidden; color: #edf5ff; background: #061326; }
.public-landing button, .public-landing a { -webkit-tap-highlight-color: transparent; }
.landing-hero-scene {
  position: relative; isolation: isolate; min-height: 720px; overflow: hidden;
  background:
    radial-gradient(ellipse at 73% 38%, rgba(30,89,155,.31), transparent 35%),
    radial-gradient(ellipse at 25% 72%, rgba(10,60,105,.31), transparent 42%),
    linear-gradient(180deg, #07182c 0%, #081b31 56%, #071a30 100%);
}
.landing-hero-scene::before, .landing-hero-scene::after { position: absolute; z-index: -1; content: ''; pointer-events: none; }
.landing-hero-scene::before {
  inset: 0; opacity: .52;
  background-image: radial-gradient(1px 1px at 12% 19%, #c6e5ff 80%, transparent), radial-gradient(1px 1px at 31% 12%, #a8d4ff 80%, transparent), radial-gradient(1.5px 1.5px at 52% 23%, #b9e5ff 75%, transparent), radial-gradient(1px 1px at 84% 15%, #d1eaff 80%, transparent), radial-gradient(1px 1px at 91% 36%, #d1eaff 80%, transparent), radial-gradient(1px 1px at 8% 43%, #b9dfff 80%, transparent), radial-gradient(1px 1px at 61% 9%, #c6e5ff 80%, transparent);
}
.landing-hero-scene::after {
  right: -10%; bottom: 0; left: -10%; height: 245px; opacity: .84;
  background: linear-gradient(180deg, rgba(12,55,93,0), rgba(7,47,80,.4) 34%, rgba(5,34,62,.93));
}
.landing-header {
  position: relative; z-index: 4; width: min(1320px, calc(100% - 72px)); height: 88px; display: flex; align-items: center; gap: 42px; margin: 0 auto;
  border-bottom: 1px solid rgba(166,204,244,.1);
}
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: #f2f7ff; text-decoration: none; font-size: 22px; font-weight: 780; letter-spacing: -.8px; white-space: nowrap; }
.landing-brand img { width: 39px; height: 26px; filter: drop-shadow(0 4px 12px rgba(46,129,255,.29)); }
.landing-nav { display: flex; align-items: center; gap: clamp(23px, 3.1vw, 45px); margin-left: auto; }
.landing-nav a, .landing-signin { color: #bfccdd; text-decoration: none; font-size: 12px; font-weight: 560; transition: color .16s ease; }
.landing-nav a:hover, .landing-signin:hover { color: #fff; }
.landing-header-actions { display: flex; align-items: center; gap: 22px; }
.landing-signin { padding: 10px 0; border: 0; background: transparent; cursor: pointer; }
.landing-header-cta { min-height: 42px; padding: 0 18px; border: 1px solid rgba(148,188,255,.28); border-radius: 11px; color: #f5f9ff; background: rgba(35,89,163,.42); font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.08); transition: background .18s, transform .18s; }
.landing-header-cta:hover { background: rgba(52,113,204,.58); transform: translateY(-1px); }
.landing-hero {
  position: relative; z-index: 1; width: min(1320px, calc(100% - 72px)); min-height: 575px; display: grid;
  grid-template-columns: minmax(360px, .83fr) minmax(0, 1.17fr); align-items: center; gap: 30px; padding: 53px 0 76px; margin: 0 auto;
}
.landing-copy { position: relative; z-index: 2; max-width: 560px; padding: 0 0 23px 5px; }
.landing-eyebrow { display: flex; align-items: center; gap: 9px; color: #9ccaff; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.landing-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #58c7ec; box-shadow: 0 0 13px rgba(72,199,242,.75); }
.landing-copy h1 { max-width: 590px; margin: 23px 0 19px; color: #f3f7fe; font-size: clamp(44px, 5.2vw, 70px); font-weight: 680; line-height: 1.045; letter-spacing: -3.4px; }
.landing-copy h1 em, .landing-story-heading h2 em { color: #8cc9ff; font-style: normal; }
.landing-intro { max-width: 470px; margin: 0; color: #a9bad0; font-size: 15px; line-height: 1.75; }
.landing-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.landing-primary-cta { min-height: 49px; display: inline-flex; align-items: center; gap: 19px; padding: 0 20px; border: 1px solid rgba(100,158,255,.44); border-radius: 12px; color: #fff; background: linear-gradient(115deg, #387be9, #4266dc); box-shadow: 0 10px 28px rgba(32,94,211,.3), inset 0 1px rgba(255,255,255,.18); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.landing-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(32,94,211,.39), inset 0 1px rgba(255,255,255,.18); }
.landing-primary-cta span { font-size: 17px; line-height: 1; }
.landing-secondary-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 0; border: 0; color: #c3d0df; background: transparent; font-size: 11px; font-weight: 620; cursor: pointer; }
.landing-secondary-cta:hover { color: #fff; }
.landing-play { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(168,204,243,.34); border-radius: 50%; color: #c1dcfb; font-size: 8px; }
.landing-promises { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; color: #849ab4; font-size: 10px; }
.landing-promises span { display: flex; align-items: center; gap: 6px; }
.landing-promises i { color: #66d9bd; font-size: 12px; font-style: normal; }
.landing-promises span + span i { color: #80cfff; }
.landing-product-stage { position: relative; min-width: 0; min-height: 485px; perspective: 1100px; }
.landing-moon { position: absolute; top: 7%; right: 11%; width: 190px; height: 190px; border: 1px solid rgba(175,218,255,.11); border-radius: 50%; background: radial-gradient(circle at 43% 40%, rgba(68,145,210,.15), rgba(35,83,141,.03) 64%, transparent 66%); box-shadow: 0 0 60px rgba(51,135,202,.12); }
.landing-whale { position: absolute; top: 5%; right: 7%; width: min(83%, 560px); opacity: .85; filter: blur(.2px); }
.landing-laptop { position: absolute; top: 37px; right: 0; width: min(790px, 112%); transform: rotateY(-8deg) rotateX(2deg); transform-origin: 58% 57%; filter: drop-shadow(0 31px 30px rgba(0,0,0,.38)); }
.landing-screen { position: relative; height: clamp(330px, 29vw, 414px); padding: 8px; overflow: hidden; border: 1px solid rgba(191,217,249,.47); border-radius: 15px 15px 8px 8px; background: linear-gradient(145deg, #1a2b43, #080e1a 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.27), 0 0 0 1px rgba(0,0,0,.5); }
.preview-toolbar { height: 35px; display: flex; align-items: center; gap: 16px; padding: 0 9px; border-bottom: 1px solid rgba(144,171,205,.12); color: #ced8e8; }
.preview-brand { display: flex; align-items: center; gap: 5px; min-width: 82px; color: #f0f6ff; font-size: 10px; font-weight: 720; }
.preview-brand img { width: 20px; height: 13px; }
.preview-search { height: 23px; display: flex; align-items: center; gap: 5px; flex: 1; max-width: 310px; padding: 0 9px; border: 1px solid rgba(149,179,216,.11); border-radius: 7px; color: #8294ac; background: rgba(15,31,51,.9); font-size: 7px; }
.preview-search span { color: #c6d8ef; font-size: 13px; }
.preview-profile { width: 22px; height: 22px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: #dcecff; background: #315887; font-size: 7px; font-weight: 700; }
.preview-workspace { height: calc(100% - 35px); display: grid; grid-template-columns: 16% 27% minmax(0,1fr); min-height: 0; }
.preview-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 13px 7px; border-right: 1px solid rgba(142,169,204,.11); background: linear-gradient(180deg, #0b1a2c, #091727); }
.preview-nav-item { min-height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 6px; overflow: hidden; border-radius: 6px; color: #9eafc4; font-size: 7px; white-space: nowrap; }
.preview-nav-item b { width: 12px; color: #91b7e8; font-size: 10px; font-weight: 500; text-align: center; }
.preview-nav-item.active { color: #ecf5ff; background: rgba(58,113,199,.35); }
.preview-nav-item small { margin-left: auto; color: #a9caef; font-size: 6px; }
.preview-sidebar-rule { height: 1px; margin: 7px 4px; background: rgba(153,179,212,.11); }
.preview-notes-list { min-width: 0; padding: 13px 8px; border-right: 1px solid rgba(142,169,204,.11); background: #0a1727; }
.preview-list-title { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 10px; color: #e0e9f4; font-size: 9px; font-weight: 700; }
.preview-list-title span { color: #9ac5ff; font-size: 14px; }
.preview-note { min-height: 54px; display: flex; gap: 6px; padding: 6px 4px; overflow: hidden; border-bottom: 1px solid rgba(153,179,212,.08); color: #dbe6f4; }
.preview-note.active { border-radius: 6px; background: rgba(39,83,150,.4); }
.preview-note > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.preview-note b { overflow: hidden; font-size: 7px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.preview-note small, .preview-note i { overflow: hidden; color: #92a5bc; font-size: 6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.preview-note i { color: #7489a3; }
.preview-note-thumb { width: 36px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 5px; }
.lake-thumb { background: url('./assets/atlas-lake.png') center / cover; }
.diagram-thumb { color: #8ad8e8; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(102,183,218,.16) 6px 7px), #152a3b; font-size: 19px; }
.ideas-thumb { color: #c1a7ff; background: linear-gradient(135deg,#493d76,#1d294b); }
.pages-thumb { color: #e4eefb; background: linear-gradient(135deg,#d8e1eb,#a9bacd); }
.preview-document { min-width: 0; padding: 16px 15px 10px; overflow: hidden; color: #eaf1f9; background: linear-gradient(180deg, #0d1c2d, #0b1828); }
.preview-breadcrumb { overflow: hidden; color: #7f94ae; font-size: 6px; font-weight: 700; letter-spacing: .8px; text-overflow: ellipsis; white-space: nowrap; }
.preview-breadcrumb span { padding: 0 4px; color: #bdcce0; }
.preview-document h2 { margin: 10px 0 6px; font-size: clamp(13px,1.45vw,20px); font-weight: 690; letter-spacing: -.6px; }
.preview-tools { height: 22px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid rgba(153,179,212,.12); color: #9eafc4; font-size: 8px; }
.preview-cover { height: 29%; min-height: 90px; max-height: 142px; margin: 9px 0 9px; border-radius: 6px; background: linear-gradient(0deg,rgba(5,14,25,.1),rgba(5,14,25,.02)), url('./assets/atlas-lake.png') center 54% / cover; box-shadow: inset 0 0 0 1px rgba(203,223,245,.1); }
.preview-document h3 { margin: 0 0 4px; font-size: 9px; }
.preview-document > p { max-width: 390px; margin: 0 0 8px; color: #a9b9cc; font-size: 7px; line-height: 1.45; }
.preview-task { min-height: 17px; display: flex; align-items: center; gap: 6px; color: #b5c5d9; font-size: 7px; }
.preview-task i { width: 10px; height: 10px; display: grid; place-items: center; border: 1px solid #8eb7f1; border-radius: 3px; color: #fff; font-size: 7px; font-style: normal; }
.preview-task:first-of-type i { background: #3d84ff; }
.preview-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.preview-tags span { padding: 4px 6px; border: 1px solid rgba(143,174,214,.1); border-radius: 20px; color: #9fb5cf; background: rgba(32,56,83,.57); font-size: 6px; }
.landing-laptop-base { width: 106%; height: 16px; margin: -1px 0 0 -3%; border: 1px solid rgba(198,216,239,.25); border-radius: 0 0 45% 45% / 0 0 85% 85%; background: linear-gradient(180deg,#697c91 0,#283a50 30%,#111f32 100%); box-shadow: 0 9px 13px rgba(0,0,0,.35); }
.landing-phone { position: absolute; z-index: 3; right: 0; bottom: 21px; width: 161px; height: 324px; padding: 17px 10px 12px; overflow: hidden; border: 1px solid rgba(205,226,251,.6); border-radius: 24px; color: #eaf3ff; background: linear-gradient(160deg,#102137,#081321 75%); box-shadow: 0 22px 39px rgba(0,0,0,.51), inset 0 0 0 3px rgba(4,10,18,.85); }
.phone-speaker { position: absolute; top: 7px; left: 50%; width: 41px; height: 4px; border-radius: 10px; background: #263a53; transform: translateX(-50%); }
.phone-topline { display: flex; align-items: center; gap: 5px; height: 23px; font-size: 8px; }
.phone-topline img { width: 20px; height: 13px; }
.phone-topline span { margin-left: auto; color: #92a9c4; letter-spacing: 1px; }
.phone-greeting { margin: 13px 0 7px; font-size: 17px; font-weight: 730; letter-spacing: -.5px; }
.phone-search { height: 25px; display: flex; align-items: center; padding: 0 8px; border: 1px solid rgba(145,178,219,.12); border-radius: 8px; color: #8094ae; background: rgba(14,29,48,.9); font-size: 7px; }
.phone-card-image { height: 96px; margin-top: 12px; border-radius: 8px; background: url('./assets/atlas-lake.png') center / cover; }
.phone-card-title { margin-top: 9px; font-size: 10px; font-weight: 700; }
.phone-card-copy { margin-top: 4px; color: #99abc1; font-size: 7px; line-height: 1.45; }
.phone-progress { display: flex; gap: 4px; margin-top: 10px; }
.phone-progress span { height: 4px; flex: 1; border-radius: 5px; background: #315b8d; }
.phone-progress span:first-child { background: linear-gradient(90deg,#5294ff,#50c7ef); }
.phone-mini-note { display: flex; align-items: center; gap: 7px; padding: 9px 0; margin-top: 6px; border-top: 1px solid rgba(145,178,219,.11); }
.phone-mini-note > i { width: 25px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: #d8beff; background: #332c57; font-size: 12px; font-style: normal; }
.phone-mini-note > span { display: grid; gap: 4px; }
.phone-mini-note b { font-size: 7px; }
.phone-mini-note small { color: #8295ad; font-size: 6px; }
.phone-home-indicator { position: absolute; bottom: 5px; left: 50%; width: 43px; height: 3px; border-radius: 10px; background: rgba(228,239,252,.6); transform: translateX(-50%); }
.landing-floating-chip { position: absolute; z-index: 4; right: 4%; bottom: 0; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(148,190,229,.21); border-radius: 10px; color: #cad9eb; background: rgba(9,25,43,.91); box-shadow: 0 12px 25px rgba(0,0,0,.23); font-size: 8px; }
.landing-floating-chip span { color: #91caff; font-size: 13px; }
.landing-wave { position: absolute; z-index: 0; right: -12%; bottom: -165px; left: -12%; height: 270px; border: 1px solid rgba(80,174,219,.12); border-radius: 50% 48% 0 0 / 24% 34% 0 0; background: linear-gradient(180deg,rgba(16,87,129,.15),rgba(8,54,91,.46)); transform: rotate(-2deg); }
.landing-wave::before, .landing-wave::after { position: absolute; content: ''; right: 0; left: 0; height: 180px; border-top: 1px solid rgba(93,195,224,.11); border-radius: 50%; }
.landing-wave::before { top: 27px; transform: rotate(2deg); }
.landing-wave::after { top: 61px; opacity: .7; transform: rotate(-1deg); }
.landing-benefits { width: min(1240px, calc(100% - 72px)); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; padding: 34px 0 40px; margin: 0 auto; border-bottom: 1px solid rgba(138,172,211,.12); }
.landing-benefits article { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.benefit-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(133,172,224,.15); border-radius: 12px; color: #9bcaff; background: linear-gradient(140deg,rgba(31,76,130,.46),rgba(13,37,64,.45)); font-size: 18px; }
.benefit-spaces { color: #c3a7ff; }
.benefit-search { color: #6ed9d5; font-size: 23px; }
.benefit-sync { color: #ffc283; }
.landing-benefits h2 { margin: 2px 0 5px; color: #e8f0fb; font-size: 12px; font-weight: 670; letter-spacing: -.15px; }
.landing-benefits p { max-width: 205px; margin: 0; color: #899cb4; font-size: 10px; line-height: 1.55; }
.landing-story { width: min(1240px, calc(100% - 72px)); padding: 93px 0 105px; margin: 0 auto; }
.landing-story-heading { max-width: 610px; margin: 0 auto 44px; text-align: center; }
.landing-story-heading .landing-eyebrow { justify-content: center; }
.landing-story-heading h2 { margin: 15px 0 12px; color: #f1f5fc; font-size: clamp(34px,4.5vw,50px); font-weight: 670; line-height: 1.12; letter-spacing: -2px; }
.landing-story-heading h2 em { color: #83bfff; }
.landing-story-heading > p { max-width: 490px; margin: 0 auto; color: #95a8c0; font-size: 13px; line-height: 1.7; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.landing-feature-card { min-width: 0; padding: 13px 13px 20px; border: 1px solid rgba(134,170,212,.13); border-radius: 17px; background: linear-gradient(145deg,rgba(16,35,59,.88),rgba(9,24,42,.92)); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.feature-card-art { position: relative; height: 188px; display: flex; flex-direction: column; overflow: hidden; padding: 23px; border: 1px solid rgba(149,183,225,.09); border-radius: 11px; }
.capture-art { background: radial-gradient(circle at 85% 17%,rgba(231,175,123,.15),transparent 33%),linear-gradient(135deg,#182b43,#132237 65%,#0d1d30); }
.capture-art::before, .capture-art::after { position: absolute; content: ''; right: -12%; bottom: -48%; width: 82%; height: 115%; border: 1px solid rgba(110,174,221,.18); border-radius: 50%; transform: rotate(-25deg); }
.capture-art::after { right: 3%; bottom: -61%; opacity: .55; }
.feature-card-art > span { color: #9bb4d1; font-size: 9px; }
.feature-card-art > i { position: absolute; top: 19px; right: 19px; color: #a7caff; font-size: 16px; font-style: normal; }
.feature-card-art > b { margin-top: auto; color: #e9f1fb; font-size: 15px; font-weight: 650; }
.feature-card-art > small { margin-top: 6px; color: #90a4be; font-size: 9px; }
.organize-art { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 73%,rgba(60,120,191,.19),transparent 56%),linear-gradient(140deg,#102a43,#0f1e34); }
.organize-folder { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 8px; border: 1px solid rgba(128,185,255,.29); border-radius: 16px; color: #a8d5ff!important; background: linear-gradient(145deg,rgba(56,119,202,.46),rgba(41,69,136,.25)); font-size: 26px!important; box-shadow: 0 12px 30px rgba(36,100,178,.2); }
.organize-art > b { margin: 0; font-size: 13px; }
.organize-art > small { margin-top: 4px; }
.organize-tag { position: absolute; right: 19px; bottom: 18px; padding: 6px 9px; border: 1px solid rgba(149,183,225,.1); border-radius: 99px; color: #b7c9e0!important; background: rgba(32,60,95,.67); font-size: 8px!important; }
.return-art { justify-content: center; gap: 10px; background: radial-gradient(circle at 17% 90%,rgba(59,164,167,.11),transparent 36%),linear-gradient(140deg,#122a3d,#0d1c2d); }
.return-art > div { height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(148,186,225,.16); border-radius: 8px; color: #8ddbd8; background: rgba(7,19,32,.55); font-size: 13px; }
.return-art > div span { overflow: hidden; color: #afbed0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.return-art > b { margin: 1px 0 0; font-size: 10px; }
.return-art > small { margin: -7px 0 0; }
.return-art > i { max-width: 80%; padding: 7px 9px; border-left: 2px solid #56aaa9; color: #8fa7b8; background: rgba(21,51,66,.47); font-size: 8px; font-style: normal; }
.landing-feature-card h3 { margin: 18px 8px 6px; color: #edf4fc; font-size: 14px; font-weight: 680; }
.landing-feature-card > p { max-width: 310px; margin: 0 8px; color: #91a4bc; font-size: 10px; line-height: 1.65; }
.landing-footer { width: min(1240px, calc(100% - 72px)); min-height: 100px; display: flex; align-items: center; gap: 20px; margin: 0 auto; border-top: 1px solid rgba(138,172,211,.12); }
.landing-footer .landing-brand { font-size: 17px; }
.landing-footer .landing-brand img { width: 31px; height: 21px; }
.landing-footer > p { margin: 0 auto 0 0; color: #7f94ad; font-size: 9px; }
.landing-footer nav { display: flex; align-items: center; gap: 22px; }
.landing-footer nav a, .landing-footer nav button { padding: 8px 0; border: 0; color: #9fb0c5; background: transparent; text-decoration: none; font-size: 9px; cursor: pointer; }
.landing-footer nav a:hover, .landing-footer nav button:hover { color: #f1f6ff; }
.landing-footer > small { color: #71869f; font-size: 8px; }

@media (max-width: 1100px) {
  .landing-hero { grid-template-columns: minmax(315px,.86fr) minmax(0,1.14fr); gap: 10px; }
  .landing-copy h1 { font-size: clamp(43px,5.4vw,62px); }
  .landing-product-stage { min-height: 415px; }
  .landing-laptop { top: 42px; }
  .landing-screen { height: clamp(310px,32vw,365px); }
  .landing-phone { right: -5px; bottom: 11px; width: 143px; height: 292px; }
  .phone-card-image { height: 82px; }
  .landing-benefits { gap: 14px; }
}
@media (max-width: 820px) {
  .landing-hero-scene { min-height: auto; }
  .landing-header, .landing-hero, .landing-benefits, .landing-story, .landing-footer { width: min(100% - 44px, 700px); }
  .landing-header { height: 75px; gap: 20px; }
  .landing-brand { font-size: 20px; }
  .landing-nav { gap: 20px; }
  .landing-nav a { font-size: 10px; }
  .landing-header-actions { gap: 16px; }
  .landing-hero { grid-template-columns: 1fr; gap: 2px; padding: 66px 0 54px; }
  .landing-copy { max-width: 620px; padding-bottom: 0; }
  .landing-copy h1 { max-width: 610px; font-size: clamp(49px,8vw,69px); }
  .landing-intro { max-width: 520px; }
  .landing-product-stage { width: 100%; max-width: 710px; min-height: clamp(370px,58vw,460px); margin: 5px auto 0; }
  .landing-laptop { top: 18px; right: 5%; width: 91%; }
  .landing-screen { height: clamp(300px,48vw,380px); }
  .landing-phone { right: 1%; bottom: 8px; width: 145px; height: 290px; }
  .landing-floating-chip { right: 4%; bottom: -6px; }
  .landing-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 26px; padding: 29px 0 33px; }
  .landing-feature-grid { gap: 12px; }
  .feature-card-art { height: 160px; padding: 18px; }
  .landing-story { padding: 76px 0 82px; }
  .landing-footer { flex-wrap: wrap; gap: 10px 18px; padding: 20px 0; }
  .landing-footer > p { margin-right: auto; }
}
@media (max-width: 560px) {
  .landing-hero-scene { background: radial-gradient(ellipse at 50% 35%,rgba(33,88,151,.26),transparent 45%),linear-gradient(180deg,#07182c,#081b31 69%,#071a30); }
  .landing-header, .landing-hero, .landing-benefits, .landing-story, .landing-footer { width: calc(100% - 36px); }
  .landing-header { height: 68px; gap: 10px; }
  .landing-brand { gap: 7px; font-size: 18px; }
  .landing-brand img { width: 34px; height: 23px; }
  .landing-nav { display: none; }
  .landing-header-actions { gap: 12px; margin-left: auto; }
  .landing-signin { font-size: 10px; }
  .landing-header-cta { min-height: 37px; padding: 0 12px; border-radius: 9px; font-size: 9px; }
  .landing-hero { padding: 48px 0 29px; }
  .landing-eyebrow { font-size: 8px; letter-spacing: 1px; }
  .landing-copy h1 { margin: 17px 0 14px; font-size: clamp(42px,11.2vw,58px); line-height: 1.035; letter-spacing: -2.5px; }
  .landing-intro { font-size: 13px; line-height: 1.65; }
  .landing-hero-actions { gap: 10px; margin-top: 22px; }
  .landing-primary-cta { min-height: 45px; gap: 12px; padding: 0 15px; font-size: 10px; }
  .landing-secondary-cta { gap: 7px; font-size: 9px; }
  .landing-play { width: 21px; height: 21px; }
  .landing-promises { gap: 13px; margin-top: 17px; font-size: 8px; }
  .landing-product-stage { width: calc(100% + 28px); min-height: 309px; margin: 7px -14px -6px; }
  .landing-laptop { top: 5px; right: auto; left: 50%; width: 630px; transform: translateX(-50%) scale(.49); transform-origin: top center; }
  .landing-screen { height: 335px; }
  .landing-phone { right: 3%; bottom: 1px; width: 121px; height: 247px; padding: 15px 8px 10px; border-radius: 20px; }
  .phone-greeting { margin-top: 8px; font-size: 13px; }
  .phone-search { height: 21px; font-size: 6px; }
  .phone-card-image { height: 67px; margin-top: 8px; }
  .phone-card-title { margin-top: 7px; font-size: 8px; }
  .phone-card-copy { font-size: 6px; }
  .phone-progress { margin-top: 7px; }
  .phone-mini-note { padding-top: 7px; margin-top: 4px; }
  .landing-moon { top: 4%; right: 20%; width: 125px; height: 125px; }
  .landing-whale { top: -2%; right: 0; width: 92%; }
  .landing-floating-chip { right: 2%; bottom: -18px; padding: 7px 9px; font-size: 7px; }
  .landing-benefits { gap: 19px 10px; padding: 26px 0 30px; }
  .landing-benefits article { gap: 9px; }
  .benefit-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
  .landing-benefits h2 { font-size: 10px; }
  .landing-benefits p { font-size: 8px; }
  .landing-story { padding: 62px 0 65px; }
  .landing-story-heading { margin-bottom: 28px; }
  .landing-story-heading h2 { font-size: 35px; letter-spacing: -1.5px; }
  .landing-story-heading > p { font-size: 11px; }
  .landing-feature-grid { grid-template-columns: 1fr; gap: 11px; }
  .landing-feature-card { display: grid; grid-template-columns: 116px minmax(0,1fr); align-items: center; gap: 0 12px; padding: 9px; border-radius: 13px; }
  .feature-card-art { height: 112px; grid-row: span 2; padding: 13px; border-radius: 9px; }
  .feature-card-art > span:not(.organize-folder) { font-size: 7px; }
  .feature-card-art > b { font-size: 10px; }
  .feature-card-art > small { font-size: 7px; }
  .feature-card-art > i { top: 11px; right: 10px; font-size: 11px; }
  .organize-folder { width: 36px; height: 36px; margin-bottom: 5px; border-radius: 11px; font-size: 19px!important; }
  .organize-tag { right: 7px; bottom: 7px; padding: 4px 6px; font-size: 6px!important; }
  .return-art { gap: 7px; }
  .return-art > div { height: 26px; gap: 4px; padding: 0 5px; font-size: 10px; }
  .return-art > div span { font-size: 6px; }
  .return-art > i { max-width: 95%; padding: 4px 5px; font-size: 6px; }
  .landing-feature-card h3 { align-self: end; margin: 0 0 4px; font-size: 11px; }
  .landing-feature-card > p { align-self: start; margin: 0; font-size: 8px; line-height: 1.5; }
  .landing-footer { justify-content: space-between; gap: 8px; min-height: 75px; padding: 14px 0; }
  .landing-footer .landing-brand { font-size: 15px; }
  .landing-footer .landing-brand img { width: 26px; height: 17px; }
  .landing-footer > p { display: none; }
  .landing-footer nav { gap: 15px; }
  .landing-footer nav a, .landing-footer nav button { font-size: 8px; }
  .landing-footer > small { font-size: 7px; }
}