:root{--bg:#F7F5F0;--white:#FFFEFB;--ink:#192720;--sub:#58685E;--line:#D9DDD5;--green:#24483D;--tint:#E7EDE5;--accent:#BD684D;--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}img{display:block;max-width:100%}::selection{background:#C9E7CB}
.container{width:min(1140px,calc(100% - 48px));margin:auto}
header{position:sticky;top:0;z-index:30;background:rgba(247,245,240,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-weight:900;font-size:22px;letter-spacing:-1.6px}.logo i{font-style:normal;color:var(--accent)}.nav-right{display:flex;gap:25px;align-items:center}.nav-right a{font-size:13px;font-weight:750;color:#405348}.nav-right a:hover{color:var(--accent)}.contact-nav{background:var(--ink);color:#fff!important;padding:11px 17px;border-radius:999px}
.section-label{color:#8A6C59;font-weight:800;letter-spacing:2px;font-size:11px;text-transform:uppercase}
.hero{min-height:640px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:52px;padding-block:62px 70px}
.hero h1{font-size:clamp(65px,7.5vw,112px);font-weight:900;line-height:1.03;letter-spacing:-.085em;margin:24px 0 24px}.hero h1 em{font-style:normal;color:var(--green)}
.hero .intro{max-width:570px;font-size:18px;line-height:1.85;color:#44594D;margin:0 0 28px}.hero .intro b{color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:12px 18px;border-radius:10px;border:1px solid var(--green);font-size:13px;font-weight:800;background:transparent;color:var(--green);transition:transform .2s}.btn:hover{transform:translateY(-2px)}.btn.primary{background:var(--green);color:white}
.hero-meta{margin-top:34px;display:flex;gap:9px;flex-wrap:wrap}.mini-pill{padding:7px 11px;border-radius:8px;background:#E9ECE6;font-size:12px;font-weight:700;color:#426054}
.workspace{border:1px solid #C6D2C6;border-radius:20px;background:#FBFCF8;box-shadow:0 16px 48px rgba(19,51,37,.08);overflow:hidden;transform:rotate(1deg)}
.workspace-head{display:flex;align-items:center;justify-content:space-between;background:#E8EFE9;padding:13px 16px;border-bottom:1px solid #CFDCD0;font-family:ui-monospace,monospace;letter-spacing:1px;color:#466256;font-size:11px}.window-dots{display:flex;gap:6px}.window-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#C3CCBF}.window-dots i:first-child{background:#CE856F}.window-dots i:nth-child(2){background:#D6B76D}
.workspace-content{padding:22px;display:grid;gap:13px}.worktop{background:#263F35;color:white;border-radius:14px;padding:23px 24px}.worktop small{color:#ADC4B6;font-size:10px;letter-spacing:1.8px}.worktop strong{display:block;font-size:25px;letter-spacing:-1px;margin-top:11px;line-height:1.3}.worktop p{font-size:13px;line-height:1.75;color:#CCDED2;margin:10px 0 0}
.work-cells{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.workcell{background:#F0F3EC;border:1px solid #E0E7DF;padding:15px;border-radius:12px;min-height:112px}.workcell .symbol{font-size:22px;line-height:1.1}.workcell b{display:block;margin:10px 0 4px;font-size:14px}.workcell small{font-size:12px;color:#5D7565}

.section{padding:72px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:27px}.section-head h2{margin:10px 0 0;font-size:clamp(36px,4.5vw,58px);line-height:1.13;letter-spacing:-.055em}.section-head>p{margin:0;max-width:300px;color:var(--sub);font-size:14px;line-height:1.8}
.showcase{border-top:1px solid #BEC9BE;padding-top:28px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.tab{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:10px;padding:15px 19px;background:#EFEFE9;border:1px solid #DCE0D6;border-radius:13px;color:#48594E;transition:.2s}.tab span{font-size:12px;font-weight:800;letter-spacing:1px;color:#92A094}.tab b{font-size:16px;letter-spacing:-.03em}.tab.active{background:var(--green);color:white;border-color:var(--green)}.tab.active span{color:#BED6C8}.tab:hover:not(.active){background:#E2E9E0}
.project-panel{display:grid;grid-template-columns:1.08fr .92fr;background:var(--white);border:1px solid var(--line);border-radius:19px;overflow:hidden;height:410px;box-shadow:0 9px 35px #1C302415}
.project-art{background:#E9EDE6;position:relative;height:410px;overflow:hidden}.project-art img{width:100%;height:100%;object-fit:cover}.project-art[data-kind="scilytic"] img{object-position:center 24%}.project-art[data-kind="city"] img{object-fit:cover;object-position:center 48%}.project-art[data-kind="wenchuang"] img{object-fit:cover}
.art-label{position:absolute;left:17px;bottom:15px;padding:8px 12px;background:rgba(17,36,27,.82);color:#fff;border-radius:8px;font-size:11px;font-weight:750;backdrop-filter:blur(6px)}
.project-details{padding:29px 32px;display:flex;flex-direction:column;justify-content:center}.project-tag{font-size:11px;font-weight:850;color:#9A674C;letter-spacing:1.5px;text-transform:uppercase}.project-details h3{font-size:clamp(28px,3vw,39px);line-height:1.15;letter-spacing:-.05em;margin:14px 0 13px}.project-details p{color:#4B6052;font-size:15px;line-height:1.88;margin:0 0 14px}.project-brief{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}.project-brief li{font-size:13px;color:#475D50;line-height:1.6}.project-brief li:before{content:'↗ ';color:var(--accent);font-weight:900}.project-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}.project-links a,.project-links button{border:1px solid #CAD5CB;color:var(--green);background:transparent;border-radius:9px;padding:10px 13px;font-weight:800;font-size:12px}.project-links a:hover,.project-links button:hover{background:#E8EEE7}

.exp{padding:45px 0 60px;background:#EFEFEA;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.exp .section-head{margin-bottom:22px}.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.exp-card{background:var(--white);border:1px solid #D9E0D8;border-radius:14px;padding:19px;min-height:166px}.exp-card .top{display:flex;align-items:center;justify-content:space-between}.exp-icon{font-size:23px}.exp-status{font-size:10px;font-weight:800;color:#8D6E5A;letter-spacing:.5px}.exp-card h3{margin:13px 0 6px;font-size:19px;letter-spacing:-.03em}.exp-card p{margin:0;color:#52675B;font-size:13px;line-height:1.75}

.outro{padding:66px 0 20px}.outro-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:17px}.about-card,.contact-card{border:1px solid var(--line);border-radius:18px;padding:25px 27px}.about-card{background:#FFFEFB}.about-card h2,.contact-card h2{margin:8px 0 12px;font-size:36px;letter-spacing:-.055em;line-height:1.13}.about-card>p{max-width:580px;color:#4B6254;font-size:14px;line-height:1.85;margin:0 0 18px}.hobbies{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hobby{background:#F2F2ED;border:1px solid #E2E5DF;border-radius:10px;text-align:center;padding:11px 5px}.hobby span{display:block;font-size:22px;margin-bottom:5px}.hobby b{font-size:12px}
.contact-card{background:var(--green);color:white}.contact-card .section-label{color:#B9CFBC}.contact-card p{font-size:13px;color:#C8DBD0;line-height:1.8}.contact-lines{display:grid;gap:10px;margin:20px 0}.contact-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;background:rgba(255,255,255,.09);font-size:14px;font-weight:750}.contact-line small{font-size:11px;font-weight:650;color:#D1DFD4}.contact-line button{border:none;background:#F1F6EE;color:#284C3F;border-radius:7px;padding:7px 9px;font-size:11px;font-weight:800}.contact-line a{word-break:break-all}.contact-line a:hover{text-decoration:underline}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.contact-actions a{color:#ECF3E7;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.footer{border-top:1px solid var(--line);margin-top:27px;padding:17px 0 24px;color:#718276;font-size:11px}.footer .container{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,18px);background:#152B21;color:white;box-shadow:0 8px 30px #1F31204D;border-radius:100px;padding:12px 18px;font-size:13px;font-weight:700;z-index:80;opacity:0;pointer-events:none;transition:.24s}.toast.show{opacity:1;transform:translate(-50%,0)}
.dialog{border:none;padding:0;border-radius:17px;background:var(--white);width:min(560px,calc(100vw - 28px));box-shadow:0 20px 80px #0B1C1477}.dialog::backdrop{background:#07130CAA;backdrop-filter:blur(3px)}.dialog-box{padding:26px}.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}.dialog h3{font-size:28px;line-height:1.2;margin:10px 0 15px}.dialog p,.dialog li{font-size:14px;color:#44584C;line-height:1.85}.dialog ul{padding-left:20px}.close{border:1px solid #D9DFD7;background:#EDF1EB;border-radius:9px;padding:7px 12px;font-weight:800}.dialog-meta{font-size:12px;color:#875D4C;background:#F8F3ED;padding:12px;border-radius:9px;margin-top:16px}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;gap:33px;padding-block:45px}.workspace{max-width:650px;transform:none}.section-head{align-items:start;flex-direction:column;gap:12px}.section-head>p{max-width:650px}.project-panel{grid-template-columns:1fr;height:auto}.project-art{min-height:290px;height:290px}.project-details{padding:23px 25px}.outro-grid{grid-template-columns:1fr}.tabs{gap:8px}}
@media(max-width:600px){.container{width:calc(100% - 32px)}.nav{height:62px}.nav-right{gap:14px}.nav-right a:not(.contact-nav){display:none}.hero{padding:35px 0 42px}.hero h1{font-size:clamp(53px,14vw,82px);letter-spacing:-.075em;margin:19px 0}.hero .intro{font-size:15px;line-height:1.8}.workspace-content{padding:14px}.workspace-head{padding:10px 12px}.worktop{padding:19px}.worktop strong{font-size:21px}.work-cells{gap:7px}.workcell{padding:12px;min-height:93px}.workcell small{font-size:11px}.hero-meta{margin-top:24px}.section{padding:48px 0}.section-head h2{font-size:36px}.tabs .tab{display:grid;justify-content:center;text-align:center;padding:11px 4px;gap:3px}.tab span{font-size:10px}.tab b{font-size:13px}.project-art{height:240px;min-height:240px}.project-details h3{font-size:28px}.project-details p{font-size:14px}.exp{padding:44px 0}.exp-grid{grid-template-columns:1fr;gap:9px}.exp-card{min-height:0;padding:14px 17px}.exp-card h3{font-size:17px;margin:6px 0 4px}.exp-card p{font-size:12px}.exp-card .top{line-height:1}.exp-icon{font-size:18px}.outro{padding-top:46px}.about-card,.contact-card{padding:21px}.about-card h2,.contact-card h2{font-size:31px}.hobbies{gap:6px}.hobby{padding:9px 3px}.hobby span{font-size:20px}.hobby b{font-size:11px}.contact-line{flex-wrap:wrap}.footer{margin-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* V6: Media showroom. A compact overlay keeps the original short page length. */
.project-art.is-interactive{cursor:pointer}
.project-art.is-interactive::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,27,22,.3),transparent 55%);pointer-events:none}
.project-art .art-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.7);background:rgba(23,46,38,.88);color:white;border-radius:999px;padding:13px 19px;font-size:14px;font-weight:800;box-shadow:0 15px 35px rgba(0,0,0,.21);z-index:2;cursor:pointer;white-space:nowrap}
.project-art .art-play:hover{background:#122e23}.project-art .art-play[hidden]{display:none}
.project-art .art-label{z-index:3;max-width:85%}
.project-links .media-primary{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.project-links .media-primary:hover{background:#366252!important}
.media-dialog{border:0;padding:0;width:min(980px,calc(100vw - 26px));max-width:none;max-height:calc(100dvh - 25px);margin:auto;background:var(--white);border-radius:20px;box-shadow:0 30px 110px rgba(6,27,17,.48);overflow:auto;color:var(--ink)}
.media-dialog::backdrop{background:rgba(8,18,14,.78);backdrop-filter:blur(5px)}
.media-wrap{padding:22px}.media-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:14px}
.media-head h3{margin:3px 0 4px;font-size:clamp(19px,3vw,28px);letter-spacing:-.03em}.media-head p{margin:0;color:var(--sub);font-size:13px;line-height:1.65}
.media-switch{display:flex;gap:8px;background:#EFF2ED;padding:6px;border-radius:12px;margin-bottom:13px}
.media-switch button{flex:1;border:0;border-radius:9px;padding:12px 10px;font-size:13px;font-weight:800;background:transparent;color:#4d6356}
.media-switch button[aria-selected="true"]{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(28,64,45,.16)}
.media-panel[hidden]{display:none}
.media-video{display:block;width:100%;aspect-ratio:16/9;max-height:60dvh;background:#071611;border-radius:12px;object-fit:contain}
.media-caption{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#637469;line-height:1.7}
.media-caption a,.media-actions a{color:#205a45;text-decoration:underline;text-underline-offset:3px;font-weight:750}
.slide-viewport{border-radius:12px;overflow:hidden;background:#e9eeec;border:1px solid var(--line)}
.slide-viewport img{width:100%;aspect-ratio:16/9;object-fit:contain}
.slide-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.slide-controls button{background:#e9f0e9;border:1px solid #cbd9ce;color:#24483d;border-radius:9px;padding:10px 14px;font-size:13px;font-weight:800}
.slide-controls button:disabled{opacity:.45;cursor:not-allowed}
.slide-position{color:#4c6154;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.media-context{margin-top:12px;padding:11px 13px;background:#f3f1e9;color:#5c655c;border:1px solid #e0e1d7;border-radius:9px;font-size:12px;line-height:1.7}
.media-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:13px}
@media(max-width:600px){.media-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:14px}.media-wrap{padding:13px}.media-head h3{font-size:20px}.media-head p{font-size:12px}.media-switch button{font-size:12px;padding:10px 4px}.media-caption{font-size:11px}.slide-controls button{padding:9px 10px;font-size:12px}.media-video{max-height:57dvh}}


/* V7 Personal identity, categorical stickers & real-photo staging */
.hero{gap:38px;min-height:600px;padding-block:48px 55px}
.hero h1{font-size:clamp(58px,5vw,74px);line-height:1.03;letter-spacing:-.075em;margin:21px 0 21px}
.hero .intro{font-size:16px;line-height:1.9;margin-bottom:25px}
.identity-groups{display:grid;gap:12px;margin-top:24px}
.identity-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.identity-title{font-size:12px;font-weight:800;color:#607167;white-space:nowrap;min-width:100px}
.identity-tags{display:flex;flex-wrap:wrap;gap:7px}
.identity-tag{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;letter-spacing:-.01em;border:1px solid #dce1d4;color:#2d5849;background:#eaf1e6;line-height:1.2}
.identity-group.mind .identity-tag{background:#fff1dc;border-color:#efd9b8;color:#806042}
.identity-group.life .identity-tag{background:#e7e8fa;border-color:#d4d7ef;color:#505b8d}
.portrait-workspace{transform:rotate(1.2deg);overflow:hidden}
.portrait-body{padding:15px;background:#fffcf5}
.portrait-main{height:318px;background:linear-gradient(145deg,#E2E9DA 0%,#EFDCC5 47%,#C7D6CC 100%);border-radius:13px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.portrait-main img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.portrait-main img[hidden],.photo-modal-body img[hidden]{display:none}
.portrait-placeholder{width:100%;height:100%;display:flex;justify-content:space-between;flex-direction:column;padding:22px 25px;position:relative}
.portrait-scribble{font-family:Georgia,serif;letter-spacing:-11px;font-size:clamp(90px,11vw,146px);font-style:italic;color:#24483D;line-height:1.2;align-self:center;margin-top:25px;transform:rotate(-8deg);text-shadow:8px 9px 0 #e7efda}
.portrait-scribble span{color:#de8168;font-size:60px;vertical-align:top;letter-spacing:0}
.portrait-placeholder-copy{font-size:15px;font-weight:800;color:#224536}
.portrait-placeholder-copy small{display:block;color:#647b6d;font:700 10px ui-monospace,monospace;letter-spacing:1.5px;margin-top:6px}
.portrait-number{position:absolute;top:12px;left:13px;font:800 10px ui-monospace,monospace;letter-spacing:1.2px;color:#2d5342;background:#f7f9edb8;border-radius:30px;padding:6px 9px}
.portrait-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 3px 4px}
.portrait-sign small{display:block;font:800 10px ui-monospace,monospace;letter-spacing:1.1px;color:#9d7c60}
.portrait-sign strong{display:block;font-size:20px;line-height:1.25;letter-spacing:-.05em;margin-top:7px}
.portrait-controls{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex-shrink:0}
.photo-picker,#photo-zoom{font-size:11px;font-weight:850;border-radius:9px;padding:10px 12px;border:1px solid #c8d8cb;color:#2e5a45;background:#ebf3ea;cursor:pointer}
#photo-zoom{background:#fff;border-color:#d9e2d6}
#photo-chooser{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.portrait-caption{font-size:10px;color:#79877a;line-height:1.6;border-top:1px dashed #dde5da;padding:11px 3px 0}
.exp-grid{grid-template-columns:repeat(3,1fr)}
.exp-card.side-highlight{padding:0;overflow:hidden;min-height:0;display:flex;flex-direction:column}
.exp-image{height:144px;position:relative;overflow:hidden;border-bottom:1px solid #dce2d8}
.exp-image img{width:100%;height:100%;object-fit:cover;object-position:center 23%}
.exp-copy{padding:15px 17px 18px;display:flex;flex-direction:column;flex:1;gap:0}
.exp-copy .top{gap:8px}.exp-category{font-size:11px;font-weight:850;color:#486954}
.exp-copy h3{font-size:18px;margin:10px 0 6px}.exp-copy p{font-size:12px;line-height:1.8}
.exp-tony{background:radial-gradient(circle at 75% 30%,#f5bead 0%,#eadcd3 34%,#d2dfe0 100%);display:grid;place-items:center}
.tony-symbol{font-size:80px;filter:drop-shadow(7px 7px 0 #f6eee4);transform:rotate(-22deg)}
.tony-stamp{position:absolute;left:15px;bottom:13px;background:#284a41;color:#fff;font:800 10px ui-monospace,monospace;padding:6px 10px;border-radius:999px}
.exp-visual-label{position:absolute;bottom:10px;right:10px;background:#183428d9;color:#fff;border-radius:6px;padding:5px 8px;font-size:10px;font-weight:750}
.exp-content{display:grid;place-items:center;background:#dfeae2}
.content-paper{width:65%;height:135px;background:#fffefb;border-radius:10px 10px 0 0;transform:rotate(-5deg) translateY(26px);box-shadow:9px 9px 0 #b7c9bc;border:1px solid #a6b8ac;padding:15px 17px}
.content-paper span{font-size:10px;font-weight:800;letter-spacing:1.1px;color:#407058}
.content-paper div{height:7px;background:#dbe4da;border-radius:10px;margin-top:11px}.content-paper div.short{width:60%}
.content-paper b{display:block;font-size:14px;color:#274d39;margin-top:14px}
.hobby span{font-size:22px}
.photo-dialog{border:0;border-radius:20px;padding:0;width:min(700px,calc(100vw - 20px));max-height:96dvh;background:#fffefa;box-shadow:0 28px 100px #07180f66;color:var(--ink)}
.photo-dialog::backdrop{background:#09160eb3;backdrop-filter:blur(7px)}
.photo-dialog-inner{padding:18px}.photo-modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:12px}
.photo-modal-header small{font-size:10px;color:#69826f;font-weight:850;letter-spacing:1.5px}.photo-modal-header h3{margin:5px 0 0;font-size:22px}
#photo-dialog-close{border:0;background:#f0f3eb;border-radius:9px;padding:10px 14px;font-size:16px}
.photo-modal-body{background:#e7ede0;border-radius:14px;max-height:67dvh;min-height:180px;display:grid;place-items:center;overflow:hidden}.photo-modal-body img{display:block;max-width:100%;max-height:67dvh;object-fit:contain}
.no-photo{max-width:400px;padding:35px;color:#587568;font-size:14px;line-height:1.8;text-align:center}
.photo-modal-tip{font-size:11px;color:#748476;line-height:1.7;margin:12px 3px 0}
@media(max-width:900px){.portrait-workspace{transform:none;max-width:600px}.portrait-main{height:360px}.portrait-scribble{font-size:130px}}
@media(max-width:600px){.hero{padding:32px 0 35px}.hero h1{font-size:clamp(44px,12vw,58px)}.hero .intro{font-size:14px}.identity-groups{gap:12px}.identity-group{align-items:flex-start;gap:7px}.identity-title{width:100%;min-width:0}.identity-tag{font-size:11px;padding:7px 10px}.portrait-main{height:260px}.portrait-scribble{font-size:108px}.portrait-bottom{gap:10px}.portrait-sign strong{font-size:17px}.photo-picker,#photo-zoom{padding:9px 10px}.exp-image{height:135px}.exp-grid{grid-template-columns:1fr}.exp-card.side-highlight{display:grid;grid-template-columns:125px 1fr;min-height:130px}.exp-image{height:100%;min-height:138px;border-right:1px solid #e1e5dd;border-bottom:0}.exp-copy{padding:11px 12px}.exp-copy h3{margin:7px 0 4px;font-size:16px}.exp-copy p{font-size:11px;line-height:1.65}.exp-category,.exp-status{font-size:9px}.tony-symbol{font-size:50px}.content-paper{width:88%;padding:10px}.content-paper b{font-size:11px}.exp-visual-label{font-size:8px;padding:4px 5px}.tony-stamp{font-size:8px;left:4px}}


/* V8 · original photography editorial gallery */
.portrait-workspace{transform:rotate(.7deg);overflow:hidden}
.portrait-body{padding:12px 14px 13px}
.portrait-main{height:345px;background:#d9ded6;cursor:zoom-in;position:relative;isolation:isolate}
.portrait-main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;transition:opacity .23s ease;display:block}
.portrait-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,15,10,.14) 0%,transparent 43%,rgba(4,15,10,.65) 100%);pointer-events:none}
.portrait-onphoto{position:absolute;bottom:17px;left:18px;right:18px;color:#fff;text-shadow:0 1px 14px #07140d44;display:grid;gap:4px}
.portrait-onphoto span{font-size:11px;font-weight:700;letter-spacing:1.5px;opacity:.9}
.portrait-onphoto strong{font-size:clamp(21px,2.5vw,33px);font-weight:850;letter-spacing:-1px;line-height:1.15}
.portrait-number{color:#203a2f;background:#fffdf2dc;top:14px;left:14px;font-weight:800}
.portrait-bottom{padding:14px 4px 9px}.portrait-sign strong{font-size:17px}
.portrait-controls{flex-direction:row;align-items:center;gap:7px}
.portrait-controls button{border:1px solid #d5dfd3;background:#f4f6ef;color:#2a5541;font-weight:850;min-width:36px;height:36px;border-radius:11px;padding:0 10px;cursor:pointer}
.portrait-controls button:hover{background:#deeadc}
.portrait-thumbs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;padding:4px 0 6px;scroll-snap-type:x proximity}
.photo-thumb{flex:0 0 43px;height:43px;border:2px solid transparent;padding:0;background:none;border-radius:8px;opacity:.65;overflow:hidden;cursor:pointer;scroll-snap-align:start;transition:.2s}
.photo-thumb[aria-pressed="true"]{border-color:#ec8461;opacity:1;transform:translateY(-1px)}.photo-thumb:hover{opacity:1}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.portrait-caption{padding-top:5px;border-top:none;color:#7c8a80}
.portrait-main:focus-visible,.photo-thumb:focus-visible,.portrait-controls button:focus-visible{outline:3px solid #ed8968;outline-offset:3px}
.photo-modal-body{background:#121714;min-height:180px;max-height:76dvh;display:grid;place-items:center}
.photo-modal-body img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:76dvh}
.photo-dialog{width:min(940px,calc(100vw - 20px));max-height:97dvh}
.photo-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0 0}
.photo-modal-foot span{font-weight:750;color:#385546;font-size:12px;letter-spacing:.5px;text-align:center}
.photo-modal-foot button{font-size:17px;min-width:42px;min-height:38px;border-radius:10px;border:1px solid #d9e2d6;background:#f5f7f2;color:#234734;cursor:pointer}
.training-story{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:18px;overflow:hidden;background:#172620;color:#fff;margin:16px 0 17px;min-height:240px}
.training-image{position:relative;height:100%;min-height:255px;overflow:hidden;background:#222}
.training-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 28%;filter:none}
.training-image span{position:absolute;bottom:12px;left:12px;color:white;background:#111b17b5;padding:6px 9px;border-radius:6px;font:700 9px ui-monospace,monospace;letter-spacing:.6px}
.training-words{padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.training-kicker{font:800 10px ui-monospace,monospace;letter-spacing:1.5px;color:#abcdb9}
.training-words h3{font-size:clamp(20px,2.5vw,27px);line-height:1.19;margin:2px 0;letter-spacing:-.04em;color:#fff}
.training-words p{font-size:12px;line-height:1.7;color:#e0ebe2;margin:0}
.training-words blockquote{border-left:2px solid #a8c6a0;padding-left:10px;margin:6px 0 0;font-size:12px;line-height:1.7;color:#f2f2de}
.training-words small{color:#a8bcb1;font-size:10px;line-height:1.5}
@media(max-width:950px){.portrait-workspace{transform:none}.portrait-main{height:370px}}
@media(max-width:650px){.portrait-main{height:320px}.portrait-thumbs{gap:5px}.photo-thumb{flex-basis:45px;height:43px}.portrait-onphoto strong{font-size:24px}.portrait-controls button{min-width:34px;padding:0 8px}.portrait-sign strong{font-size:16px}.training-story{grid-template-columns:1fr 1fr}.training-image{min-height:250px}.training-words{padding:13px;gap:7px}.training-words h3{font-size:19px}.training-words blockquote{font-size:11px}.training-words small{font-size:9px}}
@media(max-width:360px){.training-story{grid-template-columns:1fr}.training-image{height:200px;min-height:200px}.training-words{padding:18px}.portrait-main{height:270px}}
@media(prefers-reduced-motion:reduce){.portrait-main>img,.photo-thumb{transition:none}}


/* V9: Wenchuang case study, concise first view and expansive on-demand narrative. */
.project-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin:1px 0 14px}
.project-capabilities span{display:inline-flex;gap:7px;align-items:center;padding:8px 10px;border-radius:9px;background:#f0f4ee;border:1px solid #dce7db;color:#6a7d71;font:750 11px ui-monospace,SFMono-Regular,monospace}
.project-capabilities b{font-family:Inter,'PingFang SC',system-ui,sans-serif;font-size:12px;color:#24483d}
.project-panel{transition:box-shadow .35s ease,transform .35s ease}
.project-panel:hover{box-shadow:0 20px 56px rgba(24,54,35,.11)}
.project-art img{transition:transform .65s cubic-bezier(.22,1,.36,1)}
.project-panel:hover .project-art img{transform:scale(1.025)}
.tab{transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
.tab:hover:not(.active){transform:translateY(-2px)}
.dialog.case-open{width:min(900px,calc(100vw - 30px));max-width:none;max-height:calc(100dvh - 28px);overflow-y:auto;border:1px solid rgba(255,255,255,.5)}
.dialog.case-open .dialog-box{padding:31px}
.dialog.case-open #dialog-bullets{display:none}
.dialog.case-open #dialog-note{display:none}
.dialog.case-open #dialog-text{font-size:15px;margin:0 0 21px;color:#506459;max-width:680px}
.dialog.case-open #dialog-title{font-size:clamp(30px,4.5vw,47px);margin:7px 0 8px;letter-spacing:-.06em}
.case-study[hidden]{display:none}
.case-hero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;background:#18362b;color:#f9f6ef;padding:29px;border-radius:17px;position:relative;overflow:hidden}
.case-hero:after{content:'';position:absolute;width:220px;height:220px;border:1px solid #ffffff24;border-radius:50%;right:-70px;top:-120px;pointer-events:none}
.case-kicker{font:850 10px ui-monospace,monospace;letter-spacing:1.7px;color:#9fae9f}
.case-hero h4{font-size:clamp(25px,3.2vw,37px);line-height:1.24;letter-spacing:-.055em;margin:12px 0 10px}
.case-hero h4 em{font-style:normal;color:#b5d3bd}
.case-hero p{font-size:13px;line-height:1.86;color:#dfebe1;max-width:580px;margin:0}
.case-seal{border-left:1px solid #ffffff35;padding:10px 0 8px 24px;min-width:136px}
.case-seal b{display:block;font-size:64px;font-family:Georgia,serif;font-weight:400;line-height:1}
.case-seal span{display:block;font-size:11px;color:#bdcfbf;line-height:1.5;margin-top:8px}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:15px}
.case-item{border-bottom:1px solid #e0e6dc;padding:23px 4px 22px;min-width:0}
.case-item .case-id{font:800 11px ui-monospace,monospace;color:#9d795f;letter-spacing:1.2px}
.case-item h5{font-size:19px;letter-spacing:-.045em;margin:10px 0 9px}
.case-item p{font-size:13px;line-height:1.85;color:#576b5c;margin:0}
.case-item strong{font-weight:800;color:#1c3c30}
.case-bottom{margin-top:23px}
.case-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 18px}
.case-tags span{font-size:11px;font-weight:720;color:#345e4a;border:1px solid #cfdccc;background:#edf3e8;border-radius:999px;padding:8px 11px}
.case-status{background:#f3f1e9;border-left:3px solid #c09776;padding:12px 14px;border-radius:4px 10px 10px 4px;font-size:12px;line-height:1.9;color:#687062}
/* Photo area: original pixels stay untouched; only surrounding page treatment changes. */
.training-story{border-radius:15px;overflow:hidden}
.training-words{background:#1f2c25;color:#f5f3eb}
.training-words p,.training-words small{color:#d4ded6}
.training-words blockquote{color:#f8f4ed}
.training-image img{filter:none!important}
.portrait-main img{filter:none!important}
@media(max-width:900px){.project-panel{height:auto}}
@media(max-width:600px){
 .dialog.case-open{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:14px}
 .dialog.case-open .dialog-box{padding:15px}
 .case-hero{grid-template-columns:1fr;padding:21px}
 .case-seal{display:none}
 .case-grid{grid-template-columns:1fr;gap:0}
 .case-item{padding:17px 3px}
 .case-item h5{font-size:18px}
 .project-capabilities{gap:6px}
 .project-capabilities span{padding:7px 9px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.project-panel,.project-art img,.tab{transition:none!important;transform:none!important}}


/* V9.2 · Consumer Venture Lab, nested in the existing Selected Work tab system. */
.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.tabs .tab{min-width:0}
#project-image[hidden],#consumer-visual[hidden],#consumer-study[hidden]{display:none!important}
.consumer-visual{height:100%;display:flex;flex-direction:column;justify-content:space-between;background:#18382e;color:#fff;padding:29px;position:relative;overflow:hidden;isolation:isolate}
.consumer-visual:before{content:"";position:absolute;width:370px;height:370px;border:1px solid rgba(255,255,255,.12);border-radius:50%;top:-180px;right:-100px;box-shadow:0 0 0 54px rgba(242,247,229,.035),0 0 0 110px rgba(242,247,229,.025);z-index:-1}
.consumer-visual-head,.consumer-visual-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#bed0c4;font:700 10px ui-monospace,monospace;letter-spacing:1.15px}
.consumer-visual-title{font-size:clamp(23px,2.75vw,35px);font-weight:870;letter-spacing:-.06em;line-height:1.18;margin:14px 0}
.consumer-visual-title em{font-style:normal;color:#b9d2bd}
.consumer-visual-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:145px;margin:0 0 13px}
.consumer-visual-panel{min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;padding:15px;border-radius:11px;border:1px solid #ffffff31;overflow:hidden}
.consumer-visual-panel.city{background:#ede5d7;color:#263d32}
.consumer-visual-panel.fitness{background:#264d42;color:#f6f4eb}
.consumer-visual-panel>span{font:800 9px ui-monospace,monospace;letter-spacing:1.4px;opacity:.7}
.consumer-visual-panel strong{font-size:clamp(17px,2.2vw,24px);letter-spacing:-.05em;z-index:1}
.consumer-visual-panel small{font-size:10px;line-height:1.7;opacity:.85;z-index:1}
.consumer-visual-panel.city i{position:absolute;width:105px;height:105px;border:1px solid #89775d55;border-radius:50%;bottom:-46px;right:-24px;box-shadow:0 0 0 19px #b1a78e23,0 0 0 38px #b1a78e18}
.consumer-pulse{display:flex;align-items:end;gap:4px;height:31px;margin-top:auto}
.consumer-pulse span{width:7px;height:20px;border-radius:6px;background:#b5d5bb;opacity:.85}
.consumer-pulse span:nth-child(2),.consumer-pulse span:nth-child(6){height:10px}.consumer-pulse span:nth-child(4){height:30px}.consumer-pulse span:nth-child(5){height:25px}
.dialog.consumer-open{width:min(910px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 20px);overflow-y:auto}
.dialog.consumer-open .dialog-box{padding:29px}
.dialog.consumer-open #dialog-bullets,.dialog.consumer-open #dialog-note{display:none}
.dialog.consumer-open #dialog-title{font-size:clamp(30px,4vw,43px);margin-bottom:9px}
.dialog.consumer-open #dialog-text{font-size:13px;margin-bottom:18px}
.consumer-study-hero{padding:28px 30px;border-radius:15px;background:#223b32;color:white}
.consumer-study-eyebrow{font:800 11px ui-monospace,monospace;letter-spacing:1.2px;color:#8fbbab}
.consumer-study-hero h4{font-size:clamp(25px,3.3vw,36px);line-height:1.23;letter-spacing:-.05em;margin:14px 0}
.consumer-study-hero h4 em{font-style:normal;color:#bdd6bb}
.consumer-study-hero p{margin:0;color:#e3ebe0;max-width:690px;font-size:14px;line-height:1.86}
.consumer-study-hero strong{color:white}
.consumer-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:18px 0}
.consumer-case-item{border:1px solid #dce4d9;border-radius:14px;padding:21px;background:#fcfdf8;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.consumer-case-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.consumer-case-top>span{font:800 10px ui-monospace,monospace;color:#8d7258;letter-spacing:1px}
.consumer-case-top>b,.consumer-case-top strong{background:#e8eee5;padding:6px 8px;border-radius:99px;font-size:10px;color:#385948;white-space:nowrap}
.consumer-case-item h5{font-size:20px;letter-spacing:-.04em;margin:16px 0 10px}
.consumer-case-item p{font-size:13px;line-height:1.86;color:#526a5c;margin:0 0 10px}
.consumer-case-item p strong{color:#214a39}
.consumer-case-item .consumer-case-note{font-size:11px;color:#748476;margin-top:auto}
.consumer-case-jump{border:0;border-bottom:1px solid #a9c4ad;background:none;color:#235846;font-size:12px;font-weight:800;padding:7px 0;margin-top:10px}
.consumer-themes{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:12px 0 19px;border-bottom:1px solid #e0e7de}
.consumer-themes>span{color:#829083;font-size:11px;font-weight:800;letter-spacing:1px;margin-right:5px}
.consumer-themes b{padding:8px 11px;background:#f2efe5;border-radius:99px;font-size:11px;color:#6b5947}
.consumer-bottom{padding-top:20px}
.consumer-skills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 19px}
.consumer-skills span{border:1px solid #d8e3d5;background:#edf4ed;color:#335b49;padding:8px 11px;font-size:11px;font-weight:800;border-radius:99px}
.consumer-role{background:#f3f2ea;border-left:3px solid #b98a68;padding:17px 20px;border-radius:8px}
.consumer-role>strong{color:#284739;font-size:14px}
.consumer-role p{font-size:12px;line-height:1.85;color:#52645a;margin:9px 0 0}
.team-strengths{margin-top:15px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.team-strengths>span{font-size:11px;color:#c4d7c9;font-weight:800;margin-right:5px}
.team-strengths>b{font-size:11px;color:#eff7e8;background:#ffffff1b;border:1px solid #ffffff30;padding:6px 9px;border-radius:99px}
@media(max-width:900px){.tabs{gap:7px}.tabs .tab{padding:13px 10px}.tabs .tab b{font-size:13px}}
@media(max-width:650px){
.tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tabs .tab{display:flex;justify-content:space-between;padding:11px 13px}
.consumer-visual{padding:18px}.consumer-visual-title{font-size:24px;margin:8px 0}
.consumer-visual-panels{min-height:100px;gap:7px;margin:0 0 5px}.consumer-visual-panel{padding:10px;gap:6px}.consumer-visual-panel strong{font-size:17px}.consumer-visual-panel small{font-size:9px}.consumer-visual-panel>span{font-size:8px}
.consumer-visual-head,.consumer-visual-foot{font-size:8px}.consumer-pulse{display:none}
.dialog.consumer-open .dialog-box{padding:16px}
.consumer-study-hero{padding:20px}.consumer-case-grid{grid-template-columns:1fr;gap:9px}.consumer-case-item{padding:18px}
.consumer-study-hero p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.consumer-case-jump,.tabs .tab{transition:none}}

/* V9.3: four playful, evidence-honest AI experiments. Illustrations are decorative, not screenshots. */
.exp-grid.play-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.exp-card.play-card{border-radius:20px;border:1px solid #d9dfd6;box-shadow:0 4px 10px rgba(16,42,29,.02);transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;min-width:0}
.exp-card.play-card:hover{transform:translateY(-5px);border-color:#aebeb1;box-shadow:0 18px 28px rgba(16,42,29,.075)}
.play-image{height:178px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.play-visual-caption{position:absolute;left:13px;bottom:12px;z-index:3;font:800 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.9px;color:rgba(28,50,44,.70)}
.play-card .exp-copy{padding:17px 17px 19px}
.play-card .exp-copy h3{font-size:19px;line-height:1.36;letter-spacing:-.035em;margin:13px 0 8px}
.play-card .exp-copy p{font-size:12px;color:#52635a;line-height:1.75}
.play-card .exp-status{white-space:nowrap;font-size:9px;letter-spacing:0;background:#f5f1ea;border-radius:40px;padding:5px 8px}
.play-card .exp-category{color:#385e51;font-size:10px}
.exp-more{border-top:1px dashed #d9e0d8;margin-top:auto;padding-top:13px;margin-bottom:0}
.exp-more summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;color:#2f5a4c;font-size:11px;font-weight:850;list-style:none;user-select:none}
.exp-more summary::-webkit-details-marker{display:none}
.exp-more summary span{transition:transform .2s ease}
.exp-more[open] summary span{transform:rotate(90deg)}
.exp-more summary:focus-visible{outline:2px solid #294f43;outline-offset:5px;border-radius:4px}
.exp-more p{margin:12px 0 0!important;padding:9px 10px;background:#f3f5f0;border-radius:9px!important;font-size:11px!important}
.exp-voice{background:#e5e9f3;color:#334d69}
.voice-graphic{width:150px;height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.voice-orbit{position:absolute;inset:12px 38px 20px;border:1px dashed rgba(51,77,105,.3);border-radius:50%}
.voice-icon{height:61px;width:61px;z-index:1;filter:drop-shadow(0 5px 0 #d5dceb)}
.sound-bars{display:flex;align-items:center;justify-content:center;gap:4px;height:31px}
.sound-bars i{width:5px;height:13px;background:#53749b;border-radius:6px;animation:voicewave 1.35s ease-in-out infinite}
.sound-bars i:nth-child(3n){height:23px;animation-delay:-.22s}
.sound-bars i:nth-child(4n){height:10px;animation-delay:-.7s}
.sound-bars i:nth-child(2n){animation-delay:-.45s}
@keyframes voicewave{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.25)}}
.exp-pet{background:#e9e5d9}
.pet-graphic{width:150px;height:145px;position:relative;display:grid;place-items:center}
.pet-graphic svg{height:126px;width:145px;z-index:1;animation:petbob 3.2s ease-in-out infinite}
.pet-shadow{height:17px;width:85px;position:absolute;bottom:12px;left:32px;background:#c4c0b6;border-radius:50%;filter:blur(5px);opacity:.55}
@keyframes petbob{0%,100%{transform:translateY(1px) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
.exp-tony.play-image{background:linear-gradient(145deg,#e8ded8,#f0d9cd)}
.tony-graphic{width:150px;height:144px;display:grid;place-items:center}
.tony-graphic svg{width:160px;height:145px;transform:rotate(-3deg);transition:transform .3s ease}
.play-card:hover .tony-graphic svg{transform:rotate(3deg)}
.exp-content.play-image{background:#e0ebe2}
.creative-graphic{height:146px;width:180px;position:relative;display:grid;place-items:center}
.creative-sheet{position:absolute;width:109px;height:132px;border-radius:9px;border:1px solid #b6cbbb;background:#fffefa;box-shadow:0 9px 18px rgba(41,76,56,.10)}
.creative-sheet.sheet-back{transform:rotate(10deg) translate(20px,1px);background:#b4cab9}
.creative-sheet.sheet-front{transform:rotate(-7deg) translate(-12px,0);padding:16px 13px}
.creative-sheet span{color:#4b735d;font:800 10px ui-monospace,monospace;letter-spacing:.5px}
.creative-sheet i{display:block;height:6px;margin-top:10px;border-radius:6px;background:#d6e1d7}
.creative-sheet i.line-short{width:61%}
.creative-sheet b{display:block;text-align:right;font-size:21px;color:#487d69}
@media(max-width:1080px){.exp-grid.play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.play-image{height:168px}}
@media(max-width:600px){.exp-grid.play-grid{grid-template-columns:1fr;gap:10px}.exp-card.play-card{display:grid;grid-template-columns:120px minmax(0,1fr);border-radius:15px}.play-image{height:100%;min-height:142px;border-right:1px solid #e1e5dd;border-bottom:none}.voice-graphic,.pet-graphic,.tony-graphic,.creative-graphic{transform:scale(.72)}.play-card .exp-copy{padding:12px 12px 12px;min-width:0}.play-card .exp-copy h3{font-size:16px;margin:8px 0 6px}.play-card .exp-copy p{font-size:11px}.play-card .exp-category{font-size:9px}.play-card .exp-status{font-size:8px}.exp-more{margin-top:9px;padding-top:8px}.exp-more p{font-size:10px!important}.play-visual-caption{font-size:8px;left:7px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.sound-bars i,.pet-graphic svg{animation:none!important}.exp-card.play-card,.tony-graphic svg{transition:none!important}}


/* V9 final · user-supplied WeChat account screenshot */
.exp-account.play-image{background:#f5f3ef;padding:13px;display:flex;align-items:center;justify-content:center}
.account-preview-link{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;border:1px solid #e0e2dc;background:#fff;box-shadow:0 8px 22px rgba(31,50,41,.075);transition:transform .22s ease,box-shadow .22s ease}
.account-preview-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 31%;}
.account-preview-link:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,50,41,.14)}
.account-zoom{position:absolute;right:8px;bottom:8px;color:#203c32;background:rgba(255,255,255,.96);padding:6px 9px;border-radius:100px;border:1px solid #dde3dd;font-size:10px;font-weight:750;line-height:1.2;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.account-preview-link:focus-visible{outline:3px solid #245942;outline-offset:3px}
.exp-account + .exp-copy strong{color:#1d4735;font-weight:850}
@media(max-width:600px){.exp-account.play-image{padding:8px}.account-preview-link{border-radius:9px}.account-preview-link img{object-position:center 27%}.account-zoom{font-size:8px;padding:4px 5px;right:4px;bottom:4px}}
@media(prefers-reduced-motion:reduce){.account-preview-link{transition:none}}


/* V10: clean engineering portfolio. Deliberately subdued styling. */
:root{--bg:#ffffff;--white:#ffffff;--ink:#181b20;--sub:#57616b;--line:#e2e6eb;--green:#245cc2;--tint:#f3f6fb;--accent:#245cc2;--radius:12px}
html{scroll-padding-top:76px}
body{background:#fff;color:var(--ink)}
.container{width:min(1100px,calc(100% - 44px))}
header{background:rgba(255,255,255,.97);backdrop-filter:none;border-bottom:1px solid #ebedf0}
.nav{height:66px}.logo{font-size:20px;letter-spacing:-.045em}.logo i{color:var(--green)}
.nav-right a{color:#505963;font-size:13px;font-weight:650}
.nav-right a:hover,.nav-right a:focus-visible{color:var(--green)}
.contact-nav{background:#1c2430;color:#fff!important;border-radius:8px;padding:10px 16px}
.section-label{color:#667b9b;font-size:11px;letter-spacing:1.6px}
.hero{gap:46px;min-height:auto;padding-block:68px 72px;align-items:center}
.hero h1{font-size:clamp(55px,6.3vw,86px);letter-spacing:-.075em;line-height:1.08;margin:19px 0 23px}
.hero h1 em{color:#245cc2}.hero .intro{font-size:16px;line-height:1.9;color:#53606c;max-width:580px}
.btn{padding:12px 18px;border-radius:8px;border-color:#c9d4e2;color:#245cc2;transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn.primary{background:#245cc2;border-color:#245cc2;color:#fff}
.btn:hover{transform:none;background:#edf3ff}.btn.primary:hover{background:#1b4b9d;color:#fff}
.identity-groups{gap:12px!important;margin-top:28px!important}
.identity-group{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.identity-title{font-size:12px!important;color:#677480!important}
.identity-tags{gap:7px!important}
.identity-tag{background:#f5f7f9!important;border:1px solid #e5e9ed!important;color:#525e6c!important;border-radius:6px!important;font-size:11px!important;padding:6px 10px!important}
.workspace,.portrait-workspace{transform:none!important;border:1px solid #dbe1e7;border-radius:12px;box-shadow:0 12px 38px rgba(17,24,39,.055);background:#fff}
.workspace-head{background:#fafbfc;border-bottom:1px solid #e7ebef;color:#697582}
.portrait-main{border-radius:8px!important}.portrait-body{background:#fff}
.portrait-controls button{border-radius:7px;background:#fff;color:#243b5d;border-color:#dfe5ec}
.photo-thumb{border-radius:6px}.photo-thumb[aria-pressed=true]{border-color:#245cc2}
.photo-modal-header small,.portrait-sign small{color:#667c95!important}
.section{padding:64px 0}.section-head h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.065em}.section-head>p{color:#647180}
.showcase{border-top-color:#e2e7ed}
.tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:14px}
.tab{padding:14px 16px;border-radius:8px;background:#f9fafb;border-color:#e5e8ed;color:#425066;box-shadow:none!important}
.tab span{color:#8190a0}.tab.active{background:#1f2b3d;border-color:#1f2b3d;color:#fff}.tab.active span{color:#aec1d6}
.tab:hover:not(.active){background:#edf3fa}
.project-panel{border-color:#e3e8ed;border-radius:11px;box-shadow:none;background:#fff}
.project-art{background:#f5f7f9}.project-details{padding:29px}.project-tag{color:#687d9c}.project-details h3{letter-spacing:-.045em}
.project-details p,.project-brief li{color:#4f5d6b}.project-links a,.project-links button{border:1px solid #ccd7e6;border-radius:7px;color:#2255ac}
.project-links a:hover,.project-links button:hover{background:#f2f6fc}
.art-label{background:rgba(17,24,39,.82);border-radius:5px;backdrop-filter:none}
.exp{background:#f8fafc;border-block-color:#e6ebf0;padding:58px 0 66px}
.exp-grid.play-grid{gap:13px}
.exp-card.play-card{background:#fff;border:1px solid #e0e6ed;border-radius:10px;box-shadow:none;overflow:hidden}
.exp-card.play-card:hover{transform:none!important;box-shadow:none!important;border-color:#c8d4e4}
.exp-image.play-image{border-radius:7px!important;overflow:hidden;box-shadow:none!important}
.exp-voice,.exp-pet,.exp-tony{background:#f4f6f9!important}
.exp-voice .voice-graphic,.exp-pet .pet-graphic,.exp-tony .tony-graphic{transform:none!important}
.exp-status{color:#677b95}
.exp-card h3{font-size:18px;color:#1e2630}.exp-card p{color:#596675;font-size:13px;line-height:1.75}
.exp-more summary{color:#245cc2!important}
.exp-account.play-image{background:#f5f7fa!important;padding:8px!important}
.account-preview-link{box-shadow:none!important;border:1px solid #e0e6ef!important;border-radius:6px!important;transition:none!important}
.account-preview-link:hover{transform:none!important;box-shadow:none!important}
.account-preview-link img{object-fit:contain!important;object-position:center center!important;background:#fff}
.account-zoom{border-radius:5px;color:#224d9b}
.outro{padding:70px 0 20px}.about-card,.contact-card{border-radius:10px;border-color:#e1e7ed;box-shadow:none!important}
.about-card{background:#fff}.about-card>p{color:#5c6976}
.training-story{border-radius:9px;background:#1b2431}.training-words{background:#1b2431}.training-kicker{color:#a7bdd9}
.training-words blockquote{border-color:#8daedc}
.hobby{background:#f7f9fb;border:1px solid #e7ebef;border-radius:7px}
.contact-card{background:#1e2939;color:#fff}.contact-card .section-label{color:#9fb6d7}.contact-card p{color:#cbd5e1}
.contact-line{border-radius:6px;background:rgba(255,255,255,.08)}.contact-line button{border-radius:5px;background:#f3f7ff;color:#244875}
.team-strengths b{border-radius:6px!important;background:rgba(255,255,255,.09)!important}
.dialog,.media-dialog,.photo-dialog{border-radius:10px!important}.dialog::backdrop,.media-dialog::backdrop,.photo-dialog::backdrop{backdrop-filter:none}
.dialog-box{padding:26px}.dialog-meta{background:#f5f7f9;color:#50637b}
.case-hero,.consumer-study-hero{background:#f7f9fc!important;color:#1d2938!important;box-shadow:none!important}
.case-hero h4,.consumer-study-hero h4{color:#1d2938!important}
.case-hero p,.consumer-study-hero p{color:#5a6572!important}
.case-item,.consumer-case-item{box-shadow:none!important}
.footer{border-color:#e4e8ef;color:#758294}
@media(max-width:900px){.hero{padding-block:44px}.project-panel{height:auto}.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tab{min-height:50px}}
@media(max-width:600px){.container{width:calc(100% - 28px)}.nav{height:60px}.nav-right{gap:12px}.hero{padding-block:36px 54px;gap:24px}.hero h1{font-size:clamp(46px,11vw,62px)}.hero .intro{font-size:14px}.section{padding:46px 0}.section-head h2{font-size:34px}.tabs{gap:7px}.tab{padding:11px}.tab b{font-size:13px}.project-details{padding:20px}.outro{padding-top:45px}.exp{padding:46px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}