@font-face{font-family:Byte;src:url('assets/fonts/ByteSans-Regular.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:Byte;src:url('assets/fonts/ByteSans-Bold.woff2') format('woff2');font-display:swap;font-weight:700}@font-face{font-family:Lanting;src:url('assets/fonts/FZLTHProJW_R.woff2') format('woff2');font-display:swap;font-weight:400}@font-face{font-family:Lanting;src:url('assets/fonts/FZLTHProJW_DB.woff2') format('woff2');font-display:swap;font-weight:600 900}
:root{--bg:#080b10;--panel:#10151c;--text:#f6f7fa;--muted:#939aa6;--line:#292e36;--blue:var(--color-brand-primary);--cyan:var(--color-brand-secondary);--nav:var(--layout-nav-width)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--layout-scroll-offset)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-family-base);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased}body.light{--bg:var(--color-page);--panel:var(--color-surface-subtle);--text:var(--color-text-primary);--muted:var(--color-text-secondary);--line:var(--color-border-default)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:var(--focus-width) solid var(--cyan);outline-offset:var(--focus-offset)}button{color:inherit}img{display:block;max-width:100%}button{background:none;border:0}::selection{background:var(--blue);color:var(--color-text-inverse)}.skip{position:fixed;left:20px;top:-80px;z-index:1000;background:var(--blue);padding:var(--space-12)}.skip:focus{top:var(--space-12)}.sidebar{position:fixed;inset:var(--space-24) auto var(--space-24) var(--space-24);width:var(--nav);border:var(--border-width) solid var(--line);border-radius:var(--radius-nav-compact);display:flex;flex-direction:column;padding:var(--space-24) 0 var(--space-24);z-index:20;background:var(--bg)}.brand{padding:0 var(--nav-brand-padding-base);display:block}.brand img{width:158px;height:34px;object-fit:contain}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:2.8px;margin-top:13px}.nav{margin-top:var(--space-32)}.nav-link{display:flex;align-items:center;gap:var(--space-8);font-size:var(--font-size-13);padding:var(--nav-item-padding-y) var(--nav-padding-x);border-radius:var(--radius-control);transition:background var(--motion-fast)}.nav-link.active,.nav-link:hover{background:var(--panel);color:var(--text)}.nav-link.active{box-shadow:var(--shadow-nav-active)}.nav-icon{font:18px Byte;width:20px;color:var(--muted)}.nav-link .arrow{margin-left:auto;color:var(--muted)}.subnav{border-left:1px solid var(--line);margin:6px 0 20px 20px;display:grid;gap:10px;padding:6px 0 6px 20px;color:var(--muted);font-size:12px}.subnav a:hover{color:var(--text)}.sidebar-bottom{margin-top:auto}.sidebar-bottom p{font-size:10px;color:var(--muted);letter-spacing:1px;padding:0 18px}.theme{border-top:1px solid var(--line);padding:17px 18px 0;width:100%;display:flex;justify-content:space-between;font-size:12px}.switch{width:32px;height:18px;border-radius:20px;background:#353d49;position:relative}.switch:after{content:'';width:12px;height:12px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s}.light .switch:after{transform:translateX(14px)}main{margin-left:var(--layout-main-offset-compact)}.mobile-bar{display:none}.hero{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;padding:90px 5.5%}.hero-meta{position:absolute;top:37px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.8px;color:var(--muted)}.status-dot:before{content:'';display:inline-block;width:5px;height:5px;background:var(--cyan);border-radius:50%;margin-right:8px}.hero-symbol{position:absolute;width:63%;left:-8%;top:50%;transform:translateY(-50%);animation:enter 1.4s cubic-bezier(.2,.8,.2,1) both}.hero-symbol img{width:100%}.hero-copy{position:relative;margin-left:50%;width:50%;padding-left:16px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,4vw,68px);line-height:1.25;letter-spacing:-2px;font-weight:var(--font-weight-semibold);margin-bottom:34px}.hero h1{font-size:clamp(36px,3.7vw,62px);line-height:1.45;letter-spacing:0}.hero-copy .eyebrow{margin-bottom:22px}.hero-copy .text-link{margin-top:26px}.hero-footer{position:absolute;bottom:32px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:1px}.text-link{display:inline-flex;gap:30px;align-items:center;font-size:13px;border-bottom:1px solid var(--muted);padding-bottom:8px}.text-link span{transition:transform .25s;font-size:20px}.text-link:hover span{transform:translateX(5px)}.section{padding:100px 6%;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:48px}.section-heading h2{font-size:clamp(32px,4.5vw,64px);font-weight:600;line-height:1.15;letter-spacing:-1px;margin:14px 0 0}.section-heading>p{color:var(--muted);max-width:290px;font-size:13px;margin:0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}.card{display:block;min-width:0}.card-art{height:280px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;transition:filter .3s}.card:hover .card-art{filter:brightness(1.12)}.card-art img{transition:transform .5s;width:65%}.card:hover .card-art img{transform:scale(1.045)}.art-logo{background:#006aff}.art-type{background:#dce8ff;color:#006aff;flex-direction:column;gap:0}.art-type .aa{font:96px/1 Byte;font-weight:700;letter-spacing:-6px}.art-type .han{font-size:38px;letter-spacing:10px}.art-color{align-items:stretch}.art-color span{flex:1;display:flex;align-items:end;padding:18px 10px;font:10px Byte;color:white}.art-color span:nth-child(1){background:#006aff;flex:1.5}.art-color span:nth-child(2){background:#00dcff;color:#1c2633}.art-color span:nth-child(3){background:#1c2633}.art-grid{background:#151d28;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:25px 25px}.art-grid img{padding:28px;border:var(--border-width) dashed #8c9dbd;width:75%}.card-title{display:flex;align-items:center;justify-content:space-between;padding-top:23px}.card-title h3{font-size:24px;font-weight:400;margin:0}.card-title span{font-size:22px}.card p{font-size:13px;color:var(--muted);margin:8px 0 18px;max-width:90%}.resource-banner{background:#006aff;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:35px;color:white}.resource-banner h2{font-size:38px;line-height:1.2;margin:10px 0}.resource-banner .eyebrow{color:#c5deff}.button{padding:13px 22px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:24px;font-size:13px;transition:background .2s}.button:hover{background:var(--panel)}.button.primary{background:var(--blue);border-color:var(--blue);color:white}.button.white{background:white;color:#006aff;border-color:white}.footer{margin:0 6%;border-top:1px solid var(--line);padding:30px 0 36px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.page-header{padding:84px 6% 60px;border-bottom:1px solid var(--line)}.page-header h1{margin:20px 0 24px;font-size:clamp(48px,6vw,84px)}.page-header p{max-width:570px;color:var(--muted);font-size:15px}.page-header .tabs{margin-top:35px}.tabs{display:flex;flex-wrap:wrap;gap:8px}.tab{font-size:12px;padding:8px 17px;border:1px solid var(--line);color:var(--muted)}.tab:hover,.tab[aria-selected=true]{color:white;background:var(--blue);border-color:var(--blue)}.doc-section{padding:68px 6%;border-bottom:1px solid var(--line);scroll-margin-top:0}.doc-section h2{font-size:34px;font-weight:400;margin:12px 0 18px}.doc-section h3{font-size:20px;font-weight:400}.doc-section>p{max-width:650px;color:var(--muted);font-size:14px;margin-bottom:30px}.logo-stage{background:#f6f7fa;display:flex;align-items:center;justify-content:center;height:300px;padding:50px;transition:background var(--motion-fast)}.logo-stage img{max-width:520px;width:85%;max-height:120px}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0;font-size:12px;color:var(--muted)}.controls label{display:flex;align-items:center;gap:10px}.controls select{background:var(--panel);color:var(--text);border:var(--border-width) solid var(--line);padding:var(--space-8) var(--space-12)}.controls .download-logo{margin-left:auto}.swatches{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.swatch{min-width:0}.swatch-color{height:210px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.swatch-color strong{font-weight:400;font-size:22px}.swatch-color small{font-size:11px}.swatch button{width:100%;padding:17px 0;text-align:left;border-bottom:var(--border-width) solid var(--line);display:flex;justify-content:space-between;font-family:Byte}.swatch p{font-size:12px;color:var(--muted);margin-top:12px}.type-sample{background:var(--panel);padding:36px;overflow:hidden}.type-input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:0 0 18px;font-size:14px;border-radius:0}.specimen{font-family:Lanting,sans-serif;font-size:56px;line-height:1.4;padding:42px 0;overflow-wrap:anywhere}.type-alphabet{font-family:Byte;font-size:26px;overflow-wrap:anywhere;border-top:1px solid var(--line);padding-top:25px;color:var(--muted)}input[type=range]{accent-color:var(--blue);width:150px}.font-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.font-pair p{font-size:13px;color:var(--muted)}.space-stage{background:#f0f4fa;padding:70px 10%;display:flex;align-items:center;justify-content:center}.space-inner{padding:35px;border:1px dashed #006aff;position:relative;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#006aff12 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#006aff12 24px)}.space-inner:before{content:'安全区域 · 以原始规范为准';position:absolute;left:0;top:-28px;color:#006aff;font-size:11px}.space-inner img{width:100%;max-width:500px}.note{font-size:12px!important;color:var(--muted);margin-top:18px}.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.example-art{background:#f4f6fa;height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden}.example-art img{width:70%}.example p{font-size:12px;margin:12px 0}.example p span{color:#ff6977;margin-right:8px}.stretch img{transform:scaleY(.65)}.rotate img{transform:rotate(-16deg)}.recolor img{filter:hue-rotate(120deg)}.source-preview{width:100%;background:white;max-height:680px;overflow:auto;border:1px solid var(--line)}.source-preview img{width:100%}.download-list{display:grid;grid-template-columns:1fr 1fr;gap:24px}.download-card{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;min-width:0}.download-card .preview{height:180px;background:var(--panel);display:flex;align-items:center;justify-content:center;margin:-28px -28px 25px}.download-card .preview img{max-width:65%;max-height:80px}.download-card .preview.word{color:var(--blue);font-size:66px;font-family:Byte}.download-card h2{font-size:22px;margin-bottom:8px}.download-card p{font-size:13px;color:var(--muted);margin-bottom:22px}.download-card .button{margin-top:auto;justify-content:space-between}.download-card[hidden]{display:none}.doc-index{display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:35px}.doc-index a:hover{color:var(--text)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:var(--space-12) 25px;border-radius:var(--radius-control);font-size:var(--font-size-13);z-index:100;opacity:0;pointer-events:none;transition:var(--motion-fast)}#toast.show{opacity:1;transform:translate(-50%,0)}.full-source{padding:35px 6%}.light .auto-logo{content:url('assets/logo.svg')}.light .art-grid .auto-logo{content:url('assets/logo-white.svg')}@keyframes enter{from{opacity:0;transform:translate(-30px,-47%)}to{opacity:1;transform:translate(0,-50%)}}@media(min-width:1600px){.hero-copy{margin-left:53%;width:47%}.hero-symbol{width:59%;left:-3%}.section,.doc-section{padding-left:8%;padding-right:8%}}@media(max-width:1100px){.brand img{width:140px}.hero h1{font-size:38px}.hero-copy{margin-left:46%;width:54%}.hero-symbol{width:57%;left:-8%}.card-art{height:225px}.section-heading{align-items:start}.section-heading>p{max-width:210px}.swatch-color{padding:16px}.swatch-color strong{font-size:19px}}@media(max-width:760px){html{scroll-padding-top:var(--layout-scroll-offset-mobile)}.mobile-bar{display:flex;position:fixed;top:var(--space-12);left:var(--layout-mobile-gutter);right:var(--layout-mobile-gutter);height:var(--layout-mobile-bar-height);align-items:center;justify-content:space-between;padding:0 var(--nav-brand-padding-base);border:var(--border-width) solid var(--line);border-radius:var(--radius-default);background:var(--bg);z-index:40}.mobile-bar img{width:128px}.mobile-bar button{font-size:var(--font-size-22)}.sidebar{display:none;top:var(--nav-mobile-menu-top);left:var(--layout-mobile-gutter);right:var(--layout-mobile-gutter);bottom:auto;width:auto;max-height:calc(100svh - 100px);overflow:auto;padding:var(--nav-padding-x)}.sidebar.open{display:flex}.sidebar .brand{display:none}.nav{margin:0}.sidebar-bottom{margin-top:var(--nav-padding-x)}.subnav{display:none}main{margin-left:0}.hero{padding:130px 6% 75px;min-height:900px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:35px}.hero-meta{top:95px;left:6%;right:6%;font-size:9px}.hero-symbol{position:relative;width:78%;left:0;top:auto;transform:none;animation:none;margin:0 auto}.hero-copy{margin:0;padding:0;width:100%}.hero h1{font-size:38px;line-height:1.3;margin-bottom:20px}.hero-copy .eyebrow{margin-bottom:14px}.hero-copy .text-link{margin-top:0}.hero-footer{bottom:22px;font-size:8px}.section{padding:65px 6%}.section-heading{display:block;margin-bottom:30px}.section-heading>p{max-width:100%;margin-top:22px}.cards{gap:32px;grid-template-columns:1fr}.card-art{height:260px}.card-title h3{font-size:23px}.resource-banner{padding:30px;display:block}.resource-banner h2{font-size:30px;margin:15px 0 25px}.footer{gap:20px;font-size:10px}.page-header{padding-top:125px}.page-header h1{font-size:52px}.doc-section{padding:45px 6%;scroll-margin-top:75px}.doc-section h2{font-size:28px}.swatches{grid-template-columns:1fr}.swatch-color{height:150px}.logo-stage{height:220px;padding:30px}.controls .download-logo{margin-left:0}.examples{grid-template-columns:1fr}.font-pair,.download-list{grid-template-columns:1fr}.type-sample{padding:24px}.specimen{font-size:38px}.space-stage{padding:60px 5%}.space-inner{padding:25px}.page-header .tabs{gap:6px}.tab{padding:7px 12px}.source-preview{max-height:500px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.download-card .preview.word{font-size:clamp(28px,4vw,60px);overflow:hidden}
/* Match the reference site's expanded desktop sidebar geometry. */
@media(min-width:992px){
 :root{--nav:var(--layout-nav-width)}
 .sidebar{inset:var(--space-24) auto var(--space-24) var(--space-24);width:var(--nav);padding:var(--space-24) 0;border-radius:var(--radius-default)}
 .brand{padding:0 var(--nav-brand-padding-base)}
 .brand img{width:158px;height:28px}
 .brand small{display:none}
 .nav{margin-top:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12)}
 .nav-link{min-height:var(--size-control-small);padding:var(--space-4) var(--nav-padding-x);gap:var(--space-8);font-size:var(--font-size-14);line-height:var(--line-height-heading);border-radius:0}
 .nav-icon{width:var(--size-icon);height:var(--size-icon);display:grid;place-items:center;flex:none}
 .nav-link .arrow{width:var(--size-icon);text-align:center}
 .subnav{border:0;margin:0;padding:3px 20px 3px 52px;gap:0;font-size:14px;line-height:1.6}
 .subnav a{padding:3px 0}
 .sidebar-bottom p{display:none}
 .theme{border:0;padding:4px 20px;min-height:32px}
 main{margin-left:var(--layout-main-offset)}
}
/* Homepage first screen — Figma 1:3, 1440 × 900 reference. */
@font-face{font-family:Lanting;src:url('assets/fonts/FZLTHProJW_B.woff2') format('woff2');font-display:swap;font-weight:700}
.home-page main{margin-left:0}
.home-page main>.section,.home-page main>.footer{margin-left:338px}
.figma-hero{height:100svh;min-height:640px;padding:0;display:block;isolation:isolate;background:#c9cdd0}
.figma-hero-background{position:absolute;z-index:-1;top:0;left:-1.944444%;width:111.041667%;max-width:none;height:100%;object-fit:cover;object-position:left center}
.figma-hero-copy{position:absolute;left:364px;top:74px;margin:0;padding:0}
#main .figma-hero h1{font-family:Lanting,sans-serif;font-size:66px;font-weight:700;line-height:1.3;letter-spacing:0;color:#fdfdfd;margin:0 0 28px;white-space:nowrap}
.figma-explore{display:inline-block;font-family:Lanting,sans-serif;font-size:30px;line-height:1.4;letter-spacing:1.5px;color:#fdfdfd}
.figma-explore:hover{text-decoration:underline;text-underline-offset:8px}
body .sidebar{background:var(--color-nav-surface);backdrop-filter:blur(var(--blur-nav));-webkit-backdrop-filter:blur(var(--blur-nav));border-color:var(--color-border-subtle);color:var(--color-text-primary)}
body .brand img,body .mobile-bar img{content:url('assets/figma/logo-color.svg');width:var(--layout-brand-width);height:var(--layout-brand-height);object-fit:contain}
@media(min-width:992px){body .sidebar{padding-top:var(--nav-brand-padding)}body .brand{padding:0 var(--nav-brand-padding)}}
@media(min-width:761px) and (max-width:1200px){.figma-hero h1{font-size:clamp(34px,4.58vw,55px)}.figma-explore{font-size:25px}}
@media(min-width:761px) and (max-width:991px){.figma-hero-copy{left:264px}.home-page main>.section,.home-page main>.footer{margin-left:234px}}
@media(max-width:760px){
 .home-page main>.section{margin-left:0}.home-page main>.footer{margin-left:6%}
 .figma-hero{min-height:660px;height:100svh;padding:0}
 .figma-hero-copy{left:6%;right:6%;top:126px}
 .figma-hero h1{font-size:clamp(29px,7.6vw,44px);white-space:normal;line-height:1.35;margin-bottom:20px}
 .figma-explore{font-size:21px;letter-spacing:1px}
 .figma-hero-background{width:100%;left:0;object-position:66% center}
 body .mobile-bar{background:var(--color-nav-surface);border-color:var(--color-border-subtle);backdrop-filter:blur(var(--blur-nav))}
 body .sidebar{background:var(--color-nav-mobile-surface)}
}
/* Keep the blue mountain visible when the viewport is taller than the design. */
@media(min-width:761px){.figma-hero-background{object-position:right center}}
/* Content for the five brand chapters will be added individually. */
.empty-section{min-height:100svh;padding:74px 26px}
.empty-section h1{margin:0;font-size:66px;line-height:1.3;letter-spacing:0}
@media(max-width:760px){.empty-section{padding:126px 6% 50px}.empty-section h1{font-size:44px}}
/* Logo chapter: Webflow reference rhythm, replaceable local SVG slots.
   统一间距规范（其他章节按此延展）：
   · 分隔线节奏：内容→线、线→下一标题 各 120px（移动 64px）
   · 块内大间距：标题↔内容 64px，卡片栅格 24px
   · 首块不再重复 margin-bottom，避免与下一块 padding-top 叠加 */
.logo-layout{width:var(--layout-content-width);max-width:var(--layout-content-max);margin:0 auto;padding:var(--space-120) 0 var(--space-160)}
main:has(.logo-layout){container-type:inline-size}
.logo-intro{position:relative;margin-bottom:0;padding-bottom:var(--space-120)}
.logo-intro::after{content:"";position:absolute;bottom:0;left:calc(50% - var(--divider-extension,0px)/2);width:calc(100cqw + var(--divider-extension,0px));height:var(--border-width);background:var(--color-border-subtle);transform:translateX(-50%)}
.logo-intro h1{font-size:var(--font-size-page-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-heading);margin:0 0 var(--space-64)}
.logo-intro>p{width:var(--layout-intro-width);font-size:var(--font-size-intro);line-height:var(--line-height-copy);color:var(--muted);margin:0}
.logo-block{display:flex;flex-direction:column;gap:var(--space-96);margin-bottom:var(--space-120);padding-top:var(--space-120);position:relative;scroll-margin-top:var(--layout-scroll-offset)}
.logo-block:not(:first-of-type)::before{content:"";position:absolute;top:0;left:calc(50% - var(--divider-extension,0px)/2);width:calc(100cqw + var(--divider-extension,0px));height:var(--border-width);background:var(--color-border-subtle);transform:translateX(-50%)}
.logo-block:last-child{margin-bottom:0}
.logo-block-heading{display:block}
.logo-block-heading h2{font-family:var(--font-family-chinese);font-size:var(--font-size-section-title);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-16)}
.logo-block-heading p{font-size:var(--font-size-body);line-height:var(--line-height-copy);color:var(--muted);margin:0;max-width:var(--layout-copy-max)}
.logo-resource-link{justify-self:start;align-self:start;display:flex;align-items:center;gap:var(--space-12);font-size:var(--font-size-13);padding:var(--space-8) 0;border-bottom:var(--border-width) solid var(--line)}
.logo-resource-link:hover{color:var(--blue)}
.logo-placeholder{margin:0;border:var(--border-width) solid var(--line);border-radius:var(--radius-default);overflow:hidden;background:var(--color-surface-subtle)}
.logo-placeholder img{width:100%;height:auto;display:block}
.logo-example-grid{display:grid;grid-template-columns:var(--layout-grid-columns);gap:var(--space-24)}
.logo-donts-grid{row-gap:var(--space-32)}
.logo-dont-item>p{font-size:var(--font-size-14);margin:var(--space-16) 0 0;line-height:var(--line-height-copy)}
.logo-dont-item>p span{color:var(--muted)}
.logo-dont-item>p{display:flex;align-items:flex-start;gap:var(--space-8)}
.logo-dont-item>p>.dont-caption{color:var(--color-text-primary)}
.dont-icon{width:var(--size-icon);height:var(--size-icon);flex:none}
.dont-icon circle{fill:var(--color-status-error)}
.dont-icon path{fill:none;stroke:var(--color-text-inverse);stroke-width:var(--border-width-icon);stroke-linecap:round}
@media(max-width:1100px){.logo-layout{padding-top:var(--space-96)}.logo-intro h1{font-size:var(--font-size-page-title)}.logo-block-heading{gap:var(--space-32)}.logo-block{gap:var(--space-64)}.logo-intro>p{width:var(--layout-intro-width-medium);font-size:var(--font-size-intro)}}
@media(max-width:760px){.logo-layout{width:var(--layout-content-width-mobile);padding:var(--layout-page-top-mobile) 0 var(--layout-page-bottom-mobile)}.logo-intro{margin-bottom:0}.logo-intro h1{font-size:var(--font-size-page-title);margin-bottom:var(--space-32)}.logo-intro>p{width:100%;font-size:var(--font-size-intro)}.logo-block{gap:var(--space-32);margin-bottom:var(--space-64);padding-top:var(--space-64)}.logo-block-heading,.logo-example-grid{grid-template-columns:1fr;gap:var(--space-24)}.logo-block-heading h2{font-size:var(--font-size-section-title)}.logo-block-heading p{font-size:var(--font-size-body)}}
@media(max-width:991px){.logo-intro{margin-bottom:0;padding-bottom:var(--space-120)}}
@media(max-width:767px){.logo-intro{margin-bottom:0;padding-bottom:var(--space-intro-bottom-narrow)}}
/* Shared collapsible navigation; the site currently supports light mode only. */
.nav-short{display:none}
.sidebar-toggle{width:var(--size-control-small);height:var(--size-control-small);padding:var(--nav-item-padding-y);display:grid;place-items:center;margin-left:var(--nav-toggle-offset);border-radius:var(--radius-control)}
.sidebar-toggle:hover{background:var(--color-border-subtle)}
.panel-icon{display:block;width:var(--size-panel-icon-width);height:var(--size-panel-icon-height);border:var(--border-width-icon) solid var(--color-text-primary);border-radius:var(--radius-icon);position:relative}
.panel-icon:before{content:'';position:absolute;left:5px;top:0;bottom:0;border-left:var(--border-width-icon) solid var(--color-text-primary)}
@media(min-width:761px){
 .sidebar{transition:width var(--motion-layout) var(--motion-easing);overflow:hidden}
 main{transition:margin-left var(--motion-layout) var(--motion-easing)}
 .figma-hero-copy{transition:left .3s ease}
 body.sidebar-collapsed{--nav:var(--layout-nav-collapsed)}
 body.sidebar-collapsed .sidebar{width:var(--layout-nav-collapsed)}
 body.sidebar-collapsed .brand{padding:0 var(--nav-brand-padding-collapsed)}
 body.sidebar-collapsed .brand img{content:url('assets/symbol.svg');width:var(--layout-symbol-width);height:var(--layout-brand-height)}
 body.sidebar-collapsed .nav-link{padding:var(--space-4) var(--nav-padding-x);justify-content:center;height:var(--size-control-small)}
 body.sidebar-collapsed .nav-short{display:grid;place-items:center;flex:none;width:var(--size-icon);height:var(--size-icon);font:var(--font-size-15) var(--font-family-latin)}
 body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-link .arrow{display:none}
 body.sidebar-collapsed main{margin-left:var(--layout-main-offset-collapsed)}
 body.sidebar-collapsed.home-page main{margin-left:0}
 body.sidebar-collapsed .figma-hero-copy{left:139px}
 body.sidebar-collapsed.home-page main>.section,body.sidebar-collapsed.home-page main>.footer{margin-left:var(--layout-main-offset-collapsed)}
}
@media(max-width:760px){.sidebar-toggle{display:none}.sidebar-bottom{display:none}}

@font-face{font-family:Byte;src:url('assets/fonts/ByteSans-Medium.woff2') format('woff2');font-display:swap;font-weight:500}

/* Extend the chapter divider across the gap to the navigation edge. */
@media(min-width:761px){main:has(.logo-layout){--divider-extension:var(--layout-divider-extension-compact)}body.sidebar-collapsed main:has(.logo-layout){--divider-extension:var(--layout-divider-extension)}}
@media(min-width:992px){main:has(.logo-layout){--divider-extension:var(--layout-divider-extension)}}

.logo-intro>.logo-placeholder{margin-top:var(--space-96)}
@media(max-width:1100px){.logo-intro>.logo-placeholder{margin-top:var(--space-64)}}
@media(max-width:760px){.logo-intro>.logo-placeholder{margin-top:var(--space-32)}}

 .intro-logo-switcher{margin-top:var(--space-96)}
.intro-logo-stage{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--layout-preview-ratio);overflow:hidden;background:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default)}
.intro-logo-stage>img{display:block;width:100%;max-width:none;height:auto}
.intro-logo-tabs{display:flex;gap:var(--space-24);margin-top:var(--space-24)}
.intro-logo-tabs button{padding:0;color:var(--muted);font-size:var(--font-size-14);font-weight:var(--font-weight-medium)}
.intro-logo-tabs button[aria-selected="true"]{color:var(--text)}
@media(max-width:1100px){.intro-logo-switcher{margin-top:var(--space-64)}}
@media(max-width:760px){.intro-logo-switcher{margin-top:var(--space-32)}.intro-logo-stage{min-height:0}.intro-logo-tabs{margin-top:var(--space-16)}}

.logo-variant h3{font-family:var(--font-family-chinese);font-size:var(--font-size-group-title);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-24)}
.variant-stage{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--layout-preview-ratio);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default);background:var(--color-surface);overflow:hidden}
.variant-stage>img{width:var(--layout-logo-width);max-width:var(--layout-logo-max);height:auto}
.variant-stage[data-color="light-text"]{background:var(--color-text-primary)}
.variant-stage[data-color="reverse"]{background:var(--color-brand-primary)}
.variant-tabs{display:flex;flex-wrap:wrap;gap:var(--space-16) var(--space-24);margin-top:var(--space-24)}
.variant-tabs button{padding:0;color:var(--muted);font-size:var(--font-size-14);font-weight:var(--font-weight-medium)}
.variant-tabs button[aria-selected="true"]{color:var(--text)}
.variant-download{position:absolute;right:var(--space-16);bottom:var(--space-16);display:grid;place-items:center;width:var(--size-control);height:var(--size-control);border-radius:var(--radius-default);background:var(--color-brand-primary);color:var(--color-surface);box-shadow:var(--shadow-download)}
.variant-download:hover{background:var(--color-action-hover)}
.variant-stage[data-color="reverse"] .variant-download{background:var(--color-surface);color:var(--color-brand-primary)}
@media(max-width:760px){.logo-variant h3{font-size:var(--font-size-group-title);margin-bottom:var(--space-16)}.variant-tabs{gap:var(--space-12) var(--space-16);margin-top:var(--space-16)}.variant-tabs button{font-size:var(--font-size-12)}.variant-download{width:var(--size-control-small);height:var(--size-control-small);right:var(--space-12);bottom:var(--space-12)}}

/* Download icon geometry uses the existing shared icon tokens. */
.variant-download>svg{width:var(--size-icon);height:var(--size-icon)}
.variant-download>svg path{stroke-width:var(--border-width-icon)}



/* Typography uses the same chapter shell, dividers and responsive tokens as Logo. */
.typography-layout{overflow-wrap:anywhere}
.typography-stage-placeholder,.color-stage-placeholder{aspect-ratio:var(--layout-media-ratio);width:calc(100cqw + var(--divider-extension,0px));margin-left:calc(50% - 50cqw - var(--divider-extension,0px));border-radius:0;border-left:0;border-right:0}
.type-showcase{margin-top:var(--space-content);display:grid;gap:var(--space-32)}
.type-showcase-row{padding:var(--space-32);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default);background:var(--color-surface-subtle)}
.type-showcase-row>span,.type-family>span,.type-editor>label{display:block;font-size:var(--font-size-caption);color:var(--color-text-secondary);margin-bottom:var(--space-16)}
.type-showcase-row>p{font-size:var(--font-size-page-title);line-height:var(--line-height-heading);margin:0}
.type-latin{font-family:var(--font-family-latin)}
.type-chinese{font-family:var(--font-family-chinese)}
.type-bold{font-weight:var(--font-weight-bold)}
.type-family-grid{display:grid;grid-template-columns:var(--layout-grid-columns);gap:var(--space-grid)}
.type-family{min-width:0;padding:var(--space-32);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default);background:var(--color-surface)}
.type-family h3{font-size:var(--font-size-group-title);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-32)}
.type-family-mark{font-size:var(--font-size-page-title);line-height:var(--line-height-heading);margin:0 0 var(--space-32)}
.type-alphabet-sample{font-size:var(--font-size-body);line-height:var(--line-height-copy);margin:0 0 var(--space-32)}
.type-family>span{margin:0}
.type-editor{padding:var(--space-32);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default)}
.type-editor [contenteditable]{white-space:pre-wrap;min-width:0}
.type-editor [contenteditable]:focus-visible{outline:var(--focus-width) solid var(--color-brand-secondary);outline-offset:var(--focus-offset)}
.type-reset,.type-download{display:inline-flex;padding:var(--space-8) 0;border-bottom:var(--border-width) solid var(--color-border-default);font-size:var(--font-size-caption);color:var(--color-text-secondary);transition:color var(--motion-fast)}
.type-reset:hover,.type-download:hover{color:var(--color-brand-primary)}
.type-download{margin-top:var(--space-24)}
.type-demo{margin:0 0 var(--space-32);font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:var(--line-height-copy)}
.type-demo-page{font-size:var(--font-size-page-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-heading)}
.type-demo-section{font-family:var(--font-family-chinese);font-size:var(--font-size-section-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading)}
.type-demo-group{font-family:var(--font-family-chinese);font-size:var(--font-size-group-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-base)}
.type-demo-intro{font-size:var(--font-size-intro);color:var(--color-text-secondary)}
.type-demo-body{font-size:var(--font-size-body)}
.type-demo-caption{font-size:var(--font-size-caption);color:var(--color-text-secondary)}
.type-spec{display:flex;align-items:start;gap:var(--space-32);padding-top:var(--space-24);border-top:var(--border-width) solid var(--color-border-subtle);font-size:var(--font-size-caption)}
.type-tag{padding:var(--space-4) var(--space-12);border:var(--border-width) solid var(--color-border-default);border-radius:var(--radius-control);flex-shrink:0}
.type-spec dl{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16);margin:0}
.type-spec dt{color:var(--color-text-secondary);margin-bottom:var(--space-8)}
.type-spec dd{margin:0}
@media(max-width:760px){
 .type-showcase-row,.type-family,.type-editor{padding:var(--space-24)}
 .type-showcase-row>p{font-size:var(--font-size-28)}
 .type-family-grid{grid-template-columns:1fr}
 .type-spec{flex-direction:column;gap:var(--space-24)}
 .type-spec dl{width:100%;grid-template-columns:var(--layout-grid-columns)}
}

/* Figma frame 49:29 — original 1920 × 1080 composition, scaled as one board. */
@font-face{font-family:TypographyBoardCN;src:url('assets/fonts/FZLTHProJW_M.woff2') format('woff2');font-weight:500;font-display:swap}
.typography-artboard{
 --art-black:#000;--art-yellow:#ffcc6b;--art-purple:#786aff;
 --art-title-size:8.333333cqw;--art-sample-size:5cqw;--art-caption-size:1.041667cqw;
 --art-control-height:6.944444%;--art-slider-radius:.885417cqw;--art-label-radius:.416667cqw;
 container-type:inline-size;background:var(--art-black);color:var(--color-text-inverse);border:0;
 font-family:var(--font-family-latin);font-synthesis:none;
}
.typography-artboard>span,.typography-artboard>.type-art-line{position:absolute;display:block}
.type-art-line{background:var(--color-text-inverse);opacity:.66}
.type-art-line-h{left:0;width:100%;height:.052083cqw}
.type-art-line-v{top:0;height:100%;width:.052083cqw}
.type-art-purple{left:0;top:0;width:11.822917%;height:32.777778%;background:var(--art-purple)}
.type-art-yellow{left:76.875%;top:0;width:23.125%;height:32.777778%;background:var(--art-yellow)}
.type-art-blue{left:54.166667%;top:71.111111%;width:22.65625%;height:28.888889%;background:var(--color-brand-primary)}
.type-art-white{left:93.229167%;top:58.981481%;width:6.770833%;height:12.037037%;background:var(--color-surface)}
.type-art-title{left:11.614583%;top:41.111111%;font-size:var(--art-title-size);font-weight:var(--font-weight-bold);line-height:1.2;white-space:nowrap;letter-spacing:0}
.type-art-chinese{left:55.208333%;top:74.444444%;font-family:TypographyBoardCN,sans-serif;font-size:var(--art-sample-size);font-weight:var(--font-weight-medium);line-height:1.25;white-space:nowrap}
.type-art-symbols{left:77.65625%;top:.37037%;font-size:var(--art-sample-size);font-weight:var(--font-weight-medium);line-height:1.2;color:var(--art-black);white-space:nowrap}
.type-art-slider{left:45.833333%;top:18.333333%;width:24.0625%;height:var(--art-control-height);background:var(--color-surface);border-radius:var(--art-slider-radius)}
.type-art-slider>span{position:absolute;left:8.658009%;top:48%;width:82.900433%;height:8%;background:var(--color-brand-primary);border-radius:var(--art-label-radius)}
.type-art-slider>img{position:absolute;left:43.722944%;top:30.666667%;width:6.277056%;height:38.666667%}
.type-art-designer{left:6.875%;top:62.037037%;width:8.489583%;height:3.981481%;border-radius:var(--art-label-radius);background:var(--color-brand-secondary);color:var(--art-black);font-size:var(--art-caption-size);font-weight:var(--font-weight-medium);line-height:2.15;text-align:center;white-space:nowrap}
.typography-artboard>.type-art-pointer{position:absolute;left:15.21%;top:60.44%;width:1.129115%;height:2.092778%;transform:rotate(49.95deg)}

/* Page-level Figma text 55:55 overlays the frame; x/y relative to frame 49:29. */
.type-art-byte{left:9.635417%;top:3.518519%;width:14.0625%;height:13.333333%;font-size:6.25cqw;font-weight:var(--font-weight-medium);line-height:1.2;white-space:nowrap;transform-origin:0 0;transform:rotate(90deg)}

/* Scope the actual static masters to the adjustable display text. */
@font-face{font-family:TypographyBoardLatin;src:url('assets/fonts/ByteSans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:TypographyBoardLatin;src:url('assets/fonts/ByteSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:TypographyBoardLatin;src:url('assets/fonts/ByteSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:TypographyBoardLatin;src:url('assets/fonts/ByteSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
.type-art-title,.type-art-byte,.type-art-symbols,.type-art-designer{font-family:TypographyBoardLatin,sans-serif}
.type-art-title,.type-art-byte,.type-art-symbols,.type-art-designer,.type-art-chinese{font-weight:var(--art-display-weight,var(--font-weight-medium))}
.type-art-slider input{--art-track-height:.3125cqw;--art-thumb-size:1.510417cqw;appearance:none;-webkit-appearance:none;position:absolute;left:8.658009%;top:0;width:82.900433%;height:100%;padding:0;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.type-art-slider input::-webkit-slider-runnable-track{height:var(--art-track-height);background:var(--color-brand-primary);border-radius:var(--art-label-radius)}
.type-art-slider input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--art-thumb-size);height:var(--art-thumb-size);margin-top:calc((var(--art-track-height) - var(--art-thumb-size))/2);border:0;border-radius:50%;background:var(--color-brand-primary)}
.type-art-slider input::-moz-range-track{height:var(--art-track-height);background:var(--color-brand-primary);border-radius:var(--art-label-radius)}
.type-art-slider input::-moz-range-thumb{width:var(--art-thumb-size);height:var(--art-thumb-size);border:0;border-radius:50%;background:var(--color-brand-primary)}
.type-art-slider:focus-within{outline:var(--focus-width) solid var(--color-brand-secondary);outline-offset:var(--focus-offset)}
.type-art-slider input:focus-visible{outline:none}

@font-face{font-family:TypographyBoardCN;src:url('assets/fonts/FZLTHProJW_L.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:TypographyBoardCN;src:url('assets/fonts/FZLTHProJW_R.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:TypographyBoardCN;src:url('assets/fonts/FZLTHProJW_B.woff2') format('woff2');font-weight:700;font-display:swap}

/* Weight control label; keep the label fixed while the specimen changes. */
.type-art-slider>.type-art-slider-label{left:7.5%;top:0;width:10%;height:100%;display:flex;align-items:center;justify-content:center;background:none;border-radius:0;color:var(--art-black);font-family:TypographyBoardLatin,sans-serif;font-size:calc(var(--art-caption-size)*2);font-weight:var(--font-weight-medium);line-height:1}
.type-art-slider input{left:23%;width:66%}

/* Random weight action occupies the former white block's row. */
.type-art-randomize{position:absolute;left:88.4375%;transform:translateX(-50%);top:calc(58.981481% + (12.037037% - var(--art-control-height))/2);height:var(--art-control-height);display:flex;align-items:center;justify-content:center;gap:var(--space-8);padding:0 1.8cqw;border:0;border-radius:var(--art-slider-radius);background:var(--color-surface);color:var(--color-brand-primary);font-family:TypographyBoardLatin,sans-serif;font-size:calc(var(--art-caption-size)*1.5);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;transition:color var(--motion-fast),background var(--motion-fast)}
.type-art-randomize:hover{background:var(--color-surface-subtle);color:var(--color-action-hover)}
.type-art-randomize:focus-visible{outline:var(--focus-width) solid var(--color-brand-secondary);outline-offset:calc(-1 * var(--focus-offset))}
.type-art-random-icon{display:block;width:1.8em;height:1.8em;flex-shrink:0}

/* Shared heading color across all pages. */
#main :is(h1,h2,h3,h4,h5,h6){color:var(--color-text-heading)}

.type-brand-column{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:var(--space-48)}
.type-brand-columns{grid-template-columns:1fr;align-items:stretch;gap:var(--space-section)}
@media(max-width:760px){.type-brand-columns{gap:var(--space-64)}.type-brand-column{gap:var(--space-32)}}

/* Resources chapter: downloadable brand asset cards, same chapter shell as Logo. */
.resources-layout .asset-subgroup:not(:last-child){margin-bottom:var(--space-64)}
.asset-subgroup-title{font-family:var(--font-family-chinese);font-size:var(--font-size-group-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);margin:0}
.asset-grid{display:grid;grid-template-columns:var(--layout-grid-columns);gap:var(--space-grid);min-width:0}
.asset-card{display:flex;flex-direction:column;min-width:0;border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-default);background:var(--color-surface);overflow:hidden}
.asset-preview{display:flex;align-items:center;justify-content:center;aspect-ratio:var(--layout-preview-ratio);padding:var(--space-32);background:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle)}
.asset-preview img{width:66%;height:auto}
.asset-preview-dark{background:var(--color-text-primary)}
.asset-preview-brand{background:var(--color-brand-primary)}
.asset-preview-file{position:relative;padding:0;background:var(--color-surface)}
.asset-preview-file img{position:absolute;inset:var(--space-24);width:calc(100% - 2 * var(--space-24));height:calc(100% - 2 * var(--space-24));object-fit:contain}
.asset-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);padding:var(--space-24)}
.asset-name{font-family:var(--font-family-chinese);font-size:var(--font-size-group-title);font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);margin:0}
.asset-desc{font-size:var(--font-size-caption);line-height:var(--line-height-copy);color:var(--color-text-secondary);margin:0}
.asset-download{display:inline-flex;align-items:center;gap:var(--space-8);margin-top:var(--space-16);padding-bottom:var(--space-4);border-bottom:var(--border-width) solid var(--color-border-default);font-size:var(--font-size-caption);color:var(--color-text-secondary);transition:color var(--motion-fast),border-color var(--motion-fast)}
.asset-download:hover{color:var(--color-brand-primary);border-color:var(--color-brand-primary)}
.asset-download svg{width:var(--size-icon);height:var(--size-icon)}
.asset-download svg path{stroke-width:var(--border-width-icon)}
.asset-card-wide{flex-direction:row}
.asset-card-wide .asset-preview{flex:0 0 40%;aspect-ratio:auto;min-height:240px;padding:var(--space-48);border-bottom:0;border-right:var(--border-width) solid var(--color-border-subtle)}
.asset-card-wide .asset-body{justify-content:center;padding:var(--space-32)}
.font-preview{display:flex;align-items:center;gap:var(--space-24)}
.font-preview-latin{font-family:var(--font-family-latin);font-size:84px;line-height:1;font-weight:var(--font-weight-bold);color:var(--color-brand-primary)}
.font-preview-zh{font-family:var(--font-family-chinese);font-size:64px;line-height:1;color:var(--color-text-primary)}
@media(max-width:1100px){.asset-preview{padding:var(--space-24)}.font-preview-latin{font-size:64px}.font-preview-zh{font-size:48px}}
@media(max-width:760px){.asset-grid{grid-template-columns:1fr}.asset-card-wide{flex-direction:column}.asset-card-wide .asset-preview{flex-basis:auto;min-height:0;aspect-ratio:var(--layout-preview-ratio);border-right:0;border-bottom:var(--border-width) solid var(--color-border-subtle)}.font-preview-latin{font-size:56px}.font-preview-zh{font-size:42px}}