:root{--bg: #0b0e1a;--ink: #f4efe6;--ink-soft: #b9b4c8;--ink-faint: #8a86a0;--accent: #ffb86b;--accent-ink: #1b1206;--glass: rgba(18, 20, 36, .62);--glass-strong: rgba(12, 14, 26, .88);--line: rgba(255, 255, 255, .14);--radius: 20px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.76, 0, .24, 1);--font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--display: "Syne", "Noto Sans TC", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}a{color:var(--accent)}@media (pointer: fine){.stage,.stage button,.stage a{cursor:none}}.stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.canvas{position:absolute!important;top:0;right:0;bottom:0;left:0;touch-action:none;transition:filter 1.2s var(--ease-out),transform 1.4s var(--ease-out)}.phase-loading .canvas,.phase-intro .canvas{filter:blur(2px) brightness(.7) saturate(.9);transform:scale(1.06)}.grain{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}.split{display:inline-block;white-space:nowrap}.split__mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}.split__char{display:inline-block;transform:translate3d(0,115%,0) rotate(6deg);animation:char-in 1.1s var(--ease-out) var(--d, 0s) forwards}.reveal{opacity:0;transform:translate3d(0,22px,0);animation:reveal-in .9s var(--ease-out) var(--d, 0s) forwards}.loader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;grid-template-rows:auto 1fr auto;padding:24px;background:#07080f;clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ease-in-out)}.loader.is-leaving{clip-path:inset(0 0 100% 0)}.loader__top{display:flex;justify-content:space-between;font-family:var(--display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}.loader__bar{align-self:end;height:1px;margin-bottom:18px;background:var(--line)}.loader__bar span{display:block;height:100%;background:var(--accent);transform-origin:left}.loader__count{justify-self:end;font-family:var(--font);font-weight:900;font-size:clamp(80px,18vw,240px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:linear-gradient(180deg,#07080f8c,#07080f1a 40%,#07080fbf);transition:opacity .9s var(--ease-out) .2s}.intro__grid{position:relative;height:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;grid-template-areas:"tl tr" "title title" "side enter" "bl br";gap:16px 24px;padding:max(24px,env(safe-area-inset-top)) 32px max(24px,env(safe-area-inset-bottom))}.intro__meta{display:flex;flex-direction:column;gap:4px;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}.intro__meta--tl{grid-area:tl}.intro__meta--tr{grid-area:tr;text-align:right}.intro__meta--bl{grid-area:bl;flex-direction:row;align-items:center;gap:16px;text-transform:none;letter-spacing:.04em}.intro__meta--br{grid-area:br;text-align:right}.intro__title{grid-area:title;align-self:end;margin:0;display:flex;flex-direction:column;line-height:.92}.intro__name{font-weight:900;font-size:clamp(88px,19vw,300px);letter-spacing:.02em}.intro__en{margin-top:.15em;font-family:var(--display);font-weight:800;font-size:clamp(30px,6.4vw,104px);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px var(--ink)}.intro__side{grid-area:side;align-self:center;max-width:520px;padding-left:18px;border-left:1px solid var(--accent)}.intro__tagline{margin:0;font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.35}.intro__en-tag{margin:8px 0 0;font-family:var(--display);font-size:14px;color:var(--ink-soft)}.enter{grid-area:enter;position:relative;width:148px;height:148px;padding:0;border:0;border-radius:50%;background:none;justify-self:end}.enter__ring{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;animation:spin 14s linear infinite}.enter__ring text{font-family:var(--display);font-size:14px;font-weight:700;fill:var(--ink)}.enter__core{position:absolute;top:34px;right:34px;bottom:34px;left:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);transition:transform .5s var(--ease-out),background .3s ease}.enter:hover .enter__core{transform:scale(1.12)}.enter:hover .enter__ring{animation-duration:5s}.link{border:0;background:none;padding:4px 0;font-size:13px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}.intro.is-leaving{opacity:0;pointer-events:none}.intro.is-leaving .split__char{animation:char-out .7s var(--ease-in-out) calc(var(--d) * .35) forwards}.intro.is-leaving .reveal{animation:reveal-out .5s var(--ease-in-out) forwards}.intro.is-leaving .enter__core{transform:scale(14);transition:transform .9s var(--ease-in-out);opacity:0}.hud{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) 20px 14px;pointer-events:none;animation:drop-in .9s var(--ease-out) both}.hud>*{pointer-events:auto}.hud__brand{display:flex;align-items:baseline;gap:10px;border:0;background:none;padding:4px 0}.hud__brand strong{font-size:19px;font-weight:900;white-space:nowrap}.hud__brand span{font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}.hud__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.ghost{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);isolation:isolate;transition:color .4s var(--ease-out),border-color .4s var(--ease-out)}.ghost:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--ink);border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease-out)}.ghost:hover:not(:disabled):before{transform:translateY(0)}.ghost:hover:not(:disabled){color:var(--bg);border-color:var(--ink)}.ghost:disabled{opacity:.3;cursor:default}.ghost--strong{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.ghost--quiet{color:var(--ink-soft)}.dock{position:absolute;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:grid;justify-items:center;gap:12px;padding:0 16px;pointer-events:none}.dock__hint{margin:0;font-size:14px;color:var(--ink-soft);text-shadow:0 1px 8px rgba(0,0,0,.8);animation:reveal-in .9s var(--ease-out) .4s both}.dock__chips{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px;scrollbar-width:none;pointer-events:auto}.chip{flex:none;display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;font-size:14px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:reveal-in .8s var(--ease-out) calc(.2s + var(--d)) both;transition:border-color .3s ease,color .3s ease,transform .4s var(--ease-out)}.chip__index{font-family:var(--display);font-size:11px;color:var(--ink-faint)}.chip:hover,.chip.is-hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}.scene-label{padding:6px 12px;border-radius:999px;background:var(--glass-strong);border:1px solid rgba(255,184,107,.5);font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;animation:reveal-in .4s var(--ease-out) both}.card{position:absolute;z-index:30;display:flex;flex-direction:column;background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);box-shadow:0 30px 80px #00000080}.card--side{top:80px;right:20px;bottom:20px;width:min(440px,38vw);padding:30px 28px 20px;border-radius:var(--radius);animation:unmask-side .9s var(--ease-out) both}.card--sheet{left:0;right:0;bottom:0;max-height:58vh;padding:24px 18px max(16px,env(safe-area-inset-bottom));border-radius:var(--radius) var(--radius) 0 0;animation:unmask-sheet .8s var(--ease-out) both}.card__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;transition:transform .5s var(--ease-out),background .3s ease}.card__close span{position:absolute;top:50%;left:50%;width:14px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}.card__close span+span{transform:translate(-50%,-50%) rotate(-45deg)}.card__close:hover{transform:rotate(90deg);background:#ffffff14}.card__eyebrow{margin:0 0 10px;font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--accent)}.card__title{margin:0;font-size:clamp(26px,2.6vw,36px);font-weight:900;line-height:1.15}.card__title .split{white-space:normal}.card__subtitle{margin:8px 0 0;color:var(--ink-soft);font-size:15px}.card__body{flex:1;margin-top:20px;overflow-y:auto;padding-right:4px}.card__para{margin:0 0 12px;line-height:1.8}.card__items{list-style:none;margin:0;padding:0;display:grid}.card__item{display:grid;grid-template-columns:28px 1fr;gap:4px;padding:14px 0;border-top:1px solid var(--line)}.card__item:last-child{border-bottom:1px solid var(--line)}.card__item-index{font-family:var(--display);font-size:12px;color:var(--accent);padding-top:3px}.card__item-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}.card__item-head span{font-size:12px;color:var(--ink-faint)}.card__item p{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft)}.card__item a{display:inline-block;margin-top:6px;font-size:13px;text-decoration:none}.card__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.pill{border:1px solid rgba(255,184,107,.5);border-radius:999px;padding:8px 16px;font-size:14px;text-decoration:none;color:var(--accent);background:none;transition:background .3s ease,color .3s ease}.pill:hover{background:var(--accent);color:var(--accent-ink)}.pill--solid{background:var(--accent);color:var(--accent-ink);font-weight:700}.card__nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;z-index:100;pointer-events:none}.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center;border:1px solid rgba(244,239,230,.6);border-radius:50%;transition:width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background .3s ease,border-color .3s ease}.cursor-ring span{font-size:12px;font-weight:700;color:var(--accent-ink);opacity:0;transition:opacity .2s ease}.cursor-ring.is-ui{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--accent)}.cursor-ring.is-active{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--accent);border-color:var(--accent)}.cursor-ring.is-active span{opacity:1}.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent)}@media (pointer: coarse){.cursor-ring,.cursor-dot{display:none}}.flat{max-width:760px;margin:0 auto;padding:56px 16px 40px;overflow-y:auto;height:100%}.eyebrow{margin:0 0 12px;font-family:var(--display);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}.flat__hero h1{margin:0;font-size:clamp(40px,9vw,72px);font-weight:900}.flat__hero h1 span{font-family:var(--display);font-size:.36em;font-weight:700;letter-spacing:.1em;color:var(--ink-soft)}.flat__tagline{margin:16px 0 4px;font-size:22px;font-weight:700}.flat__role{margin:0;color:var(--ink-soft)}.flat__section{margin-top:48px}.flat__section h2{margin:0;font-size:26px;font-weight:900}.flat__footer{margin-top:48px;font-size:13px;color:var(--ink-faint)}@keyframes char-in{to{transform:translateZ(0) rotate(0)}}@keyframes char-out{0%{transform:translateZ(0)}to{transform:translate3d(0,-120%,0) rotate(-4deg)}}@keyframes reveal-in{to{opacity:1;transform:translateZ(0)}}@keyframes reveal-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-16px,0)}}@keyframes unmask-side{0%{clip-path:inset(0 0 100% 0 round var(--radius));transform:translate3d(0,30px,0)}to{clip-path:inset(0 0 0 0 round var(--radius));transform:none}}@keyframes unmask-sheet{0%{clip-path:inset(100% 0 0 0 round var(--radius) var(--radius) 0 0)}to{clip-path:inset(0 0 0 0 round var(--radius) var(--radius) 0 0)}}@keyframes drop-in{0%{opacity:0;transform:translate3d(0,-20px,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-4%)}60%{transform:translate(-3%,5%)}80%{transform:translate(5%,2%)}to{transform:translate(0)}}@media (max-width: 760px){.intro__grid{grid-template-columns:1fr;grid-template-areas:"tl" "title" "side" "enter" "bl";padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom))}.intro__meta--tr,.intro__meta--br{display:none}.intro__name{font-size:clamp(76px,26vw,140px)}.intro__en{font-size:clamp(24px,8.2vw,56px)}.enter{justify-self:start;width:124px;height:124px}.enter__core{top:28px;right:28px;bottom:28px;left:28px}.intro__meta--bl{flex-direction:column;align-items:flex-start;gap:4px}}@media (max-width: 640px){.hud{align-items:flex-start}.hud__brand span,.hud__nav .ghost--quiet{display:none}.hud__nav .ghost{padding:7px 12px;font-size:13px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}}
