:root{--bg:#0a0a0a;--panel:#141414;--fg:#f2f2ee;--grey:#8a8a85;--dim:#5e5e5a;--body:#bdbdb8;--line:#232323;--acc:#dfff00;--side:340px;--g:8px;--ease:cubic-bezier(.15,0,.15,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{background:var(--bg);color:var(--fg);font-family:"PingFang SC","Source Han Sans SC","Noto Sans SC",sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;width:100%}
.mono{font-size:11.5px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}
/* sidebar */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--side);padding:var(--g) 0 var(--g) var(--g);display:flex;flex-direction:column;z-index:20}
.pill{display:flex;align-items:center;gap:18px;height:46px;padding:0 14px;background:var(--panel);border-radius:6px;font-size:12px;letter-spacing:.12em}
.pill .lg{font-weight:700;font-size:15px;letter-spacing:-.02em;color:#fff;margin-right:4px}
.pill .cr{color:var(--grey)}.pill .cr b{color:var(--dim);font-weight:400}.pill .mn{margin-left:auto;color:var(--grey);font-size:16px}
.ttl{padding:46px 12px 0 12px}
.ttl h1,.ttl .h{font-size:20px;font-weight:400;line-height:1.35}
.ttl .s{font-size:20px;font-weight:300;color:var(--grey);line-height:1.35}
.ttl .mono{margin-top:14px}
.idx{list-style:none;padding:40px 12px 0;font-size:14.5px;line-height:2.05}
.idx a{color:var(--grey);transition:color .3s var(--ease);position:relative}
.idx a.on{color:var(--fg)}.idx a.on::before{content:"•";position:absolute;left:-12px}
.idx small{display:block;font-size:12.5px;color:var(--dim);line-height:1.5;margin:-2px 0 6px}
.mini{margin-top:auto;display:flex;gap:12px;background:var(--panel);border-radius:6px;padding:8px;position:relative}
.mini img{width:64px;height:64px;object-fit:cover;border-radius:4px;flex:none}
.mini .t{font-size:14px;line-height:1.4;padding-top:2px}.mini .t span{display:block;color:var(--grey)}.mini .mono{position:absolute;left:84px;bottom:9px;font-size:10.5px}
.mini .ar{position:absolute;right:10px;top:8px;color:var(--grey);font-size:13px}
/* main */
main{margin-left:var(--side);padding:var(--g) var(--g) 0 var(--g)}
.m{border-radius:6px;overflow:hidden;background:#151515;position:relative}
.m img{height:100%;object-fit:cover;transition:transform .9s var(--ease)}
figure{margin:0}


.row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g);margin-top:var(--g)}












.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:var(--g)}
.tile{display:block;position:relative;border-radius:6px;overflow:hidden;background:#151515}
.tile img{height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile .cap{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(10,10,10,.82);backdrop-filter:blur(8px);border-radius:5px;padding:10px 12px;opacity:0;transform:translateY(8px);transition:all .45s var(--ease);font-size:14px;line-height:1.4}
.tile .cap span{display:block;color:var(--grey)}.tile .cap .mono{position:absolute;right:12px;top:11px;font-size:10.5px}
.tile.h img{transform:scale(1.03)}@media (hover:hover){.tile:hover img{transform:scale(1.03)}}.tile.h .cap{opacity:1;transform:none}@media (hover:hover){.tile:hover .cap{opacity:1;transform:none}}
footer{display:flex;justify-content:space-between;align-items:flex-end;padding:120px 16px 28px;font-size:13px;color:var(--grey);border-top:1px solid var(--line);margin-top:120px}
footer .big{font-size:34px;font-weight:300;color:var(--fg);line-height:1.35;margin-bottom:28px}
footer .o{display:inline-block;border:1px solid rgba(255,255,255,.85);color:var(--fg);padding:9px 22px;border-radius:999px;font-size:14px}
/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}.rv.in{opacity:1;transform:none}
/* mobile */
.mbar{display:none}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 :root{--side:0px;--g:6px}
 .side{position:static;width:auto;padding:var(--g)}
 .side .idx,.side .mini{display:none}
 .ttl{padding:36px 10px 22px}.ttl h1,.ttl .h,.ttl .s{font-size:24px}
 .pill .cr{display:none}
 main{margin:0;padding:0 var(--g)}
 .mbar{display:flex;position:sticky;top:0;z-index:15;justify-content:space-between;align-items:center;height:44px;padding:0 14px;margin:0 calc(-1*var(--g));background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);font-size:14px}
 .mbar .p{position:absolute;left:0;bottom:-1px;height:1px;background:var(--fg)}
 
 
 .row.st{grid-template-columns:1fr}
 
 
 .rel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;margin-right:calc(-1*var(--g))}
 footer{flex-direction:column;align-items:flex-start;gap:24px;padding:72px 8px 24px}footer .big{font-size:24px}
}
.pill img.lg{height:26px;width:auto;filter:invert(1);margin-right:2px}
.filt{list-style:none;padding:40px 12px 0;font-size:14.5px;line-height:2.05}
.filt a{color:var(--grey)}.filt a.on{color:var(--fg);position:relative}.filt a.on::before{content:"•";position:absolute;left:-12px}
.filt .mono{display:block;margin:22px 0 4px;font-size:10.5px}
.mas{columns:2;column-gap:var(--g)}
.mas .tile{break-inside:avoid;margin-bottom:var(--g)}
.pgn{display:flex;justify-content:center;gap:8px;padding:56px 0 0;font-size:14px}.pgn a{min-width:44px;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:var(--grey)}.pgn a.on{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}
.mlist{display:none}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.mas{columns:1}.tile .cap{position:static;opacity:1;transform:none;background:none;backdrop-filter:none;padding:10px 4px 18px}.tile{background:none}.tile img{border-radius:6px}
 .mfil{display:flex!important;gap:6px;overflow-x:auto;padding:0 0 14px;margin:0 calc(-1*var(--g)) 0 0;white-space:nowrap}.mfil a{flex:none;font-size:14px;padding:9px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#ddd}.mfil a.on{background:var(--fg);color:#0a0a0a}
 .side .filt{display:none}}
.mfil{display:none}
.pill .mn{margin-left:4px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.tile .cap .mono{position:static;display:block;margin-top:4px}}
.pill .cr{white-space:nowrap}.pill .cr{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---- deploy fixes (work-test / case-test) ---- */
.lgw{display:block;line-height:0;flex:none}
button.mn{background:none;border:0;color:var(--grey);font:inherit;font-size:16px;cursor:pointer;min-width:32px;min-height:32px;margin-left:4px}
button.mn[aria-expanded="true"]{color:var(--fg)}@media (hover:hover){button.mn:hover{color:var(--fg)}}
.menu{display:flex;flex-direction:column;margin-top:6px;background:var(--panel);border-radius:6px;padding:8px 6px;font-size:15px}
.menu[hidden]{display:none}.menu a{padding:8px 10px;border-radius:4px;min-height:40px;display:flex;align-items:center}@media (hover:hover){.menu a:hover{background:#1f1f1f}}
.ttl .s{margin:0}.ttl .intro{font-size:13.5px;color:var(--grey);line-height:1.75;margin-top:18px;max-width:300px}
.bc{display:block;margin-bottom:12px;font-size:11px}@media (hover:hover){.bc a:hover{color:var(--fg)}}
.filt .cn,.mfil .cn{font-size:11px;color:var(--dim);margin-left:6px;letter-spacing:.04em}
.tile h2,.tile h3{font-size:inherit;font-weight:400;line-height:1.4}
.tile .cap .lb{display:block;color:var(--dim);font-size:11.5px;margin-top:2px;letter-spacing:.04em}
.tm{overflow:hidden;border-radius:6px}
.mas.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);grid-auto-rows:1px;columns:auto}
.mas.grid .tile{margin-bottom:0;align-self:start}
.tile[hidden]{display:none!important}
.empty{color:var(--grey);padding:40px 8px}


.relh{padding:56px 16px 14px}
footer .fr{text-align:right}
@media (hover:hover){footer a:hover{color:var(--fg)}}@media (hover:hover){footer .o:hover{background:#fff;color:#0a0a0a}}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.mbar .tg{background:none;border:0;color:var(--grey);font:inherit;font-size:14px;min-height:44px;cursor:pointer}
.mtoc{position:absolute;right:8px;top:44px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px;display:flex;flex-direction:column;min-width:160px}
.mtoc[hidden]{display:none}.mtoc a{padding:10px 12px;min-height:44px;display:flex;align-items:center}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .ttl .intro{max-width:none;font-size:14px}
 
 .mfil a{min-height:40px;display:inline-flex;align-items:center}
 .pill .cr{display:none}
 .relh{padding:40px 8px 12px}
 footer .fr{text-align:left!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}

/* v5: case hero — full-screen only on landscape screens wider than 1024px; whole image at 16:9 otherwise */
.hero-m{height:calc(100vh - 16px)}
@media (max-width:1024px),(orientation:portrait){.hero-m{height:auto!important;min-height:0!important;aspect-ratio:16/9}}

/* ==== v9 (2026-10-18): header = home-test v22 header (copied verbatim), left reserve = home-test featured-case text column ==== */
:root{--pad:clamp(16px,2.2vw,32px);--out:cubic-bezier(.16,1,.3,1);--nav:72px;--top:88px;
 /* home-test .work: grid padding 0 var(--pad), columns 6fr/10fr, column-gap 8px -> text column width / image column start */
 --colw:calc((100% - 2*var(--pad) - 8px)*6/16)}
/* --- copied from home-test.html (home_locked_v22) --- */
.logo{position:fixed;left:var(--pad);top:15px;z-index:60;mix-blend-mode:difference;line-height:0}
.logo img{height:42px;width:auto;filter:invert(1)}
.nav{position:fixed;top:0;right:0;z-index:50;padding:18px var(--pad);transition:transform .45s var(--out),opacity .3s}
.nav.hid{transform:translateY(-120%);opacity:0;pointer-events:none}
.nav ul{display:flex;gap:36px;list-style:none;align-items:center;font-size:14px;min-height:42px}
@media (hover:hover){.nav ul a:not(.cta):hover{color:#fff;text-decoration:underline;text-underline-offset:4px}}
.cta{background:var(--acc);color:#0a0a0a!important;padding:8px 18px;border-radius:999px;font-weight:500;font-size:14px}
@media (hover:hover){.cta:hover{background:#fff}}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .logo{top:14px}.logo img{height:34px}
 .logo{mix-blend-mode:normal;opacity:1;filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 1px 3px rgba(0,0,0,.22))}.logo img{filter:brightness(0) invert(1)}
 .nav ul li:not(:last-child){display:none}
}
/* --- end copy --- */
/* desktop: fixed left column = home text column (left var(--pad), width 6/16, text keeps 24px off the gutter like home .w-block right:24px) */
.side{left:0;width:calc(var(--pad) + var(--colw));padding:var(--top) 24px var(--g) var(--pad)}
.side .ttl{padding:0}
.side .idx,.side .filt{padding-left:0;padding-right:0}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.ttl .intro{max-width:75%}}
/* main column starts where home case images start (pad + col + 8px gap) and ends at 100% - pad like home */
main{margin-left:calc(var(--pad) + var(--colw) + 8px);padding:var(--top) var(--pad) 0 0}
.hero-m{height:calc(100vh - var(--top) - 8px)}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 :root{--g:6px}
 .side{position:static;width:auto;padding:calc(72px + clamp(40px,6vh,72px)) var(--pad) 0}
 .side .ttl{padding:0 0 22px}
 main{margin:0;padding:0 var(--pad)}
 .mbar{top:72px;margin:0 calc(-1*var(--pad));padding:0 var(--pad)}
 .mfil,.rel{margin-right:calc(-1*var(--pad))}
 
 .relh{padding-left:0;padding-right:0}
 footer{padding-left:0;padding-right:0}
}
/* ==== v10 (2026-10-18): Dagang "图片起点调整为x=480px" -> image column starts at 1/3 of the page width (480 @1440, 640 @1920, 426.7 @1280);
   left margin var(--pad), 8px gutter, text keeps 24px off the gutter, right edge 100% - pad (unchanged) ==== */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side{width:calc(100%/3 - 8px)}
 main{margin-left:calc(100%/3)}
}
/* v11 work grid: mixed 4:3 / 3:4 cards; Koto-style hover — caption appears in the gap under the image, not on it */
.mas .tile{background:none;overflow:visible;border-radius:0}
.mas .tm{aspect-ratio:var(--ar,4/3);position:relative;background:#151515}
.mas .tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:none;transform:none!important}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .mas .tile .cap{position:static;opacity:1;transform:none;background:none;backdrop-filter:none;border-radius:0;padding:8px 0 14px;font-size:14px;line-height:20px}
 .mas .tile .cap .mono{display:none}
 .mas .tile .cap .cc{display:block}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine),(min-width:821px) and (min-height:561px) and (hover:hover) and (pointer:fine){
 .mas .tile{aspect-ratio:var(--ar,4/3)}
 .mas .tm{aspect-ratio:auto;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;transition:height .167s linear}
 .mas .tm::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.7);opacity:0;transition:opacity .167s linear;pointer-events:none}
 .mas:has(.tile:hover) .tile:not(:hover) .tm::after,.mas:has(.tile:focus-visible) .tile:not(:focus-visible) .tm::after{opacity:1}
 .mas .tile:hover .tm,.mas .tile:focus-visible .tm{height:calc(100% - 24px)}
 .mas .tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:12px;padding:8px 0 0;white-space:nowrap;opacity:0;transition:opacity .167s linear 0s}
 .mas .tile:hover .cap,.mas .tile:focus-visible .cap{opacity:1;transform:none;transition-delay:.167s}
 .mas .tile .cap h2{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg);line-height:20px}
 .mas .tile .cap .cc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;color:#989898}
 .mas .tile .cap .lb{flex:none;display:inline;margin:0;font-size:11.5px;color:var(--dim)}
 .mas .tile:focus-visible{outline:none}
 .mas .tile:focus-visible .tm{outline:1px solid var(--grey);outline-offset:2px}
}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.mas .tile .cap{padding:10px 4px 18px}}
@media (prefers-reduced-motion:reduce){.mas .tm,.mas .tm::after,.mas .tile .cap{transition:none!important}}
/* ==== v12 (2026-10-19): Dagang "图片起点调整为x=350px" -> image column starts at 35/144 of page width
   (350 @1440, 437.5 @1920, 311.1 @1280); left column = that - 8px gutter; mobile unchanged ==== */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side{width:calc(100% * 35 / 144 - 8px)}
 main{margin-left:calc(100% * 35 / 144)}
}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side .ttl h1,.side .ttl .s,.side .ttl .intro,.side .mini .t{text-wrap:pretty}
}
/* ==== v13 (2026-10-19) case page: flush pairs, 16:9 hero (4:5 edge-to-edge on mobile), work-test cards in 相关案例,
   TOC jump offset, mobile sticky-bar top band. Scoped to case-page elements; work-test has none of these. ==== */
main section > figure + figure{margin-top:var(--g)}
.pair .row{margin-top:0}
.pair .m img{width:100%;height:100%;object-fit:cover}
.hero-m picture{display:block;height:100%}
[data-sec]{scroll-margin-top:var(--top,88px)}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){main .hero .hero-m{height:auto!important;min-height:0!important;aspect-ratio:16/9}}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 main > figure.hero{margin:0 calc(-1*var(--pad))}
 main .hero .hero-m{aspect-ratio:4/5;border-radius:0}
 
 [data-sec]{scroll-margin-top:132px}
 .mbar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:72px;background:var(--bg);opacity:0;transition:opacity .2s linear;pointer-events:none}
 .mbar.stuck::before{opacity:1}
}
/* 相关案例 = work-test cards (same rules as .mas, v11) */
.rel .tile{background:none;overflow:visible;border-radius:0}
.rel .tm{aspect-ratio:var(--ar,4/3);position:relative;background:#151515}
.rel .tile img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:none;transform:none!important}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .rel{align-items:start}
 .rel .tile .cap{position:static;opacity:1;transform:none;background:none;backdrop-filter:none;border-radius:0;padding:8px 0 14px;font-size:14px;line-height:20px}
 .rel .tile .cap .mono{display:none}
 .rel .tile .cap .cc{display:block}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine),(min-width:821px) and (min-height:561px) and (hover:hover) and (pointer:fine){
 .rel .tile{aspect-ratio:var(--ar,4/3)}
 .rel .tm{aspect-ratio:auto;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;transition:height .167s linear}
 .rel .tm::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.7);opacity:0;transition:opacity .167s linear;pointer-events:none}
 .rel:has(.tile:hover) .tile:not(:hover) .tm::after,.rel:has(.tile:focus-visible) .tile:not(:focus-visible) .tm::after{opacity:1}
 .rel .tile:hover .tm,.rel .tile:focus-visible .tm{height:calc(100% - 24px)}
 .rel .tile .cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:12px;padding:8px 0 0;white-space:nowrap;opacity:0;transition:opacity .167s linear 0s}
 .rel .tile:hover .cap,.rel .tile:focus-visible .cap{opacity:1;transform:none;transition-delay:.167s}
 .rel .tile .cap h3{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg);line-height:20px}
 .rel .tile .cap .cc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;color:#989898}
 .rel .tile .cap .lb{flex:none;display:inline;margin:0;font-size:11.5px;color:var(--dim)}
 .rel .tile:focus-visible{outline:none}
 .rel .tile:focus-visible .tm{outline:1px solid var(--grey);outline-offset:2px}
}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.rel .tile .cap{padding:10px 4px 18px}}
@media (prefers-reduced-motion:reduce){.rel .tm,.rel .tm::after,.rel .tile .cap,.mbar::before{transition:none!important}}
/* v13b (2026-10-19): bottom 下一个案例 card removed (left-column small card kept); mobile hides the left card, so a copy shows once before 相关案例 on ≤820 only */
.mnext{display:none}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.mini.mnext{display:flex;margin:0}}
/* ==== v14 (2026-10-19) case page text, Koto-style: captions removed; every text block sits on the image grid
   (two halves of the image column, 8px gutter). Label at left half +24px, heading + body in right half (32px right inset).
   Image -> text 32px, text -> image 56px (Koto 32/56). Scoped to case-page classes; work-test has none of these. ==== */
.lead,.sec,.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g)}
.lead,.sec{padding:32px 0 56px}
.lead .k,.sec .k{margin:0;font:inherit}
.sec .k{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g)}
.lead .k{grid-column:1}
.k .no{display:block;padding-left:24px;font-weight:400}
.sec .k .no{line-height:33.6px}
.sec .k .hd{grid-column:2;display:block;font-size:24px;font-weight:300;line-height:1.4;color:var(--fg);padding-right:32px;text-wrap:pretty}
.lead .v,.sec .v,.close p{grid-column:2;padding-right:32px;max-width:calc(34em + 32px);margin:0}
.sec .v{margin-top:16px}
.sec .v p{font-size:16px;line-height:1.7;color:var(--body);margin:0 0 12px}
.sec .v p:last-child,.lead .v p:last-child{margin-bottom:0}
.lead .k .no{line-height:31.5px}
.lead .v p{font-size:18px;line-height:1.75;font-weight:300;color:var(--fg);margin:0 0 12px}
.close{padding:120px 0 0}
.close p{font-size:24px;font-weight:300;line-height:1.4;color:var(--fg);text-wrap:pretty}
.relh{padding:120px 0 14px 24px;font-weight:400}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .lead,.sec,.close,.sec .k{grid-template-columns:minmax(0,1fr)}
 .lead,.sec{padding:36px 0 32px}
 .k .no,.lead .k .no,.sec .k .no{padding-left:0;line-height:18px;margin-bottom:12px}
 .sec .k .hd{grid-column:1;font-size:21px;line-height:1.45;padding-right:0}
 .lead .v,.sec .v,.close p{grid-column:1;padding-right:0;max-width:none}
 .sec .v{margin-top:12px}
 .sec .v p{font-size:15px;line-height:1.75;margin-bottom:10px}
 .lead .v p{font-size:17px;line-height:1.75}
 .close{padding:72px 0 0}
 .close p{font-size:21px;line-height:1.45}
 .mini.mnext{margin-top:40px}
 .relh{padding:40px 0 12px}
}
/* ==== v15 (2026-10-19) case page text = Koto Instagram proportions. Koto is fixed up to ~1728px and then scales every size
   with the window (root 16px x vw/1728); --u reproduces that (1px at <=1728, grows above). Divider above each text block,
   label top-aligned with the heading, body runs to the column edge minus 32u. Case-page classes only. ==== */
main{--u:1px}
/* v16 (2026-10-19): Dagang "正文字体不要随着屏幕放大而放大" -> the >1728px growth is removed; --u stays 1px at every desktop width */
.lead,.sec{margin-top:calc(12 * var(--u));border-top:1px solid #2d2d2d;padding-top:calc(22 * var(--u))}
.lead,.sec{padding-bottom:calc(56 * var(--u))}
.k .no{color:#a09f9a;font-size:calc(12 * var(--u));line-height:1.2}
.sec .k .no{line-height:1.2;padding-top:calc(4.6 * var(--u))}
.lead .k .no{line-height:1.2;padding-top:calc(6.6 * var(--u))}
.sec .k .hd{font-size:calc(24 * var(--u));line-height:1.4;padding-right:calc(32 * var(--u))}
.lead .v,.sec .v,.close p{max-width:none;padding-right:calc(32 * var(--u))}
.sec .v{margin-top:calc(16 * var(--u))}
.sec .v p{font-size:calc(16 * var(--u));line-height:1.75;color:#cfcfca;margin-bottom:calc(12 * var(--u))}
.lead .v p{font-size:calc(18 * var(--u));line-height:1.75;margin-bottom:calc(12 * var(--u))}
.sec .v p,.lead .v p,.close p,.sec .k .hd{text-wrap:pretty}
.close{padding-top:calc(120 * var(--u))}
.close p{font-size:calc(24 * var(--u))}
.relh{font-size:calc(12 * var(--u));color:#a09f9a;padding-top:calc(120 * var(--u));padding-left:calc(24 * var(--u))}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .lead,.sec{margin-top:12px;padding-top:24px}
 .lead,.sec{padding-bottom:32px}
 .k .no,.lead .k .no,.sec .k .no{font-size:12px;line-height:1.2;padding-top:0;margin-bottom:20px}
 .sec .k .hd{font-size:22px;line-height:1.45;padding-right:0}
 .lead .v,.sec .v,.close p{padding-right:0}
 .sec .v{margin-top:14px}
 .sec .v p{font-size:16px;line-height:1.75;margin-bottom:12px}
 .lead .v p{font-size:18px}
 .close{padding-top:72px}
 .close p{font-size:22px}
 .relh{padding-top:40px;padding-left:0}
}
/* ==== v17 (2026-10-19) case page 下一个案例 = option A (Koto "Next up"): hairline, 12px label + arrow row, 16:10 image,
   title 16 / subtitle 14. Fixed sizes; image <=288px wide. Desktop: hidden while reading, slides up when the page reaches
   the bottom (html.nxr + .on set by the inline script on the case page). Mobile .mnext: same look, static. Case-page classes only. ==== */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side .mini.nxc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lb ar" "im im" "tt tt";gap:0;background:none;border-radius:0;padding:12px 0 0;border-top:1px solid #2d2d2d;color:inherit}
 .side .mini.nxc .mono{grid-area:lb;position:static;align-self:center;font-size:12px;line-height:16px;letter-spacing:.04em;color:#a09f9a;white-space:nowrap}
 .side .mini.nxc .ar{grid-area:ar;position:static;justify-self:end;align-self:center;font-size:14px;line-height:16px;color:#a09f9a;transition:transform .3s var(--out),color .3s}
 .side .mini.nxc .nim{grid-area:im;display:block;margin-top:12px;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#151515}
 .side .mini.nxc .nim img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .6s var(--out)}
 .side .mini.nxc .t{grid-area:tt;margin-top:12px;padding:0;font-size:16px;line-height:1.45;font-weight:400;color:var(--fg);white-space:normal}
 .side .mini.nxc .t span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:#8a8a85}
 .side .mini.nxc .tt{font-weight:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
 .side .mini.nxc:focus-visible .nim img{transform:scale(1.04)}@media (hover:hover){.side .mini.nxc:hover .nim img{transform:scale(1.04)}}
 .side .mini.nxc:focus-visible .ar{transform:translate(2px,-2px);color:var(--fg)}@media (hover:hover){.side .mini.nxc:hover .ar{transform:translate(2px,-2px);color:var(--fg)}}
 .side .mini.nxc:focus-visible .tt{text-decoration-color:currentColor}@media (hover:hover){.side .mini.nxc:hover .tt{text-decoration-color:currentColor}}
 .side .mini.nxc{width:100%;max-width:288px;margin-bottom:clamp(8px,calc(26.67vh - 152px),12vh);transition:transform .45s var(--out),opacity .45s var(--out),visibility 0s linear 0s}
 .nxr .side .mini.nxc:not(.on){transform:translateY(64px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .45s var(--out),opacity .3s linear,visibility 0s linear .45s}
}
/* short screens: fixed smaller steps so the card never reaches the index */
@media (min-width:1024px) and (max-height:780px),(min-width:821px) and (min-height:561px) and (max-height:780px){.side .mini.nxc{max-width:216px}}
@media (min-width:1024px) and (max-height:699px),(min-width:821px) and (min-height:561px) and (max-height:699px){.side .mini.nxc{max-width:176px}}
@media (min-width:1024px) and (max-height:600px),(min-width:821px) and (min-height:561px) and (max-height:600px){.side .mini.nxc .nim{display:none}}
/* v18: when the page is at the bottom the card's top hairline sits exactly on the footer divider (main > footer border-top).
   The inline script on the case page sets --nxt = the divider's viewport y at the page end and adds .anc. */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side .mini.nxc.anc{position:absolute;left:var(--pad);top:var(--nxt);width:calc(100% - var(--pad) - 24px);margin:0}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce),(min-width:821px) and (min-height:561px) and (prefers-reduced-motion:reduce){
 .side .mini.nxc{transform:none!important;transition:opacity .3s linear,visibility 0s linear 0s!important}
 .nxr .side .mini.nxc:not(.on){transition:opacity .3s linear,visibility 0s linear .3s!important}
}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .mini.mnext{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lb ar" "im im" "tt tt";gap:0;background:none;border-radius:0;padding:12px 0 0;border-top:1px solid #2d2d2d;color:inherit}
 .mini.mnext .mono{grid-area:lb;position:static;align-self:center;font-size:12px;line-height:16px;letter-spacing:.04em;color:#a09f9a;white-space:nowrap}
 .mini.mnext .ar{grid-area:ar;position:static;justify-self:end;align-self:center;font-size:14px;line-height:16px;color:#a09f9a;transition:transform .3s var(--out),color .3s}
 .mini.mnext .nim{grid-area:im;display:block;margin-top:12px;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#151515}
 .mini.mnext .nim img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .6s var(--out)}
 .mini.mnext .t{grid-area:tt;margin-top:12px;padding:0;font-size:16px;line-height:1.45;font-weight:400;color:var(--fg);white-space:normal}
 .mini.mnext .t span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:#8a8a85}
 .mini.mnext .tt{font-weight:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
 .mini.mnext:focus-visible .nim img{transform:scale(1.04)}@media (hover:hover){.mini.mnext:hover .nim img{transform:scale(1.04)}}
 .mini.mnext:focus-visible .ar{transform:translate(2px,-2px);color:var(--fg)}@media (hover:hover){.mini.mnext:hover .ar{transform:translate(2px,-2px);color:var(--fg)}}
 .mini.mnext:focus-visible .tt{text-decoration-color:currentColor}@media (hover:hover){.mini.mnext:hover .tt{text-decoration-color:currentColor}}
 .mini.mnext{width:100%;margin-top:40px}
}
.nw{white-space:nowrap}
/* WHITE PREVIEW override — 2026-10-20 — preview only */
:root{--bg:#fff;--panel:#f5f5f3;--fg:#111;--grey:#6e6e69;--dim:#9a9a95;--body:#3a3a37;--line:#e5e5e2;--acc:#dfff00}
html,body{background:#fff;color:#111}
@media (hover:hover){.nav ul a:not(.cta):hover{color:#000}}
@media (hover:hover){.cta:hover{background:#111;color:#fff}}
.tile,.mas .tm,.rel .tm,.side .mini.nxc .nim,.mini.mnext .nim{background:#f0f0ee}
.tile .cap{background:rgba(255,255,255,.9);color:#111}
.mas .tm::after,.rel .tm::after{background:rgba(255,255,255,.72)}
footer .o,.cta-o{background:#fff;color:#111;border-color:rgba(0,0,0,.85)}
.cta-o:focus-visible{background:#111;color:#fff}@media (hover:hover){footer .o:hover,.cta-o:hover{background:#111;color:#fff}}
.pgn a,.mfil a{border-color:rgba(0,0,0,.18)}
.mfil a{color:#333}.mfil a.on{background:#111;color:#fff}
.safe{background:linear-gradient(#fff 78%,rgba(255,255,255,0))}
@media (hover:hover){.all:hover{background:#111;color:#fff}}
/* text over the dark hero video stays white */
.hero-title,.hero-title h1,.hero-title p,.hero-cap{color:#fff}
/* nav links: auto-contrast (white over video, black over white) */
.nav ul li a:not(.cta){color:#fff;mix-blend-mode:difference}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .mbar{background:rgba(255,255,255,.92)}
 /* mobile logo: difference blend (white over video, black over white) */
 .logo{mix-blend-mode:difference;filter:none}
 .logo img{filter:invert(1)}
}
/* hard-coded light greys from inline page styles */
.sec .v p,.c-desc,.how ul{color:#3a3a37!important}
.k .no,.relh,.side .mini.nxc .mono,.side .mini.nxc .ar,.mini.mnext .mono,.mini.mnext .ar{color:#6e6e69!important}
.mas .tile .cap .cc,.rel .tile .cap .cc{color:#6e6e69!important}
.lead,.sec{border-top-color:#e5e5e2!important}
.c-media{background:#f0f0ee!important}
.all{background:#f3f3f1!important;color:#111}
.hero-cap{color:#e8e8e4!important}

/* logo v12: solid colours, never blended.
   Default = logo asset as-is (#0A0A0A). Over the home hero video (html.logo-hero, set by script) = pure white + the dark-site mobile light shadow. */
.logo,.logo img{mix-blend-mode:normal!important}
.logo{filter:none!important;opacity:1}
.logo img{filter:none!important}
html.logo-hero .logo{filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 1px 3px rgba(0,0,0,.22))!important}
html.logo-hero .logo img{filter:brightness(0) invert(1)!important}

/* logo crispness v14: snap to whole device pixels (left was 31.67px from 2.2vw, width 117.83px → strokes smeared across 2 px) */
.logo{left:round(down,var(--pad),1px)}
.logo img{width:118px;height:42px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.logo img{width:95px;height:34px}}

/* logo enlarged v15 (Dagang): desktop 152x54, mobile 123x44; vertically centred on the nav/CTA line (centre y=39) */
.logo{top:12px}
.logo img{width:152px;height:54px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){.logo{top:17px}.logo img{width:123px;height:44px}}

/* nav text v16: solid colours, no blend. #111 on white; white over the home hero video (html.nav-hero, set by script) */
.nav ul li a:not(.cta){mix-blend-mode:normal!important;color:#111!important}
@media (hover:hover){.nav ul li a:not(.cta):hover{color:#111!important}}
html.nav-hero .nav ul li a:not(.cta){color:#fff!important}@media (hover:hover){html.nav-hero .nav ul li a:not(.cta):hover{color:#fff!important}}

/* CTA v17: hover/focus = #111 bg + #fff text (base .cta has color:#0a0a0a!important, so !important needed) */
.nav .cta{transition:background-color .2s ease,color .2s ease}
.nav .cta:focus-visible{background:#111!important;color:#fff!important}@media (hover:hover){.nav .cta:hover{background:#111!important;color:#fff!important}}
.nav .cta:focus-visible{outline:2px solid #111;outline-offset:2px}
html.nav-hero .nav .cta:focus-visible{outline-color:#fff}

/* v18 home case-intro '查看案例' (.w-body .more) ONLY: old-site .pagel span dot, rules 1:1 as v8 exact */
.w-body .pg-l{position:relative;display:inline-block;width:52.5px;height:52.5px;line-height:52.5px;margin-top:auto;text-align:center;border-radius:50%;isolation:isolate;vertical-align:middle;flex:none}
.w-body .pg-l::after{content:"";width:0;height:0;display:block;background:#dfff00;border-radius:50%;position:absolute;bottom:0;top:0;right:0;left:0;margin:auto;transition:all .3s;z-index:-999}
@media (hover:hover){.w-body .pg-l:hover::after{content:"";width:75px;height:75px;display:block;background:#dfff00;border-radius:50%;position:absolute;bottom:-11.625px;top:-11.625px;right:-11.625px;left:-11.625px;margin:auto;z-index:-999}}
.w-body .pg-l img{width:18.75px;height:16.5px;margin-top:18px;mix-blend-mode:multiply;vertical-align:top}
/* placement: keep the link's line height (no layout shift); underline on the text only */
.w-body .more{border-bottom:0;display:inline-flex;align-items:center}
.w-body .more .more-tx{border-bottom:1px solid currentColor}
.w-body .more .pg-l{margin:-14.75px 0 -14.75px 2px}
@media (hover:hover){.w-body .more:hover{color:#111;opacity:1}}
@media (hover:none),(pointer:coarse){.w-body .pg-l::after{display:none}}
@media (prefers-reduced-motion:reduce){.w-body .pg-l::after{transition:none}}
/* CTA v21: hover/focus text = brand yellow on #111 */
.nav .cta:focus-visible{background:#111!important;color:#dfff00!important}@media (hover:hover){.nav .cta:hover{background:#111!important;color:#dfff00!important}}
/* v21 footer menu (footer .fr 首页 link): old-site bar like .how h3 a; no color/underline change */
footer .fr a[href="/home-test-white.html"]{position:relative;isolation:isolate}
footer .fr a[href="/home-test-white.html"]:focus-visible{color:inherit;text-decoration:none}@media (hover:hover){footer .fr a[href="/home-test-white.html"]:hover{color:inherit;text-decoration:none}}
footer .fr a[href="/home-test-white.html"]::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
footer .fr a[href="/home-test-white.html"]:focus-visible::before{width:100%;transition:all .4s}@media (hover:hover){footer .fr a[href="/home-test-white.html"]:hover::before{width:100%;transition:all .4s}}
@media (prefers-reduced-motion:reduce){footer .fr a[href="/home-test-white.html"]::before{transition:none}}
/* v22 work page only (sidebar with .filt): logo-to-title gap 22px -> 44px on desktop */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side:has(>.filt){padding-top:calc(var(--top) + 22px)}}
/* v23 work page: heading removed visually (h1 kept for SEO, JS updates it); intro is first visible item */
.ttl .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.side:has(>.filt) .ttl .intro{margin-top:0}
/* v24 work page: categories reorder (no filter). Active = yellow bar held at 100% (replaces dot); hover bar only on mouse; counts removed */
.filt a,.mfil a{position:relative;isolation:isolate}
.filt a.on::before,.filt a::before,.mfil a::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
.mfil a::before{left:16px}
.filt a.on::before{width:100%;transition:all .4s}
.mfil a.on::before{width:calc(100% - 32px);transition:all .4s}
.filt a.on{color:var(--fg)}
.mfil a.on{background:transparent;color:#111;border-color:#111}
@media (hover:hover){.filt a:hover{color:var(--fg)}.filt a:hover::before{width:100%;transition:all .4s}.mfil a:hover{color:#111}.mfil a:hover::before{width:calc(100% - 32px);transition:all .4s}}
.filt a:focus-visible::before{width:100%}.mfil a:focus-visible::before{width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){.filt a::before,.mfil a::before{transition:none}}
/* v25 reorder v2: no reveal fade during reshuffle; moving cards GPU-hinted; forward-moving cards on top */
.mas.reo .tile.rv{transition:none!important;opacity:1!important}
.mas .tile.mv{will-change:transform;position:relative;z-index:1}
.mas .tile.mvf{z-index:2}

/* v26: 7 cats - chips meet 44px tap target */
.mfil a{min-height:44px}

/* v27 mobile chips: wrap (no h-scroll), no box/fill (plain text like desktop column), active = #dfff00 half bar held at 100%; 44px tap height kept invisibly. .mfil only shows <=820px so desktop untouched */
.mfil{flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important;margin-right:0!important;gap:0 18px!important;padding-bottom:10px!important}
.mfil a,.mfil a.on{flex:none;border:0!important;border-radius:0!important;background:transparent!important;padding:0 2px!important;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;font-size:15px}@media (hover:hover){.mfil a:hover{flex:none;border:0!important;border-radius:0!important;background:transparent!important;padding:0 2px!important;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;font-size:15px}}
.mfil a{color:#666}.mfil a.on{color:#111}
.mfil a::before{left:2px;top:calc(50% + .05em)}
.mfil a.on::before{width:calc(100% - 4px)}
@media (hover:hover){.mfil a:hover::before{width:calc(100% - 4px)}}
.mfil a:focus-visible::before{width:calc(100% - 4px)}

/* v28 category items black (#111) on desktop list + mobile chips; colour only */
.filt a,.filt a.on,.mfil a,.mfil a.on{color:#111}

/* v29 mobile cats: no yellow bar; selected = thin black text underline (.mfil only shows <=820px) */
.mfil a::before,.mfil a.on::before,.mfil a:focus-visible::before{display:none!important;width:0!important}@media (hover:hover){.mfil a:hover::before{display:none!important;width:0!important}}
.mfil a{text-decoration:none!important}
.mfil a.on{text-decoration:underline!important;text-decoration-color:#111!important;text-decoration-thickness:1px!important;text-underline-offset:4px!important}

/* v30 work page contact card (.wcta) = case-page 下一个案例 card grid (option A): hairline, 16px arrow row, title 16/1.45, line 14/1.5, same widths (288/216/176). No thumbnail (none in content). Desktop only; mobile keeps .side .mini hidden like the case page. */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side .mini.wcta{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lb ar" "tt tt";gap:0;align-items:start;background:none;border-radius:0;padding:12px 0 0;border-top:1px solid #2d2d2d;color:inherit;width:100%;max-width:288px;margin-bottom:clamp(8px,calc(26.67vh - 152px),12vh)}
 .side .mini.wcta .ar{grid-area:ar;position:static;justify-self:end;align-self:center;font-size:14px;line-height:16px;color:#6e6e69;transition:transform .3s var(--out),color .3s}
 .side .mini.wcta .t{grid-area:tt;margin-top:12px;padding:0;font-size:16px;line-height:1.45;font-weight:400;color:var(--fg);white-space:normal;text-wrap:pretty}
 .side .mini.wcta .t span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:#8a8a85}
 .side .mini.wcta .tt{font-weight:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
 .side .mini.wcta:focus-visible .tt{text-decoration-color:currentColor}
}
@media (min-width:1024px) and (hover:hover),(min-width:821px) and (min-height:561px) and (hover:hover){.side .mini.wcta:hover .tt{text-decoration-color:currentColor}}
@media (min-width:1024px) and (max-height:780px),(min-width:821px) and (min-height:561px) and (max-height:780px){.side .mini.wcta{max-width:216px}}
@media (min-width:1024px) and (max-height:699px),(min-width:821px) and (min-height:561px) and (max-height:699px){.side .mini.wcta{max-width:176px}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce),(min-width:821px) and (min-height:561px) and (prefers-reduced-motion:reduce){.side .mini.wcta .tt{transition:none}}

/* v31 remove top hairline from contact card (.wcta) and case 下一个案例 card (.nxc/.mnext); padding-top 0 so no empty gap. Footer divider untouched */
.side .mini.wcta,.side .mini.nxc,.mini.mnext{border-top:0!important;padding-top:0!important}

/* v32 work contact card: WeChat QR (Hangzhou) above text; 140px square, no radius; hidden on short screens (<=780px tall) so it never reaches the category list */
.side .mini.wcta .qr{display:none}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){
 .side .mini.wcta{grid-template-areas:"qr ar" "tt tt"}
 .side .mini.wcta .ar{align-self:start}
 .side .mini.wcta .qr{grid-area:qr;display:block;width:140px;height:140px;border-radius:0;object-fit:contain;background:#fff;image-rendering:auto}
}
@media (min-width:1024px) and (max-height:780px),(min-width:821px) and (min-height:561px) and (max-height:780px){.side .mini.wcta .qr{display:none}.side .mini.wcta{grid-template-areas:"lb ar" "tt tt"}.side .mini.wcta .ar{align-self:center}}

/* v33 QR 112px on 781-860px tall screens (keeps clear of category list) */
@media (min-width:1024px) and (min-height:781px) and (max-height:860px),(min-width:821px) and (min-height:561px) and (min-height:781px) and (max-height:860px){.side .mini.wcta .qr{width:112px;height:112px}}

/* v34 work contact card: arrow removed (markup + hover rules); single-column grid, no empty arrow slot */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side .mini.wcta{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"qr" "tt"!important}}
@media (min-width:1024px) and (max-height:780px),(min-width:821px) and (min-height:561px) and (max-height:780px){.side .mini.wcta{grid-template-areas:"tt"!important}.side .mini.wcta .t{margin-top:0}}

/* v35 work contact card QR = 96px at all desktop heights >780px (replaces 140/112 steps); still hidden <=780px tall */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side .mini.wcta .qr{width:96px!important;height:96px!important}}

/* v36 work contact card QR = 80px, shown on desktop heights >=700px; on 700-780px tall screens the card bottom margin is 12px (was clamp 8..~56) to clear the category list; hidden <700px (card would leave viewport) */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side .mini.wcta .qr{width:80px!important;height:80px!important}}
@media (min-width:1024px) and (min-height:700px) and (max-height:780px),(min-width:821px) and (min-height:561px) and (min-height:700px) and (max-height:780px){.side .mini.wcta .qr{display:block!important}.side .mini.wcta{grid-template-areas:"qr" "tt"!important;margin-bottom:12px!important}.side .mini.wcta .t{margin-top:12px!important}}

/* v38 work page: footer CTA block (.fcta, duplicate of left contact card) hidden on desktop only; mobile keeps it (left card hidden there) */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){footer>.fcta{display:none!important}}
@media (min-width:1024px),(min-width:821px) and (min-height:561px){footer:has(>.fcta)>.fr{margin-left:auto}}

/* ==== v40 (2026-10-20) case + work white test pages ====
   - whole file: every :hover rule now inside @media(hover:hover) (focus-visible kept outside); every (max-width:820px) query also matches short landscape (<1024 wide, <=560 tall) and every (min-width:821px) query excludes it -> short landscape = phone layout
   - footer = home footer (copyright left + nav.fm 4 items, 下划线动效, gap 42px); contact block kept above it (.fc case / .fcta work)
   - case left section nav (.idx) = work category list style; phone tap targets 44px; ICP nowrap */
footer:has(>nav.fm){flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;line-height:1.8}
footer:has(>nav.fm)>.fc,footer:has(>nav.fm)>.fcta{flex:0 0 100%;margin-bottom:40px}
footer nav.fm{display:flex;gap:42px;align-items:flex-start}
footer nav.fm a,footer .fl a{display:inline-block;padding:4px 0}
footer nav.fm a{position:relative;isolation:isolate}
footer nav.fm a:focus-visible{color:inherit;text-decoration:none}
footer nav.fm a::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
footer nav.fm a:focus-visible::before{width:100%;transition:all .4s}
@media (hover:hover){footer nav.fm a:hover{color:inherit;text-decoration:none}footer nav.fm a:hover::before{width:100%;transition:all .4s}}
@media (prefers-reduced-motion:reduce){footer nav.fm a::before{transition:none}}
footer a[href*="beian"]{white-space:nowrap}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){footer:has(>nav.fm){flex-direction:row}footer:has(>nav.fm)>.fc,footer:has(>nav.fm)>.fcta{margin-bottom:24px}footer .fl{flex:0 0 100%}}
@media (hover:none),(pointer:coarse){
 footer nav.fm a,footer .fl a{padding:10.5px 0;margin:-6.5px 0}
 footer nav.fm a{padding:10.5px 9px;margin:-6.5px -9px}
 footer nav.fm a::before{left:9px}
 footer nav.fm a:focus-visible::before{width:calc(100% - 18px)}
}
/* case left section nav = work category list: #111, current = #dfff00 bar held at 100% (no dot), hover bar only on mouse */
.idx a{color:#111;position:relative;isolation:isolate}
.idx a.on{color:#111}
.idx a::before,.idx a.on::before{content:"";position:absolute;left:0;top:50%;height:.5em;width:0%;background:#dfff00;z-index:-1;transition:all .7s;pointer-events:none}
.idx a.on::before{width:100%;transition:all .4s}
.idx a:focus-visible::before{width:100%}
@media (hover:hover){.idx a:hover{color:#111}.idx a:hover::before{width:100%;transition:all .4s}}
@media (prefers-reduced-motion:reduce){.idx a::before{transition:none}}
/* phone 目录 list: current = thin black underline (mirrors .idx a.on via inline script) */
.mtoc a.on{text-decoration:underline;text-decoration-color:#111;text-decoration-thickness:1px;text-underline-offset:4px}
/* phone tap targets >=44px, invisible (no visual change) */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 .nav .cta{position:relative}.nav .cta::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
 .bc a{position:relative;display:inline-block}.bc a::after{content:"";position:absolute;left:-10px;right:-10px;top:-16px;bottom:-16px}
 .mbar .tg{min-width:48px;padding-left:9px}
 footer .o{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
 main:has(>.rel)>footer{margin-top:56px}
}

/* v42 case page footer spacing = home (.end + footer): divider->title calc(10vh - 33px) (phone 10vh), title->button 24px, button->copyright 117px (phone 84px), copyright->bottom 24px. Scoped to footer with .fc (case only) */
footer:has(>.fc){padding-top:calc(10vh - 33px);padding-bottom:24px}
footer:has(>.fc) .fc .big{margin-bottom:24px}
footer:has(>nav.fm)>.fc{margin-bottom:101px}
@media (max-width:820px),(max-width:1023px) and (max-height:560px){footer:has(>.fc){padding-top:10vh}footer:has(>nav.fm)>.fc{margin-bottom:68px}}
/* v42 case 下一个案例 card: at page end its bottom sits on the copyright line bottom (viewport bottom - 24px, = footer bottom padding) instead of its top on the divider */
@media (min-width:1024px),(min-width:821px) and (min-height:561px){.side .mini.nxc.anc{top:auto!important;bottom:24px}}


/* v43 (2026-10-27) mobile only: mbar already has border-bottom; suppress the first
   chapter .sec border-top that sits immediately after .mbar (double hairline).
   Desktop sidebar / >=821 layout unchanged. Short-landscape matches phone layout. */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
 main > .mbar + section .sec{border-top:0!important}
}