/* Z Lab / Studio 58. A scoped presentation layer over the existing tools. */
:root{--ink:#191c1a;--muted:#69706b;--line:#dce0da;--green:#263e32;--green-2:#3f594b;--pale:#f0f2ee;--cream:#f6f6f2;--shadow:none;--studio-ease:cubic-bezier(.22,.68,0,1)}
body{background:#f6f6f2;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #849b69;outline-offset:5px}
.studio-skip{position:fixed;top:10px;left:16px;z-index:200;background:#fff;color:#111;padding:12px 20px;transform:translateY(-160%)}.studio-skip:focus{transform:none}
.topbar{height:76px;padding:0 4vw;border-color:#dce0da;background:rgba(246,246,242,.94);transition:transform .35s var(--studio-ease),background .3s,color .3s;box-shadow:none}
.topbar.is-hidden:not(:focus-within){transform:translateY(-102%)}
.topbar .brand{font-size:24px;font-weight:600;letter-spacing:-1px;flex-shrink:0}.topbar .brand small{display:none}.topbar .brand-mark{width:32px;height:32px;border-radius:0;background:transparent;color:inherit;font:600 29px Arial;position:relative;display:block}.brand-mark>span{position:absolute;top:-5px;right:-2px;font-size:16px}
.topbar nav{gap:clamp(10px,1.5vw,24px)}.topbar .nav-button{font-size:12px;font-weight:400;color:#666d67}.topbar .nav-button.active{color:#18291f}.topbar .nav-button.active:after{height:1px;border-radius:0;bottom:22px;left:4px;right:4px;background:currentColor}.topbar .career-nav[data-view=resume]{margin-left:0}
.topbar .account-button,.topbar .overview-button{height:36px;border-radius:0;border:1px solid #c5cbc5;background:transparent;box-shadow:none;color:#25352b;padding:0 12px;gap:8px}.topbar .account-button span{display:none}.topbar .overview-button span{background:none;color:inherit;border-radius:0;font-size:16px;width:auto;height:auto}.topbar .overview-button b,.topbar .account-button b{font-size:11px;font-weight:400}
body:has(#homeView.active) .topbar{position:fixed;left:0;right:0;color:#fff;border-color:#ffffff26;background:rgba(13,16,14,.72)}body:has(#homeView.active) .topbar .brand,body:has(#homeView.active) .topbar .nav-button{color:#bec4bf}body:has(#homeView.active) .topbar .nav-button.active{color:#fff}body:has(#homeView.active) .topbar .account-button,body:has(#homeView.active) .topbar .overview-button{color:#fff;border-color:#ffffff40}body:has(#homeView.active) .topbar .account-button:hover,body:has(#homeView.active) .topbar .overview-button:hover{background:#fff;color:#111}
#homeView{max-width:none;padding:0;color:#171c18}#homeView button{font-family:inherit}
.studio-hero{min-height:760px;min-height:max(720px,100svh);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;background:#101211;color:#fff;padding:140px 8vw 180px}
.studio-hero-media{position:absolute;inset:-50px 0;z-index:-2;transform:translateY(var(--hero-drift,0px));will-change:transform}.studio-hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 48%;filter:grayscale(1) brightness(.62);opacity:.85}
.studio-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,12,10,.94),rgba(8,12,10,.68) 38%,rgba(8,12,10,.08) 78%),linear-gradient(0deg,#101211 0%,transparent 35%)}
.studio-label{font:400 10px/1.6 Arial,sans-serif;letter-spacing:.16em;margin:0 0 28px;color:#6b756c}.studio-hero .studio-label{color:#c3ccc4;font-size:10px}.studio-label>span{display:inline-block;width:5px;height:5px;background:#bdd495;border-radius:50%;margin:0 10px 2px 0}
.studio-hero h1{font-family:Arial,"Microsoft YaHei",sans-serif;font-size:clamp(54px,6.4vw,102px);line-height:1.19;letter-spacing:-.065em;font-weight:500;margin:34px 0 28px}.title-period{color:#b9cf99}
.studio-hero-description{color:#b9c0ba;line-height:2;font-size:15px;letter-spacing:.04em;margin:0}
.studio-hero-actions{display:flex;align-items:center;gap:32px;margin-top:42px}.studio-button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:52px;padding:0 24px;border:1px solid #ecefe9;color:#141b15;background:#ecefe9;font-size:13px;transition:background .25s,color .25s}.studio-button:hover{background:transparent;color:#fff}.studio-button span,.studio-text-button span,.studio-space-links span{display:inline-block;transition:transform .3s var(--studio-ease)}.studio-button:hover span,.studio-text-button:hover span,.studio-space-links button:hover span{transform:translate(3px,-3px)}
.studio-text-button{display:inline-flex;align-items:center;gap:32px;background:none;border:0;border-bottom:1px solid #a5afa4;padding:12px 0;color:inherit;font-size:13px}.studio-hero .studio-text-button{border-color:#ffffff55;color:#e1e5df}.studio-hero-note{position:absolute;right:8vw;bottom:190px;display:grid;gap:10px;font-size:12px;text-align:right}.studio-hero-note>span{font-size:9px;letter-spacing:.15em;color:#c1c7c1}.studio-hero-note b{font-size:14px;font-weight:400}.studio-hero-note small{font-size:10px;color:#b4bcb5}
.studio-hero-bottom{position:absolute;left:8vw;right:8vw;bottom:34px;display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid #ffffff35;color:#aeb7af;font-size:10px;letter-spacing:.1em}.studio-hero-bottom button{border:0;color:#dde4da;background:transparent;font-size:11px;padding:10px}.studio-hero-bottom button span{margin-left:18px}
.studio-section{padding:110px 8vw;max-width:1800px;margin:auto}.studio-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:64px}.studio-section-head h2{font:400 clamp(32px,3.25vw,52px)/1.4 Arial,"Microsoft YaHei",sans-serif;letter-spacing:-.035em;margin:0}.studio-section-head .studio-label{margin-bottom:22px}.studio-section-head>p{font-size:13px;color:#747b73;line-height:1.9;margin:0 0 4px}
.studio-work-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:6vw;align-items:stretch}.studio-project-visual{position:relative;min-height:510px;background:#daddd5;overflow:hidden}.studio-project-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.65);animation:studio-image-in .6s var(--studio-ease)}.studio-project-visual>img[data-project-image="1"]{object-position:center 62%}.studio-image-caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,#111b);padding:60px 24px 24px;display:flex;justify-content:space-between;color:#fff;gap:16px;font-size:10px;letter-spacing:.06em}
.studio-project-row{border-top:1px solid #cdd2ca;padding:0 0 24px;transition:border-color .3s}.studio-project-row:last-child{border-bottom:1px solid #cdd2ca}.studio-project-row.is-active{border-top-color:#233d2c}.studio-project-select{position:relative;display:block;width:100%;text-align:left;border:0;background:none;padding:25px 30px 12px 0}.studio-project-select>span{font-size:9px;color:#737d72;letter-spacing:.1em}.studio-project-select h3{margin:15px 0 0;font-size:clamp(19px,1.8vw,28px);line-height:1.5;font-weight:400;letter-spacing:-.04em}.studio-project-select i{position:absolute;right:2px;top:56px;font-style:normal;font-size:22px;color:#899386;transition:transform .3s}.studio-project-row.is-active .studio-project-select i{transform:rotate(45deg);color:#2a442f}.studio-project-description p{margin:0;max-width:390px;color:#747d72;font-size:12px;line-height:1.9}.studio-project-description>button{margin-top:12px;padding:6px 0;border:0;background:none;color:#24382a;font-size:11px}.studio-project-description>button:hover{text-decoration:underline;text-underline-offset:4px}.studio-project-description>button span{margin-left:18px}
.studio-spaces{max-width:none;background:#eaece5}.studio-spaces>.studio-section-head,.studio-space-list{max-width:1512px;margin-left:auto;margin-right:auto}.studio-space-row{display:grid;grid-template-columns:70px 1fr minmax(180px,.65fr);gap:25px;align-items:center;border-top:1px solid #c6ccc1;padding:40px 0;transition:padding .35s var(--studio-ease),background .3s}.studio-space-row:last-child{border-bottom:1px solid #c6ccc1}.studio-space-number{align-self:start;padding-top:6px;color:#7b8576;font-size:11px}.studio-space-row .studio-label{margin:0;font-size:9px}.studio-space-row h3{font-size:clamp(21px,2vw,31px);font-weight:400;margin:10px 0 14px;letter-spacing:-.04em}.studio-space-row p{font-size:12px;color:#6d7768;line-height:1.8;margin:0}.studio-space-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.studio-space-links button{display:flex;justify-content:space-between;gap:40px;min-width:160px;min-height:38px;border:0;border-bottom:1px solid #ccd1c7;background:none;padding:8px 0;text-align:left;font-size:12px;color:#283d2d}.studio-space-links button:hover{border-color:#283d2d}
.studio-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:64px;padding-bottom:64px}.studio-stats>div{display:grid;gap:14px;border-left:1px solid #d3d8ce;padding-left:24px}.studio-stats b{font-size:clamp(28px,3.2vw,46px);font-weight:400;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.studio-stats span{color:#7a8275;font-size:10px}
.studio-footer{max-width:none;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:35px;background:#121913;color:#dfe4db;padding-top:55px;padding-bottom:36px}.studio-footer-brand{font-size:40px;color:#eff2ec;text-decoration:none;letter-spacing:-.05em}.studio-footer-brand>span{display:block;font-size:10px;color:#a4b09e;letter-spacing:.1em;margin-top:12px}.studio-footer>p{font-size:15px;font-weight:400;color:#b1bfaa}.studio-footer button{padding:12px 0;border:0;border-bottom:1px solid #ffffff40;background:none;color:#dfe4db;font-size:11px}.studio-footer small{grid-column:1/-1;border-top:1px solid #ffffff20;padding-top:24px;font-size:9px;letter-spacing:.12em;color:#87967f}
/* Shared chrome and content typography; resume paper retains its own print design. */
.view:not(#homeView){padding-top:60px}.page-head h1{font-family:inherit;font-weight:400;line-height:1.35}.page-head>div>p:last-child{font-size:13px;line-height:1.9}.page-head{margin-bottom:38px}.primary-button,.secondary-button,.load-more{border-radius:2px;box-shadow:none;min-height:40px;font-weight:500}.primary-button:hover{box-shadow:none}.editor-card,.preview-wrap,.job-search-card,.resume-signal,.job-card,.tool-card,.study-panel,.play-card,.life-card,.guide-card,.project-card-grid>article,.portfolio-overview,.underwater-case-study,.battery-case-study{border-radius:4px;box-shadow:none;background:#fff;border-color:#d9dfd5}.project-card-grid h2,.portfolio-overview h2,.underwater-case-head h2,.battery-case-head h2,.tool-card h2,.study-panel h2,.guide-card h3{font-family:inherit;font-weight:500}.portfolio-skill-grid article,.underwater-metrics article,.underwater-gallery figure,.battery-gallery figure{border-radius:2px}.project-status,.project-tags span,.job-tags span{border-radius:2px}.view.active:not(#homeView){animation:studio-view-in .35s var(--studio-ease)}
.function-dialog{width:min(1200px,calc(100% - 48px));max-height:calc(100svh - 64px);border:1px solid #394136;border-radius:0;background:#121913;color:#f0f3eb;padding:48px;box-shadow:none}.function-dialog[open]{animation:studio-menu-in .3s var(--studio-ease)}.function-dialog::backdrop{background:#0a100ae6;backdrop-filter:blur(10px)}.function-dialog-head h2{font:400 40px/1.3 Arial,"Microsoft YaHei",sans-serif}.function-dialog-head>p:last-child{font-size:12px;color:#a8b1a2}.function-dialog .eyebrow{color:#97ab89}.function-dialog .dialog-close{background:none;border:1px solid #5c6955;border-radius:0;color:#fff;width:38px;height:38px;right:20px;top:20px}.function-dialog-grid{gap:32px;margin-top:36px}.function-dialog-grid>section,.function-dialog-grid>section.career-dialog-group{background:none;border:0;border-radius:0;padding:0}.function-dialog-grid header{border-color:#3a4534}.function-dialog-grid header>i{display:none}.function-dialog-grid header b{color:#fff;font:400 22px Arial,"Microsoft YaHei",sans-serif}.function-dialog-grid header span{color:#97ab89}.function-dialog-grid section>button{border:0;border-bottom:1px solid #303a2c;border-radius:0;background:none;color:#e3e9de;padding:14px 0;transition:padding .25s,background .25s}.function-dialog-grid section>button span{color:#e3e9de;font-size:12px}.function-dialog-grid section>button small{color:#a5b29b;font-size:10px}.function-dialog-grid section>button:hover{padding-inline:12px;background:#283422;border-color:#4b5c40}
[data-reveal].reveal-pending{opacity:0;transform:translateY(28px)}[data-reveal]{transition:opacity .7s var(--studio-ease),transform .7s var(--studio-ease)}
@keyframes studio-view-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes studio-image-in{from{opacity:.25;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@keyframes studio-menu-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.studio-space-row:hover{padding-left:16px;padding-right:16px;background:#e1e5da}.studio-project-select:hover h3{color:#49643e}}
@media(min-width:721px) and (max-width:1250px){.topbar nav .career-nav{display:none}.topbar .overview-button b{display:block}}
@media(max-width:1000px){.studio-hero-note{display:none}.studio-hero{padding-inline:6vw}.studio-section{padding:80px 6vw}.studio-work-layout{gap:30px}.studio-project-visual{min-height:490px}.studio-section-head{margin-bottom:42px}.studio-space-row{grid-template-columns:40px 1fr 180px;gap:16px}.studio-stats{padding-block:50px}.studio-footer{padding-block:50px}.topbar .account-button b{display:block}}
@media(max-width:720px){body{padding-bottom:66px}.topbar{height:64px;min-height:64px;padding-inline:22px}.topbar nav{display:none}.topbar .brand{font-size:23px}.topbar .overview-button b{display:block}.topbar .account-button b{display:block}.topbar .overview-button,.topbar .account-button{padding:0 9px;min-width:0}.studio-hero{min-height:760px;min-height:calc(100svh - 20px);padding:140px 24px 150px;align-items:center}.studio-hero-media img{object-position:62% center;filter:grayscale(1) brightness(.5)}.studio-hero:after{background:linear-gradient(90deg,#09100be6,#09100b55),linear-gradient(0deg,#101211,transparent 45%)}.studio-hero h1{font-size:clamp(48px,10.5vw,74px);line-height:1.25;margin-top:30px}.studio-hero .studio-label{font-size:8px;letter-spacing:.1em}.studio-hero-description{font-size:12px;line-height:2}.studio-hero-actions{gap:22px;flex-wrap:wrap;margin-top:32px}.studio-button{min-height:48px;padding:0 17px;gap:25px;font-size:12px}.studio-text-button{font-size:12px;gap:16px}.studio-hero-bottom{left:24px;right:24px;bottom:28px;letter-spacing:0;font-size:9px}.studio-hero-bottom>span:last-child{display:none}.studio-section{padding:64px 24px}.studio-section-head{align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:32px}.studio-section-head h2{font-size:32px}.studio-section-head>p{font-size:12px}.studio-label{font-size:9px;margin-bottom:18px}.studio-work-layout{grid-template-columns:1fr;gap:28px}.studio-project-visual{min-height:0;aspect-ratio:4/3}.studio-project-select h3{font-size:23px}.studio-project-select{padding-top:22px}.studio-project-description p{font-size:12px;max-width:none}.studio-image-caption{padding:45px 16px 16px;font-size:8px}.studio-project-row{padding-bottom:18px}.studio-space-row{grid-template-columns:24px 1fr;padding:28px 0;gap:12px}.studio-space-row h3{font-size:24px}.studio-space-links{grid-column:2;align-items:stretch;flex-direction:row;flex-wrap:wrap;gap:6px 22px;margin-top:8px}.studio-space-links button{min-width:0;gap:24px;min-height:44px;font-size:12px}.studio-space-row p{font-size:11px}.studio-space-row .studio-label{font-size:8px}.studio-stats{grid-template-columns:repeat(2,1fr);gap:28px 16px;padding-block:42px}.studio-stats b{font-size:32px}.studio-stats>div{padding-left:16px;gap:10px}.studio-stats span{font-size:9px}.studio-footer{grid-template-columns:1fr auto;gap:24px}.studio-footer-brand{font-size:36px}.studio-footer>p{grid-column:1;grid-row:2;font-size:13px;margin:0}.studio-footer>button{grid-column:2;grid-row:1}.studio-footer small{margin-top:12px}.view:not(#homeView){padding-top:32px}.function-dialog{width:100%;max-width:none;height:100svh;max-height:100svh;margin:0;padding:64px 24px 36px}.function-dialog-head h2{font-size:32px}.function-dialog-grid{grid-template-columns:1fr;gap:32px}.function-dialog-grid>section.career-dialog-group{grid-column:auto}.function-dialog-grid section>button{min-height:46px}.mobile-dock{left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #d5ddcf;background:#f6f6f2f5;box-shadow:none;padding:8px 6px max(8px,env(safe-area-inset-bottom));display:flex;overflow-x:auto}.mobile-dock button{flex:1 0 44px;min-height:42px;border-radius:0;font-size:9px;gap:4px}.mobile-dock button i{font-size:13px}.mobile-dock button.active{background:#e4e9de;color:#21341e}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.studio-hero-media{transform:none;will-change:auto}[data-reveal].reveal-pending{opacity:1;transform:none}}
/* Keep menus and dense workspaces as readable as the landing page. */
html{scrollbar-gutter:stable}body:has(dialog[open]){overflow:hidden}
.focus-card,.study-tasks-card,.heatmap-card,.learning-card,.study-summary article,.game-card,.tracker-stats article,.tracker-card{border-radius:4px;box-shadow:none;background:#fff;border-color:#d9dfd5}
.panel-heading h2,.study-summary b,.focus-clock b,.tracker-stats b{font-family:Arial,"Microsoft YaHei",sans-serif;font-weight:500}
.study-summary article{border:0;border-left:1px solid #d1d8cb;background:transparent}.study-summary b{font-size:28px}.study-summary span,.study-summary small{font-size:11px}.local-badge,.play-badge{border:0;background:none;box-shadow:none;padding-left:0}.panel-heading h2{font-size:21px}.focus-clock{box-shadow:none}.guide-hero,.guide-toolbar,.guide-sources,.tracker-stats article{border-radius:4px;box-shadow:none}.guide-hero{background:#172319}.guide-hero h1{font-family:Arial,"Microsoft YaHei",sans-serif;font-weight:400}
.topbar .overview-button span:before,.topbar .overview-button span:after{display:none}
#selectedWork,#studioSpaces{scroll-margin-top:76px}.studio-hero h1:focus,.studio-section:focus{outline:none}
.projects-view p{font-size:13px;line-height:1.9}.projects-view small,.projects-view figcaption,.projects-view .project-verification span,.projects-view .underwater-verification,.projects-view .underwater-boundary{font-size:11px;line-height:1.8}
.projects-view h2,.projects-view h3,.projects-view .underwater-metrics b{font-family:Arial,"Microsoft YaHei",sans-serif;font-weight:500}
.projects-view .underwater-architecture,.projects-view .underwater-architecture-flow>div,.projects-view .underwater-verification,.projects-view .battery-flow,.projects-view .project-verification,.projects-view .competition-spotlight,.projects-view .project-boundary{border-radius:2px;box-shadow:none;background:#eef0eb}
.projects-view .underwater-metrics span,.projects-view .underwater-architecture-flow strong,.projects-view .battery-flow span,.projects-view .project-card-top>span{font-size:11px}.projects-view .underwater-architecture-flow small{font-size:10px}
.tool-card header p,.study-panel header p,.guide-card>p,.job-card .company,.job-description{font-size:12px;line-height:1.8}.job-description{height:auto;min-height:42px;max-height:65px}.job-meta span,.job-tags span{font-size:10px}
@media(max-width:720px){.function-dialog .dialog-close{position:fixed;top:18px;right:24px;z-index:2;background:#121913}.projects-view p{font-size:12px}.projects-view small,.projects-view figcaption{font-size:10px}.function-dialog-grid section>button{gap:12px}.function-dialog-grid section>button small{max-width:52%;text-align:right;line-height:1.6}}
@media print{.studio-skip,.studio-hero,.studio-section{display:none!important}.topbar{display:none!important}}

/* Robot concept artwork: keep the subject clear and the original controls intact. */
.studio-hero-media{inset:76px 0 -60px}
.studio-hero-media img{object-position:right top;filter:brightness(.94);opacity:1}
.studio-hero:after{background:linear-gradient(90deg,rgba(8,10,12,.3),transparent 65%),linear-gradient(0deg,#101211 0%,rgba(16,18,17,.1) 32%,transparent 60%)}
.studio-hero-note{bottom:150px;text-shadow:0 2px 15px #000}
@media(max-width:720px){
 .studio-hero{min-height:max(850px,100svh);padding:410px 24px 142px;align-items:flex-end}
 .studio-hero-media{inset:64px 0 auto;height:520px;transform:none;will-change:auto}
 .studio-hero-media img{object-position:78% top;filter:brightness(.9)}
 .studio-hero:after{background:linear-gradient(0deg,#101211 0%,#101211 28%,rgba(16,18,17,.75) 45%,transparent 72%)}
 .studio-hero h1{font-size:50px;margin-top:22px}
 .studio-hero .studio-label{margin-bottom:16px}
}