:root{--phone-nav-h:64px;--icon-col:120px;--layer-pad:var(--sp-4);--cursor-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h7v1H2zM1 3h1v6H1zM9 3h1v6H9zM2 9h7v1H2zM10 10h1v1h-1zM11 11h1v1h-1zM12 12h1v1h-1zM13 13h1v1h-1z' fill='%231b1d2a'/%3E%3Cpath d='M2 3h7v6H2z' fill='%23ffc23d'/%3E%3Cpath d='M4 5h3v1H4zM5 4h1v3H5z' fill='%231b1d2a'/%3E%3Cpath d='M10 11h1v1h-1zM11 12h1v1h-1zM12 13h1v1h-1z' fill='%231b1d2a'/%3E%3C/svg%3E") 8 8, pointer}::view-transition-old(root),::view-transition-new(root){animation:none}html,body{height:100%}body:has(.desk){background:var(--c-cobalt-deep);overflow:hidden}.skip-link{top:var(--sp-2);left:var(--sp-2);z-index:100;padding:var(--sp-2) var(--sp-4);background:var(--c-marigold);border:var(--border-w) solid var(--border);border-radius:var(--r-control);font-family:var(--font-display);color:var(--c-ink);position:fixed;transform:translateY(-200%)}.skip-link:focus-visible{transform:none}.desk{inset:0 0 var(--taskbar-h) 0;isolation:isolate;position:fixed}.desk__wall{z-index:-1;position:absolute;inset:0;overflow:hidden}.desk__wall svg{width:100%;height:100%}.desk__wall-tall{display:none!important}.desk__icons{top:var(--sp-3);bottom:var(--sp-3);left:var(--sp-2);align-items:center;gap:var(--sp-1);width:calc(var(--icon-col) - var(--sp-3));flex-direction:column;display:flex;position:absolute}.desk__icons .os-icon{width:100%;color:var(--c-white)}.desk__bin{margin-top:auto}.desk__layer{inset:var(--layer-pad) var(--layer-pad) var(--layer-pad) var(--icon-col);pointer-events:none;place-items:center;display:grid;position:absolute}.desk__layer>*{pointer-events:auto}.desk__taskbar{z-index:20;position:fixed;inset:auto 0 0}.os-icon[aria-current=page] .os-icon__label{background:var(--selection);color:var(--c-white)}.desk .os-window{transform-origin:50%;max-width:100%;max-height:100%}.os-window--sm{width:min(460px,100%)}.os-window--md{width:min(640px,100%)}.os-window--lg{width:min(1040px,100%);height:100%}.os-window--max,.os-window.is-max{width:100%;height:100%}.os-window.is-minimized{display:none}.os-window:focus-visible{box-shadow:var(--shadow-window), var(--focus-ring)}.os-back{display:none}.os-window__body{overscroll-behavior:contain}.os-quick{gap:var(--sp-2);display:flex}.os-quick__btn{align-items:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-3);border:var(--border-w) solid var(--border);border-radius:var(--r-control);background:var(--c-paper) var(--gloss);box-shadow:var(--bevel-raised);color:var(--text);font-family:var(--font-display);font-size:var(--fs-xs);transition:transform var(--dur-press) var(--ease-out);text-decoration:none;display:inline-flex}.os-quick__btn:hover{background-color:var(--c-white)}.os-quick__btn:active{box-shadow:var(--bevel-sunken);transform:translateY(1px)}.os-quick__btn svg{width:20px;height:20px}.os-tray time{font-variant-numeric:tabular-nums}.os-tray time .blink{animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.start-menu{left:var(--sp-2);bottom:calc(var(--taskbar-h) + var(--sp-1));z-index:30;width:min(320px, calc(100vw - 2 * var(--sp-2)));background:var(--c-paper);border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-window);transform-origin:0 100%;animation:menu-in var(--dur-ui) var(--ease-out);display:flex;position:fixed;overflow:hidden}.start-menu[hidden]{display:none}@keyframes menu-in{0%{opacity:0;transform:scale(.96)translateY(6px)}}.start-menu__side{width:36px;padding:var(--sp-3) 0;background:var(--titlebar-active);border-right:var(--border-w) solid var(--border);align-items:flex-end;display:flex}.start-menu__side span{writing-mode:vertical-rl;font-family:var(--font-display);font-size:var(--fs-md);color:var(--c-white);text-shadow:1px 1px 0 var(--c-cobalt-deep);margin:0 auto;font-weight:700;transform:rotate(180deg)}.start-menu__main{min-width:0;padding:var(--sp-2);flex:1}.start-menu__user{margin:0 0 var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-3);border-bottom:var(--border-w) solid var(--border);flex-direction:column;display:flex}.start-menu__user strong{font-family:var(--font-display);font-size:var(--fs-md)}.start-menu__user span{font-size:var(--fs-sm);color:var(--text-muted)}.start-menu__list{margin:0;padding:0;list-style:none}.start-menu__list--ext{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--border-w) dashed var(--c-mist-deep)}.start-menu__list a{align-items:center;gap:var(--sp-3);min-height:40px;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-control);color:var(--text);font-family:var(--font-display);font-size:var(--fs-sm);text-decoration:none;display:flex}.start-menu__list a:hover,.start-menu__list a:focus-visible{background:var(--selection);color:var(--c-white)}.start-menu__list svg{width:24px;height:24px}.start-menu__glyph{background:var(--c-cobalt);border:var(--border-w) solid var(--border);width:24px;height:24px;color:var(--c-white);font-family:var(--font-display);font-size:var(--fs-xs);border-radius:4px;place-items:center;font-weight:700;display:grid}.boot{z-index:90;justify-content:center;align-items:center;gap:var(--sp-3);background:var(--c-cobalt-deep);color:var(--c-white);font-family:var(--font-display);flex-direction:column;display:none;position:fixed;inset:0}.is-booting .boot{display:flex}.boot.is-leaving{opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}.boot__name{font-size:var(--fs-2xl);margin:0;font-weight:700}.boot__name span{color:var(--c-marigold)}.boot__bar{border:var(--border-w) solid var(--c-white);border-radius:var(--r-control);width:200px;height:18px;padding:2px}.boot__bar span{background:repeating-linear-gradient(90deg, var(--c-marigold) 0 10px, transparent 10px 14px);width:0;height:100%;animation:boot-fill var(--dur-boot) steps(10) forwards;display:block}@keyframes boot-fill{to{width:100%}}.boot__hint{font-size:var(--fs-xs);opacity:.8;margin:0}.phone-nav{display:none}@media (height<=760px) and (width>=900px){:root{--icon-size:40px}.desk__icons .os-icon{padding:var(--sp-1)}}@media (width<=899px){:root{--icon-size:52px}body:has(.desk){overflow:auto}.desk{min-height:100dvh;padding:calc(var(--sp-5) + env(safe-area-inset-top)) var(--gutter) calc(var(--phone-nav-h) + var(--sp-5));gap:var(--sp-5);flex-direction:column;display:flex;position:relative;inset:auto}.desk__wall{position:fixed}.desk__wall-wide{display:none!important}.desk__wall-tall{display:block!important}.desk__icons{gap:var(--sp-4) var(--sp-2);order:2;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;position:static}.desk__bin{margin:0}.desk__layer{order:1;display:block;position:static}.desk--home .os-window{width:100%}.desk--home .os-controls{display:none}.desk--app .desk__layer .os-window{inset:0 0 var(--phone-nav-h) 0;z-index:10;width:100%;height:auto;max-height:none;box-shadow:none;border:0;border-radius:0;position:fixed}.desk--app .os-titlebar{height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.desk--app .os-controls,.desk--app .os-addressbar,.desk--app .os-statusbar{display:none}.desk--app .os-back{border:var(--border-w) solid var(--border);border-radius:var(--r-control);background:var(--c-paper) var(--gloss);width:40px;height:36px;box-shadow:var(--bevel-raised);color:var(--c-ink);place-items:center;display:grid}.os-back svg{width:12px;height:12px}.desk--app .os-window__body{padding:var(--sp-4) var(--gutter) var(--sp-7)}.desk__taskbar,.start-menu{display:none!important}.phone-nav{z-index:20;height:calc(var(--phone-nav-h) + env(safe-area-inset-bottom));padding:var(--sp-1) var(--sp-1) env(safe-area-inset-bottom);background:var(--c-paper) var(--gloss);border-top:var(--border-w) solid var(--border);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;inset:auto 0 0}.phone-nav a{border:var(--border-w) solid transparent;border-radius:var(--r-control);color:var(--text);font-family:var(--font-display);font-size:var(--fs-2xs);white-space:nowrap;flex-direction:column;justify-content:center;align-items:center;gap:2px;text-decoration:none;display:flex}.phone-nav a[aria-current=page]{border-color:var(--border);background:var(--c-cobalt-wash);box-shadow:var(--bevel-sunken)}.phone-nav svg{width:24px;height:24px}}.read{--wide:min(1000px, 100%);font-size:var(--fs-lg);line-height:var(--lh-read)}.read>*,.prose>*{max-width:var(--measure);margin-inline:auto}.read>.wide,.prose>.wide,.prose>p:has(>img:nth-of-type(2)){max-width:var(--wide)}.prose h2{margin-top:var(--sp-8);margin-bottom:var(--sp-3);font-family:var(--font-display);font-size:var(--fs-2xl);line-height:var(--lh-tight)}.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-xl);line-height:var(--lh-tight)}.prose p,.prose ul,.prose ol{margin-top:0;margin-bottom:var(--sp-4)}.prose li+li{margin-top:var(--sp-1)}.prose a{color:var(--link);text-underline-offset:3px}.prose strong{font-weight:700}.prose em{color:var(--text-muted)}.prose img,.read img{border:var(--border-w) solid var(--border);border-radius:var(--r-control);background:var(--c-white);height:auto}.prose p>img{width:100%;margin:var(--sp-5) 0;box-shadow:var(--shadow-control);display:block}.prose p:has(>img:nth-of-type(2)){gap:var(--sp-4);margin-block:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));align-items:start;display:grid}.prose p:has(>img:nth-of-type(2))>img{margin:0}.cs-hero{gap:var(--sp-5);margin-bottom:var(--sp-6);display:grid;max-width:var(--wide)!important}.cs-kicker{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--c-cobalt);margin:0}.cs-hero h1{font-family:var(--font-display);font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:0}.cs-summary{max-width:var(--measure);font-size:var(--fs-xl);line-height:var(--lh-ui);margin:0}.cs-meta{gap:var(--sp-3) var(--sp-5);padding:var(--sp-4);background:var(--surface-raised);border:var(--border-w) solid var(--border);border-radius:var(--r-control);font-size:var(--fs-sm);line-height:var(--lh-ui);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));margin:0;display:grid}.cs-meta dt{font-family:var(--font-display);color:var(--text-muted)}.cs-meta dd{margin:0}.cs-meta ul{margin:0;padding:0;list-style:none}.cs-status{padding:2px var(--sp-3);background:var(--c-mist);border:var(--border-w) solid var(--border);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--fs-xs);justify-self:start;margin:0}.cs-cover img{width:100%;box-shadow:var(--shadow-window);display:block}.cs-actions{gap:var(--sp-3);flex-wrap:wrap;display:flex}.tldr{padding:var(--sp-5);background:var(--c-cobalt-wash);border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-control);margin-block:var(--sp-6) var(--sp-7)!important}.tldr__title{font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;margin:0 0 var(--sp-3)!important}.tldr dl{gap:var(--sp-3);margin:0;display:grid}.tldr dl>div{gap:var(--sp-3);grid-template-columns:8em 1fr;display:grid}.tldr dt{font-family:var(--font-display);color:var(--c-cobalt)}.tldr dd{font-size:var(--fs-md);margin:0}.cs-next{justify-content:space-between;align-items:center;gap:var(--sp-4);padding:var(--sp-5);background:var(--c-marigold);border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-window);color:var(--c-ink);cursor:var(--cursor-open);transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);text-decoration:none;display:flex;max-width:var(--wide)!important;margin-top:var(--sp-8)!important}.cs-next:active{box-shadow:var(--shadow-control);transform:translate(3px,3px)}.cs-next small{font-family:var(--font-display);font-size:var(--fs-sm);display:block}.cs-next strong{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:var(--lh-tight)}.cs-next__arrow{font-family:var(--font-display);font-size:var(--fs-2xl)}.cards{gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));margin:0;padding:0;list-style:none;display:grid}.project-card{background:var(--surface-raised);border:var(--border-w) solid var(--border);border-radius:var(--r-window);height:100%;box-shadow:var(--shadow-control);color:var(--text);cursor:var(--cursor-open);transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.project-card:hover{box-shadow:5px 5px 0 0 var(--c-ink);transform:translate(-2px,-2px)}.project-card:active{box-shadow:var(--shadow-pressed);transform:translate(2px,2px)}.project-card:focus-visible{box-shadow:var(--shadow-control), var(--focus-ring)}.project-card__img{aspect-ratio:16/10;border-bottom:var(--border-w) solid var(--border);background:var(--c-cobalt-wash);overflow:hidden}.project-card__img img{object-fit:cover;object-position:top;width:100%;height:100%}.project-card__body{gap:var(--sp-2);padding:var(--sp-4);flex-direction:column;flex:1;display:flex}.project-card__meta{font-family:var(--font-display);font-size:var(--fs-xs);color:var(--text-muted);margin:0}.project-card h2,.project-card h3{font-family:var(--font-display);font-size:var(--fs-xl);line-height:var(--lh-tight);margin:0}.project-card p{font-size:var(--fs-md);line-height:var(--lh-read);margin:0}.project-card--featured{grid-column:1/-1}@media (width>=900px){.project-card--featured{flex-direction:row}.project-card--featured .project-card__img{aspect-ratio:auto;border-bottom:0;border-right:var(--border-w) solid var(--border);flex:1.3;min-height:300px}.project-card--featured .project-card__body{padding:var(--sp-6);flex:1;justify-content:center}}.tags{gap:var(--sp-1);margin:var(--sp-1) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.tags li{padding:0 var(--sp-2);background:var(--c-paper);border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--fs-2xs)}.badge{padding:0 var(--sp-2);background:var(--c-marigold);border:var(--border-w) solid var(--border);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--fs-xs);align-self:flex-start}.panel{padding:var(--sp-4);background:var(--surface-raised);border:var(--border-w) solid var(--border);border-radius:var(--r-control);box-shadow:var(--bevel-sunken)}.panel-title{margin:0 0 var(--sp-3);font-family:var(--font-display);font-size:var(--fs-md)}.window-h1{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-2xl);line-height:var(--lh-tight)}.window-lede{max-width:var(--measure);margin:0 0 var(--sp-5);color:var(--text-muted);line-height:var(--lh-read)}.story{margin-block:var(--sp-6)!important}.story figcaption{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:var(--lh-ui);color:var(--text-muted)}.ba-stage{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:var(--sp-4);max-width:var(--stage-max);margin-inline:auto;display:grid}.ba-pair{border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-control);background:var(--c-white);touch-action:pan-y;position:relative;overflow:hidden}.ba-pair img{border:0;border-radius:0;width:100%;height:auto;display:block}.ba-after{clip-path:inset(0 0 0 var(--pos));position:absolute;inset:0}.ba-divider{top:0;bottom:0;left:var(--pos);background:var(--c-marigold);border-inline:1px solid var(--c-ink);width:4px;margin-left:-2px;position:absolute}.ba-control{align-items:center;gap:var(--sp-3);max-width:520px;margin:var(--sp-4) auto 0;font-family:var(--font-display);font-size:var(--fs-sm);display:flex}.ba-control input{accent-color:var(--c-cobalt);min-height:var(--tap-min);cursor:ew-resize;flex:1}.story-ba figcaption{text-align:center}.morph-track{position:relative}.morph-frame{border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-window);background:var(--c-white);aspect-ratio:1722/1500;position:relative;overflow:hidden}.morph-frame img{object-fit:cover;object-position:top;border:0;border-radius:0;width:100%;height:100%;position:absolute;inset:0}.morph-final{position:absolute;inset:0}.morph-scan,.morph-label span[data-when=wire]{display:none}.morph-label span{margin-right:var(--sp-2);padding:0 var(--sp-2);background:var(--c-marigold);border:var(--border-w) solid var(--border);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--fs-xs);color:var(--c-ink);display:inline-block}.story-morph[data-ready] .morph-track{height:calc(min(64vh,620px) + 700px)}.story-morph[data-ready] .morph-stage{top:var(--sp-4);margin:0;position:sticky}.story-morph[data-ready] .morph-frame{aspect-ratio:auto;height:min(64vh,620px)}.story-morph[data-ready] .morph-final{clip-path:inset(0 0 calc(100% - var(--p,0) * 100%) 0)}.story-morph[data-ready] .morph-scan{left:0;right:0;top:calc(var(--p,0) * 100%);background:var(--c-marigold);border-block:1px solid var(--c-ink);height:4px;margin-top:-2px;display:block;position:absolute}.story-morph[data-ready] .morph-stage[data-phase=wire] span[data-when=wire],.story-morph[data-ready] .morph-stage[data-phase=final] span[data-when=final]{display:inline-block}.story-morph[data-ready] .morph-stage[data-phase=wire] span[data-when=final]{display:none}.story-process{padding:0 0 0 var(--sp-7);counter-reset:step;list-style:none;position:relative;max-width:var(--wide)!important}.story-process:before,.story-process:after{content:"";border-radius:2px;width:4px;position:absolute;top:0;left:15px}.story-process:before{background:var(--c-mist);bottom:0}.story-process:after{height:calc(var(--p,1) * 100%);background:var(--c-cobalt)}.ps-step{counter-increment:step;padding-bottom:var(--sp-7);position:relative}.ps-node{left:calc(-1 * var(--sp-7));background:var(--c-marigold);border:var(--border-w) solid var(--border);border-radius:var(--r-control);width:34px;height:34px;font-family:var(--font-display);font-size:var(--fs-sm);z-index:1;transition:background var(--dur-ui) var(--ease-out);place-items:center;font-weight:700;display:grid;position:absolute;top:0}.ps-node:before{content:counter(step)}.ps-body{max-width:var(--measure)}.ps-body h3{margin:2px 0 var(--sp-3);font-family:var(--font-display);font-size:var(--fs-xl);line-height:var(--lh-tight)}.ps-body p,.ps-body ul{margin:0 0 var(--sp-3)}.ps-figures{gap:var(--sp-4);margin-top:var(--sp-4);display:grid}.ps-figures--two{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}.ps-figures img{width:100%;height:auto;box-shadow:var(--shadow-control);transition:filter var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);display:block}.story-process[data-ready] .ps-step:not(.is-active) .ps-node{background:var(--c-paper)}.story-process[data-ready] .ps-step:not(.is-active) .ps-figures img{filter:grayscale()contrast(.8);opacity:.45;transform:scale(.97)}.pan-viewport{border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-window);background:var(--c-white);overflow-x:auto}.pan-strip{width:max-content}.pan-strip img{border:0;border-radius:0;width:auto;max-width:none;height:min(60vh,540px);display:block}.story-pan[data-ready] .pan-track{height:calc(min(60vh,540px) + 600px)}.story-pan[data-ready] .pan-stage{top:var(--sp-4);margin:0;position:sticky}.story-pan[data-ready] .pan-viewport{overflow:hidden}.stats{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));padding:0;list-style:none;display:grid}.stat{gap:var(--sp-1);padding:var(--sp-5);background:var(--surface-raised);border:var(--border-w) solid var(--border);border-radius:var(--r-window);box-shadow:var(--shadow-control);flex-direction:column;display:flex}.stat__value{font-family:var(--font-display);font-size:var(--fs-3xl);color:var(--c-cobalt);font-variant-numeric:tabular-nums;font-weight:700;line-height:1}.stat__label{font-size:var(--fs-md);line-height:var(--lh-ui)}.stat__note{font-size:var(--fs-sm);color:var(--text-muted)}@media (width<=599px){.tldr dl>div{grid-template-columns:1fr;gap:0}.story-process{padding-left:var(--sp-6)}.ps-node{left:calc(-1 * var(--sp-6));width:28px;height:28px}.story-process:before,.story-process:after{left:12px}.cs-next strong,.cs-next__arrow{font-size:var(--fs-xl)}}.story-morph:not([data-ready]) .morph-frame{gap:var(--border-w);aspect-ratio:auto;background:var(--c-ink);grid-template-columns:1fr 1fr;display:grid}.story-morph:not([data-ready]) .morph-final,.story-morph:not([data-ready]) .morph-frame img{aspect-ratio:1722/1824;height:auto;position:static}.story-morph:not([data-ready]) .morph-label{display:none}
