/* =========================================================== Jsonita · GitHub Pages site stylesheet Single file, no framework. Dark theme. Tokens are NOT hand-mirrored — app-tokens.css is a verbatim copy of the running app's src/styles/tokens.css (regenerated by scripts/sync-docs-assets.sh). The site sets data-theme="dark" on so the app's own dark palette applies. The window shell (.appwin-*) is authored here but derives every color / radius / motion / type from those tokens, so it tracks the real app rather than drifting from a copy. No product screenshot is shipped. Every product visual on the page is a faithful HTML/.appwin rendering of the real window (TabBar + panes + StatusBar) using the app's own tokens and tab-icon paths. =========================================================== */ @import url("./app-tokens.css"); /* ---------- docs-only tokens (not in the app; the page void behind glass) ---------- */ :root { --void: #0a0c10; --void-2: #0d1016; } /* ---------- reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--void); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } code { font-family: var(--font-code); font-size: 0.92em; } /* ---------- ambient background ---------- */ .ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(158, 182, 205, 0.13), transparent 60%), radial-gradient(ellipse 50% 40% at 85% 80%, rgba(190, 154, 114, 0.08), transparent 70%); } /* ---------- layout primitives ---------- */ .container { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; } section { position: relative; padding: 96px 0; overflow-x: clip; } @media (max-width: 720px) { section { padding: 64px 0; } } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(44px); -webkit-backdrop-filter: saturate(150%) blur(44px); background: color-mix(in srgb, var(--void) 72%, transparent); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 58px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; } .brand-logo { display: block; width: 32px; height: 32px; image-rendering: -webkit-optimize-contrast; } /* hero brand mark — bigger than nav so the product identity reads */ .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--text-muted); } .nav-links a:hover { color: var(--text); } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill, 999px); background: #fff; color: var(--void) !important; font-weight: 500; transition: transform var(--dur-slow) var(--ease-native); } .nav-cta:hover { transform: translateY(-1px); } .lang-switch { display: inline-flex; gap: 4px; font-size: 13px; } .lang-switch a { padding: 4px 9px; border-radius: var(--radius-md); color: var(--text-faint); transition: color var(--dur-fast), background var(--dur-fast); } .lang-switch a.active { color: var(--text); background: var(--surface-quiet); } .lang-switch a:hover:not(.active) { color: var(--text); } @media (max-width: 640px) { .nav-links .hide-sm { display: none; } } /* ---------- hero ---------- */ .hero { padding: 80px 0 40px; text-align: center; } .hero h1 { font-family: var(--font-ui); font-weight: 600; font-size: clamp(44px, 8vw, 88px); line-height: 1.02; letter-spacing: -0.045em; margin: 0 0 20px; color: var(--text); } /* zh-CN hero headline: text-align:center centers each line's em box, but CJK fullwidth stop "。" is a small hollow ring sitting in the bottom-left of its 1em square, so every line that ends in "。" has ~1em of near-empty space on the right that the eye treats as margin, not ink. Canvas-measured on PingFang SC the INK center drifts ~29% of font-size LEFT of the em center (88px -> 25px; 44px -> 12.7px), for ALL THREE lines — even "修复。复制。", whose middle period is visually symmetric but whose trailing period still pulls the ink box left. Nudging the whole headline right by ~0.25em aligns ink centers with the em center across clamp(44px, 8vw, 88px). The period still carries a little visible weight, so full 0.29em overshoots. EN headlines end in Latin "." (solid dot near em center, drift <1px) and need no fix. */ html[lang="zh-CN"] .hero h1 { transform: translateX(0.25em); } .hero p.lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--text-muted); max-width: 580px; margin: 0 auto 36px; } .hero-cta { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 56px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 500; transition: transform var(--dur-slow) var(--ease-native), background var(--dur-slow), border-color var(--dur-slow); white-space: nowrap; } .btn-primary { background: #fff; color: var(--void); } .btn-primary:hover { transform: translateY(-1px); } .btn-secondary { background: var(--surface-quiet); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-raised); } .btn-ghost { color: var(--text-muted); } .btn-ghost:hover { color: var(--text); } /* ---------- hero hotkey (real app keycaps) ---------- */ .hotkey { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 40px auto 44px; width: 100%; } .hotkey-combo { display: flex; gap: 6px; align-items: center; justify-content: center; width: 100%; } .kbd-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 16px; border-radius: 12px; font: 500 26px/1 var(--font-ui); color: var(--text); letter-spacing: 0.01em; background: var(--kbd-bg); border: 1px solid var(--kbd-border); box-shadow: inset 0 1px 0 var(--kbd-hi), 0 2px 0 rgba(0,0,0,0.25), 0 10px 28px -14px rgba(0,0,0,0.8); white-space: nowrap; } .kbd-tile svg { width: 30px; height: 30px; display: block; } .kbd-plus { color: var(--text-faint); font-size: 22px; margin: 0 2px; } .hotkey-label { font-size: 15px; color: var(--text-muted); text-align: center; line-height: 1.5; } .hotkey-label b { color: var(--text); font-weight: 500; } @media (max-width: 540px) { .kbd-tile { min-width: 44px; height: 44px; padding: 0 12px; font-size: 20px; border-radius: 10px; } .kbd-tile svg { width: 24px; height: 24px; } .kbd-plus { font-size: 18px; } } /* =========================================================== .appwin — faithful render of the real Jsonita window. Mirrors FloatingWindow glass + TabBar + StatusBar values from src/styles/global.css and src/styles/tokens.css. Tab icons use the real path data from src/components/icons.tsx. =========================================================== */ .appwin { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.03) inset; overflow: hidden; text-align: left; font-family: var(--font-ui); color: var(--text); } /* soft halo behind the window — reads as vibrancy over the page ambient */ .appwin--hero::before { content: ""; position: absolute; inset: -28% -8% -8% -8%; background: radial-gradient(ellipse 55% 45% at 50% 18%, rgba(158, 182, 205, 0.16), transparent 70%); filter: blur(56px); z-index: -1; pointer-events: none; } /* ---------- tab bar (mirrors .jsonita-tab-bar / TabBar.tsx) ---------- */ .appwin-tabbar { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 7px 10px 8px; background: color-mix(in srgb, var(--surface-quiet) 28%, transparent); border-bottom: 1px solid var(--border); user-select: none; } .appwin-logo { width: 22px; height: 22px; flex: 0 0 auto; margin-right: 6px; background-color: var(--text); opacity: 0.82; -webkit-mask: url("../img/menubar-template.png") center / contain no-repeat; mask: url("../img/menubar-template.png") center / contain no-repeat; } .appwin-tabs { position: relative; display: flex; align-items: center; gap: 5px; } /* the sliding active pill — mirrors .jsonita-tab-active-pill exactly */ .appwin-pill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-md); background: var(--tab-active-bg); box-shadow: inset 0 0 0 1px var(--tab-active-border), 0 1px 2px rgba(0, 0, 0, 0.08); pointer-events: none; z-index: 0; opacity: 0; transition: transform 180ms var(--ease-native), width 180ms var(--ease-native), opacity var(--dur-fast) var(--ease-native); } .appwin.is-ready .appwin-pill { opacity: 1; } .appwin-tab { display: inline-flex; align-items: center; gap: 5px; position: relative; z-index: 1; min-height: 27px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-tight); cursor: default; transition: color var(--dur-base) var(--ease-out); } .appwin-tab svg { flex: 0 0 auto; width: 13px; height: 13px; opacity: 0.88; } .appwin-tab.is-active { color: color-mix(in srgb, var(--primary) 68%, var(--text)); } .appwin-tab.is-active svg { opacity: 1; } /* chrome icon buttons (split / history / settings) — mirror .jsonita-chrome-icon-button */ .appwin-spacer { flex: 1; } .appwin-chrome { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .appwin-icbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: transparent; color: var(--text-muted); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .appwin-icbtn:hover { background: var(--surface-raised); color: var(--text); } .appwin-icbtn svg { width: 15px; height: 15px; } /* ---------- body ---------- */ .appwin-body { position: relative; display: grid; min-height: 0; } .appwin-body--split { grid-template-columns: 1fr 1fr; } .appwin-body--single { grid-template-columns: 1fr; } .appwin-pane { position: relative; display: grid; grid-template-columns: 44px 1fr; min-width: 0; background: color-mix(in srgb, var(--bg-code) 40%, transparent); } .appwin-pane + .appwin-pane { border-left: 1px solid var(--border); } .appwin-pane--bare { grid-template-columns: 1fr; } /* output pane: no gutter */ .appwin-gutter { padding: 16px 12px 16px 0; text-align: right; white-space: pre; font-family: var(--font-code); font-size: var(--fs-editor); line-height: var(--lh-code); color: var(--text-faint); opacity: 0.55; user-select: none; border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: color-mix(in srgb, var(--void) 22%, transparent); } .appwin-code { margin: 0; padding: 16px 18px; font-family: var(--font-code); font-size: var(--fs-editor); line-height: var(--lh-code); white-space: pre; overflow: hidden; color: var(--text); } .appwin-code.appwin-code--sm { font-size: var(--fs-sm); } /* status bar — mirrors StatusBar.tsx */ .appwin-statusbar { display: flex; align-items: center; min-height: 33px; padding: 5px 12px; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-quiet) 30%, transparent); color: var(--text-muted); } .appwin-status .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; } .appwin-status .dot.ok { background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 50%, transparent); } .appwin-status .dot.err { background: var(--danger); } .appwin-status .dot.warn { background: var(--warn); } .appwin-status .mono { font-family: var(--font-mono-ui); color: var(--text); } .appwin-statusbar .right { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; } .appwin-statusbar kbd { font-family: var(--font-mono-ui); font-size: 10.5px; background: var(--surface-raised); padding: 1px 5px; border-radius: 3px; color: var(--text); } /* ---------- JSON syntax spans (app token colors) ---------- */ .t-key { color: var(--json-key); } .t-str { color: var(--json-string); } .t-num { color: var(--json-number); } .t-bool { color: var(--json-bool); } .t-null { color: var(--json-null); } .t-punc { color: var(--json-punc); } .caret { display: inline-block; width: 2px; height: 16px; background: var(--editor-cursor); vertical-align: -2px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- tree pane (mirrors TreeView token colors) ---------- */ .appwin-tree { padding: 16px 18px; font-family: var(--font-code); font-size: var(--fs-tree); line-height: 1.85; } .appwin-tree .row { display: block; white-space: pre; } .appwin-tree .row.indent-1 { padding-left: 18px; } .appwin-tree .row.indent-2 { padding-left: 36px; } .appwin-tree .toggle { color: var(--text-faint); margin-right: 4px; } .appwin-tree .summary { color: var(--text-faint); } .appwin-tree .key { color: var(--json-key); } .appwin-tree .punc { color: var(--json-punc); } .appwin-tree .v-str { color: var(--json-string); } .appwin-tree .v-num { color: var(--json-number); } .appwin-tree .v-bool { color: var(--json-bool); } /* ---------- hero transform variants (tour switches these) ---------- */ .appwin-pane[hidden] { display: none; } /* floating ⌘↵ run pill — mirrors the real SinglePaneHint: bottom-right of the window, hovering just above the status bar. Single-pane only; hidden on tree (no "run" action there). */ .appwin-run[hidden] { display: none; } .appwin-run { position: absolute; right: 12px; bottom: 44px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 84%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); color: var(--text-muted); font-family: var(--font-ui); font-size: var(--fs-xs); line-height: 1.3; pointer-events: none; } .appwin-run .g { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px; background: var(--kbd-bg); border: 1px solid var(--kbd-border); font-family: var(--font-mono-ui); font-size: 10px; color: var(--text); box-shadow: inset 0 1px 0 var(--kbd-hi); } /* ---------- AI Fix diff — mirrors real DiffView.tsx inline styles ---------- */ .diff-pane { padding: var(--sp-3) var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-editor); line-height: 1.75; background: var(--bg-card); } .diff-line { white-space: pre; display: block; } .diff-line-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); } .diff-line-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); } .diff-sig { display: inline-block; width: 18px; padding-right: 8px; text-align: center; } .diff-sig-ok { color: var(--ok); } .diff-sig-danger { color: var(--danger); } .diff-sig-faint { color: var(--text-faint); } .diff-text { white-space: pre-wrap; } /* ---------- privacy pane — clean checklist, not centered monospace splash ---------- */ /* ---------- privacy pane ---------- */ /* ---------- hero stage sizing (real Jsonita window is 680×380) ---------- */ .hero-stage { position: relative; max-width: 720px; margin: 0 auto; } .hero-stage .appwin { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05); } .hero-stage .appwin-body { min-height: 300px; } /* ---------- stats strip ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 64px auto 0; max-width: 820px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat { padding: 26px 14px; text-align: center; border-right: 1px solid var(--border); } .stat:last-child { border-right: 0; } .stat-num { font-family: var(--font-mono-ui); font-size: 20px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; } .stat-label { margin-top: 4px; font-size: 11px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } /* ---------- sections ---------- */ .section-eyebrow { font-family: var(--font-mono-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; } .section-title { font-weight: 600; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 16px; color: var(--text); max-width: 680px; } .section-lede { color: var(--text-muted); max-width: 560px; margin: 0 0 56px; font-size: var(--fs-lg); } /* ---------- features ---------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 96px; } .feature:last-child { margin-bottom: 0; } .feature.reverse .feature-text { order: 2; } .feature-text h3 { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--text); margin: 0 0 12px; } .feature-text p { color: var(--text-muted); margin: 0 0 20px; } .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { padding: 7px 0 7px 22px; position: relative; color: var(--text-muted); font-size: 14.5px; } .feature-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .feature-visual { position: relative; border-radius: var(--radius-xl); } .feature-visual .appwin-body { min-height: 260px; } @media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; } .feature.reverse .feature-text { order: 0; } } /* ---------- install ---------- */ .install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .install-card { position: relative; background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; transition: border-color var(--dur-slow), background var(--dur-slow), transform var(--dur-slow) var(--ease-native); box-shadow: var(--glass-highlight); } .install-card:hover { border-color: var(--border-strong); background: var(--bg-elevated); transform: translateY(-2px); } .install-card.win::after { content: "beta"; position: absolute; top: 22px; right: 22px; font-family: var(--font-mono-ui); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 2px 8px; border-radius: 999px; } .install-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .install-os { font-family: var(--font-mono-ui); font-size: 17px; color: var(--text); letter-spacing: -0.01em; } .install-os .ic { margin-right: 8px; } .install-steps { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: step; } .install-steps li { counter-increment: step; position: relative; padding: 8px 0 8px 36px; color: var(--text-muted); font-size: 14px; line-height: 1.5; } .install-steps li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-raised); color: var(--text); font-family: var(--font-mono-ui); font-size: 11px; display: grid; place-items: center; } .install-steps kbd { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; background: var(--kbd-bg); padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--text); border: 1px solid var(--kbd-border); box-shadow: inset 0 1px 0 var(--kbd-hi), 0 1px 1px rgba(0,0,0,0.15); min-width: 18px; height: 18px; line-height: 1; vertical-align: -2px; } .install-steps kbd svg { width: 11px; height: 11px; display: block; } .install-steps kbd.sep { background: none; border: none; box-shadow: none; padding: 0 2px; color: var(--text-faint); font-size: 10px; } .install-note { font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 14px; font-family: var(--font-mono-ui); } @media (max-width: 760px) { .install-grid { grid-template-columns: 1fr; } } /* ---------- footer ---------- */ .foot { padding: 40px 0 60px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; } .foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .foot-links { display: flex; gap: 22px; } .foot-links a:hover { color: var(--text); } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-native), transform 0.6s var(--ease-native); } .reveal.in { opacity: 1; transform: none; } .hero h1 { animation-delay: 0.08s; } .hero .lede { animation-delay: 0.18s; } .hero .hotkey { animation-delay: 0.26s; } .hero .hero-cta { animation-delay: 0.36s; } .hero .hero-stage { animation-delay: 0.5s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero-lockup, .hero h1, .hero .lede, .hero .hotkey, .hero .hero-cta, .hero .hero-stage { opacity: 1; transform: none; animation: none; } .caret { animation: none; opacity: 1; } .appwin-pill { transition: none; } } /* ---------- hero lockup: logo + name + tagline in one quiet line ---------- */ .hero-lockup { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--font-ui); font-size: var(--fs-md); color: var(--text-muted); } .hero-lockup img { width: 22px; height: 22px; display: block; /* mono treatment so it doesn't duplicate the colored nav logo */ filter: grayscale(1) brightness(1.35) opacity(0.85); } .hero-lockup .hl-name { font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .hero-lockup .hl-sep { color: var(--text-faint); } .hero-lockup .hl-tag { color: var(--text-muted); } /* ---------- AI Fix footer — mirrors AiFixPane awaiting-decision bar ---------- */ .appwin-aifooter { display: flex; gap: 6px; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg); } .appwin-aifooter .ab { height: 30px; padding: 0 13px; border-radius: 7px; font: 510 13px var(--font-ui); display: inline-flex; align-items: center; gap: 7px; } .appwin-aifooter .ab-secondary { background: var(--control-bg); color: var(--text); border: 1px solid var(--control-border); } .appwin-aifooter .ab-primary { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-strong); } .appwin-aifooter .kbd-mini { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 3px; background: var(--kbd-bg); border: 1px solid var(--kbd-border); font-family: var(--font-mono-ui); font-size: 9.5px; color: var(--text); box-shadow: inset 0 1px 0 var(--kbd-hi); } .appwin-status-ai { color: var(--accent); font-weight: 600; } .appwin-status .dot.ai { background: var(--accent); } /* ---------- privacy: pure typography, no window, no paths ---------- */ .privacy-zero { display: flex; flex-direction: column; gap: 0; max-width: 380px; } .pz-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); } .pz-row:last-of-type { border-bottom: 0; } .pz-num { font-family: var(--font-mono-ui); font-size: 40px; font-weight: 500; line-height: 1; color: var(--text); letter-spacing: -0.03em; } .pz-label { font-family: var(--font-ui); font-size: var(--fs-lg); color: var(--text-muted); letter-spacing: 0.01em; } .pz-note { margin: 18px 0 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-faint); }