/* Raise brand site. Identity per brand/default/brand.json and Lab #/raise: paper ground, solid Ember, Dawn Ink text, flat colour only (no gradients, glows or grain; in dark, elevation is a 1px hairline ring). Type per Lab #/raise-type, scheme "wide": Archivo at 112% width for titles, kickers and figures; Inter + Noto Sans SC for text; Chinese is always Noto Sans SC. One orange primary button per screen; orange means the main action and the brand, nothing else. In every illustration the one orange thing is where a person decides. */ :root{ --paper:#FDF9F4; --surface:#F7F2EC; --panel:#FFFFFF; --wash:#F2EEE9; --sunken:#EFE9E2; --ink:#131736; --soft:#68625C; --faint:#9A948D; --line:#E2DDD8; --line-2:#D3CDC6; --ember:#E4531F; --primary:#C73E1A; --primary-hover:#B33614; --on-primary:#FFFFFF; --primary-wash:#FBEBE2; --primary-ink:#9E2F10; --data:#4E5AC9; --ok:#3E8E5A; --ok-wash:#E6F2EA; --display:"Archivo","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --sans:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --ring:0 0 0 1px var(--line); --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#191816; --surface:#1F1D1B; --panel:#242220; --wash:#22201D; --sunken:#2A2725; --ink:#F1F0ED; --soft:#A9A49E; --faint:#7D786F; --line:#2E2A26; --line-2:#3A352F; --ember:#F17C43; --primary:#F17C43; --primary-hover:#F4905F; --on-primary:#191816; --primary-wash:#33261F; --primary-ink:#F6A17A; --data:#8F98E8; --ok:#6DBF86; --ok-wash:#1F2A22; color-scheme:dark}} :root[data-theme="dark"]{ --paper:#191816; --surface:#1F1D1B; --panel:#242220; --wash:#22201D; --sunken:#2A2725; --ink:#F1F0ED; --soft:#A9A49E; --faint:#7D786F; --line:#2E2A26; --line-2:#3A352F; --ember:#F17C43; --primary:#F17C43; --primary-hover:#F4905F; --on-primary:#191816; --primary-wash:#33261F; --primary-ink:#F6A17A; --data:#8F98E8; --ok:#6DBF86; --ok-wash:#1F2A22; color-scheme:dark} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.no-scroll{overflow:hidden} a{color:inherit} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit} .i{width:1em;height:1em;flex:none} .wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:32px} .wrap.narrow{max-width:840px} .wrap.mid{max-width:1000px} .l-dark{display:none} :root[data-theme="dark"] .l-light{display:none} :root[data-theme="dark"] .l-dark{display:block} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .l-light{display:none}:root:not([data-theme="light"]) .l-dark{display:block}} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- type ---------- */ .kick{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--display);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)} .kick::before{content:"";width:20px;height:1px;background:currentColor} h1,h2,h3,h4{font-family:var(--display);font-stretch:112%;margin:0;text-wrap:balance;letter-spacing:.005em} h1{font-size:clamp(36px,5vw,60px);line-height:1.14;font-weight:800} h2{font-size:clamp(26px,3vw,38px);line-height:1.25;font-weight:700} h3{font-size:20px;line-height:1.4;font-weight:700} h4{font-size:16px;line-height:1.5;font-weight:700} p{margin:0} .deck{font-size:18px;line-height:1.8;color:var(--soft);max-width:38em} .deck b{color:var(--ink);font-weight:600} .num{font-family:var(--display);font-stretch:112%;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:760px} .head.center{align-items:center;text-align:center;margin-inline:auto} .head .deck{max-width:38em} section{padding-block:96px} section.tight{padding-block:64px} .band{background:var(--surface)} .muted{color:var(--soft)} .small{font-size:14px;color:var(--soft);line-height:1.7} em.ember{font-style:normal;color:var(--primary)} code,kbd{font-family:var(--mono);font-size:.9em;background:var(--sunken);padding:2px 6px;border-radius:6px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding-inline:22px;border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;border:0;background:transparent;transition:background .18s,color .18s,transform .18s var(--ease),box-shadow .18s} .btn:hover{transform:translateY(-1px)} .btn.solid{background:var(--primary);color:var(--on-primary)} .btn.solid:hover{background:var(--primary-hover)} .btn.ghost{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)} .btn.ghost:hover{background:var(--wash)} .btn.sm{height:38px;padding-inline:16px;font-size:14px} .btn.lg{height:52px;padding-inline:28px;font-size:16px} .btn .i{width:16px;height:16px} .link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--primary);text-decoration:none} .link .i{width:16px;height:16px;transition:transform .18s var(--ease)} .link:hover .i{transform:translateX(3px)} .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center} :focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s} .nav.scrolled{border-bottom-color:var(--line)} .nav>.wrap{display:flex;align-items:center;gap:28px;height:68px} .logo img{height:22px;width:auto} .links{display:flex;align-items:center;gap:4px;margin-left:12px;font-size:15px} .links>a,.menu>a{display:inline-flex;align-items:center;gap:4px;height:38px;padding-inline:12px;border-radius:999px;text-decoration:none;color:var(--soft);transition:color .18s,background .18s} .links>a:hover,.menu>a:hover,.menu.open>a,.menu:hover>a,.links .on{color:var(--ink);background:var(--wash)} .menu{position:relative} .menu>a .i{width:14px;height:14px;opacity:.7;transition:transform .2s} .menu:hover>a .i,.menu.open>a .i{transform:rotate(180deg)} .panel{position:absolute;top:100%;left:-8px;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility .2s} .menu:hover .panel,.menu.open .panel,.menu:focus-within .panel{opacity:1;visibility:visible;transform:none} .panel-in{min-width:320px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--ring),0 24px 60px -24px rgba(19,23,54,.25);padding:8px;display:grid;gap:2px} .pitem{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-md);text-decoration:none;transition:background .15s} .pitem:hover{background:var(--wash)} .pitem .pi{grid-row:1/3;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--primary-wash);color:var(--primary)} .pitem .pi .i{width:18px;height:18px} .pitem b{font-weight:600;font-size:15px;line-height:1.4} .pitem small{font-size:13px;color:var(--soft);line-height:1.4} .pitem.all{grid-template-columns:1fr auto;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding-top:12px;color:var(--primary)} .pitem.all b{font-size:14px} .actions{margin-left:auto;display:flex;align-items:center;gap:10px} .theme{display:inline-flex;align-items:center;gap:8px;height:38px;min-width:38px;padding-inline:9px;border:0;border-radius:999px;background:transparent;color:var(--soft);cursor:pointer} .theme:hover{background:var(--wash);color:var(--ink)} .theme .i{width:18px;height:18px} .theme .moon{display:none} :root[data-theme="dark"] .theme .sun{display:none}:root[data-theme="dark"] .theme .moon{display:block} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}} .burger{display:none;width:40px;height:40px;border:0;border-radius:999px;background:transparent;place-items:center;cursor:pointer} .burger .i{width:22px;height:22px} .mnav{display:none;position:fixed;inset:68px 0 0;background:var(--paper);overflow:auto;z-index:39;padding-block:16px 40px} .mnav[hidden]{display:none} .mnav .wrap{display:flex;flex-direction:column;gap:2px} .mnav a,.mnav summary{display:block;padding:12px 4px;font-size:18px;text-decoration:none;border-bottom:1px solid var(--line);cursor:pointer} .mnav details a{font-size:16px;padding-left:16px;color:var(--soft);border-bottom:0} .mnav summary{list-style:none;display:flex;justify-content:space-between} .mnav summary::after{content:"+";color:var(--soft)} .mnav details[open] summary::after{content:"–"} .mnav .mcta{display:flex;gap:12px;margin-top:24px} .mnav .mcta .btn{flex:1} @media (max-width:980px){.links,.nav .btn.ghost{display:none}.burger{display:grid}.mnav:not([hidden]){display:block}} /* ---------- hero (home) ---------- */ .hero{padding-block:72px 0;overflow:hidden} .hero .head{gap:24px;margin-bottom:56px;max-width:820px} .hero h1{max-width:14em} .hero .deck{font-size:19px} .stage{position:relative;container-type:inline-size;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--ring);overflow:hidden} .stage-in{position:relative;aspect-ratio:1000/560} .stage svg{position:absolute;inset:0;width:100%;height:100%} .stage .cap{position:absolute;right:20px;bottom:14px;font-size:12.5px;color:var(--faint)} .hero-note{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:var(--soft)} .hero-note span{display:inline-flex;align-items:center;gap:8px} .hero-note .i{width:16px;height:16px;color:var(--primary)} /* subpage hero */ .phero{padding-block:64px 24px} .crumbs{display:flex;gap:8px;font-size:13px;color:var(--soft);margin-bottom:28px} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)} .crumbs span::before{content:"/";margin-right:8px;color:var(--faint)} .phero .head{margin-bottom:0;max-width:820px;gap:20px} .phero h1{font-size:clamp(32px,4.2vw,50px)} .phero .ctas{margin-top:8px} .phero-art{margin-top:56px} /* ---------- figures ---------- */ .figure{border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--ring);padding:28px;overflow:hidden} .figure svg{width:100%;height:auto} .figure.plain{background:transparent;box-shadow:none;padding:0} .figure .cap,.plate .cap{margin-top:14px;font-size:13px;color:var(--faint);text-align:center} .plate{border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--ring);padding:clamp(12px,2.4vw,28px)} .plate .shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ring)} .plate img{width:100%;height:auto} .art{color:var(--ink)} .art .l{stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .art .f{stroke:var(--line-2);fill:none;stroke-width:1.5;stroke-linecap:round} .art .p{fill:var(--panel);stroke:var(--line-2);stroke-width:1.5} .art .s{fill:var(--sunken)} .art .w{fill:var(--wash)} .art .e{fill:var(--ember)} .art .el{stroke:var(--ember);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .art .ew{fill:var(--primary-wash)} .art .t{font:500 11px var(--sans);fill:var(--soft)} .art .tt{font:600 12px var(--sans);fill:var(--ink)} .art .tk{font:600 9.5px var(--display);font-stretch:112%;letter-spacing:.14em;fill:var(--primary)} .art .te{fill:var(--on-primary);font:600 11px var(--sans)} .art .tn{font:700 20px var(--display);font-stretch:112%;fill:var(--ink)} .art .dim{opacity:.55} /* ---------- grids & cards ---------- */ .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--ring)} .band .card{background:var(--panel)} .card.soft{background:var(--surface);box-shadow:none} .band .card.soft{background:var(--paper)} .card p{color:var(--soft);font-size:15.5px;line-height:1.75} .card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--primary-wash);color:var(--primary)} .card .ic .i{width:20px;height:20px} .card .link{margin-top:auto;font-size:14.5px} .card .n{font-size:13px;font-weight:600;color:var(--primary);font-family:var(--display);font-stretch:112%;letter-spacing:.1em} .card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--soft);font-size:15px} .card ul li{display:flex;gap:10px;align-items:flex-start} .card ul .i{width:16px;height:16px;margin-top:5px;color:var(--primary)} .tile{padding:22px 24px;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--ring);display:flex;flex-direction:column;gap:6px} .tile b{font-weight:600} .tile small{color:var(--soft);font-size:14px;line-height:1.6} /* feature rows with icon */ .feats{display:grid;gap:28px 32px} .feat{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start} .feat .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--primary-wash);color:var(--primary)} .feat .ic .i{width:20px;height:20px} .feat b{display:block;font-weight:600;font-size:16.5px;margin-bottom:4px} .feat p{color:var(--soft);font-size:15px;line-height:1.7} /* split: text + figure */ .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center} .split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .split.rev .copy{order:2} .split .copy{display:flex;flex-direction:column;gap:18px} .split .copy .deck{font-size:16.5px} .split .copy ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px} .split .copy li{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:15.5px} .split .copy li .i{width:18px;height:18px;margin-top:4px;color:var(--primary)} .split .copy li b{color:var(--ink);font-weight:600} @media (max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:32px}.split.rev .copy{order:0}} /* frameless big numbers */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:8px} .stat .num{font-size:clamp(40px,5vw,60px);line-height:1;color:var(--ink)} .stat .num sup{font-size:.4em;vertical-align:top;margin-left:2px;color:var(--primary)} .stat small{display:block;margin-top:10px;color:var(--soft);font-size:14.5px;line-height:1.6} @media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .step{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)} .band .step{background:var(--paper)} .step .n{display:flex;align-items:baseline;gap:12px;font-size:15px;font-weight:600} .step .n .num{font-size:30px;line-height:1;color:var(--primary)} .step .q{font-size:15px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--panel);box-shadow:var(--ring);align-self:flex-start;max-width:100%} .step p{color:var(--soft);font-size:15.5px;line-height:1.75} @media (max-width:900px){.steps{grid-template-columns:1fr}} .flow{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;counter-reset:f} .flow>div{position:relative;padding:22px 20px 20px;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--ring);counter-increment:f} .flow>div::before{content:counter(f,decimal-leading-zero);display:block;font:700 12px var(--display);font-stretch:112%;letter-spacing:.12em;color:var(--primary);margin-bottom:10px} .flow b{display:block;font-weight:600;margin-bottom:4px} .flow small{color:var(--soft);font-size:14px;line-height:1.6} .flow>div.hot{box-shadow:0 0 0 1.5px var(--primary)} @media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.flow{grid-template-columns:1fr}} /* mini cards used inside figures/steps (chat card look) */ .mini{border-radius:14px;background:var(--panel);padding:14px 16px;box-shadow:var(--ring);display:flex;flex-direction:column;gap:8px;font-size:14px} .mini .hd{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--soft)} .mini .hd .i{width:14px;height:14px;color:var(--primary)} .mini .ti{font-size:15px;font-weight:600;line-height:1.4} .mini .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--soft)} .mini .ft span{display:flex;gap:6px} .mini .b{font-style:normal;font-size:13px;font-weight:500;height:28px;padding-inline:12px;border-radius:7px;display:inline-flex;align-items:center;background:var(--primary);color:var(--on-primary)} .mini .b.g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)} .mini .will{font-size:13px;line-height:1.55;border-radius:8px;background:var(--wash);padding:8px 10px} /* tables */ .tbl{width:100%;border-collapse:collapse;font-size:15px} .tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top} .tbl th{font-weight:600;font-size:13.5px;color:var(--soft);letter-spacing:.02em} .tbl td:first-child{font-weight:600;white-space:nowrap} .tbl td .i{width:18px;height:18px;color:var(--primary)} .tbl tr:last-child td{border-bottom:0} .tblwrap{border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--ring);overflow:auto} .tblwrap .tbl td,.tblwrap .tbl th{padding-inline:20px} /* Q&A checklist (IT page) */ .qa{display:grid;gap:14px} .qa>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:22px 26px;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--ring)} .qa b{font-weight:600;font-size:16px;line-height:1.5} .qa p{color:var(--soft);font-size:15px;line-height:1.7} .qa p em{font-style:normal;color:var(--ink);font-weight:500} @media (max-width:760px){.qa>div{grid-template-columns:1fr;gap:8px}} /* app chips */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:12px;border-radius:999px;background:var(--panel);box-shadow:var(--ring);font-size:14px;font-weight:500} .chip i{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block} .band .chip{background:var(--paper)} /* pricing */ .billing{display:inline-flex;padding:4px;border-radius:999px;background:var(--wash);box-shadow:var(--ring);margin:0 auto 40px} .billing button{height:36px;padding-inline:16px;border:0;border-radius:999px;background:transparent;color:var(--soft);font-weight:500;cursor:pointer} .billing button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--ring)} .prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch} .price{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--ring)} .price.hot{box-shadow:0 0 0 1.5px var(--primary)} .price .tier{display:flex;align-items:center;justify-content:space-between} .price .tier b{font-size:18px;font-weight:700;font-family:var(--display);font-stretch:112%} .price .tag{font-size:12px;font-weight:600;color:var(--primary);background:var(--primary-wash);padding:3px 9px;border-radius:999px} .price .amt{display:flex;align-items:baseline;gap:6px} .price .amt .num{font-size:40px;line-height:1} .price .amt small{color:var(--soft);font-size:14px} .price .for{color:var(--soft);font-size:14.5px;min-height:3.2em;line-height:1.6} .price ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--soft)} .price ul li{display:flex;gap:9px;align-items:flex-start} .price ul .i{width:16px;height:16px;margin-top:5px;color:var(--primary)} .price .btn{margin-top:auto;width:100%} @media (max-width:1100px){.prices{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.prices{grid-template-columns:1fr}} /* tabs */ .tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--wash);box-shadow:var(--ring);width:max-content;max-width:100%;overflow:auto} .tabs [role="tab"]{height:36px;padding-inline:16px;border:0;border-radius:999px;background:transparent;color:var(--soft);font-weight:500;cursor:pointer;white-space:nowrap} .tabs [role="tab"][aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--ring)} /* quote */ .quote{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:28px 32px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:17px;line-height:1.8} .quote .mark{width:28px;height:28px;color:var(--ember)} .quote small{display:block;margin-top:10px;font-size:14px;color:var(--soft)} /* aside note */ .aside{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--soft);max-width:48em;margin-top:28px} .aside .i{flex:none;width:18px;height:18px;margin-top:5px;color:var(--primary)} /* ========================================================================== Text beside its figure (2026-11-06). Usage and HTML: docs/handover/handover-brand-site-pages.md 「组件用法」. Orange stays for the primary button, emphasis and state; frames, bars and icons here are neutral. ========================================================================== */ /* .row: one claim and its figure side by side. Text left, figure right; .flip or every second row in .rows reverses it. Below 900px: one column, the figure under its text. */ .rows{display:grid;gap:clamp(64px,8vw,104px)} .row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);align-items:center} .row.flip,.rows>.row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .row.flip>.row-copy,.rows>.row:nth-child(even)>.row-copy{order:2} .row-copy{display:flex;flex-direction:column;gap:14px;min-width:0} .row-copy h3{font-size:clamp(21px,2.2vw,26px);line-height:1.35} .row-copy>p{color:var(--soft);font-size:16px;line-height:1.75;max-width:38em} .row-copy>p b{color:var(--ink);font-weight:600} .row-copy .ctas{margin-top:6px;gap:8px 20px} .row-fig{min-width:0} /* a wide diagram (svg.art, drawn at 900 px) is unreadable in half a column: such a row stacks — claim and points side by side on top, the diagram full width below. .row.stack does the same for any figure. */ .row.stack,.rows>.row.stack:nth-child(even),.row:has(>.row-fig svg.art),.rows>.row:nth-child(even):has(>.row-fig svg.art){grid-template-columns:minmax(0,1fr);align-items:start} .row.stack>.row-copy,.row:has(>.row-fig svg.art)>.row-copy{order:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,5vw,64px);align-items:start} .row.stack>.row-copy>*,.row:has(>.row-fig svg.art)>.row-copy>*{grid-column:1} .row.stack>.row-copy>ul,.row:has(>.row-fig svg.art)>.row-copy>ul{grid-column:2;grid-row:1 / span 4;align-self:center} .points{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:38em} .points li{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:15px;line-height:1.7} .points li .i{width:16px;height:16px;margin-top:5px;color:var(--ink);opacity:.55} .points li b{color:var(--ink);font-weight:600} @media (max-width:900px){ .row,.row.flip,.rows>.row:nth-child(even){grid-template-columns:minmax(0,1fr);gap:28px} .row.flip>.row-copy,.rows>.row:nth-child(even)>.row-copy{order:0} .row>.row-copy{display:flex!important} } /* .sticky-figure: short paragraphs scroll on the left, the figure stays on the right (wide screens). With [data-pane] children in the figure, the pane matching the step in view is shown (site.js). Below 900px it is a plain .row. */ .sticky-figure{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,64px);align-items:start} .sf-steps{display:grid;min-width:0} .sf-step{display:flex;flex-direction:column;gap:10px;padding-block:clamp(40px,10vh,96px);border-top:1px solid var(--line);min-width:0} .sf-step:first-child{border-top:0;padding-top:0} .sf-step h3{font-size:20px;line-height:1.4} .sf-step p{color:var(--soft);font-size:15.5px;line-height:1.75;max-width:38em} .sf-step .n{font:600 12px/1 var(--display);font-stretch:112%;letter-spacing:.14em;color:var(--faint)} .sticky-figure.live .sf-step{opacity:.5;transition:opacity .3s} .sticky-figure.live .sf-step.on{opacity:1} .sticky-figure.live .sf-step.on .n{color:var(--primary)} .sf-fig{position:sticky;top:96px;min-width:0} .sf-fig [data-pane]{transition:opacity .3s} .sf-fig [data-pane][hidden]{display:none} @media (max-width:900px){ .sticky-figure{grid-template-columns:minmax(0,1fr);gap:28px} .sf-step{padding-block:20px} .sticky-figure.live .sf-step{opacity:1} .sf-fig{position:static} .sf-fig [data-pane][hidden]{display:block} .sf-fig [data-pane]+[data-pane]{margin-top:16px} } /* .code: a code window. Bar: title (file name or METHOD /path), optional tabs, copy button. Hand-written colour classes: .k keyword .s string .c comment .n number / literal .f function / method .v variable / env .p property / flag */ .code{min-width:0;max-width:100%;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--ring);overflow:hidden} .code-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:46px;padding:7px 8px 7px 16px;background:var(--surface);border-bottom:1px solid var(--line)} .code-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px/1.4 var(--mono);color:var(--soft)} .code-title b{font-weight:600;color:var(--ink)} .code-tabs{display:flex;gap:2px} .code-tabs [role="tab"]{height:30px;padding-inline:11px;border:0;border-radius:7px;background:transparent;color:var(--soft);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s} .code-tabs [role="tab"]:hover{color:var(--ink)} .code-tabs [role="tab"][aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--ring)} .code-copy{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:10px;border:0;border-radius:7px;background:transparent;color:var(--soft);font-size:13px;cursor:pointer;transition:background .15s,color .15s} .code-copy:hover{background:var(--wash);color:var(--ink)} .code-copy .i{width:15px;height:15px} .code-copy.done{color:var(--ok)} @media (max-width:600px){.code-bar{flex-wrap:nowrap}.code-copy span{display:none}.code-copy{padding-inline:8px}.code-tabs [role="tab"]{padding-inline:8px}} .code pre{margin:0;padding:18px 20px;overflow-x:auto;font:13.5px/1.75 var(--mono);tab-size:4;-moz-tab-size:4;color:var(--ink);white-space:pre} .code pre[hidden]{display:none} .code pre code{font:inherit;background:none;padding:0;border-radius:0} .code-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)} .code-foot a{color:var(--soft);text-decoration:none} .code-foot a:hover{color:var(--ink)} .code .k{color:var(--data)} .code .s{color:var(--ok)} .code .c{color:var(--faint);font-style:italic} .code .n{color:var(--data)} .code .f{color:var(--ink);font-weight:600} .code .v{color:var(--soft)} .code .p{color:var(--soft)} @media (max-width:760px){.code pre{padding:16px;font-size:12.5px}} /* .preview: an interface sketch in a window frame (three dots, title, optional 「在产品里打开 →」 with data-app-link). The body is plain HTML drawn with the site's variables; every preview says 示意. */ .preview{margin:0;min-width:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--ring);overflow:hidden} .pv-bar{display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 14px;border-bottom:1px solid var(--line);background:var(--panel)} .pv-dots{display:flex;gap:6px;flex:none} .pv-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)} .pv-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--soft)} .pv-open{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--soft);text-decoration:none;transition:color .15s} .pv-open:hover{color:var(--ink)} .pv-open .i{width:14px;height:14px;transition:transform .18s var(--ease)} .pv-open:hover .i{transform:translateX(2px)} .pv-body{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,3vw,28px);font-size:14px;line-height:1.6} .pv-note{padding:0 16px 12px;font-size:12.5px;color:var(--faint);text-align:right} /* parts to draw with */ .pv-msg{align-self:flex-end;max-width:85%;padding:9px 14px;border-radius:14px 14px 4px 14px;background:var(--panel);box-shadow:var(--ring)} .pv-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--ring),0 10px 30px -18px rgba(19,23,54,.22)} .pv-hd{display:flex;align-items:center;gap:8px;font-weight:600} .pv-hd .i{width:16px;height:16px;color:var(--primary)} .pv-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0} .pv-kv dt{color:var(--faint)} .pv-kv dd{margin:0;min-width:0;overflow-wrap:anywhere} .pv-kv dd small{display:block;font-size:12.5px;color:var(--faint)} .pv-ref{display:inline-flex;align-items:center;height:24px;padding-inline:8px;border-radius:6px;background:var(--wash);font-weight:500} .pv-will{padding:9px 12px;border-radius:var(--r-sm);background:var(--wash)} .pv-will small{display:block;font-size:12px;color:var(--faint);margin-bottom:2px} .pv-will ul{margin:0;padding-left:1.1em} .pv-ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px} .pv-ft>span:first-child{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)} .pv-ft .i{width:14px;height:14px} .pv-btns{display:flex;gap:8px} .pv-btn{display:inline-flex;align-items:center;height:30px;padding-inline:12px;border-radius:7px;font-size:13px;font-weight:500;background:var(--primary);color:var(--on-primary);white-space:nowrap} .pv-btn.g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)} .pv-list{margin:0;padding:0;list-style:none;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--ring)} .pv-list li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line);min-width:0} .pv-list li:first-child{border-top:0} .pv-list li b{font-weight:500;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pv-list li small{flex:none;color:var(--faint);font-size:12.5px} .pv-tag{flex:none;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--wash);color:var(--soft)} .pv-tag.ok{background:var(--ok-wash);color:var(--ok)} .pv-tag.hot{background:var(--primary-wash);color:var(--primary-ink)} .pv-field{display:grid;gap:5px} .pv-field>span{font-size:12.5px;color:var(--soft)} .pv-field>div{min-height:36px;display:flex;align-items:center;padding:6px 12px;border-radius:var(--r-sm);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)} /* .feature-list: icon + title + one sentence, two or three columns (.c2 / default three). Replaces long stacked