:root{color-scheme:dark;--white:#fff;--ink:#17120f;--cycle:34s}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--ink);font-family:"Noto Sans TC","Source Han Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
body{overflow:hidden}
.hero{position:relative;width:100vw;height:100svh;min-height:520px;overflow:hidden;background:#17120f}
.visual-plane{position:absolute;left:50%;top:50%;width:max(100vw,177.6833svh);height:max(100svh,56.2799vw);transform:translate(-50%,-50%);overflow:hidden}
#day-cycle{position:absolute;inset:0;width:100%;height:100%}
#day-cycle{display:block;object-fit:fill}
.loading-image{position:absolute;inset:0;background:#17120f;z-index:4;opacity:1;transition:opacity .8s ease;pointer-events:none}
.ready .loading-image{opacity:0}

.ui-shade{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,rgba(0,0,0,.20),transparent 25%,transparent 61%,rgba(0,0,0,.31));pointer-events:none}
header{position:absolute;z-index:10;top:0;left:0;right:0;padding:32px 48px;display:flex;align-items:flex-start;justify-content:flex-end}
.brand{display:flex;width:max-content;margin:0 0 20px;flex-direction:column;align-items:center;color:#fff;text-decoration:none}.brand img{display:block;width:72px;height:auto;filter:drop-shadow(0 2px 9px rgba(0,0,0,.36))}.brand span{display:block;margin-top:10px;font-family:Georgia,"Times New Roman",serif;font-size:.72rem;font-weight:700;line-height:1;letter-spacing:.32em;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.75)}
nav{display:flex;gap:34px;padding-top:10px}
nav a{position:relative;color:var(--white);font-size:.78rem;letter-spacing:.16em;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.62)}
nav a::after{content:"";position:absolute;left:0;right:.16em;bottom:-8px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.menu-button{display:none}
.copy{position:absolute;z-index:10;left:50px;bottom:54px;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.copy h1{margin:0;font-family:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;font-size:clamp(2rem,3.1vw,3.25rem);line-height:1.36;font-weight:500;letter-spacing:.075em;text-shadow:0 2px 14px rgba(0,0,0,.58)}
.progress{position:absolute;z-index:10;left:50px;right:50px;bottom:22px;height:1px;background:rgba(255,255,255,.22);overflow:hidden}
.progress span{display:block;width:100%;height:100%;background:rgba(255,255,255,.82);transform:scaleX(0);transform-origin:left}

@media(max-width:760px){
  header{padding:22px 24px}.brand{margin-bottom:16px}.brand img{width:64px}.brand span{font-size:.64rem;letter-spacing:.28em}.copy{left:25px;bottom:42px}.copy h1{font-size:clamp(1.85rem,8.2vw,2.8rem);line-height:1.4}.progress{left:25px;right:25px;bottom:20px}
  .menu-button{display:flex;position:relative;width:42px;height:42px;border:0;background:transparent;padding:10px;flex-direction:column;justify-content:center;gap:7px;z-index:12}
  .menu-button span{display:block;width:22px;height:1px;background:#fff;transition:transform .3s ease}
  nav{position:fixed;inset:0;background:rgba(18,14,12,.94);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
  nav.open{opacity:1;visibility:visible}nav a{font-size:1rem}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
}