@deernova/style 0.0.0-stage → 0.1.0

package/template/project/tokens.css

@@ -0,0 +1,187 @@
+/* Generated from design/tokens.json. Do not edit. */
+:root {
+  --canvas: #f5f5f5;
+  --surface: #fafafa;
+  --surface-raised: #ffffff;
+  --surface-sunken: #ebebeb;
+  --ink: #171717;
+  --ink-secondary: #525252;
+  --ink-tertiary: #666666;
+  --line: #e3e3e3;
+  --line-control: #8a8a8a;
+  --accent: var(--ink);
+  --accent-soft: #e8e8e8;
+  --on-accent: #ffffff;
+  --focus-ring: var(--accent);
+  --success: #1f6b66;
+  --success-soft: #ddeeec;
+  --warning: #8a5a0b;
+  --warning-soft: #f5ead3;
+  --danger: #b0283f;
+  --danger-soft: #f7e1e4;
+  --info: #2c5f86;
+  --info-soft: #e1ebf3;
+  --fill-hover: #0000000a;
+  --fill-selected: #00000012;
+  --knob: #ffffff;
+  --scrim: #00000052;
+  --glass-fill: #ffffffa6;
+  --glass-stroke: #ffffffcc;
+  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08);
+  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70);
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+  --stroke-hairline: 0.5px;
+  --stroke-control: 1px;
+  --stroke-focus: 2px;
+  --control-mac-sm: 20px;
+  --control-mac: 24px;
+  --control-mac-lg: 28px;
+  --row-mac: 26px;
+  --control-ios: 44px;
+  --button-ios-sm: 30px;
+  --button-ios: 36px;
+  --control-ios-lg: 46px;
+  --sidebar-mac: 220px;
+  --content-max: 680px;
+  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "PingFang SC", serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
+}
+@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
+  --canvas: #161616;
+  --surface: #1c1c1c;
+  --surface-raised: #252525;
+  --surface-sunken: #111111;
+  --ink: #ededed;
+  --ink-secondary: #a3a3a3;
+  --ink-tertiary: #8c8c8c;
+  --line: #2f2f2f;
+  --line-control: #737373;
+  --accent: var(--ink);
+  --accent-soft: #2e2e2e;
+  --on-accent: #161616;
+  --focus-ring: var(--accent);
+  --success: #6cc3b4;
+  --success-soft: #183230;
+  --warning: #e2b054;
+  --warning-soft: #3a2e17;
+  --danger: #f07a8a;
+  --danger-soft: #3d2027;
+  --info: #82b4dc;
+  --info-soft: #1d2c3a;
+  --fill-hover: #ffffff0f;
+  --fill-selected: #ffffff1a;
+  --knob: #ffffff;
+  --scrim: #00000080;
+  --glass-fill: #2a2a2aa6;
+  --glass-stroke: #ffffff24;
+  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.30);
+  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45);
+  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+  --stroke-hairline: 0.5px;
+  --stroke-control: 1px;
+  --stroke-focus: 2px;
+  --control-mac-sm: 20px;
+  --control-mac: 24px;
+  --control-mac-lg: 28px;
+  --row-mac: 26px;
+  --control-ios: 44px;
+  --button-ios-sm: 30px;
+  --button-ios: 36px;
+  --control-ios-lg: 46px;
+  --sidebar-mac: 220px;
+  --content-max: 680px;
+  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "PingFang SC", serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
+}}
+:root[data-theme="dark"]{
+  --canvas: #161616;
+  --surface: #1c1c1c;
+  --surface-raised: #252525;
+  --surface-sunken: #111111;
+  --ink: #ededed;
+  --ink-secondary: #a3a3a3;
+  --ink-tertiary: #8c8c8c;
+  --line: #2f2f2f;
+  --line-control: #737373;
+  --accent: var(--ink);
+  --accent-soft: #2e2e2e;
+  --on-accent: #161616;
+  --focus-ring: var(--accent);
+  --success: #6cc3b4;
+  --success-soft: #183230;
+  --warning: #e2b054;
+  --warning-soft: #3a2e17;
+  --danger: #f07a8a;
+  --danger-soft: #3d2027;
+  --info: #82b4dc;
+  --info-soft: #1d2c3a;
+  --fill-hover: #ffffff0f;
+  --fill-selected: #ffffff1a;
+  --knob: #ffffff;
+  --scrim: #00000080;
+  --glass-fill: #2a2a2aa6;
+  --glass-stroke: #ffffff24;
+  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.30);
+  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45);
+  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+  --stroke-hairline: 0.5px;
+  --stroke-control: 1px;
+  --stroke-focus: 2px;
+  --control-mac-sm: 20px;
+  --control-mac: 24px;
+  --control-mac-lg: 28px;
+  --row-mac: 26px;
+  --control-ios: 44px;
+  --button-ios-sm: 30px;
+  --button-ios: 36px;
+  --control-ios-lg: 46px;
+  --sidebar-mac: 220px;
+  --content-max: 680px;
+  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "PingFang SC", serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
+}

package/template/project/tokens.json

@@ -0,0 +1,142 @@
+{
+  "name": "Deernova",
+  "version": 2,
+  "color": {
+    "themes": [
+      { "id": "light", "name": "Light" },
+      { "id": "dark", "name": "Dark" }
+    ],
+    "tokens": [
+      { "name": "canvas", "value": { "light": "#f5f5f5", "dark": "#161616" }, "usage": "窗口底色、iOS 分组列表的底色。最底层的纸面。" },
+      { "name": "surface", "value": { "light": "#fafafa", "dark": "#1c1c1c" }, "usage": "内容区、卡片。比 canvas 略亮一层。" },
+      { "name": "surface-raised", "value": { "light": "#ffffff", "dark": "#252525" }, "usage": "输入框、Composer、iOS 分组列表、弹出层。最亮的纸面。" },
+      { "name": "surface-sunken", "value": { "light": "#ebebeb", "dark": "#111111" }, "usage": "代码块、用户消息气泡、展开的步骤详情。凹下去的纸面。" },
+      { "name": "ink", "value": { "light": "#171717", "dark": "#ededed" }, "usage": "正文与标题，用在四种纸面上（最低 13:1）。" },
+      { "name": "ink-secondary", "value": { "light": "#525252", "dark": "#a3a3a3" }, "usage": "次要文字、说明、列表的值、未选中图标，用在四种纸面上（最低 6:1）。" },
+      { "name": "ink-tertiary", "value": { "light": "#666666", "dark": "#8c8c8c" }, "usage": "占位符、时间戳、计数、分组标题，用在四种纸面上（最低 4.5:1）。" },
+      { "name": "line", "value": { "light": "#e3e3e3", "dark": "#2f2f2f" }, "usage": "分隔线、卡片描边、按钮描边。装饰性，不承载信息。" },
+      { "name": "line-control", "value": { "light": "#8a8a8a", "dark": "#737373" }, "usage": "输入框边框、拖拽条。在 canvas、surface、surface-raised 上不低于 3:1，让人一眼看出可输入。" },
+      { "name": "accent", "value": "{ink}", "usage": "强调：主按钮填充、选中指示、焦点环。就是墨色本身，浅色主题为黑、深色主题为白；强调靠明暗对比，不靠彩色。" },
+      { "name": "accent-soft", "value": { "light": "#e8e8e8", "dark": "#2e2e2e" }, "usage": "强调的浅底：强调标签、列表图标底、输入框聚焦光晕。上面的文字用 ink。" },
+      { "name": "on-accent", "value": { "light": "#ffffff", "dark": "#161616" }, "usage": "accent 填充上的文字和图标：浅色主题白字，深色主题黑字。" },
+      { "name": "focus-ring", "value": "{accent}", "usage": "键盘焦点环：2pt 实线，外偏移 2pt。在所有纸面上不低于 13:1。" },
+      { "name": "success", "value": { "light": "#1f6b66", "dark": "#6cc3b4" }, "usage": "成功、已完成、已同步。界面里只有状态色是彩色，只在表达状态时出现。作为文字用在纸面和 success-soft 上。" },
+      { "name": "success-soft", "value": { "light": "#ddeeec", "dark": "#183230" }, "usage": "成功状态的浅底（标签、横幅）。" },
+      { "name": "warning", "value": { "light": "#8a5a0b", "dark": "#e2b054" }, "usage": "需要注意但不阻断：额度将用完、网络较慢。作为文字用在纸面和 warning-soft 上。" },
+      { "name": "warning-soft", "value": { "light": "#f5ead3", "dark": "#3a2e17" }, "usage": "警告状态的浅底。" },
+      { "name": "danger", "value": { "light": "#b0283f", "dark": "#f07a8a" }, "usage": "错误、失败、删除。永远同时配图标或文字。作为文字用在纸面和 danger-soft 上。" },
+      { "name": "danger-soft", "value": { "light": "#f7e1e4", "dark": "#3d2027" }, "usage": "错误状态的浅底、危险按钮的底色。" },
+      { "name": "info", "value": { "light": "#2c5f86", "dark": "#82b4dc" }, "usage": "中性提示。作为文字用在纸面和 info-soft 上。" },
+      { "name": "info-soft", "value": { "light": "#e1ebf3", "dark": "#1d2c3a" }, "usage": "提示状态的浅底。" },
+      { "name": "fill-hover", "value": { "light": "#0000000a", "dark": "#ffffff0f" }, "usage": "悬停底色，叠在任何纸面上（列表行、文字按钮、侧边栏项）。" },
+      { "name": "fill-selected", "value": { "light": "#00000012", "dark": "#ffffff1a" }, "usage": "选中底色（侧边栏当前项、分段控件底槽、中性标签底）。" },
+      { "name": "knob", "value": { "light": "#ffffff", "dark": "#ffffff" }, "usage": "开关的圆钮，两套主题都是白色，与系统一致。" },
+      { "name": "scrim", "value": { "light": "#00000052", "dark": "#00000080" }, "usage": "弹窗背后压暗内容的遮罩。" },
+      { "name": "glass-fill", "value": { "light": "#ffffffa6", "dark": "#2a2a2aa6" }, "usage": "仅用于网页预览模拟 Liquid Glass。App 里用系统 .glassEffect()，不要用这个值自己画玻璃。" },
+      { "name": "glass-stroke", "value": { "light": "#ffffffcc", "dark": "#ffffff24" }, "usage": "仅用于网页预览：玻璃边缘的高光描边。" }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "serif": "ui-serif, \"New York\", \"Iowan Old Style\", Georgia, \"PingFang SC\", serif",
+      "sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"PingFang SC\", \"Hiragino Sans GB\", system-ui, sans-serif",
+      "mono": "ui-monospace, \"SF Mono\", Menlo, \"PingFang SC\", monospace"
+    },
+    "groups": [
+      {
+        "name": "macOS",
+        "family": "sans",
+        "note": "Mac 正文 13pt，行高收紧到约 1.4 倍。衬线只用于标题和长文阅读，界面文字一律无衬线。",
+        "styles": [
+          { "name": "mac-display", "family": "serif", "fontSize": "22px", "lineHeight": "28px", "fontWeight": 600, "letterSpacing": "-0.01em", "sample": "还没有笔记", "usage": "空状态、引导页的大标题。每屏最多一个。SwiftUI: .system(size: 22, weight: .semibold, design: .serif)" },
+          { "name": "mac-title", "family": "serif", "fontSize": "17px", "lineHeight": "22px", "fontWeight": 600, "sample": "本周回顾", "usage": "文章标题、设置页标题。SwiftUI: .system(.title3, design: .serif).weight(.semibold)" },
+          { "name": "mac-headline", "fontSize": "13px", "lineHeight": "17px", "fontWeight": 600, "sample": "最近项目", "usage": "窗口标题、区块标题、横幅标题。SwiftUI: .headline" },
+          { "name": "mac-body", "fontSize": "13px", "lineHeight": "18px", "fontWeight": 400, "sample": "同步到 iCloud 后，所有设备上都能看到这条笔记。", "usage": "界面正文、按钮、列表、表单、用户消息。SwiftUI: .body" },
+          { "name": "mac-prose", "family": "serif", "fontSize": "14px", "lineHeight": "22px", "fontWeight": 400, "sample": "长文和 AI 的回答用衬线排，读起来更像一页纸，而不是一块界面。", "usage": "长文阅读、AI 回答。栏宽不超过 content-max。" },
+          { "name": "mac-callout", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "sample": "上次同步：今天 09:41", "usage": "表单说明、卡片摘要、次要信息。SwiftUI: .callout" },
+          { "name": "mac-caption", "fontSize": "11px", "lineHeight": "13px", "fontWeight": 500, "sample": "3 个文件 · 12 KB", "usage": "时间戳、计数、侧边栏分组标题、标签。SwiftUI: .caption" }
+        ]
+      },
+      {
+        "name": "iOS",
+        "family": "sans",
+        "note": "iOS 正文保持系统默认的 17pt，让动态字体正常缩放，只收紧行高和标题。",
+        "styles": [
+          { "name": "ios-large-title", "family": "serif", "fontSize": "30px", "lineHeight": "36px", "fontWeight": 600, "letterSpacing": "-0.01em", "sample": "笔记", "usage": "页面大标题。SwiftUI: .system(.largeTitle, design: .serif).weight(.semibold)" },
+          { "name": "ios-title", "family": "serif", "fontSize": "20px", "lineHeight": "25px", "fontWeight": 600, "sample": "本周回顾", "usage": "弹窗标题、文章标题、空状态标题。SwiftUI: .system(.title3, design: .serif)" },
+          { "name": "ios-headline", "fontSize": "17px", "lineHeight": "22px", "fontWeight": 600, "sample": "最近项目", "usage": "列表行标题、卡片标题、按钮。SwiftUI: .headline" },
+          { "name": "ios-body", "fontSize": "17px", "lineHeight": "23px", "fontWeight": 400, "sample": "同步到 iCloud 后，所有设备上都能看到这条笔记。", "usage": "界面正文、列表行。SwiftUI: .body" },
+          { "name": "ios-prose", "family": "serif", "fontSize": "17px", "lineHeight": "26px", "fontWeight": 400, "sample": "长文和 AI 的回答用衬线排，读起来更像一页纸。", "usage": "长文阅读、AI 回答。SwiftUI: .system(.body, design: .serif)，行距 .lineSpacing(4)" },
+          { "name": "ios-callout", "fontSize": "15px", "lineHeight": "20px", "fontWeight": 400, "sample": "上次同步：今天 09:41", "usage": "说明文字、弹窗正文、用户消息。SwiftUI: .callout" },
+          { "name": "ios-footnote", "fontSize": "13px", "lineHeight": "17px", "fontWeight": 400, "sample": "关闭后，新笔记只保存在这台设备上。", "usage": "分组列表的页头页脚、卡片摘要。SwiftUI: .footnote" },
+          { "name": "ios-caption", "fontSize": "12px", "lineHeight": "15px", "fontWeight": 500, "sample": "3 个文件 · 12 KB", "usage": "时间戳、计数、标签。SwiftUI: .caption" }
+        ]
+      },
+      {
+        "name": "Code",
+        "family": "mono",
+        "note": "代码、命令、文件路径、数据。",
+        "styles": [
+          { "name": "code-mac", "fontSize": "12px", "lineHeight": "17px", "fontWeight": 400, "sample": "let total = items.reduce(0, +)", "usage": "Mac 上的代码块、步骤摘要。SwiftUI: .system(.callout, design: .monospaced)" },
+          { "name": "code-ios", "fontSize": "13px", "lineHeight": "18px", "fontWeight": 400, "sample": "let total = items.reduce(0, +)", "usage": "iOS 上的代码块。SwiftUI: .system(.footnote, design: .monospaced)" }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "note": "4pt 网格，整体偏紧凑。组与组之间的间距至少是组内间距的 2 倍。",
+    "tokens": [
+      { "name": "space-1", "value": "4px", "usage": "图标与文字之间、卡片内标题与摘要之间。" },
+      { "name": "space-2", "value": "8px", "usage": "Mac 列表项内边距、横幅上下内边距、Composer 内边距。" },
+      { "name": "space-3", "value": "12px", "usage": "Mac 按钮左右内边距、卡片内边距、横幅左右内边距。" },
+      { "name": "space-4", "value": "16px", "usage": "Mac 内容区边距、对话中消息之间、iOS 页面左右边距。" },
+      { "name": "space-5", "value": "20px", "usage": "iOS 分组之间、Mac 区块之间。" },
+      { "name": "space-6", "value": "24px", "usage": "空状态内边距、大区块之间。" },
+      { "name": "space-8", "value": "32px", "usage": "页面级留白。" },
+      { "name": "space-10", "value": "40px", "usage": "引导页、首屏的大留白。" }
+    ]
+  },
+  "radius": {
+    "note": "嵌套保持同心：内圆角 = 外圆角 − 内边距。",
+    "tokens": [
+      { "name": "radius-xs", "value": "4px", "usage": "标签、复选框、分段控件里的选中块（外层 radius-sm、内边距 2）。" },
+      { "name": "radius-sm", "value": "6px", "usage": "Mac 按钮、输入框、侧边栏选中块、iOS 列表图标底。" },
+      { "name": "radius-md", "value": "8px", "usage": "Mac 卡片、横幅、代码块、弹出菜单。" },
+      { "name": "radius-lg", "value": "12px", "usage": "iOS 卡片、iOS 分组列表、Composer、用户消息气泡、Mac 侧边栏面板。" },
+      { "name": "radius-xl", "value": "24px", "usage": "iOS 底部弹窗、iOS 单行 Composer。" },
+      { "name": "radius-full", "value": "999px", "usage": "胶囊与圆形：玻璃按钮、iOS 主按钮、发送按钮、状态圆点。" }
+    ]
+  },
+  "shadow": {
+    "note": "卡片不加阴影。只有真正浮起来的东西才有阴影。",
+    "tokens": [
+      { "name": "shadow-control", "value": { "light": "0 1px 1px rgba(0, 0, 0, 0.05)", "dark": "0 1px 1px rgba(0, 0, 0, 0.30)" }, "usage": "次按钮、分段控件的选中块：一点点厚度。" },
+      { "name": "shadow-float", "value": { "light": "0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08)", "dark": "0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45)" }, "usage": "Composer、弹出菜单、弹窗、浮动面板。" },
+      { "name": "shadow-glass", "value": { "light": "0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70)", "dark": "0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10)" }, "usage": "仅用于网页预览模拟玻璃。App 里系统玻璃自带阴影。" }
+    ]
+  },
+  "stroke": {
+    "note": "线宽。",
+    "tokens": [
+      { "name": "stroke-hairline", "value": "0.5px", "usage": "分隔线、卡片描边：1 个物理像素。SwiftUI: 1 / displayScale。" },
+      { "name": "stroke-control", "value": "1px", "usage": "输入框边框。" },
+      { "name": "stroke-focus", "value": "2px", "usage": "焦点环。" }
+    ]
+  },
+  "size": {
+    "note": "控件高度与布局尺寸。Mac 偏紧凑，iOS 遵守 44pt 最小点击区域。",
+    "tokens": [
+      { "name": "control-mac-sm", "value": "20px", "usage": "Mac 小按钮、行内操作、分段控件。" },
+      { "name": "control-mac", "value": "24px", "usage": "Mac 默认按钮、输入框、图标按钮、步骤行。" },
+      { "name": "control-mac-lg", "value": "28px", "usage": "Mac 大按钮（引导页、空状态）。" },
+      { "name": "row-mac", "value": "26px", "usage": "Mac 侧边栏项、列表行。" },
+      { "name": "control-ios", "value": "44px", "usage": "iOS 最小可点区域（按钮看起来可以更小，点击区域仍补足到 44）、列表行、输入框、导航栏玻璃按钮。" },
+      { "name": "button-ios-sm", "value": "30px", "usage": "iOS 小按钮的可见高度：卡片和列表里的「获取」「关注」这类行内操作。" },
+      { "name": "button-ios", "value": "36px", "usage": "iOS 默认按钮的可见高度。" },
+      { "name": "control-ios-lg", "value": "46px", "usage": "iOS 通栏主按钮（页面底部、弹窗里的唯一主操作）。" },
+      { "name": "sidebar-mac", "value": "220px", "usage": "Mac 侧边栏默认宽度。" },
+      { "name": "content-max", "value": "680px", "usage": "长文阅读栏的最大宽度，14pt 下约每行 45 个汉字。" }
+    ]
+  }
+}

package/template/style.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.65 var(--font-sans)}a{color:inherit}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid var(--line-control);background:var(--surface-raised);padding:7px 12px;border-radius:6px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.skip{position:fixed;top:-100px;z-index:10;background:var(--surface);padding:12px}.skip:focus{top:8px}aside{width:236px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);background:var(--surface);padding:30px 22px;overflow:auto}.brand{text-decoration:none;font:600 32px var(--font-serif);letter-spacing:-1.6px}.brand span{display:block;font:10px var(--font-sans);letter-spacing:2px;margin-top:9px}.edition{color:var(--ink-tertiary);font-size:11px;margin:24px 0}.search{display:block;font-size:11px;color:var(--ink-secondary)}input{width:100%;min-height:34px;border:1px solid var(--line-control);background:var(--surface-raised);border-radius:6px;padding:6px 8px;margin-top:5px}nav{margin-top:24px}nav>a{display:flex;justify-content:space-between;text-decoration:none;font-size:13px;padding:7px 8px;border-radius:6px}nav a:hover,nav a.active{background:var(--fill-selected)}nav span{color:var(--ink-tertiary);font:10px var(--font-mono)}.component-nav{border-left:1px solid var(--line);margin:8px 0 12px 9px;padding-left:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.component-nav a{text-decoration:none;font-size:10px;color:var(--ink-secondary);padding:2px 0}.aside-bottom{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;font-size:12px}select{float:right;background:var(--surface);border:0}.aside-bottom p{color:var(--ink-tertiary);margin-top:24px}main{margin-left:236px;padding:0 64px;max-width:1580px}header{display:flex;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--line);font:10px var(--font-mono);letter-spacing:1px;color:var(--ink-secondary)}.hero{padding-top:64px}.eyebrow,.section-title>span{font-size:11px;letter-spacing:1.5px;color:var(--ink-secondary)}h1{font:500 clamp(38px,4.6vw,68px)/1.25 var(--font-serif);letter-spacing:-2px;margin:24px 0}h1 em{font-style:normal;color:var(--ink-tertiary)}.lede{max-width:520px;font-size:15px;line-height:1.9;color:var(--ink-secondary)}.actions{display:flex;align-items:center;gap:24px;margin:28px 0 42px}.actions a{font-size:13px;text-decoration:none}.primary{background:var(--ink);color:var(--on-accent);padding:10px 18px;border-radius:6px}.specimen{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}.specimen-bar{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);font:10px var(--font-mono);color:var(--ink-tertiary)}.specimen-inner{display:flex;position:relative;min-height:290px}.mini-nav{width:185px;border-right:1px solid var(--line);padding:26px 16px;font-size:11px;color:var(--ink-secondary)}.mini-nav b,.mini-nav span{display:block;margin-top:12px;padding:4px 8px}.mini-nav b{background:var(--fill-selected);border-radius:4px;color:var(--ink);font-weight:500}.paper{padding:28px 38px;flex:1;background:var(--surface-raised)}.paper small{font-size:10px;color:var(--ink-tertiary)}.paper h2{font:500 28px/1.4 var(--font-serif);margin:16px 0}.paper p{font-size:12px;color:var(--ink-secondary)}.paper-rule{height:1px;background:var(--line);margin:24px 0 12px}.status{font-size:10px;color:var(--success)}.floating{position:absolute;right:24px;bottom:24px;background:var(--glass-fill);border:1px solid var(--glass-stroke);box-shadow:var(--shadow-glass);backdrop-filter:blur(14px);border-radius:30px;padding:10px 16px}.floating span{font-size:12px;margin-left:6px}.stats{display:grid;grid-template-columns:repeat(3,1fr);padding:26px 0;border-bottom:1px solid var(--line)}.stats div+div{border-left:1px solid var(--line);padding-left:24px}.stats b{display:block;font:500 21px var(--font-serif)}.stats span{display:block;font-size:10px;color:var(--ink-tertiary);margin-top:8px}.section{padding-top:70px}.section-title{margin-bottom:32px}.section-title h2{font:500 32px/1.4 var(--font-serif);margin:12px 0}.section-title p,.muted{color:var(--ink-secondary);font-size:13px}.prose{max-width:760px;overflow-wrap:anywhere}.prose h2{font:500 24px var(--font-serif);margin-top:40px}.prose h3{margin-top:28px}.prose p,.prose li{color:var(--ink-secondary)}.prose strong{color:var(--ink);font-weight:600}pre{overflow:auto;padding:16px;background:var(--surface-sunken);border-radius:8px;max-width:100%}code{font:12px/1.7 var(--font-mono)}:not(pre)>code{background:var(--surface-sunken);padding:2px 4px;border-radius:3px}table{border-collapse:collapse;width:100%;font-size:12px;display:block;overflow:auto}td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left}.token-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.token{text-align:left;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:var(--surface);padding:14px;min-width:0}.token:hover{border-color:var(--ink-tertiary)}.swatch{height:42px;width:100%;border:1px solid var(--line);border-radius:4px;margin-bottom:12px}.token strong{font:12px var(--font-mono)}.token code{font-size:10px;margin:8px 0;overflow-wrap:anywhere;white-space:normal}.token small{color:var(--ink-secondary);font-size:11px;line-height:1.6}.type-row{border-bottom:1px solid var(--line);padding:16px 0}.type-row small{color:var(--ink-secondary)}.component{margin-bottom:28px;scroll-margin-top:24px}.component-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}.component-head h3{font:500 17px var(--font-mono);margin:0}.component-head span{font-size:12px;color:var(--ink-secondary)}.component-head a{font-size:11px;margin-left:auto;white-space:nowrap}.preview{border:1px solid var(--line);border-radius:10px;overflow:auto;background:var(--surface)}iframe{display:block;width:100%;min-width:760px;border:0}summary{cursor:pointer;padding:12px 0;font-size:12px;color:var(--ink-secondary)}details .prose{padding:0 16px 16px;border-left:1px solid var(--line)}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.install-grid article{min-width:0;border-top:1px solid var(--line);padding-top:10px}.install-grid p{font-size:12px;color:var(--ink-secondary)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0;margin-top:72px;font-size:11px;color:var(--ink-tertiary)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-accent);padding:8px 16px;border-radius:20px;opacity:0;pointer-events:none}#toast.show{opacity:1}[hidden]{display:none!important}@media(min-width:1500px){main{padding-right:100px;padding-left:100px}}@media(max-width:1000px){main{padding:0 28px}.token-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.component-head span{display:none}.mini-nav{width:130px}.paper{padding:24px}}@media(max-width:700px){aside{position:static;width:auto;padding:18px 20px}aside .edition,aside .component-nav,aside .aside-bottom p{display:none}.brand{font-size:26px}.brand span{display:inline;font-size:9px;letter-spacing:1px;margin-left:14px}nav{display:flex;flex-wrap:wrap;margin-top:12px}nav>a{font-size:11px;gap:8px}.search{margin-top:14px}.aside-bottom{margin-top:12px;padding-top:10px}main{margin:0;padding:0 20px}header{font-size:8px}.hero{padding-top:36px}h1{letter-spacing:-1px}.mini-nav{display:none}.paper{padding:24px}.floating{right:12px;bottom:18px}.stats b{font-size:16px}.stats div+div{padding-left:12px}.stats span{font-size:9px}.install-grid{grid-template-columns:1fr}.section{padding-top:48px}.section-title h2{font-size:26px}footer{flex-direction:column}.token{padding:10px}button,select,nav>a{min-height:44px}.component-nav a{min-height:24px}.component-head{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}@media(prefers-reduced-transparency:reduce){.floating{background:var(--surface-raised);backdrop-filter:none}}