:root{color-scheme:dark;--cyan:#99ffe0;--muted:#788d9b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#05080e;color:#eff8fc;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}body{height:100svh;min-height:720px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}button{background:none;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button:hover,a:hover{color:var(--cyan)}[hidden]{display:none!important}#universe{position:absolute;inset:0;background:radial-gradient(ellipse at 62% 49%,#09373255,transparent 49%),radial-gradient(ellipse at 90% 45%,#29155155,transparent 50%)}#universe canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#05080ee8 0%,#05080e99 24%,transparent 55%),linear-gradient(0deg,#05080e 0%,transparent 27%,transparent 84%,#05080ecc 100%)}header{height:104px;position:absolute;top:0;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #9dc9e21a;z-index:5;gap:25px}.brand{background:#fff;border-radius:3px;padding:7px 9px;display:block;flex-shrink:0}.logo-crop{display:block;width:130px;aspect-ratio:3.2;overflow:hidden;position:relative}.logo-crop img{position:absolute;width:157.54%;height:auto;left:-28.77%;top:-126.5%}nav{display:flex;gap:34px}nav button{font-size:14px;padding:12px 0;color:#9dafba;position:relative}nav button.nav-active{color:#f4ffff}nav button.nav-active:after{content:"";position:absolute;bottom:0;left:0;width:20px;height:2px;background:var(--cyan)}nav sup{font:9px monospace;color:var(--cyan);margin-left:4px}.contact{font-size:13px;letter-spacing:1px}.contact span{margin-left:20px;color:var(--cyan)}main{position:absolute;inset:104px 4% 195px;pointer-events:none}.intro,.selection{position:absolute;left:0;top:50%;transform:translateY(-49%);width:480px;pointer-events:auto}.eyebrow{font:10px/1.6 ui-monospace,monospace;letter-spacing:2px;color:#a7c3cd;display:flex;align-items:center;gap:10px}.eyebrow i{display:block;width:6px;height:6px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);border-radius:50%}h1{font-size:clamp(48px,5.4vw,82px);font-weight:550;letter-spacing:-4px;line-height:1.23;margin:27px 0 21px}h1 span{color:var(--cyan);text-shadow:0 0 35px #72ffc633}.intro p,.selection p{font-size:16px;color:#9fb1bc;line-height:1.8;margin:0 0 32px}.explore{display:inline-flex;align-items:center;gap:46px;border:1px solid #78c8b780;background:linear-gradient(120deg,#a3ffe416,#73cfd805);padding:16px 23px;font-size:14px;backdrop-filter:blur(10px);transition:background .2s}.explore:hover{background:#7fffd425}.explore span{font-size:20px;color:var(--cyan)}.intro-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:43px;max-width:300px;font:8px monospace;letter-spacing:1.5px;color:#637f8c}.intro-meta span:last-child{flex-basis:100%}.coordinate{position:absolute;right:0;top:36%;display:flex;align-items:center;gap:17px;writing-mode:vertical-rl;font:9px/1.6 monospace;letter-spacing:2px;color:#66838e}.coordinate i{height:60px;width:1px;background:#5e82935c}.coordinate>span:first-child{color:#c5dce6}.scene-caption{position:absolute;left:55%;bottom:80px;font:8px monospace;letter-spacing:2px;color:#84b8ba;display:flex;align-items:center;gap:15px}.caption-line{width:30px;height:1px;background:#84b8ba}.scene-controls{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:12px;pointer-events:auto}.scene-controls button{border:1px solid #97c6d42b;border-radius:50%;width:32px;height:32px;color:#a7c5ca}.scene-controls span{font-size:11px;color:#7798a6;margin-left:8px}.scene-status{position:absolute;bottom:4px;left:0;font:11px monospace;color:#849ba7;max-width:40%;line-height:1.6}.scene-status.ready{font-size:9px;letter-spacing:1.8px;color:#587a87}.selection{width:365px}.selection h1{font-size:46px;line-height:1.35;letter-spacing:-1.8px;margin:20px 0}.selection .back{font-size:12px;color:#a0b5bf;margin-bottom:25px;padding:0}.selection p{font-size:15px;margin-bottom:19px;max-width:330px}.selection small{display:block;margin-top:21px;color:#69838d;font-size:11px}.selection .explore{margin-top:24px}.selection #project-tech{font:11px/1.8 monospace;color:#8adfc9}.selection .eyebrow{color:var(--cyan)}footer{position:absolute;bottom:0;left:4%;right:4%;height:175px;z-index:5}.dock-heading{display:flex;justify-content:space-between;font-size:11px;color:#9cb2bc;margin-bottom:16px}.dock-heading>span:last-child{font:9px monospace;letter-spacing:2px;color:#668592}.dock-heading i{font-style:normal;color:var(--cyan);margin-left:12px}.device-dock{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #92c6db33;background:#0a141bc9;backdrop-filter:blur(18px)}.device-dock button{height:87px;position:relative;display:grid;grid-template-columns:35px 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:9px;padding:20px 18px;text-align:left;border-right:1px solid #92c6db22;transition:background .2s}.device-dock button:last-child{border:0}.device-dock button:hover,.device-dock button[aria-pressed=true]{background:linear-gradient(125deg,#89ffdc24,#73c8d905)}.device-dock button[aria-pressed=true]:before{content:"";height:2px;background:var(--cyan);position:absolute;top:-1px;left:0;right:0;box-shadow:0 0 14px #83ffdd88}.device-glyph{font:30px monospace;color:#9ad9d1;grid-row:1/3}.device-dock b{font:10px monospace;letter-spacing:1.3px;color:#e6f6fc;align-self:end}.device-dock small{font-size:11px;color:#7595a2;align-self:start;margin-top:5px}.device-dock em{position:absolute;top:8px;right:9px;font:8px monospace;color:#4b6978}.bottom-line{display:flex;justify-content:space-between;margin-top:19px;font:8px monospace;letter-spacing:1.4px;color:#526b78}dialog{background:linear-gradient(135deg,#13272d,#09121e);border:1px solid #87c6c566;color:#e8f6fd;padding:48px;width:min(530px,calc(100% - 36px));box-shadow:0 0 100px #3bdfc51c;max-height:85svh;overflow:auto}dialog::backdrop{background:#02080dc9;backdrop-filter:blur(13px)}.close-dialog{position:absolute;right:16px;top:10px;font-size:30px;color:#9dbac6}dialog h2{font-size:31px;line-height:1.4;margin:20px 0}dialog p{color:#9db5c0;line-height:1.85;font-size:15px}#dialog-content{display:grid;gap:0;margin:24px 0}.deliverable{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #89c4d322;padding:15px 0;font-size:14px;gap:20px}.deliverable span{color:#76d8c3;font:11px monospace}.dialog-link{font-size:14px;color:var(--cyan);display:inline-block;margin-top:16px}.no-script{position:fixed;z-index:20;inset:30%;background:#142630;padding:25px;line-height:2}.no-script a{display:block;color:var(--cyan)}@media(min-width:1600px){header{height:120px}main{top:120px;bottom:225px}.intro{width:570px}.intro h1{font-size:94px}footer{height:195px}.device-dock button{height:100px}}@media(max-width:1100px){.intro{width:400px}.intro h1{font-size:61px}.device-dock button{padding:18px 12px;grid-template-columns:25px 1fr;gap:5px}.device-glyph{font-size:24px}.device-dock b{font-size:9px;letter-spacing:.5px}.selection{width:320px}.selection h1{font-size:38px}.scene-caption{left:53%;font-size:7px}.intro-meta{margin-top:30px}}@media(max-width:760px){body{min-height:760px}header{height:88px;gap:12px}.logo-crop{width:105px}nav{gap:18px}nav button{font-size:12px}.contact{font-size:12px}.contact span{margin-left:7px}main{inset:88px 5% 227px}.intro{top:30px;transform:none;width:90%;pointer-events:none}.intro h1{font-size:46px;letter-spacing:-2px;margin:18px 0 10px}.intro p{font-size:13px;margin-bottom:18px}.intro .explore{pointer-events:auto;padding:11px 15px;font-size:12px;gap:24px}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro-meta{display:none}.vignette{background:linear-gradient(180deg,#05080e88,transparent 52%,#05080e 85%),linear-gradient(90deg,#05080e88,transparent 80%)}footer{height:208px;left:5%;right:5%}.device-dock{grid-template-columns:repeat(7,1fr);overflow:auto}.device-dock button{height:96px;padding:18px 8px;display:flex;flex-direction:column;gap:5px;min-width:70px;text-align:center}.device-dock small{font-size:10px;white-space:nowrap;align-self:center;margin:0}.device-dock b{align-self:center;font-size:8px}.device-glyph{font-size:22px}.device-dock em{font-size:7px;top:5px;right:5px}.dock-heading{font-size:11px;line-height:1.8;margin-bottom:13px}.dock-heading>span:last-child{display:none}.bottom-line{font-size:7px;letter-spacing:.4px;margin-top:18px}.scene-controls{bottom:0}.scene-controls span{font-size:10px}.scene-caption{display:none}.scene-status{font-size:10px;bottom:7px;max-width:40%}.scene-status.ready{font-size:7px;letter-spacing:1px}.coordinate{top:48%;font-size:7px}.selection{top:24px;transform:none;width:95%;pointer-events:none}.selection .back,.selection .explore{pointer-events:auto}.selection .back{margin-bottom:16px}.selection h1{font-size:32px;max-width:290px;margin:13px 0 11px}.selection p{font-size:13px;max-width:300px;margin-bottom:8px}.selection #project-tech{font-size:9px}.selection .explore{margin-top:14px;padding:10px 15px;gap:24px;font-size:12px}.selection small{margin-top:12px;font-size:9px}dialog{padding:36px 25px}dialog h2{font-size:27px}}@media(max-width:480px){header{left:5%;right:5%}.logo-crop{width:94px}.brand{padding:5px 7px}nav{gap:14px}.contact{display:none}nav button{font-size:11px}.intro h1{font-size:43px}.device-dock{grid-template-columns:repeat(4,1fr)}.device-dock button{height:61px;min-width:0;display:grid;grid-template-columns:21px 1fr;grid-template-rows:1fr 1fr;padding:12px 9px;gap:2px 5px;text-align:left;border-bottom:1px solid #92c6db22}.device-dock button:nth-child(4){border-right:0}.device-dock button:last-child{grid-column:3/5;border:0}.device-dock button:nth-child(n+5){border-bottom:0}.device-dock b{align-self:end;font-size:8px}.device-dock small{align-self:start;font-size:9px}.device-glyph{font-size:22px}.device-dock em{font-size:6px}.bottom-line{margin-top:13px}.coordinate{right:-2%;top:55%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:720px) and (min-width:761px){body{height:720px;overflow:auto}}
body{position:relative}@media(max-height:760px){body{overflow-y:auto}}.scene-controls button:disabled{opacity:.35;cursor:default}
/* Eight categories: keep complete labels and balanced four-column touch controls. */
.device-dock{grid-template-columns:repeat(8,minmax(0,1fr))}.device-dock button{padding-left:12px;padding-right:10px;grid-template-columns:26px 1fr;column-gap:7px}.device-dock b{font-size:9px;letter-spacing:.7px}.device-dock small{font-size:11px}.device-glyph{font-size:26px}
@media(min-width:761px) and (max-width:1100px){.device-dock button{grid-template-columns:1fr;padding:14px 8px;gap:4px}.device-glyph{display:none}.device-dock b{font-size:9px}.device-dock small{font-size:10px}}
@media(max-width:760px){.device-dock{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}.device-dock button{height:61px;min-width:0;display:grid;grid-template-columns:21px 1fr;grid-template-rows:1fr 1fr;padding:12px 9px;gap:2px 5px;text-align:left;border-right:1px solid #92c6db22;border-bottom:1px solid #92c6db22}.device-dock button:nth-child(4n){border-right:0}.device-dock button:last-child{grid-column:auto}.device-dock button:nth-child(n+5){border-bottom:0}.device-dock b{align-self:end;font-size:8px;letter-spacing:.2px}.device-dock small{align-self:start;font-size:9px}.device-glyph{font-size:22px}.device-dock em{font-size:6px}}
/* Light studio: saturated toy models, soft daylight, ink-colored controls. */
:root{color-scheme:light;--cyan:#6650dc;--muted:#62748c}html,body{background:#f4f7fc;color:#203049}#universe{background:radial-gradient(ellipse at 64% 48%,#d9e4ff88,transparent 53%),radial-gradient(ellipse at 90% 28%,#eee2ff77,transparent 43%),linear-gradient(145deg,#fff,#f0f5fb)}.vignette{background:linear-gradient(90deg,#f8faffee 0%,#f8faff88 23%,transparent 55%),linear-gradient(0deg,#f4f7fc 0%,transparent 27%,transparent 87%,#f8faffaa 100%)}header{border-color:#cad5e280}.brand{background:white;box-shadow:0 3px 18px #5b729a0a}nav button{color:#647189}nav button.nav-active{color:#283b55}nav button.nav-active:after{background:#7862e9}.contact{color:#33455c}.eyebrow{color:#64758e}.eyebrow i{background:#7c60ed;box-shadow:0 0 10px #a18aef55}h1{color:#24334d}h1 span{color:#7656e6;text-shadow:none}.intro p,.selection p{color:#687991}.explore{border-color:#b8a8ef;background:linear-gradient(115deg,#eee8ffcc,#ffffffa6);color:#5841ae;box-shadow:0 8px 24px #7963b80b}.explore:hover{background:#e6ddff;color:#50359f}.explore span{color:#7555da}.intro-meta{color:#8290a5}.coordinate{color:#8592a8}.coordinate i{background:#a8b8cc}.coordinate>span:first-child{color:#5d7291}.scene-caption{color:#758aa7}.caption-line{background:#9aacc3}.scene-controls button{border-color:#cbd6e4;background:#ffffff99;color:#596b84}.scene-controls span{color:#728199}.scene-status{color:#596e89}.scene-status.ready{color:#8494aa}.selection .back{color:#6b7c96}.selection small{color:#8693a7}.selection #project-tech{color:#6653a8}.selection .eyebrow{color:#765ccc}.dock-heading{color:#60748d}.dock-heading>span:last-child{color:#8a99b0}.device-dock{border-color:#cdd7e5;background:#ffffffbd;box-shadow:0 12px 38px #6c84a80b}.device-dock button{border-color:#d4deea}.device-dock button:hover,.device-dock button[aria-pressed=true]{background:linear-gradient(125deg,#e6ddffcc,#f4f0ff88)}.device-dock button[aria-pressed=true]:before{background:#8a68e8;box-shadow:0 0 12px #8d69e844}.device-glyph{color:#8165d3}.device-dock b{color:#344560}.device-dock small{color:#75849b}.device-dock em{color:#a3b0c2}.bottom-line{color:#91a0b6}dialog{background:linear-gradient(135deg,#fff,#f1f0ff);border-color:#d4c9ef;color:#2c3d59;box-shadow:0 30px 110px #5b6d9840}dialog::backdrop{background:#dbe3f1a8;backdrop-filter:blur(13px)}.close-dialog{color:#7c8ba2}dialog p{color:#6d7d94}.deliverable{border-color:#dae0ec}.deliverable span{color:#8864df}.dialog-link{color:#7553cc}.no-script{background:#fff;color:#344560}.no-script a{color:#7553cc}@media(max-width:760px){.vignette{background:linear-gradient(180deg,#f8faffbb,transparent 52%,#f4f7fc 88%),linear-gradient(90deg,#f8faff88,transparent 80%)}.device-dock button{border-color:#d4deea}}
.contact-dialog{text-align:center;width:min(440px,calc(100% - 28px));padding:30px 24px 24px;background:#fff}.contact-dialog .eyebrow{justify-content:center;font-size:9px}.contact-dialog h2{font-size:24px;margin:14px 0 10px}.contact-qr{display:block;width:min(100%,340px);height:auto;max-height:58svh;object-fit:contain;margin:0 auto}.contact-dialog .dialog-link{margin-top:12px;font-size:13px}@media(max-width:480px){header{height:116px;flex-wrap:wrap;align-content:center;gap:10px 16px}header .contact{display:block;margin-left:auto;font-size:12px;padding:8px 0}header nav{order:3;flex-basis:100%;justify-content:space-between}header nav button{padding:7px 0}main{top:116px}.contact-dialog h2{font-size:21px}.contact-dialog{padding:28px 16px 20px}}
#case-section{border-top:1px solid #d4c9ef;padding-top:18px;margin:8px 0 18px}#case-heading{font-size:15px;font-weight:600;margin:0 0 12px;color:#354560}#case-list{display:grid;gap:9px}.case-link{display:block;padding:12px 14px;border:1px solid #dcd4ef;border-radius:5px;background:#ffffffa6;color:#6d4fc2;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.case-link:hover{background:#eee8ff;color:#513498}.selection #project-tech{max-width:350px;line-height:1.9}.scene-caption{letter-spacing:1px}
.device-dock{grid-template-columns:repeat(9,minmax(0,1fr))}@media(min-width:761px) and (max-width:1250px){.device-dock button{grid-template-columns:1fr;padding:16px 8px;gap:5px}.device-glyph{display:none}.device-dock b{font-size:9px;letter-spacing:.3px}.device-dock small{font-size:10px}}@media(max-width:760px){body{min-height:840px}footer{height:270px}main{bottom:289px}.device-dock{grid-template-columns:repeat(3,minmax(0,1fr))}.device-dock button{border-right:1px solid #d4deea!important;border-bottom:1px solid #d4deea!important}.device-dock button:nth-child(3n){border-right:0!important}.device-dock button:nth-child(n+7){border-bottom:0!important}.device-glyph{display:block}}
/* Transparent vector identity, preserving the supplied logo outlines. */
header .brand{background:transparent;box-shadow:none;border-radius:0;padding:0}header .logo-crop{aspect-ratio:auto;overflow:visible}header .logo-crop img{position:static;display:block;width:100%;height:auto;left:auto;top:auto}
/* Scrollable project timeline below the self-contained 3D stage. */
html{scroll-behavior:smooth}body{height:auto;min-height:0;overflow-x:hidden;overflow-y:auto}.spatial-stage{height:100svh;min-height:720px;position:relative;overflow:hidden}.timeline-nav{font-size:14px;color:#647189;padding:12px 0}.timeline-nav:hover{color:#7656e6}.project-timeline{position:relative;padding:76px max(5%,calc((100% - 1280px)/2)) 100px;background:linear-gradient(155deg,#fff,#f4f3fd);border-top:1px solid #dce3ef;scroll-margin-top:24px;min-height:530px}.timeline-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}.timeline-heading h2{font-size:36px;line-height:1.4;letter-spacing:-1px;margin:16px 0 0}.timeline-heading>p{font:13px monospace;color:#7b899d;white-space:nowrap}.timeline-filters{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 44px}.timeline-filters button{padding:10px 15px;border:1px solid #dce1ed;border-radius:22px;background:#ffffffbb;font-size:13px;color:#64738b;transition:background .2s}.timeline-filters button[aria-pressed=true]{background:#7656d9;border-color:#7656d9;color:#fff}.timeline-filters button:hover{border-color:#a28bda}.timeline-entries{display:grid;gap:24px}.timeline-entry{display:grid;grid-template-columns:128px 24px 1fr;gap:20px;position:relative}.timeline-date{font:12px/1.8 monospace;color:#8793a6;padding-top:28px}.timeline-marker{position:relative}.timeline-marker:before{content:'';position:absolute;top:30px;left:6px;width:9px;height:9px;border:3px solid #e1d5fc;background:#8c66dc;border-radius:50%;z-index:1}.timeline-marker:after{content:'';position:absolute;top:0;bottom:-24px;left:13px;width:1px;background:#ded7ed}.timeline-entry:last-child .timeline-marker:after{bottom:0}.timeline-card{display:flex;gap:30px;align-items:center;padding:24px;border:1px solid #e1deed;background:#fff;border-radius:14px;box-shadow:0 10px 35px #77698c07;transition:transform .2s,border-color .2s;min-width:0}.timeline-card:hover{transform:translateY(-3px);border-color:#b9a3e6}.timeline-art{display:grid;place-items:center;flex:0 0 155px;align-self:stretch;min-height:145px;border-radius:11px;background:radial-gradient(circle at 65% 22%,#ffdfa7,transparent 55%),linear-gradient(140deg,#dbd4ff,#f3e7fd);color:#8960cb;font:80px monospace;text-shadow:0 6px #bfa5dc88}.timeline-art[data-kind=game]{color:#9460d3}.timeline-card-body{min-width:0}.timeline-type{display:inline-block;font-size:12px;color:#8364b7;background:#f4effb;padding:5px 10px;border-radius:5px}.timeline-card h3{font-size:25px;line-height:1.4;color:#354560;margin:13px 0;overflow-wrap:anywhere}.timeline-card p{color:#7b889d;font-size:14px;line-height:1.8;overflow-wrap:anywhere}.timeline-visit{display:block;font-size:13px;color:#8561c7;margin-top:20px}.timeline-empty{padding:40px 25px;background:#fff;border:1px dashed #d9d0e9;border-radius:10px;color:#7b899e;font-size:15px;text-align:center}.timeline-empty button{color:#7954c7;margin-left:15px}@media(max-width:760px){.spatial-stage{min-height:840px}.timeline-nav{font-size:12px}.project-timeline{padding:45px 5% 64px}.timeline-heading h2{font-size:27px}.timeline-filters{gap:8px;margin-bottom:30px}.timeline-filters button{font-size:12px;padding:9px 12px}.timeline-entry{grid-template-columns:18px 1fr;gap:12px}.timeline-date{grid-column:2;padding:0;font-size:11px}.timeline-marker{grid-column:1;grid-row:1/3}.timeline-marker:before{top:2px;left:0}.timeline-marker:after{left:7px}.timeline-card{grid-column:2;gap:16px;padding:16px}.timeline-art{flex-basis:90px;min-height:124px;font-size:57px}.timeline-card h3{font-size:20px}.timeline-type{font-size:11px}.timeline-empty button{display:block;margin:16px auto 0}.timeline-heading>p{font-size:11px}}@media(max-width:480px){header nav{gap:8px}.timeline-nav{font-size:11px;padding:7px 0}.timeline-card{align-items:stretch}.timeline-art{flex-basis:65px;font-size:45px}.timeline-card h3{font-size:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#universe canvas{touch-action:pan-y}