/* Studio identity is independent from user-editable project tokens. */
:root{--studio-primary:#0c59ff;--studio-hover:#0047db;--studio-light:#eaf1ff;--studio-subtle:#f4f7ff;--studio-ink:#171b26;--studio-secondary:#667085;--studio-border:#e4e7ec;--green:var(--studio-primary);--mint:var(--studio-light);--ink:var(--studio-ink);--muted:var(--studio-secondary);--line:var(--studio-border);--bg:#fff}
html{scroll-behavior:smooth}body{background:white}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0c59ff;outline-offset:4px}button:hover{background:#f4f7ff;border-color:#bacdf6}.primary:hover{background:var(--studio-hover)}.skip-link{position:fixed;left:16px;top:-80px;padding:16px;background:#171b26;color:white;z-index:100}.skip-link:focus{top:10px}#siteHeader{position:sticky;top:0;z-index:20;background:#fffffff5;backdrop-filter:blur(14px);border-bottom:1px solid var(--studio-border)}.site-header{height:90px;max-width:1600px;margin:auto;padding:0 44px;border:0;gap:32px;background:transparent}.site-logo{display:flex;align-items:center;gap:13px;flex-shrink:0}.site-logo>b{font-size:40px;font-weight:850;letter-spacing:-4px;line-height:1;color:var(--studio-primary)}.site-logo>b>span{font-size:28px;vertical-align:top;letter-spacing:-1px;margin-left:4px}.site-logo>span{font-size:12px;line-height:1.25;font-weight:650;letter-spacing:-.2px}.site-nav{display:flex;align-items:center;gap:24px;margin:0}.site-nav>a{font-size:14px;font-weight:600;position:relative;padding:35px 0}.site-nav>a[aria-current]{color:var(--studio-primary)}.site-nav>a[aria-current]:after{content:'';position:absolute;bottom:22px;left:0;right:0;height:2px;background:var(--studio-primary)}.site-nav a:hover{color:var(--studio-primary)}.site-tools{display:flex;align-items:center;gap:12px;margin-left:auto}.site-tools button{border:0;background:transparent;border-radius:4px}.header-search{padding:10px!important;display:flex}.project-switch{font-size:13px;white-space:nowrap;padding:12px 4px!important}.project-switch span{margin-left:8px}.edit-entry{display:flex;align-items:center;gap:8px;border:1px solid #d4d9e2;padding:13px 14px;border-radius:4px;font-size:13px;white-space:nowrap}.edit-entry:hover{border-color:var(--studio-primary);color:var(--studio-primary)}.menu-toggle{display:none}.home-view>aside,.home-view>.app>header,.home-view>.app>footer{display:none}.home-view .app{margin:0}.home-view main{padding:28px 44px 0;max-width:1600px;min-height:0}.home-page{max-width:1400px;margin:auto}.home-page h1,.home-page h2,.home-page h3,.home-page p{margin:0}.home-page small{font-size:13px}.home-page h2{font-size:clamp(32px,3.5vw,48px);line-height:1.27;letter-spacing:-1.8px;font-weight:720}.home-page h3{font-size:23px;line-height:1.4;letter-spacing:-.6px}.home-page p{font-size:18px;line-height:1.75;color:var(--studio-secondary);word-break:keep-all}.h-hero{position:relative;background:var(--studio-primary);color:white;min-height:660px;padding:30px 48px 24px;border-radius:5px;overflow:hidden}.hero-topline,.hero-bottomline{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.3px;font-weight:550}.hero-topline{padding-bottom:24px;border-bottom:1px solid #ffffff35}.hero-topline span:last-child{letter-spacing:.2px}.hero-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:530px;gap:24px}.hero-copy{position:relative;z-index:2;padding:40px 0}.hero-overline{font-size:11px;letter-spacing:1.5px;color:#d5e3ff;display:block;margin-bottom:22px}.hero-copy h1{font-size:clamp(45px,4.4vw,66px);line-height:1.055;letter-spacing:-2.9px;font-weight:650}.hero-dot{color:#b6ccff}.hero-copy p{font-size:18px;line-height:1.65;color:#e2ebff;margin-top:24px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px;flex-wrap:wrap}.h-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:52px;padding:14px 20px;border-radius:3px;font-size:15px;font-weight:650;border:1px solid transparent}.h-button.white{background:white;color:var(--studio-primary)}.h-button.white:hover{background:#eaf1ff}.h-button.blue{background:var(--studio-primary);color:white}.h-button.blue:hover{background:var(--studio-hover)}.hero-text-link{font-size:14px;font-weight:550}.hero-text-link span{margin-left:8px}.hero-bottomline{padding-top:20px;border-top:1px solid #ffffff35;font-size:9px;letter-spacing:1px}.hero-bottomline a{font-size:12px;letter-spacing:0}.hero-art{width:100%;height:470px;position:relative;isolation:isolate}.art-orbit{position:absolute;width:420px;height:420px;border:1px solid #ffffff35;border-radius:50%;top:20px;left:20px}.art-orbit:after{content:'';position:absolute;inset:30px;border:1px solid #ffffff20;border-radius:50%}.art-type{position:absolute;left:4%;top:42px;width:275px;height:222px;background:#dbe7ff;color:#143b96;transform:rotate(-8deg);padding:23px;border:1px solid #fff5;z-index:2}.art-type>span{font-size:9px;letter-spacing:1.5px}.art-type strong{font-size:100px;letter-spacing:-8px;line-height:1.45;display:block;font-weight:550}.art-type strong span{font-size:62px;letter-spacing:-5px;margin-left:8px}.art-type>div{font-size:11px;border-top:1px solid #143b9633;padding-top:10px}.art-type i{float:right;font-style:normal;font-size:9px}.art-color{position:absolute;top:8px;right:0;width:168px;height:170px;background:#092e93;padding:19px;transform:rotate(8deg);z-index:1}.art-color>span{font-size:8px;letter-spacing:1px;color:#b6ccff}.art-color>b{display:block;font-size:23px;margin-top:20px;font-weight:550;letter-spacing:-1px}.art-color>div{display:flex;margin:24px -19px 0;height:47px}.art-color i{flex:1;background:#fff}.art-color i:nth-child(2){background:#c4d6ff}.art-color i:nth-child(3){background:#8cafff}.art-color i:nth-child(4){background:#4a84ff}.art-color i:nth-child(5){background:#2670ff}.art-controls{position:absolute;right:0;bottom:30px;z-index:3;background:#fff;color:#171b26;width:260px;padding:25px;transform:rotate(5deg);border-radius:5px;box-shadow:0 10px 0 #003bba}.art-controls>div:first-child{display:flex;justify-content:space-between;align-items:center}.art-tag{font-size:10px;color:#667085}.art-toggle{width:36px;height:21px;border-radius:20px;background:var(--studio-primary);position:relative}.art-toggle:after{content:'';width:15px;height:15px;background:white;border-radius:50%;position:absolute;right:3px;top:3px}.art-controls>b{font-size:27px;line-height:1.2;letter-spacing:-.8px;display:block;margin:25px 0 20px}.art-line{height:5px;width:70%;background:#eaf1ff;margin-bottom:24px}.art-button{background:var(--studio-primary);color:white;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:3px;font-size:12px}.art-button svg{width:18px}.art-grid{position:absolute;left:5%;bottom:28px;width:140px;height:130px;background-color:#b9d0ff;background-image:linear-gradient(#ffffff60 1px,transparent 1px),linear-gradient(90deg,#ffffff60 1px,transparent 1px);background-size:20px 20px;color:#063cbd;display:flex;align-items:center;justify-content:center;gap:10px;transform:rotate(-5deg)}.art-grid>span{font-size:80px;font-weight:550;letter-spacing:-6px}.art-grid>i{font-style:normal;font-size:13px;font-weight:600}.art-star{position:absolute;right:38px;top:163px;font-size:90px;line-height:1;color:#a3c0ff;z-index:4;transform:rotate(10deg)}.art-cursor{position:absolute;left:40%;bottom:4px;z-index:5;transform:rotate(-8deg)}.art-cursor svg{width:38px;height:48px;display:block}.art-cursor>span{display:block;margin-left:30px;background:#171b26;color:white;padding:7px 10px;font-size:9px;white-space:nowrap}.h-section{padding:100px 0;border-bottom:1px solid var(--studio-border)}.h-kicker{display:flex;align-items:center;gap:15px;font-size:11px;letter-spacing:1.7px;font-weight:650;color:var(--studio-primary);margin-bottom:25px}.h-kicker>span{font-weight:450;color:#98a2b3;letter-spacing:0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:42px}.section-heading>p{padding-bottom:5px}.section-heading>div>p{margin-top:20px}.section-link{font-size:15px;font-weight:600;white-space:nowrap;padding-bottom:7px;border-bottom:1px solid #171b26}.section-link>span{margin-left:24px}.brand-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}.brand-poster{background:#edf3ff;padding:32px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.brand-poster>div:first-child{font-size:10px;letter-spacing:1.5px;color:#31579b}.brand-poster>strong{font-size:156px;line-height:1;letter-spacing:-16px;font-weight:800;color:var(--studio-primary);align-self:center}.brand-poster>strong>span{font-size:115px;vertical-align:top;letter-spacing:-10px}.brand-poster>div:last-child{border-top:1px solid #c8d8f4;padding-top:18px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}.brand-poster b{font-size:11px;color:#24427b;font-weight:550}.brand-poster div>span{font-size:10px;color:#5575aa}.brand-principles{display:flex;flex-direction:column;justify-content:space-between}.brand-principles article{padding:0 0 25px;border-bottom:1px solid var(--studio-border);margin-bottom:25px}.brand-principles article:last-child{margin-bottom:0;padding-bottom:0;border:0}.brand-principles article>span{font-size:10px;letter-spacing:1px;color:#667085}.brand-principles h3{font-size:23px;margin:10px 0}.brand-principles p{font-size:16px;line-height:1.7;max-width:490px}.foundation-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:35px 24px}.foundation-card{grid-column:span 3;min-width:0}.foundation-card.featured{grid-column:span 4}.foundation-visual{height:180px;background:#f1f4fa;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:background .2s}.featured .foundation-visual{height:240px}.foundation-card:hover .foundation-visual{background:#e4edff}.visual-index{position:absolute;top:15px;left:18px;font:10px ui-monospace,monospace;color:#657795}.category-title{display:flex;justify-content:space-between;align-items:center;margin:20px 0 6px}.category-title>span{font-size:24px;transition:transform .2s}.foundation-card:hover .category-title>span,.component-card:hover .category-title>span{transform:translate(3px,-3px)}.foundation-card p{font-size:16px;line-height:1.5}.foundation-card small{margin-top:7px;color:#8a94a6;font-size:11px}.f-colors{display:flex;width:75%;height:120px;transform:rotate(-10deg);border:6px solid white}.f-colors>i{flex:1}.f-type{color:#0c59ff;position:relative;display:flex;align-items:baseline;gap:15px}.f-type>b{font-size:100px;letter-spacing:-7px;font-weight:550;line-height:1}.f-type>span{font-size:44px;letter-spacing:-3px}.f-type>small{position:absolute;bottom:-25px;left:8px;font-size:11px;color:#5c75a6;letter-spacing:1px}.f-spacing{display:flex;flex-direction:column;gap:10px;padding-top:10px}.f-spacing>div{display:flex;align-items:center;gap:14px}.f-spacing span{font:10px ui-monospace,monospace;width:15px;text-align:right;color:#75829c}.f-spacing i{height:10px;background:#0c59ff;border-left:1px solid #002a8c;border-right:1px solid #002a8c}.f-spacing>div:nth-child(2n)>i{background:#87acff}.f-radius,.f-shadows{display:flex;align-items:center;gap:10px}.f-radius>i{width:49px;height:61px;border:2px solid #0c59ff;background:#d4e2ff;border-radius:0}.f-radius>i:nth-child(2){border-radius:12px}.f-radius>i:nth-child(3){border-radius:30px}.f-shadows>i{width:45px;height:55px;background:#fff}.f-shadows>i:nth-child(1){box-shadow:0 2px 4px #17387814}.f-shadows>i:nth-child(2){box-shadow:0 7px 12px #17387821}.f-shadows>i:nth-child(3){box-shadow:0 12px 24px #17387833}.f-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;color:#17499b}.f-icons svg{width:25px;height:25px}.f-grid{display:flex;gap:5px;width:80%;height:90px}.f-grid>i{flex:1;background:#b9d0ff;border-top:1px solid #5c8deb;border-bottom:1px solid #5c8deb}.section-note{font-size:13px!important;color:#778295!important;line-height:1.7!important;margin-top:26px!important}.stage-label{font-size:11px;display:inline-block;padding:8px 12px;border:1px solid #d4def2;color:#64748b;border-radius:3px;white-space:nowrap}.component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.component-card{display:block;border:0;padding:0;background:transparent;text-align:left;border-radius:0;min-width:0}.component-card:hover{background:transparent}.component-visual{height:230px;background:#f2f5fa;display:flex;justify-content:center;align-items:center;gap:10px;padding:24px;color:#171b26;overflow:hidden}.component-card p{font-size:16px}.component-status{display:block;font-size:11px;margin-top:10px;color:#7b879a}.demo-button{display:inline-flex;justify-content:center;align-items:center;padding:14px 18px;min-height:46px;background:#0c59ff;color:white;font-size:13px;border-radius:4px;white-space:nowrap}.demo-button.outline{background:transparent;color:#0c59ff;border:1px solid #a9c3fa}.cv-1{flex-direction:column;align-items:stretch;padding:40px}.demo-label{font-size:12px;font-weight:550;color:#44516b}.demo-input{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #9dbaf4;border-radius:4px;background:white;font-size:13px;color:#667085;min-height:48px}.demo-input>i{font-style:normal;color:#0c59ff}.cv-2{gap:28px}.demo-check{display:grid;place-items:center;width:28px;height:28px;background:#0c59ff;color:white;border-radius:4px;font-size:20px}.demo-radio{width:28px;height:28px;border:2px solid #0c59ff;border-radius:50%;background:#0c59ff;box-shadow:inset 0 0 0 5px #fff}.demo-toggle{height:30px;width:54px;background:#0c59ff;border-radius:30px;position:relative}.demo-toggle:after{content:'';width:22px;height:22px;position:absolute;right:4px;top:4px;background:white;border-radius:50%}.demo-card{padding:10px;background:white;border:1px solid #e4e7ec;width:210px}.demo-card>i{height:75px;display:block;background:#c8d9ff;position:relative;overflow:hidden}.demo-card>i:before{content:'';position:absolute;width:100px;height:100px;border:20px solid #0c59ff;border-radius:50%;top:-12px;left:48px}.demo-card>b{display:block;font-size:12px;margin:12px 3px 0}.demo-card>small{font-size:9px;margin:3px}.demo-dialog{display:block;background:#fff;border:1px solid #dce2ed;width:245px;padding:20px;border-radius:6px}.demo-dialog>b{font-size:14px;display:block}.demo-dialog>small{font-size:11px;margin:9px 0 20px}.demo-dialog>span{display:block;text-align:right;font-size:10px}.demo-dialog i{font-style:normal;display:inline-block;background:#0c59ff;color:white;padding:7px 18px;margin-left:15px;border-radius:3px}.demo-nav{display:flex;align-items:center;gap:20px;border-bottom:1px solid #ccd5e6;font-size:12px}.demo-nav>*{padding:18px 0}.demo-nav>b{color:#0c59ff;border-bottom:2px solid #0c59ff}.demo-nav>i{font-style:normal;color:#7a859a}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.core-project{border:1px solid #e4e7ec}.project-visual{height:240px;background:#eef3ff;padding:30px;position:relative;color:var(--studio-primary);overflow:hidden}.project-visual>span:first-child{font-size:100px;letter-spacing:-7px;font-weight:700;line-height:1.3}.project-symbol{position:absolute;font-size:240px;line-height:1;right:15px;top:0;color:#c0d4ff}.project-visual small{position:absolute;left:32px;bottom:28px;letter-spacing:2px;font-size:10px}.project-description{display:flex;justify-content:space-between;padding:28px;gap:15px}.project-label{font-size:10px;letter-spacing:.5px;color:#7e899e}.project-description h3{margin:8px 0 12px;display:flex;gap:25px}.project-description p{font-size:15px}.core-dot{width:16px;height:16px;border-radius:50%;background:var(--studio-primary);flex-shrink:0}.new-project{background:#fafbfd;border:1px dashed #cad2e1;padding:40px 20px;text-align:center;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-project:hover{background:#f4f7ff;border-color:#9cb6ea}.new-plus{font-size:50px;font-weight:300;color:#9db4de;margin-bottom:20px}.new-project h3{font-size:22px;margin-bottom:15px}.new-project p{font-size:16px;margin-bottom:25px}.news-section .section-heading{align-items:center}.news-section h2{font-size:34px}.news-row{border-top:1px solid #171b26;border-bottom:1px solid #e4e7ec;padding:30px 0;display:flex;align-items:flex-start;gap:24px}.news-row time{font-size:13px;color:#667085;padding-top:7px;white-space:nowrap}.news-tag{background:#eaf1ff;color:#0c59ff;padding:7px 9px;font-size:10px;white-space:nowrap}.news-row h3{font-size:21px;margin-bottom:8px}.news-row p{font-size:15px}.news-version{font-size:11px;color:#667085;margin-left:auto;white-space:nowrap;padding-top:8px}.news-foot{display:flex;justify-content:space-between;gap:24px;font-size:12px;color:#8993a4;margin-top:20px}.resource-list{border-top:1px solid #171b26}.resource-list>a,.resource-list>button{display:flex;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid #e4e7ec;border-radius:0;padding:25px 0;gap:30px;background:transparent}.resource-list>a:hover,.resource-list>button:hover{color:#0c59ff}.resource-list>a>span:first-child,.resource-list>button>span:first-child{font-size:12px;color:#8993a4}.resource-list h3{font-size:21px}.resource-list p{font-size:15px;margin-top:4px}.resource-list>a>span:last-child,.resource-list>button>span:last-child{margin-left:auto;font-size:26px}.home-end{padding:50px 0 55px;display:flex;align-items:center;gap:40px}.home-end>p{font-size:13px;line-height:1.6}.home-end>a:last-child{margin-left:auto;font-size:13px}.home-breadcrumb{padding:24px 0;font-size:12px;color:#8993a4;display:flex;gap:12px}.home-breadcrumb+.h-section{padding-top:32px}.home-dialog{width:min(620px,calc(100% - 32px));padding:32px;border-radius:6px;box-shadow:0 24px 80px #171b2633}.home-dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.home-dialog-heading>span{color:#0c59ff;font-size:10px;letter-spacing:1.5px}.home-dialog-heading button{display:flex;border:0;padding:8px}.home-dialog h2{font-size:30px;line-height:1.25;margin:0 0 18px;letter-spacing:-1px}.home-dialog p{font-size:16px;line-height:1.75;color:#667085}.home-dialog .info-lead{font-size:18px;color:#171b26}.info-body .h-button{margin-top:15px}.component-modal-preview{margin-top:24px}.global-search-label{display:block;font-size:12px;color:#667085}.global-search-label input{display:block;width:100%;margin-top:10px;padding:16px;border:1px solid #bac9e8;border-radius:4px;font-size:16px}.home-search-results{max-height:380px;overflow-y:auto;margin-top:15px}.home-search-results button{display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #e4e7ec;border-radius:0;width:100%;padding:16px 8px;text-align:left;gap:16px}.home-search-results button>span:first-child{overflow-wrap:anywhere;min-width:0}.home-search-results small{margin-top:5px}.studio-view>aside{top:91px;overflow-y:auto}.studio-view .app>header{position:relative}.studio-view .detail{top:110px}.studio-view .hero{background:#f0f5ff;border-color:#dbe6fa}.studio-view .hero p,.studio-view .hero small{color:#64748b}.studio-view .hero .glyph{color:#c0d4ff}.studio-view .hero .glyph span{color:#d9e5ff}.studio-view .tokenrow.selected{background:#f0f5ff}.studio-view .card.selected{border-color:#0c59ff;box-shadow:0 0 0 2px #eaf1ff}.studio-view .tag:not(.warn){color:#42689e;background:#eff4fc}.studio-view .avatar{background:#f0f5ff;border-color:#dbe5f6}.studio-view .titlebar p{color:#667085}.studio-view .navitem{color:#667085}.studio-view .navitem.active{color:#0c59ff}.studio-view pre{background:#f5f7fc;color:#4b6083;border-color:#e4e7ec}.studio-view .detailpreview{background:#f8faff;border-color:#e4e7ec}#toast{z-index:50;background:#171b26}#toast button{color:#bed2ff}
@media(min-width:1500px){.hero-copy h1{font-size:72px}.hero-art{max-width:520px;margin-left:auto}.hero-layout{min-height:560px}}
@media(max-width:1200px){.site-header{padding:0 28px;gap:24px}.site-nav{gap:17px}.site-nav>a{font-size:13px}.project-switch{display:none}.site-tools{gap:8px}.home-view main{padding:24px 28px 0}.h-hero{padding:25px 35px 22px}.hero-copy h1{font-size:52px;letter-spacing:-2.2px}.hero-art{transform:scale(.9);transform-origin:center right}.art-type{width:245px;left:0}.art-type strong{font-size:90px}.art-type strong span{font-size:50px}.art-controls{width:230px}.art-color{width:150px}.brand-layout{gap:40px}.brand-poster>strong{font-size:130px}.brand-poster>strong>span{font-size:95px}.demo-button{padding:12px;font-size:12px}.cv-1{padding:28px}.demo-nav{gap:13px;font-size:11px}.foundation-grid,.component-grid{gap:30px 18px}.f-type>b{font-size:86px}.f-type>span{font-size:35px}}
@media(max-width:980px){.site-header{height:76px}.site-logo>b{font-size:34px}.site-logo>span{font-size:11px}.site-logo>b>span{font-size:23px}.site-nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:18px 28px;border-bottom:1px solid #e4e7ec;flex-wrap:wrap;gap:6px 24px;box-shadow:0 8px 12px #171b2608}.site-nav.is-open{display:flex}.site-nav>a{padding:15px 0;font-size:15px}.site-nav>a[aria-current]:after{bottom:8px}.menu-toggle{display:flex!important;padding:8px!important}.project-switch{display:block}.hero-layout{grid-template-columns:1.05fr 1fr;gap:0;min-height:490px}.hero-copy h1{font-size:42px}.hero-copy p{font-size:16px}.hero-art{width:380px;transform:scale(.8);margin-left:-60px}.hero-actions{gap:16px}.h-button{font-size:13px;padding:13px 15px}.hero-text-link{font-size:13px}.hero-topline span:last-child{display:none}.h-hero{min-height:0}.h-section{padding:75px 0}.brand-layout{gap:30px}.brand-poster{min-height:390px;padding:25px}.brand-poster>strong{font-size:110px;letter-spacing:-13px}.brand-poster>strong>span{font-size:70px;letter-spacing:-10px}.brand-principles p{font-size:15px}.brand-principles h3{font-size:20px}.foundation-card.featured{grid-column:span 4}.foundation-card{grid-column:span 4}.foundation-card:last-child{grid-column:span 12}.foundation-card:last-child .foundation-visual{height:130px}.foundation-card:last-child .f-grid{width:90%;height:60px}.featured .foundation-visual{height:200px}.f-type{gap:5px}.f-type>b{font-size:68px}.f-type>span{font-size:29px}.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{gap:24px}.section-heading>p{font-size:16px}.project-description{padding:22px}.project-description p{font-size:14px}.new-project p{font-size:14px}.news-section .section-heading{align-items:flex-start;flex-direction:column;gap:0}.news-section h2{font-size:30px}.studio-view>aside{top:77px}.studio-view .detail{top:94px}}
@media(max-width:700px){.site-header{height:70px;padding:0 20px;gap:12px}.site-logo{gap:10px}.site-logo>b{font-size:32px;letter-spacing:-3px}.site-logo>b>span{font-size:21px}.site-logo>span{font-size:10px}.site-tools{gap:2px}.project-switch{display:none}.edit-entry{font-size:11px;padding:10px}.header-search{padding:8px!important}.site-nav{top:70px}.home-view main{padding:16px 18px 0}.h-hero{padding:22px 25px 20px}.hero-layout{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:0}.hero-copy{padding:35px 0 0}.hero-copy h1{font-size:clamp(37px,7.5vw,54px);letter-spacing:-1.8px;line-height:1.08}.hero-overline{font-size:9px;margin-bottom:18px}.hero-copy p{font-size:16px;margin-top:22px}.hero-actions{margin-top:25px;gap:20px}.hero-art{width:380px;align-self:center;height:430px;transform:scale(.85);transform-origin:center center;margin:0;max-width:none}.hero-topline{font-size:9px;padding-bottom:18px}.hero-bottomline{font-size:8px;gap:20px}.hero-bottomline a{font-size:10px;white-space:nowrap}.h-section{padding:64px 0}.h-kicker{font-size:10px;margin-bottom:20px}.home-page h2{font-size:34px;letter-spacing:-1.4px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:22px}.section-heading .section-link,.section-heading .stage-label{display:inline-block;margin-top:22px}.section-heading>div>p{font-size:16px;margin-top:17px}.brand-layout{grid-template-columns:1fr;gap:32px}.brand-poster{min-height:340px}.brand-poster>strong{font-size:140px;letter-spacing:-15px}.brand-poster>strong>span{font-size:100px}.brand-principles p{font-size:17px}.brand-principles h3{font-size:22px}.brand-principles article{padding-bottom:25px}.foundation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.foundation-card,.foundation-card.featured{grid-column:span 1}.foundation-card.featured:first-child{grid-column:span 2}.foundation-card:last-child{grid-column:span 2}.foundation-visual,.featured .foundation-visual{height:180px}.foundation-card.featured:first-child .foundation-visual{height:230px}.f-colors{height:140px;width:70%}.category-title{margin-top:16px}.home-page .category-title h3{font-size:20px}.foundation-card p{font-size:14px}.foundation-card small{font-size:10px}.f-type>b{font-size:60px}.f-type>span{font-size:25px}.f-spacing i{max-width:90px}.f-radius>i{width:36px;height:50px}.f-shadows>i{width:32px;height:48px}.f-icons{gap:20px}.component-grid{gap:30px 16px}.component-visual{height:180px;padding:12px}.cv-0{flex-direction:column;gap:8px}.cv-0 .demo-button{padding:10px;min-height:36px;font-size:11px;min-width:100px}.cv-1{padding:18px}.demo-label{font-size:10px}.demo-input{padding:10px;font-size:10px;min-height:40px;overflow:hidden;white-space:nowrap}.demo-input>i{display:none}.cv-2{gap:12px}.demo-check,.demo-radio{width:23px;height:23px}.demo-check{font-size:16px}.demo-toggle{width:40px;height:24px}.demo-toggle:after{width:18px;height:18px;right:3px;top:3px}.demo-card{width:145px;padding:7px}.demo-card>i{height:60px}.demo-card>b{font-size:10px}.demo-card>small{font-size:7px}.demo-dialog{padding:12px}.demo-dialog>b{font-size:11px}.demo-dialog>small{font-size:9px}.demo-dialog i{padding:6px 10px;margin-left:10px}.demo-nav{gap:8px;font-size:8px}.component-card p{font-size:14px}.component-card .category-title h3{font-size:19px}.component-status{font-size:10px}.project-grid{grid-template-columns:1fr}.new-project{min-height:310px}.project-visual{height:230px}.project-description p{font-size:16px}.new-project p{font-size:16px}.news-row{flex-wrap:wrap;gap:14px;padding:25px 0}.news-row>div{width:100%}.news-row h3{font-size:21px}.news-version{margin-left:0}.news-foot{flex-direction:column;gap:12px}.resource-list>a,.resource-list>button{gap:20px;padding:24px 0}.resource-list p{font-size:14px}.home-end{gap:25px;flex-wrap:wrap;padding:40px 0}.home-end>p{font-size:12px}.home-end>a:last-child{margin-left:0;flex-basis:100%}.home-dialog{padding:24px}.home-dialog h2{font-size:26px}.studio-view>aside{top:0;position:relative}.studio-view .detail{position:static}.studio-view main{padding:26px 18px}.home-breadcrumb+.h-section{padding-top:25px}}
@media(min-width:651px) and (max-width:700px){.studio-view>aside{position:fixed;top:71px}.studio-view .app{margin-left:205px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}