@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;450;500;550;600;650;700;750;800;850;900&display=swap');
:root{--bg:#f8f9fb;--fg:#202126;--muted:#737681;--line:#dfe1e7;--surface:#fff;--soft:#f0f2f6;--accent:#3048ee;--blue-bg:#e9edff;--amber-bg:#fff1d6;--amber-fg:#936216;--green-bg:#e3f5eb;--green-fg:#237d50;--grid:#e6e8ef;color-scheme:light}html[data-theme=dark]{--bg:#111319;--fg:#eef0f7;--muted:#9298a9;--line:#303440;--surface:#1b1e27;--soft:#242834;--accent:#8495ff;--blue-bg:#2c3457;--amber-bg:#443824;--amber-fg:#efc67f;--green-bg:#203b31;--green-fg:#8bd0ae;--grid:#272b38;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--fg);font:16px 'Golos Text',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{border:0;background:none}header{height:100px;margin:0 5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{font-size:38px;font-weight:850;letter-spacing:-5px;line-height:1}.brand span{color:var(--accent);font-size:26px;vertical-align:top;letter-spacing:-3px}.identity{font-size:14px;font-weight:550}.identity span{color:var(--muted);font-weight:400}nav{display:flex;gap:32px;margin-left:auto;font-size:14px}nav sup{font-size:10px;color:var(--muted)}.theme-toggle{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:25px;padding:9px 12px;margin-left:30px;font-size:13px;background:var(--surface)}.theme-icon{font-size:19px}.toggle-track{width:27px;height:16px;border-radius:12px;background:var(--soft);border:1px solid var(--line);padding:2px}.toggle-track i{display:block;width:10px;height:10px;border-radius:100%;background:var(--fg)}[data-theme=dark] .toggle-track i{transform:translateX(10px)}.hero{padding:63px 8% 55px}.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:550;display:flex;justify-content:space-between;color:var(--muted)}.edition{letter-spacing:1px}h1{font-size:clamp(76px,10.8vw,160px);line-height:1.01;letter-spacing:-.065em;font-weight:550;margin:40px 0 40px}.word-system{position:relative;color:var(--accent)}.cursor{display:inline-block;width:3px;height:.84em;background:var(--accent);vertical-align:-.03em;margin-left:.06em}.period{color:var(--accent)}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.hero-bottom p{font-size:18px;line-height:1.6;margin:0;color:var(--muted)}.scroll-link{font-size:13px;display:flex;align-items:center;gap:25px}.scroll-link>span{border:1px solid var(--line);border-radius:50%;padding:12px 16px;font-size:20px}.assembly{height:1120px;margin:0 5%;position:relative}.assembly-sticky{position:sticky;top:20px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:23px 32px 18px;overflow:hidden}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px;color:var(--muted)}.stage-top button{font-size:12px;letter-spacing:0;border:1px solid var(--line);padding:8px 12px;border-radius:5px;background:var(--surface)}.live-dot{display:inline-block;background:var(--accent);width:6px;height:6px;margin-right:7px;border-radius:50%}.system-stage{height:440px;max-width:1000px;margin:15px auto;position:relative;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;--p:0}.dashboard-shell{position:absolute;left:8%;right:8%;top:25px;height:355px;background:var(--surface);border:1px solid var(--line);border-radius:9px;opacity:var(--p);box-shadow:0 15px 50px #00000008}.dash-head{height:51px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 19px;font-size:12px}.dash-head b{font-size:17px;letter-spacing:-.5px}.dash-head b span{font-size:11px;font-weight:400;color:var(--muted)}.avatar{display:inline-grid;place-items:center;width:25px;height:25px;background:var(--blue-bg);color:var(--accent);border-radius:50%;margin-left:14px}.dash-side{width:145px;border-right:1px solid var(--line);height:303px;padding:23px 14px;display:flex;flex-direction:column;gap:19px;font-size:12px;color:var(--muted)}.dash-side b{color:var(--accent);font-weight:500}.side-bottom{margin-top:auto}.module{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 22px #12172d08;border-radius:7px;will-change:transform}.metric{top:94px;height:107px;width:28%;padding:14px 17px}.metric-one{left:calc(8% + 164px);transform:translate(calc(-190px * (1 - var(--p))),calc(-36px * (1 - var(--p)))) rotate(calc(-8deg * (1 - var(--p))))}.metric-two{left:calc(38% + 164px);transform:translate(calc(23px * (1 - var(--p))),calc(-30px * (1 - var(--p)))) rotate(calc(9deg * (1 - var(--p))))}.micro{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.metric strong{font-size:31px;letter-spacing:-1px;display:flex;align-items:center;justify-content:space-between;margin:3px 0}.metric small{font-size:10px;color:var(--muted)}.tiny-chart{color:var(--accent);font-size:27px;letter-spacing:3px;font-weight:400}.attention{color:var(--amber-fg)}.pill{font-size:10px;line-height:1.7;font-weight:400;letter-spacing:0;border-radius:4px;padding:2px 7px;background:var(--soft);white-space:nowrap}.blue{color:var(--accent);background:var(--blue-bg)}.amber{color:var(--amber-fg);background:var(--amber-bg)}.green{color:var(--green-fg);background:var(--green-bg)}.table-module{top:213px;left:calc(8% + 164px);right:10%;padding:0 14px;transform:translate(calc(-65px * (1 - var(--p))),calc(36px * (1 - var(--p)))) rotate(calc(5deg * (1 - var(--p))))}.table-title{display:flex;align-items:center;gap:10px;height:37px;font-size:12px}.table-title b{margin-right:auto}.table-count{color:var(--muted);font-size:10px}.table-row{display:grid;grid-template-columns:1.45fr 1fr .8fr;gap:12px;align-items:center;border-top:1px solid var(--line);min-height:34px;font-size:10px}.table-row>.pill{justify-self:start}.table-row small{display:none}.table-header{min-height:22px;font-size:8px;letter-spacing:.4px;color:var(--muted)}.checkbox{display:inline-block;width:9px;height:9px;border:1px solid var(--line);border-radius:2px;margin-right:7px}.person{color:var(--muted)}.person em{font-style:normal;margin-left:4px}.floating-note{right:0;top:277px;padding:16px 19px;font-size:13px;line-height:1.5;transform:translateY(calc(36px * var(--p))) rotate(calc(-8deg * (1 - var(--p))));opacity:calc(1 - var(--p));background:var(--blue-bg);border-color:transparent;color:var(--accent)}.floating-note>span{font-size:25px;float:left;margin-right:13px}.grid-cross{position:absolute;font-size:23px;color:var(--muted);font-weight:400}.cross-one{top:10px;left:0}.cross-two{bottom:12px;right:0}.blueprint-label{position:absolute;left:1%;bottom:28px;font-size:9px;color:var(--muted);letter-spacing:1.2px}.measure{position:absolute;bottom:12px;left:35%;font-size:9px;color:var(--muted);letter-spacing:1px;opacity:var(--p)}.stage-bottom{gap:20px;letter-spacing:0;font-size:12px}.progress-track{height:2px;background:var(--line);flex:1;max-width:240px;margin-left:auto}.progress-track i{display:block;height:100%;width:0;background:var(--accent)}.projects{padding:90px 8% 70px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px;gap:30px}h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.12;margin:0}.section-head p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.project{display:grid;grid-template-columns:1.3fr 1fr;gap:7%;align-items:center;padding:0 0 50px;margin-bottom:50px;border-bottom:1px solid var(--line)}.project-preview{height:350px;border-radius:7px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:35px}.preview-one{background:#dfe5f3}.preview-two{background:#e5e4df}.preview-index{position:absolute;left:22px;bottom:17px;font-size:9px;letter-spacing:1px;color:#5a6276}.mini-window{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:0 15px 30px #17224416;transform:rotate(-4deg);overflow:hidden}.mini-header{display:flex;justify-content:space-between;padding:12px;font-size:9px;border-bottom:1px solid var(--line)}.mini-layout{display:flex}.mini-menu{font-size:9px;line-height:3;padding:14px;width:80px;flex-shrink:0;background:var(--soft);color:var(--muted)}.mini-menu b{color:var(--accent)}.mini-content{padding:16px;flex:1}.mini-content h4{font-size:17px;margin:0 0 15px;letter-spacing:-.5px;font-weight:500}.mini-stats{display:flex;gap:10px}.mini-stats>span{border:1px solid var(--line);padding:9px;flex:1;border-radius:4px}.mini-stats small{font-size:7px;display:block;color:var(--muted)}.mini-stats b{font-size:22px;font-weight:500}.mini-bars{display:grid;gap:6px;margin-top:15px}.mini-bars i{height:6px;background:var(--soft);border-radius:2px}.mini-bars i:nth-child(2){width:82%}.access-card{width:100%;background:var(--surface);padding:22px;border-radius:8px;transform:rotate(3deg);box-shadow:0 15px 30px #17224416}.access-head{display:flex;gap:17px;align-items:center;margin-bottom:20px}.access-head>span{font-size:35px;color:var(--accent)}.access-head b{font-size:18px;line-height:1.25;font-weight:500;letter-spacing:-.5px}.access-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;border-top:1px solid var(--line);padding:13px 0;gap:10px}.access-footer{font-size:8px;color:var(--muted);margin-top:10px}.project-tags{font-size:10px;letter-spacing:.6px;display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);align-items:center}.project-tags>span{font-size:8px;border:1px solid var(--line);padding:4px;border-radius:3px}.project h3{font-size:36px;font-weight:500;line-height:1.12;letter-spacing:-1.3px;margin:22px 0 17px}.project-info p{font-size:15px;color:var(--muted);line-height:1.65;max-width:365px}.case-button{padding:15px 0 7px;border-bottom:1px solid var(--fg);font-size:13px;display:flex;justify-content:space-between;gap:40px}.case-button:hover{color:var(--accent);border-color:var(--accent)}.demo-note{font-size:12px;line-height:1.6;color:var(--muted)}.approach{margin:0 8%;padding:35px 0 90px}.approach h2{margin:28px 0 45px}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.approach-grid>div{border-top:1px solid var(--line);padding-top:20px}.approach-grid span{font-size:11px;color:var(--muted);letter-spacing:.6px}.approach-grid p{line-height:1.8;font-size:17px}footer{margin:0 5%;border-top:1px solid var(--line);padding:30px 0;display:flex;gap:25px;align-items:center;font-size:12px;color:var(--muted)}footer a:nth-last-child(2){margin-left:auto}dialog{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:12px;width:min(700px,92vw);padding:46px;max-height:85vh}dialog::backdrop{background:#080e2599;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:15px;top:15px;padding:8px}dialog h2{font-size:36px;margin:25px 0}.case-tabs{display:flex;gap:5px;background:var(--soft);border-radius:7px;padding:4px;width:max-content;margin:25px 0}.case-tabs button{padding:9px 23px;border-radius:5px;font-size:14px}.case-tabs [aria-pressed=true]{background:var(--surface);box-shadow:0 1px 5px #0001;color:var(--accent)}#case-content{min-height:220px}#case-content h3{font-size:22px;font-weight:500}#case-content p,#case-content li{font-size:16px;line-height:1.65;color:var(--muted)}#case-content ul{padding-left:20px}.scan-line{display:none;position:fixed;z-index:10000;left:0;right:0;height:3px;background:#8ca0ff;box-shadow:0 0 12px 3px #7891ff,0 0 70px 20px #647dff55;pointer-events:none}.scanning .scan-line{display:block;animation:scan 950ms cubic-bezier(.65,0,.35,1) forwards}@keyframes scan{from{top:-5%}to{top:105%}}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-new(root){animation:reveal 950ms cubic-bezier(.65,0,.35,1) both}@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@media(min-width:1450px){header,footer,.assembly{max-width:1380px;margin-left:auto;margin-right:auto}.hero,.projects,.approach{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}}@media(max-width:850px){header{gap:15px}.identity span{display:none}.theme-toggle{margin-left:5px}nav{gap:18px}.hero{padding:45px 6%}.hero-bottom{align-items:start;flex-direction:column;gap:25px}.assembly{height:1000px}.assembly-sticky{padding:15px}.system-stage{height:400px}.dashboard-shell{left:1%;right:1%}.dash-side{width:105px}.metric-one,.table-module{left:calc(1% + 118px)}.metric-two{left:calc(36% + 118px)}.metric{width:32%;padding:12px}.table-module{right:3%}.metric-one{transform:translate(calc(-75px * (1 - var(--p))),calc(-24px * (1 - var(--p)))) rotate(calc(-8deg * (1 - var(--p))))}.metric-two{transform:translate(calc(-15px * (1 - var(--p))),calc(-10px * (1 - var(--p)))) rotate(calc(8deg * (1 - var(--p))))}.person em{display:none}.floating-note{right:0;font-size:11px}.project{gap:5%}.project-preview{height:300px;padding:22px}.project h3{font-size:30px}.access-head b{font-size:15px}.section-head{align-items:start}.projects{padding:60px 6%}.approach{margin:0 6%}.mini-menu{display:none}.tiny-chart{font-size:20px;letter-spacing:1px}}
@media(max-width:580px){header{height:78px;margin:0 6%;gap:16px}.brand{font-size:32px}.identity{font-size:13px}nav{margin-left:auto}nav a:last-child{display:none}.theme-toggle{margin-left:0;padding:7px 9px}.theme-label,.toggle-track{display:none}.theme-icon{font-size:21px}.hero{padding-top:35px}.eyebrow{font-size:10px;letter-spacing:1px}.edition{display:none}h1{font-size:clamp(65px,16vw,92px);margin:32px 0;letter-spacing:-.065em}.hero-bottom p{font-size:16px;line-height:1.6}.desktop{display:none}.scroll-link{font-size:11px;gap:16px}.assembly{margin:0 4%;height:850px}.assembly-sticky{top:12px;padding:13px 10px}.stage-top{font-size:8px;letter-spacing:.3px}.stage-top button{font-size:10px;padding:7px}.system-stage{height:365px;margin:15px auto 8px}.dashboard-shell{top:18px;height:310px}.dash-head{padding:0 10px;height:41px}.dash-head>span{font-size:9px}.dash-head b{font-size:14px}.dash-head b span{display:none}.dash-side{display:none}.metric{top:74px;width:45%;height:95px;padding:11px}.metric-one{left:3%;transform:translate(calc(8px * (1 - var(--p))),calc(-5px * (1 - var(--p)))) rotate(calc(-8deg * (1 - var(--p))))}.metric-two{left:51%;transform:translate(calc(-5px * (1 - var(--p))),calc(6px * (1 - var(--p)))) rotate(calc(8deg * (1 - var(--p))))}.metric strong{font-size:28px}.micro{font-size:9px}.metric small{font-size:8px}.tiny-chart{font-size:19px}.metric .pill{font-size:8px}.table-module{top:180px;left:3%;right:3%;padding:0 8px;transform:translate(0,calc(30px * (1 - var(--p)))) rotate(calc(5deg * (1 - var(--p))))}.table-row{font-size:8px;gap:5px;grid-template-columns:1.6fr .55fr .8fr}.table-header{font-size:6px}.table-row .pill{font-size:7px;padding:1px 4px}.table-title{font-size:10px;height:31px}.table-row{min-height:32px}.floating-note{top:273px;font-size:10px;padding:10px}.blueprint-label{font-size:7px;bottom:7px}.measure{display:none}.stage-bottom{font-size:9px;gap:10px}.progress-track{max-width:80px}.section-head{display:block;margin-bottom:30px}.section-head p{margin-top:20px;font-size:13px}.project{grid-template-columns:1fr;gap:25px;padding-bottom:35px;margin-bottom:35px}.project-preview{height:300px;padding:35px}.mini-menu{display:block}.project h3{font-size:34px;margin-top:17px}.project-info p{font-size:16px}.project-tags{font-size:9px}.project-tags>span{font-size:8px}.case-button{font-size:14px}.approach{padding:15px 0 45px}.approach h2{font-size:34px}.approach-grid{grid-template-columns:1fr;gap:15px}.approach-grid p{font-size:16px;margin-top:12px}.approach-grid span{font-size:11px}footer{flex-wrap:wrap;gap:18px;font-size:11px}footer>span:nth-child(2){max-width:180px}footer>span:last-child{display:none}dialog{padding:35px 22px}dialog h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scan-line{display:none!important}::view-transition-new(root){animation:none}.module{will-change:auto}}

.real-preview{background:var(--blue-bg);padding:32px}.preview-1{background:var(--green-bg)}.preview-2{background:var(--soft);border:1px solid var(--line)}.preview-3{background:var(--amber-bg)}.flow-diagram{width:100%;max-width:330px}.diagram-brand{font-size:22px;letter-spacing:-.7px;font-weight:650;display:flex;justify-content:space-between;margin-bottom:20px}.diagram-brand>span{color:var(--accent)}.flow-node{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);padding:12px 15px;font-size:14px;border-radius:5px;position:relative;margin-bottom:10px}.flow-node+ .flow-node:before{content:"";position:absolute;top:-11px;left:23px;height:10px;border-left:1px solid var(--muted)}.flow-node>span{font-size:10px;color:var(--accent)}.real-preview .preview-index{color:var(--muted)}.case-result{border-top:1px solid var(--line);margin-top:25px;padding-top:25px}.case-result p{font-size:18px;line-height:1.6}#case-source{font-size:14px;line-height:1.5;display:inline-block}.contact{margin:0 8%;padding:20px 0 80px}.contact h2{margin:25px 0 30px}.contact>div{display:flex;flex-wrap:wrap;gap:30px}.contact a{font-size:16px;border-bottom:1px solid var(--line);padding-bottom:8px}.contact a:hover{color:var(--accent)}@media(max-width:580px){.identity{max-width:110px}.stage-top>span{max-width:170px;line-height:1.5}.contact{margin:0 6%;padding-bottom:50px}.project h3{font-size:30px}}
.project-preview.notion-cover{height:auto;padding:0;background:transparent;border:1px solid var(--line);display:block;align-self:center;overflow:hidden}.notion-cover img{display:block;width:100%;height:auto;object-fit:contain}

/* One shared content grid for every top-level section. */
:root{--page-gutter:48px}
header,footer,.hero,.assembly,.projects,.about,.contact{width:calc(100% - var(--page-gutter) * 2);max-width:1280px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
header .identity{font-size:14px}
footer{gap:24px}
@media(max-width:850px){:root{--page-gutter:28px}}
@media(max-width:580px){:root{--page-gutter:20px}header{gap:12px}header .identity{font-size:12px;max-width:120px}footer>span:nth-child(1){max-width:190px}.hero{padding-left:0;padding-right:0}}

/* Compact bilingual header on the shared page grid. */
.site-header{height:110px;justify-content:space-between;gap:32px}.site-header .identity{display:flex;flex-direction:column;gap:7px;max-width:none;font-size:17px;letter-spacing:-.4px}.site-header .identity strong{font-weight:550}.site-header .identity>span{display:block;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}.header-controls,.header-settings{display:flex;align-items:center}.header-controls{gap:44px}.header-settings{gap:16px;border-left:1px solid var(--line);padding-left:26px}.site-header nav{margin:0}.site-header nav a.projects-link{display:flex;gap:12px;align-items:center;font-size:14px}.project-count{color:var(--muted);font-size:11px}.language-switch{display:flex;background:var(--soft);padding:3px;border-radius:7px;gap:2px}.language-switch button{font-size:12px;min-width:36px;min-height:34px;border-radius:5px;color:var(--muted)}.language-switch button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:0 1px 4px #0000000d}.site-header .theme-toggle{margin:0;width:40px;height:40px;justify-content:center;padding:0;border-radius:7px}.site-header .theme-label,.site-header .toggle-track{display:none}.site-header .theme-icon{font-size:24px}.site-header .theme-toggle:hover{border-color:var(--accent)}html[lang=en] h1{font-size:clamp(70px,10vw,146px)}
@media(max-width:850px){.site-header{gap:20px}.header-controls{gap:25px}.header-settings{padding-left:20px;gap:12px}}
@media(max-width:580px){.site-header{height:auto;min-height:122px;flex-wrap:wrap;gap:18px;padding-top:20px;padding-bottom:16px}.site-header .identity{font-size:16px;max-width:none;gap:5px}.site-header .identity>span{font-size:11px}.header-controls{width:100%;justify-content:space-between;gap:15px}.header-settings{border-left:0;padding-left:0;gap:10px}.site-header nav a.projects-link{font-size:13px}.language-switch button{min-height:32px}.site-header .theme-toggle{width:38px;height:38px}html[lang=en] h1{font-size:clamp(51px,13.4vw,77px);letter-spacing:-.065em}}

/* A quiet personal introduction and a compact contact row. */
.about{padding-top:16px;padding-bottom:58px}
.about h2,.contact h2{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.5px;margin:0 0 24px}
.contact{padding-top:30px;padding-bottom:48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.contact h2{margin:0;flex-shrink:0}
.contact>.contact-links{gap:28px}
.contact a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:16px}
@media(max-width:580px){.about{padding-top:4px;padding-bottom:36px}.about h2,.contact h2{font-size:20px}.about-copy .about-lead{font-size:21px;line-height:1.5}.about-copy p{font-size:16px;line-height:1.7}.contact{padding-top:24px;padding-bottom:30px;display:block}.contact h2{margin-bottom:12px}.contact>.contact-links{column-gap:24px;row-gap:8px}}

/* Experience is explored through companies, focus areas, and their case studies. */
.experience{padding-top:24px;padding-bottom:72px}
.experience-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.experience-heading .eyebrow{font-size:.75rem;letter-spacing:1.2px}
.experience-heading h2{font-size:clamp(32px,3.5vw,48px);font-weight:500;line-height:1.1;letter-spacing:-1.6px;margin:15px 0 0}
.experience-heading>p{font-size:.875rem;color:var(--muted);margin:0 0 4px;line-height:1.5}
.experience-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.experience-map{position:relative;isolation:isolate;min-width:0;min-height:33.125rem;background-color:var(--soft);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px}
.experience-map:before{content:"";position:absolute;inset:18%;background:radial-gradient(ellipse at center,var(--blue-bg),transparent 70%);pointer-events:none;z-index:-1}
.map-caption{position:absolute;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:1px;color:var(--muted);pointer-events:none}
.experience-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-edge{fill:none;stroke:var(--line);stroke-width:1.3;transition:stroke .25s,opacity .25s;vector-effect:non-scaling-stroke}
.map-edge.is-active{stroke:var(--accent);opacity:.36}
.map-pulse{opacity:0;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:8 280;stroke-linecap:round}
.map-pulse.is-active{animation:map-signal 1.5s linear 2}
.map-node{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;text-align:left;width:154px;min-height:82px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 9px #00000005;transform:translate(-50%,-50%);transition:border-color .25s,box-shadow .25s,opacity .25s,background .25s}
.map-node-label{font-size:1rem;line-height:1.3;font-weight:500;letter-spacing:-.25px}
.map-node-meta{font-size:.75rem;line-height:1.4;letter-spacing:.5px;color:var(--muted)}
.map-node-company .map-node-label{font-size:1.375rem;letter-spacing:-.6px}
.map-node-person{left:50%;top:46%;width:238px;min-height:112px;align-items:center;text-align:center;gap:10px;box-shadow:0 8px 28px #00000008}
.map-node-person .map-node-label{font-size:1.3125rem;letter-spacing:-.7px}
.map-node-person .map-node-meta{font-size:.75rem;letter-spacing:0}
.map-node-domclick{left:19%;top:22%}
.map-node-tass{left:81%;top:22%}
.map-node-internal{left:19%;top:77%;width:172px}
.map-node-admin{left:50%;top:80%;width:144px}
.map-node-mobile{left:81%;top:77%;width:172px}
.map-node-port{position:absolute;width:7px;height:7px;border:2px solid var(--surface);background:var(--muted);border-radius:50%;right:12px;top:12px;transition:background .25s,box-shadow .25s}
.map-node.is-related .map-node-port{background:var(--accent)}
.map-node[aria-pressed=true]{border-color:var(--accent);background:var(--blue-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent),0 8px 30px #00000006}
.map-node[aria-pressed=true] .map-node-port{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.map-node.is-muted{opacity:.5}
.map-node:hover,.map-node:focus-visible{border-color:var(--accent);opacity:1;box-shadow:0 8px 28px #0000000d}
.map-node:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.experience-detail{border-left:1px solid var(--line);padding:30px;display:flex;flex-direction:column;min-width:0;gap:28px}
.experience-detail-meta,.experience-related-label{font-size:.75rem;line-height:1.5;letter-spacing:.65px;color:var(--muted);display:block}
.experience-detail h3{font-size:1.75rem;font-weight:500;line-height:1.18;letter-spacing:-.9px;margin:17px 0}
.experience-detail-text{font-size:1rem;color:var(--muted);line-height:1.65;margin:0}
.experience-skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.experience-skills>span{font-size:.75rem;line-height:1.4;padding:6px 9px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}
.experience-related{margin-top:auto}
.experience-case-list{margin-top:10px}
.experience-case-list button{width:100%;min-height:44px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;text-align:left;line-height:1.4;border-bottom:1px solid var(--line)}
.experience-case-list button:last-child{border-bottom:0;padding-bottom:2px}
.experience-case-list button>span:last-child{color:var(--accent);font-size:1.125rem;transition:transform .2s}
.experience-case-list button:hover{color:var(--accent)}
.experience-case-list button:hover>span:last-child{transform:translate(2px,-2px)}
.experience-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.map-waiting:not(.map-entered) .map-node{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.96)}
.map-waiting:not(.map-entered) .experience-links{opacity:0}
.map-entered .map-node{animation:map-assemble .7s cubic-bezier(.16,1,.3,1) both}
.map-entered .map-node-person{animation-delay:0s}
.map-entered .map-node-domclick{animation-delay:.08s}
.map-entered .map-node-tass{animation-delay:.16s}
.map-entered .map-node-internal{animation-delay:.24s}
.map-entered .map-node-admin{animation-delay:.32s}
.map-entered .map-node-mobile{animation-delay:.4s}
.map-entered .experience-links{animation:map-lines .9s .2s both}
@keyframes map-assemble{from{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.96)}to{transform:translate(-50%,-50%)}}
@keyframes map-lines{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes map-signal{0%{stroke-dashoffset:280;opacity:0}15%,85%{opacity:.85}100%{stroke-dashoffset:-280;opacity:0}}
@media(max-width:1100px){.experience-workspace{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr)}.experience-detail{padding:24px}.map-node{width:130px;padding:15px 13px}.map-node-person{width:210px}.map-node-person .map-node-label{font-size:1.1875rem}.map-node-internal,.map-node-mobile{width:144px}.map-node-admin{width:120px}.map-node-label{font-size:.875rem}}
@media(max-width:900px){.experience-workspace{grid-template-columns:1fr}.experience-detail{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1.25fr 1fr;gap:32px}.experience-related{margin-top:0}.experience-map{min-height:30rem}.map-node{width:154px}.map-node-person{width:238px}.map-node-person .map-node-label{font-size:1.3125rem}.map-node-internal,.map-node-mobile{width:172px}.map-node-admin{width:144px}.map-node-label{font-size:1rem}}
@media(max-width:600px){.experience{padding-top:12px;padding-bottom:44px}.experience-heading{display:block;margin-bottom:22px}.experience-heading h2{font-size:2.125rem;letter-spacing:-1px}.experience-heading>p{margin-top:16px;font-size:.875rem}.experience-map{min-height:33.125rem}.map-caption{left:18px;right:18px;top:19px;font-size:.75rem}.map-node{width:128px;min-height:76px;padding:14px;gap:7px}.map-node-label{font-size:.875rem}.map-node-meta{font-size:.75rem;letter-spacing:0}.map-node-company .map-node-label{font-size:1.25rem}.map-node-domclick{left:23%;top:19%}.map-node-tass{left:77%;top:19%}.map-node-person{left:50%;top:42%;width:238px;min-height:102px}.map-node-internal{left:50%;top:65%;width:170px}.map-node-admin{left:23%;top:86%}.map-node-mobile{left:77%;top:86%}.experience-detail{display:flex;padding:24px;gap:26px}.experience-detail h3{font-size:1.625rem}.experience-related{margin-top:0}.experience-skills>span{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.experience *, .experience *:before{animation:none!important;transition:none!important}.map-waiting .map-node{opacity:1!important;transform:translate(-50%,-50%)!important}.map-waiting .experience-links{opacity:1!important}.map-pulse{display:none}}

/* Temporary cover comparison, with the same page grid in both views. */
[hidden]{display:none!important}
.design-switcher{width:calc(100% - var(--page-gutter) * 2);max-width:1280px;margin:20px auto 0}
.design-tabs{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:9px;padding:4px;background:var(--soft)}
.design-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.875rem;min-height:42px;padding:10px 17px;border-radius:6px;color:var(--muted)}
.design-tabs button[aria-selected=true]{background:var(--surface);color:var(--fg);box-shadow:0 1px 5px #0000000a}
.design-tab-badge{font-size:.75rem;line-height:1;padding:5px 6px;border-radius:4px;background:var(--blue-bg);color:var(--accent)}
.project-preview.notion-cover{position:relative;isolation:isolate}
.notion-cover img{filter:grayscale(1);transition:filter .45s ease}
.notion-cover:after{content:"";position:absolute;inset:0;background:#485b9e;mix-blend-mode:color;opacity:1;pointer-events:none;transition:opacity .45s ease}
.project:is(:hover,:focus-within) .notion-cover img{filter:grayscale(0)}
.project:is(:hover,:focus-within) .notion-cover:after{opacity:0}
.test-gallery{padding-top:60px;padding-bottom:30px}
.test-gallery .section-head h2{max-width:650px}
.project-preview.showcase{position:relative;isolation:isolate;display:block;width:100%;height:auto;aspect-ratio:16/10;padding:0;background:var(--soft);border:1px solid var(--line);border-radius:8px;overflow:hidden;align-self:center}
.showcase-screen{position:absolute;inset:30px;display:grid;align-items:center}
.showcase-screen img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border:1px solid #00000012;border-radius:4px;box-shadow:0 18px 32px #151b3220;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.showcase-phones{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;gap:7%}
.showcase-phones .phone-screen{display:block;width:auto;height:100%;max-width:42%;object-fit:contain;border-radius:12px;box-shadow:0 12px 24px #151b3220;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.showcase-phones .phone-screen:nth-child(2){transform:translateY(8px)}
.project:is(:hover,:focus-within) .showcase-screen img{transform:translateY(-4px) scale(1.025)}
.project:is(:hover,:focus-within) .phone-screen:first-child{transform:translateY(-5px)}
.project:is(:hover,:focus-within) .phone-screen:nth-child(2){transform:translateY(3px)}
@media(max-width:580px){.design-switcher{margin-top:16px}.design-tabs{display:flex;width:100%}.design-tabs button{padding:10px 12px;flex:1;gap:7px;font-size:.8125rem}.design-tab-badge{display:none}.test-gallery{padding-top:38px}.showcase-screen{inset:19px}.showcase-phones{inset:18px}.showcase-phones .phone-screen{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.notion-cover img,.notion-cover:after,.showcase-screen img,.showcase-phones .phone-screen{transition:none}}

/* The second tab reuses the original experience block with visual case links. */
.design-switcher{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.design-lab-note{font-size:12px;color:var(--muted)}
.experience-preview{padding-top:56px}
.experience-preview .experience-case-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:14px}
.experience-preview .experience-case-list button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;border:0;padding:0;font-size:12px;line-height:1.4;min-width:0}
.experience-preview .experience-case-list button:last-child{padding:0}
.experience-preview .experience-case-list button>span:nth-child(2){padding-right:16px}
.experience-preview .experience-case-list button>span:last-child{position:absolute;right:0;bottom:0;font-size:16px}
.experience-thumbnail{position:relative;isolation:isolate;display:block;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:var(--soft)}
.experience-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:1024/543;object-fit:cover;filter:grayscale(1);transition:filter .45s}
.experience-thumbnail:after{content:"";position:absolute;inset:0;background:#485b9e;mix-blend-mode:color;pointer-events:none;transition:opacity .45s}
.experience-preview .experience-case-list button:is(:hover,:focus-visible) img{filter:grayscale(0)}
.experience-preview .experience-case-list button:is(:hover,:focus-visible) .experience-thumbnail:after{opacity:0}
@media(max-width:600px){.experience-preview{padding-top:36px}.design-switcher{gap:10px}.design-lab-note{font-size:11px}.experience-preview .experience-case-list{gap:18px 14px}.experience-preview .experience-case-list button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.experience-thumbnail img,.experience-thumbnail:after{transition:none}}

.experience-heading-space{display:block;height:14px}

/* A single portfolio surface, shown as a map or full project cards. */
.portfolio-views{width:calc(100% - var(--page-gutter) * 2);max-width:1280px;margin:24px auto 0;padding-bottom:36px;scroll-margin-top:30px}
.portfolio-views>.experience,.portfolio-views>.projects{width:100%;max-width:none;margin:0;padding-top:0}
.view-toolbar{display:flex;align-items:center;justify-content:flex-end;padding-top:14px;margin-bottom:32px}
.view-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.view-tabs button{min-height:44px;padding:10px 18px;font-size:14px;color:var(--muted);border-radius:6px;transition:color .25s}
.view-tabs button[aria-selected=true]{color:var(--fg)}
.view-tab-indicator{position:absolute;z-index:-1;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/2);border-radius:6px;background:var(--surface);box-shadow:0 1px 5px #0000000a;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.portfolio-views[data-mode=projects] .view-tab-indicator{transform:translateX(100%)}
.portfolio-views .experience-heading-space{display:none}
.portfolio-views .experience-heading h2{margin-top:0}
.portfolio-views .section-head{margin-top:0}
.view-cover-flight{position:fixed;z-index:90;pointer-events:none;object-fit:cover;transform-origin:top left;border-radius:5px;filter:grayscale(1);will-change:transform,opacity}
@media(max-width:600px){.portfolio-views{margin-top:12px;padding-bottom:12px}.view-toolbar{padding-top:14px;margin-bottom:30px}.view-tabs{width:100%}.view-tabs button{font-size:13px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.view-tab-indicator,.view-tabs button{transition:none}.view-cover-flight{display:none}}

/* Headline tabs share one stable header across both views. */
.view-toolbar{justify-content:space-between;align-items:center;gap:32px;min-height:106px;padding-top:14px;margin-bottom:30px}
.view-tabs{display:flex;gap:30px;padding:0 0 12px;border:0;border-radius:0;background:none;flex-shrink:0}
.view-tabs button{padding:0;min-height:54px;border-radius:0;font-size:clamp(30px,3.5vw,48px);font-weight:500;line-height:1.15;letter-spacing:-1.6px;text-align:left;white-space:nowrap}
.view-tabs button:hover{color:var(--fg)}
.view-tab-indicator{z-index:0;left:0;top:auto;bottom:0;height:2px;width:0;border-radius:0;background:var(--fg);box-shadow:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.view-description{display:grid;align-items:center;max-width:365px;min-height:48px}
.view-description p{grid-area:1/1;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.hero-line{position:relative;display:inline-block}.hero-line-first{left:-.075em}.hero-line-second{left:-.045em}
html[lang=en] .hero-line-first{left:-.08em}html[lang=en] .hero-line-second{left:-.025em}
@media(max-width:1050px){.view-toolbar{display:block;min-height:150px}.view-tabs{width:max-content;max-width:100%;gap:24px}.view-description{margin-top:18px;max-width:none;min-height:42px}.view-tabs button{font-size:clamp(28px,4.5vw,42px)}}
@media(max-width:600px){.view-toolbar{min-height:146px;margin-bottom:24px}.view-tabs{gap:22px;padding-bottom:9px}.view-tabs button{font-size:clamp(23px,6.6vw,32px);letter-spacing:-.9px;min-height:44px}.view-description{margin-top:16px;min-height:42px}.view-description p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.view-tab-indicator{transition:none}}

/* Reveal navigation on upward scroll without moving the page content. */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);transform:translateY(0);transition:transform .24s ease;isolation:isolate}
.site-header:before{content:"";position:absolute;inset:0 calc((100% - 100vw)/2);z-index:-1;background:var(--bg);pointer-events:none}
.site-header.is-hidden{transform:translateY(calc(-100% - 2px))}
.site-header:has(:focus-visible){transform:translateY(0)}
.site-header.is-floating:before{box-shadow:0 8px 20px #00000008}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
#contacts,#work{scroll-margin-top:calc(var(--header-height,110px) + 20px)}
html{scroll-padding-top:0}
#replay{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
#replay.is-ready{visibility:visible;opacity:1;pointer-events:auto}
@media(max-width:580px){.site-header nav{gap:18px}.site-header nav a{font-size:13px}.header-controls{gap:10px}.header-settings{gap:7px}}
@media(prefers-reduced-motion:reduce){.site-header,#replay{transition:none}}

/* Links reveal their label underline first, then the directional cue. */
.motion-link .link-label{position:relative;display:inline-block}
.motion-link .link-label:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.motion-link:is(:hover,:focus-visible) .link-label:after{transform:scaleX(1)}
.motion-link .link-arrow{display:inline-block;opacity:0;transform:translateX(-8px);clip-path:inset(0 100% 0 0);transition:opacity .18s,transform .22s,clip-path .22s;flex-shrink:0}
.motion-link:is(:hover,:focus-visible) .link-arrow{opacity:1;transform:translateX(0);clip-path:inset(0);transition-delay:.22s}
.contact a.motion-link,.case-button.motion-link{border-bottom:0}
.scroll-link.motion-link>span{border:0;border-radius:0;padding:0;font-size:inherit}
.scroll-link.motion-link>.link-arrow{font-size:20px}
.contact a.motion-link{gap:9px}
#case-source.motion-link{display:inline-flex;gap:12px}
footer a.motion-link{display:inline-flex;gap:9px}
.experience-case-list button>span:nth-last-child(2){text-decoration:none;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .25s}
.experience-case-list button:is(:hover,:focus-visible)>span:nth-last-child(2){background-size:100% 1px}
.experience-case-list button>span:last-child{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-7px);transition:opacity .18s,transform .22s,clip-path .22s}
.experience-case-list button:is(:hover,:focus-visible)>span:last-child{opacity:1;clip-path:inset(0);transform:translateX(0);transition-delay:.22s}

/* Shared bounds for both metrics and the request table. */
.system-stage{--content-left:calc(8% + 164px);--content-right:10%;--metric-gap:20px}
.metric{width:calc((100% - var(--content-left) - var(--content-right) - var(--metric-gap))/2)}
.metric-one,.table-module{left:var(--content-left)}
.metric-two{left:auto;right:var(--content-right)}
.table-module{right:var(--content-right)}
@media(max-width:850px){.system-stage{--content-left:calc(1% + 118px);--content-right:3%;--metric-gap:14px}}
@media(max-width:580px){.system-stage{--content-left:3%;--content-right:3%;--metric-gap:12px}}

/* Keep bilingual controls and content on stable tracks. */
html{scrollbar-gutter:stable}
html h1,html[lang=en] h1{font-size:clamp(70px,10vw,146px)}
.hero-line{white-space:nowrap}
.hero-bottom p{min-height:3.2em}


.stage-top{min-height:38px}.stage-top>span{max-width:calc(100% - 158px);line-height:1.5}
#replay{width:146px;flex-shrink:0}
.stage-bottom>#assembly-label{min-width:230px}#assembly-percent{width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.metric small{display:block;min-height:2.6em;line-height:1.3}
.notion-cover img{aspect-ratio:1024/543;object-fit:cover}

.experience-skills{align-content:start}
.experience-preview .experience-case-list button>span:nth-child(2){min-height:2.8em}
.project-info h3{min-height:3.36em}.project-info p{min-height:6.6em}
.contact-links{min-height:48px}
@media(max-width:1050px){.view-tabs button{font-size:clamp(24px,4vw,40px)}}
@media(max-width:850px){.hero-bottom p{min-height:4.8em}.stage-bottom>#assembly-label{min-width:200px}}
@media(max-width:600px){.view-tabs{gap:16px}.view-tabs button{font-size:clamp(19px,5.8vw,32px)}}
@media(max-width:580px){html h1,html[lang=en] h1{font-size:clamp(45px,13.4vw,77px)}.site-header nav{gap:12px}.stage-top{min-height:44px}.stage-top>span{max-width:calc(100% - 120px)}#replay{width:114px}.stage-bottom>#assembly-label{min-width:0;flex:1}.stage-bottom .progress-track{flex:0 0 60px}.project-info h3{min-height:3.36em}.project-info p{min-height:8.25em}.contact>.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}}
@media(prefers-reduced-motion:reduce){.motion-link .link-label:after,.motion-link .link-arrow,.experience-case-list button>span{transition:none!important}}
@media(hover:none){.motion-link .link-arrow,.experience-case-list button>span:last-child{opacity:1;transform:none;clip-path:none}}
.metric strong{gap:8px}.tiny-chart{font-size:clamp(10px,2vw,24px);letter-spacing:0;white-space:nowrap}
@media(max-width:580px){.hero-bottom p{min-height:6.4em}.tiny-chart{font-size:10px}}

/* Natural label widths, stable map content, and more breathing room. */
.site-header nav .projects-link,.site-header nav .contacts-link{width:auto;flex:0 0 auto}
.site-header nav{gap:32px}
.view-tabs button{width:auto;flex:0 0 auto}
.portfolio-views{margin-top:48px}
.experience-detail-copy{flex-shrink:0}
.experience-preview .experience-case-list{align-content:start;align-items:start}
.experience-map{align-self:stretch}
@media(max-width:600px){.portfolio-views{margin-top:24px}.site-header nav{gap:20px}}

/* Related cases behave as compact cards, without detached link decoration. */
.experience-preview .experience-case-list button>span:last-child{display:none}
.experience-preview .experience-case-list button>span:nth-last-child(2){background:none;padding-right:0}
.experience-preview .experience-case-list button:is(:hover,:focus-visible){color:var(--fg)}
.experience-preview .experience-case-list button .experience-thumbnail{transition:border-color .25s}
.experience-preview .experience-case-list button:is(:hover,:focus-visible) .experience-thumbnail{border-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.experience-preview .experience-case-list button .experience-thumbnail{transition:none}}

/* The assembled interface is a compact personal career overview. */
.system-stage{height:508px}.dashboard-shell{height:423px}.dash-side{height:371px}
.career-table .table-row{grid-template-columns:1.1fr 1.35fr 1fr;min-height:34px}
.career-table .table-header{min-height:22px}
.career-role{color:var(--muted);font-size:9px;line-height:1.35}
.career-period{justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.career-table .table-header>span:last-child{justify-self:end}
.career-company{font-weight:500}.career-table .table-count{font-variant-numeric:tabular-nums}
@media(max-width:850px){.system-stage{height:468px}}
@media(max-width:580px){.system-stage{height:433px}.dashboard-shell{height:378px}.career-table .table-row{grid-template-columns:1fr 1.05fr .95fr;min-height:32px;gap:5px}.career-table .table-header{min-height:22px}.career-role{font-size:7px}.career-period{font-size:7px}.career-company{font-size:8px}.metric small{font-size:8px}.floating-note{top:340px}}
.floating-note>span:not(:first-child){font-size:inherit;float:none;margin:0}

/* A persistent scroll cue, with one shared hover target. */
.scroll-link.motion-link .link-label:after{display:none}
.scroll-link.motion-link .link-arrow{opacity:1;transform:none;clip-path:none;transition:none}
.scroll-link.motion-link{transition:color .2s}
.scroll-link.motion-link:is(:hover,:focus-visible){color:var(--accent)}
.language-switch button{transition:color .18s,background .18s}
.language-switch button:is(:hover,:focus-visible){color:var(--accent);background:var(--blue-bg)}

/* The assembled dashboard keeps its bounds while changing views. */
.dash-side{gap:9px;padding:16px 10px}
.dash-side [role=tab]{text-align:left;padding:8px 4px;border-radius:5px;color:var(--muted);font-size:12px;line-height:1.4;transition:color .18s,background .18s}
.dash-side [role=tab][aria-selected=true]{color:var(--accent)}
.dash-side [role=tab]:enabled:is(:hover,:focus-visible){background:var(--blue-bg);color:var(--accent)}
.dash-side [role=tab]:disabled{cursor:default}
#dash-panel-overview{display:contents}
#dash-panel-overview[hidden],.dash-detail[hidden]{display:none}
.dash-detail{position:absolute;top:94px;left:var(--content-left);right:var(--content-right);height:334px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:16px;color:var(--fg);animation:dash-appear .2s ease}
.dash-detail h3{font-size:16px;margin:0 0 12px;font-weight:600}
.dash-career-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.dash-career-item strong{display:block;font-size:14px;font-weight:500;line-height:1.4}
.dash-career-item small{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.dash-career-item time{font-size:12px;line-height:1.4;text-align:right;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.dash-product-item{padding:12px 0;border-top:1px solid var(--line)}
.dash-product-item small{color:var(--muted);font-size:12px}
.dash-product-item h4{font-size:14px;line-height:1.4;margin:5px 0;font-weight:500}
.dash-product-item p{font-size:14px;line-height:1.5;margin:0;color:var(--muted)}
@keyframes dash-appear{from{opacity:0}to{opacity:1}}
@media(max-width:850px){.dash-side [role=tab]{font-size:11px;padding-inline:0}.dash-detail{padding:12px}.dash-career-item{gap:8px}.dash-career-item time{max-width:110px;flex-shrink:1}}
@media(max-width:580px){
 .system-stage{height:471px}.dashboard-shell{height:416px}
 .dash-side{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:38px;border-right:0;border-bottom:1px solid var(--line);padding:3px 8px;gap:12px}
 .dash-side [role=tab]{font-size:12px;padding:5px 3px}.dash-side .side-bottom{display:none}
 .system-stage .metric{top:132px}.system-stage .table-module{top:218px}
 .dash-detail{top:132px;height:294px}.dash-career-item time{font-size:11px}.dash-career-item strong{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.dash-detail{animation:none}.language-switch button,.scroll-link.motion-link,.dash-side [role=tab]{transition:none}}

.scroll-link.motion-link{gap:12px}

/* NDA placeholders and their presentation-only password prompt. */
.experience-map{min-height:720px}
.map-node-company{width:clamp(110px,24%,154px)}
.map-node-domclick{left:19%;top:18%}.map-node-tass{left:50%;top:18%}.map-node-nda{left:81%;top:18%}
.map-node-person{top:43%}.map-node-internal{left:19%;top:69%}.map-node-admin{left:50%;top:69%}.map-node-mobile{left:81%;top:69%}.map-node-design{left:50%;top:89%;width:172px}
.nda-cover,.experience-thumbnail.nda-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1024/543;height:auto;background:radial-gradient(ellipse at 50% 30%,var(--blue-bg),transparent 75%),var(--soft);border:1px solid var(--line);border-radius:6px;color:var(--muted);overflow:hidden}
.nda-cover strong{font-size:clamp(12px,1.3vw,18px);font-weight:500;letter-spacing:.12em}.experience-thumbnail.nda-cover:after{display:none}.nda-lock{position:relative;display:block;width:23px;height:19px;border:1.5px solid var(--accent);border-radius:4px;margin-top:10px}.nda-lock:before{content:"";position:absolute;bottom:100%;left:4px;width:12px;height:11px;border:1.5px solid var(--accent);border-bottom:0;border-radius:8px 8px 0 0}.nda-lock:after{content:"";position:absolute;width:3px;height:5px;border-radius:2px;background:var(--accent);left:9px;top:6px}
#nda-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:40px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--fg)}
#nda-dialog::backdrop{background:#10142699;backdrop-filter:blur(6px)}
#nda-dialog h2{font-size:30px;letter-spacing:-1px;line-height:1.15;margin:24px 0 30px}.nda-close{position:absolute;right:14px;top:10px;font-size:28px;width:40px;height:40px;color:var(--muted)}
#nda-form label{display:block;font-size:14px;margin-bottom:10px}#nda-password{display:block;width:100%;height:48px;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--fg);font:inherit;padding:12px}#nda-password:focus{outline:2px solid var(--accent);outline-offset:2px}#nda-error{min-height:22px;font-size:13px;color:var(--amber-fg);margin:10px 0 14px}.nda-submit{width:100%;min-height:46px;background:var(--accent);color:var(--bg);border-radius:7px;font-size:15px}#nda-success{font-size:16px;line-height:1.7;color:var(--muted)}
@media(max-width:1100px) and (min-width:901px){.map-node-internal,.map-node-mobile,.map-node-design{width:132px}.map-node-admin{width:120px}}
@media(max-width:600px){.experience-map{min-height:760px}.map-node-company{width:27%;padding:12px 8px;min-height:78px}.map-node-company .map-node-label{font-size:1rem}.map-node-company .map-node-meta{font-size:.6rem}.map-node-domclick{left:18%;top:17%}.map-node-tass{left:50%;top:17%}.map-node-nda{left:82%;top:17%}.map-node-person{top:39%}.map-node-internal{left:25%;top:64%;width:132px}.map-node-admin{left:75%;top:64%;width:120px}.map-node-mobile{left:25%;top:86%;width:132px}.map-node-design{left:75%;top:86%;width:132px}#nda-dialog{padding:32px 24px}.nda-cover strong{font-size:12px}}
.map-node-tass{left:81%}.map-node-nda{left:50%}
@media(max-width:600px){.map-node-tass{left:82%}.map-node-nda{left:50%}}

/* Consistent node typography and a viewport-sized desktop workspace. */
.experience-map .map-node:not(.map-node-person):not(.map-node-company){width:clamp(124px,26%,172px);height:96px;min-height:96px;padding:14px;gap:8px}
.experience-map .map-node:not(.map-node-person):not(.map-node-company) .map-node-label{font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.25px}
.experience-map .map-node-company{height:86px;min-height:86px}
@media(min-width:901px){
  .experience-preview .experience-workspace{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);height:auto;min-height:min(600px,calc(100dvh - 128px))}
  .experience-preview .experience-map{height:100%;min-height:0}
  .experience-preview .experience-detail{display:flex;min-height:0;padding:22px;gap:20px;overflow:visible}
  .experience-preview .experience-detail-copy{min-height:0!important;flex:0 0 auto}
  .experience-preview .experience-detail-meta,.experience-preview .experience-related-label{font-size:11px;line-height:1.4}
  .experience-preview .experience-detail h3{font-size:24px;line-height:1.15;margin:12px 0;letter-spacing:-.7px}
  .experience-preview .experience-detail-text{font-size:14px;line-height:1.5}
  .experience-preview .experience-skills{margin-top:12px;gap:6px}
  .experience-preview .experience-skills>span{font-size:11px;padding:5px 7px}
  .experience-preview .experience-related{margin-top:0;flex:none;min-height:0;display:flex;flex-direction:column}
  .experience-preview .experience-case-list{flex:none;min-height:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:14px 10px;margin-top:10px;align-items:start;align-content:start}
  .experience-preview .experience-case-list button{display:flex;height:auto;min-height:0;gap:7px;font-size:11px;line-height:1.35}
  .experience-preview .experience-case-list button>span:nth-child(2){height:3em;min-height:3em;flex:none;padding:0}
  .experience-preview .experience-thumbnail{flex:none;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1024/543}
  .experience-preview .experience-thumbnail img{width:100%;height:100%;aspect-ratio:1024/543;object-fit:cover}
  .experience-preview .experience-thumbnail.nda-cover{gap:10px}
  .experience-preview .nda-cover strong{font-size:11px}
  .experience-map .map-node-person{width:220px;min-height:96px;height:96px;padding:14px}
  .experience-map .map-node-person .map-node-label{font-size:18px}
  .experience-map .map-node-company .map-node-label{font-size:18px}
  .experience-map .map-node-meta{font-size:10px;letter-spacing:.3px}
  .experience-map .map-node:not(.map-node-person):not(.map-node-company){height:86px;min-height:86px}
  .experience-map .map-node:not(.map-node-person):not(.map-node-company) .map-node-label{font-size:14px}
}
@media(min-width:901px) and (max-height:720px){
  .experience-preview .experience-detail{padding:16px;gap:12px}
  .experience-preview .experience-detail h3{font-size:21px;margin:9px 0}
  .experience-preview .experience-detail-text{font-size:13px;line-height:1.45}
  .experience-preview .experience-skills{margin-top:9px}
  .experience-map .map-node:not(.map-node-person){height:76px;min-height:76px}
}
@media(max-width:600px){
  .experience-map .map-node:not(.map-node-person):not(.map-node-company){width:40%;max-width:160px;height:96px;min-height:96px;padding:12px}
  .experience-map .map-node:not(.map-node-person):not(.map-node-company) .map-node-label{font-size:14px}
}
.assembly-continue{position:absolute;right:32px;bottom:48px;padding:9px 13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--accent);font-size:12px;line-height:1.4;box-shadow:0 3px 14px #00000008;z-index:5}
.assembly-continue:hover{border-color:var(--accent)}
@media(max-width:580px){.assembly-continue{right:14px;bottom:42px;font-size:11px;max-width:calc(100% - 28px)}}

/* Case captions keep their spacing while the label and inline arrow respond. */
.experience-preview .experience-case-list button>span:nth-child(2)::after{content:"↗";position:absolute;right:0;top:0;display:inline-block;margin-left:0;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .22s;color:var(--accent)}
.experience-preview .experience-case-list button:is(:hover,:focus-visible)>span:nth-child(2){color:var(--accent)}
.experience-preview .experience-case-list button:is(:hover,:focus-visible)>span:nth-child(2)::after{opacity:1;transform:translateX(0);transition-delay:.08s}
.experience-preview .experience-case-list{row-gap:10px}
@media(min-width:901px){.experience-preview .experience-detail{gap:14px}.experience-preview .experience-case-list{gap:10px}.experience-preview .experience-case-list button>span:nth-child(2){height:auto;min-height:2.7em}}
@media(prefers-reduced-motion:reduce){.experience-preview .experience-case-list button>span:nth-child(2)::after{transition:none}}

.experience-preview .experience-case-list button>span:nth-child(2){position:relative;width:100%;padding-right:18px}
.experience-case-title-text{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .25s}
.experience-preview .experience-case-list button:is(:hover,:focus-visible) .experience-case-title-text{background-size:100% 1px}
@media(prefers-reduced-motion:reduce){.experience-case-title-text{transition:none}}