@font-face { font-family: Figtree; src: url(fonts/Figtree.ttf); font-weight: 300 900; }@font-face { font-family: Garamond; src: url(fonts/EBGaramond.ttf); font-weight: 400 800; }@font-face { font-family: Garamond; src: url(fonts/EBGaramond-Italic.ttf); font-weight: 400 800; font-style: italic; } /* Colours sampled from the Wispr Flow recording. */:root { --bg: #f3f1ed; --panel: #fbfbf8; --line: #eae5de; --hover: #eae5de; --card: #f3f1ed; --text: #1a1a19; --muted: #656562; --faint: #9a9893; --btn: #181818; --btn-text: #fbfbf8; --chip: #eae5de; --field: #ffffff; --modal: #fbfbf8; --modal-side: #f3f1ed; --shade: rgba(20, 18, 16, .35); --orange: #fc9e40; --orange-line: #181818; --teal-1: #1f5f5a; --teal-2: #2f8f86; --teal-3: #67c6b8; --teal-4: #c3eee6; --cell: #e4e0d9; --purple-bg: #efe4fb; --purple-text: #4a2770; --beta-bg: #f1e6fd; --beta-text: #8a3fcf; --green: #22c58b; --red: #e5484d; --serif: Garamond, "EB Garamond", Georgia, serif; color-scheme: light;}:root[data-theme=dark] { --bg: #1d1d1d; --panel: #181818; --line: #292929; --hover: #292929; --card: #252525; --text: #e5e3e1; --muted: #92908e; --faint: #6d6b69; --btn: #fbfbf8; --btn-text: #181818; --chip: #2a2a2a; --field: #222222; --modal: #1f1f1f; --modal-side: #1b1b1b; --shade: rgba(0, 0, 0, .55); --orange-line: #a55d05; --cell: #333333; --purple-bg: #45265f; --purple-text: #efe2fb; --beta-bg: #f1e6fd; --beta-text: #8a3fcf; color-scheme: dark;} * { box-sizing: border-box; }html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }body { font: 15px/1.45 Figtree, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }button, input, select, textarea { font: inherit; color: inherit; }button { cursor: pointer; border: 0; background: none; padding: 0; }svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }.hidden { display: none !important; }.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }.muted { color: var(--muted); }a { color: inherit; } #app { display: grid; grid-template: 44px 1fr / 216px 1fr; height: 100vh; padding: 0 10px 10px 0; }#app.side-off { grid-template-columns: 0 1fr; }#app.side-off .side { visibility: hidden; } /* top bar */.topbar { grid-column: 1 / 3; display: flex; align-items: center; padding: 0 2px 0 14px; -webkit-app-region: drag; }.topbar .drag { flex: 1; }.top-actions { display: flex; gap: 4px; align-items: center; }.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--text); -webkit-app-region: no-drag; }.icon-btn:hover, .icon-btn.on { background: var(--hover); }.menu-wrap { position: relative; }.menu { -webkit-app-region: no-drag; position: absolute; right: 0; top: 36px; z-index: 30; min-width: 160px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.14); }.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-align: left; white-space: nowrap; }.menu button:hover { background: var(--hover); }.menu .chk { width: 16px; display: inline-grid; }.menu .danger { color: var(--red); } /* sidebar */.side { display: flex; flex-direction: column; padding: 12px 0 6px 24px; overflow: hidden; min-height: 0; }.logo { display: flex; align-items: center; gap: 8px; margin: 0 0 22px 6px; }.logo svg { width: 24px; height: 24px; }.logo span { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.01em; margin-top: -4px; }.nav { display: flex; flex-direction: column; gap: 4px; }.nav button, .side-links button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; width: 100%; text-align: left; }.nav button:hover, .side-links button:hover { background: var(--hover); }.nav button.on { background: var(--hover); }.side-fill { flex: 1; min-height: 12px; }.side-links { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; } /* main panel */.main { position: relative; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; min-height: 0; overflow: hidden; }.scroll { height: 100%; overflow-y: auto; }.scroll::-webkit-scrollbar { width: 10px; }.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--panel); }.page { max-width: 1060px; margin: 0 auto; padding: 38px 48px 60px; }.page.narrow { max-width: 900px; }.page-head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 24px; }.page-head h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; flex: 1; display: flex; align-items: center; gap: 10px; }.head-actions { display: flex; align-items: center; gap: 10px; }.beta { font: 600 12px Figtree; padding: 2px 8px; border-radius: 6px; background: var(--btn); color: var(--btn-text); }.beta.purple { background: var(--beta-bg); color: var(--beta-text); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; background: var(--btn); color: var(--btn-text); font-weight: 500; white-space: nowrap; }.btn:hover { opacity: .9; }.btn.ghost { background: var(--chip); color: var(--text); }.btn.line { background: transparent; color: var(--text); border: 1px solid var(--line); }.btn.orange { background: var(--orange); color: #181818; border: 1px solid var(--orange-line); width: 100%; }.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line); }.btn.sm { height: 30px; padding: 0 12px; font-size: 13.5px; }.btn:disabled { opacity: .45; cursor: default; }.link-btn { font-weight: 600; } /* tabs */.tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }.tabs button { padding: 8px 0 10px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 8px; }.tabs button.on { color: var(--text); border-color: var(--text); }.tabs .spacer { flex: 1; }.tabs .tools { display: flex; gap: 14px; color: var(--muted); padding-bottom: 6px; }.tabs .tools button { padding: 0; border: 0; color: var(--muted); } /* banners: CSS stand-ins for the blurred photographs */.banner { position: relative; overflow: hidden; border-radius: 14px; padding: 36px 32px; color: #fff; margin-bottom: 36px; border: 1px solid var(--line); background: #0a0a0a; }.banner::before { content: ""; position: absolute; inset: -40px; filter: blur(28px); z-index: 0; }.banner > * { position: relative; z-index: 1; }.banner h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -.02em; }.banner p { margin: 0 0 6px; max-width: 700px; color: rgba(255,255,255,.92); }.banner .btn { margin-top: 18px; background: rgba(255,255,255,.88); color: #181818; }.banner .btn.dark { background: rgba(20,20,20,.75); color: #fff; }.banner .close { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.85); color: #222; display: grid; place-items: center; z-index: 2; }.banner .close svg { width: 14px; height: 14px; }.b-voice { padding: 32px; min-height: 180px; }.b-voice::before { background: radial-gradient(30% 60% at 72% 55%, #c99766 0, transparent 70%), radial-gradient(18% 50% at 86% 50%, #6d5139 0, transparent 70%), radial-gradient(20% 40% at 64% 25%, #3a4a5a 0, transparent 70%), linear-gradient(90deg, #050505 45%, #2a1b10 100%); }.b-dict::before { background: radial-gradient(40% 70% at 20% 90%, #b8642a 0, transparent 70%), radial-gradient(40% 80% at 70% 30%, #9a6a3f 0, transparent 70%), radial-gradient(30% 60% at 95% 70%, #6b4a2e 0, transparent 70%), linear-gradient(120deg, #6d3a1a, #8a5b35 50%, #3d2a1e); }.b-snip::before { background: radial-gradient(30% 60% at 30% 10%, #3a6fb0 0, transparent 70%), radial-gradient(35% 60% at 65% 40%, #c9874a 0, transparent 70%), radial-gradient(30% 60% at 90% 80%, #7a4a2a 0, transparent 70%), radial-gradient(30% 60% at 15% 90%, #3a2a2a 0, transparent 70%), linear-gradient(120deg, #1d2b44, #5a4636 60%, #2a1d16); }.b-clean::before { background: radial-gradient(40% 70% at 25% 20%, #4d7795 0, transparent 70%), radial-gradient(40% 80% at 80% 60%, #5a4a3a 0, transparent 70%), radial-gradient(25% 60% at 95% 30%, #6b7a5a 0, transparent 70%), linear-gradient(120deg, #2f4a5f, #3a3028 60%, #2a2622); }.b-trans::before { background: radial-gradient(40% 70% at 20% 30%, #5a7890 0, transparent 70%), radial-gradient(40% 80% at 60% 80%, #8a5a3a 0, transparent 70%), radial-gradient(30% 60% at 90% 40%, #5a6a52 0, transparent 70%), linear-gradient(120deg, #3a5068, #6a4a34 60%, #3a3a30); }.b-scratch::before { background: radial-gradient(25% 50% at 15% 30%, #e0b070 0, transparent 70%), radial-gradient(30% 60% at 50% 60%, #a8763f 0, transparent 70%), radial-gradient(25% 50% at 85% 25%, #c79a5f 0, transparent 70%), linear-gradient(120deg, #5a3a1c, #3a2412 60%, #2a1a10); }.b-team::before { background: radial-gradient(40% 70% at 30% 40%, #c8894a 0, transparent 70%), radial-gradient(40% 70% at 80% 60%, #8a5030 0, transparent 70%), linear-gradient(120deg, #6a3a1a, #3a2010); }.b-voice h2 em, .banner h2 em { font-style: italic; }.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.chip { height: 36px; padding: 0 16px; border-radius: 8px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); display: inline-flex; align-items: center; backdrop-filter: blur(6px); }.chip.solid { background: rgba(20,20,20,.75); color: #fff; font-weight: 500; }.chip-rows { display: grid; grid-template-columns: max-content max-content; gap: 8px 28px; margin-top: 18px; }.chip-rows .chip:nth-child(odd) { font-style: italic; }.note-mock { position: absolute !important; right: 46px; bottom: -6px; width: 256px; height: 84px; border-radius: 8px 8px 0 0; background: #fbfbf8; color: #222; font-size: 10px; padding: 8px 12px; box-shadow: 0 6px 30px rgba(0,0,0,.4); }.note-mock b { font-weight: 500; }.app-dots { position: absolute !important; right: 12px; top: 0; bottom: 0; width: 220px; }.b-trans h2 { max-width: calc(100% - 240px); }.app-dots span { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: grid; place-items: center; font-weight: 700; font-size: 17px; } /* list cards */.list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }.list .row { display: flex; align-items: center; min-height: 53px; padding: 12px 16px; border-top: 1px solid var(--line); gap: 12px; position: relative; }.list .row:first-child { border-top: 0; }.list .row:hover { background: color-mix(in srgb, var(--hover) 35%, transparent); }.row .grow { flex: 1; min-width: 0; }.row .acts { display: none; gap: 6px; align-items: center; }.row:hover .acts, .row .acts.open { display: flex; }.row .acts button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text); }.row .acts button:hover { background: var(--hover); }.row .acts svg { width: 20px; height: 20px; }.empty { text-align: center; color: var(--muted); padding: 40px 0; } /* home */.home { display: grid; grid-template-columns: minmax(0, 772px) 250px; gap: 24px; justify-content: center; padding: 38px 48px 60px; }.home-head { position: sticky; top: 0; z-index: 5; background: var(--panel); grid-column: 1 / 3; margin: -38px 0 0; padding: 38px 0 14px; }.home-head h1 { font-size: 24px; font-weight: 600; margin: 0; }.home-side { position: sticky; top: 92px; align-self: start; }.stats-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }.stats-card .nums { background: var(--card); padding: 22px 24px 18px; }.stats-card .num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }.stats-card .num b { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.02em; }.day { position: sticky; top: 92px; z-index: 3; background: var(--panel); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; letter-spacing: .1em; color: var(--muted); font-weight: 500; padding: 26px 2px 12px; }.day:first-of-type { padding-top: 8px; }.day button { color: var(--muted); }.hist .row { align-items: center; }.hist .time { width: 98px; flex: none; font-size: 13.5px; color: var(--muted); }.hist .text { white-space: pre-wrap; max-width: 520px; overflow-wrap: anywhere; }.hist .text.dim { color: var(--muted); }.hist .text.dim button { text-decoration: underline; color: var(--muted); }.hist .tag { font-size: 11.5px; color: var(--faint); margin-left: 8px; }.search-in { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; margin: 4px 0 8px; outline: none; }.tip { position: absolute; z-index: 10; background: var(--btn); color: var(--btn-text); padding: 5px 10px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; pointer-events: none; } /* dictionary / snippets */.entry { font-size: 15px; }.entry .arrow { color: var(--muted); margin: 0 6px; } /* insights */.ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }.ins-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px 16px 16px; min-width: 0; }.ins-card.w2 { grid-column: span 2; }.big { font-size: 27px; font-weight: 500; line-height: 1; margin-bottom: 8px; }.cap { font-size: 12.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }.gauge { display: grid; place-items: center; margin-top: 14px; position: relative; height: 92px; }.gauge svg { width: 160px; height: 92px; }.gauge div { position: absolute; bottom: 6px; text-align: center; font-size: 15px; color: var(--muted); line-height: 1.3; }.gauge div b { display: block; color: var(--text); font-size: 19px; font-weight: 500; }.ins-card hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }.kv { display: flex; justify-content: space-between; margin-bottom: 6px; }.up { background: var(--teal-4); color: #11463f; border-radius: 4px; padding: 1px 8px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }.split { display: flex; gap: 4px; margin-top: 12px; }.split span { background: var(--teal-1); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }.usage-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; margin-top: 14px; color: var(--muted); }.usage-row .track { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }.usage-row .bar { height: 30px; min-width: 34px; border-radius: 3px; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--teal-2); }.usage-row:first-of-type .bar { background: var(--teal-1); }.ins-title { font-size: 27px; font-weight: 500; flex: 1; white-space: nowrap; }.heat > span { white-space: nowrap; overflow: visible; }.ins-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.heat { display: grid; grid-template-columns: 32px repeat(18, minmax(0, 1fr)); gap: 6px 8px; margin-top: 16px; font-size: 11px; color: var(--muted); align-items: center; }.heat i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--cell); }.heat i.l1 { background: var(--teal-4); } .heat i.l2 { background: var(--teal-3); } .heat i.l3 { background: var(--teal-2); } .heat i.l4 { background: var(--teal-1); }.heat i.cur { outline: 1.5px solid var(--teal-4); outline-offset: 1px; }.legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); }.legend i { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }.words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.words span { background: var(--chip); border-radius: 6px; padding: 3px 10px; } /* style cards */.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.scard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px 12px; display: flex; flex-direction: column; min-height: 360px; text-align: left; }.scard.on { border-color: var(--text); }.scard h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0 0 6px; }.scard p { color: var(--muted); margin: 0; }.scard .sample { margin-top: auto; background: var(--purple-bg); color: var(--purple-text); border-radius: 6px; padding: 14px 16px; font-style: italic; font-size: 13.5px; line-height: 1.55; }.apps-line { color: var(--muted); font-size: 13.5px; margin: -18px 0 20px; } /* transforms */.optin { display: flex; align-items: center; gap: 10px; color: var(--muted); }.kbd { display: inline-flex; align-items: center; gap: 4px; }.kbd span { background: var(--chip); border-radius: 5px; padding: 1px 7px; font-size: 13px; color: var(--text); border: 1px solid var(--line); }.pill-hint { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 4px 12px 4px 4px; }.auto-row { display: flex; align-items: center; gap: 12px; margin: -10px 0 26px; }.auto-row .grow { flex: 1; }.auto-row h4 { margin: 0; font-weight: 500; }.auto-row p { margin: 0; font-size: 13px; color: var(--muted); }.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0; flex: 1; }.tcard { border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-height: 162px; text-align: left; display: flex; flex-direction: column; gap: 4px; }.tcard:hover { background: color-mix(in srgb, var(--hover) 35%, transparent); }.tcard h4 { margin: 14px 0 0; font-weight: 600; }.tcard p { margin: 0; color: var(--muted); }.plus-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; } /* scratchpad + notes */.recents { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 8px; }.recents h3 { margin: 0; font-size: 15px; font-weight: 500; flex: 1; }.recents .tools { display: flex; gap: 14px; color: var(--muted); }.note-row h4 { margin: 0; font-weight: 500; }.note-row p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.editor input { width: 100%; font: 600 26px Figtree; border: 0; background: transparent; outline: none; margin: 18px 0 10px; }.editor textarea { width: 100%; min-height: 60vh; border: 0; outline: none; background: transparent; resize: none; font-size: 16px; line-height: 1.6; }.md h1, .md h2, .md h3 { font-size: 17px; margin: 18px 0 6px; }.md ul { padding-left: 20px; } /* notetaker */.nt-card { border-radius: 14px; background: var(--card); padding: 18px 20px 28px; margin-bottom: 34px; }.nt-card .label { font-size: 12.5px; letter-spacing: .1em; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; }.nt-empty { text-align: center; padding-top: 18px; }.nt-empty h4 { margin: 8px 0 4px; font-size: 18px; font-weight: 500; color: var(--muted); }.nt-empty p { margin: 0 0 16px; color: var(--muted); }.live { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }.live .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }@keyframes blink { 50% { opacity: .25; } }.green-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--green); display: grid; place-items: center; }.green-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.doc-dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); } /* assistant */.asst .day { top: 0; }.asst-card { padding-bottom: 20px; margin-bottom: 30px; }.asst-model { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: 0; }.asst-hint { margin: 10px 0 0; font-size: 13.5px; }.asst-hint b { color: var(--text); font-weight: 600; }.asst-cmd { display: flex; gap: 10px; align-items: center; margin-top: 12px; }.asst-cmd .field { flex: 1; }.asst-card .live .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.asst-sp { margin-bottom: 34px; }.asst-sp p { margin: 10px 0; font-size: 13.5px; }.asst-sp textarea.field { min-height: 96px; }.asst-sp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }.asst-log-path { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); margin: -12px 0 8px; }.asst-log-path .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }.asst-log .row.cmd { display: block; padding: 0; }.cmd-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }.cmd-head .time { width: 72px; flex: none; font-size: 13.5px; color: var(--muted); padding-top: 1px; }.cmd-head .grow { flex: 1; min-width: 0; }.cmd-text { overflow-wrap: anywhere; }.cmd-tag { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 8px; white-space: nowrap; vertical-align: 1px; }.cmd-reply { margin-top: 4px; color: var(--muted); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }.cmd.open .cmd-reply { display: block; }.cmd-reply.err { color: var(--red); }.cmd-meta { flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; padding-top: 1px; }.cmd-more { padding: 0 16px 16px 100px; }.cmd-more .cap { margin: 12px 0 6px; font-size: 11.5px; }.cmd-pre { margin: 0; max-height: 320px; overflow: auto; font: 12.5px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }.cmd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }.cmd-acts svg.i { width: 16px; height: 16px; } /* toggles + fields */.toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--chip); position: relative; flex: none; transition: background .15s; border: 1px solid var(--line); }.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d8d6d2; transition: transform .15s; }.toggle.on { background: var(--btn); border-color: var(--btn); }.toggle.on::after { transform: translateX(18px); background: var(--btn-text); }.select { height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; min-width: 164px; outline: none; }.field { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; outline: none; }textarea.field { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }.field:focus, .select:focus { border-color: var(--muted); } /* modals */#overlay:empty { display: none; }.shade { position: fixed; inset: 0; background: var(--shade); z-index: 50; display: grid; place-items: center; }.modal { width: min(520px, 92vw); max-height: 86vh; overflow: auto; background: var(--modal); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }.modal h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }.modal p.sub { margin: 0 0 18px; color: var(--muted); }.modal label.l { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }.modal .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }.modal .foot .left { margin-right: auto; }.inline-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; } /* settings */.settings { width: min(960px, 94vw); height: min(640px, 88vh); display: grid; grid-template-columns: 210px 1fr; background: var(--modal); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.4); }.set-nav { background: var(--modal-side); border-right: 1px solid var(--line); padding: 20px 8px 14px; display: flex; flex-direction: column; overflow-y: auto; }.set-nav .cap { padding: 0 8px; margin-bottom: 10px; font-size: 12px; }.set-nav button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 8px; width: 100%; text-align: left; }.set-nav button:hover, .set-nav button.on { background: var(--hover); }.set-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0 18px; }.set-nav .ver { margin-top: auto; padding: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--faint); }.status-dot.ready { background: var(--green); } .status-dot.loading { background: var(--orange); } .status-dot.error { background: var(--red); }.set-body { padding: 44px 48px 40px; overflow-y: auto; }.set-body h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; margin: 0 0 22px; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; }.set-body h5 { font-size: 16px; font-weight: 500; margin: 26px 0 12px; }.set-body > p { color: var(--muted); margin: -10px 0 22px; }.group { background: var(--card); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; }.srow { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }.srow:first-child { border-top: 0; }.srow .grow { flex: 1; min-width: 0; }.srow .t { font-weight: 500; }.srow .d { color: var(--muted); font-size: 13.5px; margin-top: 2px; }.srow .d b { color: var(--text); font-weight: 600; }.srow .btn.ghost { min-width: 164px; }.box { border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }.box .grow { flex: 1; }.code { font-family: ui-monospace, monospace; font-size: 13px; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }.plan { border: 1px solid var(--line); border-radius: 12px; padding: 22px; }.plan ul { list-style: none; padding: 0; margin: 14px 0 0; }.plan li { display: flex; gap: 10px; margin-bottom: 8px; }.plan li svg { color: var(--green); width: 16px; margin-top: 3px; }.models .srow .d { font-size: 13px; }.progress { height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin-top: 8px; width: 160px; }.progress i { display: block; height: 100%; background: var(--green); } .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90; background: var(--btn); color: var(--btn-text); padding: 10px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 70vw; }
@font-face { font-family: Figtree; src: url(fonts/Figtree.ttf); font-weight: 300 900; }
@font-face { font-family: Garamond; src: url(fonts/EBGaramond.ttf); font-weight: 400 800; }
@font-face { font-family: Garamond; src: url(fonts/EBGaramond-Italic.ttf); font-weight: 400 800; font-style: italic; }
/* Colours sampled from the Wispr Flow recording. */
:root {
--bg: #f3f1ed; --panel: #fbfbf8; --line: #eae5de; --hover: #eae5de; --card: #f3f1ed;
--text: #1a1a19; --muted: #656562; --faint: #9a9893;
--btn: #181818; --btn-text: #fbfbf8; --chip: #eae5de;
--field: #ffffff; --modal: #fbfbf8; --modal-side: #f3f1ed; --shade: rgba(20, 18, 16, .35);
--orange: #fc9e40; --orange-line: #181818;
--teal-1: #1f5f5a; --teal-2: #2f8f86; --teal-3: #67c6b8; --teal-4: #c3eee6; --cell: #e4e0d9;
--purple-bg: #efe4fb; --purple-text: #4a2770; --beta-bg: #f1e6fd; --beta-text: #8a3fcf;
--green: #22c58b; --red: #e5484d;
--serif: Garamond, "EB Garamond", Georgia, serif;
color-scheme: light;
}
:root[data-theme=dark] {
--bg: #1d1d1d; --panel: #181818; --line: #292929; --hover: #292929; --card: #252525;
--text: #e5e3e1; --muted: #92908e; --faint: #6d6b69;
--btn: #fbfbf8; --btn-text: #181818; --chip: #2a2a2a;
--field: #222222; --modal: #1f1f1f; --modal-side: #1b1b1b; --shade: rgba(0, 0, 0, .55);
--orange-line: #a55d05; --cell: #333333;
--purple-bg: #45265f; --purple-text: #efe2fb; --beta-bg: #f1e6fd; --beta-text: #8a3fcf;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font: 15px/1.45 Figtree, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hidden { display: none !important; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.muted { color: var(--muted); }
a { color: inherit; }
#app { display: grid; grid-template: 44px 1fr / 216px 1fr; height: 100vh; padding: 0 10px 10px 0; }
#app.side-off { grid-template-columns: 0 1fr; }
#app.side-off .side { visibility: hidden; }
/* top bar */
.topbar { grid-column: 1 / 3; display: flex; align-items: center; padding: 0 2px 0 14px; -webkit-app-region: drag; }
.topbar .drag { flex: 1; }
.top-actions { display: flex; gap: 4px; align-items: center; }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--text); -webkit-app-region: no-drag; }
.icon-btn:hover, .icon-btn.on { background: var(--hover); }
.menu-wrap { position: relative; }
.menu { -webkit-app-region: no-drag; position: absolute; right: 0; top: 36px; z-index: 30; min-width: 160px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-align: left; white-space: nowrap; }
.menu button:hover { background: var(--hover); }
.menu .chk { width: 16px; display: inline-grid; }
.menu .danger { color: var(--red); }
/* sidebar */
.side { display: flex; flex-direction: column; padding: 12px 0 6px 24px; overflow: hidden; min-height: 0; }
.logo { display: flex; align-items: center; gap: 8px; margin: 0 0 22px 6px; }
.logo svg { width: 24px; height: 24px; }
.logo span { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.01em; margin-top: -4px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav button, .side-links button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; width: 100%; text-align: left; }
.nav button:hover, .side-links button:hover { background: var(--hover); }
.nav button.on { background: var(--hover); }
.side-fill { flex: 1; min-height: 12px; }
.side-links { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
/* main panel */
.main { position: relative; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; min-height: 0; overflow: hidden; }
.scroll { height: 100%; overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--panel); }
.page { max-width: 1060px; margin: 0 auto; padding: 38px 48px 60px; }
.page.narrow { max-width: 900px; }
.page-head { display: flex; align-items: center; gap: 12px; min-height: 40px; margin-bottom: 24px; }
.page-head h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; flex: 1; display: flex; align-items: center; gap: 10px; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.beta { font: 600 12px Figtree; padding: 2px 8px; border-radius: 6px; background: var(--btn); color: var(--btn-text); }
.beta.purple { background: var(--beta-bg); color: var(--beta-text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; background: var(--btn); color: var(--btn-text); font-weight: 500; white-space: nowrap; }
.btn:hover { opacity: .9; }
.btn.ghost { background: var(--chip); color: var(--text); }
.btn.line { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.orange { background: var(--orange); color: #181818; border: 1px solid var(--orange-line); width: 100%; }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13.5px; }
.btn:disabled { opacity: .45; cursor: default; }
.link-btn { font-weight: 600; }
/* tabs */
.tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs button { padding: 8px 0 10px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 8px; }
.tabs button.on { color: var(--text); border-color: var(--text); }
.tabs .spacer { flex: 1; }
.tabs .tools { display: flex; gap: 14px; color: var(--muted); padding-bottom: 6px; }
.tabs .tools button { padding: 0; border: 0; color: var(--muted); }
/* banners: CSS stand-ins for the blurred photographs */
.banner { position: relative; overflow: hidden; border-radius: 14px; padding: 36px 32px; color: #fff; margin-bottom: 36px; border: 1px solid var(--line); background: #0a0a0a; }
.banner::before { content: ""; position: absolute; inset: -40px; filter: blur(28px); z-index: 0; }
.banner > * { position: relative; z-index: 1; }
.banner h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -.02em; }
.banner p { margin: 0 0 6px; max-width: 700px; color: rgba(255,255,255,.92); }
.banner .btn { margin-top: 18px; background: rgba(255,255,255,.88); color: #181818; }
.banner .btn.dark { background: rgba(20,20,20,.75); color: #fff; }
.banner .close { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.85); color: #222; display: grid; place-items: center; z-index: 2; }
.banner .close svg { width: 14px; height: 14px; }
.b-voice { padding: 32px; min-height: 180px; }
.b-voice::before { background: radial-gradient(30% 60% at 72% 55%, #c99766 0, transparent 70%), radial-gradient(18% 50% at 86% 50%, #6d5139 0, transparent 70%), radial-gradient(20% 40% at 64% 25%, #3a4a5a 0, transparent 70%), linear-gradient(90deg, #050505 45%, #2a1b10 100%); }
.b-dict::before { background: radial-gradient(40% 70% at 20% 90%, #b8642a 0, transparent 70%), radial-gradient(40% 80% at 70% 30%, #9a6a3f 0, transparent 70%), radial-gradient(30% 60% at 95% 70%, #6b4a2e 0, transparent 70%), linear-gradient(120deg, #6d3a1a, #8a5b35 50%, #3d2a1e); }
.b-snip::before { background: radial-gradient(30% 60% at 30% 10%, #3a6fb0 0, transparent 70%), radial-gradient(35% 60% at 65% 40%, #c9874a 0, transparent 70%), radial-gradient(30% 60% at 90% 80%, #7a4a2a 0, transparent 70%), radial-gradient(30% 60% at 15% 90%, #3a2a2a 0, transparent 70%), linear-gradient(120deg, #1d2b44, #5a4636 60%, #2a1d16); }
.b-clean::before { background: radial-gradient(40% 70% at 25% 20%, #4d7795 0, transparent 70%), radial-gradient(40% 80% at 80% 60%, #5a4a3a 0, transparent 70%), radial-gradient(25% 60% at 95% 30%, #6b7a5a 0, transparent 70%), linear-gradient(120deg, #2f4a5f, #3a3028 60%, #2a2622); }
.b-trans::before { background: radial-gradient(40% 70% at 20% 30%, #5a7890 0, transparent 70%), radial-gradient(40% 80% at 60% 80%, #8a5a3a 0, transparent 70%), radial-gradient(30% 60% at 90% 40%, #5a6a52 0, transparent 70%), linear-gradient(120deg, #3a5068, #6a4a34 60%, #3a3a30); }
.b-scratch::before { background: radial-gradient(25% 50% at 15% 30%, #e0b070 0, transparent 70%), radial-gradient(30% 60% at 50% 60%, #a8763f 0, transparent 70%), radial-gradient(25% 50% at 85% 25%, #c79a5f 0, transparent 70%), linear-gradient(120deg, #5a3a1c, #3a2412 60%, #2a1a10); }
.b-team::before { background: radial-gradient(40% 70% at 30% 40%, #c8894a 0, transparent 70%), radial-gradient(40% 70% at 80% 60%, #8a5030 0, transparent 70%), linear-gradient(120deg, #6a3a1a, #3a2010); }
.b-voice h2 em, .banner h2 em { font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { height: 36px; padding: 0 16px; border-radius: 8px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); display: inline-flex; align-items: center; backdrop-filter: blur(6px); }
.chip.solid { background: rgba(20,20,20,.75); color: #fff; font-weight: 500; }
.chip-rows { display: grid; grid-template-columns: max-content max-content; gap: 8px 28px; margin-top: 18px; }
.chip-rows .chip:nth-child(odd) { font-style: italic; }
.note-mock { position: absolute !important; right: 46px; bottom: -6px; width: 256px; height: 84px; border-radius: 8px 8px 0 0; background: #fbfbf8; color: #222; font-size: 10px; padding: 8px 12px; box-shadow: 0 6px 30px rgba(0,0,0,.4); }
.note-mock b { font-weight: 500; }
.app-dots { position: absolute !important; right: 12px; top: 0; bottom: 0; width: 220px; }
.b-trans h2 { max-width: calc(100% - 240px); }
.app-dots span { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: grid; place-items: center; font-weight: 700; font-size: 17px; }
/* list cards */
.list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.list .row { display: flex; align-items: center; min-height: 53px; padding: 12px 16px; border-top: 1px solid var(--line); gap: 12px; position: relative; }
.list .row:first-child { border-top: 0; }
.list .row:hover { background: color-mix(in srgb, var(--hover) 35%, transparent); }
.row .grow { flex: 1; min-width: 0; }
.row .acts { display: none; gap: 6px; align-items: center; }
.row:hover .acts, .row .acts.open { display: flex; }
.row .acts button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text); }
.row .acts button:hover { background: var(--hover); }
.row .acts svg { width: 20px; height: 20px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
/* home */
.home { display: grid; grid-template-columns: minmax(0, 772px) 250px; gap: 24px; justify-content: center; padding: 38px 48px 60px; }
.home-head { position: sticky; top: 0; z-index: 5; background: var(--panel); grid-column: 1 / 3; margin: -38px 0 0; padding: 38px 0 14px; }
.home-head h1 { font-size: 24px; font-weight: 600; margin: 0; }
.home-side { position: sticky; top: 92px; align-self: start; }
.stats-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stats-card .nums { background: var(--card); padding: 22px 24px 18px; }
.stats-card .num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.stats-card .num b { font-family: var(--serif); font-weight: 400; font-size: 27px; letter-spacing: -.02em; }
.day { position: sticky; top: 92px; z-index: 3; background: var(--panel); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; letter-spacing: .1em; color: var(--muted); font-weight: 500; padding: 26px 2px 12px; }
.day:first-of-type { padding-top: 8px; }
.day button { color: var(--muted); }
.hist .row { align-items: center; }
.hist .time { width: 98px; flex: none; font-size: 13.5px; color: var(--muted); }
.hist .text { white-space: pre-wrap; max-width: 520px; overflow-wrap: anywhere; }
.hist .text.dim { color: var(--muted); }
.hist .text.dim button { text-decoration: underline; color: var(--muted); }
.hist .tag { font-size: 11.5px; color: var(--faint); margin-left: 8px; }
.search-in { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; margin: 4px 0 8px; outline: none; }
.tip { position: absolute; z-index: 10; background: var(--btn); color: var(--btn-text); padding: 5px 10px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
/* dictionary / snippets */
.entry { font-size: 15px; }
.entry .arrow { color: var(--muted); margin: 0 6px; }
/* insights */
.ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ins-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px 16px 16px; min-width: 0; }
.ins-card.w2 { grid-column: span 2; }
.big { font-size: 27px; font-weight: 500; line-height: 1; margin-bottom: 8px; }
.cap { font-size: 12.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.gauge { display: grid; place-items: center; margin-top: 14px; position: relative; height: 92px; }
.gauge svg { width: 160px; height: 92px; }
.gauge div { position: absolute; bottom: 6px; text-align: center; font-size: 15px; color: var(--muted); line-height: 1.3; }
.gauge div b { display: block; color: var(--text); font-size: 19px; font-weight: 500; }
.ins-card hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.kv { display: flex; justify-content: space-between; margin-bottom: 6px; }
.up { background: var(--teal-4); color: #11463f; border-radius: 4px; padding: 1px 8px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.split { display: flex; gap: 4px; margin-top: 12px; }
.split span { background: var(--teal-1); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.usage-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; margin-top: 14px; color: var(--muted); }
.usage-row .track { display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.usage-row .bar { height: 30px; min-width: 34px; border-radius: 3px; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--teal-2); }
.usage-row:first-of-type .bar { background: var(--teal-1); }
.ins-title { font-size: 27px; font-weight: 500; flex: 1; white-space: nowrap; }
.heat > span { white-space: nowrap; overflow: visible; }
.ins-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.heat { display: grid; grid-template-columns: 32px repeat(18, minmax(0, 1fr)); gap: 6px 8px; margin-top: 16px; font-size: 11px; color: var(--muted); align-items: center; }
.heat i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--cell); }
.heat i.l1 { background: var(--teal-4); } .heat i.l2 { background: var(--teal-3); } .heat i.l3 { background: var(--teal-2); } .heat i.l4 { background: var(--teal-1); }
.heat i.cur { outline: 1.5px solid var(--teal-4); outline-offset: 1px; }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.legend i { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }
.words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.words span { background: var(--chip); border-radius: 6px; padding: 3px 10px; }
/* style cards */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px 12px; display: flex; flex-direction: column; min-height: 360px; text-align: left; }
.scard.on { border-color: var(--text); }
.scard h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0 0 6px; }
.scard p { color: var(--muted); margin: 0; }
.scard .sample { margin-top: auto; background: var(--purple-bg); color: var(--purple-text); border-radius: 6px; padding: 14px 16px; font-style: italic; font-size: 13.5px; line-height: 1.55; }
.apps-line { color: var(--muted); font-size: 13.5px; margin: -18px 0 20px; }
/* transforms */
.optin { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.kbd { display: inline-flex; align-items: center; gap: 4px; }
.kbd span { background: var(--chip); border-radius: 5px; padding: 1px 7px; font-size: 13px; color: var(--text); border: 1px solid var(--line); }
.pill-hint { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 4px 12px 4px 4px; }
.auto-row { display: flex; align-items: center; gap: 12px; margin: -10px 0 26px; }
.auto-row .grow { flex: 1; }
.auto-row h4 { margin: 0; font-weight: 500; }
.auto-row p { margin: 0; font-size: 13px; color: var(--muted); }
.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0; flex: 1; }
.tcard { border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-height: 162px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.tcard:hover { background: color-mix(in srgb, var(--hover) 35%, transparent); }
.tcard h4 { margin: 14px 0 0; font-weight: 600; }
.tcard p { margin: 0; color: var(--muted); }
.plus-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; }
/* scratchpad + notes */
.recents { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 8px; }
.recents h3 { margin: 0; font-size: 15px; font-weight: 500; flex: 1; }
.recents .tools { display: flex; gap: 14px; color: var(--muted); }
.note-row h4 { margin: 0; font-weight: 500; }
.note-row p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor input { width: 100%; font: 600 26px Figtree; border: 0; background: transparent; outline: none; margin: 18px 0 10px; }
.editor textarea { width: 100%; min-height: 60vh; border: 0; outline: none; background: transparent; resize: none; font-size: 16px; line-height: 1.6; }
.md h1, .md h2, .md h3 { font-size: 17px; margin: 18px 0 6px; }
.md ul { padding-left: 20px; }
/* notetaker */
.nt-card { border-radius: 14px; background: var(--card); padding: 18px 20px 28px; margin-bottom: 34px; }
.nt-card .label { font-size: 12.5px; letter-spacing: .1em; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; }
.nt-empty { text-align: center; padding-top: 18px; }
.nt-empty h4 { margin: 8px 0 4px; font-size: 18px; font-weight: 500; color: var(--muted); }
.nt-empty p { margin: 0 0 16px; color: var(--muted); }
.live { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.live .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.green-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--green); display: grid; place-items: center; }
.green-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.doc-dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
/* assistant */
.asst .day { top: 0; }
.asst-card { padding-bottom: 20px; margin-bottom: 30px; }
.asst-model { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: 0; }
.asst-hint { margin: 10px 0 0; font-size: 13.5px; }
.asst-hint b { color: var(--text); font-weight: 600; }
.asst-cmd { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.asst-cmd .field { flex: 1; }
.asst-card .live .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-sp { margin-bottom: 34px; }
.asst-sp p { margin: 10px 0; font-size: 13.5px; }
.asst-sp textarea.field { min-height: 96px; }
.asst-sp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.asst-log-path { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); margin: -12px 0 8px; }
.asst-log-path .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.asst-log .row.cmd { display: block; padding: 0; }
.cmd-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }
.cmd-head .time { width: 72px; flex: none; font-size: 13.5px; color: var(--muted); padding-top: 1px; }
.cmd-head .grow { flex: 1; min-width: 0; }
.cmd-text { overflow-wrap: anywhere; }
.cmd-tag { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 8px; white-space: nowrap; vertical-align: 1px; }
.cmd-reply { margin-top: 4px; color: var(--muted); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmd.open .cmd-reply { display: block; }
.cmd-reply.err { color: var(--red); }
.cmd-meta { flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; padding-top: 1px; }
.cmd-more { padding: 0 16px 16px 100px; }
.cmd-more .cap { margin: 12px 0 6px; font-size: 11.5px; }
.cmd-pre { margin: 0; max-height: 320px; overflow: auto; font: 12.5px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cmd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cmd-acts svg.i { width: 16px; height: 16px; }
/* toggles + fields */
.toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--chip); position: relative; flex: none; transition: background .15s; border: 1px solid var(--line); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d8d6d2; transition: transform .15s; }
.toggle.on { background: var(--btn); border-color: var(--btn); }
.toggle.on::after { transform: translateX(18px); background: var(--btn-text); }
.select { height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; min-width: 164px; outline: none; }
.field { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; outline: none; }
textarea.field { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field:focus, .select:focus { border-color: var(--muted); }
/* modals */
#overlay:empty { display: none; }
.shade { position: fixed; inset: 0; background: var(--shade); z-index: 50; display: grid; place-items: center; }
.modal { width: min(520px, 92vw); max-height: 86vh; overflow: auto; background: var(--modal); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.modal p.sub { margin: 0 0 18px; color: var(--muted); }
.modal label.l { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.modal .foot .left { margin-right: auto; }
.inline-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; }
/* settings */
.settings { width: min(960px, 94vw); height: min(640px, 88vh); display: grid; grid-template-columns: 210px 1fr; background: var(--modal); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.set-nav { background: var(--modal-side); border-right: 1px solid var(--line); padding: 20px 8px 14px; display: flex; flex-direction: column; overflow-y: auto; }
.set-nav .cap { padding: 0 8px; margin-bottom: 10px; font-size: 12px; }
.set-nav button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 8px; width: 100%; text-align: left; }
.set-nav button:hover, .set-nav button.on { background: var(--hover); }
.set-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0 18px; }
.set-nav .ver { margin-top: auto; padding: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--faint); }
.status-dot.ready { background: var(--green); } .status-dot.loading { background: var(--orange); } .status-dot.error { background: var(--red); }
.set-body { padding: 44px 48px 40px; overflow-y: auto; }
.set-body h2 { font-family: var(--serif); font-weight: 400; font-size: 29px; margin: 0 0 22px; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; }
.set-body h5 { font-size: 16px; font-weight: 500; margin: 26px 0 12px; }
.set-body > p { color: var(--muted); margin: -10px 0 22px; }
.group { background: var(--card); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; }
.srow { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.srow:first-child { border-top: 0; }
.srow .grow { flex: 1; min-width: 0; }
.srow .t { font-weight: 500; }
.srow .d { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.srow .d b { color: var(--text); font-weight: 600; }
.srow .btn.ghost { min-width: 164px; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.box .grow { flex: 1; }
.code { font-family: ui-monospace, monospace; font-size: 13px; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 0; }
.plan li { display: flex; gap: 10px; margin-bottom: 8px; }
.plan li svg { color: var(--green); width: 16px; margin-top: 3px; }
.models .srow .d { font-size: 13px; }
.progress { height: 4px; border-radius: 2px; background: var(--chip); overflow: hidden; margin-top: 8px; width: 160px; }
.progress i { display: block; height: 100%; background: var(--green); }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 90; background: var(--btn); color: var(--btn-text); padding: 10px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 70vw; }