/* Shared base for home previews */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

/* masked lines */
.line{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.line>span{display:inline-block;will-change:transform}
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.ch>span{display:inline-block;will-change:transform}

/* preloader */
.pre{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,48px);clip-path:inset(0 0 0 0)}
.pre-row{display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden}
.pre-row>*{display:block}
.pre-count{font-variant-numeric:tabular-nums;line-height:.85}
html.no-js .pre,html.is-reduced .pre{display:none}

/* top bar */
.top{position:fixed;left:0;right:0;top:0;z-index:60;transition:transform .6s cubic-bezier(.2,.7,.1,1),background-color .4s,box-shadow .4s}
.top.is-hidden{transform:translateY(-100%)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(20px,4vw,48px)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav a,.nav button{position:relative;display:inline-block;padding:6px 0}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.ul:hover::after,.ul.is-current::after{transform:scaleX(1);transform-origin:left}
.lang{border:1px solid currentColor;border-radius:99px;padding:5px 12px!important;font-size:12px;letter-spacing:.06em;opacity:.8}
.lang:hover{opacity:1}
@media (max-width:640px){.nav .hide-sm{display:none}}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:150;width:12px;height:12px;border-radius:50%;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:width .45s cubic-bezier(.2,.7,.1,1),height .45s cubic-bezier(.2,.7,.1,1),opacity .3s;opacity:0}
.cur span{font-size:12px;letter-spacing:.08em;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.1,1);white-space:nowrap}
.cur.is-on{opacity:1}
.cur.is-link{width:44px;height:44px;opacity:.25}
.cur.is-big{width:96px;height:96px;opacity:1}
.cur.is-big span{opacity:1;transform:none}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* variant switcher (preview only) */
.vs{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:180;display:flex;gap:4px;padding:5px;border-radius:99px;background:rgba(20,20,20,.86);backdrop-filter:blur(10px);font:500 12px/1 system-ui,-apple-system,"Noto Sans TC",sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.vs a{color:#bbb;padding:9px 13px;border-radius:99px;white-space:nowrap}
.vs a:hover{color:#fff}
.vs a.on{background:#fff;color:#111}
@media (max-width:420px){.vs a{padding:9px 9px}}
.br-m{display:none}
@media (max-width:640px){.br-m{display:inline}.vs{bottom:76px}}