@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 600; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/Archivo-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/GeistMono-wght-latin.woff2") format("woff2"); }

:root {
  --night: #0B0B0A; --night-2: #151513; --night-3: #1E1E1B; --beige: #E8E6DF; --beige-2: #A3A098; --beige-3: #6E6C66;
  --paper: #F4F3EE; --card: #FFFFFF; --well: #F0EFEA; --ink: #1B1A17; --ink-2: #605E58; --ink-3: #8E8C85;
  --ink-rgb: 27 26 23; --beige-rgb: 232 230 223;
  --sky: var(--ink); --sky-ink: var(--ink);  
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  --nav-h: 64px; --gutter: 24px; --max: 1280px; --radius: 16px; --gap: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --line: 1px solid rgb(var(--beige-rgb) / .12);
  --line-ink: 1px solid rgb(var(--ink-rgb) / .10);
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --nav-h: 56px; --gutter: 16px; --gap: 20px; --radius: 12px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; font-synthesis: none; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--beige); font-family: var(--text); font-size: 17px; line-height: 1.6;
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (max-width: 760px) { body { font-size: 16px; } }
img, svg, canvas { display: block; max-width: 100%; height: auto; }
a { color: var(--beige); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; text-decoration-color: rgb(var(--beige-rgb) / .5); }
@media (hover: hover) and (pointer: fine) { a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; } }
:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b { font-weight: 500; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--night-2); padding: 10px 14px; }
.skip:focus { top: 8px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }


.giant { font-family: var(--display); font-stretch: 68%; font-weight: 600; font-size: clamp(60px, 11.4vw, 176px); line-height: .9; letter-spacing: -0.005em; color: var(--paper); }
.big { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(40px, 5.6vw, 84px); line-height: .96; letter-spacing: -0.015em; color: var(--paper); }
.idx { font-family: var(--mono); font-size: 14px; color: var(--beige-2); }


.grain::before { content: ""; position: absolute; inset: 0; background: url("img/grain-256.webp") repeat; background-size: 256px 256px; opacity: .11; mix-blend-mode: overlay; pointer-events: none; z-index: 1; }


.pre { position: fixed; inset: 0; z-index: 90; background: var(--night); color: var(--paper); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--gutter) 24px; transition: transform .9s var(--ease-in-out); }
.pre.is-done { transform: translateY(-101%); }
.pre .pre-n { font-family: var(--display); font-stretch: 68%; font-weight: 600; font-size: clamp(120px, 22vw, 340px); line-height: .82; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pre .pre-t { font-family: var(--mono); font-size: 14px; color: var(--beige-2); padding-bottom: 14px; }


.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 40; color: var(--paper);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease); }
.nav.is-solid { background: rgb(11 11 10 / .86); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgb(var(--beige-rgb) / .08); }
.nav.is-hidden { transform: translateY(-100%); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-name { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: 20px; letter-spacing: 0; color: var(--paper); text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.btn) { color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 0; position: relative; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; } }
.btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--paper); color: var(--ink);
  text-decoration: none; font-weight: 500; font-size: 15px; transition: background-color .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover { color: var(--ink); background: #FFFFFF; transform: translateY(-1px); } }
.menu-btn { display: none; height: 38px; padding: 0 14px; border: 1px solid rgb(var(--beige-rgb) / .3); border-radius: 999px; font-size: 14px; font-weight: 500; background: rgb(11 11 10 / .5); color: var(--paper); }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav .phone-actions { display: flex; align-items: center; gap: 10px; }
  .menu-btn { display: inline-flex; align-items: center; }
}
.phone-actions { display: none; }
dialog.menu { border: 0; padding: 0; margin: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: var(--night); color: var(--paper); }
dialog.menu::backdrop { background: transparent; }
dialog.menu .menu-inner { padding: calc(var(--nav-h) + 16px) var(--gutter) 32px; display: flex; flex-direction: column; height: 100%; }
dialog.menu li a { display: block; font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: 56px; line-height: 1; color: var(--paper); text-decoration: none; padding: 6px 0; }
dialog.menu .menu-foot { margin-top: auto; font-size: 16px; display: flex; flex-direction: column; gap: 10px; }
dialog.menu .menu-close { position: fixed; top: 9px; right: var(--gutter); height: 38px; padding: 0 14px; border: 1px solid rgb(var(--beige-rgb) / .3); border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--night); }


.hero.opening { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); color: var(--paper); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 28px; z-index: 0; -webkit-touch-callout: none; }
.opening-photo { position: absolute; inset: 0; }
.opening-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(calc(1 + .14 * var(--p, 0))); transform-origin: 50% 40%; opacity: calc(1 - .5 * var(--p, 0)); will-change: transform; }
.opening-photo::before { content: ""; position: absolute; inset: 0; background: url("img/grain-256.webp") repeat; background-size: 256px 256px; opacity: .18; mix-blend-mode: overlay; z-index: 1; pointer-events: none; }
.opening-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 11 10 / .5) 0%, rgb(11 11 10 / .04) 26%, rgb(11 11 10 / .34) 54%, rgb(11 11 10 / .92) 100%); }
.hero-wrap { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 100%); transform: translateY(calc(var(--p, 0) * -50px)); opacity: calc(1 - 1.35 * var(--p, 0)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: end; width: min(100%, var(--max)); margin: 0 auto 26px; }
.hero .lede { font-size: 24px; line-height: 1.3; max-width: 32ch; letter-spacing: -0.012em; font-weight: 500; color: var(--paper); }
.hero .lede-2 { font-size: 17px; line-height: 1.5; color: #C9C6BD; max-width: 54ch; margin-top: 12px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; font-size: 15px; font-weight: 500; }
.hero-links a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgb(244 243 238 / .4); padding-bottom: 2px; transition: border-color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hero-links a:hover { color: var(--paper); border-bottom-color: var(--paper); } }
.hero-side { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.now { font-family: var(--mono); font-size: 14px; color: var(--beige-2); display: flex; gap: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-time { color: var(--paper); min-width: 8.2ch; text-align: left; }
.now-time:empty { display: none; }
.hint { font-size: 14px; color: var(--beige-2); transition: opacity .6s var(--ease); }
.hint.is-off { opacity: 0; }
html.rm .hint, html:not(.js) .hint { display: none; }
.hero-name { -webkit-user-select: none; user-select: none; font-family: var(--display); font-stretch: 66%; font-weight: 600; font-size: clamp(76px, 15.6vw, 232px); line-height: .84; letter-spacing: -0.005em; color: var(--paper); margin: 0 0 0 -0.02em; display: flex; justify-content: space-between; white-space: nowrap; }
.hero-name .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em; margin: 0 -.02em; }
.hero-name .w > span { display: inline-block; }
.page { position: relative; z-index: 2; background: var(--night); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgb(0 0 0 / .5); }
@media (max-width: 760px) {
  .hero.opening { padding-bottom: 22px; min-height: 0; }
  .opening-photo img { object-position: 50% 26%; }
  .hero-name { font-size: clamp(64px, 19vw, 110px); white-space: normal; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 .2em; margin-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; row-gap: 16px; margin-bottom: 18px; }
  .hero .lede { font-size: 20px; }
  .hero .lede-2 { font-size: 16px; }
  .hero-side { justify-self: start; text-align: left; align-items: flex-start; }
  .page { border-radius: 20px 20px 0 0; }
}


.scene { position: relative; padding: 104px 0 88px; overflow: hidden; }
.scene.paper { background: var(--paper); color: var(--ink); }
.scene.paper a { color: var(--ink); text-decoration-color: rgb(var(--ink-rgb) / .4); }
@media (hover: hover) and (pointer: fine) { .scene.paper a:hover { color: var(--sky-ink); text-decoration-color: var(--sky-ink); } }
.scene.paper .giant, .scene.paper .big { color: var(--ink); }
.scene.paper .idx { color: var(--ink-3); }
.scene-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .16; transform: translateY(var(--fy, 0px)) scale(1.12); will-change: transform; }
.scene-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgb(11 11 10 / .35) 30%, rgb(11 11 10 / .45) 70%, var(--night) 100%); }
.scene > .wrap { position: relative; z-index: 2; }
.scene-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); margin-bottom: 56px; }
.scene-head .idx { padding-bottom: 10px; }
.copy { max-width: 62ch; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.6; }
.copy p { color: var(--beige); }
.scene.paper .copy p { color: var(--ink); }
.copy .more { font-size: 15px; color: var(--beige-2); }
.scene.paper .copy .more { color: var(--ink-2); }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: 28px; align-items: start; }
.two > .big { max-width: 14ch; }
.cap { font-size: 14px; line-height: 1.5; color: var(--beige-2); max-width: 74ch; margin-top: 18px; }
.cap b { color: var(--beige); font-weight: 500; }
.scene.paper .cap { color: var(--ink-2); } .scene.paper .cap b { color: var(--ink); }
.stack > * + * { margin-top: var(--gap); }
@media (max-width: 760px) {
  .scene { padding: 76px 0 60px; }
  .scene-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .two { grid-template-columns: 1fr; }
}


.statement { display: flex; flex-wrap: wrap; align-items: center; gap: .06em .2em; margin-bottom: 44px; }
.inline-photo { display: block; flex: none; width: calc(.34em + 1.5em * var(--g, 0)); height: calc(.46em + 2em * var(--g, 0)); border-radius: .03em; overflow: hidden; background: #2A2A28; box-shadow: 0 .2em .6em -.2em rgb(0 0 0 / .9); }
.inline-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
html.rm .inline-photo, html:not(.js) .inline-photo { --g: 1; }
@media (max-width: 760px) { .statement { gap: .04em .16em; margin-bottom: 36px; } }


.ten { font-family: var(--display); font-stretch: 86%; font-weight: 600; font-size: clamp(30px, 4vw, 58px); line-height: 1.04; letter-spacing: -0.02em; max-width: 22ch; margin-bottom: 48px; }
@media (max-width: 760px) { .ten { font-size: 30px; margin-bottom: 40px; max-width: none; } }


.panel { background: var(--night-2); border: var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .5s var(--ease), border-color .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .panel:hover { transform: translateY(-2px); border-color: rgb(var(--beige-rgb) / .22); } }
.panel .well { padding: 22px; background: var(--night-3); }
.panel .cap { padding: 14px 20px 16px; margin: 0; border-top: var(--line); }
.card { background: var(--card); border: var(--line-ink); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .04), 0 12px 32px -12px rgb(var(--ink-rgb) / .14); transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-2px); } }
.card .well { background: var(--well); padding: 22px; }
.card .cap { padding: 14px 20px 16px; margin: 0; border-top: var(--line-ink); color: var(--ink-2); } .card .cap b { color: var(--ink); }
.card.photo, .panel.photo { padding: 0; }
.card.photo img, .panel.photo img { width: 100%; height: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-2.wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 760px) { .grid-2, .grid-2.wide { grid-template-columns: 1fr; } .panel .well, .card .well { padding: 16px; } }


.page-one { max-width: 820px; }
.page-one a { display: block; background: var(--card); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); border-radius: 4px; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .page-one a:hover { transform: translateY(-6px); } }
.page-one img { border-radius: 4px; width: 100%; height: auto; }


.pages-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: end; max-width: 960px; }
.pages-two a { display: block; background: var(--card); box-shadow: 0 30px 70px -28px rgb(0 0 0 / .95), 0 0 0 1px rgb(var(--beige-rgb) / .08); border-radius: 3px; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pages-two a:hover { transform: translateY(-6px); } }
.pages-two img { border-radius: 3px; width: 100%; height: auto; }
@media (max-width: 760px) { .pages-two { gap: 12px; } }


.canvas { position: relative; background-color: #121211; border-radius: 12px; overflow: hidden; border: var(--line);
  background-image: radial-gradient(rgb(var(--beige-rgb) / .14) 1px, transparent 1px); background-size: 18px 18px; }
.canvas svg { width: 100%; height: auto; display: block; }
.canvas text { font-family: var(--text); font-size: 15px; fill: var(--beige); }
.canvas .mark { font-family: var(--mono); font-size: 14px; fill: #FFFFFF; font-weight: 500; }
.canvas .edge { fill: none; stroke: rgb(var(--beige-rgb) / .5); stroke-width: 1.5; }
.canvas .node { stroke: rgb(255 255 255 / .14); stroke-width: 1; }
.canvas marker path { fill: #A3A098; }
html.js .canvas .edge { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 45ms + 200ms); }
html.js .canvas.in .edge, html.js.rm .canvas .edge { stroke-dashoffset: 0; }
html.js .canvas .nd { opacity: 0; transform: scale(.7); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--c, 0) * 70ms); }
html.js .canvas.in .nd, html.js.rm .canvas .nd { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .canvas.in:hover .edge { stroke-dasharray: .035 .025; animation: flow 2.4s linear infinite; } }
html.rm .canvas .edge { animation: none !important; stroke-dasharray: none; }
@keyframes flow { to { stroke-dashoffset: -1; } }
@media (max-width: 760px) { .canvas { overflow-x: auto; } .canvas svg { min-width: 760px; } }
.window { border-radius: 12px; overflow: hidden; background: #0E0F10; border: var(--line); }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #1A1B1E; border-bottom: 1px solid rgb(255 255 255 / .06); }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3A3B3F; }
.window-bar .window-title { font-family: var(--mono); font-size: 14px; color: #8B8C88; margin-left: 8px; }
.term { background: #0E0F10; color: #E6E6E1; font-family: var(--mono); font-size: 14px; line-height: 1.6; padding: 22px 24px; min-height: 200px; white-space: pre-wrap; word-break: break-all; }
.term .dim { color: #8B8C88; }
.term .ok { color: #7CD992; }
.term .ln { display: block; }
html.js .term .ln { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
html.js .term.in .ln, html.js.rm .term .ln { opacity: 1; transform: none; }
.term .cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: #7CD992; margin-left: 4px; animation: blink 1s steps(2, start) infinite; }
html.rm .term .cursor { animation: none; }
@keyframes blink { to { visibility: hidden; } }
.switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-bottom: var(--line); }
.switch button { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--beige-2); border: 1px solid transparent; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .switch button:hover { border-color: rgb(var(--beige-rgb) / .3); color: var(--paper); } }
.switch button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.cap[hidden], .canvas[hidden] { display: none; }


.scene.dots { background-image: radial-gradient(rgb(var(--beige-rgb) / .10) 1px, transparent 1px); background-size: 20px 20px; }
.product { position: relative; perspective: 1400px; padding-bottom: 10%; margin-top: 48px; }
.product-main { transform: rotateX(calc((1 - var(--t, 0)) * 16deg)) translateY(calc((1 - var(--t, 0)) * 60px)); opacity: calc(.15 + .85 * var(--t, 0)); transform-origin: 50% 100%; border-radius: 14px; overflow: hidden; background: #1A1C22; box-shadow: 0 50px 90px -30px rgb(0 0 0 / .95), 0 0 0 1px rgb(var(--beige-rgb) / .14); }
.product-main img { width: 100%; height: auto; display: block; }
.product-side { position: absolute; right: 0; bottom: 0; width: 44%; border-radius: 12px; overflow: hidden; background: #1A1C22; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .95), 0 0 0 1px rgb(var(--beige-rgb) / .16); }
.product-side img { width: 100%; height: auto; display: block; }
html.rm .product-main, html:not(.js) .product-main { --t: 1; }
@media (max-width: 760px) { .product { padding-bottom: 0; margin-top: 32px; } .product-side { position: static; width: 100%; margin-top: 14px; } }

.plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.plates img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1); transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .plates img:hover { transform: translateY(-4px); } }
@media (max-width: 760px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }


.gh-num { font-family: var(--display); font-stretch: 68%; font-weight: 600; font-size: clamp(88px, 15vw, 220px); line-height: .85; letter-spacing: -0.005em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gh-line { font-size: 17px; color: var(--ink-2); margin: 14px 0 36px; max-width: 54ch; }
.gh { overflow-x: auto; }
.gh svg { width: 100%; max-width: 100%; height: auto; min-width: 640px; }
.gh .lvl0 { fill: rgb(var(--ink-rgb) / .07); } .gh .lvl1 { fill: #BBD3F8; } .gh .lvl2 { fill: #7FAAEF; } .gh .lvl3 { fill: #3F7FE6; } .gh .lvl4 { fill: #1B5FC4; }
.gh text { font-family: var(--mono); font-size: 14px; fill: var(--ink-3); }
html.js .gh rect { opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(var(--w, 0) * 14ms); }
html.js .gh.in rect, html.js.rm .gh rect { opacity: 1; }
.gh-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--ink-2); margin-top: 14px; font-family: var(--mono); }


.works { border-top: var(--line); }
.work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); padding: 40px 0; border-bottom: var(--line); align-items: start; }
.work-pic { display: block; border-radius: 12px; overflow: hidden; border: var(--line); background: var(--night-2); }
.work-pic img { width: 100%; height: auto; display: block; }
.work-n { font-family: var(--mono); font-size: 14px; color: var(--beige-2); margin-bottom: 14px; }
.work h3 { font-family: var(--display); font-stretch: 84%; font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 14px; color: var(--paper); }
.work p { font-size: 16px; line-height: 1.55; color: var(--beige-2); max-width: 44ch; }
.work-fig { margin-top: 22px; font-size: 15px; color: var(--beige-2); }
.work-fig b { display: inline-block; font-family: var(--display); font-stretch: 80%; font-size: 26px; font-weight: 600; color: var(--paper); background: var(--night-3); padding: 4px 10px; border-radius: 8px; margin-right: 10px; }
@media (max-width: 760px) { .work { grid-template-columns: 1fr; padding: 26px 0; } .work h3 { font-size: 28px; } }
.mass { margin: 56px 0 0; }
.marquee { overflow: hidden; padding: 14px 0 0; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.track { display: flex; gap: 14px; width: max-content; padding: 0 14px; }
html.js .track { animation: marquee var(--dur, 70s) linear infinite; }
html.js .marquee[data-reverse] .track { animation-direction: reverse; }
html.rm .track { animation-play-state: paused; } @media (hover: hover) and (pointer: fine) { .marquee:hover .track { animation-play-state: paused; } }
html.js [data-gallery] .marquee { transform: translateX(-60px); opacity: 0; transition: transform 1.1s var(--ease), opacity .9s var(--ease); }
html.js [data-gallery] .marquee[data-reverse] { transform: translateX(60px); }
html.js [data-gallery].in .marquee, html.js.rm [data-gallery] .marquee { transform: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
.g-item { position: relative; display: block; flex: none; height: 220px; border-radius: 10px; overflow: hidden; background: var(--night-2); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.g-item img { height: 100%; width: auto; max-width: none; display: block; }
@media (hover: hover) and (pointer: fine) { .g-item:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .2), 0 20px 40px -16px rgb(0 0 0 / .9); } }
.g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 14px; line-height: 1.3; color: #FFFFFF; background: rgb(11 11 10 / .78); transform: translateY(100%); transition: transform .4s var(--ease); }
.g-item:focus-visible .g-cap { transform: none; } @media (hover: hover) and (pointer: fine) { .g-item:hover .g-cap { transform: none; } }
.mass .cap { padding: 18px var(--gutter) 0; }
@media (max-width: 760px) { .g-item { height: 150px; } .g-cap { display: none; } }
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.concepts a { display: block; border-radius: 10px; overflow: hidden; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1), 0 20px 40px -20px rgb(0 0 0 / .9); transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .concepts a:hover { transform: translateY(-4px); } }
.concepts img { width: 100%; height: auto; }
.concepts .mail-cap { display: block; padding: 10px 12px 12px; font-size: 14px; line-height: 1.4; color: var(--ink-2); border-top: var(--line-ink); }
.concepts .mail-cap b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .concepts { grid-template-columns: 1fr; gap: 14px; } }


.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: 24px; align-items: start; }
.about .card.photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--gap); margin-top: 10px; font-size: 15px; line-height: 1.5; max-width: 60ch; color: var(--ink); }
.facts div span { display: block; color: var(--ink-2); }
.desk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); row-gap: 24px; align-items: center; margin-top: 88px; }
.desk .card.photo { max-width: 520px; justify-self: end; }
.desk .card.photo img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 760px) { .about, .desk, .facts { grid-template-columns: 1fr; } .desk { margin-top: 48px; } .desk .card.photo { justify-self: start; } }


.resume { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); row-gap: 24px; align-items: center; }
.resume .page-img { display: block; border-radius: 4px; overflow: hidden; background: var(--card); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); max-width: 440px; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .resume .page-img:hover { transform: translateY(-6px); } }
.resume .page-img img { width: 100%; height: auto; }
.resume .links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 16px; }
@media (max-width: 760px) { .resume { grid-template-columns: 1fr; } }


[data-float] > img { transform: translateY(var(--fy, 0px)) scale(1.12); transform-origin: 50% 50%; will-change: transform; }
html.rm [data-float] > img, html:not(.js) [data-float] > img { transform: none; }


.closing { position: relative; background: var(--night); color: var(--beige); overflow: hidden; -webkit-touch-callout: none; border-top: var(--line); }
.closing-ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.closing-ground img, .closing-ground canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.closing-ground img { opacity: .18; filter: invert(1); }
.closing-ground canvas { opacity: 0; transition: opacity .9s var(--ease); }
.closing-ground.is-live img { opacity: 0; }
.closing-ground.is-live canvas { opacity: .4; }
.closing-ground::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 48% 70% at 24% 50%, rgb(11 11 10 / .8) 0%, rgb(11 11 10 / .35) 60%, rgb(11 11 10 / 0) 100%), linear-gradient(180deg, var(--night) 0%, rgb(11 11 10 / .2) 30%, rgb(11 11 10 / .25) 70%, var(--night) 100%); }
.closing .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--gap); align-items: center; padding: 112px 0; }
.closing .giant { margin-bottom: 26px; font-size: clamp(52px, 8.4vw, 132px); }
.closing p { font-size: 18px; line-height: 1.5; max-width: 44ch; color: var(--beige); }
.closing p + p { margin-top: 10px; }
.closing .copy-btn { color: var(--beige-2); font-size: 14px; padding: 8px 0; margin-top: 6px; }
.closing .now-dark { margin-top: 26px; color: var(--beige-2); font-size: 14px; }
.closing .now-dark .now-time { color: var(--beige); }
.closing .hint { margin-top: 6px; }
.closing .photo { border-radius: var(--radius); overflow: hidden; justify-self: end; width: min(100%, 460px); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 1); }
.closing .photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 760px) {
  .closing .wrap { grid-template-columns: 1fr; row-gap: 28px; padding: 64px 0; }
  .closing .photo { justify-self: start; width: min(100%, 360px); }
}


.footer { background: var(--night); color: var(--beige); overflow: hidden; border-top: var(--line); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 30px; padding: 44px 0 10px; }
.footer-nav a { font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: clamp(32px, 4.2vw, 56px); line-height: 1; color: var(--beige); text-decoration: none; transition: color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { color: #FFFFFF; } }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding: 22px 0 8px; font-size: 15px; }
.footer-small { font-size: 14px; line-height: 1.5; color: var(--beige-2); max-width: 78ch; display: flex; flex-direction: column; gap: 8px; padding: 12px 0 24px; }
.footer-small p { margin: 0; }
.footer-small details { color: var(--beige-2); }
.footer-small summary { cursor: pointer; }
.tie { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; column-gap: 12px; font-size: 14px; margin: 12px 0 4px; }
.tie-row { display: contents; }
.tie-row > span { padding: 5px 0; border-bottom: 1px solid rgb(232 230 223 / .14); }
.tie-row.head > span { color: var(--beige-2); }
.tie-row .c { text-align: right; white-space: nowrap; font-family: var(--mono); }
.refusal { color: var(--beige-2); }
.footer-name { margin: 8px calc(-1 * var(--gutter)) -1vh; color: var(--beige); }
.footer-name svg { width: 100%; height: auto; }
html.js .footer-name svg { transform: translateY(28%); opacity: 0; transition: transform 1.1s var(--ease), opacity .9s var(--ease); }
html.js .footer-name.in svg, html.js.rm .footer-name svg { transform: none; opacity: 1; }

@media (max-width: 760px) { .tie { grid-template-columns: 1fr; } .tie-row.head { display: none; } .tie-row > span { border-bottom: 0; padding: 0; } .tie-row > span:first-child { padding-top: 12px; color: var(--beige); font-weight: 500; } .notes .tie-row > span:first-child { color: var(--ink); } .tie-row .c { text-align: left; white-space: normal; padding: 2px 0 12px; border-bottom: 1px solid rgb(var(--beige-rgb) / .14); } .notes .tie-row .c { border-bottom-color: rgb(var(--ink-rgb) / .12); } }


dialog.lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 96vh; overflow: visible; }
dialog.lb::backdrop { background: rgb(11 11 10 / .9); }
dialog.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 96vh; }
dialog.lb img { max-height: 86vh; max-width: min(96vw, 1100px); width: auto; height: auto; border-radius: 4px; background: var(--card); }
dialog.lb figcaption { color: var(--beige); font-size: 14px; text-align: center; max-width: 70ch; }
dialog.lb figcaption:empty { display: none; }
dialog.lb .lb-close { position: fixed; top: 12px; right: 12px; color: var(--beige); background: var(--night); padding: 10px 14px; border-radius: 999px; font-size: 14px; border: 1px solid rgb(232 230 223 / .2); }
html.js dialog.lb[open] figure { animation: lb-in .4s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97) translateY(8px); } }
dialog.lb .lb-pan { display: flex; justify-content: center; min-width: 0; max-width: 100%; }

@media (max-width: 760px) {
  dialog.lb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; overflow: auto; overscroll-behavior: contain; background: var(--night); }
  dialog.lb figure { min-height: 100dvh; max-height: none; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 24px; }
  dialog.lb .lb-pan { display: block; width: 100%; }
  dialog.lb:not(.is-wide) img { display: block; width: 100%; max-width: none; max-height: none; height: auto; border-radius: 0; }
  dialog.lb.is-wide .lb-pan { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100vw; }
  dialog.lb.is-wide img { display: block; max-width: none; width: auto; height: min(64dvh, 560px); border-radius: 0; }
  dialog.lb figcaption { padding: 0 var(--gutter); }
  dialog.lb .lb-close { min-height: 44px; top: max(12px, env(safe-area-inset-top)); z-index: 2; }
}


.modine-page { background: var(--paper); color: var(--ink); }
.modine-page a { color: var(--sky-ink); text-decoration-color: rgb(var(--ink-rgb) / .3); }
@media (hover: hover) and (pointer: fine) { .modine-page a:hover { color: var(--sky); } }
.band { padding: 40px 0 24px; }
.band-a { padding-top: calc(var(--nav-h) + 56px); display: grid; grid-template-columns: minmax(0, 1fr) 309px; column-gap: var(--gap); align-items: end; padding-bottom: 48px; }
.band-a .hero-cover { justify-self: end; width: 309px; box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .14), 0 24px 32px -8px rgb(var(--ink-rgb) / .12); border-radius: 3px; }
.band-a .hero-cover img { border-radius: 3px; }
.band-a .lede { font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; max-width: 32ch; }
.band-a .dateline { font-size: 14px; color: var(--ink-2); margin-top: 16px; font-family: var(--mono); }
.band-a h1 { font-family: var(--display); font-stretch: 84%; font-weight: 600; font-size: 60px; line-height: 1.0; letter-spacing: -0.02em; max-width: 20ch; margin-bottom: 24px; }
.takeaways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; }
.takeaways p { font-size: 16px; }
.takeaways .lead { font-size: 21px; line-height: 1.3; letter-spacing: -0.012em; margin-bottom: 10px; font-weight: 500; }
.band-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
.case-text { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; min-width: 0; }
.case-text p { font-size: 17px; line-height: 1.55; }
.case-more { font-size: 16px; }
.asof { font-size: 14px; color: var(--ink-2); }
.exhibit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
figcaption { font-size: 15px; line-height: 1.45; }
.fig-title { display: block; color: var(--ink); }
.source { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; min-height: 2.9em; transition: opacity .2s var(--ease); }
.source.swapping { opacity: 0; }
.note { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.page-img { background: var(--card); border-radius: 3px; box-shadow: 0 0 0 .5px rgb(var(--ink-rgb) / .14), 0 24px 32px -8px rgb(var(--ink-rgb) / .10); }
.page-img img { border-radius: 3px; }
a.filed { color: var(--sky-ink); text-decoration: underline; text-underline-offset: .14em; }
.compliance { font-size: 14px; color: var(--ink-2); max-width: 78ch; line-height: 1.5; padding: 24px 0 56px; }
.band h2.plain { font-family: var(--display); font-stretch: 86%; font-weight: 600; font-size: 36px; line-height: 1.08; letter-spacing: -0.02em; max-width: 28ch; margin-bottom: 18px; }
.pages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pages a { display: block; }
.chart svg text { font-family: var(--text); fill: var(--ink); }
.chart .rule { stroke: var(--ink); stroke-width: 1; }
.chart .line { stroke: var(--ink); stroke-width: 1.25; fill: none; stroke-linejoin: round; }
.chart .line-lit { stroke: var(--sky); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .mark { stroke: var(--ink); stroke-width: 1.5; }
.chart .mark-lit { stroke: var(--sky); stroke-width: 2; }
.chart .mark-open { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.chart .lbl { font-size: 14px; }
.chart-narrow .lbl, .chart-narrow .val { font-size: 15px; }
.chart .val { font-size: 14px; }
.chart .val-lit { font-size: 14px; fill: var(--sky-ink); font-weight: 500; }
.chart-wide { display: block; } .chart-narrow { display: none; }
@media (max-width: 760px) { .chart-wide { display: none; } .chart-narrow { display: block; } }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ledger th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px 12px 6px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .25); }
.ledger td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .12); }
.modine-page .nav a:not(.btn), .modine-page .nav-name { color: var(--paper); text-decoration: none; }
.modine-page .nav .btn { color: var(--ink); }
.modine-page dialog.menu a { color: var(--paper); }
.modine-page .closing, .modine-page .footer { color: var(--beige); }
.modine-page .closing a, .modine-page .footer a { color: var(--beige); }
@media (max-width: 760px) {
  .band-a { grid-template-columns: 1fr; padding-bottom: 32px; }
  
  .band-a .hero-cover { justify-self: end; width: min(54vw, 230px); margin-top: 4px; } .band-a .hero-cover img { width: 100%; height: auto; }
  .band-a h1 { font-size: 40px; text-wrap: balance; } .band-a .lede { font-size: 19px; }
  .takeaways { grid-template-columns: 1fr; }
  .band-c { grid-template-columns: 1fr; row-gap: 24px; }
  
  .band-c .page-img { aspect-ratio: 1275 / 560; overflow: hidden; } .band-c .page-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  
  .band-c .page-img { aspect-ratio: auto; overflow: visible; padding: 18px 14px 12px; background: var(--paper); border-radius: 4px; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .12); }
  .band-c .page-img img { display: none; }
  .band-c .page-img .ex3-narrow { display: block; width: 100%; height: auto; }
  
  .pages { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scrollbar-width: none; }
  .pages::-webkit-scrollbar { display: none; } .pages a { flex: 0 0 62%; scroll-snap-align: start; }
  
  .band h2.plain { font-size: 30px; text-wrap: balance; }
  section[aria-label="The model after the first quarter"] > h2.plain { font-size: 24px; line-height: 1.15; font-stretch: 90%; }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; } .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger td { padding: 4px 0; border: 0; } .ledger td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); } .ledger tr { padding: 10px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .12); }
  
  .modine-page .ledger td:first-child { font-size: 17px; font-weight: 500; color: var(--ink); padding-bottom: 8px; } .modine-page .ledger tr { padding: 14px 0; }
}

@media (max-height: 500px) and (pointer: coarse) { .band-a { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 24px; grid-template-columns: minmax(0, 1fr) 200px; } .band-a h1 { font-size: 40px; } .band-a .lede { font-size: 19px; } .band-a .hero-cover { width: 200px; } }





.hero-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; width: min(100%, 340px); padding: 6px; border-radius: 12px; background: rgb(11 11 10 / .28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgb(244 243 238 / .14); color: var(--paper); text-decoration: none; text-align: left; margin-bottom: 14px; transition: background-color .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hero-card:hover { background: rgb(11 11 10 / .44); color: var(--paper); } }
.hero-card-pic { display: block; aspect-ratio: 1.6; border-radius: 8px; overflow: hidden; background: var(--card); }
.hero-card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hero-card:hover .hero-card-pic img { transform: scale(1.05); } }
.hero-card-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; padding-right: 6px; }
.hero-card-k { font-family: var(--mono); font-size: 14px; color: var(--beige-2); }
@media (max-width: 760px) { .hero-card { width: 100%; margin-bottom: 10px; } }


#research.scene { background: #0A0B0F; }

@media (max-width: 760px) { #research.scene { background: linear-gradient(180deg, var(--night) 0, #0A0B0F 220px); } }
#engines.scene { background: #0B0B0A; }
#app.scene { background: #080808; }
#workflows.scene { background: #0A0C0B; }
#design.scene { background: #0D0C0A; }
#resume.scene { background: #0B0B0A; }


.dateline { font-family: var(--mono); font-size: 14px; color: var(--beige-2); margin: 48px 0 18px; }


.page-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.page-one { max-width: 820px; }
.page-one a { box-shadow: 0 50px 100px -20px rgb(0 0 0 / .8), 0 30px 60px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(var(--beige-rgb) / .1); }
.page-zoom { position: sticky; top: calc(var(--nav-h) + 24px); margin-top: 12%; }
.page-zoom img { width: 100%; height: auto; border-radius: 10px; mask-image: linear-gradient(45deg, #000 45%, rgb(0 0 0 / 0) 100%); -webkit-mask-image: linear-gradient(45deg, #000 45%, rgb(0 0 0 / 0) 100%); }
@media (max-width: 760px) { .page-pair { grid-template-columns: 1fr; } .page-zoom { position: static; margin-top: 0; } }


.record { margin-top: 40px; border-top: var(--line); max-width: 920px; }
.record-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: var(--line); font-size: 16px; line-height: 1.5; color: var(--beige); }
.record-d { font-family: var(--mono); font-size: 14px; color: var(--beige-2); padding-top: 3px; }
@media (max-width: 760px) { .record-row { grid-template-columns: 1fr; gap: 4px; } }


.sheet { margin-top: 72px; }
.sheet-row { display: flex; gap: 12px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sheet-row::-webkit-scrollbar { display: none; }
.sheet-row a { position: relative; flex: none; width: 150px; border-radius: 4px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1), 0 14px 30px -14px rgb(0 0 0 / .9); scroll-snap-align: start; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .sheet-row a:hover { transform: translateY(-5px); } }
.sheet-row img { width: 100%; height: auto; display: block; }
.sheet-row span { position: absolute; left: 8px; bottom: 6px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); background: rgb(255 255 255 / .85); padding: 1px 6px; border-radius: 4px; }
.sheet .cap { padding: 18px var(--gutter) 0; }
@media (max-width: 760px) { .sheet { margin-top: 48px; } .sheet-row a { width: 110px; } }


.work h3 .dim { color: var(--beige-2); }
.work-pic { position: relative; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .18), 0 30px 60px -30px rgb(0 0 0 / .9); }
.chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 10px; background: rgb(244 243 238 / .92); color: var(--ink); font-size: 14px; line-height: 1.2; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .8); backdrop-filter: blur(8px); }
.chip b { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: 22px; color: var(--ink); background: var(--well); padding: 2px 8px; border-radius: 6px; }
.work { padding: 56px 0; }
.work p { color: var(--beige-2); }


.product-main { position: relative; }
.product-glow { position: absolute; inset: -6% -4% -10%; z-index: -1; border-radius: 40px; background: var(--glow, rgb(232 230 223 / .12)); filter: blur(70px); opacity: .55; pointer-events: none; }
.product { isolation: isolate; }


.panel { border-color: rgb(var(--beige-rgb) / .16); }
.window, .canvas { box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .06); }


.concepts.mail a { background: var(--card); }
.concepts .mail-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; font-size: 14px; line-height: 1.35; color: var(--ink-2); border-top: 0; border-bottom: var(--line-ink); background: #F7F6F2; }
.concepts .mail-k { font-family: var(--mono); font-size: 14px; color: var(--ink-3); padding: 0; border: 0; }
.concepts .mail-s { color: var(--ink); padding: 0; border: 0; }
.concepts .mail-body { display: block; position: relative; max-height: 420px; overflow: hidden; padding: 0; border: 0; }
.mail-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, rgb(255 255 255 / 0), #FFFFFF); }


html.js .card.photo img, html.js .plates img, html.js .work-pic img, html.js .closing .photo img, html.js .scene-photo img { clip-path: inset(0 50% 0 50%); transition: clip-path 1.2s cubic-bezier(.33, 1, .68, 1); }
html.js .rv.in .card.photo img, html.js .card.photo.in img, html.js .plates.in img, html.js .work.in .work-pic img, html.js .closing .photo.in img, html.js .scene-photo.in img, html.js.rm .card.photo img, html.js.rm .plates img, html.js.rm .work-pic img, html.js.rm .closing .photo img, html.js.rm .scene-photo img { clip-path: inset(0 0 0 0); }


.window { border-radius: 14px; background: linear-gradient(#111217F5, #111217FA); box-shadow: 0 16px 48px 8px rgb(0 0 0 / .2), 0 0 0 .5px rgb(0 0 0 / .75), 0 12px 32px rgb(0 0 0 / .75), inset 0 .5px rgb(255 255 255 / .1), inset 0 0 0 1px rgb(255 255 255 / .08); border: 0; }
.window-bar { background: #15161B; }
.window-bar .tl { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .25); }
.window-bar .tl.r { background: #FF5F57; } .window-bar .tl.y { background: #FEBC2E; } .window-bar .tl.g { background: #28C840; }


@media (min-width: 761px) {
  .hero.opening { padding: 8px; }
  .opening-photo { inset: 8px; border-radius: 24px; overflow: hidden; }
}


.resume.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; align-items: center; }
.resume-well { background: var(--night-3); padding: 56px 0; display: flex; justify-content: center; }
.resume-well .page-img { width: 62%; max-width: none; }
.resume-copy { padding: 40px 48px; }
@media (max-width: 760px) { .resume.panel { grid-template-columns: 1fr; } .resume-well { padding: 32px 0; } .resume-well .page-img { width: 70%; } .resume-copy { padding: 24px 20px; } }


.grain::before { inset: -50% 0 0 -50%; width: 200%; height: 200%; animation: film 0.5s steps(6) infinite; }
@keyframes film { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, -10%); } 40% { transform: translate(3%, -15%); } 60% { transform: translate(12%, 9%); } 80% { transform: translate(9%, 4%); } 100% { transform: translate(-1%, 7%); } }
html.rm .grain::before { animation: none; }


.works { margin-top: 72px; }


html.js [data-rise] > span:not(.w), html.js [data-rise] .w > span { display: inline-block; transform: translateY(112%); transition: transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js [data-rise] > span:not(.w) { display: block; }
html.js [data-rise] { overflow: hidden; }
html.js [data-rise].in > span, html.js [data-rise].in .w > span, html.js.rm [data-rise] > span, html.js.rm [data-rise] .w > span { transform: none; }
html.js .hero-links[data-rise] { overflow: visible; }
html.js .hero-links[data-rise] > a { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
html.js .hero-links[data-rise].in > a, html.js.rm .hero-links[data-rise] > a { opacity: 1; transform: none; }
html.js .hero-side[data-rise] { overflow: visible; }
html.js .hero-side[data-rise] > p { opacity: 0; transition: opacity .9s var(--ease); transition-delay: var(--d, 0ms); }
html.js .hero-side[data-rise].in > p, html.js.rm .hero-side[data-rise] > p { opacity: 1; }
html.js .hero-side[data-rise].in > .hint.is-off { opacity: 0; }
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
html.js .rv.in, html.js.rm .rv { opacity: 1; transform: none; }
.notfound { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 var(--gutter); }
.notfound h1 { font-family: var(--display); font-stretch: 70%; font-weight: 600; font-size: 96px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  @page { size: letter; margin: 0.75in; }
  html.js .card.photo img, html.js .plates img, html.js .work-pic img, html.js .closing .photo img { clip-path: none; }
  .nav, .skip, .copy-btn, .footer-name, .closing-ground, .hint, .switch, .pre, .scene-photo, .opening-photo { display: none !important; }
  html, body, .page, .scene, .closing, .footer, .panel { background: #FFFFFF !important; color: var(--ink) !important; }
  .hero.opening { position: static; height: auto; color: var(--ink); background: none; } .hero-name, .hero .lede, .hero-links a, .giant, .big, .work h3, .copy p, a { color: var(--ink) !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; color: var(--ink-2); }
  .card, .panel, figure, table { break-inside: avoid; }
  html.js .rv, html.js [data-rise] > span, html.js .term .ln, html.js .gh rect, html.js .canvas .nd, html.js [data-gallery] .marquee { opacity: 1; transform: none; }
  .track { animation: none !important; }
}





.ph img, .sc-ph img, .film-v, .rm-ph img, .rot-item img, .rl img, .rm-shot img, .product img, .pg img, .g-item img, .hero-card-pic img {
  filter: grayscale(1) contrast(1.06) brightness(.98); transition: filter .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .rm-ph:hover img, .rot:hover .rot-item img, .rl.is-on:hover img, .rm-shot:hover img, .product:hover img, .sc-sp:hover img, .g-item:hover img, .pg:hover img { filter: none; }
}
.gh .lvl1 { fill: #CFCDC6; } .gh .lvl2 { fill: #9C9A93; } .gh .lvl3 { fill: #5E5C57; } .gh .lvl4 { fill: #1B1A17; }
@media (hover: hover) and (pointer: fine) { .scene.paper a:hover { color: var(--ink); } }


.filmgrain { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.filmgrain::before { content: ""; position: absolute; inset: -50% 0 0 -50%; width: 200%; height: 200%; background: url("img/film-grain.webp") repeat 0 0 / 360px 360px; animation: film .5s steps(6) infinite; will-change: transform; }
html.rm .filmgrain::before { animation: none; }
@media print { .filmgrain { display: none; } }


.nav.is-hidden { transform: none; }


.hero.opening { padding: 0; }
.hero-wrap { height: 100%; width: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; padding: calc(var(--nav-h) + 14px) var(--gutter) 26px; }
.hero-grid { width: 100%; margin: 0 0 22px; }
.film { position: relative; grid-row: 1; justify-self: end; align-self: stretch; height: 100%; aspect-ratio: 16 / 10; max-width: min(66%, 1000px); margin: 0; border-radius: 18px; overflow: hidden; background: #050505;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .12); transform: scale(calc(1 - .06 * var(--p, 0))); transform-origin: 70% 30%; }
.film-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; filter: grayscale(1) contrast(1.12) brightness(1.05); }

html.js .film-v { opacity: 0; transition: opacity 1.8s cubic-bezier(.3, 0, .2, 1); }
html.js .film.is-up .film-v { opacity: 1; }

.film-poster-p { display: contents; }
html.js .film .film-poster { opacity: 1; transition: none; }
.film img.film-poster.still { filter: grayscale(1) contrast(1.12) brightness(1.05); }
@media (min-width: 761px) { .film-poster-p, .film-poster { display: none; } }
.film-cap { position: absolute; right: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 14px; color: #D8D6CF; }
.film-toggle { font-family: var(--mono); font-size: 14px; color: #D8D6CF; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(216 214 207 / .5); }
@media (hover: hover) and (pointer: fine) { .film-toggle:hover { color: #FFFFFF; } }
.hero-side { position: relative; z-index: 3; align-self: start; transform: translateY(-46px); }
.hero-card { background: rgb(11 11 10 / .55); }
html.js .hero .film { clip-path: inset(0 0 0 0 round 18px); }

@media (max-width: 760px) {
  .hero.opening { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; }
  .hero-wrap { display: flex; flex-direction: column; height: 100%; padding: calc(var(--nav-h) + 4px) var(--gutter) 18px;
    transform: translateY(calc(var(--p, 0) * -30px)); opacity: calc(1 - 1.2 * var(--p, 0)); }
  .film { order: 0; flex: 1 1 0; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; max-width: none; margin-bottom: 0; border-radius: 14px; transform: none; }
  html.js .hero .film { clip-path: inset(0 0 0 0 round 14px); }
  .film-cap { top: 12px; bottom: auto; }
  .hero-grid, .hero-side { display: contents; }
  .hero-card { order: 1; position: relative; z-index: 3; width: auto; margin: -44px 12px 18px; }
  .hero-text { order: 2; }
  .hero-links { margin-top: 14px; }
  .now { order: 3; margin-top: 14px; }
  .hero-name { order: 4; font-size: calc((100vw - 2 * var(--gutter)) / 5.15); flex-wrap: nowrap; white-space: nowrap; justify-content: space-between; gap: 0; margin: 4px 0 0; }
  .page { border-radius: 20px 20px 0 0; box-shadow: 0 -24px 60px rgb(0 0 0 / .5); }
}


.go { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; font-size: 17px; font-weight: 500; margin-top: 26px; }
.go-t { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.circ { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(var(--beige-rgb) / .38); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.circ svg { transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .go:hover { color: inherit; } .go:hover .circ { background: var(--paper); color: var(--ink); border-color: var(--paper); } .go:hover .circ svg { transform: rotate(45deg); } }
.scene.paper .circ, .paper .circ { border-color: rgb(var(--ink-rgb) / .3); }
@media (hover: hover) and (pointer: fine) { .scene.paper .go:hover .circ { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.go-sm { font-size: 15px; margin-top: 16px; } .go-sm .circ { width: 38px; height: 38px; }
.mid { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(34px, 3.7vw, 56px); line-height: 1; letter-spacing: -0.018em; color: var(--paper); }
.scene.paper .mid { color: var(--ink); }


html.js [data-grow-in] { transform: translateY(calc((1 - var(--gi, 1)) * 56px)) scale(calc(.9 + .1 * var(--gi, 1))); opacity: calc(.2 + .8 * var(--gi, 1)); transform-origin: 50% 80%; }
html.js [data-depth] > img { transform: translateY(var(--dy, 0px)) scale(1.1); }
html.rm [data-grow-in], html:not(.js) [data-grow-in] { transform: none; opacity: 1; }
html.rm [data-depth] > img { transform: none; }


.about-scene { padding: 120px 0 110px; }
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(var(--gap) * 2); align-items: start; }
.about-pics { position: relative; height: clamp(620px, 62vw, 900px); }
.ph { position: absolute; margin: 0; border-radius: 6px; overflow: hidden; background: #DDDBD4; box-shadow: 0 30px 60px -30px rgb(var(--ink-rgb) / .55), 0 0 0 1px rgb(var(--ink-rgb) / .08); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-a { left: 0; top: 0; width: 60%; aspect-ratio: 3 / 4; z-index: 1; }
.ph-b { right: 0; top: 30%; width: 46%; aspect-ratio: 3 / 4; z-index: 2; }
.ph-b img { object-position: 50% 30%; }
.ph-c { left: 6%; top: 66%; width: 58%; aspect-ratio: 4 / 3; z-index: 3; }
.about-lead { font-family: var(--display); font-stretch: 86%; font-weight: 600; font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 30px; max-width: 24ch; }
.about-text .copy { font-size: 15.5px; }
.about-text .facts { margin-top: 36px; padding-top: 22px; border-top: var(--line-ink); }
@media (max-width: 760px) {
  .about-scene { padding: 72px 0 64px; }
  .about { grid-template-columns: 1fr; row-gap: 40px; }
  .about-pics { height: 114vw; }
  .ph-b { top: 28%; } .ph-c { top: 61%; }
  html.js .about-pics [data-depth] > img { transform: none; }
  .about-lead { font-size: 27px; }
  .about-text .ph-off { display: none; }
}



.research { padding: 120px 0 130px; }
.res { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: center; }
.res-side .mid { max-width: 13ch; }
.res-side .dateline { margin: 18px 0 26px; }
.res-small { font-size: 14px; color: var(--beige-2); margin-top: 14px; }
.res-pages { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; max-width: 720px; justify-self: end; width: 100%; }
.pg { position: relative; }
.pg a { display: block; border-radius: 3px; overflow: hidden; background: var(--card); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pg a:hover { transform: translateY(-8px) rotate(-.6deg); } }
.pg img { width: 100%; height: auto; }
.pg-1 { margin-top: 70px; }
.pg-n { position: absolute; left: 0; bottom: -28px; font-family: var(--mono); font-size: 14px; color: var(--beige-2); }

.res-cover-only .pg-cover { grid-column: 2; }

.res-cover-only .pg-cover img { aspect-ratio: 900 / 1165; }
.res-cover-only .pg-p3ph { display: none; }
@media (max-width: 760px) { .res-cover-only .pg-p3ph { display: block; } .res-cover-only .pg-cover { display: none; } }
@media (max-width: 760px) { .research { padding: 72px 0 88px; } .res { grid-template-columns: 1fr; row-gap: 40px; } .pg-1 { margin-top: 40px; } }


.systems { padding: 120px 0 120px; background: #EEEDE8; }
.sys-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 2); align-items: end; margin-bottom: 48px; }
.sys-head .mid { max-width: 16ch; }
.figs { position: relative; background: #0E0E0D; color: var(--paper); border-radius: 18px; padding: 22px 24px 26px; min-height: 248px; overflow: hidden; box-shadow: 0 30px 60px -34px rgb(var(--ink-rgb) / .8); }
.figs::before { content: ""; position: absolute; inset: 0; background: url("img/grain-256.webp") repeat; background-size: 200px; opacity: .14; mix-blend-mode: overlay; pointer-events: none; }
.figs-top { position: relative; }
.figs-rule { display: block; height: 1px; background: rgb(var(--beige-rgb) / .2); }
.figs-fill { display: block; height: 1px; width: 0; background: var(--paper); }
.figs.run .figs-fill { animation: fill var(--fd, 3.6s) linear forwards; }
@keyframes fill { to { width: 100%; } }
.figs-nav { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.figs-nav button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--beige); border-radius: 50%; transition: background-color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .figs-nav button:hover { background: rgb(var(--beige-rgb) / .1); color: #FFF; } }
.figs-count { margin-left: auto; font-family: var(--mono); font-size: 14px; color: var(--beige-2); font-variant-numeric: tabular-nums; }
.figs-slides { position: relative; margin-top: 22px; min-height: 150px; }
.fig-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .7s var(--ease-out); }
.fig-slide.is-on { opacity: 1; transform: none; }
.fig-n { display: block; font-family: var(--display); font-stretch: 74%; font-weight: 600; font-size: clamp(64px, 6.6vw, 104px); line-height: .86; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fig-slide p { margin-top: 12px; font-size: 16px; line-height: 1.35; color: #B9B6AD; max-width: 30ch; }
html.rm .fig-slide { transition: none; }
.sys-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 44px; row-gap: 24px; align-items: start; background: var(--card); border-radius: 22px; padding: 36px; margin-top: 22px;
  box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .05), 0 24px 60px -34px rgb(var(--ink-rgb) / .35); }
.sys-text h3 { font-family: var(--display); font-stretch: 86%; font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 14px; }
.sys-text p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.sys-text p + p { margin-top: 10px; }
.sys-vis { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vis-cap { font-size: 14px; color: var(--ink-2); }
.vis-cap[hidden] { display: none; }
.steps { margin-top: 22px; border-top: var(--line-ink); }
.steps li { border-bottom: var(--line-ink); }
.steps button { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 0 12px; text-align: left; color: var(--ink-3); transition: color .3s var(--ease); }
.steps .step-t { font-weight: 500; font-size: 16px; }
.steps li.is-on button { color: var(--ink); } @media (hover: hover) and (pointer: fine) { .steps button:hover { color: var(--ink); } }
.step-rule { display: block; height: 2px; background: rgb(var(--ink-rgb) / .08); border-radius: 2px; overflow: hidden; }
.step-fill { display: block; height: 100%; width: 0; background: var(--ink); }
.steps li.is-on .step-fill { width: 100%; }
.steps.run li.is-on .step-fill { width: 0; animation: fill 5s linear forwards; }
.steps li p { display: none; font-size: 15px; line-height: 1.5; color: var(--ink-2); padding: 0 0 14px; }
.steps li.is-on p { display: block; }
.sys-card .switch { border: 0; padding: 18px 0 0; }
.sys-card .switch button { color: var(--ink-2); border-color: rgb(var(--ink-rgb) / .15); }
@media (hover: hover) and (pointer: fine) { .sys-card .switch button:hover { color: var(--ink); border-color: rgb(var(--ink-rgb) / .4); } }
.sys-card .switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sys-card .window { margin-top: 0; }
@media (max-width: 760px) {
  .systems { padding: 72px 0; }
  .sys-head { grid-template-columns: 1fr; row-gap: 28px; }
  .sys-card { grid-template-columns: 1fr; padding: 22px; border-radius: 16px; }
}


.reminous { padding: 120px 0 120px; }
.rm-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: start; margin-bottom: 64px; }
.rm-site { position: relative; height: clamp(560px, 56vw, 820px); margin-bottom: 40px; }
.rm-ph { position: absolute; display: block; margin: 0; border-radius: 10px; overflow: hidden; background: #F5F7FB; box-shadow: 0 40px 80px -36px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .12); }
.rm-ph img { width: 100%; height: auto; display: block; }
.rm-a { left: 0; top: 0; width: 58%; z-index: 1; }
.rm-b { right: 0; top: 6%; width: 38%; z-index: 2; }
.rm-c { right: 4%; top: 50%; width: 46%; z-index: 3; }
.rm-d { left: 8%; top: 54%; width: 36%; z-index: 4; }
.rm-cap { position: absolute; left: 0; bottom: -6px; font-size: 14px; color: var(--beige-2); max-width: 44ch; }
.rm-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gap) * 1.5); margin-top: 80px; align-items: start; }
.rm-case h3 { font-family: var(--display); font-stretch: 86%; font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.015em; color: var(--paper); margin: 22px 0 10px; }
.rm-case p { font-size: 16px; line-height: 1.55; color: var(--beige-2); max-width: 46ch; }
.rm-shot { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .14), 0 30px 60px -30px rgb(0 0 0 / .9); }
.rm-shot img { width: 100%; height: auto; display: block; }
.rot { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #F2F0EA; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .14), 0 30px 60px -30px rgb(0 0 0 / .9); }
.rot-item { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 6% 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); }
.rot-item img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .5); }
.rot-item.is-on { clip-path: inset(0 0 0 0); z-index: 2; }
.rot-item.was { clip-path: inset(0 0 0 0); z-index: 1; }
.rot-item figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.rot-rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(var(--ink-rgb) / .08); z-index: 3; }
.rot-fill { display: block; height: 100%; width: 0; background: var(--ink); }
.rot.run .rot-fill { animation: fill var(--rd, 2.4s) linear forwards; }
html.rm .rot-item { transition: none; }
@media (max-width: 760px) {
  .reminous { padding: 72px 0; }
  .rm-head { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 40px; }
  .rm-site { height: 118vw; }
  .rm-a { width: 86%; } .rm-b { width: 62%; top: 22%; } .rm-c { width: 70%; top: 52%; } .rm-d { width: 58%; top: 70%; left: 2%; }
  .rm-work { grid-template-columns: 1fr; row-gap: 48px; margin-top: 56px; }
}


.app { padding: 120px 0 130px; }
.app-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: center; }
.app .product { margin-top: 0; padding-bottom: 14%; max-width: 760px; justify-self: end; width: 100%; }
.app .product-main { box-shadow: 0 40px 80px -36px rgb(var(--ink-rgb) / .7), 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.app .product-side { width: 48%; right: -3%; box-shadow: 0 30px 60px -28px rgb(var(--ink-rgb) / .8), 0 0 0 1px rgb(var(--ink-rgb) / .12); }
.app .copy p { color: var(--ink); }
@media (max-width: 760px) { .app { padding: 72px 0; } .app-grid { grid-template-columns: 1fr; row-gap: 36px; } .app .product-side { right: 0; } }


.design { padding: 120px 0 80px; }
.design-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: start; margin-bottom: 20px; }
.reel { position: relative; height: calc(var(--n, 9) * 62vh + 100vh); }
.reel-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.rl { position: absolute; left: 50%; top: 50%; height: 74vh; display: block; border-radius: 10px; overflow: hidden; background: #F4F3EE; text-decoration: none;
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .12);
  transform: translate(-50%, calc(-50% + var(--ry, 120vh))) rotate(var(--rr, 0deg)) scale(var(--rs, .6)); will-change: transform; }
.rl.rl-sq { aspect-ratio: 1 / 1; }
.rl.rl-tall { aspect-ratio: 4 / 5; }
.rl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.rl-cap { display: none; }
.rl.is-gone { visibility: hidden; }
.reel-cap { position: absolute; left: var(--gutter); bottom: 26px; display: flex; gap: 16px; font-size: 15px; color: var(--beige); max-width: 60ch; z-index: 30; }
.reel-cap span:first-child { font-family: var(--mono); font-size: 14px; color: var(--beige-2); padding-top: 1px; }
html.rm .reel, html:not(.js) .reel { height: auto; }
html.rm .reel-stage, html:not(.js) .reel-stage { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 40px var(--gutter); }
html.rm .rl, html:not(.js) .rl { position: static; height: auto; transform: none; }
html.rm .reel-cap, html:not(.js) .reel-cap { display: none; }
@media (max-width: 760px) { .rl { height: 56vh; } .reel { height: calc(var(--n, 9) * 52vh + 100vh); } }
.photo-scatter { position: relative; height: 240vh; overflow: clip; }
.ps-words { font-size: clamp(32px, 4vw, 64px); max-width: 17ch; }
.ps-go { pointer-events: auto; margin-top: 10px; }
.scatter-stage .ps-go { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); }
.design .mass { margin-top: 40px; }


.gh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); margin-bottom: 30px; flex-wrap: wrap; }
.gh-head .go { margin-top: 0; }
#github { padding: 110px 0 100px; }
#claude { padding: 30px 0 110px; }


.contact { position: relative; background: var(--night); color: var(--beige); padding: 130px 0 120px; border-top: var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(var(--gap) * 2); align-items: end; }
.contact-h { font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -0.005em; color: var(--paper); margin-bottom: 26px; }
.contact-text p { font-size: 18px; line-height: 1.5; max-width: 42ch; }
.contact-direct { margin-top: 18px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.contact .copy-btn { color: var(--beige-2); font-size: 14px; text-decoration: underline; text-underline-offset: .2em; }
.contact .now-dark { margin-top: 26px; font-size: 14px; }
.leave { display: flex; flex-direction: column; gap: 6px; }
.leave-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgb(var(--beige-rgb) / .3); transition: border-color .3s var(--ease); }
.leave-row:focus-within { border-color: var(--paper); }
.leave-k { font-size: 14px; color: var(--beige-2); }
.leave input { font: inherit; font-size: 22px; color: var(--paper); background: transparent; border: 0; padding: 4px 0; outline: none; letter-spacing: -0.01em; }
.leave input::placeholder { color: #5A5853; }
.leave-end { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.leave-go { display: inline-flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; color: var(--paper); }
.leave-go .circ { width: 56px; height: 56px; }
@media (hover: hover) and (pointer: fine) { .leave-go:hover .circ { background: var(--paper); color: var(--ink); border-color: var(--paper); } }
.leave-note { font-size: 14px; color: var(--beige-2); }
@media (max-width: 760px) { .contact { padding: 80px 0 72px; } .contact-grid { grid-template-columns: 1fr; row-gap: 40px; } .leave input { font-size: 19px; } }


.footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.totop { display: inline-flex; align-items: center; gap: 12px; color: var(--beige); text-decoration: none; padding: 44px 0 10px; font-size: 15px; }
.totop .circ-lg { width: 56px; height: 56px; }
@media (hover: hover) and (pointer: fine) { .totop:hover { color: #FFF; } .totop:hover .circ { background: var(--paper); color: var(--ink); border-color: var(--paper); } .totop:hover .circ svg { transform: translateY(-3px); } }
.page > .about-scene:first-child { border-radius: 28px 28px 0 0; }
@media (max-width: 760px) { .page > .about-scene:first-child { border-radius: 20px 20px 0 0; } }


.ad-line { display: flex; align-items: center; justify-content: center; gap: .14em; white-space: nowrap; overflow: hidden; padding: .06em 0; margin: 0 0 56px;
  font-family: var(--display); font-stretch: 66%; font-weight: 600; font-size: clamp(54px, 9.4vw, 156px); line-height: .9; letter-spacing: -0.005em; color: var(--paper); }
.al-w { display: block; will-change: transform; }
html.js .al-l { transform: translateX(calc((1 - var(--al, 1)) * -62vw)); }
html.js .al-r { transform: translateX(calc((1 - var(--al, 1)) * 62vw)); }
.al-hold { position: relative; flex: none; display: block; width: calc(1.3em * var(--alh, 1)); height: .82em; border-radius: .06em; overflow: hidden; background: #1A1A18; box-shadow: 0 .1em .4em -.1em rgb(0 0 0 / .8); }
.al-hold img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; filter: grayscale(1) contrast(1.08); }
.al-hold img.is-on { opacity: 1; }
html.rm .al-l, html.rm .al-r { transform: none; } html.rm .al-hold { width: 1.3em; }
.design-line { margin-bottom: 8px; }
.ad-line-contact { margin: 0 0 72px; }
.contact .ad-line { color: var(--paper); }
@media (max-width: 760px) { .ad-line { font-size: 10.6vw; gap: .1em; margin-bottom: 36px; } .ad-line-contact { font-size: 15vw; } }


html.js [data-fill] .fw { position: relative; display: inline-block; color: rgb(var(--ink-rgb) / .28); }
html.js [data-fill] .fw::after { content: attr(data-w); content: attr(data-w) / ""; position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--ink); opacity: clamp(0, calc((var(--p, 0) - var(--s, 0)) / var(--k, .18)), 1); }
html.rm [data-fill] .fw { color: inherit; }
html.rm [data-fill] .fw::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js [data-fill] .fw { color: inherit; } html.js [data-fill] .fw::after { opacity: 1; } }


.design { overflow: clip; }
#app.scene.paper { background: var(--paper); }
.reel { height: calc(var(--n, 8) * 34vh + 100vh); }
.rl.rl-wide { height: 58vh; aspect-ratio: 3 / 2; }
.rl.rl-wide img { object-position: 50% 50%; }
@media (max-width: 760px) { .reel { height: calc(var(--n, 8) * 30vh + 100vh); } .rl.rl-wide { height: auto; width: 88vw; } }


@media (min-width: 761px) {
  .hero-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "text film" "name name"; column-gap: 48px; }
  .hero-grid-6 { display: contents; }
  .film { grid-area: film; max-width: 100%; justify-self: end; }
  .film-v { transform: scale(1.04); object-position: 50% 46%; }  
  .hero-text { grid-area: text; align-self: end; padding-bottom: 6px; }
  .hero-side { grid-area: film; align-self: end; justify-self: start; transform: translate(-64px, 34px); text-align: left; align-items: flex-start; }
  .hero-name { grid-area: name; margin-top: 30px; }
}
@media (max-width: 760px) { .design-head, .rm-head { grid-template-columns: 1fr; row-gap: 20px; } .design-head > div:empty { display: none; } }


.arc { position: relative; z-index: 3; height: 0; pointer-events: none; }
.arc::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -1px; height: var(--bend, 0px); background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.arc { background: none !important; }
.arc::after { background: var(--arc-c); }
html.rm .arc { display: none; }

.rm-win { background: #0E0F10; border-radius: 12px; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #15161B; border-bottom: 1px solid rgb(255 255 255 / .06); }
.win-bar .tl { width: 11px; height: 11px; border-radius: 50%; }
.win-bar .tl.r { background: #FF5F57; } .win-bar .tl.y { background: #FEBC2E; } .win-bar .tl.g { background: #28C840; }
.win-url { margin-left: 10px; font-family: var(--mono); font-size: 14px; color: #8B8C88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

a.rm-win { display: block; color: inherit; text-decoration: none; }
.win-link { text-decoration: underline; text-decoration-color: rgb(139 140 136 / .5); text-underline-offset: 3px; position: relative; z-index: 2; }
a.rm-win:hover .win-link, a.rm-win:focus-visible .win-link { color: #D8D6CF; }
.rm-cap a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.win-view { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: #F5F7FB; }
.win-view img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--ease); }
.win-view.run img { animation: pan 60s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@media (hover: hover) and (pointer: fine) { .rm-win:hover .win-view img { animation-play-state: paused; filter: none; } }
@keyframes pan { from { transform: translateY(0); } to { transform: translateY(var(--pan-to, 0px)); } }
html.rm .win-view.run img { animation: none; }

.lens { position: absolute; left: 0; top: 0; z-index: 9; width: 180px; height: 180px; border-radius: 50%; background: #FFF; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); box-shadow: 0 0 0 1px rgb(255 255 255 / .6); }
.lens.on { opacity: 1; }
.rm-site { height: clamp(640px, 64vw, 940px); }
.rm-a { width: 60%; top: 0; left: 0; }
.rm-b { right: 0; top: 3%; width: 35%; }
.rm-c { right: 0; top: 44%; width: 42%; }
.rm-d { left: 5%; top: 71%; width: 31%; }
.rm-cap { left: auto; right: 0; bottom: -10px; text-align: right; }

@media (max-width: 760px) { .rm-site { height: 146vw; } .rm-a { width: 100%; top: 0; left: 0; } .rm-c { width: 74%; top: 42%; right: 0; left: auto; z-index: 2; } .rm-b { display: block; width: 70%; left: 0; right: auto; top: 76%; } .rm-cap { left: 0; right: auto; text-align: left; bottom: -44px; } }



img.still, .ph img.still, .sc-ph img.still, .al-hold img.still { filter: grayscale(1) contrast(.9) brightness(1.06); }

.contact { overflow: hidden; }
.contact-ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-ground img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; opacity: .5; }
.contact-ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgb(11 11 10 / .35) 35%, rgb(11 11 10 / .55) 70%, var(--night) 100%); }
.contact > .ad-line, .contact > .wrap { position: relative; z-index: 1; }


.lap { --open: 1; --lid: calc(-88deg + 100deg * var(--open)); position: relative; width: 100%; max-width: 760px; justify-self: end; perspective: 2200px; perspective-origin: 50% -40%; padding: 0 0 16%; }
.lap::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 3%; height: 40px; border-radius: 50%; background: rgb(0 0 0 / .35); filter: blur(22px); z-index: -1; }
.lap-body { position: relative; transform-style: preserve-3d; width: 86%; margin: 0 auto; }
.lap-lid { position: relative; aspect-ratio: 16 / 10.6; transform-origin: 50% 100%; transform: rotateX(var(--lid)); transform-style: preserve-3d; z-index: 2; }
.lap-face, .lap-back { position: absolute; inset: 0; border-radius: 16px 16px 4px 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lap-face { background: #0C0C0C; padding: 2.6% 2.6% 3.6%; box-shadow: inset 0 0 0 1.5px #2B2B29, 0 0 0 1px #050505; }
.lap-cam { position: absolute; left: 50%; top: 1.1%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1C1C1B; box-shadow: inset 0 0 0 1px #2E2E2C; }
.lap-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #15161A; }
.lap-screen .rot-item { padding: 0; place-items: stretch; }
.lap-screen .rot-item img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; border-radius: 0; box-shadow: none; }
.lap-screen .rot-rule { top: auto; bottom: 0; height: 2px; background: rgb(255 255 255 / .08); }
.lap-screen .rot-fill { background: rgb(255 255 255 / .7); }
.lap-back { transform: rotateY(180deg); background: linear-gradient(180deg, #2A2A28, #1A1A19 60%, #121211); box-shadow: inset 0 0 0 1px #3A3A37; }
.lap-deck { position: absolute; left: -7%; right: -7%; top: 100%; aspect-ratio: 16 / 9.6; transform-origin: 50% 0; transform: rotateX(90deg); transform-style: preserve-3d; border-radius: 3px 3px 18px 18px; background: linear-gradient(180deg, #222220, #1A1A19); box-shadow: inset 0 0 0 1px #35352F; }
.lap-deck::before { content: ""; position: absolute; inset: 7% 10% 42%; border-radius: 5px; background: repeating-linear-gradient(90deg, #111110 0 5.4%, #1E1E1C 5.4% 6.2%); box-shadow: inset 0 0 0 1px #2A2A27; }
.lap-deck::after { content: ""; position: absolute; left: 33%; right: 33%; bottom: 8%; height: 27%; border-radius: 9px; box-shadow: inset 0 0 0 1px #3A3A35; }
.lap-edge { position: absolute; left: 0; right: 0; top: 100%; height: 16px; transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #3B3B38, #161615); }
.lap-edge::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0E0E0D; }
.lap .rot-item img { filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
@media (hover: hover) and (pointer: fine) { .lap:hover .rot-item img { filter: none; } }
html.rm .lap, html:not(.js) .lap { --open: 1; }
.app .lap { margin-top: 0; }
@media (max-width: 760px) { .lap { max-width: none; justify-self: stretch; } }


.foot-flow { position: relative; min-height: 94svh; display: flex; flex-direction: column; border-top: 0; }
.foot-wave { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.foot-wave canvas { display: block; width: 100%; height: 100%; }
.foot-flow > .wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.foot-flow .footer-top, .foot-flow .footer-name, .foot-flow .footer-end { mix-blend-mode: difference; color: #E8E6DF; }
.foot-flow .footer-name { margin-top: auto; }
.footer-end { margin: 0; padding: 4px 0 22px; font-family: var(--mono); font-size: 14px; }
.footer-end a { color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgb(232 230 223 / .45); }
.foot-flow .compliance { mix-blend-mode: difference; color: #E8E6DF; padding: 0 0 22px; margin: 0; }
@media (max-width: 760px) { .foot-flow { min-height: 78svh; } }


.notes { padding: calc(var(--nav-h) + 72px) 0 96px; background: var(--paper); color: var(--ink); min-height: 100vh; }
.notes-wrap { max-width: 860px; }
.notes h1 { margin: 0 0 40px; }
.notes section { padding: 22px 0; border-top: 1px solid rgb(var(--ink-rgb) / .12); }
.notes h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.notes p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.notes-build { margin-top: 28px; font-family: var(--mono); font-size: 14px; }
body.notes-page { background: var(--paper); }


.show { --sh: min(74vh, 720px); --sw: min(100%, 1120px); --g: 1; padding-top: 28px; padding-bottom: 120px; }
.show-stage { height: calc(var(--sh) + 24px); display: grid; place-items: center; }
.show-frame { position: relative; overflow: hidden; border-radius: 14px; background: #121211; transform: scale(calc(.6 + .4 * var(--g))); transform-origin: 50% 60%;
  box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .12), 0 50px 90px -40px rgb(0 0 0 / 1);
  transition: width .95s cubic-bezier(.65, 0, .35, 1), height .95s cubic-bezier(.65, 0, .35, 1), border-radius .95s ease; }
.show-frame[data-shape="tall"] { width: calc(var(--sh) * .74); height: var(--sh); }
.show-frame[data-shape="sq"] { width: calc(var(--sh) * .9); height: calc(var(--sh) * .9); }
.show-frame[data-shape="wide"] { width: min(var(--sw), calc(var(--sh) * 1.5)); height: calc(min(var(--sw), calc(var(--sh) * 1.5)) / 1.5); }
.show-it { position: absolute; inset: 0; display: block; clip-path: inset(0 0 0 100%); transition: clip-path .95s cubic-bezier(.65, 0, .35, 1); cursor: zoom-in; }
.show-it.is-on { clip-path: inset(0 0 0 0); z-index: 2; }
.show-it.was { clip-path: inset(0 0 0 0); z-index: 1; }
.show-it img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.04); transition: filter .5s ease; }
.show-it[data-shape="tall"] img { height: auto; object-fit: initial; }
.show-it[data-shape="tall"].is-on img { animation: show-pan var(--hold, 6200ms) cubic-bezier(.45, 0, .55, 1) both; }
@keyframes show-pan { 0%, 14% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + var(--sh))); } }
@media (hover: hover) and (pointer: fine) { .show-frame:hover .show-it img { filter: none; } }
.show-names { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 18px; }
.show-names button { display: grid; gap: 3px; width: 100%; padding: 12px 0 0; text-align: left; color: rgb(var(--beige-rgb) / .38); transition: color .4s ease; }
.show-names button.is-on, .show-names button:focus-visible { color: var(--beige); } @media (hover: hover) and (pointer: fine) { .show-names button:hover { color: var(--beige); } }
.sn-n { font-family: var(--mono); font-size: 13px; }
.sn-t { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.sn-k { font-size: 13px; line-height: 1.3; color: rgb(var(--beige-rgb) / .5); }
.sn-rule { order: -1; display: block; height: 1px; background: rgb(var(--beige-rgb) / .16); margin-bottom: 8px; }
.sn-fill { display: block; height: 100%; width: 0; background: var(--beige); }
.show-names button.is-on .sn-fill { width: 100%; }
.show.run .show-names button.is-on .sn-fill { width: 0; animation: sn-load var(--hold, 3600ms) linear forwards; }
@keyframes sn-load { to { width: 100%; } }
html.rm .show-it, html.rm .show-frame { transition: none; } html.rm .show-it img { animation: none !important; }
@media (max-width: 900px) { .show-names { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; } .sn-k { display: none; } }
@media (max-width: 760px) { .show { --sh: min(118vw, 560px); --sw: 100%; padding-bottom: 72px; } .show-frame[data-shape="tall"] { width: calc(var(--sh) * .66); } .show-frame[data-shape="sq"] { width: min(100%, calc(var(--sh) * .8)); height: min(100vw, calc(var(--sh) * .8)); } .show-frame[data-shape="wide"] { width: 100%; height: calc((100vw - 2 * var(--gutter)) / 1.5); } }


.sys-key { margin: 26px 0 8px; max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.who { display: inline-block; font-family: var(--mono); font-size: 12px; line-height: 1; padding: 5px 8px 4px; border-radius: 999px; vertical-align: 2px; letter-spacing: 0; }
.who-ai { background: var(--ink); color: var(--paper); }
.who-code { box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .55); color: var(--ink); }
.who-me { background: rgb(var(--ink-rgb) / .09); color: var(--ink); }
.sx { padding: 84px 0 40px; border-top: 1px solid rgb(var(--ink-rgb) / .12); margin-top: 56px; }
.sx-head { display: flex; align-items: baseline; gap: 20px; }
.sx-n { font-family: var(--mono); font-size: 14px; color: var(--ink-3); }
.sx-name { margin: 0; font-family: var(--display); font-stretch: 72%; font-weight: 600; font-size: clamp(46px, 6.6vw, 108px); line-height: .9; letter-spacing: -.02em; color: var(--ink); }
.sx-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); margin-top: 40px; align-items: start; }
.sx-line { margin: 0; font-size: clamp(20px, 1.75vw, 27px); line-height: 1.3; letter-spacing: -.012em; max-width: 30ch; color: var(--ink); }
.sx-steps { --p: 1; list-style: none; position: relative; margin: 34px 0 0; padding: 0 0 0 30px; }
.sx-steps::before, .sx-steps::after { content: ""; position: absolute; left: 6px; top: 16px; width: 1px; }
.sx-steps::before { bottom: 16px; background: rgb(var(--ink-rgb) / .14); }
.sx-steps::after { height: calc((100% - 32px) * var(--p)); background: var(--ink); }
.sx-steps li { position: relative; display: grid; grid-template-columns: 54px 1fr; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 16px; line-height: 1.45; color: rgb(var(--ink-rgb) / .3); transition: color .45s ease; }
.sx-steps li::before { content: ""; position: absolute; left: -28px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .3); transition: background .45s ease, box-shadow .45s ease; }
.sx-steps li .who { opacity: .35; transition: opacity .45s ease; justify-self: start; }
.sx-steps li.on { color: var(--ink); } .sx-steps li.on .who { opacity: 1; }
.sx-steps li.on::before { background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgb(var(--ink-rgb) / .08); }
html.rm .sx-steps li, html:not(.js) .sx-steps li { color: var(--ink); } html.rm .sx-steps li .who, html:not(.js) .sx-steps li .who { opacity: 1; }
.sx-out { margin: 0; position: relative; }
.sx-out .vis-cap { margin-top: 14px; }

.ask { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #121211; color: #EDEBE4; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .8); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; }
.ask-k { font-family: var(--mono); font-size: 12px; padding: 5px 8px 4px; border-radius: 999px; background: rgb(255 255 255 / .1); color: #CFCCC4; }
.ask-t { position: relative; white-space: nowrap; overflow: hidden; }
html.js .ask-t { clip-path: inset(0 100% 0 0); }
.ask-t::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: #EDEBE4; animation: caret 1s steps(1) infinite; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes caret { 50% { opacity: 0; } }
.sx-pages { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; padding: 0 6%; }
.sx-pages::before { content: ""; position: absolute; left: 50%; top: -46px; height: 46px; width: 1px; background: rgb(var(--ink-rgb) / .35); }
.sx-pages::after { content: ""; position: absolute; left: 28%; right: 28%; top: -12px; height: 12px; border: 1px solid rgb(var(--ink-rgb) / .35); border-bottom: 0; border-radius: 8px 8px 0 0; }
.sx-page { display: block; background: #FFF; border-radius: 4px; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .1), 0 30px 50px -30px rgb(var(--ink-rgb) / .5); overflow: hidden; transform: rotate(-1.4deg); }
.sx-page + .sx-page { transform: rotate(1.6deg) translateY(18px); }
.sx-page img { display: block; width: 100%; height: auto; filter: grayscale(1); }
html.js .sx-page { opacity: 0; transform: translateY(26px); transition: opacity .7s ease 1.8s, transform .9s cubic-bezier(.2, .7, .2, 1) 1.8s; }
html.js .sx.in .sx-page { opacity: 1; transform: rotate(-1.4deg); } html.js .sx.in .sx-page + .sx-page { transform: rotate(1.6deg) translateY(18px); transition-delay: 2s; }

.window-doc { background: #121211; }
.log { padding: 20px 22px 24px; font-family: var(--mono); font-size: 14px; line-height: 1.75; color: #D9D6CE; display: grid; gap: 6px; }
.log .ln { display: block; padding-left: 14px; position: relative; }
.log .ln::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: #6E6C66; }
.log .ln:last-child { color: #FFFFFF; }
html.js .log .ln { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * .22s + .2s); }
html.js .sx.in .log .ln { opacity: 1; transform: none; }

.sx-phone-out { display: grid; justify-items: center; }
.phone { width: min(330px, 78%); aspect-ratio: 9 / 18.5; border-radius: 46px; background: #0E0E0D; padding: 12px; box-shadow: 0 0 0 1px #2A2A27, 0 50px 80px -40px rgb(0 0 0 / .8); }
.phone-in { height: 100%; border-radius: 36px; background: #F4F3EE; padding: 44px 16px 16px; position: relative; overflow: hidden; }
.phone-in::before { content: ""; position: absolute; left: 50%; top: 12px; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #0E0E0D; }
.phone-top { display: block; text-align: center; font-size: 13px; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px solid rgb(var(--ink-rgb) / .1); margin-bottom: 16px; }
.msgs { display: grid; gap: 10px; }
.msg { display: block; max-width: 86%; padding: 10px 13px; border-radius: 18px 18px 18px 6px; background: #E3E1DA; color: var(--ink); font-size: 14px; line-height: 1.38; }
html.js .msg { opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 0 100%; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.js .sx.in .msg { opacity: 1; transform: none; } html.js .sx.in .msg + .msg { transition-delay: 1.1s; }
html.rm .ask-t, html.rm .sx-page, html.rm .log .ln, html.rm .msg { clip-path: none !important; opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
@media (max-width: 860px) { .sx-body { grid-template-columns: 1fr; row-gap: 40px; } .sx { padding-top: 56px; } .sx-pages { padding: 0; } }

.term .ok { color: #FFFFFF; }
.window-bar .tl, .window-bar .tl.r, .window-bar .tl.y, .window-bar .tl.g { background: #4A4A46; }
.window-bar .tl.r { background: #6A6A65; }


.run-box { border-radius: 14px; background: #121211; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .8); overflow: hidden; }
.run-box .ask { box-shadow: none; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.trace { display: grid; gap: 2px; padding: 14px 20px 18px; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; color: #CFCCC4; }
.tr { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
.tr-mark { position: relative; width: 12px; height: 12px; }
.tr-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .2); border-top-color: #EDEBE4; }
.tr-mark::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid #EDEBE4; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; }
.tr-s { color: #8E8C85; }
html.js .ask-t { clip-path: inset(0 100% 0 0); animation: none; }
html.js .sx.run .ask-t { animation: type 1.5s steps(28) .2s forwards; }
html.js .tr { opacity: 0; }
html.js .sx.run .tr { animation: tr-in .35s ease forwards; animation-delay: calc(1.9s + var(--i) * .85s); }
html.js .sx.run .tr-mark::before { animation: tr-spin .6s linear infinite, tr-off .01s linear forwards; animation-delay: 0s, calc(2.5s + var(--i) * .85s); }
html.js .sx.run .tr-mark::after { animation: tr-on .2s linear forwards; animation-delay: calc(2.5s + var(--i) * .85s); }
html:not(.js) .tr-mark::after { opacity: 1; } html:not(.js) .tr-mark::before { display: none; }
html.js .tr-s { opacity: 0; }
html.js .sx.run .tr-s { animation: tr-on .25s ease forwards; animation-delay: calc(2.5s + var(--i) * .85s); }
@keyframes tr-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tr-spin { to { transform: rotate(360deg); } }
@keyframes tr-off { to { opacity: 0; } }
@keyframes tr-on { from { opacity: 0; } to { opacity: 1; } }
html.js .sx-page { transition-delay: 6.4s; } html.js .sx.in .sx-page + .sx-page { transition-delay: 6.6s; }
html.rm .tr, html.rm .tr-s, html.rm .tr-mark::after { opacity: 1 !important; animation: none !important; } html.rm .tr-mark::before { display: none; }

.show-frame { transform: scale(calc(.6 + .4 * var(--g))) rotate(calc((1 - var(--g)) * -7deg)); }
html.rm .show-frame { transform: none; }


.pg-3 a { position: relative; display: block; }
.pen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pen path { fill: none; stroke: #1B1A17; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js .pen path { stroke-dashoffset: 1; }
html.js .pg-3.inked .pen-1 { transition: stroke-dashoffset 1.05s cubic-bezier(.6, .05, .3, .95); stroke-dashoffset: 0; }
html.js .pg-3.inked .pen-2 { transition: stroke-dashoffset .55s cubic-bezier(.5, 0, .3, 1) 1.35s; stroke-dashoffset: 0; }
html.rm .pen path { stroke-dashoffset: 0 !important; transition: none !important; }



.about-pics .ph img.still { filter: grayscale(1) contrast(.9) brightness(1.06) blur(var(--blur, 0px)); transition: filter .35s linear; }
html.rm .about-pics .ph img.still { filter: grayscale(1) contrast(.9) brightness(1.06); }


.fig-n { display: inline-flex; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.fig-n .dg { display: inline-block; }
html.js .fig-slide.is-on .dg { animation: dg-roll .85s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 70ms); }
@keyframes dg-roll { from { transform: translateY(108%); } to { transform: none; } }
html.rm .fig-slide .dg { animation: none !important; }


.film.is-opening { z-index: 40; transition: none; }
.film.is-settling { transition: transform 1.4s cubic-bezier(.75, 0, .2, 1); }
html.rm .film.is-opening { transform: none !important; }
.film.is-opening, .film.is-settling { transform-origin: 50% 50%; }
.film.is-opening .film-cap { opacity: 0; } .film .film-cap { transition: opacity .6s ease .2s; }
@media (max-width: 560px) { .ask { font-size: 15px; padding: 15px 16px; gap: 10px; } .trace { font-size: 13px; line-height: 1.45; padding: 12px 16px 16px; } }

.film.is-opening { z-index: 0; }
.hero-wrap > .hero-grid, .hero-wrap > .hero-name { position: relative; z-index: 2; }


html.js .gh.clock rect { opacity: 0; transition: opacity .18s linear; transition-delay: 0s; }
html.js .gh.clock rect.on { opacity: 1; }
.gh-date { margin: 10px 0 0; font-family: var(--mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; will-change: transform; }
.gh-date.done { color: var(--ink); }
html.rm .gh.clock rect { opacity: 1; } html.rm .gh-date { display: none; }


html.foot-under .foot-flow { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
html.foot-under #main { position: relative; z-index: 1; }
html.foot-under .contact { border-radius: 0 0 28px 28px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
.foot-sentinel { height: 1px; margin-top: -1px; pointer-events: none; }


.sx-pause { margin-left: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(var(--ink-rgb) / .35); }
@media (hover: hover) and (pointer: fine) { .sx-pause:hover { color: var(--ink); } }
html.rm .sx-pause { display: none; }
.sx.held *, .sx.held *::before, .sx.held *::after { animation-play-state: paused !important; }

html.js .sx .term .ln { opacity: 0; transform: translateY(4px); transition: none; }
html.js .sx.run .term .ln { animation: tr-in .3s ease forwards; animation-delay: calc(var(--i, 0) * .32s + .2s); }
html.js .sx .msg { opacity: 0; transition: none; }
html.js .sx.run .msg { animation: msg-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .4s; }
html.js .sx.run .msg + .msg { animation-delay: 1.8s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
html.rm .sx .term .ln, html.rm .sx .msg { opacity: 1 !important; transform: none !important; animation: none !important; }

.log { position: relative; overflow: hidden; transition: height .6s cubic-bezier(.3, 0, .2, 1); }
.log-in { display: grid; gap: 6px; transition: transform .7s cubic-bezier(.3, 0, .2, 1); }
.log-in.reset { transition: none; }
.log .ln.off { opacity: 0 !important; transition: opacity .4s ease; }
.log .ln { transition: opacity .5s ease; }




.notes h1, .notes .mid { color: var(--ink); }
.notes .tie-row > span { border-bottom-color: rgb(var(--ink-rgb) / .12); }
.notes .tie-row.head > span, .notes .tie-row .c { color: var(--ink-2); }

.show-it[data-shape="tall"].was img { animation: show-pan 6200ms cubic-bezier(.45, 0, .55, 1) both paused; }

[data-rotate].run .rot-fill { animation: fill var(--rd, 3.4s) linear forwards; }

html.js .figs:not(.seen) .fig-slide.is-on .dg { animation: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.win-bar .tl, .win-bar .tl.r, .win-bar .tl.y, .win-bar .tl.g { background: #4A4A46; } .win-bar .tl.r { background: #6A6A65; }
.term .cursor { background: #E6E6E1; }

html:not(.js) .sx-steps li::before { background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgb(var(--ink-rgb) / .08); }
html:not(.js):not(.live) .show-stage { height: auto; display: block; }
html:not(.js):not(.live) .show-frame { width: auto; height: auto; transform: none; overflow: visible; background: none; box-shadow: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html:not(.js):not(.live) .show-it { position: relative; inset: auto; clip-path: none; }
html:not(.js):not(.live) .show-it img { position: static; height: auto; animation: none; }
html:not(.js):not(.live) .lap-screen .rot-item:not(.is-on) { display: none; }
@media (max-width: 760px) { html:not(.js):not(.live) .show-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.contact-ground img { transition: opacity .8s ease, filter .8s ease; }
.contact-ground .lamp { position: absolute; inset: 0; opacity: 0; filter: grayscale(1) contrast(1.05) brightness(1.7);
  -webkit-mask-image: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 50%), #000 0%, rgb(0 0 0 / .55) 40%, transparent 100%);
  mask-image: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 50%), #000 0%, rgb(0 0 0 / .55) 40%, transparent 100%); }
.contact-ground.lit img:first-child { opacity: .32; }
.contact-ground.lit .lamp { opacity: .85; }
@media (hover: none), (pointer: coarse) { .contact-ground .lamp { display: none; } }
html.rm .contact-ground .lamp { display: none; }



html.js .log.stepping .ln { transition: opacity .4s ease; transition-delay: 0s; }

html:not(.js) .sx-pause, html:not(.js):not(.live) .film-toggle, html:not(.js):not(.live) .show-names { display: none; }
html:not(.js):not(.live) .fig-slide { position: static; opacity: 1; transform: none; margin-bottom: 18px; }
html:not(.js):not(.live) .figs-nav, html:not(.js):not(.live) .figs-top { display: none; }

@media (max-width: 760px) { .notes-page .nav-links { display: flex; } }






.research { padding-top: 110px; }
.ad-line-research { margin-bottom: 26px; }
.al-marks { background: #1A1A18; }
.al-marks img { object-position: 50% 50%; filter: none; }
.tick-cap { max-width: 52ch; margin: 0 auto 96px; text-align: center; font-size: 16px; line-height: 1.55; color: var(--beige-2); }
.research .res-side h3.mid { max-width: 13ch; }
@media (max-width: 760px) { .tick-cap { margin-bottom: 64px; font-size: 15px; } }


.res-part { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: start; margin-top: 150px; padding-top: 56px; border-top: 1px solid rgb(var(--beige-rgb) / .12); }
.res-h { font-family: var(--display); font-stretch: 76%; font-weight: 600; font-size: clamp(40px, 4.6vw, 72px); line-height: .94; letter-spacing: -0.018em; color: var(--paper); margin-bottom: 26px; }
.res-part .copy { font-size: 17px; color: var(--beige); }
.res-part .copy p + p { margin-top: 14px; }
.res-ledger { margin: 6px 0 0; }
.research .ledger { font-size: 15px; color: var(--beige); }
.research .ledger th { color: var(--beige-2); border-bottom-color: rgb(var(--beige-rgb) / .3); }
.research .ledger td { border-bottom-color: rgb(var(--beige-rgb) / .12); }
.research .ledger td:first-child { color: var(--paper); font-weight: 500; }
.research .ledger td:last-child { color: var(--beige-2); }
.research .vis-cap { color: var(--beige-2); margin-top: 14px; }
.research .chart svg text { fill: var(--beige); }
.research .chart .rule, .research .chart .line, .research .chart .mark { stroke: rgb(var(--beige-rgb) / .7); }
.research .chart .line-lit, .research .chart .mark-lit { stroke: var(--paper); }
.research .chart .mark-open { stroke: var(--beige); }
.research .chart .val-lit { fill: var(--paper); }
.research .chart .lbl { fill: var(--beige-2); }
.res-chart { margin: 0; padding: 28px 28px 22px; border-radius: 16px; background: var(--night-2); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1); }
.res-chart svg { width: 100%; height: auto; }
.res-chart figcaption { display: grid; gap: 6px; margin-top: 16px; }
.res-chart .fig-title { font-size: 16px; color: var(--paper); max-width: 52ch; }
.res-chart .source { font-size: 13px; color: var(--beige-2); }
@media (max-width: 760px) {
  .res-part { grid-template-columns: 1fr; row-gap: 30px; margin-top: 88px; padding-top: 40px; }
  .res-chart { padding: 18px 14px 16px; }
  .research .ledger td[data-label]::before { color: var(--beige-2); }
  .research .ledger tr { border-bottom-color: rgb(var(--beige-rgb) / .12); }
}


.research .sx { border-top-color: rgb(var(--beige-rgb) / .12); margin-top: 150px; padding-top: 56px; }
.cl-h { display: block; font-family: var(--display); font-stretch: 76%; font-weight: 600; font-size: clamp(40px, 4.6vw, 72px); line-height: .94; letter-spacing: -0.018em; color: var(--paper); margin-bottom: 28px; }
.cl-mark { display: inline-block; vertical-align: -.02em; }
.cl-h .cl-mark { width: .78em; height: .78em; margin-right: .2em; color: var(--paper); }
.cl-mark svg { display: block; width: 100%; height: 100%; }
.research .sx-line { color: var(--paper); }
.research .sx-steps::before { background: rgb(var(--beige-rgb) / .16); }
.research .sx-steps::after { background: var(--paper); }
.research .sx-steps li { color: rgb(var(--beige-rgb) / .34); grid-template-columns: 1fr; }
.research .sx-steps li.on { color: var(--paper); }
.research .sx-steps li::before { background: var(--night); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .35); }
.research .sx-steps li.on::before { background: var(--paper); box-shadow: 0 0 0 1px var(--paper), 0 0 0 5px rgb(var(--beige-rgb) / .1); }
html.rm .research .sx-steps li, html:not(.js) .research .sx-steps li { color: var(--paper); }
html:not(.js) .research .sx-steps li::before { background: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.research .sx-pause { color: var(--beige-2); text-decoration-color: rgb(var(--beige-rgb) / .35); }
@media (hover: hover) and (pointer: fine) { .research .sx-pause:hover { color: var(--paper); } }
.run-box { background: #121211; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .12); }
.run-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #17171A; border-bottom: 1px solid rgb(255 255 255 / .06); }
.run-bar .tl { width: 11px; height: 11px; border-radius: 50%; background: #4A4A46; }
.run-bar .tl:first-child { background: #6A6A65; }
.run-title { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-family: var(--mono); font-size: 13px; color: #A9A69E; }
.run-title .cl-mark { width: 14px; height: 14px; color: #D9D6CE; }
.built { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.built li > a, .built li > span:first-child { display: block; }
.built li a { color: inherit; text-decoration: none; }
.built li { border-radius: 12px; background: var(--night-2); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1); transition: box-shadow .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .built li:hover { box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .3); } }
.built-mk { display: grid; place-items: center; height: 84px; padding: 18px 16px 8px; }
.built-mk img { max-width: 100%; max-height: 40px; width: auto; height: auto; }
.built-t { display: block; padding: 8px 14px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--beige-2); }
@media (max-width: 760px) { .built { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .built-mk { height: 64px; padding: 12px 8px 4px; } .built-mk img { max-height: 28px; } .built-t { font-size: 11px; padding: 6px 8px 10px; } }


.trading { padding: 120px 0 110px; background: #EEEDE8; }
.trading .sys-head .mid { max-width: 12ch; }
.sx-solo { border-top: 0; margin-top: 8px; padding-top: 40px; }
.trading .sx-steps li, .rm-lead .sx-steps li { grid-template-columns: 1fr; }
@media (max-width: 760px) { .trading { padding: 72px 0; } }


.rm-lead { margin-top: 120px; padding-top: 56px; border-top: 1px solid rgb(var(--beige-rgb) / .12); }
.rm-lead-h { font-family: var(--display); font-stretch: 80%; font-weight: 600; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -0.015em; color: var(--paper); margin-bottom: 22px; max-width: 16ch; }
.rm-lead .sx-line { color: var(--paper); }
.rm-lead .sx-steps::before { background: rgb(var(--beige-rgb) / .16); }
.rm-lead .sx-steps::after { background: var(--paper); }
.rm-lead .sx-steps li { color: rgb(var(--beige-rgb) / .34); }
.rm-lead .sx-steps li.on { color: var(--paper); }
.rm-lead .sx-steps li::before { background: var(--night); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .35); }
.rm-lead .sx-steps li.on::before { background: var(--paper); box-shadow: 0 0 0 1px var(--paper), 0 0 0 5px rgb(var(--beige-rgb) / .1); }
html.rm .rm-lead .sx-steps li, html:not(.js) .rm-lead .sx-steps li { color: var(--paper); }
html:not(.js) .rm-lead .sx-steps li::before { background: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.rm-lead .vis-cap { color: var(--beige-2); }
.rm-lead .sx-pause { color: var(--beige-2); text-decoration-color: rgb(var(--beige-rgb) / .35); }
.rm-lead .phone { box-shadow: 0 0 0 1px #3A3A37, 0 50px 80px -40px rgb(0 0 0 / 1); }
@media (max-width: 760px) { .rm-lead { margin-top: 72px; padding-top: 40px; } }


#github.gh-night, #claude.gh-night { background: var(--night); color: var(--paper); }
.gh-night .mid { color: var(--paper); }
.gh-night .gh-num { color: var(--paper); }
.gh-night .gh-line { color: var(--beige-2); }
.gh-night .card { background: var(--night-2); border: var(--line); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 1); color: var(--beige); }
.gh-night .card .well { background: var(--night-2); }
.gh-night .gh .lvl0 { fill: rgb(var(--beige-rgb) / .07); } .gh-night .gh .lvl1 { fill: #4A4945; } .gh-night .gh .lvl2 { fill: #7C7A74; } .gh-night .gh .lvl3 { fill: #B4B1A9; } .gh-night .gh .lvl4 { fill: #EDEBE4; }
.gh-night .gh text { fill: var(--beige-3); }
.gh-night .gh-date { color: var(--beige-3); } .gh-night .gh-date.done { color: var(--paper); }
.gh-night .go .circ { border-color: rgb(var(--beige-rgb) / .38); }


.lt { --open: 1; position: relative; width: 100%; max-width: 820px; justify-self: end; perspective: 1600px; perspective-origin: 50% 96%; padding-bottom: 6%; }
.lt::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 2.4%; height: 26px; border-radius: 50%; background: rgb(var(--ink-rgb) / .45); filter: blur(18px); z-index: 0; }
.lt-lid { position: relative; z-index: 2; width: 86%; margin: 0 auto; padding: 2.5% 2.3% 3.1%; border-radius: 22px 22px 7px 7px; background: #0A0A0A;
  box-shadow: 0 0 0 1.5px #4B4B48, 0 0 0 2.5px #1E1E1C, inset 0 0 0 1px #1B1B1A;
  transform-origin: 50% 100%; transform: rotateX(calc(-74deg * (1 - var(--open)))); will-change: transform; }
.lt-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px 9px 2px 2px; background: #0F1014; }
.lt-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.04); transition: filter .5s ease;
  opacity: calc(.15 + .85 * var(--open)); }
.lt-notch { position: absolute; left: 50%; top: 0; width: 10.5%; height: 3.6%; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #0A0A0A; }
.lt-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .02) 34%, transparent 34.2%); }
.lt-base { position: relative; z-index: 3; width: 100%; height: 0; padding-bottom: 2.6%; margin-top: -1px; border-radius: 3px 3px 46% 46% / 3px 3px 100% 100%;
  background: linear-gradient(180deg, #8C8B86 0%, #5A5955 14%, #34332F 44%, #1E1D1B 78%, #0E0E0D 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.lt-scoop { position: absolute; left: 50%; top: 0; width: 13%; height: 46%; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #2A2A27, #45443F); }
html.rm .lt, html:not(.js) .lt { --open: 1; }
@media (max-width: 760px) { .lt { max-width: none; justify-self: stretch; } .lt-lid { border-radius: 14px 14px 5px 5px; } .lt-screen { border-radius: 6px 6px 2px 2px; } }

html.js .research [data-fill] .fw, html.js .rm-lead [data-fill] .fw, html.js .wf [data-fill] .fw { color: rgb(var(--beige-rgb) / .28); }
html.js .research [data-fill] .fw::after, html.js .rm-lead [data-fill] .fw::after, html.js .wf [data-fill] .fw::after { color: var(--paper); }
html.rm .research [data-fill] .fw, html.rm .rm-lead [data-fill] .fw, html.rm .wf [data-fill] .fw { color: var(--paper); }
@media (prefers-reduced-motion: reduce) { html.js .research [data-fill] .fw, html.js .rm-lead [data-fill] .fw, html.js .wf [data-fill] .fw { color: var(--paper); } }
.chart-narrow .lbl { font-size: 13px; }

@media (max-width: 760px) { .research { padding-top: 72px; } .research .sx { margin-top: 88px; padding-top: 40px; } }


.wf { margin-top: 120px; padding-top: 56px; border-top: 1px solid rgb(var(--beige-rgb) / .12); }
.wf-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: end; margin-bottom: 40px; }
.wf-head .rm-lead-h { margin-bottom: 0; }
.wf-head .sx-line { color: var(--paper); max-width: 40ch; }
.wf-stage { margin: 0; }
.wf-win { background: #101010; box-shadow: 0 50px 100px -50px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .12); }
.wf-win .window-title { display: inline-flex; gap: 8px; align-items: baseline; }
.wf-sep { color: #55534E; }
.wf-title { color: #D9D6CE; }
.wf-canvas { position: relative; aspect-ratio: 16 / 9; background-color: #111110; background-image: radial-gradient(circle, rgb(var(--beige-rgb) / .1) 1px, transparent 1.4px); background-size: 22px 22px; }
.wf-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.wf-svg.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.wf-n { fill: #1C1C1A; stroke: #4A4945; stroke-width: 1.5; }
.wf-t { stroke: #9C9A93; }
.wf-k { font-family: var(--mono); font-size: 14px; fill: #D9D6CE; }
.wf-lb { font-family: var(--text); font-size: 16px; fill: #A3A098; }
.wf-e { fill: none; stroke: #5E5C57; stroke-width: 1.6; }
.wf-ah { fill: #5E5C57; }
.wf-fl { fill: none; stroke: #EDEBE4; stroke-width: 1.6; stroke-dasharray: 3 22; stroke-linecap: round; opacity: 0; }

html.js .wf.run .wf-svg.is-on .wf-e { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wf-draw .7s cubic-bezier(.3, 0, .2, 1) forwards; animation-delay: calc(var(--d) * .12s + .15s); }
html.js .wf.run .wf-svg.is-on .wf-g { opacity: 0; animation: tr-in .45s ease forwards; animation-delay: calc(var(--d) * .12s); }
html.js .wf.run.in-view .wf-svg.is-on .wf-fl { animation: wf-flow 1.6s steps(20) infinite, wf-show .4s ease forwards; animation-delay: 0s, calc(var(--d) * .12s + .9s); }
@keyframes wf-draw { to { stroke-dashoffset: 0; } }
@keyframes wf-flow { to { stroke-dashoffset: -25; } }
@keyframes wf-show { to { opacity: .55; } }
.wf.held .wf-fl { animation-play-state: paused !important; }
.wf-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 18px; }
.wf-cap { position: relative; margin: 0; font-size: 16px; line-height: 1.5; color: var(--beige); max-width: 70ch; min-height: 3em; }
.wf-line { display: none; }
.wf-line.is-on { display: inline; }
.wf-ln { font-weight: 500; color: var(--paper); }
.wf-pause { flex: none; color: var(--beige-2); text-decoration-color: rgb(var(--beige-rgb) / .35); }
@media (hover: hover) and (pointer: fine) { .wf-pause:hover { color: var(--paper); } }
.wf-names { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 28px; }
.wf-names button { width: 100%; display: grid; gap: 7px; padding: 10px 0 9px; text-align: left; color: rgb(var(--beige-rgb) / .42); font-size: 15px; transition: color .3s ease; }
.wf-names button:focus-visible, .wf-names button.is-on { color: var(--paper); } @media (hover: hover) and (pointer: fine) { .wf-names button:hover { color: var(--paper); } }
.wf-rule { display: block; height: 1px; background: rgb(var(--beige-rgb) / .14); overflow: hidden; }
.wf-fill { display: block; height: 100%; width: 0; background: var(--paper); }
.wf-names button.is-on .wf-fill { width: 100%; }
html.js .wf.run.auto .wf-names button.is-on .wf-fill { width: 0; animation: fill 7s linear forwards; }
html.rm .wf-svg *, html.rm .wf-names .wf-fill { animation: none !important; }
html.rm .wf-svg .wf-fl { display: none; }

html:not(.js):not(.rm) .wf-canvas { aspect-ratio: auto; }
html:not(.js):not(.rm) .wf-svg { position: static; opacity: 1; visibility: visible; display: block; height: auto; aspect-ratio: 16 / 9; }
html:not(.js):not(.rm) .wf-svg + .wf-svg { border-top: 1px solid rgb(var(--beige-rgb) / .1); }
html:not(.js):not(.rm) .wf-line { display: block; margin-bottom: 8px; }
html:not(.js):not(.rm) .wf-names, html:not(.js):not(.rm) .wf-pause, html:not(.js):not(.rm) .wf-sep, html:not(.js):not(.rm) .wf-title { display: none; }
@media (max-width: 760px) {
  .wf { margin-top: 72px; padding-top: 40px; }
  .wf-head { grid-template-columns: 1fr; row-gap: 18px; margin-bottom: 26px; }
  .wf-canvas { overflow-x: auto; overflow-y: hidden; aspect-ratio: auto; height: auto; overscroll-behavior-x: contain; }
  .wf-svg { position: static; display: none; width: var(--pw, 782px); height: var(--ph, 440px); max-width: none; transition: none; }
  .wf-svg.is-on { display: block; }
  html:not(.js):not(.rm) .wf-svg { display: block; }
  .wf-names { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .wf-names button { font-size: 14px; }
  .wf-foot { flex-direction: column; gap: 8px; }
}
.wf-win .window-bar { background: #161615; }
.wf-win .window-title { white-space: nowrap; }
.wf-hint { display: none; margin: 10px 0 0; font-family: var(--mono); font-size: 12px; color: var(--beige-3); }
html:not(.js):not(.rm) .wf-hint { display: none; }

.window-bar .window-title, .window-bar .window-title span { width: auto; height: auto; border-radius: 0; background: none; }

.wf-cap { display: grid; min-height: 0; }
.wf-line, .wf-line.is-on { display: block; grid-area: 1 / 1; visibility: hidden; }
.wf-line.is-on { visibility: visible; }
html:not(.js):not(.rm) .wf-cap { display: block; }
html:not(.js):not(.rm) .wf-line { visibility: visible; }
@media (max-width: 760px) { .wf .wf-hint { display: block; } html:not(.js):not(.rm) .wf .wf-hint { display: none; } }


html.foot-under:not(.foot-near) .foot-flow { visibility: hidden; }

html.js:not(.grain-on) .filmgrain::before, html.rm:not(.grain-on) .filmgrain::before { background-image: none; }
.filmgrain { transition: opacity 1.2s ease; }
html.js:not(.grain-on) .filmgrain, html.rm:not(.grain-on) .filmgrain { opacity: 0; }

@media (max-width: 760px) { html.js .wf .wf-fl { display: none; } }

@keyframes fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wf-fill { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
.wf-names button.is-on .wf-fill { width: 100%; transform: scaleX(1); }
html.js .wf.run.auto .wf-names button.is-on .wf-fill { width: 100%; transform: scaleX(0); animation: fill-x 7s linear forwards; }
.figs-fill { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
.figs.run .figs-fill { animation: fill-x var(--fd, 3.6s) linear forwards; }



.film-seam { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: #050505; transition: opacity 1s ease; }   
.film.is-seam .film-seam { opacity: 1; transition-duration: .8s; }
@keyframes film-static-jitter { 0% { background-position: 0 0; } 50% { background-position: 71px 37px; } 100% { background-position: 23px 91px; } }
.film.is-opening, .film.is-settling { transform: none !important; }


.chart .col { fill: rgb(var(--ink-rgb) / .22); }
.chart .col-lit { fill: var(--ink); }
.chart .col-open { fill: none; stroke: rgb(var(--ink-rgb) / .5); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .base { stroke: rgb(var(--ink-rgb) / .25); stroke-width: 1; }
.research .chart .col { fill: rgb(var(--beige-rgb) / .28); }
.research .chart .col-lit { fill: var(--paper); }
.research .chart .col-open { stroke: rgb(var(--beige-rgb) / .55); }
.research .chart .base { stroke: rgb(var(--beige-rgb) / .3); }
.chart .rule-lbl { font-size: 13px; }


.res-desks { grid-template-columns: 1fr; row-gap: 34px; }
.res-desks .res-part-text .copy { max-width: 52ch; }
.desks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.desk-card { padding: 26px 26px 22px; border-radius: 16px; background: var(--night-2); box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .1); color: var(--beige); font-size: 16px; line-height: 1.5; }
.desk-card p + p { margin-top: 12px; }
.desk-firm { font-size: 19px; font-weight: 500; color: var(--paper); margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.desk-firm span { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--beige-2); }
.desk-marks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.desk-marks li { display: flex; align-items: center; min-height: 34px; }
.desk-marks img { max-height: 30px; width: auto; height: auto; }
.desk-marks-sm img { max-height: 20px; opacity: .85; }
.dk-name { font-family: var(--mono); font-size: 12.5px; color: var(--paper); padding: 6px 10px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(var(--beige-rgb) / .22); }
.desk-marks-sm .dk-name { font-size: 11.5px; color: var(--beige-2); padding: 4px 8px; }
@media (max-width: 760px) { .desks { grid-template-columns: 1fr; gap: 16px; } .desk-card { padding: 20px 18px; } }



.app-soon { margin: 10px 0 18px; color: var(--ink-2); }


.res-desk { align-items: center; }
.res-desk .sx-line { max-width: 34ch; }
.lt-desk { max-width: 100%; }

.desk-firm-mk { display: block; align-self: flex-start; height: 24px; width: auto; max-width: 62%; object-fit: contain; margin-bottom: 12px; }


.tr-beat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); align-items: start; }
.tr-beat + .tr-beat { margin-top: 120px; padding-top: 56px; border-top: 1px solid rgb(var(--ink-rgb) / .12); }
.tr-text .copy { font-size: 17px; color: var(--ink); }
.tr-text .copy p + p { margin-top: 14px; }
.tr-h { color: var(--ink); }
.tr-chart { margin: 0; }
.tr-chart .page-img { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -34px rgb(var(--ink-rgb) / .5), 0 0 0 1px rgb(var(--ink-rgb) / .1); background: #2A2A28; }
.tr-chart img { display: block; width: 100%; height: auto; }
.tr-chart figcaption { display: grid; gap: 6px; margin-top: 16px; }
.tr-chart .fig-title { font-size: 16px; color: var(--ink); max-width: 52ch; }
.tr-chart .source, .tr-fields .source, .tr-ladder .source, .tr-null .source { font-size: 13px; color: var(--ink-2); }
.tr-exhibits { display: grid; gap: 28px; }
.tr-fields, .tr-ladder, .tr-null { margin: 0; }
.fields { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fields li { font-family: var(--mono); font-size: 12.5px; color: var(--ink); padding: 6px 10px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .22); background: rgb(255 255 255 / .35); }
.fields li.jf-held { color: rgb(var(--ink-rgb) / .45); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .12); background: rgb(255 255 255 / .18); }
.ladder { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ladder li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / .45); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .12); font-size: 16px; color: var(--ink); }
.ladder-g { font-family: var(--display); font-stretch: 74%; font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -0.01em; }
.tr-engine { display: block; }
.tr-engine .sys-head { margin-bottom: 48px; }
.tr-null { margin-top: 56px; padding: 24px 24px 18px; border-radius: 16px; background: rgb(255 255 255 / .45); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.tr-null svg { width: 100%; height: auto; display: block; }
.tr-null figcaption { display: grid; gap: 6px; margin-top: 14px; }
.tr-null .fig-title { font-size: 16px; color: var(--ink); max-width: 60ch; }
.nh-bar { fill: rgb(var(--ink-rgb) / .28); }
.nh-obs { stroke: var(--ink); stroke-width: 2; }
.nh-base { stroke: rgb(var(--ink-rgb) / .3); stroke-width: 1; }
.nh-lbl { font-family: var(--text); font-size: 14px; fill: var(--ink); }
.nh-val { font-family: var(--text); font-size: 12.5px; fill: var(--ink); }
.nh-ax { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-2); }
.tr-close { margin: 64px 0 0; font-family: var(--display); font-stretch: 76%; font-weight: 600; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.014em; color: var(--ink); max-width: 20ch; }
@media (max-width: 760px) { .tr-beat { grid-template-columns: 1fr; row-gap: 28px; } .tr-beat + .tr-beat { margin-top: 72px; padding-top: 36px; } .tr-null { padding: 16px 12px 12px; } }

.app-mac, .desk-mac { width: 108%; margin-right: -4%; }
@media (max-width: 760px) { .app-mac, .desk-mac { width: 100%; margin: 0; } }

.desk-marks-sm img { max-height: 16px; }
.desk-marks img { max-height: 26px; }


.tr-beat.tr-merged { grid-template-columns: 1fr; margin-top: 56px; padding-top: 0; border-top: 0; }
.tr-merged .tr-exhibits { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 2); align-items: start; }
@media (max-width: 760px) { .tr-beat.tr-merged { margin-top: 36px; padding-top: 0; } .tr-merged .tr-exhibits { grid-template-columns: 1fr; } }


.mac { --mac-al: #2c2e33; --mac-al-hi: #6a6d74; --mac-al-lo: #141518; container-type: inline-size; margin: 0; width: 100%; user-select: none; }
.mac-body { position: relative; width: 100%; padding-bottom: 5cqw; }
.mac-lid { position: relative; width: 91cqw; margin: 0 auto; padding: 0.42cqw; border-radius: 3.1cqw 3.1cqw 0.7cqw 0.7cqw;
  background: linear-gradient(180deg, var(--mac-al-hi) 0%, var(--mac-al) 1.4%, var(--mac-al) 96%, var(--mac-al-lo) 100%);
  box-shadow: 0 0 0 0.08cqw rgb(0 0 0 / .55), 0 0 0 0.17cqw rgb(255 255 255 / .11), inset 0 0.06cqw 0 rgb(255 255 255 / .26), inset 0.06cqw 0 0 rgb(255 255 255 / .08), inset -0.06cqw 0 0 rgb(255 255 255 / .08); }
.mac-glass { position: relative; padding: 2.05cqw 2.05cqw 2.5cqw; border-radius: 2.75cqw 2.75cqw 0.4cqw 0.4cqw; background: #050506;
  box-shadow: inset 0 0 0 0.12cqw rgb(255 255 255 / .05); overflow: hidden; }
.mac-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 0.95cqw 0.95cqw 0 0; overflow: hidden; background: #0b0b0c; }
.mac-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) contrast(1.06); }
.mac-notch { position: absolute; top: 2.05cqw; left: 50%; width: 11.6cqw; height: 1.55cqw; transform: translateX(-50%); background: #050506;
  border-radius: 0 0 0.75cqw 0.75cqw; display: grid; place-items: center; }
.mac-notch::before, .mac-notch::after { content: ""; position: absolute; top: 0; width: 0.5cqw; height: 0.5cqw;
  background: radial-gradient(circle at 0 100%, transparent 0.5cqw, #050506 0.52cqw); }
.mac-notch::before { left: -0.5cqw; } .mac-notch::after { right: -0.5cqw; transform: scaleX(-1); }
.mac-cam { width: 0.62cqw; height: 0.62cqw; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #3b4250 0%, #12151b 55%, #07080a 100%);
  box-shadow: 0 0 0 0.08cqw #17191d; }
.mac-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .035) 26%, rgb(255 255 255 / 0) 44%); }
.mac-hinge { position: relative; display: block; width: 76cqw; height: 0.95cqw; margin: 0 auto;
  background: linear-gradient(180deg, #0c0d0f 0%, #1d1f23 45%, #0e0f11 100%); border-radius: 0 0 0.4cqw 0.4cqw; }
.mac-base { position: relative; display: block; width: 100cqw; height: 2.15cqw; margin-top: -0.2cqw;
  border-radius: 0.35cqw 0.35cqw 3.4cqw 3.4cqw / 0.35cqw 0.35cqw 1.9cqw 1.9cqw;
  background: linear-gradient(180deg, #8a8d94 0%, #4a4d53 9%, #34363b 34%, #232428 72%, #121315 100%);
  box-shadow: inset 0 0.07cqw 0 rgb(255 255 255 / .35), inset 0 -0.05cqw 0 rgb(255 255 255 / .08); z-index: 1; }
.mac-scoop { position: absolute; top: 0; left: 50%; width: 14.5cqw; height: 0.78cqw; transform: translateX(-50%);
  border-radius: 0 0 1.2cqw 1.2cqw / 0 0 0.78cqw 0.78cqw; background: linear-gradient(180deg, #17181b 0%, #2a2c31 70%, #3a3c41 100%); }
.mac-shadow { position: absolute; left: 2cqw; right: 2cqw; bottom: 2.1cqw; height: 2.6cqw; border-radius: 50%;
  background: rgb(var(--ink-rgb) / .55); filter: blur(1.6cqw); z-index: 0; }
.app-mac, .desk-mac { width: 104%; margin-right: -2%; }
@media (max-width: 760px) { .app-mac, .desk-mac { width: 100%; margin: 0; } }


.night .mac-base, .gh-night .mac-base, .res-desk .mac-base { box-shadow: inset 0 0.07cqw 0 rgb(255 255 255 / .45), 0 0 0 0.08cqw rgb(255 255 255 / .06); }
.res-desk .mac-shadow { background: rgb(0 0 0 / .9); }

.tr-replay { margin: 0; }
.tr-replay .tr-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--paper);
  box-shadow: 0 30px 60px -34px rgb(var(--ink-rgb) / .5), 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.tr-replay canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.tr-replay figcaption { display: grid; gap: 6px; margin-top: 16px; }
@media (max-width: 760px) { .tr-replay .tr-stage { aspect-ratio: 4 / 3; border-radius: 12px; } }


@media (min-width: 761px) { .res-solo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.scene.research { overflow: clip; }
.read { position: relative; z-index: 2; margin-top: 120px; }
.read + .res-part { margin-top: 72px; }
.read .pen .pen-2 { display: none; }
.read:not(.read-live) .pen .pen-1 { stroke-dashoffset: 0; transition: none; }
.read-canvas, .read-vig, .read-shade, .read-n { display: none; }

.read-stage { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--gap) * 2); row-gap: 28px; align-items: center; }
.read-page { position: relative; max-width: 440px; }
.read-page > a, .read-sheet > a { position: relative; display: block; background: var(--card); }
.read-page > a { border-radius: 3px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); }
.read-page img, .read-sheet img { width: 100%; height: auto; }
.read-still { position: relative; }
.read-crop { position: relative; aspect-ratio: 380 / 200; overflow: hidden; border-radius: 3px; background: var(--paper); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); }
.read-sheet { position: absolute; left: 0; top: 0; width: calc(100% * 900 / 380); transform: translate(0, calc(-640 / 1165 * 100%)); }
.read-cap { grid-column: 1 / -1; max-width: 36rem; }
.read-line { font-family: var(--display); font-stretch: 80%; font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -0.01em; color: var(--paper); }
.read-src { margin-top: 10px; font-family: var(--mono); font-size: 14px; color: var(--beige-2); }

@media (max-width: 760px) {
  .read { margin-top: 88px; }
  .read-stage { grid-template-columns: minmax(0, 1fr); }
  .read-page { max-width: 340px; }
}

.read.read-live { height: 300vh; height: 300svh; margin-top: 96px; }
.read-live .read-stage { position: sticky; top: 0; width: 100%; max-width: none; height: 100vh; height: 100svh; display: block; overflow: hidden; margin: 0; }
.read-live .read-page { position: absolute; inset: 0; max-width: none; }
.read-live .read-page > a { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); box-shadow: none; }
.read-live .read-page:focus-within { outline: 2px solid var(--beige); outline-offset: -10px; }
.read-live .read-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.read-live .read-vig { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 70% 62% at 50% 40%, rgb(11 11 10 / 0) 52%, rgb(11 11 10 / .62) 100%); }
.read-live .read-shade { display: block; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; opacity: 0; background: linear-gradient(0deg, rgb(11 11 10 / .94) 0%, rgb(11 11 10 / .7) 45%, rgb(11 11 10 / 0) 100%); }
.read-live .read-n { display: block; position: absolute; left: var(--gutter); bottom: 24px; font-family: var(--mono); font-size: 14px; color: var(--beige-2); pointer-events: none; }
.read-live .read-still { display: none; }
.read-live .read-cap { position: absolute; left: 0; right: 0; bottom: 0; width: min(100% - 2 * var(--gutter), var(--max)); max-width: none; margin-inline: auto; padding-bottom: clamp(32px, 7vh, 72px); opacity: 0; pointer-events: none; }
.read-live .read-line { max-width: 24ch; }
@media (max-width: 760px) {
  .read.read-live { height: 230vh; height: 230svh; margin-top: 72px; }
  .read-live .read-shade { height: 52%; }
}

html.rm .read .pen .pen-1 { stroke-dashoffset: 0 !important; }
@media print {
  .read.read-live { height: auto; }
  .read-live .read-stage { position: static; height: auto; overflow: visible; }
  .read-live .read-page { position: relative; inset: auto; max-width: 440px; }
  .read-live .read-page > a { position: relative; width: auto; height: auto; overflow: hidden; clip-path: none; }
  .read.read-live .pen .pen-1 { stroke-dashoffset: 0; }
  .read-live .read-canvas, .read-live .read-vig, .read-live .read-shade, .read-live .read-n { display: none; }
  .read-live .read-cap { position: static; opacity: 1 !important; transform: none !important; width: auto; padding: 24px 0 0; }
}


.board { position: relative; background: #0E0E0D; color: var(--paper); border-radius: 18px; padding: 22px 24px 20px; overflow: hidden;
  box-shadow: 0 30px 60px -34px rgb(var(--ink-rgb) / .8); --bd-w: 30px; --bd-h: 44px; --bd-gap: 3px; }
.board::before { content: ""; position: absolute; inset: 0; background: url("img/grain-256.webp") repeat; background-size: 200px; opacity: .14; mix-blend-mode: overlay; pointer-events: none; z-index: 2; }
.bd-rule { position: relative; display: block; height: 1px; background: rgb(var(--beige-rgb) / .2); }
.bd-fill { display: block; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.board.is-set .bd-fill, html.rm .bd-fill, html:not(.js) .bd-fill { transform: none; }
.bd-rows { position: relative; list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.bd-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.bd-v { font-family: var(--display); font-stretch: 74%; font-weight: 600; font-size: calc(var(--bd-h) * .74); line-height: var(--bd-h); letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums; color: var(--paper); white-space: nowrap; min-width: calc(var(--bd-w) * 6 + var(--bd-gap) * 5); text-align: right; }
.bd-v.is-built { min-width: 0; text-align: left; }
.bd-l { font-size: 15px; line-height: 1.3; color: #B9B6AD; max-width: 26ch; }
.bd-foot { position: relative; display: block; margin-top: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--beige-2); max-width: 44ch; }

.bd-cells { display: flex; gap: var(--bd-gap); }
.bd-c { position: relative; display: block; width: var(--bd-w); height: var(--bd-h); perspective: calc(var(--bd-h) * 5.5); border-radius: 3px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .03), 0 2px 3px rgb(0 0 0 / .5); }
.bd-c::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: #050505; z-index: 1; pointer-events: none; }
.bd-c::before { content: ""; position: absolute; left: -1px; right: -1px; top: calc(50% - 2px); height: 4px; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, #34332F 0 2px, transparent 2px calc(100% - 2px), #34332F calc(100% - 2px)); }
.bd-c.is-blank { opacity: .78; }
.bd-h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bd-up { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#1F1F1C, #191917); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
.bd-dn { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(#161614, #121210); }
.bd-g { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-stretch: 74%; font-weight: 600; font-size: calc(var(--bd-h) * .74); line-height: 1; color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums; }
.bd-up .bd-g { top: 0; }
.bd-dn .bd-g { bottom: 0; color: #E4E2DB; }
.bd-sh { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.bd-fl { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%; }
.bd-bk { transform: rotateX(180deg); transform-origin: 50% 0; }
.board.is-run .bd-fl { will-change: transform; }

@media (max-width: 760px) {
  .board { --bd-w: 26px; --bd-h: 38px; padding: 18px 16px 16px; border-radius: 16px; }
  .bd-rows li { column-gap: 12px; }
  .bd-l { font-size: 14px; }
}
@media (max-width: 380px) { .board { --bd-w: 23px; --bd-h: 34px; --bd-gap: 2px; } }


.fl { position: relative; margin: 0; background: var(--paper); color: var(--ink); padding: clamp(72px, 13vh, 150px) 0 0; }
.fl-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.fl-mask { position: relative; overflow: hidden; margin: 0 var(--gutter); }
.fl-name { position: relative; }
.fl-name svg { display: block; width: 100%; height: auto; }
.fl-name svg path { fill: var(--night); fill: url(#fl-film) var(--night); }
.fl-name canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.fl.is-live .fl-name canvas { opacity: 1; }
html.js .fl.armed .fl-name { transform: translateY(104%); transition: transform 1.3s var(--ease); }
html.js .fl.armed.in .fl-name, html.js.rm .fl.armed .fl-name { transform: none; }
html.rm .fl .fl-name, html.rm .fl-name canvas { transition: none; }
.fl-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 var(--gutter); padding: 14px 0 clamp(28px, 5vh, 52px); font-family: var(--mono); font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.fl-toggle { flex: none; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(var(--ink-rgb) / .35); transition: color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .fl-toggle:hover { color: var(--ink); } }
.fl-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
html:not(.js) .fl-toggle, html.rm .fl-toggle { display: none; }
html.foot-under .contact { border-radius: 0; box-shadow: none; }
html.foot-under .fl { border-radius: 0 0 28px 28px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
@media (max-width: 760px) { .fl { padding-top: 64px; } .fl-cap { font-size: 13px; padding-bottom: 28px; } }
@media print { .fl { display: none; } }

.page:has([data-letters]) ~ * .footer-name, body:has([data-letters]) .footer-name { display: none; }

.fl-plain .fl-name svg path { fill: var(--night); }
.fl-plain { padding-bottom: clamp(28px, 5vh, 52px); }
@media (max-width: 760px) { .fl-plain { padding-bottom: 28px; } }


.app-photo { margin: 0; width: 104%; margin-right: -2%; filter: drop-shadow(0 34px 40px rgb(var(--ink-rgb) / .28)); }
.app-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .app-photo { width: 100%; margin: 0; } }


.mon { margin: 0; width: 100%; container-type: inline-size; }
.mon-card { position: relative; border-radius: 14px; aspect-ratio: 1 / .78; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), rgb(var(--ink-rgb) / .06) calc(16.66% - 1px) 16.66%), #E9E8E4;
  perspective: 170cqw; perspective-origin: 70% 30%; }
.mon-rig { position: absolute; left: 10%; top: 8%; width: 76%; transform-style: preserve-3d;
  transform: rotateY(24deg) rotateZ(8deg) rotateX(2deg); transform-origin: 50% 50%; }
.mon-body { position: relative; transform-style: preserve-3d; padding: 1.3%; border-radius: 1.2% / 1.9%; background: #0B0B0C;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); }
.mon-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #050505; transform: translateZ(-1.6cqw); }
.mon-face { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111; border-radius: .3%; }
.mon-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.mon-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0) 38%); pointer-events: none; }
.mon-side, .mon-bottom { display: none; }
.mon-stand { position: absolute; left: 40%; top: 60%; width: 17%; height: 70%; transform: translateZ(-5cqw); }
.mon-neck { position: absolute; inset: 0; border-radius: 2.4cqw 2.4cqw 0 0;
  background: linear-gradient(90deg, #8f8f8d 0%, #dcdcd9 20%, #b7b7b4 46%, #f0f0ed 70%, #858583 100%); }
.mon-hole { position: absolute; left: 50%; top: 46%; width: 36%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ededea, #a2a29f 72%); box-shadow: inset 0 2px 6px rgb(0 0 0 / .28); }
.mon-card::after { content: ""; position: absolute; left: 22%; right: 18%; bottom: 3%; height: 8%; border-radius: 50%; background: rgb(0 0 0 / .14); filter: blur(22px); }


.res-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--gap) * 2.4); align-items: start;
  margin-top: 150px; padding-top: 56px; border-top: 1px solid rgb(var(--beige-rgb) / .12); }
.res-col-r { margin-top: 260px; }
.res-col > figure { margin: 0 0 34px; }
.res-col .res-part-text { max-width: 54ch; }
.res-col .copy { font-size: 17px; color: var(--beige); } .res-col .copy p + p { margin-top: 14px; }
.res-col .ledger { font-size: 13px; }
@media (max-width: 760px) { .res-pair { grid-template-columns: 1fr; row-gap: 72px; margin-top: 88px; padding-top: 40px; } .res-col-r { margin-top: 0; } }

.tr-first .tr-replay { margin-top: 96px; }
.tr-merged .tr-ladder { margin-top: 110px; }
@media (max-width: 760px) { .tr-first .tr-replay, .tr-merged .tr-ladder { margin-top: 0; } }




html.js [data-rise] { padding-bottom: .16em; }
.tr-beat.tr-engine { border-top: 0; margin-top: 56px; padding-top: 0; }
.tr-merged .tr-exhibits { grid-template-columns: 1fr; }
@media (max-width: 760px) { .tr-beat.tr-engine { margin-top: 40px; } }


.app .app-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.app-shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gap) * 1.2); margin-top: 64px; }
.app-shot { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -36px rgb(var(--ink-rgb) / .55), 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.app-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .app-shots { grid-template-columns: 1fr; margin-top: 36px; } }

.tr-engine .sys-head { align-items: start; }


.interlude { position: relative; height: 300vh; background: var(--night); overflow: clip; }
.interlude .scatter-stage { position: sticky; top: 0; height: 100svh; overflow: clip; z-index: 2; }
.interlude .scatter-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-ph { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; border-radius: 4px; overflow: hidden; background: var(--night-2);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); transform-origin: 50% 50%; backface-visibility: hidden; }
.sc-ph img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
.sc-ph::after { content: ""; position: absolute; inset: 0; background: var(--night); opacity: var(--dim, 0); pointer-events: none; }
.scatter-field .sc-ph:first-child { left: 50%; top: 50%; width: min(70vw, 1040px); z-index: 2; }
html.js .interlude.is-live .sc-ph { will-change: transform, opacity; }
.il-words { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; font-family: var(--display); font-stretch: 74%; font-weight: 600; color: var(--paper); text-align: center; text-shadow: 0 2px 40px rgb(0 0 0 / .55); }
.il-line { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: block; margin: 0 auto; padding: 0 var(--gutter); max-width: 15ch; font-size: clamp(44px, 6.4vw, 108px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.il-b { max-width: 13.8ch; font-size: clamp(52px, 8.2vw, 140px); line-height: .94; }
html.js .interlude .il-line { opacity: var(--lo, 0); transform: translate3d(0, var(--ly, 0px), 0); }
html.js .interlude .il-w { opacity: var(--o, .14); }
html:not(.js) .interlude { height: auto; }
html:not(.js) .interlude .scatter-stage { position: relative; height: auto; min-height: 100svh; display: grid; place-items: center; }
html:not(.js) .interlude .sc-ph:not(:first-child) { display: none; }
html:not(.js) .interlude .sc-ph:first-child { transform: translate(-50%, -50%); --dim: .55; }
html:not(.js) .interlude .il-words { position: relative; inset: auto; padding: 96px 0; }
html:not(.js) .interlude .il-line { position: static; translate: none; }
html:not(.js) .interlude .il-b { margin-top: .45em; }
@media (max-width: 760px) {
  
  html.js .interlude { height: 240svh; }   
  .interlude .scatter-stage { overflow-x: clip; overflow-y: visible; }
  .sc-ph { width: calc(var(--w) * 1.55); }
  .sc-ph:nth-child(8) { display: none; }
  .scatter-field .sc-ph:first-child { width: 70vw; }
  .scatter-field .sc-ph:nth-child(2) { left: 52%; }
  .scatter-field .sc-ph:nth-child(4) { left: 68%; }
  .scatter-field .sc-ph:nth-child(6) { left: 48%; }
  .il-words { text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 2px 28px rgb(0 0 0 / .75); }
  .il-line { font-size: clamp(42px, 11.5vw, 52px); max-width: none; }
  .il-b { font-size: clamp(52px, 14.5vw, 64px); max-width: none; }
  html.js .interlude.is-live .sc-ph { will-change: auto; }
  html.js .interlude.is-near .sc-ph { will-change: transform, opacity; }
}


.tr-engine .sys-head { grid-template-columns: 1fr; margin-bottom: 36px; }
.tr-engine .sx-side { display: grid; gap: 28px; align-content: start; min-width: 0; }
.tr-engine .sx-side .board { width: 100%; }

html.js .interlude .sc-ph { --dim: 0; }

@media (min-width: 761px) { .scatter-field .sc-ph:nth-child(7) { left: 7.5%; } }

.tr-engine .sys-head { margin-bottom: 18px; }
.tr-engine .sx-solo, .tr-engine .sx-solo .sx-body { margin-top: 0; padding-top: 0; }


html.js .ad-line[data-weight] .al-w, html.js .ad-line[data-weight] .al-hold { opacity: var(--aw, 1); }
html.js [data-under] { opacity: var(--u, 1); transform: translate3d(0, calc((1 - var(--u, 1)) * 18px), 0); }
html.rm .ad-line[data-weight] .al-w, html.rm .ad-line[data-weight] .al-hold { opacity: 1; }
html.rm [data-under] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .ad-line[data-weight] .al-w, html.js .ad-line[data-weight] .al-hold { opacity: 1; }
  html.js [data-under] { opacity: 1; transform: none; }
}


.desks { align-items: stretch; grid-template-rows: auto auto 1fr; }
.desk-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.desk-marks, .desk-marks-sm { align-content: flex-start; margin-bottom: 18px; }
.desk-body p + p { margin-top: 12px; }
.desk-marks img, .desk-marks-sm img { max-height: 26px; opacity: 1; }
.desk-marks-sm .dk-name { font-size: 12.5px; color: var(--paper); padding: 6px 10px; }
.desk-body p { text-wrap: pretty; }
@media (max-width: 760px) { .desks { grid-template-rows: none; } .desk-card { display: flex; flex-direction: column; grid-row: auto; } }


@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  
  .menu-btn { height: 44px; }
  dialog.menu .menu-close { height: 44px; top: 6px; }
  .nav-name { display: inline-block; padding: 12px 0; }
  .notes-page .nav .btn { height: 44px; }
  .film-toggle, .sx-pause, .wf-pause, .fl-toggle, .contact .copy-btn, .hero-links a, .contact-direct a, .footer-row a, .footer-row .copy-btn,
  .footer-end a, .footer-nav a, .modine-page a.filed, .case-more a, .notfound a { position: relative; }
  .film-toggle::before, .sx-pause::before, .wf-pause::before, .fl-toggle::before, .contact .copy-btn::before, .hero-links a::before, .contact-direct a::before,
  .footer-row a::before, .footer-row .copy-btn::before, .footer-end a::before, .footer-nav a::before, .modine-page a.filed::before, .case-more a::before,
  .notfound a::before { content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
  .hero-links { gap: 18px 22px; }
  .footer-nav { row-gap: 14px; }
  .gh-head .go-sm .circ { width: 44px; height: 44px; }
  .footer-row { gap: 20px 24px; }
  
  dialog.menu { height: 100dvh; max-height: 100dvh; }
  dialog.menu .menu-inner { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  html.js dialog.menu[open] { animation: lb-in .35s var(--ease) both; }
  
  .nav.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 11 10 / .96); }
  .hero-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 11 10 / .72); }
  
  .mid { font-size: clamp(38px, 10.5vw, 46px); text-wrap: balance; }
  .res-h { font-size: clamp(42px, 11.5vw, 50px); text-wrap: balance; }
  
  .built-t { font-size: 12.5px; }
  .dk-name, .desk-marks-sm .dk-name { font-size: 12.5px; }
}


@media (min-width: 761px) and (max-height: 500px) and (pointer: coarse) {
  .hero.opening { position: relative; height: auto; min-height: 100svh; }
  
  .hero-wrap { height: auto; transform: none; opacity: 1; }
  
  .film { height: calc(100svh - var(--nav-h) - 27svh - 40px); aspect-ratio: auto; width: 52vw; max-width: none; }
  .hero-name { font-size: 25svh; }
  
  .hero-side { transform: translate(-16px, 0); }
}

@media (max-width: 760px) and (max-height: 500px) and (pointer: coarse) {
  .hero.opening { position: relative; height: auto; min-height: 100svh; }
  .hero-wrap { height: auto; transform: none; opacity: 1; }
  .film { flex: none; height: 70svh; }
  
  .hero.opening { height: 100svh; }
  .hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr auto; grid-template-areas: "text film" "now film" "name name"; column-gap: 18px; height: 100svh; padding-bottom: 10px; }
  .film { grid-area: film; height: auto; min-height: 0; }
  .hero-card { grid-area: film; align-self: end; margin: 0 10px 10px; }
  .hero-text { grid-area: text; }
  .hero-links { margin-top: 10px; }
  .now { grid-area: now; align-self: end; margin: 0; }
  .hero-name { grid-area: name; font-size: 23svh; margin-top: 8px; }
}


@media (max-width: 760px) {
  
  .tick-cap { font-size: 16px; text-align: left; margin: 0 0 56px; max-width: none; text-wrap: pretty; }
  
  .res-pages { display: block; position: relative; max-width: none; padding-left: 18%; }
  .pg-3 { position: relative; z-index: 1; width: 100%; }
  .pg-1 { position: absolute; left: 0; top: 56px; width: 42%; margin-top: 0; z-index: 0; }
  .pg-1 a { box-shadow: 0 30px 60px -30px rgb(0 0 0 / 1), 0 0 0 1px rgb(var(--beige-rgb) / .1); }
  .pg-n { bottom: -26px; }
  
  .res-pages.res-cover-only { padding: 0 9%; }
  
  .res-pair { margin-top: 72px; padding-top: 26px; }
  .research .sx { margin-top: 88px; padding-top: 40px; padding-bottom: 24px; }
  .research .res-desks { margin-top: 72px; }
  
  .res-col { display: flex; flex-direction: column; }
  .res-col .res-part-text { display: contents; }
  .res-col .res-h { order: -1; margin-bottom: 18px; }
  .res-col > figure { margin: 0 0 24px; }
  .res-col-r .res-chart { margin-left: 8%; }
  
  .research .res-col .ledger { font-size: 15px; line-height: 1.45; }
  .research .ledger td:first-child { font-size: 16px; padding-bottom: 6px; }
  .research .ledger td[data-label]::before { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
  .research .ledger tr { padding: 14px 0; }
  
  .built-t { font-size: 12.5px; padding: 6px 8px 10px; }
  .built-mk { height: 56px; }
  
  .chart-narrow .lbl, .chart-narrow .val, .chart-narrow .rule-lbl { font-size: 16px; }
  .chart-narrow .val-lit { font-size: 17px; }
}



.nh-narrow, .tr-null .nh-narrow { display: none; }
.nh-narrow .nh-lbl { font-size: 16px; }
.nh-narrow .nh-val { font-size: 14px; }
.nh-narrow .nh-ax { font-size: 13px; }
@media (max-width: 760px) {
  .tr-null .nh-wide { display: none; }
  .tr-null .nh-narrow { display: block; }
  .tr-null { padding: 16px 8px 12px; }
  
  .tr-first { row-gap: 0; }
  .tr-first .tr-text, .tr-first .tr-text .copy { display: contents; }
  .tr-first #h-trading { order: 0; margin-bottom: 12px; }
  .tr-first .copy p:first-child { order: 1; }
  .tr-first .tr-replay { order: 2; margin: 28px 0; }
  .tr-first .copy p:nth-child(n+2) { order: 3; }
  .tr-first .copy p + p { margin-top: 14px; }
  
  .trading .term .ln:nth-child(6) { white-space: normal; }
  
  .sx-out .vis-cap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .sx-out .vis-cap .sx-pause { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }
  
  .tr-engine #engines.sx-solo { padding-bottom: 0; }
  .tr-null { margin-top: 40px; }
  
  .trading .bd-l { max-width: none; text-wrap: balance; font-size: 14px; line-height: 1.25; }
}

@media (min-width: 761px) { html.js .tr-first .copy p.rv { opacity: 1; transform: none; transition: none; } }
@media (max-width: 430px) { .trading .board { --bd-w: 24px; --bd-h: 36px; --bd-gap: 2px; } }

@media (max-width: 860px) and (min-width: 561px) and (orientation: landscape) and (pointer: coarse) {
  .tr-engine .sx-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .trading .board { --bd-w: 24px; --bd-h: 36px; --bd-gap: 2px; padding: 18px 16px 16px; }
  .trading .bd-rows li { column-gap: 12px; }
  .trading .bd-l { max-width: none; text-wrap: balance; font-size: 14px; line-height: 1.25; }
  
  .trading .term .ln:nth-child(6) { white-space: normal; }
}


.win-view picture { display: block; }
@media (max-width: 760px) {
  
  .wf-canvas { height: var(--phmax, 450px); display: flex; align-items: center; }
  .wf-svg { flex: none; }
  
  .wf-head .rm-lead-h { max-width: none; text-wrap: balance; }
  .wf-hint { font-size: 13px; }
  .wf-names button { font-size: 15px; color: rgb(var(--beige-rgb) / .55); }
  
  .gh { overflow: visible; }
  .gh svg { min-width: 0; width: 100%; overflow: visible; margin-top: 12px; }
  .gh text { font-size: 30px; letter-spacing: -.04em; }
  .gh text[x="0"] { display: none; }
  .gh-date { width: max-content; }
  .gh-night .card .well { overflow: clip; }
  #github { padding: 72px 0; }
  #claude { padding: 24px 0 72px; }
  
  .gh-num { font-size: 28vw; }
  
  .ad-line-contact { font-size: 22vw; flex-wrap: wrap; row-gap: .06em; white-space: normal; }
  .ad-line-contact .al-r { flex-basis: 100%; text-align: center; }
  
  .app-shot { aspect-ratio: 1 / 1; width: 92%; }
  .app-shot:nth-child(2) { margin-left: 8%; }
  .app-shot img { height: 100%; object-fit: cover; }
  .app-shot:nth-child(1) img { object-position: 30% 45%; }
  .app-shot:nth-child(2) img { object-position: 48% 50%; }
  
  .foot-flow { min-height: 92svh; }
  .foot-flow > .wrap { padding-bottom: 240px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .wf-canvas { aspect-ratio: auto; height: calc(100svh - var(--nav-h) - 72px); }
  .wf-svg { inset: 0; }
}

@media (max-width: 760px) { .notfound h1 { font-size: clamp(56px, 18vw, 96px); text-wrap: balance; } .notes h1.mid { font-size: 44px; } .notes { min-height: 100svh; } }


@media (max-width: 760px) {
  html.js:not(.rm) [data-rise]:not(.in) > span:not(.w) { transform: translateY(var(--rise, 112%)); }
  
  .wf-k { font-size: 16px; }
  .wf-lb { font-size: 17px; }
}


.ex3-narrow { display: none; }
.ex3-narrow .lbl, .ex3-narrow .val { font-size: 15px; fill: var(--ink); }
.ex3-narrow .ex3-in { fill: var(--paper); font-weight: 500; }
.ex3-narrow .base { stroke: rgb(var(--ink-rgb) / .4); stroke-width: 1; }

.sc-ph picture, .app-shot picture { display: block; }
.app-shot picture { height: 100%; }

svg.st-relayout text { letter-spacing: .001px; }


.gh svg.gh-narrow { display: none; }   
.wf-phone { display: none; }   
@media (max-width: 760px) {
  
  .wf-win { container-type: inline-size; }
  html.js .wf-canvas { --win: min(118cqw, 72svh); height: var(--win); display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; }
  html.js .wf-svg[data-pvb] { --sh: clamp(calc(var(--hu) * .76px), calc(var(--win) * .9), calc(var(--hu) * .95px)); flex: none; margin: auto; height: var(--sh); width: calc(var(--sh) * var(--ar)); }
  
  html.js .wf-svg[data-pvb] { --sh: calc(var(--hu) * .95px); }
  
  html.js .wf-svg[data-pvb] { --sh: calc(var(--hu) * .72px); }
  
  html.js .wf-svg[data-pvb] { --sh: clamp(calc(var(--hu) * .47px), min(calc(var(--win) * .86), calc(92cqw / var(--ar))), calc(var(--hu) * .72px)); }
  html.js .wf-svg.has-ph .wf-desk { display: none; } html.js .wf-svg.has-ph .wf-phone { display: inline; }
  
  .nav.is-solid { background: #0B0B0A; }
  
  .gh svg.gh-wide { display: none; }
  .gh svg.gh-narrow { display: block; width: 100%; height: auto; min-width: 0; margin-top: 4px; overflow: visible; }
  .gh svg.gh-narrow text { font-size: 15px; letter-spacing: 0; }
  .gh svg.gh-narrow text[x="0"] { display: inline; }
  
  .ad-line-contact { row-gap: .03em; }
  .ad-line-contact .al-l { order: 1; } .ad-line-contact .al-hold { order: 2; }
  .ad-line-contact::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .ad-line-contact .al-r { order: 4; flex-basis: auto; }
  html.js .ad-line-contact .al-l { transform: translateX(calc((1 - var(--al, 1)) * -1 * var(--rl, 0px))); opacity: clamp(0, calc(var(--al, 1) * 1.4 - .3), 1); }
  html.js .ad-line-contact .al-r { transform: translateX(calc((1 - var(--al, 1)) * var(--rr, 0px))); opacity: clamp(0, calc(var(--al, 1) * 1.4 - .3), 1); }
  html.rm .ad-line-contact .al-l, html.rm .ad-line-contact .al-r { transform: none; opacity: 1; }
}


.loop-off, .loop-off *, .loop-off *::before, .loop-off *::after { animation-play-state: paused !important; }


@media (max-width: 760px) {
  html.js .ad-line-research .al-l { transform: translateX(calc((1 - var(--al, 1)) * -1 * var(--rl, 0px))); }
  html.js .ad-line-research .al-r { transform: translateX(calc((1 - var(--al, 1)) * var(--rr, 0px))); }
  
  .al-marks img { transform: scale(1.45); }
}


@media (max-width: 760px) {
  .film { flex: none; align-self: center; width: 93%; height: auto; aspect-ratio: 16 / 10; margin-top: auto; border-radius: 14px; border: 1px solid rgb(216 214 207 / .14); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .9); }
  .film-v { object-fit: cover; object-position: 50% 50%; transform: none; }
  .film-cap { top: 10px; bottom: auto; right: 12px; font-size: 13px; }
  .hero-card { margin: -30px 0 0 0; width: 82%; }
  .hero-text { margin-top: 22px; }
  .hero-name { margin-top: auto; }
}

@media (max-width: 760px) and (max-height: 500px) and (pointer: coarse) { .film { width: auto; aspect-ratio: auto; align-self: stretch; margin-top: 0; } .hero-name { margin-top: 0; } .hero-card { width: auto; margin: 0 10px 10px; } .hero-text { margin-top: 0; } }

@media (max-width: 760px) {
  .research { padding-top: 40px; }
  .scatter-field .sc-ph:nth-child(2) { top: 0%; left: 44%; width: 30vw; }
  .scatter-field .sc-ph:nth-child(4) { left: 76%; }
}

@media (min-width: 761px) {
  .res-pages.res-cover-only { grid-template-columns: minmax(0, 1fr); max-width: 372px; justify-self: start; }
  .res-cover-only .pg-cover { grid-column: 1; }
  .res-pair { margin-top: 84px; }
  .res-col-r { margin-top: 0; }
}

html.js .res-claude .ask-t { clip-path: none; animation: none; }
html.js .res-claude:not(.run) .tr, html.js .res-claude:not(.run) .tr-s, html.js .res-claude:not(.run) .tr-mark::after { opacity: 1; }
html.js .res-claude:not(.run) .tr-mark::before { opacity: 0; }
html.js .res-claude.run .tr { animation: tr-re .35s ease both; animation-delay: calc(.35s + var(--i) * .85s); }
@keyframes tr-re { from { opacity: .3; } to { opacity: 1; } }
html.js .res-claude.run .tr-mark::before { animation: tr-spin .6s linear infinite, tr-off .01s linear forwards; animation-delay: 0s, calc(.95s + var(--i) * .85s); }
html.js .res-claude.run .tr-mark::after { animation: tr-on .2s linear both; animation-delay: calc(.95s + var(--i) * .85s); }
html.js .res-claude.run .tr-s { animation: tr-on .25s ease both; animation-delay: calc(.95s + var(--i) * .85s); }


.nh-narrow .nh-lbl { font-size: 17px; }
.nh-narrow .nh-val { font-size: 15px; }
@media (max-width: 760px) { .scene.trading { padding-bottom: 16px; } .tr-null { margin-bottom: 0; } }

@media (max-width: 760px) {
  .rm-site.rm-site { height: auto; display: flex; flex-direction: column; gap: 18px; margin-bottom: 0; }
  .rm-site .rm-ph { position: relative; inset: auto; width: 100%; top: auto; left: auto; right: auto; }
  .rm-site .rm-a { order: 1; } .rm-site .rm-c { order: 2; } .rm-site .rm-b { order: 3; }
  .rm-site .rm-cap { order: 4; position: static; margin-top: 4px; text-align: left; }
}

@media (max-width: 760px) { .win-url { font-size: 12px; line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; } .win-bar .tl { flex: none; } }

@media (min-width: 761px) { html.js .wf-canvas { aspect-ratio: 5 / 2; } .rm-lead-h { text-wrap: balance; } }

@media (min-width: 761px) { .app .app-grid { max-width: var(--max, none); } .app .app-text { max-width: 760px; } }

.page { overflow-x: clip; }