:root{--canvas: #f7f7f4;--surface: #ffffff;--surface-soft: #fafaf8;--sidebar: #f0f0eb;--ink: #252722;--muted: #777b72;--subtle: #969b90;--line: #e3e5dc;--line-strong: #cdd1c5;--accent: #d94c26;--accent-hover: #bf3c18;--accent-soft: #f9eae2;--success: #4d6b46;--success-soft: #edf3e8;--danger: #b53f3f;--danger-soft: #fbeeee;--white: #ffffff;--icon-color: #677f6c;--icon-soft: #edf2e9;--color-icon: #967050;--color-soft: #f7eddf;--type-icon: #67638c;--type-soft: #eeedf6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-14: 56px;--space-16: 64px;--font: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, monospace;--text-xs: 11px;--text-sm: 12px;--text-body: 14px;--text-md: 15px;--text-lg: 18px;--text-xl: 20px;--text-title: 36px;--text-stat: 32px;--line-body: 1.65;--line-tight: 1.25;--tracking-label: 1.5px;--tracking-title: -1px;--radius-sm: 5px;--radius: 8px;--radius-lg: 12px;--radius-pill: 100px;--sidebar-width: 244px;--content-max: 1440px;--form-max: 800px;--control-height: 42px;--border: 1px solid var(--line);--focus: 0 0 0 3px var(--accent-soft);--shadow: 0 5px 20px #25272206;--shadow-hover: 0 8px 24px #2527220a;--transition: .16s ease}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:var(--text-body);line-height:var(--line-body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:var(--space-1)}button:disabled{cursor:wait;opacity:.55}h1,h2,h3,p{margin:0}h1{font-size:var(--text-title);line-height:var(--line-tight);font-weight:650;letter-spacing:var(--tracking-title)}h2{font-size:var(--text-lg);line-height:var(--line-tight);font-weight:600}h3{font-size:var(--text-md);line-height:var(--line-body);font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:var(--space-2);left:var(--space-2);z-index:50;padding:var(--space-3) var(--space-5);border-radius:var(--radius);color:var(--white);background:var(--ink);transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;width:var(--sidebar-width);background:var(--sidebar);border-right:var(--border);padding:var(--space-10) var(--space-5) var(--space-6)}.brand{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-2);font-size:var(--text-lg);font-weight:650;letter-spacing:-.4px}.brand small{display:block;margin-top:var(--space-1);color:var(--muted);font-size:var(--text-xs);font-weight:400;letter-spacing:0}.brand-mark{display:flex;align-items:center;justify-content:center;position:relative;width:var(--space-10);height:var(--space-10);color:var(--white);background:var(--accent);border-radius:var(--radius);font-size:var(--text-stat);line-height:1;font-weight:700}.brand-mark span{align-self:flex-start;margin:var(--space-1) 0 0 -3px;font-size:var(--text-md)}.workspace-label{display:flex;justify-content:space-between;margin:var(--space-14) var(--space-3) var(--space-4);color:var(--subtle);font-size:var(--text-xs);letter-spacing:var(--tracking-label)}.workspace-label span{letter-spacing:0}.main-nav{display:flex;flex-direction:column;gap:var(--space-2)}.nav-link{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-12);padding:var(--space-3) var(--space-4);border-radius:var(--radius);color:var(--muted);transition:background var(--transition)}.nav-link>span:first-child{font-size:var(--text-xl);line-height:1}.nav-link.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}.nav-link:hover{background:var(--surface)}.nav-link.active>span:first-child{color:var(--accent)}.nav-arrow{margin-left:auto;font-size:var(--text-md);color:var(--subtle)}.sidebar-footer{margin-top:auto;padding:var(--space-10) var(--space-3) 0}.local-state{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.local-state>span,.topline-local>span{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--success)}.sidebar-footer p{color:var(--muted);font-size:var(--text-xs);margin-top:var(--space-2)}.export-link{display:flex;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-sm);padding:var(--space-5) 0}.export-link:hover{color:var(--accent)}.export-link>span{font-size:var(--text-lg)}.sidebar-version{display:flex;justify-content:space-between;padding-top:var(--space-4);border-top:var(--border);color:var(--subtle);font-family:var(--font-mono);font-size:8px;letter-spacing:.6px}.main-content{width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);padding:var(--space-8) var(--space-12) var(--space-6)}.main-content>*{max-width:var(--content-max);margin-inline:auto}.topline{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-6);border-bottom:var(--border);font-size:var(--text-sm);color:var(--muted)}.topline-local{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.5px}.page-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin:var(--space-12) 0 var(--space-10)}.eyebrow{color:var(--accent);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);margin-bottom:var(--space-3);font-weight:600}.title-accent{color:var(--accent)}.page-intro{color:var(--muted);margin-top:var(--space-4);font-size:var(--text-body)}.button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-height);padding:var(--space-2) var(--space-5);border:var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:var(--text-body);font-weight:500;white-space:nowrap;transition:background var(--transition),border-color var(--transition)}.button:hover{background:var(--surface-soft);border-color:var(--line-strong)}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--white)}.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.button.danger{color:var(--danger);border-color:var(--danger)}.button.danger:hover{background:var(--danger-soft)}.button>span{font-size:var(--text-xl);line-height:1}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:var(--space-6) 0;margin-bottom:var(--space-12);background:var(--surface);border:var(--border);border-radius:var(--radius)}.stat-item{display:flex;flex-direction:column;padding:0 var(--space-7);border-left:var(--border)}.stat-item:first-child{border-left:0}.stat-label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--text-sm)}.stat-label>span{color:var(--subtle);font-size:var(--text-lg)}.stat-item strong{margin:var(--space-2) 0 var(--space-1);font-size:var(--text-stat);line-height:var(--line-tight);font-weight:500;font-variant-numeric:tabular-nums}.stat-detail{font-size:var(--text-xs);color:var(--subtle)}.section-heading,.section-heading>div{display:flex;align-items:center}.section-heading{justify-content:space-between;margin-bottom:var(--space-5);gap:var(--space-4)}.section-heading>div{gap:var(--space-3)}.section-marker{width:var(--space-1);height:var(--space-4);background:var(--accent);border-radius:var(--radius-pill)}.count-pill{padding:0 var(--space-2);border-radius:var(--radius-sm);color:var(--muted);background:var(--line);font-size:var(--text-sm)}.muted{color:var(--muted);font-size:var(--text-sm)}.library-toolbar{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6)}.search-field{display:flex;align-items:center;flex:1;gap:var(--space-3);height:var(--control-height);padding:0 var(--space-4);border:var(--border);border-radius:var(--radius-sm);background:var(--surface)}.search-field>span{font-size:var(--text-xl);color:var(--muted);line-height:1}.search-field input{width:100%;min-width:0;border:0;outline-offset:var(--space-1);background:transparent;color:var(--ink);font-size:var(--text-sm)}input::placeholder,textarea::placeholder{color:var(--subtle)}.filter-field{display:flex;align-items:center;gap:var(--space-2);height:var(--control-height);padding:0 var(--space-3);border:var(--border);border-radius:var(--radius-sm);background:var(--surface)}.filter-field label{font-size:var(--text-sm);color:var(--subtle)}.filter-field select{border:0;color:var(--ink);background:transparent;font-size:var(--text-sm);min-width:96px}.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}.skill-card{display:flex;flex-direction:column;min-width:0;min-height:248px;border:var(--border);border-radius:var(--radius);background:var(--surface);padding:var(--space-6);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.skill-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-5)}.dimension-icon{display:flex;align-items:center;justify-content:center;width:var(--space-10);height:var(--space-10);border-radius:var(--radius);background:var(--icon-soft);color:var(--icon-color);font-size:var(--text-xl)}.dimension-color,.dimension-copy{background:var(--color-soft);color:var(--color-icon)}.dimension-typography,.dimension-component{background:var(--type-soft);color:var(--type-icon)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:400;line-height:var(--line-tight)}.badge>span{width:4px;height:4px;border-radius:var(--radius-pill);background:currentColor}.badge-published{color:var(--success);background:var(--success-soft)}.badge-draft{color:var(--muted);background:var(--sidebar)}.card-brief{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:var(--space-10);margin:var(--space-2) 0 var(--space-6);color:var(--muted);font-size:var(--text-sm);line-height:var(--line-body)}.card-footer{display:flex;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-4);border-top:var(--border);font-size:var(--text-xs);color:var(--muted)}.card-date{margin-left:auto;color:var(--subtle)}.card-arrow{color:var(--subtle);font-size:var(--text-md)}.skill-card:hover .card-arrow{color:var(--accent)}.page-footer{display:flex;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-8);margin-top:var(--space-10);border-top:var(--border);color:var(--subtle);font-size:var(--text-xs)}.page-footer>span:last-child{font-family:var(--font-mono);font-size:9px;letter-spacing:.8px}.page-footer>span:last-child>span{margin-left:var(--space-2);color:var(--accent);font-size:var(--text-md)}.empty,.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:var(--space-10);background:var(--surface);border:var(--border);border-radius:var(--radius);text-align:center}.empty h3{font-size:var(--text-lg);margin:var(--space-4) 0 var(--space-2)}.empty p{color:var(--muted);margin-bottom:var(--space-6)}.empty-icon{display:flex;align-items:center;justify-content:center;width:var(--space-12);height:var(--space-12);border-radius:var(--radius-lg);background:var(--accent-soft);color:var(--accent);font-size:var(--text-title)}.loading-state{flex-direction:row;gap:var(--space-3);color:var(--muted)}.loading-dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--accent)}.panel{background:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--space-6)}.panel>h2,.panel>h3{margin-bottom:var(--space-5)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.toolbar[aria-label="Skill 操作"]{margin-bottom:var(--space-6)}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}.field>label,label.field-label{font-weight:500;font-size:var(--text-sm)}.field input,.field select,.field textarea,input.field,select.field,textarea.field{width:100%;min-height:var(--control-height);padding:var(--space-2) var(--space-3);border:var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}.field textarea,textarea.field{resize:vertical;min-height:120px}.field small{color:var(--muted);font-size:var(--text-xs)}.error,.success{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);margin-bottom:var(--space-5)}.error{color:var(--danger);background:var(--danger-soft)}.success{color:var(--success);background:var(--success-soft)}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6)}.markdown{overflow-wrap:anywhere;font-size:var(--text-body);line-height:1.8}.markdown>*+*{margin-top:var(--space-4)}.markdown h1{font-size:var(--text-stat)}.markdown h2{font-size:var(--text-xl);padding-bottom:var(--space-2);border-bottom:var(--border);margin-top:var(--space-8)}.markdown h3{font-size:var(--text-lg);margin-top:var(--space-6)}.markdown ul,.markdown ol{padding-left:var(--space-6)}.markdown li+li{margin-top:var(--space-1)}.markdown a{color:var(--accent);text-decoration:underline;text-underline-offset:var(--space-1)}.markdown pre{padding:var(--space-4);overflow-x:auto;background:var(--surface-soft);border:var(--border);border-radius:var(--radius-sm)}.markdown code{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--surface-soft)}.markdown blockquote{border-left:3px solid var(--accent);margin-inline:0;padding:var(--space-2) var(--space-4);color:var(--muted);background:var(--surface-soft)}.markdown table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}.markdown th,.markdown td{border:var(--border);padding:var(--space-2) var(--space-3);text-align:left}.markdown img{max-width:100%;height:auto;border-radius:var(--radius-sm)}.markdown hr{border:0;border-top:var(--border);margin-block:var(--space-6)}@media(min-width:1600px){.main-content{padding-inline:var(--space-16)}}@media(max-width:1200px){.main-content{padding-inline:var(--space-7)}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-item{padding-inline:var(--space-5)}h1{font-size:var(--text-stat)}}@media(max-width:800px){.app-shell{flex-direction:column}.sidebar{position:static;width:100%;padding:var(--space-4) var(--space-5);border-right:0;border-bottom:var(--border);flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand{padding:0;font-size:var(--text-md)}.brand small,.workspace-label,.sidebar-footer,.nav-arrow{display:none}.brand-mark{width:var(--space-8);height:var(--space-8);font-size:var(--text-title)}.main-nav{flex-direction:row;gap:var(--space-1)}.nav-link{min-height:var(--space-10);padding:var(--space-2) var(--space-3);gap:var(--space-2);font-size:var(--text-sm)}.main-content{width:100%;margin-left:0;padding:var(--space-6) var(--space-5)}.topline{padding-bottom:var(--space-4)}.page-header{margin:var(--space-8) 0;align-items:flex-start}h1{font-size:var(--text-stat)}.page-intro{max-width:420px;font-size:var(--text-sm)}.stats-grid{margin-bottom:var(--space-8)}.stat-item{padding-inline:var(--space-4)}.stat-detail{display:none}.stat-item strong{font-size:var(--text-xl)}.stat-label>span{display:none}.split{grid-template-columns:minmax(0,1fr)}}@media(max-width:560px){.brand>span:last-child{display:none}.sidebar,.main-content{padding-inline:var(--space-4)}.topline-local{font-size:9px}.page-header{flex-direction:column;gap:var(--space-5)}h1{font-size:28px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-5)}.stat-item:nth-child(3){border-left:0}.section-heading>.muted{display:none}.library-toolbar{flex-wrap:wrap}.search-field{flex-basis:100%}.filter-field{flex:1;justify-content:space-between}.skills-grid{grid-template-columns:minmax(0,1fr)}.skill-card{min-height:232px}.page-footer{flex-direction:column;gap:var(--space-2)}.empty{padding:var(--space-6)}.panel{padding:var(--space-5)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}.skill-card:hover{transform:none}}.public-page{max-width:960px;margin-inline:auto;padding:var(--space-12) var(--space-6)}fieldset{min-width:0;padding:0;margin:0;border:0}pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}.main-content>section+section,.main-content>section+.panel,.main-content>.panel+section{margin-top:var(--space-6)}.main-content>section>h2{margin-bottom:var(--space-5)}.panel>.muted,.panel>.split,.panel>form{margin-bottom:var(--space-5)}.panel>ul{list-style:none;padding:0;margin:var(--space-5) 0 0}.panel>ul>li{padding:var(--space-5) 0;border-top:var(--border)}details{margin-top:var(--space-3)}summary{color:var(--muted);cursor:pointer;font-size:var(--text-sm)}details>pre,details>.markdown{margin-top:var(--space-3)}label.field{font-size:var(--text-sm);font-weight:500}label.field input,label.field select,label.field textarea{font-size:var(--text-body);font-weight:400}@media(max-width:800px){.public-page{padding:var(--space-8) var(--space-5)}}.new-skill-form{max-width:var(--form-max)}.markdown h4,.markdown h5,.markdown h6{font-size:var(--text-md);font-weight:600;margin-block:var(--space-5) var(--space-2)}.project-note{display:flex;align-items:flex-start;gap:var(--space-4);border:var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);background:var(--surface);margin-bottom:var(--space-6)}.project-note strong{font-size:var(--text-sm);font-weight:600}.project-note p{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-1)}.mode-chip{flex-shrink:0;color:var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.experience-note{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--space-6)}.export-link,.text-button{border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}.text-button{color:var(--muted);font-size:var(--text-xs);padding:0 0 var(--space-5)}.checkbox-field{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5);font-size:var(--text-sm)}.new-skill-form>.button{margin-bottom:var(--space-5)}.public-page>.project-note{margin-top:var(--space-6)}.public-actions{margin-bottom:var(--space-5)}.storage-warning{padding:var(--space-3) var(--space-5);background:var(--accent-soft);color:var(--ink);font-size:var(--text-sm);position:sticky;top:0;z-index:20}.storage-warning[hidden]{display:none}.main-content{overflow-wrap:anywhere;min-width:0}.embed-mode .main-content{padding:var(--space-6)}.embed-mode .page-header{margin-top:var(--space-8)}@media(max-width:800px){.project-note{flex-direction:column;gap:var(--space-2)}.embed-mode .main-content{padding:var(--space-4)}.sidebar-footer{display:flex;padding:0;margin:0;gap:var(--space-3)}.sidebar-footer p,.local-state,.sidebar-version,.text-button{display:none}.export-link{padding:var(--space-2);font-size:var(--text-xs)}.sidebar{flex-wrap:wrap}.sidebar-footer .error{max-width:100%}.project-note p{line-height:var(--line-body)}}