:root{--bg:#f5f1e7;--paper:#fffdf8;--ink:#171713;--muted:#706d64;--line:rgba(23,23,19,.14);--yellow:#f2e84b;--blue:#214d91;--case:#f2e84b;--shadow:0 20px 58px rgba(46,38,22,.09);--shell:min(1080px,calc(100vw - 48px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--case) 22%,transparent),transparent 27%),var(--bg);font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:80;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}.shell{width:var(--shell);margin:auto}
.nav-wrap{position:sticky;top:0;z-index:30;padding:10px 0;pointer-events:none}.nav{min-height:56px;padding:8px 10px 8px 15px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(23,23,19,.1);border-radius:999px;background:rgba(255,253,248,.88);box-shadow:0 10px 34px rgba(23,23,19,.055);backdrop-filter:blur(18px);pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:12px}.brand-mark{height:34px;padding:0 12px;display:grid;place-items:center;border-radius:10px;background:var(--ink);color:var(--yellow);font:800 10px "Avenir Next",sans-serif;letter-spacing:.08em}.back{padding:9px 13px;border:1px solid var(--ink);border-radius:999px;font-size:11px;font-weight:800;transition:.2s}.back:hover{background:var(--ink);color:white}
.hero{padding:52px 0 42px}.kicker{display:flex;align-items:center;gap:12px;color:var(--muted);font:800 10px "Avenir Next",sans-serif;letter-spacing:.15em}.kicker::before{content:"";width:28px;height:1px;background:var(--ink)}h1{max-width:880px;margin:20px 0 18px;font-size:clamp(58px,7.4vw,96px);line-height:.9;letter-spacing:-.068em}h1 small{display:block;margin-bottom:11px;color:var(--case);font:800 15px "Avenir Next",sans-serif;letter-spacing:.02em;text-shadow:1px 1px 0 var(--ink)}.lead{max-width:760px;margin:0;color:#4f4c45;font-size:clamp(17px,1.75vw,22px);line-height:1.5;font-weight:650}.flow{margin-top:28px;padding:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border:1px solid var(--line);border-radius:20px;background:rgba(255,253,248,.76);box-shadow:var(--shadow)}.flow span{min-height:58px;padding:10px 7px;display:grid;place-items:center;position:relative;border:1px solid var(--line);border-radius:11px;background:white;text-align:center;font-size:11px;font-weight:800}.flow span:not(:last-child)::after{content:"→";position:absolute;right:-12px;z-index:2}.flow span:nth-child(2),.flow span:nth-child(3){background:var(--case)}.flow span:last-child{background:var(--ink);color:white}
.block{padding:54px 0}.no{display:flex;align-items:center;gap:13px;color:var(--muted);font:800 9px "Avenir Next",sans-serif;letter-spacing:.14em}.no b{color:var(--ink)}.no::after{content:"";height:1px;flex:1;background:var(--line)}.challenge{margin-top:20px;display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.challenge-copy,.result{min-height:268px;padding:28px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,248,.76)}.challenge h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-.055em}.challenge p{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.72}.result{background:var(--ink);color:white;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.result::before{content:"";position:absolute;width:220px;aspect-ratio:1;border-radius:50%;right:-72px;top:-90px;background:var(--case);box-shadow:0 0 0 42px color-mix(in srgb,var(--case) 12%,transparent)}.result small{position:relative;color:rgba(255,255,255,.5);font:800 9px "Avenir Next",sans-serif;letter-spacing:.12em}.result strong{position:relative;max-width:430px;margin-top:12px;font-size:21px;line-height:1.42}
.scope{padding-top:22px}.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.scope-item{min-height:104px;padding:17px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,248,.76);display:flex;flex-direction:column;justify-content:space-between;transition:.22s}.scope-item:hover{transform:translateY(-4px);background:white;box-shadow:var(--shadow)}.scope-item small{color:var(--muted);font:800 8px "Avenir Next",sans-serif}.scope-item b{font-size:15px;letter-spacing:-.025em}
.next{padding:16px 0 48px}.next-card{min-height:210px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;border-radius:26px;background:var(--case);overflow:hidden;position:relative}.next-card::after{content:"↗";position:absolute;right:28px;top:0;font:800 122px/1 "Avenir Next",sans-serif;opacity:.11}.next-card small{font:800 9px "Avenir Next",sans-serif;letter-spacing:.14em}.next-card h2{max-width:650px;margin:34px 0 0;font-size:clamp(36px,4.8vw,56px);line-height:1;letter-spacing:-.055em}footer{padding:18px 0 30px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){:root{--shell:calc(100% - 24px)}.nav-wrap{padding-top:7px}.brand span:last-child{display:none}.hero{padding:42px 0 34px}h1{font-size:clamp(48px,15vw,66px)}h1 small{font-size:12px}.lead{font-size:16px}.flow{grid-template-columns:1fr;padding:11px;margin-top:22px}.flow span{min-height:45px}.flow span:not(:last-child)::after{content:"↓";right:50%;bottom:-14px;top:auto}.block{padding:46px 0}.challenge{grid-template-columns:1fr}.challenge-copy,.result{min-height:238px;padding:22px}.challenge h2{font-size:36px}.scope-grid{grid-template-columns:1fr 1fr}.scope-item{min-height:94px;padding:15px}.next-card{min-height:180px;padding:23px}.next-card h2{margin-top:38px;font-size:38px}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* AI Studio casebook layout */
:root{--shell:min(1180px,calc(100vw - 48px));--coral:#ff6c5c}.hero.casebook{padding:46px 0 26px}.eyebrow,.section-label{display:flex;align-items:center;gap:12px;color:var(--muted);font:850 10px "Avenir Next",sans-serif;letter-spacing:.15em}.eyebrow::before,.section-label::after{content:"";height:1px;background:var(--line)}.eyebrow::before{width:30px;background:var(--ink)}.section-label::after{flex:1}.hero-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr);gap:14px;align-items:stretch}.hero-copy,.hero-note{border:1px solid var(--line);border-radius:28px;overflow:hidden}.hero-copy{min-height:430px;padding:42px;background:var(--ink);color:white;position:relative;display:flex;flex-direction:column;justify-content:space-between}.hero-copy::after{content:"";position:absolute;width:280px;aspect-ratio:1;border-radius:50%;right:-100px;top:-120px;background:var(--case);box-shadow:0 0 0 54px color-mix(in srgb,var(--case) 13%,transparent)}.case-id{position:relative;z-index:1;color:var(--case);font:850 12px "Avenir Next",sans-serif;letter-spacing:.08em}.hero.casebook h1{position:relative;z-index:1;max-width:820px;margin:58px 0 0;font-size:clamp(52px,6vw,82px);line-height:.94;letter-spacing:-.065em}.hero-note{padding:28px;background:rgba(255,253,247,.8);display:flex;flex-direction:column;justify-content:space-between}.hero-note small{color:var(--muted);font:850 9px "Avenir Next",sans-serif;letter-spacing:.15em}.hero-note p{margin:36px 0 26px;font-size:22px;line-height:1.48;font-weight:750;letter-spacing:-.03em}.casebook .flow{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.casebook .flow span{min-height:43px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:white;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.casebook .flow span::after{content:"↓";position:static}.casebook .flow span:last-child{background:var(--case);color:var(--ink)}.casebook .flow span:last-child::after{content:"✓"}.overview{padding:28px 0 18px}.overview-grid{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.problem,.solution{min-height:260px;padding:28px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,247,.78)}.problem h2,.solution strong{display:block;margin:26px 0 0;max-width:500px;font-size:clamp(29px,3.2vw,44px);line-height:1.04;letter-spacing:-.052em}.problem p,.solution p{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.78}.solution{background:var(--case);position:relative;overflow:hidden}.solution::after{content:"OUTPUT";position:absolute;right:20px;bottom:-12px;color:rgba(23,23,19,.08);font:900 64px/1 "Avenir Next",sans-serif;letter-spacing:-.07em}.showcase{padding:48px 0 22px}.showcase-head{display:grid;grid-template-columns:1fr .68fr;gap:50px;align-items:end;margin:18px 0 22px}.showcase h2{margin:0;font-size:clamp(40px,5vw,66px);line-height:.96;letter-spacing:-.06em}.showcase-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.72}.feature-index{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,253,247,.72);margin-bottom:14px}.feature-index a{min-height:82px;padding:13px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;font-size:10px;font-weight:800;transition:.2s}.feature-index a:last-child{border:0}.feature-index span{color:var(--muted);font:800 9px "Avenir Next",sans-serif}.feature-index a:hover{background:var(--case)}.feature-list{display:grid;gap:14px}.feature{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);min-height:430px;border:1px solid var(--line);border-radius:26px;background:rgba(255,253,247,.82);overflow:hidden}.feature:nth-child(even){grid-template-columns:minmax(0,1.28fr) minmax(290px,.72fr)}.feature:nth-child(even) .feature-copy{order:2}.feature:nth-child(even) .visual{order:1}.feature-copy{padding:30px;display:flex;flex-direction:column}.feature-number{color:var(--muted);font:850 9px "Avenir Next",sans-serif;letter-spacing:.14em}.feature h3{margin:42px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.045em}.feature-copy>p{margin:16px 0 24px;color:var(--muted);font-size:13px;line-height:1.72}.feature dl{margin:auto 0 0;border-top:1px solid var(--line)}.feature dl div{padding:12px 0;display:grid;grid-template-columns:70px 1fr;gap:12px;border-bottom:1px solid var(--line)}.feature dt{color:var(--muted);font-size:10px}.feature dd{margin:0;font-size:11px;font-weight:750;line-height:1.55}.visual{min-width:0;padding:24px;background:color-mix(in srgb,var(--case) 24%,white);display:grid;place-items:center;position:relative}.visual::before{content:"REAL SYSTEM / 实际界面";position:absolute;left:18px;top:15px;color:var(--muted);font:850 8px "Avenir Next",sans-serif;letter-spacing:.12em;z-index:2}.visual figure{width:100%;margin:18px 0 0;padding:8px;border:1px solid var(--line);border-radius:16px;background:white;box-shadow:0 16px 36px rgba(25,24,18,.12);overflow:hidden}.visual img{width:100%;height:auto;object-fit:contain;border-radius:10px}.feature.phone .visual figure{width:min(300px,78%);padding:7px}.feature.phone .visual img{max-height:560px}.feature.report .visual figure{width:min(760px,100%)}.pager{padding:18px 0 46px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.pager a{min-height:140px;padding:23px;border:1px solid var(--line);border-radius:22px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;font-size:19px;font-weight:850;transition:.22s}.pager a small{color:var(--muted);font:800 9px "Avenir Next",sans-serif;letter-spacing:.13em}.pager a:last-child{background:var(--case)}.pager a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media(max-width:820px){.hero.casebook{padding-top:34px}.hero-grid,.overview-grid,.showcase-head{grid-template-columns:1fr}.hero-copy{min-height:370px;padding:26px}.hero.casebook h1{margin-top:68px;font-size:clamp(46px,13.4vw,66px)}.hero-note{padding:22px}.hero-note p{margin:28px 0 22px;font-size:19px}.problem,.solution{min-height:225px;padding:22px}.showcase{padding-top:42px}.showcase-head{gap:18px}.feature-index{grid-template-columns:1fr 1fr}.feature-index a{min-height:66px;border-bottom:1px solid var(--line)}.feature-index a:nth-child(2n){border-right:0}.feature{grid-template-columns:1fr!important;min-height:0}.feature:nth-child(even) .feature-copy,.feature:nth-child(even) .visual{order:initial}.feature-copy{padding:23px}.feature h3{margin-top:30px}.feature-copy>p{margin-bottom:18px}.feature dl{margin-top:10px}.visual{padding:36px 14px 18px}.feature.phone .visual figure{width:min(280px,82%)}.pager{grid-template-columns:1fr}.pager a{min-height:118px}}
.pager.single{grid-template-columns:1fr}.pager.single a{background:var(--paper)}