:root{color-scheme:light;--paper:#fff;--ink:#000;--muted:#636363;--line:#e7e7e7;--accent:#161616;--soft:#ececec;--raised:#fff;--hover:#e2e2e2;--surface:#f7f7f7;--dialog:#f8f8f8;--backdrop:#ffffff65;--orbit:#d8d8d8;--chapter-current:#2454f4;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:ui-monospace,"SFMono-Regular",Consolas,monospace}
:root[data-theme="dark"]{color-scheme:dark;--paper:#14171c;--ink:#f4f6f9;--muted:#abb5c3;--line:#343b46;--accent:#dceafa;--soft:#252b34;--raised:#353d49;--hover:#2d3540;--surface:#20262e;--dialog:#20262f;--backdrop:#090d16a8;--orbit:#465160;--chapter-current:#a0c3ff}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);color:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
main:focus,footer:focus,h1:focus{outline:0}
p,h1,h2,h3,figure,ol,dl{margin:0}
img{display:block;width:100%;height:auto}
img:not([src]){visibility:hidden}
em{font-weight:400}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.shell{width:min(calc(100% - 2 * clamp(20px,4.8vw,100px)),1520px);margin-inline:auto}
.eyebrow{font:500 .69rem/1.4 var(--mono);letter-spacing:.11em}
.dot{display:inline-block;width:.54em;height:.54em;border-radius:50%;background:var(--accent);vertical-align:.11em;margin-right:.55em}
.skip{position:fixed;z-index:10;top:8px;left:8px;background:var(--ink);color:var(--paper);padding:12px 18px;transform:translateY(-150%)}
.skip:focus{transform:none}
.site-header{background:var(--paper)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:120px;gap:18px}
.brand{justify-self:start;white-space:nowrap;font-size:.875rem;text-transform:uppercase;letter-spacing:-.025em}
.brand strong{font-weight:700}
.chapter-nav,.utility{display:flex;align-items:center}
.chapter-nav{gap:0;padding:2px;border-radius:9px;background:var(--soft)}
.chapter-nav a{display:grid;place-items:center;min-width:88px;min-height:26px;padding:0 10px;border-radius:7px;white-space:nowrap;font:400 .8125rem/1.2 system-ui,sans-serif;color:var(--ink)}
.chapter-nav a[aria-current="page"]{font-weight:600;background:var(--raised);color:var(--ink);box-shadow:0 1px 2px #0003,0 4px 9px #0002}
.chapter-nav a:hover:not([aria-current]){background:var(--hover)}
.utility{justify-content:flex-end;gap:clamp(20px,5.5vw,76px);font-size:.875rem;font-weight:650;letter-spacing:-.02em}
.utility a:hover{text-decoration:underline;text-underline-offset:3px}
.theme-toggle{display:grid;flex:none;place-items:center;width:36px;height:36px;margin-inline-start:calc(clamp(20px,5.5vw,76px) * -.66);padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink)}
.theme-toggle:hover{background:var(--soft)}
.theme-toggle .icon{width:16px;height:16px}
.theme-sun,[data-theme="dark"] .theme-moon{display:none}
[data-theme="dark"] .theme-sun{display:block}
.text-link{display:inline-flex;gap:6px;align-items:center;padding:0 0 2px;border:0;border-bottom:1px solid currentColor;background:none;font-size:.875rem;font-weight:500;line-height:1.45;white-space:nowrap}
.text-link:hover{color:var(--muted)}
.cover-art>img{width:100%;height:100%;object-fit:cover}
.navigar-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 55% 80%,#514cc8,#2a247e 70%);isolation:isolate}
.navigar-art::before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(90deg,#fff6 1px,transparent 1px),linear-gradient(#fff6 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(135deg,#000,transparent 90%)}
.navigar-art .artifact-no{position:absolute;left:4.4%;top:6%;color:#f5eaff;font-size:clamp(.52rem,.72vw,.7rem)}
.navigar-art .artifact-no span{color:#e1f889;margin-right:6px}
.navigar-stack{position:absolute;inset:49% 10% auto;aspect-ratio:16/9;isolation:isolate;transform:translateY(-50%) rotate(-3deg);transition:transform .42s cubic-bezier(.2,.78,.27,1)}
.navigar-stack::before,.navigar-stack::after{content:"";position:absolute;inset:0;border-radius:6px;border:1px solid #e9e6ff8c}
.navigar-stack::before{background:#9d96eb;transform:translate(4%,4%) rotate(6deg)}
.navigar-stack::after{background:#c0baff;transform:translate(2%,2%) rotate(3deg)}
.navigar-slide{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;box-shadow:0 12px 28px #17134d66;opacity:0;transform:translateX(7%) scale(.98);transition:transform .4s cubic-bezier(.2,.78,.27,1),opacity .3s}
.navigar-slide.is-past{transform:translateX(-7%) scale(.98)}
.navigar-slide.is-active{opacity:1;transform:none;z-index:1}
.navigar-art.is-previewing .navigar-stack{transform:translateY(-54%) rotate(0) scale(1.045)}
.navigar-caption{position:absolute;inset:auto 4.4% 6%;display:flex;justify-content:space-between;gap:10px;padding-top:7px;border-top:1px solid #ffffff50;color:#f5eaff;font-size:clamp(.52rem,.72vw,.7rem)}
.navigar-count{color:#e1f889;white-space:nowrap}
.site-footer{border-top:1px solid var(--line);background:var(--paper);padding:27px 0 0}
.footer-main{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:30px}
.footer-main .eyebrow{color:var(--accent)}
.footer-main h2{font:400 clamp(1.6rem,3.2vw,2.25rem)/1.18 var(--sans);letter-spacing:-.035em;margin-top:5px}
.footer-main .eyebrow,.footer-end{font-family:var(--sans);letter-spacing:.055em}
.footer-main h2 span{color:var(--accent)}
.footer-actions{display:flex;flex-wrap:wrap;gap:9px}
.footer-actions a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:transparent;border-radius:50px;padding:9px 14px;font-size:.83rem;font-weight:650}
.footer-actions a:hover{border-color:var(--accent);color:var(--accent)}
.footer-end{padding:13px 0;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);color:var(--muted)}
.footer-end a:hover{color:var(--accent)}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.875rem}
.back-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.case-shell{padding:15px 0 clamp(54px,7vw,96px)}
.case-main{width:min(100%,950px);margin:31px auto 0}
.case-hero h1{font:400 clamp(2.5rem,4.5vw,3.625rem)/1.05 var(--sans);letter-spacing:-.065em}
.case-overview{margin-top:22px;max-width:780px;scroll-margin-top:24px}
.case-overview-label{font-size:.8125rem;color:var(--muted);margin-bottom:7px}
.case-claim{font-size:1.0625rem;letter-spacing:-.022em;margin-bottom:5px}
.case-dek{font-size:1rem;color:var(--muted);line-height:1.65;letter-spacing:-.017em}
.case-dek strong{font-weight:650;color:var(--ink)}
.case-demo{margin-top:15px}
.case-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px;margin:30px 0 32px;font-size:.9375rem;line-height:1.5}
.case-meta dt{font-weight:650}
.case-meta dd{margin:3px 0 0;color:var(--muted)}
.cover-art{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--soft)}
.cover-art>img{object-position:center}
.case-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:36px}
.case-evidence strong{display:block;font:400 clamp(1.45rem,2.75vw,2rem)/1.15 var(--sans);letter-spacing:-.04em}
.case-evidence span{display:block;margin-top:4px;font-size:.8125rem;color:var(--muted)}
.case-body{display:grid;grid-template-columns:minmax(max-content,.27fr) minmax(0,1fr);gap:clamp(23px,4.2vw,58px);align-items:start}
.contents{position:sticky;top:28px}
.contents p{font-size:.8125rem;font-weight:650;margin-bottom:8px}
.contents a{display:block;font-size:.8125rem;color:var(--muted);padding:5px 0;white-space:nowrap;transition:color .16s}
.contents a:hover{text-decoration:underline;text-underline-offset:3px}
.contents a[aria-current="location"]{color:var(--chapter-current)}
.case-chapter{padding:0 0 28px;margin-bottom:23px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.case-chapter .case-label{font-size:.75rem;color:var(--muted);margin-bottom:6px}
.case-chapter h2{font:400 clamp(1.32rem,2.35vw,1.875rem)/1.17 var(--sans);letter-spacing:-.045em;margin-bottom:9px}
.case-chapter p:not(.case-label),.case-chapter li{color:var(--muted);font-size:1rem;line-height:1.6}
.case-chapter p+p,.case-chapter p+ul,.case-chapter ul+p{margin-top:9px}
.case-chapter h3{font:600 1rem/1.35 var(--sans);letter-spacing:-.015em;margin:20px 0 6px}
.case-chapter h3.case-heading-regular{font-weight:400}
.case-chapter a{white-space:normal}
.case-chapter ul,.case-chapter ol{margin:8px 0;padding-left:19px}
.case-chapter strong{color:var(--ink);font-weight:600}
.case-media-grid,.case-fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin:17px 0}
.case-fact-grid{gap:18px 22px}
.case-fact-grid>div{padding-top:9px;border-top:1px solid var(--line)}
.case-fact-grid h3{margin-top:0}
.case-media-grid .case-figure{margin:0}
.case-clip{max-width:720px}
.case-clip img{max-height:520px}
.case-clip video{display:block;width:100%;height:auto;max-height:520px;background:#111}
.case-shell[data-case="patientline"] .case-main{width:min(100%,1140px)}
.case-shell[data-case="patientline"] :is(.case-hero,.case-meta,.cover-art,.case-evidence,.next-case){max-width:950px;margin-inline:auto}
.case-shell[data-case="patientline"] .case-chapter>p:not(.case-label){max-width:700px}
.patientline-discovery,.patientline-ideation{grid-template-columns:minmax(0,1fr);gap:20px}
.patientline-discovery .case-figure img,.patientline-ideation .case-figure img{max-height:none}
.patientline-design-screen{border:1px solid #cfd3da}
.patientline-cover>svg{display:block;width:100%;height:100%}
.patientline-cover-motion{display:none}
@media(prefers-reduced-motion:no-preference){
  .patientline-cover.is-ready .patientline-cover-motion{display:inline}
  .patientline-cover.is-ready .patientline-bubble{opacity:0}
  .patientline-cover.is-playing .patientline-bubble{
    transform-origin:0 0;
    animation:patientline-pop .78s cubic-bezier(.2,1.22,.42,1) both;
  }
  .patientline-cover.is-playing .patientline-bubble-reply{animation-delay:.34s}
}
@keyframes patientline-pop{
  0%{opacity:0;transform:var(--start) scale(.14)}
  18%{opacity:1}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}
.patientline-perspective{grid-template-columns:minmax(0,1fr) min(33%,270px);gap:clamp(20px,4vw,48px)}
.case-figure.patientline-phone img{display:block;width:min(100%,270px);height:auto;max-height:none;margin-inline:auto;background:transparent}
.patientline-video{width:min(100%,286px);margin-inline:auto;text-align:center}
.patientline-video video{max-height:none;border-radius:16% / 8%;background:transparent}
.patientline-video video:fullscreen{width:100%;height:100%;object-fit:contain;border-radius:0;background:#000}
.case-chapter figure+p,.case-chapter .case-media-grid+p{margin-top:13px}
.case-figure{margin-top:18px}
.case-figure img{max-height:540px;object-fit:contain;background:var(--surface)}
.case-figure figcaption{color:var(--muted);font-size:.8125rem;margin-top:6px}
.case-figure .agility-demo-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.agility-demo-caption button{font-size:inherit}
.agility-demo{--demo-bg:#06111c}
.agility-shortcuts{position:relative;aspect-ratio:330/286;background:var(--demo-bg)}
.agility-shortcuts-live,.agility-shortcuts-live svg{position:absolute;inset:0;width:100%;height:100%}
.agility-shortcuts-live{background:var(--demo-bg)}
.agility-shortcuts-live g{opacity:0;transform-box:fill-box;transform-origin:center;transform:translate(var(--x),var(--y)) scale(.6);transition:transform .35s cubic-bezier(.2,.78,.25,1),opacity .25s}
.agility-shortcuts-live.is-expanded g{opacity:1;transform:none;transition-delay:var(--delay)}
.agility-shortcut-toggle{position:absolute;left:54.85%;top:59.44%;width:21.2%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#77d9f3;color:#06111c}
.agility-shortcut-toggle span{position:relative;width:47%;aspect-ratio:1;transition:transform .34s cubic-bezier(.2,.78,.25,1)}
.agility-shortcut-toggle span::before,.agility-shortcut-toggle span::after{content:"";position:absolute;inset:42% 0;border-radius:10px;background:currentColor}
.agility-shortcut-toggle span::after{transform:rotate(90deg)}
.agility-shortcut-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.agility-shortcut-toggle:hover{background:#a5edfc}
.agility-demo button:focus-visible{outline:2px solid #76e5f8;outline-offset:3px}
.agility-demo-caption button:focus-visible{outline-color:var(--accent)}
.figma-prototype{scroll-margin-top:12px}
.prototype-disclosure{overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.prototype-disclosure summary{position:relative;display:block;list-style:none;cursor:pointer}
.prototype-disclosure summary::-webkit-details-marker{display:none}
.prototype-disclosure summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.case-figure .prototype-poster{max-height:none}
.prototype-launch,.prototype-collapse{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.875rem;font-weight:600}
.prototype-launch{position:absolute;bottom:clamp(11px,2.7vw,22px);left:50%;transform:translateX(-50%);padding:8px 14px;border:1px solid #ffffff75;border-radius:40px;background:#142b3cf0;color:#fff;white-space:nowrap}
.prototype-disclosure summary:hover .prototype-launch{background:#22465b}
.prototype-collapse{display:none;justify-content:space-between;padding:8px 12px;color:var(--ink)}
.prototype-disclosure[open] .prototype-collapse{display:flex}
.prototype-disclosure[open] :is(.prototype-poster,.prototype-launch){display:none}
.prototype-flow{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem}
.prototype-flow select{max-width:100%;padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit}
.prototype-disclosure iframe{display:block;width:100%;height:clamp(320px,65svh,650px);border:0;background:#101922}
.case-figure .prototype-caption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.prototype-caption span{flex:1 1 280px}
.prototype-caption a{font-size:inherit}
@media(prefers-reduced-motion:reduce){
  .agility-shortcuts-live g,.agility-shortcut-toggle span{transition:none}
}
.case-shell[data-case="agility"] :is(.case-content,.case-media-grid>figure){min-width:0}
#chapter-high-fidelity{scroll-margin-top:24px}
#chapter-high-fidelity:focus{outline:0}
.iteration-diagram{--iteration-accent:#5046e5;--iteration-stroke:#8b83e8}
.iteration-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 10px;font-size:.875rem;color:var(--ink)}
.iteration-play{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:6px 10px;color:var(--ink);font-size:.8125rem}
.iteration-play:hover{background:var(--soft)}
.iteration-stage{position:relative;background:#f7f7f7;border-radius:6px}
.iteration-stage svg{display:block;width:100%;height:auto}
.iteration-hit{position:absolute;left:var(--left);top:var(--top);width:var(--width);height:var(--height);padding:0;border:0;border-radius:6px;background:transparent}
.iteration-hit:hover{background:#5046e50c}
.iteration-hit:focus-visible{outline:2px solid var(--iteration-accent);outline-offset:0}
.iteration-path{fill:none;stroke:var(--iteration-stroke);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.iteration-trace,.iteration-head{fill:none;stroke:var(--iteration-accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.iteration-trace{stroke-dasharray:1}
.iteration-destination{fill:none;stroke:var(--iteration-accent);stroke-width:4}
.iteration-transition:not(.is-active) .iteration-trace,.iteration-transition:not(.is-active) .iteration-head,.iteration-transition:not(.is-active) .iteration-destination{opacity:0}
.iteration-diagram figcaption{min-height:1.55em;margin-top:9px}

.case-links{display:flex;gap:18px;flex-wrap:wrap}
.next-case{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:16px 0 0;margin-top:41px;gap:20px}
.next-case small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:4px}
.next-case strong{font:400 1.125rem/1.2 var(--sans);letter-spacing:-.025em}
.next-case:hover strong{text-decoration:underline;text-underline-offset:3px}
.next-case .icon{font-size:1.2rem}
.lab{padding:15px 0 clamp(54px,7vw,96px)}
.lab-tools{display:flex;align-items:center;gap:17px}
.mode-switch{display:flex;flex:none;background:var(--soft);padding:2px;border-radius:9px;gap:0}
.mode-switch button{display:flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;min-height:26px;min-width:65px;padding:0 8px;border-radius:7px;font:400 .8125rem/1.2 system-ui,sans-serif;color:var(--ink)}
.mode-switch button[aria-pressed="true"]{font-weight:600;background:var(--raised);box-shadow:0 1px 2px #0003,0 4px 9px #0002}
.mode-switch button:hover:not([aria-pressed="true"]){background:var(--hover)}
.stage{--stage-height:clamp(315px,52svh,540px);position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;height:var(--stage-height);cursor:grab;touch-action:pan-y;user-select:none}
.stage.is-dragging{cursor:grabbing}
.orbit-rail,.orbit-rail::before,.orbit-rail::after{position:absolute;border-radius:50%;border:1px dashed var(--orbit);pointer-events:none}
.orbit-rail{width:min(82%,1000px);height:61%;transform:rotate(-9deg)}
.orbit-rail::before,.orbit-rail::after{content:"";inset:0}
.orbit-rail::before{transform:rotate(19deg) scale(.96)}
.orbit-rail::after{transform:rotate(32deg) scale(.76,1.12);border-color:var(--line)}
.scene-cards{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px;transform:translateX(var(--drift,0px));transition:transform .24s ease-out}
.stage.is-dragging .scene-cards{transition:none}
.scene-card{--x:0%;--rise:-4%;--y:0deg;--s:1;display:block;position:absolute;width:min(48%,calc((var(--stage-height) - 46px) * 1.98));aspect-ratio:1.98;overflow:hidden;padding:0;border:0;background:#efefef;box-shadow:0 10px 32px #00000018;transform:translate(var(--x),var(--rise)) rotateY(calc(var(--y) + var(--tilt,0deg))) scale(var(--s));z-index:2}
.scene-card{
  --arc-x:14%;--arc-y:-8%;--arc-depth:0px;
  translate:calc(var(--arc-x) * var(--orbit-turn,0)) calc(var(--arc-y) * var(--orbit-turn,0) + 5% * var(--orbit-lift,0)) calc(var(--arc-depth) * var(--orbit-turn,0));
  rotate:y calc(-12deg * var(--orbit-turn,0));
  transition:translate .26s ease-out,rotate .26s ease-out
}
.stage.is-orbit-intro .scene-card{animation:orbit-cue 1.7s ease-in-out}
@keyframes orbit-cue{
  38%{translate:var(--arc-x) var(--arc-y) var(--arc-depth);rotate:y -12deg}
  72%{translate:calc(-.45 * var(--arc-x)) calc(-.45 * var(--arc-y)) calc(-.45 * var(--arc-depth));rotate:y 5.4deg}
}
.stage.is-dragging .scene-card{cursor:grabbing}
[data-scene-preview]{cursor:zoom-in}
.scene-list button.work-card-art{display:block;width:100%;aspect-ratio:1.85;padding:0;border:0}
.scene-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.scene-video{display:block;width:100%;height:100%;object-fit:contain;background:#111}
[data-scene-preview] .scene-video{pointer-events:none}
.scene-card[data-slot="left"]{--x:-76%;--rise:19%;--y:17deg;--s:.59;--arc-x:-9%;--arc-y:10%;--arc-depth:54px}
.scene-card[data-slot="right"]{--x:76%;--rise:-25%;--y:-17deg;--s:.59;--arc-x:-9%;--arc-y:-10%;--arc-depth:-54px}
.scene-card:not([data-slot="center"]){z-index:1;opacity:.84}
.stage-hint{position:absolute;bottom:9px;color:var(--muted);z-index:3;text-align:center;font-size:.75rem;pointer-events:none}
.stage-hint span{margin:0 3px}
kbd{font:inherit;border:1px solid var(--line);border-radius:3px;padding:1px 4px}
.scene-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
.scene-picker{display:flex;gap:4px;min-width:0}
.scene-picker button{display:flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:6px;background:none;min-height:36px;padding:5px 9px;color:var(--muted);font-size:.8125rem;text-align:left}
.scene-picker button span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.scene-picker button[aria-pressed="true"]{background:var(--soft);color:var(--ink)}
.step-controls{display:flex;gap:6px}
.step-controls button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line)}
.step-controls button:hover,.scene-picker button:hover{background:var(--surface);color:var(--ink)}
.scene-detail{display:grid;grid-template-columns:minmax(160px,.75fr) minmax(0,1.2fr);gap:8px 24px;align-items:start;padding-top:20px}
.scene-detail h2{font:400 1.0625rem/1.4 var(--sans);letter-spacing:-.025em;margin-top:2px}
.scene-meta{color:var(--muted);font-size:.75rem}
.scene-detail p:not(.scene-meta){color:var(--muted);font-size:.875rem;letter-spacing:-.02em}
#toggle-scene-preview{grid-area:1/3;justify-self:end}
.scene-list p{margin-bottom:9px}
html:has(dialog[open]){overflow:hidden}
.portfolio-dialog{width:min(var(--dialog-width,800px),calc(100% - 36px));max-height:calc(100dvh - 36px);margin:auto;padding:0;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--dialog);color:var(--ink);box-shadow:0 2px 3px #0000000d,0 18px 45px #00000016}
#scene-preview-dialog{--dialog-width:900px}
.portfolio-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(5px)}
.dialog-panel{--dialog-padding:39px;position:relative;padding:var(--dialog-padding)}
.dialog-title{font:400 1.25rem/1.3 var(--sans);letter-spacing:-.038em;padding-right:27px;margin-bottom:20px}
.dialog-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.dialog-close:hover{background:var(--soft);color:var(--ink)}
.scene-preview-media video{height:auto;max-height:calc(100dvh - 84px - 2 * var(--dialog-padding));border-radius:7px}
.scene-preview-media video:fullscreen{max-height:none;border-radius:0}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.54fr);gap:28px;align-items:start}
.about-copy p{color:var(--muted);font-size:1rem;line-height:1.55;letter-spacing:-.02em;margin-bottom:14px}
.about-copy p:last-of-type{margin-bottom:0}
.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:center 38%;mix-blend-mode:multiply}
[data-theme="dark"] .portrait img{mix-blend-mode:normal;border-radius:7px}
.portrait figcaption{margin-top:7px;color:var(--muted);font-size:.75rem}
@media(max-width:900px){
  .scene-detail{grid-template-columns:1fr 1fr}
  #toggle-scene-preview{grid-area:auto/1/auto/-1;justify-self:start}
}
@media(max-width:670px){
  .header-inner{grid-template-columns:1fr 1fr;gap:14px 0;min-height:0;padding:20px 0 17px}
  .brand{grid-column:1;grid-row:1}
  .utility{grid-column:2;grid-row:1;gap:20px}
  .theme-toggle{margin-inline-start:-10px}
  .chapter-nav{grid-column:1/-1;justify-self:start}
  .footer-main{align-items:start;flex-direction:column;gap:14px}
  .footer-main h2{margin-top:8px}
  .footer-end{font-size:.59rem}
  .site-footer{padding-top:25px}
  .case-main{margin-top:23px}
  .case-overview{margin-top:14px}
  .case-meta{gap:13px 14px;margin:22px 0;font-size:.875rem}
  .case-evidence{margin-bottom:24px;padding:15px 0}
  .case-evidence span{font-size:.75rem}
  .case-body{grid-template-columns:1fr;gap:16px}
  .patientline-perspective{grid-template-columns:1fr}
  .contents{position:static}
  .contents p{margin-bottom:4px}
  .contents a{display:inline-block;margin:0 4px 4px 0;text-decoration:underline;text-underline-offset:3px}
  .case-chapter{padding-bottom:21px;margin-bottom:18px}
  .lab-tools{flex-wrap:wrap;gap:8px 12px}
  .stage{--stage-height:clamp(225px,52vw,330px)}
  .scene-card{width:69%}
  .scene-card[data-slot="left"]{--x:-52%;--s:.58}
  .scene-card[data-slot="right"]{--x:52%;--s:.58}
  .scene-controls{gap:8px}
  .scene-picker button{font-size:0;padding:8px 10px;min-height:40px}
  .scene-picker button span{font-size:.8125rem}
  .step-controls button{width:40px;height:40px}
  .scene-detail{grid-template-columns:1fr;gap:7px}
  .dialog-panel{--dialog-padding:25px}
  .about-grid{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .scene-cards{transform:none}
  .scene-card{--tilt:0deg!important;translate:none;rotate:none}
}

.work-index{padding:15px 0 clamp(54px,7vw,96px);scroll-margin-top:120px}
.index-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 28px}
.index-heading h1{font:400 1rem/1.5 var(--sans);letter-spacing:-.025em;white-space:nowrap}
.index-heading h1 span{font-size:.75rem;letter-spacing:0;color:var(--muted);margin-left:8px}
.index-heading p{font-size:.875rem;letter-spacing:-.02em;color:var(--muted)}
.index-preview-tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 16px}
.work-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;list-style:none;padding:0}
.work-card{display:block;min-width:0}
.work-card-art{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--soft)}
.work-card-art>img{width:100%;height:100%;object-fit:cover;transition:transform .32s ease}
.thumbnail-preview{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.thumbnail-preview.is-previewing{opacity:1}
.thumbnail-preview:has(video):not(.has-frame){opacity:0}
.thumbnail-label,.thumbnail-caption{position:absolute;inset:6% 4.4% auto;font-size:clamp(.52rem,.72vw,.7rem)}
.thumbnail-preview--soro{background:radial-gradient(ellipse at 58% 60%,#484133,#181715 75%);color:#fff4dc}
.thumbnail-preview--soro video{width:90%;height:auto;max-height:75%;object-fit:contain;border-radius:5px;box-shadow:0 12px 32px #0006}
.thumbnail-preview--patientline{--phone-motion:paused;background:radial-gradient(ellipse at 50% 58%,#fff,#d9e6fb 76%);color:#23395b}
.thumbnail-preview--patientline video{width:auto;height:81%;max-width:82%;object-fit:contain;transform:translateY(3%);border-radius:16% / 8%;box-shadow:0 10px 25px #17294f38;animation:thumbnail-phone-float 5.4s ease-in-out infinite;animation-play-state:var(--phone-motion)}
.thumbnail-preview--patientline.has-frame.is-animating{--phone-motion:running}
.patientline-preview-message{position:absolute;z-index:1;max-width:28%;padding:.65em .8em;font-size:clamp(.57rem,1.05vw,.8rem);line-height:1.25;opacity:0;box-shadow:0 5px 15px #17294f20;animation:thumbnail-chat-pop 5.4s ease-in-out infinite both;animation-play-state:var(--phone-motion)}
.patientline-preview-prompt{--message-x:18px;left:5%;top:33%;border-radius:11px 11px 11px 3px;background:#fff;color:#213a60}
.patientline-preview-reply{--message-x:-18px;right:5%;bottom:25%;border-radius:11px 11px 3px 11px;background:#1649bb;color:#fff;animation-delay:.65s}
@keyframes thumbnail-phone-float{
  0%,100%{transform:translateY(3%) rotate(-2deg)}
  50%{transform:translateY(-1%) rotate(2deg)}
}
@keyframes thumbnail-chat-pop{
  0%,100%{opacity:0;transform:translate(var(--message-x),8px) scale(.87)}
  13%,73%{opacity:1;transform:translate(0,0) scale(1)}
  86%{opacity:0;transform:translate(0,-8px) scale(.96)}
}
.thumbnail-frames{position:absolute;inset:14% 8%;isolation:isolate}
.thumbnail-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(8%) scale(.98);transition:opacity .32s,transform .4s ease}
.thumbnail-frame.is-past{transform:translateX(-8%) scale(.98)}
.thumbnail-frame.is-active{opacity:1;transform:none;z-index:1}
.thumbnail-caption{inset:auto 4.4% 6%;display:flex;justify-content:space-between;gap:10px;border-top:1px solid #31433260;padding-top:7px}
.open-silo-cover,.thumbnail-preview--open-silo{background:radial-gradient(ellipse at 52% 57%,#1c6255,#002629 80%)}
.open-silo-cover{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}
.open-silo-cover>img{width:auto;height:86%;max-width:88%;object-fit:contain;border-radius:6px;box-shadow:0 14px 34px #001f226b}
.thumbnail-preview--open-silo{opacity:1;color:#e9f7e7}
.thumbnail-preview--open-silo .thumbnail-frames{perspective:820px}
.thumbnail-preview--open-silo .thumbnail-frame{transform:translate3d(24%,3%,-60px) rotateY(-18deg) scale(.93);transition:opacity .4s,transform .55s cubic-bezier(.2,.75,.28,1)}
.thumbnail-preview--open-silo .thumbnail-frame.is-past{transform:translate3d(-24%,-3%,-60px) rotateY(18deg) scale(.93)}
.thumbnail-preview--open-silo .thumbnail-frame.is-active{transform:none}
.thumbnail-preview--open-silo .thumbnail-caption{border-color:#d5f6cb64}
.thumbnail-preview--open-silo .thumbnail-caption::before{content:"";position:absolute;left:0;top:-1px;width:var(--preview-progress,25%);height:2px;background:#b9edaa;transition:width .55s cubic-bezier(.2,.75,.28,1)}
.technical-cover--ouster,.thumbnail-preview--ouster{background:radial-gradient(ellipse at 52% 62%,#24304f,#0d101b 78%)}
.technical-cover--agility{background:radial-gradient(ellipse at 52% 62%,#224c5d,#101d36 80%)}
.technical-cover>img{object-fit:contain;padding:clamp(8px,2.5vw,32px)}
.ouster-cover{display:grid;place-items:center;padding:clamp(8px,2.5vw,32px)}
.ouster-motion-screen{position:relative;width:100%;overflow:hidden}
.ouster-selection-screen img{max-height:none}
.ouster-motion-overlay{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.ouster-replay{position:absolute;right:clamp(8px,2.5vw,32px);bottom:clamp(4px,1.15vw,14px);padding:2px 9px;border:1px solid #ffffff50;border-radius:5px;background:#171f32;color:#fff;font-size:.75rem}
.ouster-replay:hover{background:#273451}
.ouster-replay:focus-visible{outline-color:#fff;outline-offset:2px}
.ouster-motion-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ouster-motion-caption button{font-size:inherit}
.ouster-cover-scan{stroke:#a5d5ff;stroke-width:3;filter:drop-shadow(0 0 9px #79bcff)}
.ouster-cover-pin,.ouster-cover-table,.ouster-selection-radius{fill:none;stroke:#d8f887;stroke-width:3}
.ouster-cover-trace{fill:none;stroke:#cdeaff;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.ouster-cover-table{stroke:#a5d5ff}
.ouster-unselected-cloud{filter:grayscale(.75) brightness(.2)}
.ouster-selection-particles{fill:#d8f887}
.ouster-cover-pin,.ouster-selection-particles,.ouster-selection-radius,.ouster-selection-reveal{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  [data-case-motion].is-playing .ouster-motion-overlay{visibility:visible;animation:ouster-motion-duration 3.6s linear both}
  .is-playing .ouster-cover-scan{animation:ouster-scan 1.35s ease-in-out both}
  .is-playing .ouster-cover-pin{animation:ouster-pin 1.6s .55s ease-out both}
  .is-playing .ouster-cover-pin--second{animation-delay:.95s}
  .is-playing .ouster-cover-trace{animation:ouster-trace 1.5s 1.25s ease-in-out both}
  .is-playing .ouster-cover-table{animation:ouster-table 1.5s 1.95s ease-out both}
  .is-playing .ouster-selection-particles{animation:ouster-gather 1.6s ease-in-out both}
  .is-playing .ouster-selection-radius{animation:ouster-radius 2.2s .5s ease-out both}
  .is-playing .ouster-selection-reveal{animation:ouster-reveal 1.7s .5s cubic-bezier(.25,.65,.35,1) both}
}
@media(prefers-reduced-motion:reduce){
  [data-motion-replay]{display:none}
}
@keyframes ouster-motion-duration{0%,100%{opacity:1}}
@keyframes ouster-scan{
  0%{opacity:0;transform:translateX(0)}
  24%{opacity:.8}
  100%{opacity:0;transform:translateX(970px)}
}
@keyframes ouster-pin{
  0%{opacity:0;transform:scale(.4)}
  23%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(2)}
}
@keyframes ouster-trace{
  0%{opacity:0;stroke-dashoffset:1}
  18%{opacity:.9}
  62%{stroke-dashoffset:0}
  100%{opacity:0;stroke-dashoffset:0}
}
@keyframes ouster-table{0%,100%{opacity:0}25%,55%{opacity:.9}}
@keyframes ouster-gather{
  0%{opacity:0;transform:scale(1.25)}
  26%{opacity:1;transform:scale(1.9)}
  68%{opacity:1;transform:scale(.54)}
  100%{opacity:0;transform:scale(.35)}
}
@keyframes ouster-radius{
  0%{opacity:0;transform:scale(0)}
  12%{opacity:.9}
  78%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
@keyframes ouster-reveal{from{transform:scale(0)}to{transform:scale(1.02)}}
:is(.thumbnail-preview--ouster,.thumbnail-preview--agility){opacity:1;color:#e7f2ff}
:is(.thumbnail-preview--ouster,.thumbnail-preview--agility) .thumbnail-frames{inset:13% 7%;filter:drop-shadow(0 9px 14px #07101d80)}
:is(.thumbnail-preview--ouster,.thumbnail-preview--agility) .thumbnail-caption{border-color:#d4e6ff60}
:is(.thumbnail-preview--ouster,.thumbnail-preview--agility) .thumbnail-caption::before{content:"";position:absolute;left:0;top:-1px;width:var(--preview-progress,33.333%);height:2px;background:var(--preview-accent,#b7c5ff);transition:width .4s ease}
.thumbnail-preview--agility{--preview-accent:#4388aa;background:radial-gradient(ellipse at 52% 60%,#f0faff,#dbeffa 83%);color:#143647}
.thumbnail-preview--agility .thumbnail-caption{border-color:#aac9d8}
.work-card-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:16px 0 5px}
.work-card-heading h2{font:400 1rem/1.4 var(--sans);letter-spacing:-.025em}
.work-card-heading span{font-size:.75rem;color:var(--muted)}
.work-card p{color:var(--muted);font-size:.875rem;letter-spacing:-.02em;line-height:1.55}
.work-card:focus-visible{outline-offset:5px}
@media(hover:hover){a.work-card:hover .work-card-art>img{transform:scale(1.025)}a.work-card:hover h2{text-decoration:underline;text-underline-offset:3px}}
@media(max-width:900px){
  .work-gallery{gap:36px 20px}
}
@media(max-width:670px){
  .work-index{padding-top:15px;scroll-margin-top:106px}
  .index-heading{flex-direction:column;gap:3px;margin-bottom:18px}
}
@media(max-width:500px){
  .work-gallery{grid-template-columns:minmax(0,1fr);row-gap:29px}
  .work-card-heading{margin-top:11px}
  .case-media-grid,.case-fact-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .portrait{width:min(61%,210px)}
}