:root{color-scheme:dark;--bg:#080808;--fg:#eaeae7;--muted:#8a8a87;--line:#ffffff26;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Arial,Helvetica,"Noto Sans TC",sans-serif;--gutter:40px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;cursor:pointer;border:0;background:none}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,canvas:focus-visible{outline:1px solid var(--fg);outline-offset:6px}
button:disabled{cursor:default}
::selection{color:var(--bg);background:var(--fg)}
p,h1,h2,h3{margin:0}
img,canvas{display:block}
button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;z-index:50;padding:12px 18px;background:var(--fg);color:var(--bg);transform:translateY(-150%);font-size:13px}
.skip-link:focus{transform:none}
.site-header{height:94px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10;border-bottom:1px solid var(--line);background:var(--bg)}
.wordmark{font-size:37px;font-weight:800;line-height:1;letter-spacing:-2.5px;position:relative;padding-right:14px}
.wordmark sup{position:absolute;right:0;top:0;font-size:10px;letter-spacing:0;font-weight:400}
.wordmark-dot{color:#969693}
.header-caption,nav,.hero-topline,.hero-footer,.object-label,.scene-controls,.section-topline,.project-meta,.maintenance,.contact-links>a>span:first-child,.site-footer{font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.035em}
.header-caption{margin-left:60px;color:var(--muted);font-size:9px}
nav{display:flex;gap:42px;font-size:11px}
nav a{padding:14px 0;transition:color .2s}
nav a:hover{color:var(--muted)}
.nav-count{color:var(--muted);margin-left:5px}
nav a:last-child>span{margin-left:15px}
.hero{height:calc(100svh - 94px);min-height:680px;max-height:1080px;position:relative;isolation:isolate;overflow:clip}
.hero-topline{position:absolute;left:var(--gutter);right:var(--gutter);top:27px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;z-index:3}
.ascii-layer{position:absolute;left:16px;right:16px;top:40%;transform:translateY(-50%);height:clamp(200px,24vw,390px);z-index:0;pointer-events:none}
.ascii-layer canvas{width:100%;height:100%;opacity:.78}
.ascii-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:23vw;font-weight:900;letter-spacing:-.075em;line-height:1;color:#cfcfca}
.ascii-ready .ascii-fallback{display:none}
.object-stage{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:min(64vw,780px);height:min(70vh,650px);min-height:390px;z-index:1}
.object-canvas,.object-poster{position:absolute;inset:0;width:100%;height:100%}
.object-poster{object-fit:contain;pointer-events:none;transition:opacity .25s}
.object-canvas canvas{width:100%;height:100%;touch-action:pan-y;cursor:grab}
.object-canvas canvas.is-dragging{cursor:grabbing}
.object-stage[data-scene-state=ready] .object-poster{opacity:0}
.object-label{position:absolute;left:50%;top:76%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;font-size:8px;letter-spacing:.13em;color:#a0a09b;z-index:3;white-space:nowrap}
.live-dot{display:inline-block;width:4px;height:4px;background:currentColor;border-radius:50%;flex-shrink:0}
.scene-controls{position:absolute;left:50%;top:calc(76% + 26px);transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:5px;font-size:8px;color:var(--muted);white-space:nowrap}
.scene-controls>span{margin-right:12px}
.scene-controls>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:color .2s,border-color .2s}
.scene-controls>button:hover{color:var(--fg);border-color:#ffffff60}
.play-icon{display:none}
#toggle-rotation[aria-pressed=true] .pause-icon{display:none}
#toggle-rotation[aria-pressed=true] .play-icon{display:block}
.hero-footer{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;justify-content:space-between;align-items:end;z-index:4;font-size:9px}
.hero-signature{display:flex;flex-direction:column;gap:7px}
.hero-signature>span:first-child{font-family:var(--sans);font-size:14px;letter-spacing:.18em}
.hero-signature>span:last-child{font-size:8px;color:var(--muted);letter-spacing:.04em}
.hero-clock{text-align:right;display:flex;flex-direction:column;gap:7px}
.hero-clock>span{font-size:8px;color:var(--muted)}
.hero-clock time{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:11px;position:absolute;left:50%;transform:translateX(-50%);font-size:8px;color:var(--muted)}
.scroll-line{font-size:24px;line-height:1;color:var(--fg);transition:transform .2s}
.scroll-cue:hover .scroll-line{transform:translateY(5px)}
.hero-edge{position:absolute;bottom:111px;color:#565653;font:16px var(--mono)}
.edge-left{left:var(--gutter)}.edge-right{right:var(--gutter)}
.section-shell{padding-inline:var(--gutter)}
.work-section{padding-top:58px;padding-bottom:72px;border-top:1px solid var(--line)}
.section-topline{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}
.work-intro{position:relative;display:flex;justify-content:space-between;align-items:end;margin:64px 0 66px}
.work-intro h2{font-size:clamp(64px,10vw,150px);font-weight:500;line-height:.84;letter-spacing:-.075em}
.outline-word{-webkit-text-stroke:1px #c2c2bd;color:transparent}
.intro-arrow{font-size:clamp(80px,12vw,180px);font-weight:300;line-height:.8;margin-right:4px;color:#b8b8b2}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px 32px;align-items:start}
.project{min-width:0}
.project:nth-child(2){margin-top:170px}
.project:nth-child(3){grid-column:1/-1;width:68%;margin-top:8px}
.project-image-link{display:block;position:relative;overflow:hidden;background:#151515;aspect-ratio:1.4;border:1px solid #ffffff0c}
.project-image-link img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .7s cubic-bezier(.2,.65,.3,1),filter .7s}
.project-image-link:hover img{transform:scale(1.025);filter:grayscale(.5)}
.project-image-link:after{content:"";position:absolute;inset:0;border:1px solid #ffffff08;pointer-events:none}
.project-open{position:absolute;right:18px;bottom:18px;width:43px;height:43px;display:grid;place-items:center;font-size:23px;border-radius:50%;background:#080808;color:var(--fg);transition:background .25s,color .25s}
.project-image-link:hover .project-open{background:var(--fg);color:var(--bg)}
.project-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:9px;margin-top:20px}
.project-title{font-size:clamp(20px,2vw,28px);letter-spacing:-.035em;font-weight:400;line-height:1.4;margin-top:8px}
.project-title>a{display:flex;justify-content:space-between;align-items:center}
.project-title a:hover{color:#a1a19c}
.project-title a>span{font-family:var(--mono);font-size:20px}
.maintenance{border-top:1px solid var(--line);margin-top:70px;padding-top:23px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px}
.maintenance a{font-size:13px;color:var(--fg)}
.maintenance a>span{margin-left:30px}
.contact-section{border-top:1px solid var(--line);padding-top:43px;padding-bottom:88px}
.contact-status{display:flex;gap:8px;align-items:center}
.contact-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:10%;padding-top:65px}
.contact-heading{display:flex;align-items:end;position:relative}
.contact-heading h2{font-size:clamp(85px,14vw,210px);line-height:.8;font-weight:500;letter-spacing:-.075em}
.contact-heading h2>span{color:#7d7d77}
.contact-arrow{font-size:clamp(70px,8vw,120px);line-height:1;margin-left:30px;align-self:center;transition:transform .3s}
.contact-heading:hover .contact-arrow{transform:translate(7px,-7px)}
.contact-links{padding-bottom:5px}
.contact-links>a{display:flex;justify-content:space-between;gap:25px;align-items:center;border-top:1px solid var(--line);padding-block:23px}
.contact-links>a:last-child{border-bottom:1px solid var(--line)}
.contact-links>a>span:first-child{color:var(--muted);font-size:9px}
.contact-links>a>span:last-child{font-size:15px;letter-spacing:-.015em}
.contact-links i{font-style:normal;margin-left:17px;color:var(--muted)}
.contact-links a:hover i{color:var(--fg)}
.site-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:27px;color:var(--muted);font-size:9px}
.footer-brand{font:700 28px/1 var(--sans);letter-spacing:-2px;color:var(--fg)}
.back-top>span{margin-left:20px;color:var(--fg)}
.noscript-links{display:grid;gap:20px;margin-block:50px;font-family:var(--mono);font-size:14px}
@media(min-width:1600px){.hero{min-height:800px}.hero-topline{top:33px}.hero-footer{bottom:34px}.work-intro{margin-top:85px}.object-stage{width:850px;height:720px}}
@media(max-width:1000px){:root{--gutter:28px}.header-caption{margin-left:0;font-size:8px}nav{gap:25px}.hero{min-height:660px}.object-stage{width:80vw;height:58vh;min-height:430px}.ascii-layer{left:12px;right:12px;height:29vw}.contact-body{gap:7%;grid-template-columns:1.2fr 1fr}.contact-heading h2{font-size:16vw}.contact-arrow{font-size:8vw;margin-left:15px}.project-grid{gap:55px 25px}.project:nth-child(2){margin-top:115px}.project:nth-child(3){width:75%}}
@media(max-width:600px){:root{--gutter:20px}html{scroll-padding-top:25px}.site-header{height:78px}.wordmark{font-size:31px;letter-spacing:-2px;padding-right:12px}.wordmark sup{font-size:8px}.header-caption{display:none}nav{font-size:9px;gap:24px}.nav-count{margin-left:2px}nav a:last-child>span{margin-left:6px}.hero{height:calc(100svh - 78px);min-height:610px;max-height:950px}.hero-topline{top:22px;font-size:7px}.hero-index{font-size:7px}.ascii-layer{top:36%;height:45vw;left:8px;right:8px}.ascii-layer canvas{opacity:.74}.ascii-fallback{font-size:23vw}.object-stage{top:41%;width:100%;height:440px;min-height:0;max-height:66%}.object-label{top:70%;font-size:7px;gap:7px}.scene-controls{top:calc(70% + 23px);font-size:7px;gap:8px}.scene-controls>span{margin-right:4px}.scene-controls>button{width:38px;height:38px}.hero-footer{bottom:25px;font-size:8px}.hero-signature>span:first-child{font-size:12px}.hero-signature>span:last-child{font-size:6px;letter-spacing:0;max-width:110px}.hero-clock>span{font-size:6px;letter-spacing:0}.hero-clock time{font-size:11px}.scroll-cue{font-size:6px;gap:12px;white-space:nowrap}.scroll-line{font-size:21px}.hero-edge{bottom:105px;font-size:13px}.work-section{padding-top:32px;padding-bottom:38px}.section-topline{font-size:7px;gap:15px}.work-intro{margin:48px 0 38px}.work-intro h2{font-size:19vw;line-height:.86}.intro-arrow{font-size:23vw}.project-grid{grid-template-columns:1fr;gap:39px}.project:nth-child(2){margin-top:0}.project:nth-child(3){grid-column:auto;width:100%;margin-top:0}.project-image-link{aspect-ratio:1.25}.project-meta{font-size:8px;margin-top:16px}.project-title{font-size:23px;margin-top:8px}.project-open{right:13px;bottom:13px;width:38px;height:38px;font-size:21px}.maintenance{margin-top:40px;padding-top:20px;gap:18px;align-items:start}.maintenance>span{font-size:7px;max-width:100px}.maintenance a{font-size:11px}.maintenance a>span{margin-left:12px}.contact-section{padding-top:29px;padding-bottom:49px}.contact-status{font-size:6px;gap:5px}.contact-body{grid-template-columns:1fr;gap:43px;padding-top:46px}.contact-heading{width:max-content;max-width:100%}.contact-heading h2{font-size:29vw}.contact-arrow{font-size:20vw;margin-left:30px}.contact-links>a{padding-block:22px}.contact-links>a>span:first-child{font-size:8px}.contact-links>a>span:last-child{font-size:15px}.site-footer{padding-block:25px;gap:14px;font-size:7px}.footer-brand{font-size:24px}.back-top{font-size:7px}.back-top>span{margin-left:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:600px){.work-intro h2{font-size:18.4vw}.intro-arrow{position:absolute;right:0;bottom:0;font-size:17vw}.contact-body{grid-template-columns:minmax(0,1fr)}.contact-heading{width:100%;justify-content:space-between;gap:14px}.contact-heading h2{font-size:26vw}.contact-arrow{margin-left:0;flex-shrink:0}.contact-links{min-width:0}}