:root{--monitor-graphite:#252725;--monitor-glint:rgb(255 255 255 / .08);--monitor-glass:#111311;--workspace-sidebar:#eee3d4;--workspace-border:#c7b8a5;--workspace-row:#d0c2b0;--workspace-status:#e9dfcf;--workspace-status-ink:#514338;--workspace-status-border:#b7a58e;}
/* Independent third section: no selectors or state shared with the accepted hero. */
.software-story{position:relative;background:var(--charcoal);color:var(--cream);padding:88px 5% 64px}.software-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;max-width:1100px;margin:0 auto 60px;align-items:start}.software-intro h2{font-size:clamp(42px,4.6vw,68px);line-height:1.03;letter-spacing:-.045em;margin:0}.software-intro p{font-size:18px;line-height:1.6;max-width:42ch}.software-intro .software-caption{font-size:16px;margin-top:20px}.software-access{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--cream)}.software-access:hover{color:var(--cream-hover)}.software-access:focus-visible{outline-color:var(--cream)}.software-track{max-width:1100px;margin:auto;position:relative}.software-scene{position:relative;width:100%;aspect-ratio:1672/941}.software-canvas{display:block;width:100%;height:100%}.software-scene:has(canvas[hidden]){display:block}.software-story.is-animated .software-scene{position:sticky;top:var(--software-top,24px)}.software-app-home{max-width:1100px;margin:0 auto}.example-workspace{position:relative;display:grid;grid-template-columns:160px minmax(0,1fr);background:var(--paper);color:var(--charcoal);border:10px solid var(--monitor-graphite);font-size:16px;line-height:1.35;min-width:0}.example-workspace :focus-visible{outline-color:var(--red)}.example-workspace.is-embedded{position:absolute;z-index:3;border:0;overflow:hidden}.app-sidebar{display:flex;flex-direction:column;gap:20px;background:var(--workspace-sidebar);border-right:1px solid var(--workspace-border);padding:20px 12px}.app-brand{font:700 21px/1.2 var(--display);letter-spacing:-.5px}.app-brand span{display:block;font:400 16px/1.4 var(--body);color:var(--muted);margin-top:6px;letter-spacing:0}.app-nav{display:flex;flex-direction:column;gap:4px}.app-nav a{display:flex;align-items:center;min-height:44px;padding:8px 10px;text-decoration:none;color:var(--charcoal);border-left:3px solid transparent}.app-nav a[aria-current=page]{background:var(--paper);border-left-color:var(--red);color:var(--red);font-weight:600}.app-nav a:hover{background:var(--cream-hover)}.app-nav a:active{background:var(--cream-active)}.app-context{margin-top:auto}.app-context label,.app-search label{display:block;font-size:16px;margin-bottom:6px}.app-context select{width:100%;min-height:44px;border:1px solid var(--rule);background:var(--paper);color:var(--charcoal);font:inherit;padding:8px}.app-example{font-size:16px;color:var(--muted)}.app-main{min-width:0;display:flex;flex-direction:column;overflow:hidden}.app-topbar{padding:14px 18px;border-bottom:1px solid var(--workspace-border);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0}.app-topbar h3{font:700 23px/1.2 var(--display);letter-spacing:-.6px;margin:0}.app-search{width:230px;max-width:50%}.app-search input{width:100%;min-height:44px;border:1px solid var(--rule);background:var(--paper);padding:8px 10px;font:inherit;color:var(--charcoal)}.app-search input::placeholder{color:var(--muted);opacity:1}.app-content{padding:18px;overflow:auto;overscroll-behavior:contain;min-height:0}.app-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.app-heading h4{font:700 25px/1.2 var(--display);letter-spacing:-.6px;margin:0}.app-toolbar{display:flex;align-items:center;gap:12px}.app-toolbar p{font-size:16px;color:var(--muted)}.app-toolbar button{border:0;background:transparent;color:var(--red);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px}.app-toolbar button:hover{background:var(--cream-hover)}.app-toolbar button:active{background:var(--cream-active)}.app-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}.app-region h4{font:700 19px/1.25 var(--display);margin:0 0 14px}.app-projects table{width:100%;border-collapse:collapse;text-align:left}.app-projects th,.app-projects td{padding:12px 8px;border-bottom:1px solid var(--workspace-row);vertical-align:top;font-size:16px;overflow-wrap:break-word}.app-projects thead th{font-weight:500;color:var(--muted);padding-top:0}.app-projects tbody th{font-weight:600}.app-status{display:inline-block;background:var(--workspace-status);color:var(--workspace-status-ink);padding:4px 7px;white-space:nowrap;font-size:16px;border:1px solid var(--workspace-status-border)}.app-side-content{display:flex;flex-direction:column;gap:24px;min-width:0}.app-schedule ol,.app-activity ul{list-style:none;padding:0;margin:0}.app-schedule li{border-left:3px solid var(--red);padding:4px 0 4px 10px;margin-bottom:12px}.app-schedule li span{display:block;color:var(--muted);font-size:16px}.app-schedule li strong{font-weight:500;font-size:16px}.app-activity li{position:relative;padding:6px 0 6px 14px;font-size:16px}.app-activity li::before{content:'';width:4px;height:4px;position:absolute;top:15px;left:0;background:var(--red)}.app-notes{margin-top:26px}.app-notes>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.app-notes h5{font:700 18px/1.3 var(--display);margin:0 0 12px}.app-notes article{border-top:1px solid var(--workspace-border);padding-top:14px}.app-notes ul{margin:0;padding-left:20px}.app-notes li{padding:3px 0}.app-empty{padding:20px 0}.app-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.example-workspace[data-view=projects] .app-columns,.example-workspace[data-view=schedule] .app-columns{display:block}.example-workspace[data-view=schedule] .app-schedule ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:959px){.software-story{padding:52px 24px}.software-intro{display:block;margin-bottom:32px}.software-intro h2{font-size:44px;margin-bottom:24px;max-width:15ch}.software-intro p{max-width:44ch}.software-track{height:auto!important}.software-story.is-animated .software-scene{position:relative;top:auto}.software-app-home{margin-top:24px}.example-workspace{display:block;border-width:5px}.app-sidebar{padding:16px;border-right:0;border-bottom:1px solid var(--workspace-border);gap:16px}.app-brand{font-size:23px}.app-brand span,.app-example{display:none}.app-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}.app-nav a{border-left:0;border-bottom:3px solid transparent;padding:8px}.app-nav a[aria-current=page]{border-left:0;border-bottom-color:var(--red)}.app-context{display:flex;align-items:center;gap:12px}.app-context label{margin:0}.app-context select{width:auto;flex:1;min-width:0}.app-topbar{display:block;padding:18px 16px}.app-search{max-width:none;width:100%;margin-top:16px}.app-content{padding:18px 16px;overflow:visible}.app-heading{display:block}.app-heading h4{font-size:27px;margin-bottom:12px}.app-toolbar{justify-content:space-between}.app-columns{display:block}.app-side-content{margin-top:28px;gap:28px}.app-projects table,.app-projects tbody,.app-projects tr,.app-projects th,.app-projects td{display:block}.app-projects thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.app-projects tr{border-top:1px solid var(--workspace-border);padding:12px 0}.app-projects th,.app-projects td{border:0;padding:5px 0}.app-projects [data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-size:16px;font-weight:400;margin-bottom:3px}.app-notes>div{display:block}.app-notes article{margin-bottom:22px}.example-workspace[data-view=schedule] .app-schedule ol{display:block}}

.software-story.will-animate .software-scene:has(canvas[hidden]){display:block}

.example-workspace.is-bypass{border:5px solid var(--monitor-graphite)}

.example-workspace.is-embedded{overflow:clip;grid-template-rows:minmax(0,1fr)}.app-main,.app-sidebar{min-height:0}.app-sidebar{overflow:auto}

/* The live app sits within the shared physical aperture; edge treatment never intercepts controls. */
.example-workspace.is-embedded::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--monitor-glass),inset 0 2px 1px var(--monitor-glint)}
.example-workspace{scrollbar-color:var(--rule) var(--workspace-sidebar);scrollbar-width:thin}.example-workspace *{scrollbar-color:inherit;scrollbar-width:thin}

/* Embedded monitor density retains native type and control targets. */
.example-workspace.is-embedded .app-sidebar{padding:12px;gap:12px}.example-workspace.is-embedded .app-nav{gap:2px}.example-workspace.is-embedded .app-topbar{padding:10px 18px}.example-workspace.is-embedded .app-content{padding:14px}.example-workspace.is-embedded .app-heading{margin-bottom:14px}.example-workspace.is-embedded .app-region h4{margin-bottom:12px}.example-workspace.is-embedded .app-projects th,.example-workspace.is-embedded .app-projects td{padding-top:8px;padding-bottom:8px}

/* The approved photograph owns the final hardware and display. */
.software-photo,.software-photo img{display:block;width:100%;height:100%}.software-photo{position:absolute;inset:0}.software-photo img{object-fit:var(--software-image-fit,contain);object-position:var(--software-image-position,50% 50%)}.software-canvas{position:absolute;inset:0}.software-app-home{margin-top:32px}

.workspace-close{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;margin-bottom:16px;border:1px solid var(--cream);background:var(--charcoal);color:var(--cream);font:inherit}.workspace-close:hover,.workspace-close:active{background:var(--cream);color:var(--charcoal)}.workspace-close:focus-visible{outline-color:var(--cream)}

/* Desktop scene fills the viewport; native photo and WebGL use the same crop. */
@media(min-width:960px){.software-story{padding-left:0;padding-right:0}.software-intro,.software-app-home{width:90%}.software-track{width:100%;max-width:none;margin:0}.software-scene{height:100vh;height:100svh;aspect-ratio:auto;--software-image-fit:cover;--software-image-position:90% 35%}.software-story.is-animated .software-scene{top:0}}
@media(min-width:960px) and (aspect-ratio < 5/4),(min-width:960px) and (aspect-ratio > 19/10){.software-scene{--software-image-fit:contain;--software-image-position:50% 50%}}