:root{--ink:#0a0d24;--ind:#10153a;--ind2:#1a2150;--ivory:#efeadf;--text:#dfdfe6;--soft:#b9c0da;--silver:#c6c9d8;--hair:rgba(198,201,216,.3);--en:"Hanken Grotesk","Noto Sans TC",system-ui,sans-serif;--disp:"Cormorant Garamond","Noto Serif TC",serif;--zh:"Noto Serif TC",serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font:400 18px/1.7 var(--en);overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[lang=zh] body{font-family:"Noto Sans TC","Hanken Grotesk",system-ui,sans-serif;line-height:1.85}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:500;color:var(--ivory);line-height:1.12}
html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3{font-family:var(--zh);font-weight:500;letter-spacing:.03em}
h2{font-size:38px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rail{position:fixed;left:13px;top:0;bottom:0;width:22px;z-index:5;pointer-events:none}
.rail i{position:absolute;left:10.5px;top:0;bottom:0;width:1px;background:var(--hair)}
#railMoon{position:absolute;left:0;top:70px;will-change:transform}
#railMoon circle{fill:var(--ink);stroke:var(--silver);stroke-width:1}
#railLit{fill:var(--silver)}
.top{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 22px 18px 46px}
.brand{font:500 21px/1 var(--zh);letter-spacing:.14em;color:var(--ivory);text-decoration:none}
.lang{background:none;border:0;color:var(--ivory);font:500 17px var(--en);cursor:pointer;padding:10px 0 10px 12px;min-height:44px}
.lang .sl{opacity:.45;margin:0 7px}.lang span{opacity:.6}
html[lang=en] .on-en,html[lang=zh] .on-zh{opacity:1;border-bottom:1px solid var(--silver)}
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:drift 40s ease-in-out infinite alternate}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,36,.45) 0,rgba(10,13,36,0) 22%,rgba(10,13,36,.2) 42%,rgba(10,13,36,.86) 66%,var(--ink) 100%)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
.heroCopy{position:relative;z-index:2;padding:0 26px 42px 48px;max-width:640px}
.kick{font-size:17px;letter-spacing:.06em;color:var(--silver);margin-bottom:8px}
.hero h1{font-size:50px;margin-bottom:12px;white-space:nowrap}
html[lang=zh] .hero h1{font-size:58px}
.lead{font-size:19px;color:var(--ivory);margin-bottom:24px}
.line{display:inline-block;color:var(--ivory);font-weight:500;text-decoration:none;border-bottom:1px solid var(--silver);padding:8px 0;min-height:44px}
.plain,.guide{padding:64px 26px 8px 48px;max-width:760px;margin:0 auto}
.plain h2,.guide h2{margin-bottom:16px}
.plain p+p,.guide p+p{margin-top:16px}
.guide{display:grid;gap:26px;padding-bottom:64px}
.guide figure{border:1px solid var(--hair);padding:6px}
.guide .kick{margin-bottom:4px}
.pick{position:relative;background:var(--ind) url(silk.jpg) center top/cover no-repeat;border-top:1px solid var(--hair)}
.pick:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,36,.55),rgba(10,13,36,.85) 500px,rgba(10,13,36,.93))}
.inner{position:relative;max-width:1120px;margin:0 auto;padding:60px 18px 0 48px}
.step{font-size:17px;letter-spacing:.06em;color:var(--silver)}
.inner>h2{margin:4px 0 10px}
.sub{color:var(--soft);max-width:600px}
.searchBar{position:sticky;top:0;z-index:4;padding:16px 0 12px;margin-bottom:4px;background:linear-gradient(180deg,rgba(10,13,36,.97) 72%,rgba(10,13,36,0))}
.find{display:block}
#q{width:100%;background:rgba(10,13,36,.8);color:var(--ivory);border:0;border-bottom:1px solid var(--silver);font:400 18px var(--en);padding:13px 4px;min-height:50px;border-radius:0;-webkit-appearance:none;appearance:none}
html[lang=zh] #q{font-family:"Noto Sans TC",sans-serif}
#q::placeholder{color:var(--soft);opacity:1}
#q:focus{outline:0;border-bottom-color:var(--ivory)}
.cats{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:18px}
.cats button{background:none;border:0;border-bottom:1px solid transparent;color:var(--soft);font:inherit;font-size:17px;padding:9px 0;cursor:pointer;min-height:44px}
.cats button[aria-pressed=true]{color:var(--ivory);border-bottom-color:var(--silver)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grp{grid-column:1/-1;padding:22px 0 6px;color:var(--silver);font-size:17px;letter-spacing:.05em;border-bottom:1px solid var(--hair);margin-bottom:6px}
.grp:first-child{padding-top:4px}
.tile{background:rgba(10,13,36,.62);border:1px solid var(--hair);color:var(--ivory);font:inherit;cursor:pointer;padding:14px 4px 12px;min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center;transition:background .35s ease,border-color .35s ease,color .35s ease}
.tile b{font:500 42px/1.1 var(--zh)}
.tile span{font-size:17px;line-height:1.25;color:var(--text);hyphens:auto}
.tile[aria-pressed=true]{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.tile[aria-pressed=true] span{color:var(--ink)}
.tile:focus-visible,.btn:focus-visible,.fbtn:focus-visible,.holdBtn:focus-visible,.cats button:focus-visible{outline:1px solid var(--ivory);outline-offset:2px}
@media(hover:hover){.tile:hover{border-color:var(--silver)}.fbtn:hover{background:rgba(198,201,216,.08)}}
.none{color:var(--ivory);padding:18px 0}
.tray{position:sticky;bottom:0;z-index:4;margin:22px -18px 0 -48px;padding:12px 18px calc(12px + env(safe-area-inset-bottom)) 48px;background:rgba(10,13,36,.97);border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:14px}
.trayText{min-width:0}
.trayText p{font-size:17px;line-height:1.35;color:var(--soft)}
.chosen{display:flex;gap:6px}
.chosen button{background:none;border:1px solid var(--silver);color:var(--ivory);font:500 22px/1 var(--zh);width:44px;height:44px;cursor:pointer;margin-bottom:6px}
.btn{background:var(--ivory);color:var(--ink);border:0;font:600 17px var(--en);padding:14px 22px;min-height:50px;cursor:pointer;flex:none;transition:opacity .3s ease}
html[lang=zh] .btn{font-family:"Noto Sans TC",sans-serif}
.btn:disabled{opacity:.42;cursor:default}
.feel{background:var(--ind);border-top:1px solid var(--hair);padding-bottom:64px}
.feels{margin-top:26px;border-top:1px solid var(--hair);display:grid}
.fbtn{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:0 12px;width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--ivory);font:inherit;text-align:left;cursor:pointer;padding:15px 6px;transition:background .3s ease}
.fbtn b{grid-row:1/3;font:500 36px/1 var(--zh)}
.fbtn span{font-weight:500}
.fbtn small{font-size:17px;color:var(--soft);line-height:1.4}
.fbtn[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.fbtn[aria-pressed=true] small{color:#2c3158}
.wake{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center;border-top:1px solid var(--hair)}
.wakeBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 38%;filter:brightness(.8)}
.mist{position:absolute;left:-20%;top:-5%;width:140%;max-width:none;height:110%;object-fit:cover;mix-blend-mode:screen;pointer-events:none}
.m1{animation:mist1 26s ease-in-out infinite alternate}
.m2{transform:scaleX(-1);animation:mist2 34s ease-in-out infinite alternate}
@keyframes mist1{from{translate:-5% 0}to{translate:6% -2%}}
@keyframes mist2{from{translate:7% 0}to{translate:-6% 2%}}
.veil{position:absolute;inset:0;background:rgba(14,18,48,.72)}
.wakeIn{position:relative;z-index:2;text-align:center;padding:0 28px 0 48px;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:26px}
.wakeHead{font-size:19px;color:var(--ivory);text-shadow:0 1px 14px rgba(10,13,36,.9)}
.glyphs{display:flex;justify-content:center;gap:26px;min-height:72px;opacity:.25}
.glyphs b{font:500 58px/1.2 var(--zh);color:var(--ivory);text-shadow:0 1px 24px rgba(10,13,36,.95)}
.holdBtn{position:relative;width:128px;height:128px;background:rgba(10,13,36,.55);border:0;border-radius:50%;color:var(--ivory);font:500 18px var(--en);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html[lang=zh] .holdBtn{font-family:"Noto Sans TC",sans-serif}
.holdBtn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring0,.ring1{fill:none;stroke-width:1.5}
.ring0{stroke:var(--hair)}.ring1{stroke:var(--ivory);stroke-dasharray:339.3;stroke-dashoffset:339.3}
.wakeHint{min-height:30px;color:var(--ivory);font-size:17px;text-shadow:0 1px 14px rgba(10,13,36,.9)}
#result{background:var(--ink)}
.read{max-width:720px;margin:0 auto;padding:56px 24px 40px 48px}
.read>h2{font-size:42px;margin:4px 0 8px}
.sym{padding:22px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:62px 1fr;gap:6px 12px;align-items:center}
.sym>div{display:contents}
.sym p{grid-column:1/-1}
.sym>b{font:500 46px/1.15 var(--zh);color:var(--ivory)}
.sym h3{font-size:29px}
.sym p+p{margin-top:6px}
.sym .woke{color:var(--soft)}
.wall{margin-top:30px;border:1px solid var(--silver);padding:28px 22px;background:var(--ind)}
.wall h3{font-size:32px;margin:2px 0 14px}
.wall ul{list-style:none;padding:0;margin:0 0 20px}
.wall li{padding:9px 0;border-top:1px solid var(--hair)}
.price{font-size:17px;color:var(--soft);margin-bottom:6px}
.price b{display:block;font:500 40px/1.2 var(--disp);color:var(--ivory)}
.wall .btn{width:100%;margin-top:14px}
.block{padding:30px 0 6px;border-top:1px solid var(--hair);margin-top:12px}
.block h3{font-size:31px;margin-bottom:12px}
.block p+p{margin-top:12px}
.today{margin:34px -24px 0 -48px;padding:36px 24px 34px 48px;background:var(--ivory);color:#1b1f42}
.today h3{color:var(--ink);font-size:33px;margin-bottom:6px}
.today ol{list-style:none;padding:0;margin:14px 0 0}
.today li{padding:13px 0;border-top:1px solid rgba(16,21,58,.25)}
.care{margin-top:26px;color:var(--soft)}
.steps{margin-top:34px;padding-top:26px;border-top:1px solid var(--silver)}
.steps h3{font-size:31px;margin-bottom:6px}
.steps a{display:block;padding:15px 0;text-decoration:none;border-top:1px solid var(--hair)}
.steps a b{display:block;font-weight:500;color:var(--ivory)}
.steps a span{color:var(--soft);font-size:17px}
.steps>p{margin-bottom:14px}
.again{margin-top:26px;background:none;border:0;border-bottom:1px solid var(--silver);color:var(--ivory);font:inherit;padding:8px 0;cursor:pointer;min-height:44px}
.foot{padding:34px 24px 34px 48px;text-align:center;font-size:17px;color:var(--soft);border-top:1px solid var(--hair)}
.foot a{display:inline-block;margin-top:10px;color:var(--ivory)}
@media(min-width:760px){
 .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
 .tile{min-height:140px}.tile b{font-size:46px}
 .feels{grid-template-columns:1fr 1fr;column-gap:32px}
 .hero h1{font-size:92px}html[lang=zh] .hero h1{font-size:80px}
 .heroCopy{padding:0 40px 64px 96px}
 h2{font-size:48px}
 .guide{grid-template-columns:320px 1fr;align-items:center;max-width:960px}
 .plain{max-width:960px}
 .inner{padding-left:72px;padding-right:32px}
 .tray{margin:22px -32px 0 -72px;padding-left:72px;padding-right:32px}
 .read{max-width:780px}
 .hero>img{object-position:50% 34%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero>img,.m1,.m2{animation:none}}