:root { --ink:#111318; --ink-soft:#292c32; --paper:#f6f6f2; --muted:#74766f; --line:#deded7; --acid:#d7ff3f; --blue:#5969ff; --shadow:0 18px 50px rgba(20,24,28,.08); --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,1,.36,1); --t-fast:.15s; --t:.22s; --t-slow:.35s; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.site-body { margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-size:14px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.site-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.site-explorer { position:sticky; top:0; height:100vh; padding:26px 18px 20px; background:#121419; color:#a9adb7; display:flex; flex-direction:column; border-right:1px solid #262930; z-index:60; }
.explorer-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:46px; }
.brand-mark { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark strong { display:block; color:#f5f6f3; font-size:14px; line-height:1.15; letter-spacing:-.02em; }
.brand-mark small { display:block; margin-top:3px; color:#747984; font:10px/1.1 "SFMono-Regular",Consolas,monospace; letter-spacing:.02em; }
.brand-avatar { width:30px; height:30px; padding:3px; border-radius:9px; background:var(--acid); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-avatar img { width:100%; height:100%; border-radius:6px; object-fit:cover; }
.icon-button { width:30px; height:30px; border:1px solid #30343d; border-radius:8px; color:var(--acid); background:#1a1d23; line-height:1; }
.icon-button:hover { background:#252a31; }
.explorer-label { display:flex; justify-content:space-between; padding:0 9px 10px; color:#696e79; font:10px/1 "SFMono-Regular",Consolas,monospace; letter-spacing:.16em; }
.explorer-dots { letter-spacing:.08em; color:#545a66; }
.file-tree,.external-tree { display:flex; flex-direction:column; gap:3px; }
.tree-folder,.tree-file,.external-tree a { min-height:34px; display:flex; align-items:center; gap:9px; padding:0 10px; border-radius:7px; color:#989da8; font-size:12px; transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease); }
.tree-folder { color:#d9dce0; font-family:"SFMono-Regular",Consolas,monospace; font-size:11px; }
.tree-caret { width:10px; color:#727883; }
.tree-icon { color:#9ba2ac; font-size:12px; }
.tree-file { padding-left:34px; font-family:"SFMono-Regular",Consolas,monospace; }
.tree-file:hover,.external-tree a:hover { color:#f5f6f3; background:#1d2027; transform:translateX(2px); }
.tree-file.active { color:var(--acid); background:rgba(215,255,63,.09); }
.file-icon { width:12px; color:#77808b; }
.tree-file.active .file-icon { color:var(--acid); }
.explorer-divider { height:1px; background:#282b32; margin:28px 9px 23px; }
.external-tree a { padding-left:10px; font-family:"SFMono-Regular",Consolas,monospace; }
.link-dot { width:12px; color:#6e7580; }
.explorer-note { margin-top:auto; display:flex; align-items:center; gap:8px; padding:12px 10px; color:#828793; font:10px "SFMono-Regular",Consolas,monospace; border-top:1px solid #282b32; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(215,255,63,.1); animation:livePulse 2.4s ease-in-out infinite; }
.site-stage { min-width:0; }
.site-topbar { height:64px; padding:0 5.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(246,246,242,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:40; }
.topbar-path { color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; letter-spacing:.01em; }
.topbar-prompt { color:var(--blue); }
.topbar-slash { margin:0 4px; color:#b6b8ae; }
.topbar-actions { display:flex; align-items:center; gap:19px; }
.topbar-status { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; text-transform:uppercase; letter-spacing:.08em; }
.topbar-status i { display:inline-block; width:6px; height:6px; margin:0 5px 1px 0; border-radius:50%; background:#36d399; box-shadow:0 0 #36d39973; animation:pulse 2.6s ease-out infinite; }
.topbar-contact { color:var(--ink); font-size:12px; font-weight:600; }
.topbar-contact span { display:inline-block; margin-left:3px; color:var(--blue); transition:transform var(--t) var(--ease); }
.topbar-contact:hover span { transform:translate(3px,-2px); }
.mobile-menu-button { display:none; border:0; background:transparent; color:var(--ink); padding:7px; font-size:18px; }
.site-content { overflow:hidden; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:24px 5.5vw 38px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.site-footer strong { color:var(--ink); }
.footer-meta { display:flex; gap:18px; font-family:"SFMono-Regular",Consolas,monospace; }
.site-toast { position:fixed; left:50%; bottom:28px; z-index:100; transform:translate(-50%,16px); padding:10px 16px; border-radius:999px; background:var(--ink); color:white; font-size:12px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease); }
.site-toast.show { opacity:1; transform:translate(-50%,0); }
.back-top { position:fixed; right:24px; bottom:52px; z-index:130; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); box-shadow:0 8px 32px -6px rgba(0,0,0,.22); font-size:16px; line-height:1; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease); }
.back-top.show { opacity:1; pointer-events:auto; transform:none; }
.back-top:hover { transform:translateY(-2px); background:#fff; border-color:var(--ink); }
.portfolio-page { max-width:1230px; margin:0 auto; padding:0 5.5vw; }
.portfolio-hero { --cinema:0; min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; padding:84px 0 80px; position:relative; }
.hero-grid { position:absolute; inset:0 -5.5vw 0; pointer-events:none; opacity:.42; background-image:linear-gradient(rgba(17,19,24,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,24,.045) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 78%); transform:translateY(calc(var(--cinema) * -28px)); }
.hero-glow { position:absolute; left:68%; top:30%; width:min(560px,62vw); height:440px; z-index:0; pointer-events:none; background:radial-gradient(ellipse at center,rgba(89,105,255,.18),rgba(89,105,255,.045) 42%,transparent 70%); filter:blur(16px); animation:breathe 8s ease-in-out infinite alternate; }
.hero-orbit { position:absolute; top:17%; right:8%; width:190px; height:190px; border:1px solid #d6d7cf; border-radius:50%; opacity:.65; animation:orbit-spin 32s linear infinite; }
.hero-orbit:before,.hero-orbit:after { content:''; position:absolute; border:1px solid #d6d7cf; border-radius:50%; inset:23px; }
.hero-orbit:after { inset:45px; border-color:#c5e34f; }
.hero-orbit-dot { position:absolute; top:-4px; left:56%; width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(215,255,63,.18); }
.hero-copy { position:relative; z-index:1; max-width:950px; }
.eyebrow { margin:0 0 26px; color:var(--blue); font:11px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow .comment { color:#a0a39b; }
.hero-title { max-width:920px; margin:0; font-size:clamp(3rem,8.4vw,7.6rem); line-height:.98; letter-spacing:-.085em; font-weight:650; }
.hero-title em { color:var(--blue); font-style:normal; }
.hero-subtitle { max-width:660px; margin:31px 0 0; color:var(--muted); font-size:clamp(16px,1.8vw,21px); line-height:1.7; letter-spacing:-.025em; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.hero-tag { padding:7px 10px; border:1px solid #d3d5cc; border-radius:999px; color:#656860; background:rgba(255,255,255,.42); font:10px "SFMono-Regular",Consolas,monospace; transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease); }
.hero-tag:hover { transform:translateY(-2px); border-color:var(--ink); color:var(--ink); background:#fff; }
.hero-tag:first-child { color:var(--ink); border-color:var(--ink); background:transparent; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:38px; }
.button-primary,.button-secondary { display:inline-flex; align-items:center; gap:12px; min-height:45px; padding:0 17px; border-radius:7px; font-size:12px; font-weight:600; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease); }
.button-primary span,.button-secondary span { display:inline-block; transition:transform var(--t) var(--ease); }
.button-primary { color:var(--ink); background:var(--acid); box-shadow:4px 4px 0 var(--ink); }
.button-primary:hover { transform:translateY(-2px); box-shadow:6px 8px 0 var(--ink),0 12px 24px -8px rgba(89,105,255,.4); }
.button-primary:hover span { transform:translate(3px,-2px); }
.button-primary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.button-secondary { color:var(--ink); border:1px solid #cfd1c9; background:rgba(255,255,255,.4); }
.button-secondary:hover { border-color:var(--ink); background:white; transform:translateY(-2px); }
.button-secondary:hover span { transform:translateX(3px); }
.hero-aside { position:absolute; right:0; bottom:68px; width:190px; color:var(--muted); font:10px/1.7 "SFMono-Regular",Consolas,monospace; text-align:right; }
.hero-aside strong { display:block; color:var(--ink); font-size:12px; font-weight:500; }
.hero-aside .line { display:block; width:72px; height:1px; margin:8px 0 8px auto; background:var(--ink); }
.scroll-cue { position:absolute; left:0; bottom:42px; display:inline-flex; gap:9px; align-items:center; color:#9a9d95; font:10px "SFMono-Regular",Consolas,monospace; text-transform:uppercase; letter-spacing:.1em; }
.scroll-cue:before { content:''; width:1px; height:28px; background:linear-gradient(180deg,transparent,var(--blue),transparent); animation:cuedrop 2.4s var(--ease) infinite; }
.section-block { padding:116px 0; border-top:1px solid var(--line); scroll-margin-top:28px; }
.section-heading { display:grid; grid-template-columns:120px minmax(0,1fr); gap:35px; margin-bottom:45px; }
.section-index { color:var(--blue); font:11px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em; }
.section-kicker { margin:0 0 17px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.section-title { max-width:660px; margin:0; font-size:clamp(2rem,4vw,4.3rem); line-height:1.05; letter-spacing:-.065em; font-weight:620; }
.section-lead { max-width:610px; margin:20px 0 0; color:var(--muted); font-size:15px; line-height:1.8; }
.value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card { min-height:178px; padding:25px 21px; background:var(--paper); transition:transform var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t-slow) var(--ease); }
.value-card:hover { transform:translateY(-2px); background:#fff; box-shadow:0 20px 48px -28px rgba(89,105,255,.28); }
.value-card .value-number { display:block; margin-bottom:26px; color:var(--blue); font:11px "SFMono-Regular",Consolas,monospace; }
.value-card h3 { margin:0 0 8px; font-size:15px; line-height:1.3; letter-spacing:-.03em; }
.value-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.service-card { display:grid; grid-template-columns:56px 1fr; gap:17px; padding:24px; border:1px solid var(--line); background:rgba(255,255,255,.28); transition:background var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t-slow) var(--ease); }
.service-card:hover { background:#fff; border-color:#5969ff47; transform:translateY(-2px); box-shadow:0 22px 52px -28px rgba(89,105,255,.32); }
.service-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--ink); border:1px solid var(--ink); border-radius:50%; font:18px "SFMono-Regular",Consolas,monospace; transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease); }
.service-card:hover .service-icon { background:var(--blue); color:#fff; border-color:var(--blue); }
.service-card h3 { margin:0 0 8px; font-size:17px; letter-spacing:-.04em; }
.service-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.service-card code { display:block; margin-bottom:8px; color:var(--blue); font:10px "SFMono-Regular",Consolas,monospace; }
.project-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.project-card { min-width:0; border:1px solid var(--line); background:#fff; transition:transform .45s var(--ease),box-shadow var(--t-slow) var(--ease),border-color .28s var(--ease); }
.project-card:hover { transform:translateY(-4px); border-color:#5969ff52; box-shadow:0 22px 56px -32px rgba(89,105,255,.38); }
.project-card.t3d { position:relative; transform-style:preserve-3d; will-change:transform; transition:box-shadow var(--t-slow) var(--ease),border-color .28s var(--ease); }
.project-card.t3d:before { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),rgba(89,105,255,.08) 40%,transparent 64%); }
.project-card.t3d:hover:before { opacity:1; }
.project-card.t3d:hover { transform:none; box-shadow:0 34px 70px -26px rgba(89,105,255,.34),0 12px 28px -14px rgba(0,0,0,.12); }
.project-art { height:260px; overflow:hidden; position:relative; background:#171922; }
.project-art:after { content:''; position:absolute; inset:0; background:linear-gradient(130deg,transparent 40%,rgba(255,255,255,.13)); pointer-events:none; }
.project-art img { width:100%; height:100%; object-fit:cover; opacity:.88; transition:transform .7s var(--ease),opacity .3s ease; }
.project-card:hover .project-art img { transform:scale(1.045); opacity:1; }
.project-art--blue { background:linear-gradient(135deg,#1c1e39,#3f4aa9); }
.project-art--acid { background:linear-gradient(135deg,#252a1c,#badc36); }
.project-art--orange { background:linear-gradient(135deg,#37201a,#ff7a59); }
.project-art--violet { background:linear-gradient(135deg,#211c3d,#876cf2); }
.art-window { position:absolute; left:11%; right:11%; top:15%; bottom:14%; border:1px solid rgba(255,255,255,.42); border-radius:10px; background:rgba(9,11,18,.3); box-shadow:12px 15px 0 rgba(15,15,20,.17); backdrop-filter:blur(6px); overflow:hidden; }
.art-window-bar { height:25px; display:flex; align-items:center; gap:5px; padding-left:10px; border-bottom:1px solid rgba(255,255,255,.22); }
.art-window-bar i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.7); }
.art-lines { display:grid; gap:9px; padding:21px; }
.art-lines span { display:block; height:8px; width:78%; border-radius:9px; background:rgba(255,255,255,.6); }
.art-lines span:nth-child(2) { width:46%; background:rgba(215,255,63,.8); }
.art-lines span:nth-child(3) { width:64%; }
.art-lines span:nth-child(4) { width:88%; background:rgba(255,255,255,.28); }
.art-label { position:absolute; left:19px; bottom:16px; color:rgba(255,255,255,.76); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; }
.project-body { padding:20px 21px 22px; }
.project-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; text-transform:uppercase; }
.project-meta span:first-child { color:var(--blue); }
.project-body h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.055em; }
.project-body p { min-height:48px; margin:0; color:var(--muted); font-size:12px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.project-stack { display:flex; flex-wrap:wrap; gap:6px; margin:17px 0 20px; }
.project-stack span { padding:4px 7px; border:1px solid #e0e1da; color:#6d7069; font:9px "SFMono-Regular",Consolas,monospace; transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease); }
.project-stack span:hover { transform:translateY(-2px); border-color:var(--ink); color:var(--ink); }
.project-link { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:11px; font-weight:600; }
.project-link span { display:inline-block; color:var(--blue); transition:transform var(--t) var(--ease); }
.project-card:hover .project-link span { transform:translate(3px,-2px); }
.project-more { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:23px; padding-top:21px; border-top:1px dashed #d3d4cc; color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; }
.project-more a { color:var(--ink); font-weight:600; }
.career-wrap { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.career-intro { padding-top:4px; }
.career-intro .big-note { margin:0; font-size:clamp(2rem,3.4vw,3.8rem); line-height:1.05; letter-spacing:-.065em; }
.career-intro p { max-width:390px; margin:25px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.career-list { border-top:1px solid var(--ink); }
.career-item { display:grid; grid-template-columns:112px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); transition:background var(--t) var(--ease); }
.career-item:hover { background:rgba(89,105,255,.035); }
.career-year { color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; }
.career-year:before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(89,105,255,.12); vertical-align:middle; }
.career-item:hover .career-year:before { animation:nodePulse 1.6s ease-out infinite; }
.career-item h3 { margin:0 0 4px; font-size:14px; }
.career-item p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.process-item { min-height:215px; padding:22px 18px; background:var(--paper); transition:transform var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t-slow) var(--ease); }
.process-item:hover { transform:translateY(-2px); background:#fff; box-shadow:0 22px 48px -28px rgba(89,105,255,.28); }
.process-item .process-no { display:block; margin-bottom:38px; color:var(--blue); font:11px "SFMono-Regular",Consolas,monospace; }
.process-item h3 { margin:0 0 10px; font-size:15px; line-height:1.3; letter-spacing:-.03em; }
.process-item p { margin:0; color:var(--muted); font-size:11px; line-height:1.75; }
.contact-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; padding:45px; color:#f5f6f3; background:var(--ink); }
.contact-panel .section-kicker { color:#8c929d; }
.contact-panel .section-title { color:white; }
.contact-copy p { max-width:390px; margin:22px 0 0; color:#9fa4ad; font-size:13px; line-height:1.8; }
.contact-points { display:grid; gap:13px; margin-top:28px; color:#b6bbc4; font:10px "SFMono-Regular",Consolas,monospace; }
.contact-points span { color:var(--acid); margin-right:8px; }
.contact-inline { color:#f5f6f3; text-decoration:underline; text-underline-offset:3px; }
.contact-copy-btn { border:0; padding:0; background:transparent; color:#f5f6f3; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; }
.contact-form { display:grid; gap:13px; align-content:center; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.contact-form label { display:grid; gap:7px; color:#9fa4ad; font:10px "SFMono-Regular",Consolas,monospace; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid #353a44; border-radius:5px; padding:11px 12px; outline:0; color:white; background:#1b1f26; font:12px "SFMono-Regular",Consolas,monospace; transition:border-color .2s ease,background .2s ease; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--acid); background:#20252d; }
.contact-form textarea { min-height:111px; resize:vertical; }
.contact-form button { justify-self:start; min-height:42px; border:0; border-radius:5px; padding:0 15px; color:var(--ink); background:var(--acid); font-size:11px; font-weight:700; transition:transform var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.contact-form button:hover { background:white; transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(215,255,63,.45); }
.scroll-cue a { color:inherit; }
.case-page { padding-top:56px; padding-bottom:72px; }
.case-crumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:42px; color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; }
.case-crumb a:hover { color:var(--ink); }
.case-title { max-width:920px; margin:0; font-size:clamp(2.4rem,6vw,5.2rem); line-height:.98; letter-spacing:-.07em; font-weight:650; word-break:break-word; }
.case-facts { display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
.case-cover { margin-top:36px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#171922; }
.case-cover img { display:block; width:100%; max-height:520px; object-fit:cover; transition:transform .7s var(--ease); }
.case-cover:hover img { transform:scale(1.015); }
.case-prose { max-width:760px; margin-top:48px; color:var(--ink-soft); font-size:16px; line-height:1.85; }
.case-prose h1,.case-prose h2,.case-prose h3 { color:var(--ink); letter-spacing:-.04em; line-height:1.25; margin:1.4em 0 .5em; }
.case-prose p { margin:0 0 1em; }
.case-prose img { max-width:100%; height:auto; border-radius:8px; }
.case-prose a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.case-prose ul,.case-prose ol { margin:0 0 1em; padding-left:1.2em; }
.case-prose pre,.case-prose code { font-family:"SFMono-Regular",Consolas,monospace; }
.case-prose pre { padding:16px; overflow:auto; border-radius:8px; background:#171a20; color:#f4f5f2; }
.case-prose blockquote { margin:0 0 1em; padding-left:14px; border-left:2px solid var(--acid); color:var(--muted); }
.case-prose table { width:100%; margin:0 0 1em; border-collapse:collapse; }
.case-prose th,.case-prose td { padding:8px 10px; border:1px solid var(--line); text-align:left; }
.case-pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:56px; }
.case-pager a { display:block; min-height:92px; padding:18px; border:1px solid var(--line); background:rgba(255,255,255,.35); transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t-slow) var(--ease); }
.case-pager a:hover { border-color:#5969ff52; background:#fff; transform:translateY(-2px); box-shadow:0 18px 40px -24px rgba(89,105,255,.35); }
.case-pager .kicker { display:block; margin-bottom:8px; color:var(--blue); font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em; }
.case-pager strong { display:block; font-size:15px; letter-spacing:-.03em; }
.case-pager .is-next { text-align:right; }
.case-related { margin-top:64px; padding-top:28px; border-top:1px solid var(--line); }
.case-related-list a { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.case-related-list a:hover { color:var(--blue); }
.case-related time { color:var(--muted); font:11px "SFMono-Regular",Consolas,monospace; }
html.motion :is(.hero-copy > *,.hero-aside,.scroll-cue,.section-index,.section-kicker,.section-title,.section-lead,.value-card,.service-card,.project-card,.project-more,.career-intro > *,.career-item,.process-item,.contact-copy > *,.contact-form,.case-hero > *,.case-cover,.case-prose,.case-pager a,.case-related) { transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),filter .7s var(--ease-out),transform var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t-slow) var(--ease); }
html.motion .project-card.t3d { transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),filter .7s var(--ease-out),box-shadow var(--t-slow) var(--ease),border-color .28s var(--ease); }
html.motion :is(.hero-copy > *,.hero-aside,.scroll-cue,.section-index,.section-kicker,.section-title,.section-lead,.value-card,.service-card,.project-card,.project-more,.career-intro > *,.career-item,.process-item,.contact-copy > *,.contact-form,.case-hero > *,.case-cover,.case-prose,.case-pager a,.case-related):not(.in) { opacity:0; translate:0 24px; filter:blur(6px); }
html.motion .d1 { transition-delay:.08s; }
html.motion .d2 { transition-delay:.16s; }
html.motion .d3 { transition-delay:.24s; }
html.motion .d4 { transition-delay:.32s; }
html.motion .d5 { transition-delay:.4s; }
html.motion .d6 { transition-delay:.48s; }
@keyframes reveal-up { to { opacity:1; transform:translateY(0); } }
@keyframes breathe { 0% { opacity:.55; transform:translate(-50%,-50%) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@keyframes cuedrop { 0% { transform:translateY(-10px); opacity:0; } 28% { opacity:1; } 70%,to { transform:translateY(12px); opacity:0; } }
@keyframes pulse { 0% { box-shadow:0 0 #36d39973; } 70% { box-shadow:0 0 0 8px #36d39900; } to { box-shadow:0 0 #36d39900; } }
@keyframes livePulse { 0%,to { opacity:1; } 50% { opacity:.45; } }
@keyframes nodePulse { 0% { box-shadow:0 0 0 4px rgba(89,105,255,.28); } 70% { box-shadow:0 0 0 8px rgba(89,105,255,0); } to { box-shadow:0 0 0 4px rgba(89,105,255,0); } }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-old(root) { z-index:1; }
::view-transition-new(root) { z-index:2; }
body.dark-mode { --paper:#111318; --ink:#f4f5f2; --muted:#979b98; --line:#30343a; background:var(--paper); }
body.dark-mode .site-topbar { background:rgba(17,19,24,.88); }
body.dark-mode .hero-grid { opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); }
body.dark-mode .hero-glow { background:radial-gradient(ellipse at center,rgba(130,170,255,.24),rgba(160,120,230,.08) 46%,transparent 72%); }
body.dark-mode .back-top { background:#171a20; color:var(--ink); }
body.dark-mode .value-card:hover,body.dark-mode .process-item:hover,body.dark-mode .service-card:hover,body.dark-mode .hero-tag:hover,body.dark-mode .back-top:hover { background:#1d2128; }
body.dark-mode .button-secondary,body.dark-mode .hero-tag,body.dark-mode .service-card,body.dark-mode .project-card,body.dark-mode .value-card,body.dark-mode .process-item { background:#171a20; border-color:var(--line); color:var(--ink); }
body.dark-mode .project-body p,body.dark-mode .section-lead,body.dark-mode .service-card p,body.dark-mode .value-card p,body.dark-mode .process-item p,body.dark-mode .career-intro p,body.dark-mode .case-prose { color:var(--muted); }
body.dark-mode .project-card { box-shadow:none; }
body.dark-mode .case-prose h1,body.dark-mode .case-prose h2,body.dark-mode .case-prose h3,body.dark-mode .case-prose strong { color:var(--ink); }
body.dark-mode .case-pager a { background:#171a20; border-color:var(--line); }
body.dark-mode .case-pager a:hover { background:#1d2128; }
@media (max-width:1080px) { .site-shell{grid-template-columns:215px minmax(0,1fr)} .site-explorer{padding-left:14px;padding-right:14px} .portfolio-page{padding-left:6vw;padding-right:6vw} .site-topbar{padding-left:6vw;padding-right:6vw} .site-footer{padding-left:6vw;padding-right:6vw} .hero-title{font-size:clamp(3rem,7.2vw,6rem)} .hero-aside{right:4px} }
@media (max-width:820px) { .site-shell{display:block} .site-explorer{position:fixed;left:0;top:0;bottom:0;width:276px;transform:translateX(-101%);box-shadow:20px 0 60px rgba(0,0,0,.24);transition:transform .34s var(--ease)} .site-explorer.is-open{transform:translateX(0)} .site-stage{min-height:100vh} .mobile-menu-button{display:block} .topbar-status{display:none} .portfolio-hero{min-height:auto;padding-top:86px;padding-bottom:108px} .hero-orbit{top:8%;right:1%;width:130px;height:130px} .hero-glow{left:78%;top:12%;width:240px;height:220px} .hero-aside{position:relative;right:auto;bottom:auto;margin-top:48px;text-align:left} .hero-aside .line{margin-left:0} .section-block{padding:84px 0} .section-heading{grid-template-columns:1fr;gap:14px;margin-bottom:32px} .value-grid,.process-grid{grid-template-columns:repeat(2,1fr)} .contact-panel{grid-template-columns:1fr;gap:40px;padding:30px 24px} .back-top{right:16px;bottom:18px} }
@media (prefers-reduced-motion:reduce) { .hero-glow,.hero-orbit,.scroll-cue:before,.status-dot,.topbar-status i,.career-item:hover .career-year:before { animation:none; } html.motion :is(.hero-copy > *,.hero-aside,.scroll-cue,.section-index,.section-kicker,.section-title,.section-lead,.value-card,.service-card,.project-card,.project-more,.career-intro > *,.career-item,.process-item,.contact-copy > *,.contact-form,.case-hero > *,.case-cover,.case-prose,.case-pager a,.case-related):not(.in) { opacity:1; translate:0 0; filter:none; transition:none; } }
@media (max-width:560px) { .site-topbar{height:56px;padding-left:20px;padding-right:20px} .topbar-path{font-size:10px} .topbar-contact{display:none} .portfolio-page{padding-left:20px;padding-right:20px} .hero-title{font-size:clamp(3.15rem,16vw,5.2rem)} .hero-subtitle{font-size:15px} .hero-grid{left:-20px;right:-20px} .hero-orbit{top:4%;right:-18px;opacity:.4} .scroll-cue{bottom:38px} .value-grid,.service-grid,.project-list,.process-grid,.form-row{grid-template-columns:1fr} .value-card{min-height:0} .service-card{grid-template-columns:45px 1fr;padding:19px} .project-art{height:220px} .project-body h3{font-size:20px} .career-wrap{grid-template-columns:1fr;gap:34px} .career-item{grid-template-columns:92px 1fr} .contact-panel{margin-left:-20px;margin-right:-20px;padding:30px 20px} .site-footer{flex-direction:column;padding-left:20px;padding-right:20px} .case-pager{grid-template-columns:1fr} .case-pager .is-next{text-align:left} .case-related-list a{align-items:flex-start;flex-direction:column;gap:4px} }