/* The Latin export preserves the original metrics, outlines, hinting and weight axis. */
@font-face{font-family:"Noto Sans";src:url("/assets/noto-sans-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-024F,U+0300-036F,U+2000-206F,U+20A0-20CF,U+2100-21FF,U+FEFF,U+FFFD}
/* Load the original only for characters outside the shared EN/DE coverage. */
@font-face{font-family:"Noto Sans";src:url("/assets/noto-sans-variable.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0250-02FF,U+0370-1FFF,U+2070-209F,U+20D0-20FF,U+2200-FEFE,U+FF00-FFFC,U+FFFE-10FFFF}
*{box-sizing:border-box}
html{scroll-padding-block:var(--space-large) var(--navigation-clearance);scroll-behavior:smooth}
html[data-snap="true"]{scroll-snap-type:y proximity}
html[data-smooth-scroll="true"]{scroll-snap-type:none}
body{overflow-wrap:anywhere;margin:0;background:var(--primary-dark);color:var(--primary-dark);font-family:var(--font-family);font-size:var(--font-body);font-weight:var(--weight-body);line-height:var(--line-body);padding:var(--space-large) var(--page-inset) var(--navigation-clearance);isolation:isolate}
button,input,textarea,select{font:inherit}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.075em}
a:hover{text-decoration-thickness:.15em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--secondary-dark);outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:var(--weight-heading);line-height:var(--line-heading);letter-spacing:-.035em;overflow-wrap:anywhere}
h1{font-size:var(--font-title)}h2{font-size:var(--font-heading)}h3{font-size:var(--font-subheading)}
img{display:block;max-width:100%;height:auto}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
img,svg,.pair-mark,.puzzle-tile,.network-core,.nav-link[data-i18n-aria="home"]{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
::selection{background:var(--secondary-dark);color:var(--neutral)}
.page-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--primary-dark);background-image:linear-gradient(var(--grid-major-color) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--grid-major-color) 1.5px,transparent 1.5px),linear-gradient(var(--grid-minor-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor-color) 1px,transparent 1px);background-size:var(--grid-major) var(--grid-major),var(--grid-major) var(--grid-major),var(--grid-step) var(--grid-step),var(--grid-step) var(--grid-step);background-position:0 var(--backdrop-shift);box-shadow:inset -1.5px 0 var(--grid-major-color);transition:background-color .18s ease}
.page-grid::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--secondary-light) 16%,transparent),transparent 65%),radial-gradient(ellipse at 90% 90%,color-mix(in srgb,var(--primary-light) 14%,transparent),transparent 60%)}
.page-grid::after{content:"";position:absolute;inset:0;background-color:var(--grid-cross-color);mask-image:url("/assets/grid-cross.svg");mask-mode:alpha;mask-size:var(--grid-major) var(--grid-major);mask-position:0 var(--backdrop-shift);mask-repeat:repeat}
.front-page,.reading-page{display:grid;gap:var(--section-gap)}
.project-sections{display:grid;gap:var(--section-gap);scroll-margin-top:var(--space-large)}
.panel{position:relative;border-radius:var(--radius-outer);background:var(--panel-surface);color:var(--primary-dark);min-width:0;isolation:isolate;scroll-snap-align:start;scroll-margin-block:var(--space-medium);}
.front-page .panel{height:var(--section-height);min-height:0;display:grid;align-items:center;transform:translateX(var(--section-offset))}
.panel-jumps{position:absolute;inset:0;pointer-events:none;z-index:5}
.panel-jump{position:absolute;left:var(--jump-x);top:var(--jump-y);display:grid;place-items:center;width:min(calc(var(--button-height-normal)*2),calc(var(--section-height)/5));height:min(calc(var(--button-height-normal)*2),calc(var(--section-height)/5));transform:translate(-50%,-50%);color:var(--paper-underlay-color);opacity:.6;text-decoration:none;pointer-events:auto;border-radius:var(--radius-control);transition:opacity .15s ease}
.panel-jump>.icon{width:var(--space-large);height:var(--space-large);max-width:calc(100% - var(--space-small));max-height:calc(100% - var(--space-small));transform:translate(var(--jump-icon-x),var(--jump-icon-y));transition:transform .18s ease}
.panel-jump:is(:hover,:focus-visible){opacity:1}
.panel-jump:is(:hover,:focus-visible)>.icon{transform:translate(var(--jump-icon-x),calc(var(--jump-icon-y) + var(--jump-hover)))}
@media(prefers-reduced-motion:reduce){.panel-jump,.panel-jump>.icon{transition:none}.panel-jump:is(:hover,:focus-visible)>.icon{transform:translate(var(--jump-icon-x),var(--jump-icon-y))}}
@media print{.panel-jumps{display:none}}


.backplate{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none;fill:var(--panel-surface,var(--primary-dark))}
.backplate [data-shape-metrics]{width:var(--radius-outer);height:var(--slant-depth)}
.floating-nav [data-shape-metrics]{width:var(--radius-control)}
.panel>.backplate{filter:none;stroke:none}
.paper-underlay-fill{filter:saturate(1.5)}
.paper-grid-major{fill:none;stroke:var(--grid-major-color);stroke-width:1.5px}
.paper-grid-minor{fill:none;stroke:var(--grid-minor-color);stroke-width:1px}
.paper-grid-cross{fill:none;stroke:var(--grid-cross-color)}
.paper-shadow-quiet{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-shadow-quiet-strength)}
.paper-shadow-middle{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-shadow-middle-strength)}
.paper-shadow-lift{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-shadow-lift-strength)}
.paper-curl-quiet{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-curl-quiet-strength)}
.paper-curl-middle{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-curl-middle-strength)}
.paper-curl-lift{stop-color:var(--paper-shadow-color);stop-opacity:var(--paper-curl-lift-strength)}
.paper-contact-shadow{fill:var(--paper-shadow-color);opacity:var(--paper-contact-strength)}
.paper-rest-mask{mask-type:luminance}
.paper-grain{opacity:var(--paper-grain-strength)}
.paper-underlay-light{stop-color:var(--paper-underlay-light-color)}
.paper-underlay-shade{stop-color:var(--paper-underlay-shade-color)}
.surface-base{fill:var(--surface-edge-color)}
.surface-rim-clear{stop-color:var(--surface-light);stop-opacity:0}
.surface-rim-light{stop-color:var(--surface-light);stop-opacity:.7}
.surface-rim-dark{stop-color:var(--surface-shade);stop-opacity:.28}
.surface-bevel-light{flood-color:var(--surface-light);flood-opacity:var(--surface-bevel-light-strength)}
.surface-bevel-shade{flood-color:var(--surface-shade);flood-opacity:var(--surface-bevel-shade-strength)}
.shapes-ready .panel,.shapes-ready .floating-nav{background:transparent;border-radius:0}
.panel-content{width:100%;max-width:calc(var(--width-content) + var(--space-large)*4);margin-inline:auto;padding:clamp(2rem,5vw,5rem);padding-bottom:calc(clamp(2rem,5vw,5rem) + var(--slant-depth));position:relative;min-width:0}
.panel-fit{display:contents}
.front-page .panel-content{padding-top:calc(clamp(2rem,5vw,5rem) + var(--shape-top-clearance))}
.hero-panel .panel-content{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:inherit;gap:var(--space-large)}
.studio-wordmark{grid-column:1/-1;font-size:var(--font-wordmark);font-weight:var(--weight-display);line-height:.9;letter-spacing:-.075em;padding-bottom:var(--space-medium);border-bottom:var(--border) solid var(--stroke-color)}
.studio-hero h1{font-size:var(--font-front-title);line-height:1.08;max-width:13ch;letter-spacing:-.045em;text-wrap:balance}
.hero-text{position:relative;z-index:1;display:grid;gap:var(--space-large);max-width:35rem;container-type:inline-size;min-width:0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:var(--font-small);font-weight:var(--weight-control)}
.lead,.section-copy{max-width:44ch;line-height:1.6}
.text-link{display:inline-flex;align-items:center;gap:var(--space-medium);font-size:var(--font-control);font-weight:var(--weight-control);justify-self:start;min-height:var(--button-height-normal)}
.text-link>.icon{transition:transform .2s ease}
.text-link:is(:hover,:focus-visible)>.icon{transform:translateX(.35rem)}
.pair-mark{display:inline-grid;grid-template-columns:repeat(2,.8rem);align-items:center;gap:2px;flex:none;margin-right:var(--space-small)}
.pair-mark>span{width:.8rem;height:1rem;border:var(--border) solid var(--stroke-color);background:var(--primary-dark);border-radius:calc(var(--radius-control)/3);transform:rotate(-10deg);transition:transform .2s ease}
.pair-mark>span+span{background:var(--secondary-dark);transform:rotate(10deg)}
.project-link:is(:hover,:focus-visible) .pair-mark>span{transform:translateX(-3px) rotate(-18deg)}
.project-link:is(:hover,:focus-visible) .pair-mark>span+span{transform:translateX(3px) rotate(18deg)}
.icon{width:1.25em;height:1.25em;flex-shrink:0;vertical-align:middle}
.puzzle-art{position:relative;width:100%;aspect-ratio:1;max-width:32rem;justify-self:center}
.project-network{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:var(--primary-dark);stroke-linecap:round}
.network-orbit{stroke-width:1;stroke-dasharray:2 12;opacity:.2}
.network-track{stroke-width:1.5;opacity:.32}
.network-signal{stroke:var(--secondary-dark);stroke-width:4;stroke-dasharray:.065 .935;stroke-dashoffset:0;opacity:.8}
.network-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;background:var(--primary-dark);box-shadow:var(--shadow-media);border:var(--border) solid var(--stroke-color)}
.network-core::before{content:"";position:absolute;inset:-12%;border:var(--border) solid var(--secondary-dark);border-radius:50%;opacity:.22}
.network-core img{width:145%;height:145%;max-width:none;object-fit:contain}
.puzzle-tile{position:absolute;display:grid;place-items:center;width:28%;aspect-ratio:1;filter:drop-shadow(var(--shadow-icon));transition:transform .35s ease}
.puzzle-tile img{display:block;width:100%;height:100%;object-fit:contain}
.puzzle-tile:focus-visible{border-radius:var(--radius-control)}
.tile-pairwell{top:6%;left:4%;transform:rotate(-13deg)}
.tile-knobelpause{top:9%;right:4%;transform:rotate(12deg)}
.tile-varyanz{bottom:9%;left:6%;transform:rotate(-7deg)}
.tile-gradygen{bottom:6%;right:6%;transform:rotate(9deg)}
.tile-gradygen img{border-radius:var(--radius-control)}
@media(prefers-reduced-motion:no-preference){
  .network-signal{animation:network-flow 4.8s linear infinite}
  .signal-knobelpause{animation-delay:-1.2s}
  .signal-varyanz{animation-delay:-2.4s}
  .signal-gradygen{animation-delay:-3.6s}
  .network-core::before{animation:network-ripple 4.8s ease-out infinite}
  .network-core img{animation:network-breathe 4.8s ease-in-out infinite}
}
@keyframes network-flow{0%{stroke-dashoffset:1;opacity:0}15%,75%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes network-ripple{0%{transform:scale(.82);opacity:0}25%{opacity:.3}100%{transform:scale(1.22);opacity:0}}
@keyframes network-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.project-panel .panel-content,.project-hero .panel-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--space-medium) var(--space-large)}
.project-heading{grid-column:1;grid-row:1;align-self:end;position:relative;z-index:3;min-width:0}
.project-heading h1,.project-heading h2{font-size:var(--font-project-title);font-weight:var(--weight-project);line-height:1.08;letter-spacing:-.055em;margin-top:var(--space-small)}
.project-index{display:flex;align-items:center;gap:var(--space-medium)}
.project-index>span:first-child{font-size:1.5rem;letter-spacing:-.04em;border-bottom:var(--border) solid var(--stroke-color);padding-bottom:var(--space-small)}
.project-summary{grid-column:1;grid-row:2;align-self:start;display:grid;gap:var(--space-medium);min-width:0;align-content:start;position:relative;z-index:3;container-type:inline-size}
.project-summary .section-copy,.project-summary .lead{max-width:28ch;font-size:clamp(1.125rem,2vw,1.5rem)}
.project-panel:nth-child(even) .project-heading{grid-column:2}
.project-panel:nth-child(even) .project-summary{grid-column:2;grid-row:2}
.project-panel:nth-child(even) .showcase-stage{grid-column:1;grid-row:1/3}
.showcase-stage{grid-column:2;grid-row:1/3;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;width:100%;max-width:36rem;justify-self:center;align-self:center;padding-block:var(--space-large)}
.stage-orbit{position:absolute;left:-5%;top:20%;width:110%;height:55%;border:var(--border) solid var(--stroke-color);border-radius:50%;transform:rotate(-24deg);opacity:.7}
.stage-orbit::after{content:"";position:absolute;width:var(--space-medium);height:var(--space-medium);left:15%;top:5%;background:var(--secondary-dark);border-radius:50%}
.showcase-stage .screenshot{position:relative;margin:0;max-width:none;transition:transform .3s ease;transform-origin:center}
.showcase-stage .shot-primary{grid-column:1/9;grid-row:1;transform:rotate(-4deg);z-index:2}
.showcase-stage .shot-secondary{grid-column:8/13;grid-row:1;margin-top:var(--space-large);transform:rotate(6deg);z-index:1}
:is(.showcase-knobelpause,.showcase-gradygen) .shot-primary{transform:rotate(4deg)}
:is(.showcase-knobelpause,.showcase-gradygen) .shot-secondary{transform:rotate(-6deg)}
.showcase-stage .screenshot-frame{box-shadow:var(--shadow-media);padding:calc(var(--space-small)/2)}
.showcase-stage .screenshot img{border-radius:var(--radius-inner)}
.showcase-stage figcaption{font-size:var(--font-small);line-height:1.4;max-width:24ch}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .studio-hero:hover .tile-pairwell{transform:translate(-4px,-6px) rotate(-17deg)}
  .studio-hero:hover .tile-knobelpause{transform:translate(5px,-4px) rotate(16deg)}
  .studio-hero:hover .tile-varyanz{transform:translate(-3px,5px) rotate(-4deg)}
  .studio-hero:hover .tile-gradygen{transform:translate(4px,5px) rotate(12deg)}
  .showcase-stage:hover .shot-primary{transform:translateY(-8px) rotate(-3deg)}
  .showcase-stage:hover .shot-secondary{transform:translateY(-4px) rotate(5deg)}
  :is(.showcase-knobelpause,.showcase-gradygen):hover .shot-primary{transform:translateY(-8px) rotate(3deg)}
  :is(.showcase-knobelpause,.showcase-gradygen):hover .shot-secondary{transform:translateY(-4px) rotate(-5deg)}
}
.screenshot{min-width:0;width:100%;max-width:32rem;justify-self:center}
.screenshot-frame{padding:var(--space-small);border-radius:var(--radius-control);background:var(--primary-dark);border:var(--border) solid var(--stroke-color);box-shadow:var(--shadow-media)}
.screenshot img{width:100%;height:auto;border-radius:var(--radius-inner)}
figcaption{margin-top:var(--space-medium);font-size:var(--font-small);font-weight:var(--weight-control)}
.section-heading{display:grid;gap:var(--space-medium);margin-bottom:calc(var(--space-large)*2)}
.front-page .legal-links-panel,.front-page .contact-panel{min-height:0}
.legal-links-panel .panel-content,.contact-panel .panel-content{padding-block:calc(var(--space-large)*2)}
.front-page .legal-links-panel .panel-content,.front-page .contact-panel .panel-content{padding-block:calc(var(--space-large)*2 + var(--shape-top-clearance)) calc(var(--space-large)*2 + var(--slant-depth))}
.legal-links-panel .section-heading{max-width:48rem;margin-bottom:var(--space-large)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space-large)*2);align-items:start}
.store-link{font-size:var(--font-small)}
.document-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-large)}
.document-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-medium);border-block:var(--border) solid var(--stroke-color);padding:var(--space-large) 0;font-weight:var(--weight-control);min-height:var(--button-height-navigation);text-decoration:none}
.document-link:hover{text-decoration:underline}
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:calc(var(--space-large)*2);align-items:center}
.contact-layout>div:first-child{display:grid;gap:var(--space-large)}
.direct-email{margin-top:var(--space-large);font-size:var(--font-small)}
.contact-form{display:grid;gap:var(--space-medium);min-width:0}
.form-field{display:grid;gap:calc(var(--space-small)/2);min-width:0}
.contact-form label{font-size:var(--font-small);font-weight:var(--weight-control)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-height:var(--button-height-normal);border:var(--border) solid var(--stroke-color);border-color:var(--field-border);border-radius:var(--radius-control);padding:var(--space-small) var(--space-medium);background:var(--field-surface);color:var(--primary-dark);font-size:var(--font-control);line-height:1.5}
.contact-form :is(input,select,textarea):hover{border-color:var(--primary-dark)}
.contact-form :is(input,select,textarea):focus-visible{border-color:var(--primary-dark);outline-color:var(--primary-dark);outline-offset:3px}
.contact-form textarea{resize:vertical;min-height:10rem}
.contact-form [aria-invalid="true"]{outline:2px solid var(--secondary-dark);outline-offset:1px}
.field-help,.form-privacy,.field-error,.form-status{font-size:var(--font-small);line-height:1.5}
.field-help,.form-privacy{color:var(--text-muted)}
.field-error:empty,.form-status:empty{display:none}.field-error{font-weight:var(--weight-control)}
.form-privacy{margin:0}.form-actions{display:flex;justify-content:flex-start}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-medium);min-height:var(--button-height-normal);padding:var(--space-small) var(--space-large);border:var(--border) solid var(--stroke-color);border-radius:var(--radius-control);background:var(--primary-dark);color:var(--neutral);font-size:var(--font-control);font-weight:var(--weight-control);text-decoration:none;cursor:pointer}
.button:hover{text-decoration:underline}.button:focus-visible{outline-color:var(--secondary-dark)}.button:disabled{opacity:.65;cursor:wait}
.contact-form[data-contact-enabled="false"] .button:disabled{cursor:not-allowed}
.form-actions .button{width:min(100%,18rem);justify-content:space-between}
.project-action{display:block;width:fit-content;max-width:100%;min-width:0;justify-self:start;align-self:start;padding:var(--space-medium)}
.project-link{max-width:100%;min-width:0;padding:var(--space-small) var(--space-medium);border:var(--border) solid var(--stroke-color);border-radius:var(--radius-control);background:var(--paper-underlay-color);color:var(--neutral);text-decoration:none;line-height:1.4;box-shadow:var(--action-shadow);transform:perspective(700px) translate(var(--action-x),var(--action-y)) rotateX(var(--action-rotate-x)) rotateY(var(--action-rotate-y)) rotate(calc(var(--action-rest-angle) + var(--action-rotate-z)));transition:transform .18s ease-out,box-shadow .12s ease-out}
.project-link>[data-i18n]{min-width:0}
.project-link.is-following:not(:active):not(.is-pressed){transition-property:box-shadow}
.project-link>.icon{margin-inline-start:var(--space-small)}
.project-link:is(:hover,:focus-visible)>.icon{transform:translate(.2rem,-.2rem)}
.project-link:is(:active,.is-pressed){transform:translate(0,2px) rotate(var(--action-rest-angle)) scale(.965);box-shadow:var(--action-pressed-shadow);transition-duration:.085s}
.project-link .pair-mark{margin:0}
.project-link .pair-mark>span{background:var(--primary-light);border-color:currentColor}
.project-link .pair-mark>span+span{background:var(--secondary-light)}
.project-link:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:.25em}
.store-link{max-width:100%;min-width:0}.store-link>[data-i18n]{min-width:0}
.form-status{padding:var(--space-medium);border:var(--border) solid var(--stroke-color);border-radius:var(--radius-control);margin-top:var(--space-small)}
.honeypot,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.floating-nav{position:fixed;bottom:calc(var(--space-medium) + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),var(--width-navigation));container-type:inline-size;font-size:var(--font-control);z-index:20;display:grid;grid-template-columns:minmax(44px,.5fr) repeat(6,minmax(0,.5fr)) minmax(44px,.5fr);padding:calc(var(--space-small)/2) var(--space-small);background:var(--nav-surface);color:var(--neutral);border-radius:var(--radius-control)}
.floating-nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:var(--navigation-outline);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.floating-nav .backplate{stroke:var(--nav-rim);stroke-width:1px}
.floating-nav .nav-link{color:var(--nav-text)}
.nav-link{position:relative;min-height:var(--button-height-navigation);padding:calc(var(--space-small)/2) var(--space-small);display:flex;align-items:center;justify-content:center;gap:var(--space-small);text-align:center;font-size:var(--font-control);font-weight:var(--weight-control);line-height:1.3;text-decoration:none;border-radius:var(--radius-control);overflow-wrap:anywhere}
.nav-link:where([data-nav-link]:not([data-nav-link="home"]):not([data-nav-link="overview"])){grid-column:span 2}
.nav-link+.nav-link::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:1px;background:color-mix(in srgb,currentColor 30%,transparent)}
.nav-content{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%}
.nav-content>*{transition:transform .16s ease}
.nav-content::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--nav-active-color);opacity:0;transition:opacity .16s ease}
.nav-link:is([aria-current],:hover,:focus-visible) .nav-content>*{transform:translateY(-3px)}
.nav-link:is([aria-current],:hover,:focus-visible) .nav-content::after{opacity:1}
.nav-link[aria-current]{font-weight:var(--weight-heading)}
.nav-link:focus-visible{outline-color:currentColor;outline-offset:1px}
.language-toggle{appearance:none;border:0;background:none;color:inherit;cursor:pointer;min-width:0}
.language-toggle[aria-disabled="true"]{cursor:wait}
.language-labels{display:grid}
.language-labels>span{grid-area:1/1;transition:opacity .16s ease}
[data-language-target]{opacity:0}
.language-toggle[data-preview] [data-language-current]{opacity:0}
.language-toggle[data-preview] [data-language-target]{opacity:1}
.breadcrumb{display:inline-flex;gap:var(--space-small);margin-bottom:var(--space-large);font-size:var(--font-small);min-height:var(--button-height-normal);align-items:center}
.document-heading{display:grid;gap:var(--space-medium);max-width:var(--width-prose);margin-bottom:calc(var(--space-large)*2)}
.document-heading h1{font-size:var(--font-document-title);line-height:var(--line-document-title);max-width:22ch;text-wrap:balance}.document-heading .lead{max-width:60ch;font-size:var(--font-body)}.document-date{font-size:var(--font-small);font-weight:var(--weight-control);color:var(--text-muted);margin-top:var(--space-small)}
.document-date:empty{display:none}
.legal-layout{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:calc(var(--space-large)*2);align-items:start}
.legal-contents{font-size:var(--font-small);line-height:1.5;position:sticky;top:var(--space-large);border-inline-start:var(--border) solid var(--stroke-color);padding-inline-start:var(--space-medium)}
.legal-contents>strong{font-size:var(--font-control);font-weight:var(--weight-heading)}
.legal-contents ol{padding-left:var(--space-medium);margin-block:var(--space-medium) 0}.legal-contents li{margin-block:calc(var(--space-small)/2)}
.legal-contents a{display:inline-block;padding-block:calc(var(--space-small)/2)}
.prose{max-width:var(--width-prose);overflow-wrap:anywhere}
.prose section,.prose p,.prose ul,.prose ol,.prose address{margin-bottom:var(--space-large)}
.prose h2{font-size:var(--font-prose-heading);line-height:var(--line-prose-heading);letter-spacing:-.025em;margin-block:calc(var(--space-large)*1.5) var(--space-medium);text-wrap:balance}
.prose section:first-child h2,.prose>h2:first-child{margin-top:0}
.prose h3{font-size:var(--font-body);line-height:var(--line-prose-subheading);letter-spacing:-.01em;margin-block:var(--space-large) var(--space-medium)}.prose li{margin-block:var(--space-small)}.prose address{font-style:normal}.prose a{text-decoration:underline}.prose code{font-size:.95em}.prose strong{font-weight:var(--weight-heading)}
.error-panel{min-height:65svh}.error-panel .panel-content{display:grid;gap:var(--space-large);justify-items:start}
.skip-link{position:absolute;left:var(--space-medium);top:var(--space-small);z-index:50;background:var(--neutral);padding:var(--space-medium);transform:translateY(-200%)}.skip-link:focus{transform:none}
@media(max-width:800px){.legal-layout{grid-template-columns:1fr;gap:var(--space-large)}.legal-contents{position:static}.legal-contents ol{columns:2}.contact-layout{gap:var(--space-large);grid-template-columns:1fr}.contact-layout>div:first-child{gap:var(--space-medium)}.direct-email{margin:0}.gallery{gap:var(--space-large)}}
@media(max-width:650px){.floating-nav{padding-inline:calc(var(--space-small)/2)}.front-page .panel-content{padding-top:calc(min(var(--space-large),8vw) + var(--shape-top-clearance))}.panel-content{padding:min(var(--space-large),8vw);padding-bottom:calc(min(var(--space-large),8vw) + var(--slant-depth))}.hero-panel .panel-content,.project-panel .panel-content{grid-template-columns:1fr;gap:var(--space-large)}.hero-text{gap:var(--space-medium)}.studio-wordmark{font-size:18vw}.puzzle-art{max-width:22rem}.studio-hero h1{max-width:13ch}.project-heading h1,.project-heading h2{font-size:clamp(2rem,11vw,4rem)}.project-hero .panel-content{grid-template-columns:1fr}.project-panel:nth-child(even) .project-summary,.project-panel:nth-child(even) .showcase-stage{grid-column:auto;grid-row:auto}.showcase-stage{width:94%;max-width:26rem;margin-top:0}.project-summary{padding-block:0;gap:var(--space-medium)}.project-summary .lead,.project-summary .section-copy{max-width:100%}.gallery{grid-template-columns:1fr;gap:calc(var(--space-large)*2)}.document-links{grid-template-columns:1fr;gap:var(--space-medium)}.document-link{padding-block:var(--space-medium)}.section-heading{margin-bottom:var(--space-large)}.nav-link{font-size:var(--font-small);padding-inline:0;gap:calc(var(--space-small)/2)}.nav-link .icon{width:1rem;height:1rem}.legal-contents ol{columns:1}.form-actions .button{width:100%;padding-inline:var(--space-small)}.prose h2{font-size:var(--font-prose-heading)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;scroll-snap-type:none!important}.page-grid{transition:none}.paper-front,.paper-underlay{transform:none!important}.nav-content>*,.nav-content::after,.language-labels>span{transition:none}.puzzle-tile,.text-link>.icon,.pair-mark>span,.showcase-stage .screenshot,.project-link{transition:none!important;animation:none!important}.project-link{transform:rotate(var(--action-rest-angle))}.project-link:is(:hover,:focus-visible)>.icon{transform:none}.project-link:is(:active,.is-pressed){transform:rotate(var(--action-rest-angle));box-shadow:var(--action-pressed-shadow)}}
@media print{body{background:#fff;color:#000;padding:0;font-size:11pt}.page-grid,.backplate,.floating-nav,.legal-contents,.skip-link{display:none}.panel{background:none!important;min-height:0}.panel-content{padding:0}.legal-layout{display:block}.prose{max-width:none}.document-heading{margin-bottom:1rem}.prose h2{break-after:avoid}a{color:#000}}

/* Keep enlarged navigation on two readable rows. */
@container (width < 16em){
  .nav-link,.nav-link[data-nav-link]{min-height:44px;padding:.125em 0;grid-column:span 4}
  .nav-link[data-nav-link='home'],.nav-link[data-nav-link='overview']{grid-column:1/2;grid-row:1}
  .nav-link[data-nav-link='projects'],.nav-link[data-nav-link='media']{grid-column:2/8;grid-row:1}
  .language-toggle{grid-column:8/9;grid-row:1}
  .nav-link[data-nav-link='legal']{grid-column:1/5;grid-row:2}
  .nav-link[data-nav-link='contact']{grid-column:5/9;grid-row:2}
  .nav-link[data-nav-link='legal']::before{display:none}
}

/* Keep each front-page silhouette visible above the floating navigation.
   Oversized text and long forms remain scrollable rather than being clipped. */
@media screen {
  .front-page .panel-fit{display:block;height:100%;min-height:0;min-width:0;padding:var(--panel-inset-top) var(--panel-inset-right) var(--panel-inset-bottom) var(--panel-inset-left)}
  .front-page .panel-fit>.panel-content{height:100%;max-height:100%;min-height:0;overflow:auto;scrollbar-width:thin;align-content:safe center;padding:0;gap:var(--space-medium) var(--space-large)}
  .shapes-ready .front-page .panel-fit>.panel-content:not(.needs-scroll){overflow:visible}
  .front-page .panel-fit>.panel-content.needs-scroll{overflow:auto}
  .front-page .contact-panel .panel-fit>.panel-content.needs-scroll{padding-block-end:var(--space-medium)}
  .front-page .panel-content>div:not(.showcase-stage):not(.puzzle-art):not(.gallery){min-width:0;max-width:100%}
  .front-page .studio-wordmark{font-size:var(--font-wordmark)}
  .front-page .hero-text{gap:var(--space-medium)}
  .front-page .studio-hero h1{font-size:var(--font-front-title)}
  .front-page .puzzle-art{max-width:min(100%,31svh)}
  .front-page .project-heading h1,.front-page .project-heading h2{font-size:var(--font-project-title);margin-top:var(--space-small)}
  .front-page .project-index>span:first-child{font-size:1rem;padding-bottom:0}
  .front-page .project-summary{padding-block:0;gap:var(--space-medium)}
  .front-page .project-summary .lead,.front-page .project-summary .section-copy{font-size:var(--font-body)}
  .front-page .showcase-stage{max-width:min(100%,calc(var(--section-height)*.34));padding-block:0;margin-top:0}
  .front-page .showcase-stage figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .front-page .showcase-stage .shot-secondary{margin-top:var(--space-large)}
  .front-page .section-heading h2,.front-page .contact-layout h2{font-size:var(--font-section-title);line-height:1.15;text-wrap:balance}
  .front-page .section-heading{gap:var(--space-small);margin-bottom:var(--space-medium)}
  .front-page .gallery{gap:var(--space-medium);grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
  .front-page .gallery .screenshot{max-width:min(100%,calc(var(--section-height)*.19))}
  .front-page .media-panel .panel-content{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}
  .front-page .breadcrumb{margin-bottom:var(--space-small)}
  .front-page .project-kicker{display:none}
  .front-page .contact-layout{gap:var(--space-large)}
  .front-page .contact-layout>div:first-child{gap:var(--space-medium)}
  .front-page .contact-form textarea{height:6rem;min-height:6rem}
  .front-page .form-privacy{margin:0}
}
/* Stack before the title and summary columns become narrow on tablets. */
@media screen and (max-width:800px){
  .front-page .project-panel .panel-content,.front-page .project-hero .panel-content{grid-template-columns:1fr;gap:var(--space-medium)}
  .front-page .project-heading,.front-page .project-summary,.front-page .showcase-stage,.front-page .project-panel:nth-child(even) .project-heading,.front-page .project-panel:nth-child(even) .project-summary,.front-page .project-panel:nth-child(even) .showcase-stage{grid-column:1;grid-row:auto}
  .front-page .project-heading,.front-page .project-summary{align-self:auto}
  .front-page .showcase-stage,.front-page .project-hero .showcase-stage{max-width:min(100%,calc(var(--section-height)*.24))}
  .front-page .project-summary .section-copy,.front-page .project-summary .lead{max-width:40ch}
}
@media screen and (max-width:650px){.front-page .media-panel .panel-content{grid-template-columns:1fr}.front-page .puzzle-art{max-width:22svh}.front-page .project-hero .project-summary{gap:var(--space-small)}}
@media screen and (max-height:760px){
  .front-page .hero-text{gap:var(--space-small)}
  .front-page .studio-wordmark{padding-bottom:var(--space-small)}
  .front-page .showcase-stage{max-width:min(100%,calc(var(--section-height)*.30))}
  .front-page .contact-form{gap:var(--space-small)}
  .front-page .contact-form textarea{height:5.5rem;min-height:5.5rem}
}
/* Give the headline more width before a short desktop needs to scroll. */
@media screen and (min-width:801px) and (max-height:850px){
  .studio-hero .panel-fit>.panel-content{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
  .front-page .studio-hero .hero-text{max-width:none;gap:var(--space-small)}
  .front-page .studio-hero .studio-wordmark{padding-bottom:var(--space-small)}
  .front-page .studio-hero h1{max-width:20ch}
}
/* On very short desktops, share the text row and keep the artwork in the wordmark row. */
@media screen and (min-width:801px) and (max-height:700px){
  .studio-hero .panel-fit>.panel-content{row-gap:var(--space-small)}
  .front-page .studio-hero .studio-wordmark{grid-row:1}
  .front-page .studio-hero .puzzle-art{grid-column:2;grid-row:1;max-width:min(100%,18svh);justify-self:end}
  .front-page .studio-hero .hero-text{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-large)}
  .studio-hero .hero-text .eyebrow{grid-column:1/-1}
  .front-page .studio-hero h1{grid-column:1;grid-row:2/4;align-self:center;max-width:none}
  .studio-hero .hero-text .lead{grid-column:2;grid-row:2}
  .studio-hero .hero-text .project-action{grid-column:2;grid-row:3}
}
@media screen and (min-width:801px) and (max-height:560px){
  .front-page .studio-hero .puzzle-art{max-width:min(100%,13svh)}
  .studio-hero .panel-fit>.panel-content,.front-page .studio-hero .hero-text{row-gap:calc(var(--space-small)/2)}
  .studio-hero .hero-text .eyebrow{grid-column:1;grid-row:1}
  .studio-hero .hero-text .lead{grid-row:1/3}
}
@media screen and (min-width:801px) and (max-width:1000px) and (max-height:560px){
  .front-page .studio-hero .hero-text{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:var(--space-medium)}
}
@media screen and (max-width:800px) and (max-height:760px){.front-page .showcase-stage,.front-page .project-hero .showcase-stage{max-width:min(100%,calc(var(--section-height)*.21))}}
@media screen and (min-width:801px) and (max-height:760px){
  .front-page .contact-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-small) var(--space-medium)}
  .front-page .contact-form>*{grid-column:1/-1}
  .front-page .contact-form .email-field{grid-column:1;grid-row:1}
  .front-page .contact-form .topic-field{grid-column:2;grid-row:1}
}
@media print{.front-page .panel{height:auto}}

.panel[data-theme="legal"] .document-link{border-color:color-mix(in srgb,var(--secondary-dark) 35%,transparent)}
.panel[data-theme="legal"] .document-link>.icon{color:var(--secondary-dark)}
.panel[data-theme="legal"] .button{background:var(--secondary-dark)}
.panel[data-theme="legal"] .prose a{color:var(--secondary-dark)}
.panel[data-theme="legal"] .document-heading{border-bottom:var(--border) solid var(--stroke-color);border-color:var(--field-border);padding-bottom:var(--space-large)}
.panel[data-theme="legal"] .legal-contents{border-color:var(--field-border)}
@media screen and (max-width:650px){
  html,body{overflow-x:clip}
  body{padding-inline:0}
  .front-page .panel{transform:none;border-radius:0}
  .panel>.backplate{left:calc(var(--mobile-paper-bleed)*-1);width:calc(100% + var(--mobile-paper-bleed)*2)}
}

/* Pair an upright phone capture with a landscape desktop behind it. */
@media screen {
  .front-page .showcase-devices{max-width:min(100%,calc(var(--section-height)*.68))}
  .showcase-devices .shot-primary{grid-column:1/11;grid-row:1;align-self:center;z-index:1}
  .front-page .showcase-devices .shot-secondary{grid-column:9/13;grid-row:1;margin-top:var(--space-large);z-index:2}
  .showcase-devices .shot-secondary .screenshot-frame{background:var(--secondary-dark)}
}
/* At enlarged text sizes, give the link label room inside a narrow summary. */
@container (width < 12em){
  .project-link{padding-inline:var(--space-small);gap:var(--space-small)}
  .project-link .pair-mark{display:none}
}

/* Short or enlarged-text panels keep navigation targets without spending the reading area on oversized chevrons. */
.front-page .panel[data-compact] .panel-jump{width:44px;height:44px}
.front-page .panel[data-compact] .panel-jump>.icon{width:24px;height:24px}
.front-page .studio-hero .panel-content.tight-content{row-gap:calc(var(--space-small)/2)}
.front-page .studio-hero .panel-content.tight-content .hero-text{gap:calc(var(--space-small)/2)}

.front-page .studio-hero[data-compact] .studio-wordmark{font-size:min(var(--font-wordmark),20vw);white-space:nowrap}