:root{--fw-ease: cubic-bezier(.16, 1, .3, 1);--fw-ease-out: var(--fw-ease);--fw-duration-fast: .15s;--fw-duration-normal: .25s;--fw-duration-slow: .35s;--fw-transition-appear: opacity var(--fw-duration-normal) var(--fw-ease), max-width var(--fw-duration-normal) var(--fw-ease), max-height var(--fw-duration-normal) var(--fw-ease), grid-template-rows var(--fw-duration-normal) var(--fw-ease);--fw-transition-size: width var(--fw-duration-normal) var(--fw-ease), height var(--fw-duration-normal) var(--fw-ease), font-size var(--fw-duration-normal) var(--fw-ease);--fw-transition-opacity: opacity var(--fw-duration-normal) var(--fw-ease);--fw-transition-opacity-font: opacity var(--fw-duration-normal) var(--fw-ease), font-size var(--fw-duration-normal) var(--fw-ease)}:root{--fw-font-base-8: 8px;--fw-font-base-10: 10px;--fw-font-base-12: 12px;--fw-font-base-14: 14px;--fw-font-base-16: 16px;--fw-font-base-18: 18px;--fw-font-base-20: 20px;--fw-font-base-24: 24px;--fw-font-base-28: 28px;--fw-font-xs: 10px;--fw-font-s: 12px;--fw-font-m: 14px;--fw-font-l: 16px;--fw-font-xl: 18px;--fw-avatar-size: 28px;--fw-line-single: 1;--fw-weight-tertiary: 300;--fw-weight-secondary: 400;--fw-weight-main: 500;--fw-weight-highlight: 600;--fw-weight-title: 700}.fw-weight-tertiary{font-weight:var(--fw-weight-tertiary)}.fw-weight-secondary{font-weight:var(--fw-weight-secondary)}.fw-weight-main{font-weight:var(--fw-weight-main)}.fw-weight-highlight{font-weight:var(--fw-weight-highlight)}.fw-weight-title{font-weight:var(--fw-weight-title)}:root{--fw-space-0: 0;--fw-space-2: 2px;--fw-space-4: 4px;--fw-space-8: 8px;--fw-space-12: 12px;--fw-space-16: 16px;--fw-space-20: 20px;--fw-space-24: 24px;--fw-space-28: 28px;--fw-space-32: 32px;--fw-space-36: 36px;--fw-space-40: 40px;--fw-space-44: 44px;--fw-space-48: 48px;--fw-space-52: 52px;--fw-space-56: 56px;--fw-space-60: 60px;--fw-space-64: 64px;--fw-space-68: 68px;--fw-space-72: 72px;--fw-space-76: 76px;--fw-space-80: 80px;--fw-space-84: 84px;--fw-space-88: 88px;--fw-space-92: 92px;--fw-space-96: 96px}:root{--fw-size-24: 24px;--fw-size-32: 32px;--fw-size-40: 40px;--fw-size-48: 48px;--fw-size-56: 56px;--fw-size-64: 64px;--fw-size-72: 72px;--fw-size-80: 80px;--fw-size-88: 88px;--fw-size-96: 96px;--fw-size-104: 104px;--fw-size-112: 112px;--fw-size-120: 120px;--fw-size-128: 128px;--fw-size-136: 136px;--fw-size-144: 144px;--fw-size-152: 152px;--fw-size-160: 160px;--fw-size-168: 168px;--fw-size-176: 176px;--fw-size-184: 184px;--fw-size-192: 192px;--fw-size-200: 200px;--fw-size-208: 208px;--fw-size-216: 216px;--fw-size-224: 224px;--fw-size-232: 232px;--fw-size-240: 240px;--fw-size-248: 248px;--fw-size-256: 256px}.ln-avatar{display:flex;align-items:center;gap:var(--fw-space-8)}.ln-avatar__circle{border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:var(--fw-line-single);font-weight:var(--fw-weight-highlight);color:#fff;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);transition:var(--fw-transition-size)}.ln-avatar__text{display:flex;flex-direction:column;gap:var(--fw-space-2);min-width:0;overflow:hidden}.ln-avatar__name{line-height:var(--fw-line-single);font-weight:var(--fw-weight-highlight);color:var(--text, #111);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ln-avatar__role{line-height:var(--fw-line-single);font-weight:var(--fw-weight-tertiary);color:var(--text-tertiary, #999);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ln-avatar--hidden{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary, #999);font-size:var(--fw-font-xs)}.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:56px;background:var(--bg-card);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-left{display:flex;align-items:center;gap:20px}.header-title{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text)}.header-title span{font-weight:400;color:var(--text-tertiary)}.page-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:6px 30px 6px 12px;font-size:13px;font-family:inherit;font-weight:500;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;outline:none;transition:border-color var(--fw-duration-fast) var(--fw-ease);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.page-select:hover{border-color:#ccc}.page-select:focus{border-color:#999}.header-right{display:flex;align-items:center;gap:16px}.header-version{font-size:11px;color:var(--text-tertiary);font-weight:500;background:var(--bg);padding:3px 8px;border-radius:4px}.knob-group{display:flex;align-items:center;gap:14px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 16px;font-size:12px;font-weight:500;color:#fff;background:#111;border-radius:8px;opacity:0;pointer-events:none;transition:all var(--fw-duration-normal) var(--fw-ease);z-index:999}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.color-group{margin-bottom:40px}.color-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}.color-list{display:flex;flex-direction:column;gap:12px}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-card{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:box-shadow var(--fw-duration-fast) var(--fw-ease)}.color-card:hover{box-shadow:0 2px 8px #0000000a}.color-card.dark-preview{background:#1a1a1a;border-color:#333}.color-card.dark-preview .color-name,.color-card.dark-preview .color-hex{color:#e5e5e5}.color-card.dark-preview .color-desc{color:#888}.color-card.dark-preview .color-var{color:#666;border-color:#333}.color-card.dark-preview .color-var:hover{background:#222;color:#aaa}.color-body{display:flex;align-items:center;gap:16px}.color-swatch{width:48px;height:48px;border-radius:8px;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}.dark-preview .color-swatch{border-color:#ffffff14}.color-info{flex:1;min-width:0}.color-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:1px}.color-hex{font-size:12px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);margin-bottom:4px}.color-desc{font-size:11px;color:var(--text-tertiary);line-height:1.4}.color-var{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px;font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary);background:transparent;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all var(--fw-duration-fast) var(--fw-ease)}.color-var:hover{background:var(--bg);color:var(--text-secondary)}.color-var .copy-icon{opacity:.4;font-size:10px}.color-var:hover .copy-icon{opacity:.7}.theme-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);display:block}.dark-preview .theme-label{color:#666}.permanent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.permanent-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.permanent-swatch{width:36px;height:36px;border-radius:6px;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}.permanent-info{flex:1}.permanent-name{font-size:12px;font-weight:600;color:var(--text)}.permanent-hex{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary)}.permanent-var{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 6px;font-size:10px;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary);background:transparent;border:1px solid var(--border);border-radius:3px;cursor:pointer;transition:all var(--fw-duration-fast) var(--fw-ease)}.permanent-var:hover{background:var(--bg);color:var(--text-secondary)}.el-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fw-space-20);margin-bottom:var(--fw-space-16)}.el-header-left{display:flex;flex-direction:column;gap:var(--fw-space-4)}.el-header-title{font-size:var(--fw-font-l);font-weight:var(--fw-weight-highlight);letter-spacing:-.01em;color:var(--text)}.el-header-desc{font-size:var(--fw-font-s);color:var(--text-secondary);line-height:var(--line-multi);max-width:480px}.el-header-import{display:inline-flex;align-items:center;gap:var(--fw-space-8);padding:var(--fw-space-8) var(--fw-space-12);font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--fw-duration-fast) var(--fw-ease);white-space:nowrap;flex-shrink:0;max-width:380px;overflow:hidden}.el-header-import:hover{border-color:#ccc;color:var(--text)}.el-header-import-text{overflow:hidden;text-overflow:ellipsis}.el-header-import .copy-icon{opacity:.3;font-size:10px;flex-shrink:0}.el-header-import:hover .copy-icon{opacity:.6}.el-snippet-wrap{position:relative;margin-bottom:var(--fw-space-16);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.el-snippet-code{margin:0;padding:var(--fw-space-16);padding-right:100px;font-size:12px;font-family:SF Mono,Fira Code,monospace;line-height:1.5;color:var(--text);background:transparent;overflow-x:auto;white-space:pre}.el-snippet-code code{font-family:inherit}.el-snippet-copy{position:absolute;top:var(--fw-space-12);right:var(--fw-space-12);padding:var(--fw-space-8) var(--fw-space-12);font-size:11px;font-weight:var(--fw-weight-main);color:var(--text-secondary);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--fw-duration-fast) var(--fw-ease)}.el-snippet-copy:hover{border-color:#ccc;color:var(--text)}.el-top-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--fw-space-12);margin-bottom:var(--fw-space-12)}.el-cell{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.el-cell-badge{display:block;padding:var(--fw-space-12) var(--fw-space-16) 0;font-size:9px;font-weight:var(--fw-weight-highlight);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary)}.el-cell-meta{position:absolute;top:var(--fw-space-12);right:var(--fw-space-16);font-size:10px;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary)}.el-cell-body{padding:var(--fw-space-16)}.el-cell-body--center{display:flex;align-items:center;justify-content:center;min-height:var(--fw-size-120)}.el-api-table{width:100%;font-size:var(--fw-font-s);border-collapse:collapse}.el-api-table th{text-align:left;font-weight:var(--fw-weight-main);color:var(--text-tertiary);padding:var(--fw-space-4) var(--fw-space-8) var(--fw-space-4) 0;border-bottom:1px solid var(--border-light);font-size:10px;text-transform:uppercase;letter-spacing:.04em}.el-api-table td{padding:var(--fw-space-8) var(--fw-space-8) var(--fw-space-8) 0;border-bottom:1px solid var(--border-light)}.el-api-table tr:last-child td{border-bottom:none}.el-api-table td:first-child{font-family:SF Mono,Fira Code,monospace;font-weight:var(--fw-weight-main);color:var(--text);white-space:nowrap;font-size:var(--fw-font-s)}.el-api-table td:last-child{color:var(--text-secondary);font-size:var(--fw-font-s)}.el-matrix-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.el-matrix{width:100%;border-collapse:collapse;table-layout:fixed}.el-matrix-corner{width:80px;position:relative;font-size:9px;font-weight:var(--fw-weight-highlight);text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);background:var(--bg);border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:var(--fw-space-12)}.el-matrix-axis-y{display:block;text-align:left}.el-matrix-axis-x{display:block;text-align:right;margin-top:var(--fw-space-4);font-weight:var(--fw-weight-main);opacity:.6}.el-matrix-col-head{font-size:10px;font-weight:var(--fw-weight-highlight);text-align:center;color:var(--text-tertiary);background:var(--bg);border-bottom:1px solid var(--border);border-right:1px solid var(--border-light);padding:var(--fw-space-12) var(--fw-space-8);letter-spacing:.02em}.el-matrix-col-head:last-child{border-right:none}.el-matrix-row-head{font-size:10px;font-weight:var(--fw-weight-highlight);color:var(--text-tertiary);text-align:center;background:var(--bg);border-right:1px solid var(--border);border-bottom:1px solid var(--border-light);padding:var(--fw-space-12) var(--fw-space-8);letter-spacing:.02em}.el-matrix tr:last-child .el-matrix-row-head,.el-matrix tr:last-child .el-matrix-cell{border-bottom:none}.el-matrix-cell{border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);padding:var(--fw-space-16) var(--fw-space-12);vertical-align:middle}.el-matrix-cell:last-child{border-right:none}.el-section{margin-bottom:var(--fw-space-48)}.matrix-avatar{display:flex;align-items:center;gap:var(--fw-space-8)}.matrix-btn-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--fw-space-4)}.matrix-btn{display:inline-flex;align-items:center;gap:var(--fw-space-8);font-weight:var(--fw-weight-main);color:#fff;background:#111;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}.matrix-btn-label{font-weight:var(--fw-weight-highlight)}.matrix-btn-count{font-size:.8em;font-weight:var(--fw-weight-highlight);background:#fff3;padding:1px 6px;border-radius:99px}.matrix-btn-caption{color:var(--text-tertiary);padding-left:2px}.live-avatar{display:flex;align-items:center;gap:var(--fw-space-8)}.live-avatar-circle{border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-weight-highlight);color:#fff;flex-shrink:0;transition:var(--fw-transition-size)}.live-avatar-text{display:flex;flex-direction:column;overflow:hidden}.live-avatar-name{font-weight:var(--fw-weight-highlight);color:var(--text);white-space:nowrap;transition:var(--fw-transition-opacity-font)}.live-avatar-role{font-weight:var(--fw-weight-tertiary);color:var(--text-tertiary);white-space:nowrap;transition:var(--fw-transition-opacity-font)}.live-avatar-hidden{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--fw-font-xs);transition:var(--fw-transition-opacity)}.state-avatar-circle{border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:var(--fw-font-xs);font-weight:var(--fw-weight-highlight);color:#fff;flex-shrink:0}.state-avatar-size-24{width:var(--fw-size-24);height:var(--fw-size-24)}.state-avatar-size-32{width:var(--fw-size-32);height:var(--fw-size-32)}.state-avatar-size-48{width:var(--fw-size-48);height:var(--fw-size-48)}.state-avatar-hidden{border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fw-font-xs);color:var(--text-tertiary)}.state-text{display:flex;flex-direction:column}.state-name{font-size:var(--fw-font-s);font-weight:var(--fw-weight-highlight);color:var(--text)}.state-role{font-size:var(--fw-font-xs);font-weight:var(--fw-weight-tertiary);color:var(--text-tertiary)}.sizes-preview{position:relative;padding:48px 40px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:32px}.sizes-preview-badge{position:absolute;top:12px;left:16px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);background:var(--bg);padding:2px 7px;border-radius:3px;border:1px solid var(--border)}.sizes-preview-values{position:absolute;top:12px;right:16px;font-size:10px;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary)}.sizes-list{display:flex;flex-direction:column;gap:20px}.size-row{display:flex;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--border-light);transition:all var(--fw-duration-normal) var(--fw-ease)}.size-row:last-child{padding-bottom:0;border-bottom:none}.size-label{width:36px;flex-shrink:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}.size-sample{flex:1;color:var(--text);font-weight:500}.size-px{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);min-width:36px}.sizes-table-section{margin-bottom:40px}.sizes-table-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:8px}.sizes-table-desc{font-size:12px;color:var(--text-secondary);margin-bottom:16px}.sizes-table{width:100%;font-size:12px;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.sizes-table th,.sizes-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-light)}.sizes-table th{font-weight:600;color:var(--text);background:var(--bg)}.sizes-table td{color:var(--text-secondary)}.sizes-table .sizes-token{font-family:SF Mono,Fira Code,monospace;font-weight:500;color:var(--text)}.spacing-preview{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;padding:20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}.spacing-row{display:flex;align-items:center;gap:16px}.spacing-label{width:28px;flex-shrink:0;font-size:11px;font-weight:600;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary)}.spacing-bar{height:12px;min-width:2px;background:var(--text-secondary);border-radius:2px;flex-shrink:0}.spacing-px{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);min-width:40px}.sizes-spacing-table tbody tr:nth-child(odd){background:#00000005}.element-sizes-preview{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;padding:20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}.element-size-box{display:flex;align-items:center;justify-content:center;background:var(--text-secondary);border-radius:4px;flex-shrink:0}.element-size-value{font-size:10px;font-weight:600;font-family:SF Mono,Fira Code,monospace;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3)}.docs-page{display:block;visibility:visible}.docs-section{margin-bottom:40px}.docs-section-title{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}.docs-section p{font-size:13px;color:var(--text-secondary);line-height:1.65;margin-bottom:12px}.docs-section p:last-child{margin-bottom:0}.docs-section ul,.docs-section ol{margin:12px 0;padding-left:20px;font-size:13px;color:var(--text-secondary);line-height:1.65}.docs-section li{margin-bottom:4px}.docs-code{display:block;padding:16px;font-size:12px;font-family:SF Mono,Fira Code,Consolas,monospace;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto;margin:12px 0;white-space:pre;line-height:1.5}.docs-code-inline{font-family:SF Mono,Fira Code,monospace;font-size:12px;color:var(--text);background:var(--bg);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}.docs-table{width:100%;font-size:12px;border-collapse:collapse;margin:12px 0}.docs-table th,.docs-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border-light)}.docs-table th{font-weight:600;color:var(--text);background:var(--bg)}.docs-table td{color:var(--text-secondary)}.docs-table td:first-child{font-family:SF Mono,Fira Code,monospace;font-weight:500;color:var(--text)}.typo-section{margin-bottom:40px}.typo-section-title{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}.typo-section-desc{font-size:13px;color:var(--text-secondary);line-height:var(--line-multi);margin-bottom:16px}.typo-section-desc code{font-family:SF Mono,Fira Code,monospace;font-size:11px;padding:2px 6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 2px}.typo-font-sample{font-size:18px;color:var(--text);margin-bottom:8px}.typo-code{font-family:SF Mono,Fira Code,monospace;font-size:11px;color:var(--text-secondary)}.typo-line-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.typo-line-card{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.typo-line-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:4px}.typo-line-value{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);margin-bottom:12px}.typo-line-preview{font-size:14px;color:var(--text)}.typo-sizes-preview{position:relative;padding:48px 40px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px}.typo-sizes-badge{position:absolute;top:12px;left:16px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);background:var(--bg);padding:2px 7px;border-radius:3px;border:1px solid var(--border)}.typo-sizes-values{position:absolute;top:12px;right:16px;font-size:10px;font-family:SF Mono,Fira Code,monospace;color:var(--text-tertiary)}.typo-sizes-list{display:flex;flex-direction:column;gap:16px}.typo-size-row{display:flex;align-items:center;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}.typo-size-row:last-child{padding-bottom:0;border-bottom:none}.typo-size-label{width:36px;flex-shrink:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}.typo-size-sample{flex:1;color:var(--text);font-weight:500}.typo-size-px{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);min-width:36px}.typo-table{width:100%;font-size:12px;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.typo-table th,.typo-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-light)}.typo-table th{font-weight:600;color:var(--text);background:var(--bg)}.typo-table td{color:var(--text-secondary)}.typo-table .typo-token{font-family:SF Mono,Fira Code,monospace;font-weight:500;color:var(--text)}.typo-vars-table{max-width:400px}.typo-emphasis-preview{padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px}.typo-emphasis-row{display:flex;align-items:center;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--border-light);color:var(--text);font-size:16px}.typo-emphasis-row:last-child{padding-bottom:0;border-bottom:none}.typo-emphasis-label{width:80px;flex-shrink:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary)}.typo-emphasis-sample{flex:1}.typo-emphasis-value{font-size:11px;font-family:SF Mono,Fira Code,monospace;color:var(--text-secondary);min-width:36px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #fafafa;--bg-card: #ffffff;--text: #111111;--text-secondary: #666666;--text-tertiary: #999999;--border: #e5e5e5;--border-light: #f0f0f0;--radius: 10px;--radius-sm: 6px;--line-single: 1;--line-multi: 1.5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:var(--line-multi);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}.line-single{line-height:var(--line-single)}.line-multi{line-height:var(--line-multi)}.page{display:none;padding:32px;max-width:1200px;margin:0 auto}.page.active{display:block}.page-heading{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}.page-subtitle{font-size:13px;color:var(--text-secondary);margin-bottom:32px}