:root { --belt-red:#f2261b; --belt-bg:#050506; --belt-soft:#151516; --belt-line:rgba(255,255,255,.14); --belt-muted:rgba(255,255,255,.58); }
html:has(.belt-web-page) { scroll-behavior:auto; }
.belt-web-page { margin:0; min-width:320px; overflow-x:hidden; background:var(--belt-bg); color:#fff; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
.belt-web-page * { box-sizing:border-box; }
.belt-web-page img,.belt-web-page video { max-width:100%; }
.belt-shell { width:min(1440px,calc(100% - 96px)); margin-inline:auto; }
.belt-hero a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.belt-hero { min-height:max(720px,100svh); position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; background:#000; }
.belt-hero-map { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:#000; }
.belt-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.belt-hero::after { content:""; position:absolute; z-index:1; inset:0; background:radial-gradient(125% 95% at 50% 42%,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 100%),rgba(0,0,0,.28); pointer-events:none; }
.belt-hero-copy { width:min(1180px,calc(100% - 96px)); position:relative; z-index:2; text-align:center; transform:translateY(-23vh); }
.belt-eyebrow { margin:0 0 18px; font-size:18px; font-weight:650; letter-spacing:.08em; }
.belt-hero h1 { margin:0; color:#fff; font-size:clamp(38px,4.7vw,76px); font-weight:700; line-height:1.08; letter-spacing:-.055em; }
.belt-hero h1 span { font-weight:500; letter-spacing:.04em; }
.belt-hero-lead { margin:26px 0 0; color:rgba(255,255,255,.5); font-size:clamp(14px,1.4vw,22px); line-height:1.6; letter-spacing:.25em; }
.belt-hero-belt { width:min(720px,calc(100% - 48px)); height:auto; position:absolute; z-index:3; top:61%; left:50%; transform:translate(-50%,-50%); filter:drop-shadow(0 24px 55px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(242,38,27,.16)); }
.belt-scroll { position:absolute; z-index:3; bottom:30px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.48); font-size:10px; font-weight:700; letter-spacing:.16em; white-space:nowrap; }
.belt-scroll span { color:#fff; font-size:18px; }
.belt-section { padding:clamp(96px,10vw,170px) 0; background:#000; }
.belt-section-soft { background:var(--belt-soft); }
.belt-section-heading { max-width:none; margin-bottom:76px; display:grid; grid-template-columns:180px minmax(0,1.1fr) minmax(320px,.9fr); gap:54px; align-items:start; }
.belt-section-heading>p:first-child { margin:10px 0 0; font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.42); }
.belt-section-heading h2 { margin:0; font-size:clamp(38px,4.4vw,72px); line-height:1.12; letter-spacing:-.055em; }
.belt-intro { margin:10px 0 0; font-size:16px; line-height:1.9; color:var(--belt-muted); }
.belt-section-heading-compact { grid-template-columns:180px 1fr; }
.belt-heading-line { display:block; white-space:nowrap; }
#context .belt-section-heading,#information .belt-section-heading,#components .belt-section-heading { grid-template-columns:160px minmax(0,1.25fr) minmax(300px,.75fr); gap:48px; }
#context .belt-section-heading h2,#information .belt-section-heading h2,#components .belt-section-heading h2 { font-size:clamp(48px,4vw,60px); line-height:1.14; letter-spacing:-.045em; }
.belt-problem-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); justify-items:center; gap:clamp(32px,3vw,48px); }
.belt-problem-grid article { width:min(100%,248px); aspect-ratio:1; min-height:0; padding:24px; position:relative; border:1px solid var(--belt-line); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:#09090a; }
.belt-problem-grid article>span { width:max-content; position:absolute; top:28px; left:50%; transform:translateX(-50%); text-align:center; font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--belt-red); }
.belt-problem-grid h3 { margin:16px 0 12px; font-size:21px; }
.belt-problem-grid ul { margin:0; padding:0; list-style:none; color:var(--belt-muted); font-size:12px; line-height:1.95; }
.belt-problem-grid b { color:var(--belt-red); }
.belt-result-card dl { width:72%; margin:18px 0 0; display:grid; gap:10px; }
.belt-result-card dl div { display:flex; justify-content:space-between; gap:20px; }
.belt-result-card dt { color:var(--belt-muted); font-size:12px; }
.belt-result-card dd { margin:0; color:var(--belt-red); font-weight:750; }
.belt-model-grid { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.belt-model-grid li { min-height:230px; padding:28px; border:1px solid var(--belt-line); display:flex; flex-direction:column; justify-content:center; text-align:center; background:#171718; }
.belt-model-grid span { align-self:flex-start; margin-bottom:auto; color:rgba(255,255,255,.35); font-size:10px; letter-spacing:.12em; }
.belt-model-grid h3 { margin:0; font-size:26px; }
.belt-model-grid p { margin:10px 0 auto; color:var(--belt-muted); font-size:13px; }
.belt-model-grid .is-accent { border-color:var(--belt-red); background:var(--belt-red); }
.belt-model-output { margin-top:20px; display:grid; grid-template-columns:3fr 2fr; gap:22px; }
.belt-model-output p { margin:0; padding:20px 24px; border-top:1px solid var(--belt-line); color:var(--belt-muted); }
.belt-model-output b { color:#fff; }
.belt-format-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.belt-design-asset { width:min(1200px,100%); margin-inline:auto; overflow:hidden; border:0; background:#151516; line-height:0; }
.belt-design-asset img { width:100%; height:auto; display:block; }
.belt-format-card { padding:28px; border:1px solid var(--belt-line); background:#0b0b0c; }
.belt-format-card header { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; gap:20px; }
.belt-format-card header span { color:var(--belt-red); font-size:10px; font-weight:700; letter-spacing:.12em; }
.belt-format-card h3 { margin:0; font-size:22px; }
.belt-format-wide { grid-column:1/-1; }
.commerce-belt { min-height:150px; padding:28px 32px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:30px; background:#fa261b; }
.commerce-belt>div+div { padding-left:30px; border-left:1px solid rgba(255,255,255,.38); }
.commerce-belt strong { font-size:40px; line-height:1; }
.commerce-belt strong small,.commerce-belt strong sup { font-size:.5em; }
.commerce-belt b { margin-left:10px; padding:6px 8px; border-radius:5px; background:rgba(255,255,255,.22); }
.commerce-belt del { margin-left:10px; opacity:.62; }
.commerce-belt p { margin:12px 0 0; font-size:13px; }
.commerce-belt>div+div strong { display:block; font-size:19px; }
.commerce-belt>div+div small { display:block; margin-top:7px; }
.commerce-belt-pc { min-height:96px; grid-template-columns:1fr 2fr; }
.commerce-belt-pc p { margin:0; font-size:20px; }
.belt-format-card dl { margin:26px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.belt-format-card dl div { border-top:1px solid var(--belt-line); padding-top:14px; }
.belt-format-card dt { color:var(--belt-red); font-size:10px; font-weight:700; }
.belt-format-card dd { margin:8px 0 0; color:var(--belt-muted); font-size:12px; line-height:1.6; }
.belt-competitor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.belt-competitor-grid article,.belt-competitor-grid article:nth-child(2),.belt-competitor-grid article:nth-child(3) { min-height:0; padding:28px; display:block; border:1px solid var(--belt-line); border-radius:0; background:#0b0b0c; }
.belt-competitor-grid article>span { color:var(--belt-muted); font-size:11px; }
.belt-competitor-grid h3 { margin:38px 0 24px; font-size:26px; }
.belt-swatch-row { display:grid; grid-template-columns:repeat(4,1fr); height:52px; }
.belt-swatch-row i,.belt-hue-strip i { display:block; background:var(--c); }
.belt-competitor-grid p { margin:24px 0 0; color:var(--belt-muted); line-height:1.7; font-size:13px; }
.belt-color-rule-panel { margin-top:96px; padding-top:52px; border-top:1px solid var(--belt-line); }
.belt-color-rule-panel header { display:flex; justify-content:space-between; align-items:end; gap:30px; }
.belt-color-rule-panel header p { color:var(--belt-red); font-size:11px; font-weight:700; letter-spacing:.12em; }
.belt-color-rule-panel h3 { margin:0; font-size:36px; }
.belt-hue-strip { height:14px; margin:40px 0 26px; display:grid; grid-template-columns:repeat(8,1fr); gap:3px; }
.belt-color-rules { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.belt-color-rules article { min-height:155px; padding:22px; border:1px solid var(--belt-line); display:flex; flex-direction:column; }
.belt-color-rules b { color:var(--belt-red); font-size:10px; }
.belt-color-rules strong { margin-top:auto; font-size:18px; }
.belt-color-rules p { margin:8px 0 0; color:var(--belt-muted); font-size:12px; }
.belt-contrast-table { margin-top:60px; border-top:1px solid var(--belt-line); }
.belt-contrast-table>div { min-height:62px; display:grid; grid-template-columns:140px repeat(4,1fr); align-items:center; border-bottom:1px solid var(--belt-line); }
.belt-contrast-table span,.belt-contrast-table b { padding:0 14px; font-size:12px; }
.belt-contrast-table>div:first-child { color:var(--belt-muted); }
.belt-visually-hidden { width:1px; height:1px; margin:-1px; padding:0; position:absolute; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.belt-color-figma-section { background:#000; }
.belt-color-figma-panel-analysis { padding:120px 0; background:#000; }
.belt-color-figma-panel-rules { padding:120px 0 168px; background:#151516; }
.belt-figma-scroll { width:min(1440px,calc(100% - 96px)); margin-inline:auto; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:rgba(255,255,255,.32) transparent; scrollbar-width:thin; }
.belt-figma-scroll:focus-visible { outline:1px solid rgba(255,255,255,.52); outline-offset:8px; }
.belt-color-figma-board { width:1440px; margin:0; line-height:0; }
.belt-color-figma-board img { max-width:none; height:auto; display:block; }
.belt-color-figma-heading { width:1440px; }
.belt-color-figma-platforms { height:507px; margin-top:56px; display:grid; grid-template-columns:repeat(3,427px); align-items:start; gap:80px; }
.belt-color-figma-platforms img { width:427px; }
.belt-color-figma-hue { width:1440px; margin-top:12px; }
.belt-color-figma-theory-title { width:1440px; margin-top:56px; }
.belt-color-figma-theory-grid { width:1440px; margin-top:60px; }
.belt-color-figma-rules-title { width:1440px; height:59px; margin:0; display:flex; align-items:center; color:#fff; font-size:40px; font-weight:600; line-height:1; letter-spacing:-.025em; }
.belt-color-figma-spectrum { width:1445px; margin-top:64px; }
.belt-color-figma-table { width:1440px; margin-top:78px; }
.belt-component-design-asset { margin:0; overflow-x:auto; overscroll-behavior-inline:contain; background:var(--belt-soft); line-height:0; scrollbar-color:rgba(255,255,255,.32) transparent; scrollbar-width:thin; }
.belt-component-design-asset a { width:max-content; display:block; }
.belt-component-design-asset img { width:1440px; max-width:none; height:auto; display:block; }
.belt-tools { background:#151516; }
.belt-process-row { margin:0 0 48px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--belt-line); border-bottom:1px solid var(--belt-line); }
.belt-process-row li { min-height:120px; padding:24px; border-right:1px solid var(--belt-line); display:flex; flex-direction:column; justify-content:space-between; }
.belt-process-row span { color:var(--belt-red); font-size:10px; }
.belt-process-row strong { font-size:15px; }
.belt-process-row-three { grid-template-columns:repeat(3,1fr); }
.belt-media { margin:0; overflow:hidden; border:1px solid var(--belt-line); background:#080809; }
.belt-media img,.belt-media video { width:100%; height:auto; display:block; background:#050506; }
.belt-media-feature video { max-height:820px; object-fit:contain; }
.belt-media figcaption { min-height:70px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--belt-line); }
.belt-media figcaption span { color:var(--belt-red); font-size:10px; font-weight:700; letter-spacing:.12em; }
.belt-media figcaption p { margin:0; color:var(--belt-muted); font-size:12px; }
.belt-audit { background:#000; }
.belt-audit-cards { margin-bottom:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.belt-audit-cards article { padding:30px; border:1px solid var(--belt-line); }
.belt-audit-cards span { color:var(--belt-red); font-size:10px; letter-spacing:.12em; }
.belt-audit-cards h3 { margin:50px 0 14px; font-size:24px; }
.belt-audit-cards p { margin:0; color:var(--belt-muted); line-height:1.8; font-size:13px; }
#sop { padding:120px 0; }
.belt-sop-heading { margin:0 0 44px; display:grid; gap:12px; }
.belt-sop-heading h2 { margin:0; font-size:40px; font-weight:600; line-height:1.2; letter-spacing:-.035em; }
.belt-sop-heading p { max-width:920px; margin:0; font-size:24px; line-height:1.375; text-wrap:balance; }
.belt-sop-grid { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:313fr 432fr 238fr 238fr; gap:73px; }
.belt-sop-card { min-width:0; min-height:325px; position:relative; overflow:visible; border:1px solid #c00; border-radius:12px; background:#000; }
.belt-sop-card:not(:last-child)::after { content:""; width:38px; height:46px; position:absolute; z-index:1; top:50%; right:-55.5px; transform:translateY(-50%); background:url("assets/belt/sop-flow-arrow.svg") center/contain no-repeat; }
.belt-sop-card>header { min-height:76px; padding:10px 18px; border-radius:11px 11px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:#c00; text-align:center; }
.belt-sop-card>header span { color:rgba(255,255,255,.78); font-size:11px; font-weight:650; line-height:1.4; letter-spacing:.08em; }
.belt-sop-card h3 { margin:0; font-size:15px; font-weight:600; line-height:1.45; text-wrap:balance; }
.belt-sop-body { padding:16px 18px 18px; color:#fff; }
.belt-sop-card-audit .belt-sop-body { padding-inline:16px; }
.belt-sop-summary { margin:0 0 18px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5; text-align:center; }
.belt-sop-columns { display:grid; align-items:stretch; text-align:left; }
.belt-sop-columns-two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.belt-sop-columns-three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.belt-sop-columns section { min-width:0; }
.belt-sop-columns section+section { margin-left:12px; padding-left:12px; border-left:1px solid rgba(255,255,255,.13); }
.belt-sop-columns h4 { min-height:20px; margin:0 0 10px; font-size:13px; font-weight:650; line-height:1.5; text-wrap:balance; }
.belt-sop-columns ul,.belt-sop-checks { margin:0; padding:0; list-style:none; }
.belt-sop-columns ul { display:grid; gap:6px; }
.belt-sop-columns-three ul { gap:10px; }
.belt-sop-columns li { min-width:0; color:rgba(255,255,255,.7); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.belt-sop-columns small { display:block; color:rgba(255,255,255,.6); font-size:10px; line-height:1.45; }
.belt-sop-body-centered { width:min(100%,180px); margin-inline:auto; padding-top:16px; }
.belt-sop-checks { display:grid; gap:16px; text-align:center; }
.belt-sop-checks li { font-size:14px; font-weight:600; line-height:1.5; }
@media (max-width:1200px) {
  #context .belt-section-heading,#information .belt-section-heading,#components .belt-section-heading { grid-template-columns:130px 1fr; gap:36px; }
  #context .belt-section-heading .belt-intro,#information .belt-section-heading .belt-intro,#components .belt-section-heading .belt-intro { grid-column:2; }
}
@media (max-width:1360px) {
  .belt-sop-grid { width:min(100%,432px); margin-inline:auto; grid-template-columns:1fr; gap:72px; }
  .belt-sop-card:not(:last-child)::after { top:auto; right:auto; bottom:-59px; left:50%; transform:translateX(-50%) rotate(90deg); }
}
@media (max-width:1100px) {
  .belt-section-heading { grid-template-columns:130px 1fr; }
  .belt-section-heading .belt-intro { grid-column:2; }
  .belt-problem-grid { grid-template-columns:repeat(2,1fr); }
  .belt-model-grid { grid-template-columns:repeat(5,minmax(170px,1fr)); overflow-x:auto; }
  .belt-format-grid { grid-template-columns:1fr; }
  .belt-format-wide { grid-column:auto; }
  .belt-color-rules { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
  .belt-shell { width:calc(100% - 40px); }
  .belt-figma-scroll { width:calc(100% - 40px); }
  .belt-color-figma-panel-analysis { padding:82px 0; }
  .belt-color-figma-panel-rules { padding:82px 0 100px; }
  .belt-hero { min-height:max(720px,100svh); }
  .belt-hero-copy { width:calc(100% - 40px); transform:translateY(-20vh); }
  .belt-eyebrow { margin-bottom:14px; font-size:13px; }
  .belt-hero h1 { font-size:clamp(38px,11vw,48px); line-height:1.08; }
  .belt-hero-lead { margin-top:20px; font-size:12px; line-height:1.8; letter-spacing:.13em; }
  .belt-hero-belt { width:calc(100% - 36px); top:64%; filter:drop-shadow(0 18px 42px rgba(0,0,0,.54)) drop-shadow(0 0 30px rgba(242,38,27,.18)); }
  .belt-scroll { bottom:24px; }
  .belt-section { padding:82px 0; }
  .belt-section-heading,.belt-section-heading-compact { margin-bottom:46px; grid-template-columns:1fr; gap:22px; }
  .belt-section-heading .belt-intro { grid-column:auto; }
  .belt-section-heading h2 { font-size:38px; }
  .belt-heading-line { white-space:normal; }
  #context .belt-section-heading,#information .belt-section-heading,#components .belt-section-heading { grid-template-columns:1fr; gap:22px; }
  #context .belt-section-heading .belt-intro,#information .belt-section-heading .belt-intro,#components .belt-section-heading .belt-intro { grid-column:auto; }
  #context .belt-section-heading h2,#information .belt-section-heading h2,#components .belt-section-heading h2 { font-size:36px; line-height:1.18; }
  .belt-problem-grid,.belt-competitor-grid,.belt-audit-cards { grid-template-columns:1fr; }
  .belt-problem-grid article { width:min(100%,248px); }
  .belt-model-grid { grid-template-columns:repeat(5,200px); }
  .belt-model-output { grid-template-columns:1fr; }
  .belt-format-card { padding:18px; }
  .belt-design-asset { width:100%; margin-inline:auto; overflow-x:auto; }
  .belt-design-asset img { width:900px; max-width:none; }
  .belt-format-card header { align-items:start; flex-direction:column; }
  .commerce-belt { min-height:190px; padding:22px; grid-template-columns:1fr; }
  .commerce-belt>div+div { padding:18px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.35); }
  .commerce-belt strong { font-size:34px; }
  .belt-format-card dl { grid-template-columns:1fr; }
  .belt-color-rule-panel header { align-items:start; flex-direction:column; }
  .belt-color-rule-panel h3 { font-size:30px; }
  .belt-color-rules { grid-template-columns:1fr; }
  .belt-contrast-table { overflow-x:auto; }
  .belt-contrast-table>div { min-width:680px; }
  .belt-process-row,.belt-process-row-three { grid-template-columns:1fr; }
  .belt-process-row li { min-height:88px; border-right:0; border-bottom:1px solid var(--belt-line); }
  .belt-media figcaption { align-items:start; flex-direction:column; }
  #sop { padding:82px 0; }
  .belt-sop-heading { gap:8px; margin-bottom:28px; }
  .belt-sop-heading h2 { font-size:30px; line-height:1.35; }
  .belt-sop-heading p { max-width:340px; font-size:16px; line-height:1.65; }
  .belt-sop-card>header span { font-size:10px; }
  .belt-sop-card h3 { font-size:14px; }
  .belt-sop-body,.belt-sop-card-audit .belt-sop-body { padding-inline:14px; }
  .belt-sop-columns section+section { margin-left:10px; padding-left:10px; }
  .belt-sop-columns-three h4 { font-size:12px; }
  .belt-sop-columns-three li { font-size:10.5px; }
}
@media (max-width:520px) {
  .belt-sop-columns-two,.belt-sop-columns-three { grid-template-columns:1fr; }
  .belt-sop-columns section+section { margin:16px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.13); border-left:0; }
  .belt-sop-columns h4 { min-height:0; }
  .belt-sop-columns-three h4 { font-size:13px; }
  .belt-sop-columns-three li { font-size:11px; }
}