@font-face{font-family:"Hong Lab Workbench";src:url("assets/fonts/HongLabWorkbench.subset.7671d21d5b1b.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{--paper:#eef1f2;--carbon:#182122;--muted:#54615e;--emerald:#007c65;--cobalt:#2858ad;--sans:"Hong Lab Workbench","Hong Lab Sans","Apple SD Gothic Neo",Arial,sans-serif}
*{letter-spacing:0}
body{background:#fafcfb;color:var(--carbon);font-family:var(--sans)}
body:has(dialog[open]){overflow:hidden}
main{max-width:none;margin:0}
.title-period{color:var(--emerald)}
.site-header.workbench-header{position:absolute;z-index:4;inset:0 0 auto;max-width:none;height:54px;padding:0 4%;border:0;background:transparent;color:var(--carbon)}
.workbench-header .brand{font-size:14px;color:var(--carbon)}
.workbench-header nav{gap:25px;font-size:13px;font-weight:650;color:var(--carbon)}
.workbench-header nav a:hover{color:var(--emerald)}
.workbench-hero{position:relative;background:var(--paper);border-bottom:1px solid #cbd4d1}
.workbench-visual{position:relative;width:min(100%,calc((100svh - 150px)*1.7768));max-width:1920px;margin:0 auto}
.workbench-copy{position:absolute;z-index:3;top:6%;left:7.5%;max-width:46%;pointer-events:none}
.workbench-copy .eyebrow{color:var(--muted);font-size:10px}
.workbench-copy h1{margin:8px 0 0;font-size:86px;font-weight:850;line-height:1;white-space:nowrap}
.workbench-subtitle{margin:9px 0 0;font-size:29px;font-weight:650;line-height:1.3}
.workbench-copy .intro-copy{margin:15px 0 0;color:#34423f;font-size:17px;line-height:1.55}
.workbench-scene{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden}
.workbench-scene>picture,.workbench-background{display:block;width:100%;height:100%}
.workbench-background{object-fit:contain;user-select:none}
.screen-layer,.hotspot-layer{position:absolute;inset:0}
.workbench-screen{position:absolute;z-index:1;display:block;transform-origin:0 0;pointer-events:none;overflow:hidden;border-radius:2px}
.workbench-screen img{display:block;width:100%;height:100%;object-fit:fill}
.scene-hotspot{position:absolute;z-index:2;border:0;background:transparent;padding:0;clip-path:polygon(var(--hotspot-polygon));cursor:pointer;touch-action:manipulation}
.scene-hotspot::after{position:absolute;inset:0;content:"";background:#00a88700;transition:background .2s ease;pointer-events:none}
.scene-hotspot:hover::after,.scene-hotspot:focus-visible::after{background:#00a88724;box-shadow:inset 0 0 0 3px #008c71}
.scene-hotspot:focus-visible{outline:3px solid var(--emerald);outline-offset:-4px}
.scene-object-label{position:absolute;z-index:3;transform:translateX(-50%);padding:4px 0;color:#1d2926;font-size:13px;font-weight:650;line-height:1.3;white-space:nowrap;pointer-events:none;text-shadow:0 1px 5px #ffffffcc}
.scene-hotspot:hover+.scene-object-label,.scene-hotspot:focus-visible+.scene-object-label{color:var(--emerald);text-decoration:underline;text-underline-offset:5px}
.workbench-projects,.workbench-noscript{display:flex;justify-content:center;gap:24px;padding:6px 20px 0;margin:0 auto;max-width:1400px}
.workbench-projects button,.workbench-noscript a{display:inline-flex;align-items:center;min-height:44px;padding:7px 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--carbon);font:600 13px/1.35 var(--sans);cursor:pointer}
.workbench-projects button:hover,.workbench-projects button:focus-visible{color:var(--emerald);border-bottom-color:var(--emerald)}
.workbench-projects button:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.workbench-provenance{margin:0;padding:4px 20px 12px;text-align:center;color:#53605c;font-size:10px;line-height:1.4}
.projects{max-width:1360px;margin:0 auto;padding:26px 32px 70px}
.project-toolbar{padding:0 0 26px}
.project-toolbar h2{color:var(--carbon);font-size:21px}
.project-toolbar h2 span{color:var(--muted)}
.filters{gap:16px}.filter{color:var(--muted);font-size:13px}
.filter:hover,.filter:focus-visible,.filter.is-active{border-color:var(--emerald);color:var(--carbon)}
.project-grid{gap:40px 26px;padding-bottom:0}
.project-card{padding-top:14px;border-top:2px solid #9fb3ab}
.project-card:nth-child(2n){border-color:#9aafd3}
.media-preview{border-radius:3px;background:#dde5e1}
.play-corner{background:#152321ed}
.project-meta{color:#53645d}.project-card h3{color:var(--carbon)}
.project-summary{color:var(--muted)}.card-bottom{border-color:#cbd4ce}
.text-action,.card-bottom a{color:var(--carbon)}
.text-action img,.card-bottom a img,.maker-intro a img,.case-link img{filter:none}
.text-action:hover,.card-bottom a:hover{color:var(--emerald)}
.maker-intro{border-color:#b7c4be}.maker-intro h3,.about h2,.approach h2,.approach h3,.about-name{color:var(--carbon)}
.maker-intro h3 span,.maker-intro a{color:var(--emerald)}
.maker-intro p,.about-copy,.approach p{color:var(--muted)}
.about,.approach{max-width:1296px;margin:0 auto;border-color:#cbd4ce;padding-right:32px;padding-left:32px}
.approach li{border-color:#cbd4ce}.approach li>span{color:var(--cobalt)}
.site-footer{max-width:none;border-color:#cbd4ce;color:var(--muted);padding:24px 4%}
.site-footer .brand{color:var(--carbon)}
.case-dialog,.video-dialog{border:1px solid #9baba4;border-radius:6px;background:#fafcfb;color:var(--carbon);box-shadow:0 24px 80px #17211d4d}
.case-dialog::backdrop,.video-dialog::backdrop{background:#1425219c;backdrop-filter:blur(4px)}
.dialog-header,.video-dialog-header{border-color:#cbd4ce;background:#fafcfb}
.dialog-header .eyebrow,.video-dialog-header .eyebrow{color:var(--emerald)}
.icon-button{border-color:#acbab3;border-radius:4px}.icon-button img{filter:none}
.icon-button:hover,.icon-button:focus-visible{border-color:var(--emerald);background:#e6f4ee}
.case-index{color:var(--cobalt)}.case-state,.workflow-list strong,.copy-status{color:var(--emerald)}
.case-lead,.case-facts dd,.feature-list li,.workflow-list li,.stack-list li,.case-automation>p:not(.eyebrow){color:#35483e}
.case-facts,.case-facts>div,.feature-list,.feature-list li,.workflow-list,.workflow-list li{border-color:#cbd4ce}
.case-facts dt{color:var(--emerald)}.stack-list li{border-color:#acbab3}
.case-automation{border-color:#9ac8bb;border-radius:4px;background:#edf7f3}
.case-note,.copy-case-link,.demo-label,.music-credit,.video-context,.media-provenance{color:#52655b}
.case-link{color:var(--emerald)}.video-open{border-radius:3px;background:#17231ce8}
.music-credit a{color:#006f67}
.video-open img{filter:brightness(0) invert(1)}
@media(min-width:1700px){.workbench-copy h1{font-size:104px}.workbench-subtitle{font-size:34px}.workbench-copy .intro-copy{font-size:19px}}
@media(max-width:1200px){.workbench-copy h1{font-size:70px}.workbench-subtitle{font-size:25px}.workbench-copy .intro-copy{font-size:15px}.scene-object-label{font-size:11px}}
@media(max-width:960px){.workbench-copy h1{font-size:54px}.workbench-subtitle{font-size:21px}.workbench-copy .intro-copy{font-size:13px}.workbench-projects{gap:16px}.workbench-projects button{font-size:12px}}
@media(max-width:720px){
  .site-header.workbench-header{position:relative;height:52px;padding:0 20px;background:var(--paper)}
  .workbench-header nav{gap:20px;font-size:12px}
  .workbench-visual{width:100%}
  .workbench-copy{position:relative;inset:auto;max-width:none;padding:22px 20px 20px}
  .workbench-copy h1{font-size:54px;margin-top:8px}
  .workbench-subtitle{font-size:23px;margin-top:7px}
  .workbench-copy .intro-copy{font-size:14px;margin-top:9px}
  .scene-object-label{display:none}
  .workbench-projects,.workbench-noscript{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:8px 20px 0}
  .workbench-projects button,.workbench-noscript a{min-height:44px;font-size:12px;justify-content:flex-start;border-bottom:1px solid #cbd4ce;white-space:normal}
  .workbench-provenance{padding:12px 20px;font-size:10px;text-align:left}
  .projects{padding:26px 20px 48px}.project-toolbar{gap:14px;padding-bottom:21px}.project-toolbar h2{font-size:20px}
  .project-grid{gap:32px}.project-card{padding-top:10px}.about,.approach{padding:38px 20px}.site-footer{padding:22px 20px}
  .case-dialog,.video-dialog{width:calc(100% - 18px)}.dialog-content{padding:22px 18px}
}
@media(max-width:360px){.workbench-copy{padding-top:15px;padding-bottom:16px}.workbench-copy h1{font-size:45px}.workbench-subtitle{font-size:20px}.workbench-copy .intro-copy{font-size:12px}.workbench-header nav{gap:15px}}
@media(prefers-reduced-motion:reduce){.scene-hotspot::after{transition:none!important}}
@media(max-width:360px) and (max-height:650px){.workbench-copy .eyebrow{display:none}.workbench-copy{padding:4px 20px 10px}.workbench-copy h1{margin-top:0}.workbench-scene{width:90%;margin:auto}.workbench-provenance{padding-top:8px;padding-bottom:8px}.projects{padding-top:18px}}
/* The workbench and portfolio are separate views, not stacked sections. */
body:not([data-view="portfolio"]) main>:not(.workbench-hero),body:not([data-view="portfolio"])>.site-footer{display:none}
body:not([data-view="portfolio"]){height:100svh;overflow:hidden;background:var(--paper)}
body:not([data-view="portfolio"]) .workbench-hero{height:100svh;display:flex;flex-direction:column;justify-content:center;border:0}
.workbench-visual{width:min(100%,calc((100svh - 155px)*1.7768))}
.workbench-enter{display:flex;align-items:center;justify-content:center;gap:24px;min-height:48px;margin:4px auto;color:var(--emerald);font-size:15px;font-weight:700;text-decoration:none}
.workbench-enter span{font-size:25px;transition:transform .2s}
.workbench-enter:hover span{transform:translateX(5px)}
.workbench-enter:focus-visible{outline:2px solid var(--emerald);outline-offset:4px}
body[data-view="portfolio"] .workbench-hero{display:none}
body[data-view="portfolio"] .workbench-header{position:sticky;top:0;background:#fafcfbf5;border-bottom:1px solid #cbd4ce}
body[data-view="portfolio"] .projects{padding-top:40px;min-height:70svh}
body[data-transitioning="true"] main{pointer-events:none}
@media(max-width:720px){
 body:not([data-view="portfolio"]) .workbench-hero{height:calc(100svh - 52px)}
 .workbench-visual{width:100%}
 .workbench-enter{min-height:44px;margin:0 auto;font-size:14px}
 .workbench-provenance{padding-top:4px;padding-bottom:8px;text-align:center}
}
@media(max-width:720px) and (max-height:740px){
 .workbench-copy .eyebrow{display:none}.workbench-copy{padding:4px 20px 10px}
 .workbench-copy h1{font-size:42px;margin-top:0}.workbench-subtitle{font-size:19px}
 .workbench-copy .intro-copy{font-size:12px;margin-top:5px}
 .workbench-scene{width:min(90%,calc((100svh - 340px)*1.7768));margin:auto}
 .workbench-projects{padding-top:0}.workbench-projects button{min-height:40px}
}
/* Full-bleed moving workbench. The scene and its projected screens share one canvas. */
body:not([data-view="portfolio"]) .workbench-hero{position:relative;height:100svh;overflow:hidden}
.workbench-visual{position:absolute;left:50%;top:50%;width:max(100vw,177.683svh);max-width:none;transform:translate(-50%,-50%)}
.workbench-scene{width:100%;margin:0;aspect-ratio:1672/941}
.workbench-copy{top:9%;left:7.5%;max-width:46%}
.workbench-copy h1{font-size:72px}.workbench-subtitle{font-size:25px}.workbench-copy .intro-copy{font-size:15px}
.workbench-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0}
.workbench-screen.is-playing video{opacity:1}
.workbench-screen[data-project="welding"]{box-shadow:0 0 0 10px #253333,0 10px 30px #17231c55;border-radius:4px}
.workbench-screen[data-project="prelab"]{box-shadow:0 0 0 14px #253333,0 16px 26px #17231c66;border-radius:4px}
.workbench-projects{position:absolute;left:32px;bottom:15px;gap:16px;padding:0;z-index:5}
.workbench-projects button{font-size:11px;text-shadow:0 1px 3px white}
.workbench-enter{position:absolute;right:34px;bottom:26px;z-index:5;margin:0;padding:0 16px;background:#f6faf8ed;border:1px solid #a2b5ad;border-radius:4px;box-shadow:0 3px 16px #24382a16}
.workbench-provenance{position:absolute;right:34px;bottom:4px;padding:0;font-size:9px;z-index:5}
.workbench-playback{position:absolute;right:34px;top:68px;width:38px;height:38px;border:1px solid #819b8f;border-radius:50%;background:#f6faf8e8;color:#1d3c2f;font-size:18px;z-index:5;cursor:pointer}
.scene-object-label{font-size:12px}
@media(min-width:1700px){.workbench-copy h1{font-size:88px}.workbench-subtitle{font-size:30px}}
@media(max-width:1000px) and (min-width:721px){.workbench-copy h1{font-size:54px}.workbench-projects{gap:9px;left:15px}.workbench-enter{right:20px}.workbench-projects button{font-size:10px}}
@media(max-width:720px){
 .site-header.workbench-header{position:absolute;inset:0 0 auto;background:transparent}
 body:not([data-view="portfolio"]) .workbench-hero{height:100svh}
 .workbench-visual{inset:0;width:100%;height:100%;transform:none}
 .workbench-copy{position:absolute;top:65px;left:20px;padding:0;max-width:none}
 .workbench-copy .eyebrow,.workbench-copy .intro-copy{display:none}
 .workbench-copy h1{font-size:45px;margin:0}.workbench-subtitle{font-size:19px;margin:5px 0 0}
 .workbench-scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 .workbench-background{object-fit:cover;object-position:45% center;opacity:.22}
 .screen-layer,.hotspot-layer{top:170px;left:20px;right:20px;bottom:95px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:28px 14px}
 .workbench-screen{position:relative!important;width:auto!important;height:auto!important;transform:none!important;border:5px solid #273331;border-radius:6px;box-shadow:0 8px 18px #17231c24!important;overflow:hidden}
 .workbench-screen img,.workbench-screen video{object-fit:cover}
 .workbench-screen[data-project="cnc"] img,.workbench-screen[data-project="cnc"] video{object-fit:contain;background:#151b18}
 .scene-hotspot{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;clip-path:none;background:none}
 .scene-object-label{display:none}
 .scene-hotspot::before{content:attr(data-label);position:absolute;left:0;top:100%;font-size:10px;line-height:23px;color:#254238;white-space:nowrap}
 .workbench-projects{display:none}
 .workbench-enter{right:20px;bottom:25px;font-size:13px}
 .workbench-playback{right:20px;top:78px}
 .workbench-provenance{left:20px;right:auto;bottom:9px;font-size:8px}
 body[data-view="portfolio"] .workbench-header{position:sticky}
}
@media(max-width:360px){.workbench-copy h1{font-size:38px}.workbench-subtitle{font-size:17px}.screen-layer,.hotspot-layer{top:155px;bottom:90px;gap:23px 12px}.scene-hotspot::before{font-size:9px}}