:root{--ink:#171914;--paper:#e8e7e0;--line:#bcbdb4;--warm:#d7c4a6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;background:#131410;color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #b8734a;outline-offset:6px}.skip{position:fixed;top:-80px;left:20px;background:var(--paper);color:var(--ink);z-index:50;padding:15px}.skip:focus{top:80px}.topbar{position:fixed;z-index:30;top:0;width:100%;height:72px;padding:0 32px;display:flex;align-items:center;gap:24px;color:#f0eee6;background:linear-gradient(#10120fd9,transparent);transition:background .4s,color .4s;border-bottom:1px solid #ffffff18}.topbar.on-light{background:#e8e7e0ed;color:var(--ink);border-bottom-color:#17191425}.wordmark{font-size:18px;font-weight:700;letter-spacing:-.9px;line-height:.86;display:flex;flex-direction:column;gap:4px}.wordmark span{font-size:11px;letter-spacing:3px}.topbar nav{margin-left:auto;display:flex;gap:38px;align-items:center;font-size:13px}.topbar nav a{padding:10px 0}.topbar nav a span{margin-left:12px}#motion{border:1px solid currentColor;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;background:transparent;opacity:.65;cursor:pointer}.pause-icon{display:block;width:7px;height:9px;border-left:2px solid;border-right:2px solid}body.paused .pause-icon{border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid;width:0;height:0;margin-left:2px}.small-label,.section-marker,.opening-info,.opening-footer,.contact-address span,footer{font:10px/1.35 'Courier New',monospace;letter-spacing:.9px}.opening{height:140vh}.opening-sticky{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden}.film{position:absolute;inset:0;overflow:hidden}.film img{width:100%;height:100%;object-fit:cover;object-position:65% center;transform:scale(1.13);will-change:transform;animation:film-drift 24s ease-in-out infinite alternate}.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,#05070435 0%,transparent 40%,#080a07b5 100%),linear-gradient(90deg,#080a0755,transparent 65%)}.opening-info{position:absolute;left:32px;right:32px;top:106px;display:flex;justify-content:space-between}.opening-title{position:absolute;left:28px;right:28px;bottom:90px}.opening-title .small-label{font-size:10px}.opening-title h1{font-size:clamp(55px,11.4vw,190px);font-weight:500;letter-spacing:-.075em;line-height:.9;white-space:nowrap;margin:18px 0 0}.opening-footer{position:absolute;bottom:30px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center}.opening-footer a{display:flex;align-items:center;gap:24px}.opening-footer a span{font:20px Arial}.light{background:var(--paper);color:var(--ink)}.intro{min-height:86vh;padding:74px 32px 64px;display:grid;grid-template-columns:1fr 3fr;gap:32px}.section-marker{display:flex;flex-direction:column;gap:20px;padding-top:10px}.marker-line{height:1px;width:100%;max-width:180px;background:#17191455}.intro h2{font-weight:400;font-size:clamp(65px,8.1vw,140px);letter-spacing:-.065em;line-height:.96;margin:0}.intro h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.07em}.intro-bottom{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;border-top:1px solid var(--line);margin-top:55px;padding-top:20px;font-size:17px;line-height:1.35}.intro-bottom p{margin:0}.muted{color:#75776e}.assembly{height:310vh;position:relative}.assembly-sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(ellipse at 50% 50%,#efeee8,var(--paper) 70%)}.assembly-top{position:absolute;top:100px;left:32px;right:32px;display:flex;justify-content:space-between;z-index:3}.assembly-status{color:#797b71}.mechanism{position:absolute;inset:0}.mechanism canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s}.mechanism.live canvas{opacity:1}.assembly-caption{position:absolute;left:32px;bottom:100px;display:flex;flex-direction:column;pointer-events:none}.chapter{font-size:clamp(42px,5.4vw,86px);letter-spacing:-.065em;line-height:1.03;color:#17191422;transition:color .6s}.chapter.active{color:var(--ink)}.assembly-footer{position:absolute;bottom:32px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:30px}.assembly-track{width:22%;height:1px;background:#17191425}.assembly-track i{display:block;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0)}.work{padding:14px;background:#141512}.work-media{height:100svh;min-height:650px;position:relative;overflow:hidden}.work-media img{position:absolute;width:100%;height:115%;top:-7.5%;object-fit:cover;object-position:60% center;will-change:transform}.work-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050704a0,transparent 75%),linear-gradient(0deg,#05070470,transparent 70%)}.work-heading{position:absolute;left:35px;top:40px}.work h2{font-size:clamp(45px,6.7vw,108px);font-weight:400;line-height:.97;letter-spacing:-.055em;margin:36px 0}.work-note{position:absolute;bottom:26px;left:35px;opacity:.6}.contact{padding:70px 32px 24px;background:#141512}.contact-top{display:grid;grid-template-columns:1fr 3fr;align-items:start}.contact-top p{font-size:28px;line-height:1.1;letter-spacing:-.7px;margin:0}.contact-main{display:flex;justify-content:space-between;align-items:center;font-size:clamp(88px,16.5vw,260px);letter-spacing:-.075em;line-height:1;margin:90px 0 35px;border-bottom:1px solid #a3a69570;padding-bottom:40px}.contact-main svg{width:9vw;max-width:150px;min-width:50px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .4s}.contact-main:hover svg{transform:translate(6px,-6px)}.contact-address{display:flex;justify-content:space-between;font-size:15px}.contact-address span{color:#989c8e}footer{margin-top:100px;padding-top:24px;border-top:1px solid #a3a69545;display:flex;justify-content:space-between;color:#989c8e}footer a:first-child{color:var(--paper);font:bold 14px Arial;letter-spacing:-.4px}.reading-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:#ac7651;transform-origin:left;transform:scaleX(0);z-index:40}.paused .film img{animation-play-state:paused}@keyframes film-drift{0%{transform:scale(1.13) translate3d(1%,1%,0)}100%{transform:scale(1.02) translate3d(-1%,-.5%,0)}}@media(min-width:1700px){.topbar,.intro,.contact{padding-left:48px;padding-right:48px}}@media(max-width:700px){html{scroll-padding-top:64px}.topbar{height:64px;padding:0 20px;gap:18px}.wordmark{font-size:16px}.topbar nav{gap:20px;font-size:12px}.topbar nav a span{margin-left:4px}#motion{width:26px;height:26px}.opening{height:120vh}.opening-sticky{min-height:560px}.film img{object-position:62% center}.opening-info{left:20px;right:20px;top:90px;font-size:8px}.opening-title{left:18px;right:18px;bottom:90px}.opening-title h1{font-size:11.1vw;letter-spacing:-.07em}.opening-title .small-label{font-size:8px}.opening-footer{left:20px;right:20px;font-size:8px;bottom:25px}.intro{padding:50px 20px;display:block;min-height:0}.section-marker{padding:0;margin-bottom:50px;flex-direction:row;align-items:center;gap:25px}.marker-line{max-width:none;flex:1}.intro h2{font-size:20vw}.intro-bottom{grid-template-columns:1fr;margin-top:40px;font-size:16px;gap:18px}.assembly{height:270vh}.assembly-sticky{min-height:580px}.assembly-top{top:90px;left:20px;right:20px}.assembly-caption{left:20px;bottom:95px}.chapter{font-size:42px}.assembly-footer{bottom:25px;left:20px;right:20px;gap:15px}.assembly-footer .small-label{font-size:8px}.assembly-footer .small-label:last-child{max-width:85px;text-align:right}.assembly-track{width:22%}.work{padding:8px}.work-media{height:85svh;min-height:560px}.work-media img{object-position:64% center}.work-heading{left:20px;top:30px}.work h2{font-size:13vw;margin-top:25px}.work-note{left:20px;font-size:8px}.contact{padding:50px 20px 20px}.contact-top{grid-template-columns:1fr;gap:30px}.contact-top p{font-size:25px}.contact-main{font-size:23vw;margin:70px 0 25px;padding-bottom:30px}.contact-main svg{width:12vw;min-width:35px}.contact-address{flex-direction:column;gap:22px}footer{margin-top:65px;font-size:8px;gap:15px}footer a:first-child{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film img{animation:none}.work-media img{transform:none!important}*{transition-duration:0s!important}}
@media(max-width:700px){.assembly-caption{bottom:78px}.chapter{display:none;font-size:36px}.chapter.active{display:block}}

.film canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s}.film.atmosphere-live canvas{opacity:1}.film.atmosphere-live>img{opacity:1}.film-shade{pointer-events:none}.topbar nav{margin-left:auto}@media(prefers-reduced-motion:reduce){.film canvas{display:none}.film.atmosphere-live>img{opacity:1}}

.film{isolation:isolate}.film canvas{z-index:1}.film-shade{z-index:2}
@media(max-width:700px){.work-media img{object-position:85% center}}

/* Rendered motion assets preserve material detail on desktop and mobile. */
.opening .film{filter:contrast(1.035) brightness(.965)}.film img{animation:none;transform:none}.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;opacity:0;transition:opacity .6s}.film.video-playing video{opacity:1}.film.video-playing>.hero-poster{opacity:0}.work-media img{filter:contrast(1.035) brightness(.975) saturate(.96)}.assembly{height:215vh}.assembly-sticky{background:#e8e7e0}.mechanism canvas{opacity:0}.mechanism.live canvas{opacity:1}
@media(max-width:700px){.assembly{height:220vh}.film video{object-position:55% center}}
@media(prefers-reduced-motion:reduce){.film video{display:none}.film.video-playing>.hero-poster{opacity:1}}

.film video{object-position:50% 50%}@media(max-width:700px){.film video{object-position:50% 50%}.work-media img{object-position:73% center}}
@media(max-width:700px){.work-media img{object-position:64% center}}

/* Arm elevations and gripper detail, drawn from the CAD model. */
.intro{position:relative;isolation:isolate;overflow:hidden}.intro::before{content:"";position:absolute;inset:0;background:url('assets/arm-schematics.svg') right center/cover no-repeat;opacity:.38;pointer-events:none;z-index:-1}.intro .section-marker,.intro-main{position:relative}
.work-media{position:relative;overflow:hidden}.work-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;opacity:0;transition:opacity .6s}.work-media.video-playing video{opacity:1}.work-media.video-playing>.work-poster{opacity:0}.work-media .work-poster{transform:none!important;filter:none;object-position:50% center}.work-heading{position:absolute;left:4%;bottom:7%;z-index:3}.work-heading h2{font-size:clamp(42px,6.5vw,100px);font-weight:400;line-height:.94;letter-spacing:-.065em;margin:0}.work-shade{background:linear-gradient(90deg,#0b0e0b80,transparent 48%);pointer-events:none}.opening .film{filter:none}
@media(max-width:700px){.intro::before{background-size:auto 90%;background-position:70% center;opacity:.30}.work-media{height:85svh}.work-media video,.work-media .work-poster{object-position:60% center}.work-heading{left:6%;bottom:6%}.work-heading h2{font-size:48px}.work-shade{background:linear-gradient(0deg,#0b0e0b9e,transparent 55%)}}
@media(prefers-reduced-motion:reduce){.work-media video{display:none}.work-media.video-playing>.work-poster{opacity:1}}
@media(max-width:700px){.work-media{height:calc(62.5vw + 125px);background:#131410}.work-media video,.work-media .work-poster{height:62.5vw;object-fit:contain;object-position:center}.work-heading{left:6%;right:6%;bottom:25px}.work-heading h2{font-size:38px;line-height:1.05;letter-spacing:-.055em}.work-heading br{display:none}.work-shade{display:none}}
.topbar.on-light{background:#e8e7e0}
.work-heading{top:auto;height:auto}
@media(max-width:700px){.work-media{min-height:0}}
@media(max-width:700px){.film video,.film .hero-poster{object-position:27% center}}
/* Teaching and reusing a job: an editorial view of the software experience. */
.job-section{padding:110px 32px 120px;background:#131410}.job-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:0 0 46px}.job-intro h2{font-size:clamp(48px,6.5vw,94px);line-height:.96;letter-spacing:-.065em;font-weight:400;margin:0}.job-intro p{font-size:18px;line-height:1.45;color:#bfc1b6;margin:0 3px 5px 0;max-width:330px}.job-editor{border:1px solid #ffffff29;border-radius:4px;overflow:hidden;background:#1b1e19}.job-editor-top{display:flex;align-items:center;justify-content:space-between;height:55px;padding:0 24px;border-bottom:1px solid #ffffff20}.job-state{font-family:monospace;font-size:10px;letter-spacing:.06em;color:#b8bbae;display:flex;align-items:center;gap:9px}.job-state i{width:5px;height:5px;border-radius:50%;background:#a8b69a}.job-editor[data-mode=recording] .job-state i{background:#cf7458}.job-editor-body{display:grid;grid-template-columns:240px 1fr}.job-steps{padding:26px 16px 18px;border-right:1px solid #ffffff20;display:flex;flex-direction:column}.steps-label{display:block;padding:0 10px;color:#91988a}.job-steps ol{list-style:none;margin:22px 0 32px;padding:0}.job-steps li{display:flex;align-items:center;gap:13px;padding:14px 10px;color:#a9afa1;font-size:13px;border:1px solid transparent;border-radius:2px;transition:color .2s,background .2s}.job-steps li.current{background:#d0d6c51c;border-color:#c7cdbb35;color:#f1f0e8}.step-number{font-family:monospace;font-size:10px;color:#818b79}.step-mark{margin-left:auto;font-size:10px;color:#afbfa2}.job-steps li.unrecorded{opacity:.35}.job-saved{border-top:1px solid #ffffff20;padding:22px 10px 8px;margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:14px}.job-saved .small-label,.job-saved-description{color:#889281}.job-saved-description{font-size:11px}.job-saved.just-saved{color:#cbd7bb}.job-preview{height:auto!important;min-height:0!important;aspect-ratio:16/10;margin:0;background:#131612;border-radius:0}.job-preview video,.job-preview .work-poster{width:100%;height:100%;object-fit:cover;object-position:center;filter:none;transform:none!important}.job-preview-caption{position:absolute;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;gap:15px;z-index:3;color:#e4e8dc;text-shadow:0 1px 6px #000}.job-preview-caption .small-label{font-size:9px}.job-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff20;padding:13px 18px;gap:16px}.job-record-controls{display:flex;gap:8px}.job-controls button{height:40px;padding:0 16px;background:transparent;border:1px solid #ffffff35;border-radius:2px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:10px}.job-controls button:hover:not(:disabled){background:#ffffff10}.job-controls button:disabled{opacity:.3;cursor:default}.job-controls .job-run{background:#d9dfce;color:#161b13;border-color:#d9dfce;min-width:120px;justify-content:space-between}.job-controls .job-run:hover{background:#eef1e7}.record-dot{width:6px;height:6px;border:1px solid #c0c9b6;border-radius:50%}.active .record-dot{background:#cf7458;border-color:#cf7458}.job-progress{height:2px;background:#12160f}.job-progress i{display:block;width:100%;height:100%;background:#b4c1a1;transform-origin:left;transform:scaleX(0);transition:transform .2s linear}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px) and (min-width:701px){.job-editor-body{grid-template-columns:195px 1fr}.job-steps{padding-left:8px;padding-right:8px}.job-steps li{gap:9px;font-size:12px}.job-intro p{font-size:16px}}
@media(max-width:700px){.job-section{padding:70px 18px 76px}.job-intro{display:block;margin-bottom:30px}.job-intro h2{font-size:48px}.job-intro p{font-size:16px;margin:23px 0 0;line-height:1.45}.job-editor-top{height:47px;padding:0 14px}.job-editor-top>.small-label{font-size:9px}.job-editor-body{display:flex;flex-direction:column}.job-preview{order:-1;aspect-ratio:16/10;width:100%}.job-preview video,.job-preview .work-poster{height:100%;object-fit:cover;object-position:center}.job-steps{border-right:0;border-top:1px solid #ffffff20;padding:18px 10px}.steps-label{font-size:8px}.job-steps ol{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 0 0}.job-steps li{padding:10px 8px;font-size:11px;gap:8px}.step-mark{display:none}.job-saved{display:none}.job-controls{padding:12px 10px;gap:8px}.job-controls button{height:44px;padding:0 10px;font-size:11px;gap:7px}.job-controls .job-run{min-width:93px}.job-preview-caption{left:12px;right:12px;bottom:12px}.job-preview-caption .small-label{font-size:7px}}
@media(max-width:700px){.film video,.film .hero-poster{object-position:90% center}}


.job-intro,.job-editor{max-width:1040px;margin-left:auto;margin-right:auto}
@media(min-width:901px){.job-editor-body{grid-template-columns:220px 1fr}}

/* Full-bleed opening; each aspect ratio has its own camera composition. */
.opening .film{inset:0;height:100%;background:#090c09;isolation:isolate}.opening .film video,.opening .film .hero-poster{width:100%;height:100%;object-fit:cover;object-position:center}.opening .film video{z-index:1;transition:none}.opening .film-shade{z-index:2;pointer-events:none}.hero-picture{position:absolute;inset:0;display:block;z-index:0}.hero-picture .hero-poster{position:absolute;inset:0}

/* The job demo waits for input; each recorded action moves the arm once. */
.job-stage{min-width:0}.job-instruction{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;border-top:1px solid #ffffff20;background:#20251d}.job-instruction p{font-size:14px;line-height:1.4;color:#d6dbcd;margin:0;max-width:360px}.job-instruction button{flex-shrink:0;min-height:44px;padding:12px 20px;border:0;border-radius:2px;background:#d9dfce;color:#161b13;font-size:13px;cursor:pointer}.job-instruction button:hover:not(:disabled){background:#eef1e7}.job-instruction button:disabled{opacity:.55;cursor:wait}.job-instruction button[hidden],.job-saved[hidden]{display:none}.steps-label{display:flex;justify-content:space-between;gap:12px}.job-empty{font-size:13px;line-height:1.6;color:#8e9787;padding:0 10px}.job-empty[hidden]{display:none}.job-steps li .step-mark{display:block}.job-editor[data-mode=recording] #record-job{border-color:#cf7458;color:#e8a38c}.job-editor[data-mode=saved] .job-state i,.job-editor[data-mode=complete] .job-state i{background:#b2cc92}.job-controls .job-run:disabled{background:#69715f;border-color:#69715f;color:#c2c9b9;opacity:.45}.job-editor[data-mode=idle] #record-job{background:#d9dfce;color:#161b13;border-color:#d9dfce}.job-preview-caption{text-shadow:0 1px 5px #000,0 0 12px #000}.job-preview-caption .small-label{font-size:10px}.job-steps ol:empty{margin-bottom:0}
@media(max-width:700px){.job-editor-body>.job-stage{order:-1}.job-instruction{padding:16px 14px;gap:12px;min-height:102px}.job-instruction p{font-size:12px;max-width:220px}.job-instruction button{padding:12px;font-size:12px;max-width:160px}.job-empty{margin:12px 0}.job-steps ol{margin-bottom:4px}.job-steps li{font-size:12px}.job-preview-caption .small-label{font-size:8px}.job-editor-top>.small-label{font-size:8px}}

.job-editor[data-mode=unsaved] #save-job{background:#d9dfce;color:#161b13;border-color:#d9dfce}
.job-controls button.job-run:hover:not(:disabled){background:#eef1e7}.job-editor[data-mode=running] button.job-run{background:#36412e;color:#e8eddf;border-color:#9bad8a}.job-editor[data-mode=running] button.job-run:hover:not(:disabled){background:#45543a}

/* Keep small navigation targets usable without changing the page composition. */
.topbar nav a{min-height:44px;display:inline-flex;align-items:center}
.contact-address>a,footer>a{min-height:44px;display:inline-flex;align-items:center}
footer{align-items:center}
@media(max-width:700px){footer{font-size:9px;letter-spacing:.5px}.contact-address span{font-size:10px}.assembly-status{font-size:10px}}
/* Keep navigation readable when a bright worktop passes beneath it. */
.topbar{background:#11140ff0}
.wordmark{min-height:44px;justify-content:center}