:root {
  color-scheme: dark;
  --ink: #fffdf8;
  --dark: #100b22;
  --violet: #6d2cff;
  --cyan: #19d9ff;
  --pink: #ff3cac;
  --orange: #ff7a18;
  --yellow: #ffe53b;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--dark); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #120927; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }

.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; height: 108px; padding: 0 clamp(26px, 5.5vw, 88px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.22); }
.identity { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; }
.identity > span:last-child { display: grid; gap: 3px; }
.identity strong { font-size: 17px; letter-spacing: .13em; }
.identity small { color: rgba(255,255,255,.72); font-size: 7px; font-weight: 750; letter-spacing: .22em; }
.personal-mark { position: relative; width: 46px; height: 46px; display: block; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(23,9,61,.2); backdrop-filter: blur(10px); }
.personal-mark::before { position: absolute; width: 1px; height: 56px; top: -6px; left: 22px; content: ""; background: linear-gradient(transparent,#fff,transparent); transform: rotate(38deg); }
.personal-mark i { position: absolute; font: 760 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }
.personal-mark i:first-child { left: 9px; top: 8px; }
.personal-mark i:last-child { right: 8px; bottom: 7px; color: #8eeaff; }
.site-header > p { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 8px; font-weight: 750; letter-spacing: .2em; }
.site-header > p i { width: 7px; height: 7px; border-radius: 50%; background: #7eff83; box-shadow: 0 0 0 6px rgba(126,255,131,.16),0 0 22px #7eff83; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 160px clamp(26px, 5.5vw, 88px) clamp(76px, 10vh, 112px); isolation: isolate; overflow: hidden; }
.paint { position: absolute; z-index: -4; inset: 0; background: url('/hero-robot-oil-v1.jpg') center center / cover no-repeat; transform: scale(1.025); animation: breathe 16s ease-in-out infinite alternate; }
.paint::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,rgba(25,7,55,.82) 0%,rgba(25,7,55,.55) 36%,rgba(10,8,43,.08) 68%,rgba(10,8,43,.22) 100%),linear-gradient(0deg,rgba(17,4,39,.76),transparent 48%); }
.paint-wash { position: absolute; z-index: -3; inset: 0; opacity: .34; mix-blend-mode: color-dodge; background: radial-gradient(circle at 7% 20%,#ff1f8f,transparent 23%),radial-gradient(circle at 40% 75%,#6625ff,transparent 30%),radial-gradient(circle at 83% 22%,#12d6ff,transparent 24%); }
.paint-wash::after { position:absolute; inset:0; content:""; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,black,transparent 78%); }

.hero-copy { position: relative; z-index: 5; width: min(760px,68vw); padding: 14px 0; filter: drop-shadow(0 9px 22px rgba(24,0,60,.46)); }
.hero-copy::before { position:absolute; z-index:-1; width:115%; height:145%; top:-22%; left:-8%; content:""; pointer-events:none; background:radial-gradient(ellipse at 25% 55%,rgba(30,8,66,.56),rgba(30,8,66,.18) 56%,transparent 74%); filter:blur(18px); }
.eyebrow { margin: 0 0 22px; color: #8efff4; font-size: 9px; font-weight: 800; letter-spacing: .25em; text-shadow: 0 0 18px rgba(66,255,238,.6); }
h1 { margin: 0; font-size: clamp(50px,6.4vw,98px); line-height: 1.02; letter-spacing: -.065em; text-wrap: balance; text-shadow:0 4px 30px rgba(20,0,60,.42); }
h1 em { color: transparent; background: linear-gradient(92deg,#fff 3%,#8defff 27%,#ffb1e6 59%,#ffe660 100%); background-clip: text; font-style: normal; filter: drop-shadow(0 4px 28px rgba(31,215,255,.22)); }
.hero-intro { width: min(590px,100%); margin: 28px 0 0; color: rgba(255,255,255,.9); font-size: clamp(14px,1.12vw,16px); line-height: 2; letter-spacing: .045em; text-shadow:0 2px 14px rgba(17,2,47,.82); }
.hero-signature { margin-top: 31px; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.56); font: 700 7px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .17em; }
.scroll-note { position: absolute; z-index: 5; right: clamp(26px,5.5vw,88px); bottom: 34px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); font-size: 8px; font-weight: 700; letter-spacing: .16em; writing-mode: vertical-rl; }
.scroll-note span { width: 1px; height: 44px; background: linear-gradient(white,transparent); }

.word-field { position: absolute; z-index: 2; inset: 108px 0 0; pointer-events: none; }
.word { position:absolute; left:var(--x); top:var(--y); display:block; color:var(--c); font-size:clamp(12px,var(--s),82px); line-height:.86; font-weight:900; letter-spacing:-.07em; white-space:nowrap; text-shadow:0 6px 28px rgba(24,0,74,.3); mix-blend-mode:screen; opacity:var(--o,.68); animation:word-drift var(--d,9s) ease-in-out var(--delay,0s) infinite alternate; }
.word:nth-child(1){--x:63%;--y:8%;--s:5.7vw;--c:#ffe85a;--o:.88;--dx:46px;--dy:28px;--r:-3deg;--rr:6deg;--d:11s}
.word:nth-child(2){--x:79%;--y:58%;--s:6.2vw;--c:#ff4eb8;--o:.9;--dx:-42px;--dy:-34px;--r:4deg;--rr:-7deg;--d:10s;--delay:-4s}
.word:nth-child(3){--x:7%;--y:19%;--s:4.4vw;--c:#82ff8c;--dx:38px;--dy:44px;--r:-8deg;--rr:9deg;--d:13s}
.word:nth-child(4){--x:84%;--y:24%;--s:4.8vw;--c:#35ebff;--o:.86;--dx:-50px;--dy:30px;--r:6deg;--rr:-8deg;--d:12s;--delay:-7s}
.word:nth-child(5){--x:58%;--y:77%;--s:3.6vw;--c:#ff9a38;--dx:35px;--dy:-46px;--r:-4deg;--rr:7deg;--d:9s}
.word:nth-child(6){--x:26%;--y:8%;--s:3.1vw;--c:#d09aff;--dx:-30px;--dy:40px;--r:5deg;--rr:-10deg;--d:12s;--delay:-3s}
.word:nth-child(7){--x:74%;--y:40%;--s:3.8vw;--c:#fff;--dx:42px;--dy:-30px;--r:-5deg;--rr:8deg;--d:8s}
.word:nth-child(8){--x:91%;--y:72%;--s:3.4vw;--c:#ffdc4a;--dx:-38px;--dy:-42px;--r:7deg;--rr:-6deg;--d:11s}
.word:nth-child(9){--x:43%;--y:14%;--s:2.8vw;--c:#57f4ff;--dx:28px;--dy:36px;--r:-7deg;--rr:9deg;--d:10s;--delay:-6s}
.word:nth-child(10){--x:9%;--y:69%;--s:2.7vw;--c:#ff75ce;--dx:46px;--dy:-24px;--r:6deg;--rr:-8deg;--d:13s}
.word:nth-child(11){--x:68%;--y:29%;--s:2.5vw;--c:#8fff9e;--dx:-35px;--dy:45px;--r:-3deg;--rr:7deg;--d:9s}
.word:nth-child(12){--x:34%;--y:84%;--s:2.1vw;--c:#fff;--dx:32px;--dy:-38px;--r:8deg;--rr:-11deg;--d:12s}
.word:nth-child(13){--x:88%;--y:10%;--s:2.3vw;--c:#ff8d39;--dx:-42px;--dy:28px;--r:-5deg;--rr:8deg;--d:10s}
.word:nth-child(14){--x:4%;--y:43%;--s:2.6vw;--c:#78dfff;--dx:50px;--dy:34px;--r:7deg;--rr:-9deg;--d:14s;--delay:-8s}
.word:nth-child(15){--x:77%;--y:86%;--s:2.5vw;--c:#ff62b7;--dx:-35px;--dy:-45px;--r:-6deg;--rr:8deg;--d:12s}
.word:nth-child(16){--x:49%;--y:5%;--s:2vw;--c:#ffe35c;--dx:38px;--dy:30px;--r:4deg;--rr:-7deg;--d:9s}
.word:nth-child(17){--x:56%;--y:44%;--s:2.7vw;--c:#86ffb0;--dx:-44px;--dy:38px;--r:-8deg;--rr:10deg;--d:13s}
.word:nth-child(18){--x:19%;--y:58%;--s:2.4vw;--c:#be8cff;--dx:36px;--dy:-48px;--r:5deg;--rr:-9deg;--d:11s}
.word:nth-child(19){--x:94%;--y:47%;--s:2.7vw;--c:#fff;--dx:-52px;--dy:28px;--r:-4deg;--rr:8deg;--d:10s}
.word:nth-child(20){--x:39%;--y:70%;--s:2vw;--c:#55e9ff;--dx:40px;--dy:-32px;--r:7deg;--rr:-10deg;--d:14s}
.word:nth-child(21){--x:14%;--y:88%;--s:2.2vw;--c:#ff9c48;--dx:34px;--dy:-45px;--r:-6deg;--rr:9deg;--d:12s}
.word:nth-child(22){--x:71%;--y:18%;--s:2.1vw;--c:#ff73ca;--dx:-38px;--dy:46px;--r:5deg;--rr:-8deg;--d:10s}
.word:nth-child(23){--x:82%;--y:67%;--s:1.8vw;--c:#78f9ff;--dx:44px;--dy:-38px;--r:-7deg;--rr:10deg;--d:13s}
.word:nth-child(24){--x:3%;--y:29%;--s:1.7vw;--c:#ffe45f;--dx:48px;--dy:32px;--r:6deg;--rr:-11deg;--d:15s}
.word:nth-child(25){--x:47%;--y:91%;--s:1.8vw;--c:#a8ff8d;--dx:-35px;--dy:-48px;--r:-5deg;--rr:8deg;--d:11s}
.word:nth-child(26){--x:31%;--y:20%;--s:3vw;--c:#ff6ec7;--dx:42px;--dy:30px;--r:7deg;--rr:-9deg;--d:12s}
.word:nth-child(27){--x:64%;--y:63%;--s:3.4vw;--c:#5eeaff;--dx:-48px;--dy:-42px;--r:-4deg;--rr:7deg;--d:10s}
.word:nth-child(28){--x:12%;--y:50%;--s:2.9vw;--c:#ffe75d;--dx:45px;--dy:38px;--r:5deg;--rr:-8deg;--d:14s}
.word:nth-child(29){--x:84%;--y:35%;--s:2.4vw;--c:#92ff9b;--dx:-38px;--dy:45px;--r:-8deg;--rr:11deg;--d:11s}
.word:nth-child(30){--x:52%;--y:27%;--s:2.5vw;--c:#d79cff;--dx:36px;--dy:-32px;--r:6deg;--rr:-9deg;--d:13s}
.word:nth-child(31){--x:73%;--y:79%;--s:2.8vw;--c:#ff8d43;--dx:-45px;--dy:-36px;--r:-5deg;--rr:8deg;--d:9s}
.word:nth-child(32){--x:22%;--y:77%;--s:2.6vw;--c:#65e9ff;--dx:40px;--dy:-44px;--r:8deg;--rr:-10deg;--d:12s}
.word:nth-child(33){--x:92%;--y:18%;--s:1.9vw;--c:#fff;--dx:-50px;--dy:34px;--r:-7deg;--rr:9deg;--d:14s}
.word:nth-child(34){--x:37%;--y:39%;--s:2vw;--c:#ff69c0;--dx:34px;--dy:46px;--r:4deg;--rr:-8deg;--d:10s}
.word:nth-child(35){--x:5%;--y:82%;--s:2.2vw;--c:#96ff95;--dx:48px;--dy:-38px;--r:-6deg;--rr:10deg;--d:13s}
.word:nth-child(36){--x:59%;--y:53%;--s:2.3vw;--c:#ffdf56;--dx:-40px;--dy:42px;--r:7deg;--rr:-9deg;--d:11s}
.word:nth-child(37){--x:17%;--y:12%;--s:2.5vw;--c:#74eaff;--dx:44px;--dy:36px;--r:-5deg;--rr:8deg;--d:12s}
.word:nth-child(38){--x:89%;--y:90%;--s:2.4vw;--c:#c895ff;--dx:-50px;--dy:-46px;--r:6deg;--rr:-10deg;--d:14s}
.word:nth-child(39){--x:45%;--y:58%;--s:2.2vw;--c:#ff8542;--dx:38px;--dy:-40px;--r:-7deg;--rr:9deg;--d:10s}
.word:nth-child(40){--x:70%;--y:94%;--s:2.3vw;--c:#79ff9a;--dx:-36px;--dy:-48px;--r:5deg;--rr:-8deg;--d:13s}
.word:nth-child(41){--x:27%;--y:94%;--s:2vw;--c:#fff;--dx:42px;--dy:-45px;--r:-6deg;--rr:10deg;--d:11s}
.word:nth-child(42){--x:80%;--y:4%;--s:2.6vw;--c:#ff63bd;--dx:-44px;--dy:38px;--r:7deg;--rr:-9deg;--d:12s}

.manifesto { position: relative; min-height: 650px; padding: clamp(90px,11vw,170px) clamp(26px,8vw,130px); display: grid; grid-template-columns: .28fr 1fr .22fr; align-items: start; gap: clamp(25px,5vw,80px); color: #170c2b; background: #fff8e7; overflow:hidden; }
.manifesto::before { position:absolute; width:470px; height:470px; right:-150px; top:-160px; border-radius:50%; content:""; background:conic-gradient(from 60deg,#ff3cac,#ffe53b,#1fd1f9,#b721ff,#ff3cac); filter:blur(30px); opacity:.28; }
.section-number { padding-top: 10px; color: #745d8e; font: 760 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; }
.manifesto-copy { position:relative; z-index:1; max-width:900px; }
.kicker { margin:0 0 20px; color:#f24f79!important; font-size:9px!important; font-weight:850; letter-spacing:.23em!important; }
.manifesto h2 { margin:0; font-size:clamp(40px,5.4vw,82px); line-height:1.12; letter-spacing:-.06em; }
.manifesto-copy>p:last-child { max-width:760px; margin:34px 0 0; color:#594969; font-size:clamp(14px,1.25vw,18px); line-height:2.05; letter-spacing:.04em; }
.spectrum { position:relative; z-index:1; height:300px; display:flex; align-items:flex-end; gap:7px; transform:rotate(8deg); }
.spectrum i { flex:1; min-width:7px; border-radius:99px; background:linear-gradient(to top,#6a11cb,#2575fc,#24e5ff,#ffe53b,#ff3cac); box-shadow:0 7px 20px rgba(97,37,181,.22); }
.spectrum i:nth-child(1){height:32%}.spectrum i:nth-child(2){height:74%}.spectrum i:nth-child(3){height:46%}.spectrum i:nth-child(4){height:100%}.spectrum i:nth-child(5){height:66%}.spectrum i:nth-child(6){height:88%}.spectrum i:nth-child(7){height:38%}

.disciplines { display:grid; grid-template-columns:repeat(3,1fr); background:#170b2d; }
.discipline { position:relative; min-height:480px; padding:clamp(32px,4vw,64px); display:flex; flex-direction:column; overflow:hidden; border-right:1px solid rgba(255,255,255,.14); isolation:isolate; }
.discipline::before { position:absolute; z-index:-1; inset:0; content:""; opacity:.7; transition:transform .6s ease,opacity .6s ease; }
.discipline:hover::before { transform:scale(1.08); opacity:1; }
.discipline.primary::before { background:radial-gradient(circle at 80% 18%,#ff3cac,transparent 43%),linear-gradient(145deg,#431391,#15103a); }
.discipline.motion::before { background:radial-gradient(circle at 20% 85%,#ff7a18,transparent 45%),linear-gradient(145deg,#007cf0,#171047); }
.discipline.system::before { background:radial-gradient(circle at 80% 80%,#0fffc1,transparent 43%),linear-gradient(145deg,#a100ff,#35113f); }
.index { color:rgba(255,255,255,.58); font:750 8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
.discipline-title { margin-top:auto; display:grid; gap:8px; }
.discipline-title strong { font-size:clamp(30px,3.3vw,52px); letter-spacing:-.05em; }
.discipline-title small { color:rgba(255,255,255,.58); font-size:7px; font-weight:800; letter-spacing:.2em; }
.discipline p { min-height:112px; margin:24px 0 0; color:rgba(255,255,255,.78); font-size:13px; line-height:1.95; }
.tags { margin-top:18px; display:flex; flex-wrap:wrap; gap:7px; }
.tags span { padding:6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:rgba(255,255,255,.82); background:rgba(255,255,255,.06); font-size:8px; backdrop-filter:blur(6px); }

.closing { min-height:500px; padding:90px clamp(26px,8vw,130px); display:flex; align-items:center; justify-content:space-between; gap:50px; color:white; background:radial-gradient(circle at 50% 50%,rgba(255,39,178,.35),transparent 34%),conic-gradient(from 200deg at 80% 20%,#321594,#0a0a26,#194fd7,#fa248e,#321594); }
.closing p { margin:0; font-size:clamp(44px,7vw,100px); font-weight:850; line-height:1.18; letter-spacing:-.07em; }
.closing span { flex:0 0 auto; color:rgba(255,255,255,.62); font:720 8px/2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }

.site-footer { min-height:96px; padding:0 clamp(26px,5.5vw,88px); display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.52); background:#0b0617; font-size:8px; font-weight:700; letter-spacing:.14em; }
.filing { padding:7px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:inherit; text-decoration:none; letter-spacing:.06em; }
.filing:hover { border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.8); }

@keyframes breathe { to { transform:scale(1.06) translate3d(-.5%,.4%,0); } }
@keyframes word-drift { from { transform:translate3d(0,0,0) rotate(var(--r)); } to { transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r) + var(--rr))); } }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.paint,.word{animation:none}}

@media(max-width:900px){
  .site-header>p{display:none}.hero-copy{width:min(100%,680px)}.word-field{opacity:.62}.manifesto{grid-template-columns:1fr}.section-number{padding:0}.spectrum{position:absolute;right:30px;bottom:-40px;width:100px;opacity:.42}.disciplines{grid-template-columns:1fr}.discipline{min-height:390px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.discipline p{min-height:0}.closing{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){
  .site-header{height:88px;padding:0 21px}.identity strong{font-size:15px}.hero{min-height:920px;padding:130px 20px 74px;align-items:flex-start}.paint{background-position:62% center}.paint::after{background:linear-gradient(180deg,rgba(25,7,55,.75),rgba(25,7,55,.18) 46%,rgba(17,4,39,.88) 100%)}.hero-copy{margin-top:30px;padding:14px 0}.hero-copy::before{width:125%;left:-18%}.eyebrow{font-size:7px;line-height:1.7}.hero-intro{font-size:13px;line-height:1.9}.hero-signature{align-items:flex-start;flex-direction:column}.word-field{inset:88px 0 0;opacity:.58}.word:nth-child(n+25){display:none}.scroll-note{display:none}.manifesto{min-height:650px;padding:84px 22px}.manifesto h2{font-size:42px}.manifesto-copy>p:last-child{font-size:14px}.discipline{min-height:420px;padding:40px 24px}.closing{min-height:450px;padding:80px 22px}.closing p{font-size:48px}.site-footer{min-height:120px;padding:28px 22px;align-items:flex-start;justify-content:center;flex-direction:column;gap:15px}
}