:root{
  --paper:#F1ECE2;
  --text:#22283F;
  --muted:#6B6A73;
  --rule:rgba(34,40,63,.18);
  --i0:#3255A4;
  --i1:#FF48B0;
  --i2:#FFE800;
  --m0x:0px; --m0y:0px; --m1x:0px; --m1y:0px;
  --display:"Bricolage Grotesque","Noto Sans SC",system-ui,sans-serif;
  --sans:"Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --gutter:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:transparent}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,ol{margin:0;padding:0}
ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--i1);color:#fff}
:focus-visible{outline:2px solid var(--i0);outline-offset:3px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}

#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* plates：画布在下方绘制，DOM 只占位 */
.plate{position:relative;width:100%;background:transparent}
.plate img{display:none;width:100%;height:100%;object-fit:cover}
.no-gl .plate{background-size:cover;background-position:center;background-color:#e6dfd2}
.no-gl .plate img{display:block}
.plate[data-lens]{cursor:zoom-in}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:28px;padding:22px var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-dots{position:relative;width:30px;height:20px}
.brand-dots i{position:absolute;top:0;width:20px;height:20px;border-radius:50%;mix-blend-mode:multiply}
.brand-dots i:first-child{left:0;background:var(--i1)}
.brand-dots i:last-child{left:10px;background:var(--i0)}
.brand-zh{font-weight:900;font-size:19px;letter-spacing:.04em}
.brand-en{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);padding-top:3px}
.nav nav{margin-left:auto;display:flex;gap:26px;font-size:15px;font-weight:500}
.nav nav a{text-decoration:none;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--i1);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--spring)}
.nav nav a:hover::after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .5s var(--spring),box-shadow .3s}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn-ink{background:var(--i0);color:#fff;box-shadow:3px 3px 0 var(--i1)}
.btn-ink:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--i1)}
.btn-line{border:2px solid var(--text)}
.btn-line:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--i2)}
.btn-dark{background:var(--text);color:var(--paper);box-shadow:4px 4px 0 var(--i1)}
.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--i1)}

/* hero */
.hero{padding:96px var(--gutter) 40px;position:relative}
.hero-meta{display:flex;justify-content:space-between;gap:20px;color:var(--muted);border-top:2px solid var(--text);padding-top:10px}
.title{position:relative;display:block;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(64px,19.4vw,340px);line-height:.8;letter-spacing:-.045em;margin:14px 0 0 -.04em;height:.84em;white-space:nowrap;user-select:none}
.t-layer{position:absolute;left:0;top:0;mix-blend-mode:multiply;will-change:transform}
.t-p{color:var(--i1);transform:translate(var(--m1x),var(--m1y))}
.t-b{transform:translate(calc(var(--m0x) + .012em),calc(var(--m0y) + .008em))}
.t-b .ch{color:transparent;background:radial-gradient(circle at 50% 50%,var(--i0) 0 40%,transparent 46%) 0 0/.03em .03em;-webkit-background-clip:text;background-clip:text}
.t-layer .ch{display:inline-block;transform:translateY(0);transition:transform 1.1s var(--spring),opacity .4s}
.pre .t-layer .ch{transform:translateY(-.5em);opacity:0}

.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;margin-top:clamp(18px,2.4vw,36px);align-items:end}
.hero-copy{grid-column:1/span 4;padding-bottom:36px;align-self:start;padding-top:12px}
.hero-h2{font-size:clamp(26px,2.4vw,36px);font-weight:900;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.lead{margin-top:18px;font-size:17px;line-height:1.85;color:#3b3f52}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.readout{margin-top:36px;border-top:1px solid var(--rule)}
.readout div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--rule)}
.readout dt{color:var(--muted)}
.readout b{font-weight:700;color:var(--i1);display:inline-block;min-width:3.2em;text-align:right}

.sheet{grid-column:5/span 8;position:relative;padding:22px 22px 0}
.hero-plate{aspect-ratio:16/9}
.crop{position:absolute;width:18px;height:18px;pointer-events:none}
.crop::before,.crop::after{content:"";position:absolute;background:var(--text)}
.crop::before{width:14px;height:1px}.crop::after{width:1px;height:14px}
.crop.tl{left:0;top:0}.crop.tl::before{left:0;top:17px}.crop.tl::after{left:17px;top:0}
.crop.tr{right:0;top:0}.crop.tr::before{right:0;top:17px}.crop.tr::after{right:17px;top:0}
.crop.bl{left:0;bottom:30px}.crop.bl::before{left:0;bottom:17px}.crop.bl::after{left:17px;bottom:0}
.crop.br{right:0;bottom:30px}.crop.br::before{right:0;bottom:17px}.crop.br::after{right:17px;bottom:0}
.reg{position:absolute;top:calc(50% - 22px);width:16px;height:16px;border:1px solid var(--text);border-radius:50%}
.reg::before,.reg::after{content:"";position:absolute;background:var(--text)}
.reg::before{left:-5px;right:-5px;top:7px;height:1px}.reg::after{top:-5px;bottom:-5px;left:7px;width:1px}
.reg.l{left:-2px}.reg.r{right:-2px}
.colorbar{display:flex;align-items:center;gap:18px;padding:10px 0 0;color:var(--muted);font-size:11px;height:30px}
.colorbar span:last-child{margin-left:auto;color:var(--text)}
.cb{display:flex}
.cb i{width:14px;height:14px;display:block;mix-blend-mode:multiply}
.cb .ov01,.cb .ov12,.cb .ov02{position:relative;background:transparent}
.cb .ov01::before,.cb .ov01::after,.cb .ov12::before,.cb .ov12::after,.cb .ov02::before,.cb .ov02::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply}
.cb .ov01::before{background:var(--i0)}.cb .ov01::after{background:var(--i1)}
.cb .ov12::before{background:var(--i1)}.cb .ov12::after{background:var(--i2)}
.cb .ov02::before{background:var(--i0)}.cb .ov02::after{background:var(--i2)}

/* band */
.band{margin:40px 0 0;transform:rotate(-2.2deg);background:var(--i2);padding:14px 0;overflow:hidden;border-block:2px solid var(--text)}
.band-track{display:flex;gap:26px;white-space:nowrap;width:max-content;animation:marq 38s linear infinite;font-size:15px;font-weight:700;color:var(--text)}
.band-track b{color:var(--i1)}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections common */
section{position:relative}
.kicker{color:var(--i1);font-weight:700}
.h2{font-size:clamp(40px,6vw,92px);font-weight:900;letter-spacing:-.02em;line-height:1.05;margin-top:10px}
.sub{font-size:17px;line-height:1.8;color:#3b3f52;max-width:36em;margin-top:18px}
.sec-head{padding:0 var(--gutter)}
.sec-head.row{display:flex;justify-content:space-between;align-items:end;gap:40px}
.sec-head.row .sub{margin:0 0 10px}

/* process */
.process{height:560vh;margin-top:120px}
.stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr auto;gap:0 40px;padding:84px var(--gutter) 28px;overflow:hidden}
.stage-head{grid-column:1/-1;display:flex;align-items:baseline;gap:28px}
.stage-head .h2{font-size:clamp(34px,4.2vw,64px);margin:0}
.rig{position:relative;align-self:center;width:100%;max-height:100%;aspect-ratio:16/9;margin:auto 0}
.pp{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%}
.roller{position:absolute;left:-14px;right:-14px;height:10px;top:0;border-radius:6px;background:var(--text);opacity:0;box-shadow:0 6px 0 rgba(34,40,63,.12)}
.plate-labels{position:absolute;left:0;right:0;top:calc(50% + 11vw);display:flex;justify-content:space-between;opacity:0;pointer-events:none}
.plate-labels span{width:31%;display:flex;gap:8px;align-items:center;justify-content:center}
.plate-labels i{width:10px;height:10px;border-radius:50%;display:block}
.pass{position:absolute;left:0;bottom:-40px;opacity:0;font-size:14px;font-weight:700;color:var(--text)}
.frame{position:absolute;inset:-22px;pointer-events:none;opacity:0}
.frame .crop.bl,.frame .crop.br{bottom:0}
.plate-labels span{font-size:13px}
.steps{align-self:center;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--rule);opacity:.3;transition:opacity .5s,transform .7s var(--spring)}
.steps li.on{opacity:1;transform:translateX(-8px)}
.steps li>span{color:var(--i1);font-weight:700;padding-top:6px}
.steps h3{font-size:24px;font-weight:900}
.steps p{margin-top:6px;font-size:15px;line-height:1.75;color:#3b3f52}
.progress{grid-column:1/-1;height:3px;background:var(--rule);margin-top:18px}
.progress i{display:block;height:100%;width:100%;background:var(--i1);transform-origin:left;transform:scaleX(0)}

/* inks */
.inks{padding:140px 0 60px}
.ink-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px var(--gutter) 0;align-items:start}
.ink-panel{grid-column:1/span 5}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;text-align:left;padding:12px;border:2px solid var(--rule);border-radius:14px;transition:border-color .2s,transform .5s var(--spring)}
.slot i{grid-row:1/span 2;width:34px;height:34px;border-radius:50%;background:var(--c)}
.slot span{color:var(--muted);font-size:11px}
.slot b{font-size:15px;font-weight:700}
.slot.on{border-color:var(--text);transform:translateY(-3px);box-shadow:3px 3px 0 var(--text)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px}
.sw{position:relative;aspect-ratio:1;border-radius:50%;background:var(--c);transition:transform .5s var(--spring)}
.sw:hover{transform:scale(1.1) rotate(-6deg)}
.sw.used::after{content:attr(data-n);position:absolute;inset:auto 0 -2px auto;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--text);font:700 11px/16px var(--mono);text-align:center;color:var(--text)}
.sw .tip{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}
.sw:hover .tip,.sw:focus-visible .tip{opacity:1}
.presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:36px}
.presets .mono{color:var(--muted);margin-right:6px}
.presets button{padding:8px 14px;border-radius:999px;border:1.5px solid var(--text);font-size:14px;font-weight:500;transition:background .2s,color .2s}
.presets button:hover{background:var(--text);color:var(--paper)}
.venn{position:relative;height:150px;margin-top:34px}
.venn i{position:absolute;width:112px;height:112px;border-radius:50%;mix-blend-mode:multiply;top:0;transition:background .6s,transform .9s var(--spring)}
.venn .v0{left:0;background:var(--i0)}
.venn .v1{left:62px;background:var(--i1)}
.venn .v2{left:31px;top:44px;background:var(--i2)}
.venn:hover .v0{transform:translate(-10px,-4px)}.venn:hover .v1{transform:translate(10px,-4px)}.venn:hover .v2{transform:translateY(8px)}
.apply{display:inline-flex;align-items:center;gap:12px;margin-top:10px;font-size:15px;font-weight:500;cursor:pointer}
.apply input{position:absolute;opacity:0;pointer-events:none}
.switch{width:46px;height:26px;border-radius:99px;border:2px solid var(--text);position:relative;transition:background .3s}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform .5s var(--spring)}
.apply input:checked+.switch{background:var(--i2)}
.apply input:checked+.switch i{transform:translateX(20px)}
.apply input:focus-visible+.switch{outline:2px solid var(--i0);outline-offset:3px}
.ink-proof{grid-column:7/span 6;position:relative;padding:22px 22px 0}
.proof-plate{aspect-ratio:3/4;max-height:78vh}
.ink-proof .crop.bl,.ink-proof .crop.br{bottom:30px}
.ink-proof figcaption{display:flex;justify-content:space-between;height:30px;align-items:center;color:var(--muted);font-size:11px;padding-top:8px}

/* works */
.works{padding:120px 0 80px}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 24px;padding:56px var(--gutter) 0}
.work figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
.work figcaption .mono{color:var(--muted);font-size:11px}
.work figcaption b{font-size:15px;font-weight:700}
.plate.sq{aspect-ratio:1}
.plate.tall{aspect-ratio:3/4}
.w1{grid-column:1/span 5}
.w2{grid-column:7/span 3;margin-top:120px}
.w3{grid-column:10/span 3;margin-top:24px}
.w4{grid-column:2/span 4;margin-top:-40px}
.w5{grid-column:6/span 3;margin-top:80px}
.w6{grid-column:9/span 4;margin-top:-10px}

/* specs */
.specs{padding:120px 0 60px}
.spec-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px var(--gutter) 0;align-items:start}
.big-num{grid-column:1/span 5;display:flex;align-items:flex-end;gap:14px}
.num{position:relative;display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(150px,20vw,320px);line-height:.8;letter-spacing:-.06em;height:.8em;width:1.12em}
.num span{position:absolute;left:0;top:0;mix-blend-mode:multiply}
.n-b{color:transparent;background:radial-gradient(circle,var(--i0) 0 40%,transparent 46%) 0 0/.03em .03em;-webkit-background-clip:text;background-clip:text;transform:translate(var(--m0x),var(--m0y))}
.n-p{color:var(--i1);transform:translate(calc(var(--m1x) + .03em),calc(var(--m1y) - .02em))}
.num-cap{font-size:28px;font-weight:900;padding-bottom:10px}
.spec-list{grid-column:7/span 6;border-top:2px solid var(--text)}
.spec-list div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule);font-size:17px}
.spec-list dt{font-weight:900}
.spec-list dd{color:#3b3f52}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:72px var(--gutter) 0}
.price{position:relative;border-radius:22px;padding:28px 28px 30px;min-height:220px;display:flex;flex-direction:column;border:2px solid var(--text);overflow:hidden;transition:transform .6s var(--spring)}
.price:hover{transform:translateY(-6px) rotate(-.6deg)}
.price::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);mix-blend-mode:multiply;opacity:.9}
.price::after{content:"";position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;z-index:-1;
  background:radial-gradient(circle,var(--d) 34%,transparent 36%) 0 0/12px 12px;mask:radial-gradient(circle at 100% 100%,#000 20%,transparent 70%);-webkit-mask:radial-gradient(circle at 100% 100%,#000 20%,transparent 70%)}
.price{isolation:isolate}
.price.c0{--c:var(--i2);--d:var(--i1)}
.price.c1{--c:var(--i1);--d:var(--i0);color:#fff}
.price.c2{--c:var(--i0);--d:var(--i2);color:#fff}
.price h3{font-family:var(--display);font-weight:800;font-size:56px;letter-spacing:-.03em;margin-top:auto;line-height:1}
.price h3 small{font-size:22px;font-family:var(--sans);font-weight:700;letter-spacing:0}
.price.c2 h3{font-family:var(--sans);font-size:40px;font-weight:900}
.price p:last-child{margin-top:10px;font-size:15px}
.price .mono{font-size:13px;font-weight:700}

/* book */
.book{padding:120px var(--gutter)}
.book-card{position:relative;border-radius:28px;padding:clamp(40px,7vw,110px);background:var(--i2);border:2px solid var(--text);overflow:hidden;isolation:isolate}
.book-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,var(--i1) 36%,transparent 38%) 0 0/14px 14px;
  -webkit-mask:linear-gradient(115deg,transparent 45%,#000 100%);mask:linear-gradient(115deg,transparent 45%,#000 100%);mix-blend-mode:multiply}
.book-h{font-size:clamp(56px,10vw,160px);font-weight:900;letter-spacing:-.03em;line-height:1}
.book-p{font-size:clamp(17px,1.5vw,22px);margin-top:22px;max-width:30em;line-height:1.7}
.book .hours{color:var(--text)}

/* footer */
.foot{padding:0 var(--gutter) 28px}
.foot-plate{aspect-ratio:1000/190}
.foot-row{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:2px solid var(--text);color:var(--muted)}
.foot-row a{text-decoration:none;color:var(--text)}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s,transform 1.2s var(--spring)}
.rv.in{opacity:1;transform:none}

@media (max-width: 1080px){
  .hero-copy{grid-column:1/-1;order:2;padding-top:28px}
  .sheet{grid-column:1/-1}
  .stage{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;padding-top:72px}
  .rig{align-self:start;margin-top:20px}
  .steps{align-self:start;margin-top:24px;position:relative;min-height:150px}
  .steps li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(12px);border-top:0;padding-top:0}
  .steps li.on{opacity:1;transform:none}
  .pass{display:none}
  .ink-panel,.ink-proof{grid-column:1/-1}
  .ink-proof{order:-1}
  .proof-plate{max-height:none}
  .big-num,.spec-list{grid-column:1/-1}
  .price-grid{grid-template-columns:1fr}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:36px 16px}
  .work{grid-column:auto!important;margin-top:0!important}
  .w1,.w4,.w6{grid-column:1/-1!important}
  .sec-head.row{flex-direction:column;align-items:flex-start;gap:0}
  .sec-head.row .sub{margin-top:14px}
}
@media (max-width: 640px){
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .brand-en{display:none}
  .hero{padding-top:84px}
  .hero-meta span:nth-child(2){display:none}
  .sheet{padding:14px 14px 0}
  .hide-s{display:none}
  .colorbar{gap:10px}
  .readout div{font-size:11px}
  .swatches{grid-template-columns:repeat(4,1fr)}
  .slot{grid-template-columns:1fr;justify-items:start;padding:10px}
  .slot i{grid-row:auto;width:24px;height:24px}
  .slot b{font-size:13px}
  .work-grid{grid-template-columns:1fr}
  .spec-list div{grid-template-columns:72px 1fr;font-size:15px}
  .plate-labels{top:auto;bottom:-26px;font-size:10px}
  .foot-row{flex-direction:column;gap:6px}
  .process{height:480vh}
}
@media (prefers-reduced-motion: reduce){
  .band-track{animation:none}
  .rv{opacity:1;transform:none}
}