:root{--ink:#0d110e;--ink2:#151b16;--lac:#46200f;--lac2:#2a140d;--ivory:#f0e8da;--ivory2:#cfc7b6;--metal:#bb9b63;--line:#f0e8da26;
 --body:"Hanken Grotesk","Noto Sans TC",system-ui,sans-serif;--zhb:"Noto Sans TC","Hanken Grotesk",system-ui,sans-serif;
 --disp:"Cormorant Garamond","Noto Serif SC",Georgia,serif;--zhd:"Noto Serif SC","Cormorant Garamond",serif}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.65 var(--body);color:var(--ivory);background:var(--ink);overflow-x:hidden}
html[lang=zh] body{font-family:var(--zhb);line-height:1.85}
img{display:block;max-width:100%}a{color:inherit}button{font:inherit;color:inherit}
h2{font:500 36px/1.14 var(--disp)}
html[lang=zh] h2{font:500 26px/1.4 var(--zhd);letter-spacing:.08em}
.kick{font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--metal);margin-bottom:10px}
html[lang=zh] .kick{letter-spacing:.2em;font-size:16px}
.sub{color:var(--ivory2)}

.top{position:absolute;z-index:9;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 24px}
.brand{font:500 18px/1 var(--zhd);letter-spacing:.3em;text-decoration:none}
.lang{font-size:16px;background:none;border:0;padding:10px 0;display:flex;gap:8px;cursor:pointer}
.lang .sl{opacity:.35}.lang .on-zh{opacity:.55}html[lang=zh] .lang .on-zh{opacity:1}html[lang=zh] .lang .on-en{opacity:.55}

.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#0d110ee0 0,#0d110ec8 34%,#0d110e30 56%,#0d110e00 80%,#0d110e90 100%);z-index:1}
.hero h1{position:absolute;z-index:3;top:86px;right:26px;display:flex;flex-direction:column;gap:8px;font:400 clamp(44px,12vw,68px)/1.1 var(--zhd);animation:fade 2.4s ease-out both}
.heroText{position:absolute;z-index:3;left:24px;right:92px;top:92px;animation:fade 2.4s ease-out both}
.heroText h2{font-size:42px;margin-bottom:8px}
html[lang=zh] .heroText h2{font-size:30px}
.heroText p:not(.kick){max-width:32em;color:var(--ivory)}
.quiet{display:inline-block;margin-top:16px;font-weight:500;letter-spacing:.06em;text-decoration:none;padding-bottom:5px;border-bottom:1px solid var(--metal)}
@keyframes fade{from{opacity:0}}
.haze{position:absolute;inset:-20% -30%;z-index:2;pointer-events:none;background:url(haze.webp) center/cover;mix-blend-mode:screen;opacity:.2;animation:drift 70s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-7%,3%,0) scale(1.05)}to{transform:translate3d(7%,-5%,0) scale(1.18)}}

section.plain,section.keeper,section.ask{padding:68px 24px;border-top:1px solid var(--line)}
.plain{border-top:0!important;padding-top:44px!important}
.plain h2{margin-bottom:16px}.plain p+p{margin-top:14px}
.keeper figure{margin:0 -24px 30px;overflow:hidden;background:var(--ink2)}
.keeper img{width:100%;height:auto}
.keeper h2{margin-bottom:14px}.keeper p+p{margin-top:14px}
.grades{margin-top:26px;border-top:1px solid var(--line)}
.grades div{display:grid;grid-template-columns:72px 1fr;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.grades dt{font:500 20px/1.3 var(--zhd);color:var(--metal)}
.ask{background:var(--ink2)}
.ask h2{margin-bottom:22px}
.areas{border-top:1px solid var(--line);margin-bottom:20px}
.areas button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:58px;padding:12px 2px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font-size:18px;transition:color .4s}
.areas button i{font:500 20px/1 var(--zhd);font-style:normal;color:var(--ivory2)}
.areas button:after{content:"";width:9px;height:9px;margin-left:14px;border:1px solid var(--metal);transform:rotate(45deg);transition:background .4s}
.areas button span{flex:1}
.areas button[aria-checked=true]{color:var(--metal)}.areas button[aria-checked=true] i{color:var(--metal)}
.areas button[aria-checked=true]:after{background:var(--metal)}
.btn{display:block;width:100%;max-width:440px;margin-top:22px;font-size:17px;font-weight:600;letter-spacing:.05em;color:var(--ink);background:var(--ivory);border:1px solid var(--ivory);padding:17px 18px;cursor:pointer;transition:background .5s,color .5s}
.btn:hover{background:transparent;color:var(--ivory)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--metal)}
.btn.ghost:hover{background:var(--metal);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:1px solid var(--metal);outline-offset:3px}

.stage{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:640px;background:#090c0a url(grove.jpg) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:76px 20px 26px;transition:opacity .9s}
.stage .haze{opacity:.14}
.stage:before{content:"";position:absolute;inset:0;background:linear-gradient(#090c0ad0 0,#090c0a70 40%,#090c0ae0 100%)}
.stage.out{opacity:0}
.say{position:relative;z-index:3;text-align:center;font:500 25px/1.3 var(--disp);min-height:66px;max-width:18em}
html[lang=zh] .say{font:500 22px/1.5 var(--zhd);letter-spacing:.06em}
.rig{--h:min(51vh,440px);position:relative;z-index:3;display:block;width:calc(var(--h)*.4552);height:var(--h);margin-top:calc(var(--h)*.3);flex:none;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform-origin:50% 92%;will-change:transform}
.cyl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 30px 34px #000c)}
.r,.chosen,.flying{position:absolute;display:block;background:url(stick.webp) center/100% 100% no-repeat}
.r,.chosen{left:50%;width:calc(var(--h)*.042);height:calc(var(--h)*.6);top:calc(var(--h)*.02);margin-left:calc(var(--h)*-.021);will-change:transform}
.r1{left:30%}.r2{left:68%}.r3{left:42%}
.flying{z-index:5;will-change:transform}
.tools{position:relative;z-index:3;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;min-height:30px}
.tools button{background:none;border:0;border-bottom:1px solid var(--metal);padding:2px 0 3px;font-size:16px;color:var(--ivory);cursor:pointer}

.result{position:relative;background:var(--lac2) url(lacquer.jpg) center top/cover}
.result:before{content:"";position:absolute;inset:0;background:linear-gradient(#1b0c07b8,#120805e6)}
.result>*{position:relative}
.draw{padding:84px 24px 54px;animation:rise 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.draw .meta{color:var(--metal);font-weight:500;letter-spacing:.08em}
.draw h2.grade{font:500 54px/1.15 var(--zhd);letter-spacing:.1em;margin:6px 0 2px}
.draw .gl{color:var(--ivory)}
.slip{display:grid;grid-template-columns:44px 1fr;gap:30px;margin-top:30px;align-items:stretch}
.bigstick{position:relative;width:44px;height:400px;background:url(stick.webp) center/100% 100% no-repeat;filter:drop-shadow(5px 10px 12px #0009)}
.bigstick b{position:absolute;left:0;right:0;top:40px;display:block;text-align:center;writing-mode:vertical-rl;height:320px;width:100%;font:500 20px/44px var(--zhd);letter-spacing:.14em;color:#3b2212}
.vz{writing-mode:vertical-rl;font:500 29px/1.9 var(--zhd);letter-spacing:.32em;height:400px;margin:0 auto 0 0;padding-top:30px}
.vz span{display:block}
.ve{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:19px;line-height:1.55}
.ve span{display:block}
html[lang=zh] .ve{display:none}

.wall{padding:50px 24px 64px;background:#0d110ee0;border-top:1px solid var(--line)}
.wall h2{margin-bottom:12px}
.wall .wf{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-bottom:22px}
.wall .wf img{width:96px;height:128px;object-fit:cover}
.price{margin:20px 0 0}
.price b{display:block;font:500 46px/1.1 var(--disp);color:var(--ivory)}
.small{font-size:16px;color:var(--ivory2);margin-top:12px}
.again{display:inline-block;margin-top:26px;background:none;border:0;border-bottom:1px solid var(--metal);padding:2px 0 3px;font-size:17px;cursor:pointer}

.report{--node:176px;position:relative;padding:58px 24px 60px 50px;background:var(--ink)}
.report:before{content:"";position:absolute;top:0;bottom:0;left:24px;width:1px;background:var(--metal);opacity:.55}
.report:after{content:"";position:absolute;top:0;bottom:0;left:20px;width:9px;background:repeating-linear-gradient(transparent 0 calc(var(--node) - 2px),var(--metal) calc(var(--node) - 2px) calc(var(--node) - 1px),transparent calc(var(--node) - 1px) var(--node));opacity:.75}
.report>section{padding-bottom:38px}
.report h3{font:500 25px/1.3 var(--disp);margin-bottom:8px;color:var(--ivory)}
html[lang=zh] .report h3{font:500 21px/1.5 var(--zhd);letter-spacing:.06em}
.report h3 i{font:500 18px/1 var(--zhd);font-style:normal;color:var(--metal);margin-left:8px}
html[lang=zh] .report h3 i{display:none}
.gist{font:500 25px/1.42 var(--disp);color:var(--ivory)}
html[lang=zh] .gist{font:500 21px/1.75 var(--zhd)}
.mine{border-left:0;background:linear-gradient(90deg,#46200fc0,#46200f30);margin:0 -24px 38px -10px;padding:24px 24px 26px 10px!important}
.mine .tag{font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--metal);margin-bottom:6px}
.next a{display:block;padding:15px 0;border-top:1px solid var(--line);text-decoration:none}
.next a:last-child{border-bottom:1px solid var(--line)}
.next a b{display:block;font-weight:600;color:var(--metal);margin-top:4px}
.fine{font-size:16px;color:var(--ivory2)}

@media (min-width:900px){
 .hero .bg{left:auto;right:0;width:52%;object-position:50% 80%}
 .hero:after{background:linear-gradient(90deg,var(--ink) 44%,#0d110e50 62%,#0d110e00 80%),linear-gradient(#0d110e90 0,#0d110e00 22%)}
 .hero h1{top:auto;right:auto;left:calc(50vw - 480px);bottom:300px;flex-direction:row;font-size:78px;gap:14px}
 .heroText{left:calc(50vw - 480px);right:auto;bottom:90px;max-width:440px}
 .heroText h2{font-size:52px;max-width:6.4em}
 .hero .haze{opacity:.12}
 section.plain,section.ask{padding-left:calc(50vw - 340px);padding-right:calc(50vw - 340px)}
 section.keeper{display:grid;grid-template-columns:400px 1fr;gap:56px;padding-left:calc(50vw - 480px);padding-right:calc(50vw - 480px);align-items:start}
 .keeper figure{margin:0}
 .draw{max-width:760px;margin:0 auto;padding-top:96px}
 .draw .slip{grid-template-columns:44px 1fr}
 .draw .ve{margin-top:0;border-top:0;padding-top:0;align-self:center}
 .slipwrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
 .wall{padding-left:calc(50vw - 340px);padding-right:calc(50vw - 340px)}
 .report{padding-left:calc(50vw - 300px);padding-right:calc(50vw - 340px)}
 .report:before{left:calc(50vw - 340px)}.report:after{left:calc(50vw - 344px)}
 .mine{margin-right:0;padding-right:24px!important}
}
@media (max-height:700px){.rig{--h:min(48vh,380px)}}
@media (prefers-reduced-motion:reduce){.haze{animation:none}.draw,.hero h1,.heroText{animation:none}html{scroll-behavior:auto}}