/* A new homepage: an arrival, a working document, and the user's own way. */
:root { --new-paper:#f6f5f0; --new-white:#fffefa; --new-ink:#27333a; --new-blue:#2c53dd; --new-muted:#59695f; --new-line:#dce3d9; --new-gutter:clamp(22px,5.5vw,92px); }
body.studio-home { background:var(--new-paper); color:var(--new-ink); }
.studio-home .new-shell { max-width:1360px; padding-inline:var(--new-gutter); margin-inline:auto; }
.studio-home h1,.studio-home h2,.studio-home h3 { letter-spacing:-.045em; font-weight:500; }
.studio-home h2 { font-size:clamp(37px,4.3vw,64px); line-height:1.3; }
.new-blue { color:var(--new-blue); }
.studio-home .studio-header { background:#f6f5f0f2; height:80px; }
.studio-home .studio-header.is-scrolled { background:#f6f5f0fa; border-bottom-color:var(--new-line); }
.studio-home .studio-footer { background:var(--new-paper); border-top:1px solid var(--new-line); }
.new-button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:48px; padding:0 25px; border-radius:30px; font-size:13px; transition:transform .2s,box-shadow .2s; }
.new-button.solid { background:var(--new-blue); color:#fff; box-shadow:0 6px 20px #2c53dd12; }
.new-button:hover { transform:translateY(-2px); box-shadow:0 9px 25px #2c53dd20; }
.new-button>span { font-size:20px; }
.new-link { display:inline-flex; align-items:center; gap:15px; font-size:12px; padding:9px 0; border-bottom:1px solid #b8c5b6; }
.new-section { padding-block:100px; }
.new-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:40px; }
.new-eyebrow { font-size:11px; color:var(--new-muted); margin-bottom:22px!important; line-height:1.8; }
.studio-home .new-description { font-size:14px; line-height:1.95; color:var(--new-muted); max-width:380px; padding-bottom:8px; }
.welcome { padding-top:80px; overflow:clip; }
.welcome-intro { text-align:center; padding-block:55px 40px; }
.welcome-note { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--new-muted); font-size:11px; margin-bottom:22px!important; }
.welcome-note>span { width:5px; height:5px; background:#749785; border-radius:50%; box-shadow:0 0 0 4px #7497850d; }
.studio-home .welcome h1 { font-size:clamp(54px,6.5vw,98px); letter-spacing:-.065em; line-height:1.2; }
.welcome h1>span { white-space:nowrap; }
.studio-home .welcome-description { font-size:15px; color:var(--new-muted); line-height:1.9; margin-top:22px; }
.welcome-actions { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:25px; }
.new-platform { font-size:9px; color:#a1a697; margin-top:15px!important; }
.work-showcase { padding-bottom:65px; }
.showcase-tabs { display:flex; gap:34px; justify-content:center; margin-bottom:25px; }
.showcase-tabs button { border:0; background:transparent; font-size:13px; padding:10px 0; color:#657263; position:relative; }
.showcase-tabs button:after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:transparent; }
.showcase-tabs button[aria-pressed="true"] { color:var(--new-blue); }
.showcase-tabs button[aria-pressed="true"]:after { background:var(--new-blue); }
.showcase-desk { position:relative; border:1px solid #ccd8cf; border-radius:15px; background:var(--new-white); width:min(100%,1040px); margin-inline:auto; box-shadow:0 30px 65px -49px #526e6c66; --desk-drift:0px; transform:translate3d(0,var(--desk-drift),0); }
.paper-shadow { position:absolute; inset:7px 10px -9px; border:1px solid #d4ddd0; background:transparent; border-radius:13px; z-index:-1; pointer-events:none; transform:rotate(-.6deg); }
.desk-top { display:flex; align-items:center; justify-content:space-between; padding:17px 25px; border-bottom:1px solid var(--new-line); font-size:10px; gap:15px; }
.desk-brand { display:flex; align-items:center; gap:10px; color:#748675; }
.desk-brand img { border-radius:5px; }
.example-label { font-size:9px; color:#657363; }
.desk-brief { display:flex; align-items:flex-start; gap:20px; padding:20px 30px; border-bottom:1px solid var(--new-line); background:#f1f4ec; }
.desk-brief>span { font-size:10px; color:#64765d; padding:4px 0; flex-shrink:0; }
.studio-home .desk-brief p { font-size:13px; line-height:1.9; color:#4e624a; }
.desk-content { display:grid; grid-template-columns:1.35fr .8fr; gap:60px; padding:34px 35px 32px; }
.case-document { min-width:0; }
.document-kicker { display:flex; justify-content:space-between; gap:20px; color:#62745b; font-size:10px; }
.document-kicker>span:last-child { padding:4px 7px; color:#6a8b67; background:#eff4e7; border-radius:4px; font-size:9px; margin-top:-4px; white-space:nowrap; }
.studio-home .case-document h2 { font-size:30px; line-height:1.5; white-space:pre-line; margin-top:20px; letter-spacing:-.035em; }
.case-rows { margin-top:18px; }
.case-rows>div { display:grid; grid-template-columns:82px minmax(0,1fr); gap:15px; padding:15px 0; border-bottom:1px solid #e6ecdf; }
.case-rows strong { color:#526d48; font-size:11px; font-weight:500; line-height:1.9; }
.studio-home .case-rows p { font-size:12px; color:#53664c; line-height:1.9; }
.document-bottom { display:flex; align-items:center; gap:9px; margin-top:20px; color:#65745a; font-size:10px; line-height:1.8; }
.file-mark { color:#789374; font-size:17px; }
.work-handoffs { border-left:1px solid #e1e8d9; padding-left:28px; }
.handoff-eyebrow { font-size:10px; color:#647557; margin-bottom:23px!important; }
.handoff-person { display:flex; gap:12px; padding:0 0 22px; position:relative; }
.handoff-person:not(:nth-last-child(2)):after { content:""; position:absolute; left:16px; top:39px; bottom:5px; width:1px; background:#dce4d4; }
.new-avatar { width:33px; height:37px; flex-shrink:0; display:grid; place-items:center; font-size:15px; color:#6a8990; background:#eaf0ee; border:1px solid #dce5df; border-radius:8px; }
.new-avatar.sand { color:#9b8d6f; background:#f3eee4; border-color:#e9e2d4; }
.new-avatar.ink { color:#7887ac; background:#eef0f8; border-color:#e0e5f2; }
.handoff-person strong { font-size:12px; font-weight:500; display:block; color:#657b60; }
.handoff-person small { color:#67765b; font-size:9px; font-weight:400; margin-left:7px; }
.studio-home .handoff-person p { font-size:11px; line-height:1.85; color:#5b6d50; margin-top:8px; min-height:61px; }
.handoff-end { font-size:9px; color:#657959; border-top:1px solid #e2e9da; padding-top:16px; line-height:1.8; }
.showcase-footer { border-top:1px solid var(--new-line); display:flex; justify-content:space-between; align-items:center; padding:15px 25px; gap:20px; color:#60764f; font-size:9px; }
.showcase-footer button { border:0; padding:5px 0; background:transparent; color:#526e43; font-size:10px; white-space:nowrap; }
.showcase-under { display:flex; justify-content:space-between; gap:20px; width:min(100%,1040px); margin:27px auto 0; color:#647756; font-size:10px; }
.software { border-top:1px solid var(--new-line); }
.real-tabs { display:flex; gap:33px; margin-bottom:20px; }
.real-tabs button { font-size:12px; color:#637753; border:0; border-bottom:2px solid transparent; padding:9px 0; background:transparent; }
.real-tabs button[aria-selected="true"] { border-color:var(--new-blue); color:var(--new-blue); }
.software-window { border:1px solid #ccd8cf; border-radius:10px; overflow:hidden; background:var(--new-white); }
.software-toolbar { display:flex; justify-content:space-between; gap:20px; padding:14px 20px; border-bottom:1px solid var(--new-line); color:#60754f; font-size:10px; }
.software-toolbar>span:last-child { color:#657a53; font-size:9px; }
.software-window img { display:block; width:100%; height:auto; }
.software-under { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#607650; font-size:11px; margin-top:20px; }
.teach { border-top:1px solid var(--new-line); background:var(--new-paper); }
.teach-rulebar { display:flex; flex-wrap:wrap; align-items:center; gap:20px 27px; margin-bottom:28px; }
.teach-rulebar>span { color:#60764f; font-size:11px; }
.teach-rules { display:flex; gap:10px; flex-wrap:wrap; }
.teach-rules button { border:1px solid #cedac4; border-radius:30px; padding:9px 13px; color:#587443; background:#f3f5ec; font-size:11px; display:flex; align-items:center; gap:8px; }
.teach-rules button[aria-pressed="true"] { color:var(--new-blue); background:#edf1fc; border-color:#bdcaed; }
.teach-rules button[aria-pressed="false"]>span { opacity:0; }
.report-comparison { display:grid; grid-template-columns:1fr 30px 1fr; gap:25px; align-items:stretch; }
.report-before,.report-after { border:1px solid #d7e0cf; border-radius:10px; padding:30px; background:var(--new-white); }
.report-before { background:#f1f3e9; }
.report-label { display:block; color:#647a51; font-size:10px; }
.studio-home .report-comparison h3 { font-size:24px; line-height:1.5; margin-top:25px; margin-bottom:22px; }
.studio-home .report-before>p { font-size:14px; line-height:2; color:#5f7452; margin-bottom:17px; }
.comparison-arrow { align-self:center; text-align:center; color:#a6b498; font-size:27px; }
#report-result { min-height:237px; }
#report-result>div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:15px; padding:15px 0; border-bottom:1px solid #e4ebdb; }
#report-result strong { font-size:11px; line-height:1.9; font-weight:500; color:#4e703b; }
.studio-home #report-result p { font-size:13px; line-height:1.9; color:#50683f; }
.report-foot { margin-top:25px; padding-top:17px; border-top:1px solid #dce6d2; color:#647b51; font-size:10px; line-height:1.8; }
.report-after .report-foot { color:#52743d; }
.teach-hint { color:#63794f; font-size:10px; line-height:1.8; margin-top:21px!important; }
.people { border-top:1px solid var(--new-line); }
.role-list { margin-top:10px; }
.role-list>article { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:30px; align-items:center; padding:33px 0; border-top:1px solid #d7e2ce; }
.role-name { display:flex; gap:17px; align-items:center; }
.role-icon { font-size:28px; color:#a2b78f; width:35px; text-align:center; }
.studio-home .role-name h3 { font-size:22px; line-height:1.5; }
.studio-home .role-list p { font-size:13px; line-height:1.9; color:#587344; }
.role-example { font-size:12px; color:#617d4d; text-align:right; line-height:1.9; }
.people>.new-link { margin-top:15px; }
.your-call { border-top:1px solid var(--new-line); background:var(--new-paper); }
.your-call-heading { text-align:center; }
.promise-list { display:grid; grid-template-columns:repeat(3,1fr); gap:52px; margin-top:45px; }
.promise-list>div { border-top:1px solid #d4e0ca; padding-top:25px; }
.promise-list>div>span { display:block; color:#9fb88c; font-size:27px; margin-bottom:17px; }
.studio-home .promise-list h3 { font-size:19px; line-height:1.5; }
.studio-home .promise-list p { font-size:13px; line-height:1.9; color:#587a40; margin-top:13px; }
.invitation { border-top:1px solid var(--new-line); }
.invitation-heading { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.invitation-heading>div { display:flex; flex-direction:column; align-items:center; gap:17px; }
.offer-link { font-size:10px; color:#607c47; }
.service-links { display:grid; grid-template-columns:1fr 1fr; gap:45px; margin-top:45px; }
.service-links>a { border-top:1px solid #d2e0c7; padding-top:25px; }
.service-links strong { display:block; font-size:19px; font-weight:500; }
.service-links span { display:block; font-size:12px; line-height:1.9; color:#55783d; margin-top:13px; }
.new-contact { display:flex; justify-content:space-between; align-items:center; gap:55px; padding-block:15px 85px; }
.studio-home .new-contact h2 { font-size:32px; line-height:1.5; }
.studio-home .new-contact p { color:#53763b; font-size:12px; line-height:1.9; margin-top:15px; }
.new-contact a { display:inline-block; font-size:11px; color:#4e7538; margin-top:22px; margin-right:20px; overflow-wrap:anywhere; }
.new-contact-card { display:flex; align-items:center; gap:22px; max-width:340px; }
.new-contact-card img { width:100px; height:auto; flex-shrink:0; mix-blend-mode:multiply; }
.new-contact-card strong { font-size:14px; font-weight:500; }
.studio-home .new-contact-card p { color:#5e7b45; font-size:10px; }
.new-announcement { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1050px) {
  .new-section { padding-block:78px; }
  .new-description { font-size:12px!important; max-width:300px!important; }
  .desk-content { gap:36px; padding:28px; }
  .work-handoffs { padding-left:22px; }
  .case-document h2 { font-size:26px!important; }
  .case-rows>div { grid-template-columns:70px 1fr; gap:12px; }
  .report-comparison { gap:19px; grid-template-columns:1fr 22px 1fr; }
  .report-before,.report-after { padding:24px; }
  .role-list>article { grid-template-columns:1fr 1.4fr; }
  .role-example { display:none; }
  .promise-list { gap:33px; }
}
@media(max-width:800px) {
  .welcome-intro { padding-block:43px 31px; }
  .studio-home .welcome h1 { font-size:6.8vw; }
  .new-section-heading { gap:25px; }
  .new-description { max-width:270px!important; }
  .desk-content { gap:27px; padding:24px; grid-template-columns:1.2fr .8fr; }
  .work-handoffs { padding-left:20px; }
  .handoff-person { gap:10px; }
  .case-document h2 { font-size:24px!important; }
  .case-rows>div { grid-template-columns:1fr; gap:5px; }
  .case-rows p { font-size:11px!important; }
  .document-bottom { font-size:9px; }
  #report-result>div { grid-template-columns:1fr; gap:5px; }
  .report-comparison h3 { font-size:21px!important; }
  .new-contact { gap:30px; }
}
@media(max-width:700px) {
  :root { --new-gutter:22px; }
  .studio-home .studio-header,.studio-home .studio-header.is-scrolled { height:72px; padding-inline:18px; gap:10px; }
  .studio-home .brand-en { display:none; }
  .studio-home .header-actions { gap:7px; }
  .studio-home .header-download { font-size:10px; white-space:nowrap; gap:7px; padding:8px 10px; }
  .studio-home .menu-toggle { width:32px; padding:7px; flex-shrink:0; }
  .studio-home .studio-nav { background:var(--new-paper); }
  .welcome { padding-top:72px; }
  .welcome-intro { padding-block:35px 30px; }
  .welcome-note { font-size:9px; margin-bottom:20px!important; }
  .studio-home .welcome h1 { font-size:clamp(39px,11.6vw,68px); line-height:1.3; }
  .welcome h1>span { display:block; }
  .welcome-description { font-size:12px!important; margin-top:19px!important; }
  .welcome-actions { gap:21px; margin-top:22px; }
  .new-button { min-height:43px; padding:0 18px; gap:19px; font-size:11px; }
  .new-link { font-size:10px; gap:10px; }
  .new-platform { font-size:8px; }
  .work-showcase { padding-bottom:46px; }
  .showcase-tabs { gap:24px; margin-bottom:19px; }
  .showcase-tabs button { font-size:10px; padding-block:9px; white-space:nowrap; }
  .showcase-desk { border-radius:10px; }
  .desk-top { padding:13px 17px; gap:12px; font-size:8px; }
  .desk-brand { gap:8px; }
  .desk-brand img { width:20px; height:20px; }
  .example-label { font-size:7px; text-align:right; line-height:1.7; max-width:65px; }
  .desk-brief { display:block; padding:17px; }
  .desk-brief>span { font-size:9px; }
  .desk-brief p { font-size:12px!important; margin-top:7px!important; }
  .desk-content { display:block; padding:22px 19px; }
  .document-kicker { font-size:9px; }
  .document-kicker>span:last-child { font-size:8px; }
  .case-document h2 { font-size:26px!important; margin-top:20px!important; }
  .case-rows>div { grid-template-columns:67px minmax(0,1fr); gap:11px; padding:14px 0; }
  .case-rows strong { font-size:10px; }
  .case-rows p { font-size:11px!important; }
  .document-bottom { font-size:9px; margin-top:17px; }
  .work-handoffs { border-left:0; border-top:1px solid #dce7d3; padding:23px 0 0; margin-top:23px; }
  .handoff-eyebrow { margin-bottom:20px!important; font-size:9px; }
  .handoff-person { padding-bottom:18px; gap:12px; }
  .handoff-person p { min-height:0!important; font-size:11px!important; }
  .handoff-person strong { font-size:11px; }
  .handoff-end { font-size:9px; padding-top:13px; }
  .showcase-footer { padding:13px 17px; gap:14px; align-items:flex-end; }
  .showcase-footer>span { font-size:8px; line-height:1.9; }
  .showcase-footer button { font-size:8px; }
  .showcase-under { font-size:8px; margin-top:23px; }
  .new-section { padding-block:62px; }
  .studio-home h2 { font-size:clamp(31px,8.9vw,48px); line-height:1.35; }
  .new-section-heading { display:block; margin-bottom:29px; }
  .new-eyebrow { font-size:9px; margin-bottom:18px!important; }
  .new-description { font-size:12px!important; line-height:1.9!important; max-width:100%!important; margin-top:21px!important; padding:0!important; }
  .real-tabs { gap:29px; margin-bottom:17px; }
  .real-tabs button { font-size:10px; }
  .software-window { border-radius:6px; }
  .software-toolbar { font-size:8px; padding:10px 13px; }
  .software-toolbar>span:last-child { font-size:7px; }
  .software-under { display:block; font-size:9px; line-height:1.9; }
  .software-under>.new-link { margin-top:13px; }
  .teach-rulebar { gap:13px; margin-bottom:24px; }
  .teach-rulebar>span { font-size:10px; }
  .teach-rules { gap:8px; }
  .teach-rules button { font-size:9px; padding:8px 11px; gap:6px; }
  .report-comparison { display:block; }
  .report-before,.report-after { padding:23px; border-radius:8px; }
  .report-label { font-size:9px; }
  .report-comparison h3 { font-size:23px!important; margin-top:22px!important; }
  .report-before>p { font-size:12px!important; margin-bottom:12px!important; }
  .comparison-arrow { display:block; margin:17px 0; transform:rotate(90deg); font-size:22px; }
  #report-result { min-height:0; }
  #report-result>div { grid-template-columns:67px 1fr; gap:12px; }
  #report-result strong { font-size:10px; }
  #report-result p { font-size:12px!important; }
  .report-foot { font-size:9px; margin-top:21px; padding-top:14px; }
  .teach-hint { font-size:9px; }
  .role-list>article { display:block; padding:28px 0; }
  .role-name { gap:14px; }
  .role-icon { font-size:24px; width:28px; }
  .role-name h3 { font-size:21px!important; }
  .role-list p { margin-top:15px!important; font-size:12px!important; }
  .role-example { display:block; text-align:left; margin-top:12px; font-size:10px; }
  .your-call-heading { text-align:left; }
  .promise-list { grid-template-columns:1fr; gap:28px; margin-top:30px; }
  .promise-list>div { padding-top:22px; }
  .promise-list>div>span { margin-bottom:13px; font-size:24px; }
  .promise-list h3 { font-size:19px!important; }
  .promise-list p { font-size:12px!important; }
  .invitation-heading { display:block; }
  .invitation-heading>div { align-items:flex-start; margin-top:29px; gap:15px; }
  .offer-link { font-size:9px; }
  .service-links { grid-template-columns:1fr; gap:26px; margin-top:34px; }
  .service-links>a { padding-top:22px; }
  .service-links strong { font-size:17px; }
  .service-links span { font-size:11px; }
  .new-contact { display:block; padding-block:10px 65px; }
  .new-contact h2 { font-size:28px!important; }
  .new-contact p { font-size:11px!important; }
  .new-contact a { font-size:10px; margin-top:18px; }
  .new-contact-card { margin-top:30px; gap:21px; }
  .new-contact-card img { width:96px; }
  .new-contact-card strong { font-size:13px; }
  .new-contact-card p { font-size:10px!important; }
}
@media(max-width:365px) {
  .studio-home .studio-header { padding-inline:14px; }
  .studio-home .studio-mark { width:30px; height:30px; }
  .studio-home .brand-zh { font-size:18px; }
  .studio-home .header-download { font-size:9px; }
  .welcome-actions { flex-wrap:wrap; gap:10px 20px; }
  .example-label { display:none; }
  .case-rows>div { grid-template-columns:58px 1fr; gap:9px; }
  #report-result>div { grid-template-columns:58px 1fr; gap:9px; }
  .showcase-tabs { gap:22px; }
}
@media(max-width:300px) {
  :root { --new-gutter:16px; }
  .studio-home .header-download { display:none; }
  .studio-home .welcome h1 { font-size:32px; }
  .welcome-note { font-size:8px; }
  .welcome-description { font-size:10px!important; }
  .showcase-tabs { gap:12px; }
  .showcase-tabs button { font-size:9px; }
  .case-document h2 { font-size:22px!important; }
  .desk-content { padding:19px 15px; }
  .case-rows>div,#report-result>div { grid-template-columns:1fr; gap:5px; }
  .showcase-under { display:block; line-height:2; }
  .showcase-under>a { display:block; margin-top:7px; }
  .studio-home h2 { font-size:27px; }
  .report-before,.report-after { padding:18px; }
  .new-contact-card { display:block; }
  .new-contact-card>div { margin-top:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-desk,.paper-shadow { transform:none!important; }
  .welcome *, .teach * { animation:none!important; transition:none!important; }
}

.source-number { width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; font-size:10px; color:#5f715b; border:1px solid #d5dfce; border-radius:50%; background:#f3f5ed; }
@media(min-width:701px) { .studio-home .handoff-person p { font-size:12px; } .studio-home .case-rows p { font-size:13px; } }