/* Shared app surfaces for the browsing hub and navigation. Print/detail stay independent. */
@media screen{
  .app-surface{--app-ground:#f5f5f7;--app-card:#fff;--app-ink:#272729;--app-muted:#7d7d83;--app-radius:20px;--app-elevation:0 2px 12px #1d1d1f04;--app-ease:cubic-bezier(.3,.1,.25,1)}
  body.app-surface:not(.project-view){background:var(--app-ground)}
  .app-surface .masthead{background:#f5f5f7e8;border-bottom:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .app-surface .profile-trigger>span,.app-surface .refresh-circle{background:#fff;color:#343436;border:0;box-shadow:0 1px 4px #1d1d1f0b;transition:background .2s,box-shadow .2s}
  .app-surface .profile-trigger:hover>span,.app-surface .refresh-trigger:hover>.refresh-circle{background:#e9e9ed;box-shadow:none}
  .app-surface dialog.header-sheet{background:var(--app-ground);padding-left:28px;padding-right:28px}
  .app-surface .sheet-heading h2{color:var(--app-muted)}
  .app-surface .sheet-close{margin:0;padding:0;width:44px;height:44px;border:0;border-radius:0;background:transparent;box-shadow:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
  .app-surface .sheet-close:hover{background:transparent;box-shadow:none;opacity:.65}
  .app-surface .sheet-close:focus-visible{outline:none}
  .app-surface .sheet-close:focus-visible svg{outline:none}
  .app-surface #site-menu .menu-primary{padding:12px 20px;background:var(--app-card);border-radius:var(--app-radius);gap:2px;box-shadow:var(--app-elevation)}
  .app-surface #site-menu .menu-primary a{font-size:22px;min-height:54px;padding:10px 12px;border-radius:12px;margin:0 -8px;transition:background .2s}
  .app-surface #site-menu .menu-primary a[aria-current="page"]{background:#f1f1f4;text-decoration:none}
  .app-surface #site-menu .menu-primary a:hover{background:#f5f5f7}
  .app-surface #site-menu .menu-resources{margin-top:16px;padding:12px 24px;border:0;background:var(--app-card);border-radius:var(--app-radius);box-shadow:var(--app-elevation)}
  .app-surface #site-menu .menu-panel a{border-color:#efeff2}
  .app-surface #site-menu .menu-panel a:last-child{border:0}
  .app-surface #profile-panel{padding-left:28px;padding-right:28px}
  .app-surface #profile-panel>.sheet-heading{margin-bottom:20px}
  .app-surface #profile-panel .profile-overview{padding:26px 24px;background:var(--app-card);border-radius:var(--app-radius);margin-bottom:16px;box-shadow:var(--app-elevation)}
  .app-surface #profile-panel .profile-monogram{background:#f0f0f3;color:#48484a}
  .app-surface #profile-panel .profile-summary{font-size:14px;color:#68686e;margin-bottom:18px}
  .app-surface #profile-panel .profile-focus{margin-bottom:0}
  .app-surface #profile-panel .profile-focus span{background:#f3f3f6;color:#74747b}
  .app-surface #profile-panel .profile-section{padding:24px;background:var(--app-card);border:0;border-radius:var(--app-radius);margin:0 0 16px;box-shadow:var(--app-elevation)}
  .app-surface #profile-panel .profile-section h4{font-size:14px;font-weight:550;color:#313133;margin-bottom:20px}
  .app-surface #profile-panel .profile-entry-heading{gap:8px 16px}
  .app-surface #profile-panel .profile-entry+.profile-entry{padding-top:18px;margin-top:18px;border-top:1px solid #f0f0f3}
  .app-surface #profile-panel .profile-entry>p,.app-surface #profile-panel .profile-entry ul,.app-surface #profile-panel .profile-tools{font-size:13px}
  .app-surface #profile-panel .profile-entry-role{color:#7d7d83}
  .app-surface #profile-panel .resume-heading h4{margin-bottom:0}
  .app-surface #profile-panel .resume-links button{background:#f5f5f7;border-radius:12px;min-height:48px;font-size:12px;padding:10px;gap:6px}
  .app-surface #profile-panel .profile-work-link{border:0;border-radius:var(--app-radius);padding:16px 24px;margin:0;background:var(--app-card);min-height:52px}
  .app-surface .hub-nav{gap:4px;padding:5px;margin:0 0 32px;border:0;border-radius:28px;background:#eaeaec;width:fit-content;max-width:100%}
  .app-surface .hub-nav a{padding:8px 22px;min-height:42px;border-radius:24px;font-size:13px;color:#77777d;transition:background .2s,color .2s,box-shadow .2s}
  .app-surface .hub-nav a::after{display:none}
  .app-surface .hub-nav a[aria-current="page"]{background:#fff;color:#29292b;box-shadow:0 1px 5px #1d1d1f0a}
  .app-surface .identity-spectrum{padding:28px;border:0;border-radius:var(--app-radius);background:var(--app-card);box-shadow:var(--app-elevation)}
  .app-surface .identity-copy h1 span{color:#88888d}
  .app-surface .work-home .featured-stage{gap:0 32px;background:var(--app-card);border-radius:24px;overflow:hidden;box-shadow:var(--app-elevation);margin-bottom:72px}
  .app-surface .work-home .featured-media{border-radius:0;outline-offset:-5px}
  .app-surface .work-home .featured-copy{padding:28px 0 30px 28px}
  .app-surface .work-home .featured-copy>a span{background:#f5f5f7;border:0}
  .app-surface .work-home .featured-tabs{margin:22px 28px 28px 0}
  .app-surface .work-home .featured-tabs button{border-bottom-color:#ececef}
  .app-surface .work-home .featured-tabs button[aria-pressed="true"]{border-bottom-color:#b5b5ba}
  .app-surface :is(.work-home,.collection-page) .practice-section,.app-surface #visualization>.practice-grid{padding:32px;background:var(--app-card);border-radius:24px;box-shadow:var(--app-elevation)}
  .app-surface :is(.work-home,.collection-page) .practice-card{border-top-color:#ededf0}
  .app-surface :is(.work-home,.collection-page) .practice-card:first-child{border-top:0;padding-top:4px}
  .app-surface :is(.work-home,.collection-page) .practice-card:last-child{padding-bottom:0}
  .app-surface :is(.work-home,.collection-page) .practice-section h2{margin-bottom:24px}
  .app-surface :is(.work-home,.product-hub) .work-toolbar h2{font-size:17px}
  .app-surface :is(.work-home,.product-hub) .filters{background:#eaeaec;padding:4px}
  .app-surface :is(.work-home,.product-hub) .filters button[aria-pressed="true"]{background:#fff}
  .app-surface :is(.work-home,.collection-page) .project-card{background:var(--app-card);border-radius:var(--app-radius);overflow:hidden;box-shadow:var(--app-elevation);transition:transform .3s var(--app-ease),box-shadow .3s}
  .app-surface :is(.work-home,.collection-page) .card-visual{border-radius:0;background:#eeeef0}
  .app-surface :is(.work-home,.collection-page) .card-meta{margin:20px 24px 0}
  .app-surface :is(.work-home,.collection-page) .project-card h2{margin:10px 24px 8px}
  .app-surface :is(.work-home,.collection-page) .project-card p{margin:0 24px 24px;line-height:1.7}
  .app-surface :is(.work-home,.collection-page) .project-card h2:last-child{margin-bottom:24px}
  .app-surface :is(.work-home,.collection-page) .project-card:focus-visible{outline-offset:4px}
  .app-surface .about-grid>div{border:0;background:var(--app-card);border-radius:var(--app-radius);padding:28px;box-shadow:var(--app-elevation)}
  .app-surface .floating-actions{background:#ffffffed;border:0;box-shadow:0 10px 28px #1d1d1f18,0 2px 6px #1d1d1f12}
  .app-surface dialog.contact-sheet{background:var(--app-card);border:0;border-radius:var(--app-radius);box-shadow:0 12px 48px #1d1d1f14}
}
@media screen and (hover:hover){
  .app-surface :is(.work-home,.collection-page) .project-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #1d1d1f09}
}
@media screen and (max-width:1000px){
  .app-surface .work-home .featured-copy{padding-right:28px;padding-bottom:22px}
  .app-surface .work-home .featured-tabs{margin:0 28px 28px}
}
@media screen and (max-width:900px){
  .app-surface .identity-spectrum{padding:26px}
}
@media screen and (max-width:600px){
  .app-surface dialog.header-sheet,.app-surface #profile-panel{padding-left:18px;padding-right:18px}
  .app-surface #profile-panel .profile-overview{padding:24px 20px}
  .app-surface #profile-panel .profile-section{padding:22px 20px}
  .app-surface #profile-panel .profile-identity{gap:14px}
  .app-surface #profile-panel .profile-monogram{width:60px;height:60px;font-size:27px}
  .app-surface #profile-panel .profile-entry-heading{flex-direction:column;gap:4px;align-items:flex-start}
  .app-surface #profile-panel .profile-tools{grid-template-columns:58px minmax(0,1fr);gap:12px}
  .app-surface #profile-panel .resume-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .app-surface #profile-panel .service-monogram{width:20px;height:20px}
  .app-surface .hub-nav{width:100%;gap:3px;padding:4px;margin-bottom:24px}
  .app-surface .hub-nav a{flex:1;justify-content:center;padding:8px 10px;font-size:12px;min-height:44px}
  .app-surface .identity-spectrum{padding:24px}
  .app-surface .work-home .featured-stage{border-radius:var(--app-radius);margin-bottom:56px}
  .app-surface .work-home .featured-copy{padding:22px 22px 20px}
  .app-surface .work-home .featured-tabs{margin:0 22px 22px;gap:12px}
  .app-surface :is(.work-home,.collection-page) .practice-section,.app-surface #visualization>.practice-grid{padding:24px}
  .app-surface :is(.work-home,.collection-page) .project-grid{gap:24px}
  .app-surface :is(.work-home,.collection-page) .card-meta{margin-left:20px;margin-right:20px}
  .app-surface :is(.work-home,.collection-page) .project-card h2{margin-left:20px;margin-right:20px}
  .app-surface :is(.work-home,.collection-page) .project-card p{margin-left:20px;margin-right:20px}
  .app-surface .about-grid>div{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  .app-surface :is(.work-home,.collection-page) .project-card,.app-surface .hub-nav a,.app-surface .sheet-close,.app-surface .profile-trigger>span,.app-surface .refresh-circle{transition:none}
  .app-surface :is(.work-home,.collection-page) .project-card:hover{transform:none}
}

/* Softer hierarchy, shared selection movement and fewer divider lines. */
@media screen{
  .app-surface .masthead{min-height:76px;padding-top:12px;padding-bottom:12px;background:#f5f5f7ed;box-shadow:none}
  .app-surface .masthead>.wordmark{font-size:26px;font-weight:600;letter-spacing:-.035em}
  .app-surface .profile-trigger>span,.app-surface .refresh-circle{border:0;background:#eaeaec;color:#454548;box-shadow:none}
  .app-surface .header-actions{gap:6px}
  .app-surface .header-trigger{border:0;box-shadow:none}
  .app-surface .profile-trigger:hover>span,.app-surface .refresh-trigger:hover>.refresh-circle{background:#dedee3;box-shadow:none}
  .app-surface .hub-nav,.app-surface .filters{position:relative;isolation:isolate}
  .selection-pill{position:absolute;z-index:0;pointer-events:none;border:0;border-radius:24px;background:#fff;box-shadow:0 2px 7px #1d1d1f09}
  .app-surface .hub-nav>a,.app-surface .filters>button{position:relative;z-index:1;transition:color .2s}
  .app-surface .hub-nav.is-ready>a[aria-current="page"],.app-surface .filters.is-ready>button[aria-pressed="true"]{background:transparent;box-shadow:none}
  .project-view .site-content>.identity-hero,.project-view .site-content>.hub-nav,.about-view .site-content>.identity-hero,.about-view .site-content>.hub-nav{display:none}
  .app-surface .site-content>.collection-page{padding-top:12px}
  .app-surface .identity-hero{padding-top:56px;padding-bottom:44px;margin-bottom:16px;gap:64px}
  .app-surface .identity-copy h1{font-size:clamp(36px,3.8vw,54px);font-weight:560;line-height:1.16}
  .app-surface .identity-copy>p{color:#75757b;font-size:16px;font-weight:400;line-height:1.55}
  .app-surface .identity-eyebrow{font-size:10px;letter-spacing:.06em;color:#94949a}
  .app-surface .spectrum-caption{font-size:11px;color:#929298;margin-bottom:22px}
  .app-surface .identity-spectrum .spectrum-card h3{font-size:17px;font-weight:500;margin-bottom:5px}
  .app-surface .identity-spectrum li p{font-size:12px;color:#929298}
  .app-surface .spectrum-footnote{color:#a0a0a6;font-size:10px}
  .app-surface :is(.work-home,.collection-page) .practice-section h2,.app-surface :is(.work-home,.product-hub) .work-toolbar h2,.app-surface .collection-studies>h2{font-size:20px;font-weight:550;letter-spacing:-.035em}
  .app-surface :is(.work-home,.collection-page) .practice-card{border:0;padding-top:30px;padding-bottom:30px}
  .app-surface :is(.work-home,.collection-page) .practice-card h3{font-size:clamp(20px,1.7vw,24px);font-weight:520}
  .app-surface :is(.work-home,.collection-page) .practice-card p{font-size:13px;color:#838389;line-height:1.8}
  .app-surface :is(.work-home,.collection-page) .practice-meta>span:first-child{font-size:12px;color:#6d6d73}
  .app-surface :is(.work-home,.collection-page) .practice-meta>span:last-child{font-size:11px;color:#9a9aa0}
  .app-surface .work-home .featured-copy h2{font-size:clamp(28px,3vw,40px)}
  .app-surface .work-home .featured-copy>span{font-size:10px;color:#9a9aa0}
  .app-surface .work-home .featured-copy p{font-size:15px;font-weight:400;line-height:1.55;color:#818187}
  .app-surface .work-home .featured-tabs{gap:4px}
  .app-surface .work-home .featured-tabs button{border:0;border-radius:12px;padding:11px 12px;transition:background .25s,color .25s}
  .app-surface .work-home .featured-tabs button[aria-pressed="true"]{border:0;background:#f3f3f6}
  .app-surface .work-home .featured-tabs button span{font-size:12px}
  .app-surface :is(.work-home,.collection-page) .project-card h2{font-size:clamp(23px,2.1vw,29px);font-weight:540}
  .app-surface :is(.work-home,.collection-page) .card-meta{font-size:11px;color:#96969b;letter-spacing:0}
  .app-surface :is(.work-home,.collection-page) .project-card p{font-size:13px;color:#87878d}
  .app-surface .collection-heading h1{font-size:clamp(36px,4.7vw,56px);font-weight:550;margin-top:10px}
  .app-surface .collection-heading>p{font-size:14px;color:#8a8a90}
  .app-surface #profile-panel .profile-section h4{font-size:15px;font-weight:550}
  .app-surface #profile-panel .profile-entry h5{font-size:16px;font-weight:550}
  .app-surface #profile-panel .profile-entry+.profile-entry{border:0;margin-top:26px;padding-top:0}
  .app-surface #profile-panel .profile-entry-heading>span{color:#9b9ba1}
  .app-surface #site-menu .menu-panel a{border:0;border-radius:10px;padding-top:12px;padding-bottom:12px}
  .app-surface #site-menu .menu-panel a:hover{background:#f5f5f7}
  .app-surface .endnote{border:0;color:#a0a0a6}
  .app-surface .contact-email{border:0;border-radius:12px;background:#f5f5f7;padding:10px 14px}
}
@media screen and (max-width:1000px){.app-surface .work-home .featured-tabs{gap:6px}}
@media screen and (max-width:900px){.app-surface .identity-hero{gap:32px;padding-top:40px;padding-bottom:32px}}
@media screen and (max-width:600px){
  .app-surface .masthead{min-height:68px;padding-top:10px;padding-bottom:10px}
  .app-surface .masthead>.wordmark{font-size:21px}
  .app-surface .header-actions{gap:3px}
  .app-surface .identity-copy h1{font-size:clamp(32px,8.8vw,38px)}
  .app-surface .identity-copy>p{font-size:15px}
  .app-surface .identity-hero{padding-top:32px;gap:28px}
  .app-surface .work-home .featured-copy h2{font-size:29px}
  .app-surface .work-home .featured-tabs button{padding:10px 8px;min-height:66px}
  .app-surface .work-home .featured-tabs button span{font-size:11px}
  .app-surface .work-home .featured-tabs button::after{right:6px}
  .app-surface :is(.work-home,.collection-page) .practice-section h2,.app-surface :is(.work-home,.product-hub) .work-toolbar h2,.app-surface .collection-studies>h2{font-size:19px}
  .app-surface :is(.work-home,.collection-page) .practice-card{padding-top:26px;padding-bottom:26px}
  .app-surface :is(.work-home,.collection-page) .project-card h2{font-size:25px}
  .app-surface .collection-heading h1{font-size:36px}
}
@media screen and (max-width:360px){.app-surface .masthead>.wordmark{font-size:18px}}
@media(prefers-reduced-motion:reduce){.app-surface .hub-nav>a,.app-surface .filters>button,.app-surface .work-home .featured-tabs button{transition:none}}

/* Hub pages: overview at home; distinct, directly addressable collection screens. */
@media screen{
  .collection-view .site-content>.identity-hero{display:none}
  body.app-surface.collection-view .site-content>.hub-nav{margin-top:24px}
  .app-surface .hub-gateway{margin:0 0 48px}
  .gateway-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 20px}
  .gateway-heading h2{font-size:20px;font-weight:550;letter-spacing:-.035em;margin:0}
  .gateway-heading>p{font-size:12px;color:#97979d;line-height:1.6;margin:0}
  .gateway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .gateway-card{position:relative;display:block;min-width:0;padding:28px 28px 34px;background:#fff;border:0;border-radius:20px;box-shadow:var(--app-elevation);transition:transform .3s var(--app-ease),box-shadow .3s}
  .gateway-number{font-size:11px;font-variant-numeric:tabular-nums;color:#a1a1a7}
  .gateway-card h3{font-size:clamp(20px,2vw,27px);font-weight:550;line-height:1.3;letter-spacing:-.04em;margin:22px 0 12px}
  .gateway-card>p{font-size:12px;line-height:1.7;color:#85858b;margin:0;padding-right:30px;word-break:keep-all}
  .gateway-arrow{position:absolute;right:24px;bottom:24px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f5f5f7;color:#6d6d73;font-size:18px}
  .hub-back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 16px;font-size:12px;color:#94949a}
  .collection-heading>.eyebrow{display:block}
  .app-surface .site-content>.collection-page{padding-top:0}
  .app-surface .collection-page .collection-heading{padding-top:0;margin-bottom:32px}
  .app-surface .product-hub .work-toolbar{padding-top:0}
}
@media screen and (hover:hover){.gateway-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #1d1d1f09}}
@media screen and (max-width:760px){
  .gateway-grid{grid-template-columns:1fr;gap:12px}
  .gateway-card{padding:22px 24px;min-height:132px}
  .gateway-card h3{font-size:24px;margin-top:12px;margin-bottom:8px}
  .gateway-card>p{padding-right:30px}
  .gateway-arrow{right:24px;bottom:24px}
  .gateway-heading{align-items:flex-start;flex-direction:column;gap:8px}
}
@media screen and (max-width:600px){
  .app-surface .hub-nav a{padding-left:6px;padding-right:6px;font-size:11px}
  .app-surface .hub-gateway{margin-bottom:32px}
}
@media(prefers-reduced-motion:reduce){.gateway-card{transition:none}.gateway-card:hover{transform:none}}

/* Plain header actions and an original-photo crop; no decorative circle around controls. */
@media screen{
  .app-surface .header-trigger,.app-surface .header-trigger:hover{background:transparent;border:0;box-shadow:none}
  .app-surface .refresh-circle,.app-surface .refresh-trigger:hover>.refresh-circle{width:24px;height:24px;background:transparent;border:0;box-shadow:none;border-radius:0;color:inherit}
  .app-surface .menu-trigger svg,.app-surface .refresh-circle svg{width:24px;height:24px;stroke-width:1.5}
  .app-surface .portrait-frame{position:relative;display:block;overflow:hidden;border:0;border-radius:50%;flex-shrink:0;background:transparent;box-shadow:none}
  .app-surface .portrait-frame img{position:absolute;display:block;width:166.08%;max-width:none;height:auto;left:-33.04%;top:-5.41%;border:0}
  .app-surface .profile-trigger>.header-portrait,.app-surface .profile-trigger:hover>.header-portrait{width:24px;height:24px;background:transparent;border:0;box-shadow:none}
  .app-surface #profile-panel .profile-monogram{width:88px;height:88px;background:transparent;border:0;box-shadow:none}
  .app-surface #profile-panel .profile-identity{gap:20px;align-items:center}
  .app-surface .hub-nav a{white-space:nowrap}
}
@media screen and (max-width:600px){
  .app-surface .menu-trigger svg,.app-surface .refresh-circle svg,.app-surface .refresh-circle{width:22px;height:22px}
  .app-surface .profile-trigger>.header-portrait,.app-surface .profile-trigger:hover>.header-portrait{width:22px;height:22px}
  .app-surface #profile-panel .profile-monogram{width:76px;height:76px}
  .app-surface #profile-panel .profile-identity{gap:16px}
  .app-surface .hub-nav a{font-size:11px;padding-left:5px;padding-right:5px}
}

@media screen{
  body.app-surface:not(.collection-view) .site-content>.hub-nav>a[data-view="home"],
  body.app-surface:not(.collection-view) .site-content>.hub-nav>.selection-pill{display:none}
}

/* Main tabs choose representative previews; the sub-hub navigator changes pages. */
@media screen{
  body.app-surface:not(.collection-view) .site-content>.hub-nav{display:none}
  .main-preview-tabs{display:flex;position:relative;isolation:isolate;gap:4px;padding:5px;margin:0 0 28px;border-radius:28px;background:#eaeaec;width:fit-content;max-width:100%}
  .main-preview-tabs>button{position:relative;z-index:1;min-height:44px;padding:8px 22px;border:0;border-radius:24px;background:transparent;color:#77777d;white-space:nowrap;font-size:13px;transition:color .2s}
  .main-preview-tabs>button[aria-selected="true"]{color:#29292b}
  .main-preview-tabs:not(.is-ready)>button[aria-selected="true"]{background:#fff}
  .collection-view .main-preview-tabs,.project-view .main-preview-tabs,.about-view .main-preview-tabs{display:none}
  .main-preview-stage{position:relative;margin-bottom:48px}
  .main-preview-stage.is-switching{overflow:visible}
  .main-preview-panel[hidden]{display:none!important}
  .app-surface .work-home .main-preview-stage .featured-stage{margin-bottom:0}
  .preview-details{grid-column:2;grid-row:2;padding:28px 28px 28px 0;font-size:15px;font-weight:400;line-height:1.55;color:#89898f}
  .preview-details p{margin:0 0 16px}
  .preview-details a{display:inline-flex;align-items:center;min-height:44px;color:#4d4d53;font-size:12px}
  .app-surface .work-home .featured-media{background:var(--render-background,#000)}
}
@media screen and (max-width:1000px){.preview-details{grid-column:1;grid-row:3;padding:0 28px 24px}.preview-details p br{display:none}}
@media screen and (max-width:600px){.main-preview-tabs{width:100%;padding:4px;gap:3px;margin-bottom:24px}.main-preview-tabs>button{flex:1;padding:8px 10px;font-size:12px}.main-preview-stage{margin-bottom:32px}.preview-details{padding:0 22px 22px}}

/* Local previews use real panels inside the persistent page shell. */

/* Borderless close controls, reversible menu/profile morphs and shallow tool cards. */
@media screen{
  .app-surface .sheet-close,.app-surface .sheet-close:is(:focus,:focus-visible,:active){outline:0;border:0;box-shadow:none;background:transparent}
  .sheet-heading h2[tabindex="-1"]{outline:0}
  .menu-morph .menu-line{transition:transform 780ms cubic-bezier(.3,.1,.25,1),opacity 360ms ease;transform-box:view-box}
  .menu-morph .top{transform-origin:12px 5px}
  .menu-morph .middle{transform-origin:12px 12px}
  .menu-morph .bottom{transform-origin:12px 19px}
  .menu-trigger.is-active .top,.header-sheet.is-revealed .menu-close .top{transform:translateY(7px) rotate(45deg)}
  .menu-trigger.is-active .middle,.header-sheet.is-revealed .menu-close .middle{opacity:0;transform:scaleX(.3)}
  .menu-trigger.is-active .bottom,.header-sheet.is-revealed .menu-close .bottom{transform:translateY(-7px) rotate(-45deg)}
  .app-surface .profile-trigger>.profile-morph,.app-surface .profile-trigger:hover>.profile-morph,.profile-close>.profile-morph{position:relative;display:grid;place-items:center;width:32px;height:32px;background:transparent;border:0;box-shadow:none;color:inherit}
  .app-surface .profile-morph>.header-portrait{width:24px;height:24px;transition:opacity 440ms ease,transform 780ms cubic-bezier(.3,.1,.25,1)}
  .app-surface .profile-morph>svg{position:absolute;inset:0;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .profile-trigger.is-active .header-portrait,.header-sheet.is-revealed .profile-close .header-portrait{opacity:0;transform:scale(.72)}
  .app-surface .sheet-close:focus-visible{color:#111;opacity:1}
  .app-surface.keyboard-navigation .sheet-close:focus-visible .profile-arc,.app-surface.keyboard-navigation .sheet-close:focus-visible .menu-line{stroke-width:2.4}
  #profile-panel .profile-overview,#profile-panel .profile-section{box-shadow:0 3px 14px #24242806,0 1px 2px #24242803}
  #profile-panel.is-revealed>.profile-overview.card-in-view,#profile-panel.is-revealed>.profile-section.card-in-view,#profile-panel.is-revealed>.profile-work-link.card-in-view{animation:profile-card-arrive 850ms cubic-bezier(.3,.1,.25,1) both;animation-delay:var(--card-delay,60ms)}
  #profile-panel.is-closing>.profile-overview,#profile-panel.is-closing>.profile-section,#profile-panel.is-closing>.profile-work-link{animation:none}
  .app-surface #profile-panel .profile-tools{display:block;margin:0}
  .tool-group+.tool-group{margin-top:20px}
  .app-surface #profile-panel .tool-group>dt{font-size:10px;line-height:1.5;color:#96969c;margin-bottom:9px}
  .tool-group>dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
  .tool-chip{display:flex;align-items:center;gap:9px;min-width:0;min-height:48px;padding:8px 10px;border-radius:12px;background:linear-gradient(145deg,#fff,#f8f8fa);box-shadow:0 2px 7px #24242806,inset 0 1px 0 #fff;font-size:11px;color:#65656b;line-height:1.35}
  a.tool-chip{transition:transform .2s,box-shadow .2s}
  .tool-icon{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px}
  .tool-icon img{display:block;width:24px;height:24px;object-fit:contain;filter:grayscale(1);opacity:.82}
  .tool-text{min-height:38px;padding-left:12px;background:#f5f5f7;box-shadow:none}
  .service-monogram img{display:block;width:16px;height:16px;filter:grayscale(1)}
  .app-surface .identity-copy h1.motion-title{font-weight:450}
  .app-surface .motion-title>.hero-line{display:inline;white-space:nowrap;color:#29292b}
  .motion-title .hero-suffix{font-weight:400;color:#89898f}
  .motion-phrase{display:inline-grid;white-space:nowrap;vertical-align:baseline}
  .motion-phrase::after{content:attr(data-word);grid-area:1/1;visibility:hidden;font-weight:900}
  .motion-phrase>span{grid-area:1/1;justify-self:start;font-weight:500}
  .app-surface .identity-copy h1 .motion-phrase>span{color:#343436}
  .hero-in-view.type-ready .motion-phrase>span{animation:product-weight 6.2s cubic-bezier(.22,.75,.22,1) infinite}
  .hero-in-view.type-ready .hero-second .motion-phrase>span{animation-name:visual-weight}
  .motion-paused .motion-phrase>span{animation-play-state:paused}
}
@media screen and (hover:hover){a.tool-chip:hover{transform:translateY(-2px);box-shadow:0 5px 12px #2424280a}}
@media screen and (max-width:600px){
  .app-surface .profile-trigger>.profile-morph,.app-surface .profile-trigger:hover>.profile-morph,.profile-close>.profile-morph{width:30px;height:30px}
  .app-surface .profile-morph>svg{width:30px;height:30px}
  .app-surface .profile-morph>.header-portrait{width:22px;height:22px}
  .tool-chip{font-size:11px;padding:8px;gap:7px}
}
@keyframes profile-card-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes product-weight{0%,5%,94%,100%{font-weight:500}14%{font-weight:900}19%{font-weight:770}24%{font-weight:820}29%,70%{font-weight:800}82%{font-weight:530}89%{font-weight:480}}
@keyframes visual-weight{0%,33%,94%,100%{font-weight:500}42%{font-weight:900}47%{font-weight:770}52%{font-weight:820}57%,70%{font-weight:800}82%{font-weight:530}89%{font-weight:480}}
@media(prefers-reduced-motion:reduce){
  .menu-morph .menu-line,.app-surface .profile-morph>.header-portrait,a.tool-chip{transition:none}
  #profile-panel.is-revealed>.profile-overview,#profile-panel.is-revealed>.profile-section,#profile-panel.is-revealed>.profile-work-link{animation:none}
}

/* Drawer controls use the live header coordinates at every responsive width. */
@media screen{
  .app-surface dialog.header-sheet{padding-top:calc(var(--masthead-height,76px) + 20px)}
  .app-surface .header-sheet>.sheet-heading{position:absolute;left:0;right:0;top:0;min-height:var(--masthead-height,76px);height:var(--masthead-height,76px);margin:0}
  .app-surface #site-menu .menu-close{position:absolute;left:var(--menu-control-left,18px);top:var(--menu-control-top,12px)}
  .app-surface #profile-panel .profile-close{position:absolute;right:var(--profile-control-right,18px);top:var(--profile-control-top,12px)}
  .app-surface .sheet-close:focus-visible{color:inherit}
}

/* Responsive bilingual text, floating actions and paced profile reveals. */
@media screen{
  .app-surface .identity-hero{padding-top:28px}
  .app-surface .floating-actions{bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .app-surface .floating-actions.is-expanded #contact-button{background:#343438;color:#fff}
  .app-surface .floating-actions.is-expanded #contact-button:hover{background:#47474d}
  .app-surface .floating-actions #contact-button{transition:background .25s,color .25s}
  #profile-panel.is-revealed>:is(.profile-overview,.profile-section,.profile-work-link):not(.card-in-view){opacity:0;transform:translateY(18px)}
  html[lang="en"] .app-surface .identity-copy h1.motion-title{font-size:clamp(28px,3.2vw,46px)}
  html[lang="en"] .native-copy h2{font-size:clamp(40px,4.8vw,76px);overflow-wrap:anywhere}
  html[lang="en"] .native-copy h3{font-size:clamp(26px,3vw,44px);overflow-wrap:anywhere}
  html[lang="en"] .profile-entry-heading{flex-wrap:wrap;gap:5px 12px}
  html[lang="en"] .gateway-card h3{font-size:clamp(19px,1.8vw,25px)}
}
@media screen and (max-width:600px){
  .app-surface .identity-hero{padding-top:24px}
  .app-surface .floating-actions{bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  html[lang="en"] .app-surface .identity-copy h1.motion-title{font-size:clamp(22px,6.6vw,27px)}
  html[lang="en"] .main-preview-tabs>button,html[lang="en"] .app-surface .hub-nav a{min-width:0;white-space:normal;font-size:10.5px;line-height:1.25;padding-left:6px;padding-right:6px}
}
@media(prefers-reduced-motion:reduce){
  #profile-panel.is-revealed>:is(.profile-overview,.profile-section,.profile-work-link){animation:none!important;opacity:1!important;transform:none!important}
}

/* Language replaces refresh beside the portrait; the centered name refreshes. */
@media screen{
  .app-surface .masthead>.wordmark{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit}
  .app-surface .masthead>.wordmark:focus-visible{outline:2px solid #777;outline-offset:3px;border-radius:3px}
  .app-surface .header-actions{gap:12px}
  .language-toggle{display:flex;align-items:center;justify-content:center;gap:2px;width:44px;min-width:44px;height:44px;padding:0;border:0;background:transparent;color:#a0a0a6;cursor:pointer;font-size:10px;font-weight:500;line-height:1;letter-spacing:0;-webkit-tap-highlight-color:transparent}
  .language-toggle>span{transition:color .2s}
  .language-toggle>.is-active{color:#29292b;font-weight:750}
  .language-toggle>.language-divider{font-size:9px;color:#b5b5bb;margin:0 1px}
  .language-toggle:focus-visible{outline:2px solid #777;outline-offset:1px;border-radius:3px}
}
@media screen and (max-width:600px){.app-surface .header-actions{gap:10px}}
@media screen and (max-width:360px){.app-surface .header-actions{gap:8px}.app-surface .masthead>.wordmark{font-size:17px}}
@media(prefers-reduced-motion:reduce){.language-toggle>span{transition:none}}

/* Paced controls, equal information cells, and restrained refresh typography. */
@media screen{
  .app-surface .header-trigger,.app-surface .sheet-close,.language-toggle{color:#454548}
  .language-toggle{font-family:inherit;font-size:10.5px;border-radius:0}
  .language-toggle>span{transition:color .35s ease}
  .language-toggle:focus-visible{outline:0}
  .keyboard-navigation .language-toggle:focus-visible{outline:2px solid #777;outline-offset:1px;border-radius:3px}
  .app-surface .masthead>.wordmark{transition:color .35s ease}
  .app-surface .masthead>.wordmark.is-refreshing{background:linear-gradient(110deg,#29292b 12%,#64768b 38%,#88718e 58%,#29292b 88%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:name-refresh 680ms ease-in-out both}
  .wordmark.is-refreshing .wordmark-dot{color:inherit}
  .app-surface .identity-spectrum ol{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:0}
  .app-surface .identity-spectrum li{min-width:0;min-height:84px;align-items:center;padding:14px 0;box-sizing:border-box}
  .app-surface .identity-spectrum li>div{min-width:0}
  .gateway-grid{grid-auto-rows:1fr;align-items:stretch}
  .gateway-card{display:grid;grid-template-rows:auto minmax(36px,1fr) auto;min-height:190px}
  .gateway-card h3{align-self:center}
  .app-surface .floating-top-slot{transition:grid-template-rows .56s var(--app-ease),padding-top .56s var(--app-ease),opacity .4s ease,visibility .4s}
  .app-surface .floating-top-slot>button{transition:transform .56s var(--app-ease)}
  dialog.header-sheet::backdrop{animation-duration:640ms}
  dialog.header-sheet.is-closing::backdrop{animation-duration:520ms}
  dialog.contact-sheet[open]{animation-duration:420ms}
}
@media screen and (min-width:601px) and (max-width:900px){
  .app-surface .identity-spectrum ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .app-surface .identity-spectrum li{min-height:100px;align-items:flex-start}
}
@media screen and (max-width:760px){.gateway-card{min-height:160px;grid-template-rows:auto minmax(32px,1fr) auto}}
@keyframes name-refresh{0%{background-position:100% 50%;transform:scale(1)}48%{transform:scale(1.025)}100%{background-position:0% 50%;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .app-surface .masthead>.wordmark.is-refreshing{animation:none;transform:none}
  .app-surface .floating-top-slot,.app-surface .floating-top-slot>button,dialog.header-sheet::backdrop,dialog.header-sheet.is-closing::backdrop,dialog.contact-sheet[open]{animation:none;transition:none}
}

/* Persistent page shell: shared visual guides and content-only transitions. */
@media screen{
  .app-surface{--shell-width:1600px;--shell-gutter:48px;--page-gutter:max(var(--shell-gutter),calc((100% - var(--shell-width))/2 + var(--shell-gutter)),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .app-surface .masthead{padding-inline:var(--page-gutter)}
  .app-surface .site-content{position:relative;width:100%;max-width:none;box-sizing:border-box;padding-inline:var(--page-gutter);overflow-x:clip}
  .app-surface:not([data-view="home"]) .home-view{display:none}
  .app-surface .home-view .work-home{display:block}
  .app-surface .home-view .main-preview-tabs{display:flex}
  .app-surface .home-view>.identity-hero{display:grid}
  .app-surface .masthead>.wordmark{text-decoration:none}
  .app-surface #profile-panel>:is(.profile-overview,.profile-section,.profile-work-link){margin:0;background:#fff}
  .app-surface #profile-panel{row-gap:16px}
  .app-surface #profile-panel>.sheet-heading{margin:0}
  .tool-chip{background:linear-gradient(135deg,#eeeeF1 0%,#fafafb 35%,#fff 100%)}
  .education-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .education-brand>.school-logo{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#e9e9ed,#f8f8fa)}
  .school-logo img{display:block;width:30px;height:30px;object-fit:contain;filter:grayscale(1)}
  .education-brand .profile-entry-heading{flex:1;min-width:0}
  .tool-icon img,.service-monogram img{filter:grayscale(1);object-fit:contain}
  .app-surface #profile-panel .resume-links{gap:8px}
  .app-surface #profile-panel .resume-links button{background:linear-gradient(135deg,#ededf0,#f8f8fa);min-height:52px}
}
@media screen and (max-width:1100px){.app-surface{--shell-gutter:28px}}
@media screen and (max-width:600px){.app-surface{--shell-gutter:18px}}
@media screen and (max-width:360px){.app-surface{--shell-gutter:12px}}
@media(prefers-reduced-motion:reduce){
}

/* Home is the intro's top anchor; explicit returns ignore automatic scroll anchoring. */
@media screen{
  html.returning-home{scroll-behavior:auto!important;overflow-anchor:none}
  html.returning-home .site-content{overflow-anchor:none}
  #home{scroll-margin-top:var(--masthead-height,76px)}
}

/* Larger weight-only headline, open intro space, and a charcoal strengths card. */
@media screen{
  .app-surface .identity-hero{padding-top:52px;padding-bottom:64px;gap:72px}
  .app-surface .identity-copy h1.motion-title{font-size:clamp(40px,4.15vw,60px);line-height:1.18}
  html[lang="en"] .app-surface .identity-copy h1.motion-title{font-size:clamp(30px,3.45vw,50px)}
  .app-surface .identity-copy>p{margin-top:28px}
  .app-surface .identity-spectrum{background:#29292d;color:#f3f3f5;padding:32px;box-shadow:0 8px 24px #1d1d1f0c}
  .app-surface .identity-spectrum .spectrum-card h3{color:#f3f3f5;font-weight:550}
  .app-surface .identity-spectrum li p{color:#bebec7}
  .app-surface .identity-spectrum .spectrum-caption{color:#b4b4be}
  .app-surface .identity-spectrum .spectrum-number{color:#9d9da7}
  .app-surface .identity-spectrum .spectrum-footnote{color:#a7a7b1}
}
@media screen and (max-width:900px){.app-surface .identity-hero{padding-top:44px;padding-bottom:48px;gap:36px}}
@media screen and (max-width:600px){
  .app-surface .identity-hero{padding-top:32px;padding-bottom:40px;gap:32px}
  .app-surface .identity-copy h1.motion-title{font-size:clamp(34px,9.4vw,42px)}
  html[lang="en"] .app-surface .identity-copy h1.motion-title{font-size:clamp(23px,7.1vw,29px)}
  .app-surface .identity-copy>p{margin-top:24px}
  .app-surface .identity-spectrum{padding:26px}
}
@media(prefers-reduced-motion:reduce){.hero-in-view.type-ready .motion-phrase>span{animation:none!important;font-weight:800}}

/* Continuous 65% corners, shared by large cards and the smaller inset surfaces. */
@media screen{
  .app-surface{--smooth-radius:20px}
  .work-home .featured-stage,.practice-section,#visualization>.practice-grid{--smooth-radius:24px}
  .tool-chip,.resume-links button,#site-menu .menu-primary a,.featured-tabs button,.contact-email{--smooth-radius:12px}
  .education-brand .school-logo{--smooth-radius:10px}
  .app-surface .smooth-card{border-radius:0!important;clip-path:var(--smooth-path)}
  .app-surface a.smooth-card:focus-visible,.app-surface button.smooth-card:focus-visible{outline:2px solid #62626c;outline-offset:-3px}
  body[data-view="home"] #reading-progress{display:none}
  .project-menu summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}
  .project-menu summary::marker{content:''}
  .project-menu summary::-webkit-details-marker{display:none}
  .project-menu .project-chevron{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 600ms cubic-bezier(.3,.1,.25,1)}
  .project-menu[open] .project-chevron{transform:rotate(180deg)}
  #site-menu .menu-version{border-top:1px solid #e5e5e9;padding:16px 0 0;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .menu-version .version-status{display:flex;align-items:center;gap:6px;font-size:11px;color:#7d7d83;white-space:nowrap}
  .version-status svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .menu-version .site-version{margin:0;padding:0;display:grid;gap:2px;line-height:1.4;text-align:right;font-size:11px;color:#7d7d83}
  .menu-version .site-version b{font-weight:550}
  .menu-version .site-version time{font-size:10px}
}
@media screen and (max-width:600px){.work-home .featured-stage{--smooth-radius:20px}}
@media(prefers-reduced-motion:reduce){.project-menu .project-chevron{transition:none}}

/* Home section headings sit outside the cards with a shared inset. */
@media screen{
  .app-surface .home-view .home-section-title{font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.2;letter-spacing:-.04em;color:var(--app-ink);margin:0;text-align:left}
  .app-surface .home-view .spectrum-heading,.app-surface .home-view .gateway-heading{margin-bottom:24px}
}
@media screen and (max-width:600px){
  .app-surface .home-view .spectrum-heading,.app-surface .home-view .gateway-heading{margin-bottom:20px}
}

/* One heading/subtitle rhythm, and clearer field toggle labels. */
@media screen{
  .app-surface .home-view .home-section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-inline:0;box-sizing:border-box;min-width:0}
  .app-surface .home-view .home-section-subtitle{margin:0;color:#77777f;font-size:13px;font-weight:400;line-height:1.6;word-break:keep-all}
  .app-surface .home-view .design-heading{margin-bottom:24px}
  .app-surface .main-preview-tabs>button,.app-surface .hub-nav a{font-size:15px;font-weight:550;line-height:1.3}
  .app-surface .main-preview-tabs>button{font-family:inherit}
  .app-surface .gateway-card h3{margin-top:0}
}
@media screen and (max-width:600px){
  .app-surface .home-view .design-heading{margin-bottom:20px}
  .app-surface .main-preview-tabs>button,.app-surface .hub-nav a{font-size:14px;padding-left:8px;padding-right:8px}
  html[lang="en"] .app-surface .main-preview-tabs>button{font-size:14px;white-space:normal;padding-left:6px;padding-right:6px;line-height:1.3}
  html[lang="en"] .app-surface .hub-nav a{font-size:12px;white-space:normal;line-height:1.3}
}


/* Slightly larger header contents; drawer morphs retain the same size. */
@media screen{
  .app-surface{--header-name-size:28px;--header-menu-size:27px;--header-profile-size:35px;--header-portrait-size:27px;--header-language-size:12px}
  .app-surface .masthead>.wordmark{font-size:var(--header-name-size)}
  .app-surface .menu-trigger svg,.app-surface .menu-close svg{width:var(--header-menu-size);height:var(--header-menu-size)}
  .app-surface .profile-trigger>.profile-morph,.app-surface .profile-trigger:hover>.profile-morph,.profile-close>.profile-morph{width:var(--header-profile-size);height:var(--header-profile-size)}
  .app-surface .profile-morph>svg{width:var(--header-profile-size);height:var(--header-profile-size)}
  .app-surface .profile-morph>.header-portrait{width:var(--header-portrait-size);height:var(--header-portrait-size)}
  .app-surface .language-toggle{font-size:var(--header-language-size)}
  .app-surface .language-toggle>.language-divider{font-size:10px}
}
@media screen and (max-width:600px){
  .app-surface{--header-name-size:23px;--header-menu-size:25px;--header-profile-size:33px;--header-portrait-size:25px;--header-language-size:11.5px}
}
@media screen and (max-width:400px){
  .app-surface{--header-name-size:22px}
  .app-surface .header-actions{gap:6px}
}
@media screen and (max-width:360px){
  .app-surface{--header-name-size:18.5px}
}

/* Outer content, footer and floating contact controls share the same guide. */
@media screen{
  .app-surface .site-content>.endnote{margin-inline:0}
  .app-surface .floating-actions{right:var(--page-gutter)}
  .app-surface dialog.contact-sheet{right:var(--page-gutter);width:min(360px,calc(100vw - var(--page-gutter) - var(--page-gutter)))}
}