@font-face {
  font-family:Space;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Space;
  src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:Inter;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Inter;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:Mono;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
:root {
  --paper:#1d241e;
  --surface:#252e25;
  --surface-2:#2e382d;
  --ink:#edf0e5;
  --muted:#aeb8a6;
  --line:#3d4839;
  --accent:#d4ef79;
  --orange:#c0d894;
  --accent-ink:#23271f;
  --display:Space,Arial,sans-serif;
  --body:Inter,Arial,sans-serif;
  --mono:Mono,monospace;
  --radius:12px
}
html[data-theme=light] {
  --paper:#f4f3ed;
  --surface:#eeeee5;
  --surface-2:#e4e5da;
  --ink:#23271f;
  --muted:#666b60;
  --line:#d6d8ce;
  --accent:#5c713b;
  --orange:#596c37;
  --accent-ink:#fafbf5;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:108px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 15px/1.7 var(--body);
  overflow-wrap:break-word
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  border:0;
  background:none;
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.5
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  display:block
}
a svg,.button svg {
  height:21px;
  width:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3,h4 {
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.12
}
h2 {
  font-size:clamp(38px,4.2vw,62px)
}
em {
  font-style:normal;
  color:var(--accent)
}
p {
  color:var(--muted)
}
::selection {
  background:var(--accent);
  color:var(--accent-ink)
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.mono {
  font:400 10px/1.5 var(--mono);
  letter-spacing:.07em
}
.eyebrow {
  font:400 10px/1.5 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:11px
}
.status-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--orange);
  display:inline-block;
  flex-shrink:0;
  box-shadow:0 0 0 4px #c0d89414
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  min-height:54px;
  padding:16px 24px;
  border-radius:99px;
  font-size:12px;
  font-weight:600;
  transition:background .2s,box-shadow .2s;
  position:relative;
  will-change:auto
}
.button-primary {
  background:var(--accent);
  color:var(--accent-ink)
}
.button-primary:hover {
  box-shadow:0 0 0 5px #d4ef791a
}
.button-dark {
  background:#21251b;
  color:#eff8e2
}
.button-dark:hover {
  background:#39422b
}
.button svg {
  transition:transform .3s
}
.button:hover svg {
  transform:translate(3px,-3px)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:12px;
  font-weight:600
}
.text-link>span:last-child {
  transition:transform .3s
}
.text-link:hover>span:last-child {
  transform:translate(3px,-3px)
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:6px
}
.skip-link {
  position:fixed;
  top:-100px;
  inset-inline-start:20px;
  z-index:100;
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px 18px
}
.skip-link:focus {
  top:12px
}
.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  z-index:60;
  height:2px;
  width:100%;
  background:var(--orange);
  transform-origin:left;
  transform:scaleX(0)
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.nav-row {
  height:84px;
  display:flex;
  align-items:center;
  gap:35px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font:700 21px var(--display);
  letter-spacing:-.06em
}
.brand-mark {
  width:32px;
  height:32px;
  fill:none;
  stroke:var(--accent);
  stroke-width:2.8
}
.brand-dot {
  font-size:13px;
  color:var(--orange);
  margin-inline-start:4px;
  align-self:start;
  vertical-align:top
}
.main-nav {
  display:flex;
  align-items:center;
  gap:29px;
  font-size:11px;
  margin-inline-start:auto
}
.main-nav a {
  padding:8px 0;
  position:relative;
  transition:color .2s
}
.main-nav a:hover,.main-nav a.current {
  color:var(--accent)
}
.main-nav a.current:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:var(--accent)
}
.nav-contact {
  border:1px solid var(--line);
  border-radius:99px;
  padding:8px 14px!important
}
.nav-contact span {
  margin-inline-start:12px
}
.nav-tools {
  display:flex;
  gap:7px;
  align-items:center
}
.language-toggle {
  font-size:11px;
  padding:9px 8px;
  border-inline-start:1px solid var(--line);
  padding-inline-start:17px
}
.icon-button {
  height:36px;
  width:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:background .2s
}
.icon-button:hover {
  background:var(--surface-2)
}
.icon-button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.motion-toggle[aria-pressed=true] {
  color:var(--orange)
}
.motion-toggle[aria-pressed=false] {
  color:var(--muted)
}
.menu-toggle {
  display:none
}
.hero {
  padding-top:84px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  column-gap:25px;
  position:relative
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero .eyebrow {
  font-size:9px;
  color:var(--muted)
}
.hero h1 {
  font-size:clamp(61px,6.6vw,104px);
  letter-spacing:-.075em;
  line-height:1.07;
  margin:28px 0
}
.hero-line {
  display:block;
  position:relative;
  white-space:nowrap
}
.outline-word {
  color:transparent;
  -webkit-text-stroke:1px var(--ink)
}
.accent-word {
  color:var(--accent)
}
.title-arrow {
  display:inline-block;
  vertical-align:middle;
  width:45px;
  height:45px;
  stroke:var(--orange);
  stroke-width:5;
  fill:none;
  margin-inline-start:8px
}
.hero-intro {
  font-size:14px;
  max-width:408px;
  line-height:1.9
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px
}
.play-link {
  font-size:11px;
  color:var(--muted);
  gap:10px
}
.play-link>span:last-child {
  color:var(--orange);
  font-size:22px
}
.hero-signature {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:34px
}
.signature {
  font:italic 27px Georgia,serif;
  letter-spacing:-1.5px;
  transform:rotate(-6deg);
  color:var(--ink)
}
.hero-signature .mono {
  font-size:7px;
  color:var(--muted);
  max-width:160px;
  border-inline-start:1px solid var(--line);
  padding-inline-start:20px;
  line-height:1.7
}
.maker-lab {
  min-height:486px;
  position:relative;
  isolation:isolate;
  --lab-angle:0deg
}
.lab-rings {
  position:absolute;
  width:360px;
  height:360px;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  z-index:-1
}
.lab-rings i {
  position:absolute;
  inset:0;
  border:1px solid var(--line);
  border-radius:50%
}
.lab-rings i:nth-child(2) {
  inset:31px
}
.lab-rings i:nth-child(3) {
  inset:65px
}
.lab-rings:after {
  content:'';
  position:absolute;
  inset:-40px -4px;
  border:1px dashed var(--line);
  border-radius:50%;
  transform:rotate(30deg)
}
.lab-coordinate {
  position:absolute;
  top:7px;
  left:15px;
  color:var(--muted);
  font-size:8px
}
.lab-coordinate.second {
  top:auto;
  left:auto;
  bottom:34px;
  right:18px
}
.lab-core {
  position:absolute;
  top:85px;
  left:50%;
  width:214px;
  height:214px;
  border-radius:43px;
  background:var(--accent);
  color:var(--accent-ink);
  transform:translateX(-50%) rotate(-12deg);
  box-shadow:11px 13px 0 var(--surface-2),12px 14px 0 var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:box-shadow .3s,background .3s
}
.lab-core>svg {
  width:145px;
  height:145px;
  stroke:var(--accent-ink);
  stroke-width:18;
  fill:none;
  transform:rotate(var(--lab-angle));
  transition:transform .65s cubic-bezier(.2,.7,.3,1)
}
.lab-core:hover {
  box-shadow:14px 17px 0 var(--surface-2),15px 18px 0 var(--line)
}
.lab-step {
  font-size:8px;
  margin-top:0;
  letter-spacing:.08em
}
.lab-slip {
  position:absolute;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 15px 25px #0002
}
.lab-code {
  top:280px;
  left:-10px;
  transform:rotate(-9deg);
  padding:20px 24px;
  z-index:4
}
.slip-top {
  font-size:7px;
  color:var(--muted)
}
.lab-code p {
  font-size:10px;
  margin-top:13px;
  line-height:2;
  color:var(--ink)
}
.lab-code p span {
  color:var(--accent)
}
.lab-code p b {
  font-weight:400;
  color:var(--orange)
}
.slip-dot {
  position:absolute;
  bottom:15px;
  right:16px;
  width:5px;
  height:5px;
  background:var(--orange);
  border-radius:50%
}
.lab-window {
  top:22px;
  right:-5px;
  width:196px;
  transform:rotate(8deg);
  z-index:1;
  overflow:hidden
}
.window-bar {
  height:30px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.window-bar .mono {
  font-size:6px;
  color:var(--muted)
}
.window-dots {
  display:flex;
  gap:4px
}
.window-dots i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--muted)
}
.lab-window>.mono {
  display:block;
  font-size:6px;
  margin:0 12px 14px;
  color:var(--muted)
}
.mini-wave {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px
}
.mini-wave i {
  width:7px;
  border-radius:4px;
  background:var(--orange);
  height:20px
}
.mini-wave i:nth-child(2n) {
  height:38px;
  background:var(--accent)
}
.mini-wave i:nth-child(3n) {
  height:53px
}
.mini-wave i:nth-child(5) {
  height:69px
}
.lab-sticker {
  position:absolute;
  top:324px;
  right:19px;
  display:flex;
  align-items:center;
  gap:13px;
  transform:rotate(10deg);
  font-size:13px;
  line-height:1.5
}
.lab-sticker>span:first-child {
  font-size:51px;
  color:var(--orange)
}
.lab-sticker b {
  font-weight:600;
  color:var(--accent)
}
.lab-caption {
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  border-top:1px solid var(--line);
  padding-top:19px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:var(--muted)
}
.lab-caption .mono {
  font-size:7px
}
.lab-caption>span:last-child {
  font-size:24px;
  color:var(--accent)
}
.hero-bottom {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:63px;
  padding:25px 0;
  border-top:1px solid var(--line);
  color:var(--muted)
}
.hero-bottom>.mono {
  font-size:8px
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:10px
}
.scroll-cue svg {
  height:25px;
  width:25px;
  stroke:var(--orange);
  stroke-width:1.3;
  fill:none
}
.stack-band {
  background:var(--surface);
  border-block:1px solid var(--line)
}
.stack-band>.wrap {
  display:flex;
  align-items:center;
  gap:55px;
  padding-block:24px
}
.stack-band .mono {
  font-size:8px;
  color:var(--muted);
  white-space:nowrap
}
.stack-band .wrap>div {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font:500 17px var(--display)
}
.stack-band i {
  font-style:normal;
  color:var(--accent);
  font-size:17px
}
.section {
  padding-block:91px
}
.section-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:39px
}
.section-top h2 {
  margin-top:18px
}
.section-top>.eyebrow,.section-top .eyebrow {
  color:var(--orange)
}
.section-top>p {
  font-size:12px;
  max-width:295px;
  line-height:1.8;
  margin-bottom:3px
}
.work-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:19px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.filters button {
  font-size:11px;
  padding:9px 15px;
  border-radius:99px;
  color:var(--muted);
  border:1px solid transparent;
  transition:background .2s,color .2s
}
.filters button.active {
  background:var(--accent);
  color:var(--accent-ink)
}
.filters button:not(.active):hover {
  border-color:var(--line);
  color:var(--ink)
}
.filters button>span:last-child {
  margin-inline-start:5px
}
.project-count {
  font-size:8px;
  color:var(--muted);
  white-space:nowrap
}
.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px 30px
}
.project-card:first-child {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.23fr 1fr;
  align-items:center;
  gap:43px
}
.project-art {
  position:relative;
  height:310px;
  overflow:hidden;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line);
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .2s;
  isolation:isolate
}
.project-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#ffffff17,transparent 45%);
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .3s
}
.project-art:hover:after {
  opacity:1
}
.project-card:first-child .project-art {
  height:368px
}
.project-art.frames {
  background:#30362c
}
.project-art.subtitles {
  background:#38402b
}
.project-art.converter {
  background:#353b2b
}
.project-art>img {
  width:100%;
  height:100%;
  object-fit:cover
}
.project-number {
  position:absolute;
  top:20px;
  left:20px;
  color:#c5c9b9;
  font-size:9px
}
.project-status {
  position:absolute;
  top:17px;
  right:17px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#edf0e9;
  background:#1b1d19d9;
  border:1px solid #6f717166;
  border-radius:99px;
  font-size:8px;
  padding:5px 10px;
  z-index:2
}
.project-status i {
  height:4px;
  width:4px;
  border-radius:50%;
  background:#abb1a1
}
.project-status.live i {
  background:#c7dca6
}
.study-label {
  position:absolute;
  bottom:14px;
  left:18px;
  color:#c7ccc0;
  font-size:7px
}
.landscape {
  width:100%;
  height:100%;
  object-fit:cover
}
.frame-visual {
  height:100%;
  position:relative;
  direction:ltr
}
.frame-sheet {
  position:absolute;
  width:65%;
  height:60%;
  top:25%;
  left:17%;
  border:6px solid #f3f3ed;
  background:#f3f3ed;
  box-shadow:0 15px 30px #0003;
  border-radius:3px;
  overflow:hidden
}
.frame-sheet.back {
  transform:rotate(-12deg);
  top:18%;
  left:12%;
  filter:brightness(.8)
}
.frame-sheet.front {
  transform:rotate(7deg);
  top:22%;
  left:21%;
  height:62%;
  width:68%;
  display:flex;
  flex-direction:column
}
.frame-sheet .landscape {
  height:calc(100% - 25px)
}
.frame-sheet>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 5px;
  font-size:6px;
  color:#5b6654
}
.frame-sheet b {
  font-size:6px;
  font-weight:400
}
.frame-float {
  position:absolute;
  bottom:40px;
  right:20px;
  background:#c7dca6;
  color:#283021;
  padding:9px 13px;
  transform:rotate(-5deg);
  font-size:8px;
  border-radius:3px
}
.project-meta .eyebrow {
  font-size:8px;
  color:var(--muted)
}
.project-title {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:start;
  padding:14px 0
}
.project-title h3 {
  font-size:31px
}
.project-title svg {
  width:27px;
  height:27px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  transition:transform .3s
}
.project-title:hover svg {
  transform:translate(5px,-5px)
}
.project-meta>p {
  font-size:12px;
  max-width:460px;
  line-height:1.9
}
.project-footer {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}
.project-footer .mono {
  font-size:8px;
  color:var(--muted);
  max-width:62%
}
.project-footer .text-link {
  font-size:10px;
  white-space:nowrap;
  color:var(--accent)
}
.project-card:first-child h3 {
  font-size:42px
}
.project-card:first-child .project-footer {
  border:0;
  flex-direction:column;
  align-items:start;
  gap:8px;
  margin-top:18px
}
.project-card:first-child .project-footer .mono {
  max-width:none
}
.project-card:first-child .project-footer .text-link {
  font-size:12px
}
.subtitle-visual {
  position:absolute;
  top:21%;
  left:10%;
  width:80%;
  padding:15px;
  transform:rotate(-4deg);
  background:#f4f8ef;
  border:1px solid #e2ecd2;
  color:#394429;
  border-radius:8px;
  box-shadow:0 15px 30px #0002
}
.mock-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  font:500 10px var(--display);
  margin-bottom:14px
}
.tiny-cross {
  color:var(--orange);
  font-size:30px;
  line-height:1
}
.mock-toolbar .tiny-cross {
  font-size:18px;
  color:#7c905f
}
.mock-toolbar>span:last-child {
  margin-inline-start:auto;
  font:7px var(--mono)
}
.subtitle-line {
  background:#e9efe0;
  border:1px solid #dfe9d1;
  padding:10px;
  border-radius:4px;
  margin-top:7px
}
.subtitle-line .mono {
  font-size:6px;
  color:#7c8969
}
.subtitle-line p {
  font-size:9px;
  color:#626c52;
  margin-top:3px
}
.subtitle-line.translated {
  background:#e1f1c8;
  border-color:#d2e7b3;
  position:relative
}
.subtitle-line.translated p {
  font-family:Arial,sans-serif;
  font-size:13px;
  margin-inline-end:10px
}
.subtitle-line.translated b {
  position:absolute;
  top:12px;
  left:9px;
  color:#879f62;
  font-size:17px
}
.subtitle-footer {
  font-size:6px;
  color:#849073;
  margin-top:13px;
  text-align:center
}
.converter-visual {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  position:relative;
  padding-bottom:10px;
  direction:ltr
}
.file-icon {
  height:123px;
  width:92px;
  border:1px solid #d1dbc1;
  background:#eaf3dc;
  color:#3f4b2e;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 15px 20px #0002;
  position:relative
}
.file-icon:after {
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:23px;
  height:23px;
  background:#353b2b;
  clip-path:polygon(0 0,100% 100%,100% 0);
  border-radius:0 7px 0 0
}
.file-icon.source {
  transform:rotate(-9deg)
}
.file-icon.output {
  transform:rotate(8deg);
  background:#cee9a5;
  border-color:#c0e28c
}
.file-icon>span {
  font:32px var(--display)
}
.file-icon b {
  font:500 12px var(--display);
  letter-spacing:.08em;
  margin-top:5px
}
.file-icon small {
  font:7px var(--mono);
  margin-top:5px;
  color:#61704b
}
.convert-arrow {
  font-size:29px;
  color:#c6e597
}
.converter-caption {
  position:absolute;
  bottom:38px;
  left:0;
  right:0;
  text-align:center;
  font-size:7px;
  color:#cedbba
}
.generic-visual {
  height:100%;
  display:grid;
  place-content:center;
  text-align:center;
  gap:10px
}
.generic-visual>span {
  font-size:80px;
  color:var(--accent)
}
.work-note {
  display:flex;
  align-items:center;
  gap:18px;
  padding-top:23px;
  margin-top:40px;
  border-top:1px solid var(--line)
}
.work-note p {
  font-size:12px;
  color:var(--ink)
}
.work-note p>span {
  display:block;
  font-size:11px;
  margin-top:2px;
  color:var(--muted)
}
.work-note a {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:11px;
  margin-inline-start:auto;
  color:var(--accent)
}
.empty-state {
  padding:35px;
  text-align:center
}
.playground-section {
  background:var(--surface);
  border-block:1px solid var(--line);
  padding-block:80px
}
.playground-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}
.playground-copy .eyebrow {
  color:var(--orange);
  margin-bottom:23px
}
.playground-copy h2 {
  font-size:clamp(44px,4.4vw,65px);
  position:relative
}
.playground-arrow {
  font-size:56px;
  color:var(--orange);
  display:inline-block;
  vertical-align:middle;
  margin-inline-start:8px
}
.playground-copy>p {
  font-size:13px;
  max-width:365px;
  line-height:1.9;
  margin:25px 0
}
.game-instructions {
  list-style:none;
  padding:0;
  margin:28px 0
}
.game-instructions li {
  display:flex;
  align-items:start;
  gap:18px;
  font-size:11px;
  color:var(--muted);
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.game-instructions li>span {
  font:9px var(--mono);
  color:var(--accent);
  padding-top:3px
}
.playground-note {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:35px
}
.playground-note>span {
  font-size:36px;
  color:var(--orange)
}
.playground-note p {
  font-size:11px;
  color:var(--muted);
  max-width:245px
}
.signal-game {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  padding:24px;
  position:relative;
  box-shadow:0 20px 50px #0001
}
.game-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-bottom:19px;
  border-bottom:1px solid var(--line)
}
.game-header>.mono {
  font-size:10px;
  letter-spacing:.12em;
  color:var(--ink)
}
.game-indicator {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:var(--muted)
}
.game-indicator i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--orange)
}
.game-levels {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding-block:20px
}
.game-levels button {
  display:flex;
  align-items:center;
  gap:7px;
  font:9px var(--mono);
  border:1px solid var(--line);
  padding:10px 11px;
  border-radius:6px;
  color:var(--muted)
}
.game-levels button span {
  font:10px var(--body)
}
.game-levels button.active {
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent)
}
.game-levels button:hover:not(.active) {
  background:var(--surface)
}
.game-route-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:7px;
  color:var(--muted);
  margin-bottom:12px;
  direction:ltr
}
.game-route-label>span:first-child,.game-route-label>span:last-child {
  color:var(--orange);
  font-size:8px
}
.game-board {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  position:relative;
  direction:ltr
}
.arrow-tile {
  aspect-ratio:1;
  position:relative;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  display:grid;
  place-items:center;
  isolation:isolate;
  transition:background .2s,border-color .2s,box-shadow .2s;
  min-width:0;
  min-height:0;
  padding:0
}
.arrow-tile:hover {
  background:var(--surface-2);
  border-color:var(--accent)
}
.arrow-tile>svg {
  width:44%;
  height:44%;
  stroke:var(--ink);
  fill:none;
  stroke-width:2.1;
  transform:rotate(var(--direction,0deg));
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
  pointer-events:none
}
.tile-label {
  position:absolute;
  bottom:5px;
  left:7px;
  font:6px var(--mono);
  letter-spacing:.08em;
  color:var(--orange)
}
.arrow-tile[data-index="0"],.arrow-tile[data-index="15"] {
  border-color:var(--orange)
}
.arrow-tile.hinted {
  border-color:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange)
}
.arrow-tile.visited {
  background:#d4ef7929;
  border-color:var(--accent)
}
.arrow-tile.current {
  background:var(--orange);
  border-color:var(--orange);
  box-shadow:0 0 22px #c0d89430
}
.arrow-tile.current>svg {
  stroke:#1e2317
}
.arrow-tile.current .tile-label {
  color:#1e2317
}
.arrow-tile.finish {
  background:var(--accent);
  border-color:var(--accent)
}
.arrow-tile.finish>svg {
  stroke:var(--accent-ink)
}
.arrow-tile.finish .tile-label {
  color:var(--accent-ink)
}
.arrow-tile.failed {
  border-color:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange)
}
.game-score {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-block:16px
}
.game-score .mono {
  font-size:8px;
  color:var(--muted)
}
.game-controls {
  display:flex;
  align-items:center;
  gap:15px
}
.game-run {
  font-size:10px;
  min-height:44px;
  padding:12px 17px;
  gap:18px;
  flex:1
}
.game-run svg {
  width:16px;
  height:16px
}
.game-hint {
  font-size:10px;
  padding:11px 0;
  white-space:nowrap
}
.game-hint span {
  color:var(--orange);
  font-size:16px;
  margin-inline-start:3px
}
.game-reset {
  font-size:27px;
  min-height:44px;
  min-width:36px
}
.game-reset:hover {
  color:var(--orange)
}
.game-status {
  font-size:11px;
  line-height:1.7;
  margin-top:16px;
  min-height:38px;
  color:var(--muted)
}
.game-status.success {
  color:var(--accent)
}
.game-next {
  color:var(--orange);
  font-size:10px;
  padding:5px 0;
  margin-top:5px
}
.game-keyboard {
  font-size:6px;
  letter-spacing:.045em;
  line-height:1.7;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:12px
}
.game-noscript {
  font-size:12px;
  padding:20px 0
}
.signal-game.solved {
  border-color:var(--accent)
}
.about-section {
  padding-block:90px
}
.about-layout {
  display:grid;
  grid-template-columns:.86fr 1fr;
  gap:100px
}
.about-graphic {
  display:flex;
  flex-direction:column;
  position:relative
}
.about-graphic .eyebrow {
  color:var(--orange);
  font-size:9px
}
.monogram {
  font:500 225px/.9 var(--display);
  letter-spacing:-.14em;
  padding:43px 0 29px;
  border-bottom:1px solid var(--line);
  margin-bottom:23px;
  position:relative;
  color:var(--ink)
}
.monogram>span {
  color:transparent;
  -webkit-text-stroke:1px var(--accent)
}
.monogram>i {
  position:absolute;
  bottom:55px;
  inset-inline-end:15px;
  font:69px var(--body);
  color:var(--orange);
  transform:rotate(13deg)
}
.identity h3 {
  font-size:26px;
  margin-bottom:5px
}
.identity>span {
  font-size:11px;
  color:var(--muted)
}
.about-coordinates {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:25px;
  margin-top:auto;
  font-size:8px;
  color:var(--muted)
}
.about-copy h2 {
  font-size:clamp(38px,3.7vw,54px);
  margin-bottom:26px
}
.about-copy .about-lead {
  font-size:17px;
  color:var(--ink);
  max-width:370px;
  line-height:1.7;
  margin-bottom:21px
}
.about-copy>p {
  font-size:12px;
  line-height:1.95;
  margin-bottom:17px
}
.about-facts {
  display:flex;
  gap:30px;
  border-block:1px solid var(--line);
  padding-block:22px;
  margin-top:24px
}
.about-facts>div {
  flex:1
}
.about-facts .mono {
  display:block;
  color:var(--muted);
  font-size:7px;
  margin-bottom:8px
}
.about-facts b {
  font-size:11px;
  font-weight:400
}
.about-copy>.text-link {
  margin-top:21px;
  font-size:11px;
  color:var(--accent)
}
#services {
  border-top:1px solid var(--line)
}
.service-list {
  border-top:1px solid var(--line)
}
.service-list article {
  display:grid;
  grid-template-columns:45px 1fr .8fr 50px;
  align-items:center;
  gap:25px;
  padding:31px 0;
  border-bottom:1px solid var(--line)
}
.service-num {
  color:var(--muted);
  align-self:start;
  font-size:9px;
  margin-top:5px
}
.service-heading h3 {
  font-size:28px
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.tags span {
  border:1px solid var(--line);
  padding:3px 9px;
  border-radius:99px;
  font-size:8px;
  color:var(--muted)
}
.service-heading .tags {
  margin-top:13px
}
.service-list p {
  font-size:12px;
  line-height:1.8;
  max-width:330px
}
.service-list article>a {
  height:47px;
  width:47px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .2s,transform .3s
}
.service-list article>a svg {
  stroke:var(--accent)
}
.service-list article>a:hover {
  background:var(--accent);
  transform:rotate(45deg)
}
.service-list article>a:hover svg {
  stroke:var(--accent-ink)
}
.process-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin:61px 0 28px
}
.process-heading h3 {
  font-size:28px
}
.process-heading>.mono {
  font-size:8px;
  color:var(--muted)
}
.process {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.process article {
  border-top:1px solid var(--line);
  padding-top:21px
}
.process article>.mono {
  font-size:8px;
  color:var(--orange)
}
.process h4 {
  font-size:22px;
  margin:21px 0 12px
}
.process p {
  font-size:11px;
  line-height:1.9;
  max-width:290px
}
.contact-section {
  background:#c0d894;
  color:#23281c;
  padding-block:49px 64px
}
.contact-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:25px;
  border-bottom:1px solid #96be5a
}
.contact-top .eyebrow,.contact-top>.mono {
  font-size:8px
}
.contact-top .status-dot {
  background:#3f4b2c;
  box-shadow:none
}
.contact-layout {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:90px;
  padding-top:46px
}
.contact-layout h2 {
  font-size:clamp(41px,4.9vw,70px);
  line-height:1.06;
  letter-spacing:-.06em
}
.contact-layout h2 em {
  color:#495932
}
.contact-layout h2>span:last-child {
  display:inline-block;
  vertical-align:top;
  margin:10px 0 0 9px;
  font:42px var(--display)
}
.contact-layout>div>p {
  font-size:12px;
  line-height:1.9;
  color:#53633c;
  max-width:365px;
  margin:24px 0
}
.contact-email {
  display:block;
  font:500 clamp(13px,1.55vw,21px) var(--display);
  text-decoration:underline;
  text-underline-offset:7px;
  margin-top:29px;
  overflow-wrap:anywhere
}
.copy-email {
  font-size:10px;
  margin-top:12px;
  color:#505f3a
}
.social-links {
  display:flex;
  gap:29px;
  margin-top:34px;
  font-size:11px
}
.social-links a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.brief-form {
  background:#e5f3d12e;
  border:1px solid #9ec95e;
  border-radius:15px;
  padding:26px;
  display:flex;
  flex-direction:column
}
.brief-form>.mono {
  font-size:8px;
  margin-bottom:16px
}
.brief-form label {
  font-size:10px;
  margin:10px 0 6px
}
.brief-form input,.brief-form textarea,.brief-form select {
  width:100%;
  background:none;
  border:0;
  border-bottom:1px solid #95ba5d;
  border-radius:0;
  padding:8px 0;
  color:#23281c;
  font-size:12px
}
.brief-form input::placeholder,.brief-form textarea::placeholder {
  color:#5f7143
}
.brief-form select option {
  background:#eff8e1;
  color:#23281c
}
.brief-form textarea {
  resize:vertical;
  min-height:77px;
  max-height:280px
}
.brief-form .button {
  margin-top:23px;
  min-height:48px;
  font-size:11px
}
.form-note {
  color:#53623c;
  font-size:9px;
  line-height:1.7;
  margin-top:14px
}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:30px;
  font-size:9px;
  color:var(--muted)
}
.site-footer .brand {
  font-size:19px;
  color:var(--ink)
}
.site-footer .mono {
  font-size:7px
}
.site-footer>a:last-child {
  font-size:10px;
  color:var(--accent)
}
dialog {
  width:min(720px,calc(100% - 36px));
  max-height:calc(100dvh - 70px);
  overflow:auto;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:16px;
  padding:49px;
  box-shadow:0 35px 120px #0005
}
dialog::backdrop {
  background:#0d1107ba;
  backdrop-filter:blur(7px)
}
.dialog-close {
  position:absolute;
  top:15px;
  right:15px;
  font-size:27px
}
.dialog-eyebrow {
  color:var(--orange);
  padding-right:30px
}
.dialog-description {
  font-size:14px
}
.dialog-role {
  font-size:9px;
  color:var(--muted);
  margin-top:21px
}
dialog h2 {
  font-size:42px;
  margin:22px 0 18px
}
.dialog-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  border-top:1px solid var(--line);
  padding-top:26px;
  margin-top:26px
}
.dialog-details h3 {
  font-size:22px;
  margin-bottom:13px
}
.dialog-details p {
  font-size:12px;
  line-height:1.9
}
.dialog-stack {
  margin-block:26px
}
.dialog-cta {
  font-size:11px
}
.dialog-soon {
  background:var(--surface);
  padding:15px;
  border-radius:8px;
  font-size:11px
}
.toast {
  position:fixed;
  bottom:23px;
  left:50%;
  transform:translate(-50%,20px);
  z-index:100;
  background:var(--ink);
  color:var(--paper);
  padding:13px 21px;
  border-radius:99px;
  font-size:11px;
  width:max-content;
  max-width:calc(100% - 36px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.cursor-arrow {
  display:none;
  position:fixed;
  top:0;
  left:0;
  height:31px;
  width:31px;
  border-radius:50%;
  z-index:90;
  background:var(--accent);
  color:var(--accent-ink);
  font:22px var(--display);
  text-align:center;
  line-height:31px;
  pointer-events:none;
  transform:translate(-100px,-100px);
  opacity:0;
  transition:opacity .15s,background .2s
}
html.reveals-ready [data-reveal] {
  opacity:0;
  transform:translateY(23px);
  transition:opacity .7s,transform .7s
}
html.reveals-ready [data-reveal].is-visible {
  opacity:1;
  transform:translateY(0)
}
html[data-motion=on] .mini-wave i {
  animation:wave-breathe 3s ease-in-out infinite alternate;
  animation-delay:calc(var(--bar,1)*-.2s)
}
html[data-motion=on] .lab-sticker>span:first-child {
  animation:slow-spin 24s linear infinite
}
.mini-wave i:nth-child(2) {
  --bar:2
}
.mini-wave i:nth-child(3) {
  --bar:3
}
.mini-wave i:nth-child(4) {
  --bar:4
}
.mini-wave i:nth-child(5) {
  --bar:5
}
.mini-wave i:nth-child(6) {
  --bar:6
}
.mini-wave i:nth-child(7) {
  --bar:7
}
.mini-wave i:nth-child(8) {
  --bar:8
}
.mini-wave i:nth-child(9) {
  --bar:9
}
@keyframes wave-breathe {
  from {
    transform:scaleY(.7)
  }
  to {
    transform:scaleY(1)
  }
}
@keyframes slow-spin {
  to {
    transform:rotate(360deg)
  }
}
html[data-motion=off] {
  scroll-behavior:auto
}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after {
  animation:none!important;
  transition:none!important
}
html[data-motion=off] [data-reveal] {
  opacity:1!important;
  transform:none!important
}
html[data-motion=off] [data-tilt] {
  transform:none!important
}
html[data-motion=off] .cursor-arrow {
  display:none!important
}
html[dir=rtl] {
  --display:Tahoma,Arial,sans-serif;
  --body:Tahoma,Arial,sans-serif
}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4 {
  letter-spacing:0;
  line-height:1.4
}
html[dir=rtl] .hero h1 {
  font-size:clamp(41px,4.9vw,69px);
  line-height:1.5
}
html[dir=rtl] .hero-line {
  white-space:normal
}
html[dir=rtl] .outline-word:empty {
  display:none
}
html[dir=rtl] .title-arrow {
  width:39px;
  height:39px
}
html[dir=rtl] .brand,html[dir=rtl] .signature,html[dir=rtl] .maker-lab,html[dir=rtl] .frame-visual,html[dir=rtl] .subtitle-visual,html[dir=rtl] .converter-visual,html[dir=rtl] .monogram {
  direction:ltr
}
html[dir=rtl] .monogram {
  font-family:Space,Arial,sans-serif;
  letter-spacing:-.14em
}
html[dir=rtl] .lab-sticker,html[dir=rtl] .lab-caption {
  direction:rtl
}
html[dir=rtl] .hero-intro {
  line-height:2
}
html[dir=rtl] .playground-copy h2 {
  font-size:clamp(38px,4vw,57px)
}
html[dir=rtl] .contact-layout h2 {
  font-size:clamp(35px,4.1vw,59px)
}
html[dir=rtl] .dialog-close {
  right:auto;
  left:15px
}
html[dir=rtl] .dialog-eyebrow {
  padding-right:0;
  padding-left:30px
}
html[dir=rtl] .project-title h3 {
  font-family:Space,Tahoma,Arial,sans-serif;
  letter-spacing:-.04em
}
@media(min-width:1450px) {
  .hero {
    padding-top:95px
  }
  .maker-lab {
    min-height:510px
  }
  .lab-core {
    top:96px;
    width:238px;
    height:238px
  }
  .lab-core>svg {
    width:155px;
    height:155px
  }
  .lab-code {
    top:313px
  }
  .lab-sticker {
    top:350px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .nav-row {
    gap:22px
  }
  .main-nav {
    gap:21px
  }
  .nav-tools {
    gap:3px
  }
  .brand {
    font-size:19px
  }
  .hero {
    padding-top:65px;
    grid-template-columns:1.2fr 1fr;
    gap:15px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .hero h1 {
    font-size:clamp(60px,6.55vw,82px)
  }
  .title-arrow {
    height:34px;
    width:34px;
    margin-inline-start:2px
  }
  .hero-intro {
    font-size:13px
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .button {
    padding:15px 19px;
    gap:21px;
    font-size:11px
  }
  .play-link {
    font-size:10px;
    max-width:165px
  }
  .maker-lab {
    min-height:455px
  }
  .lab-core {
    width:196px;
    height:196px;
    top:83px;
    border-radius:36px
  }
  .lab-core>svg {
    width:131px;
    height:131px
  }
  .lab-rings {
    width:320px;
    height:320px
  }
  .lab-window {
    width:166px;
    right:0;
    top:25px
  }
  .mini-wave {
    height:76px;
    gap:5px
  }
  .mini-wave i {
    width:6px
  }
  .lab-code {
    left:-5px;
    top:272px;
    padding:17px 19px
  }
  .lab-code p {
    font-size:8px
  }
  .lab-sticker {
    top:301px;
    right:3px;
    font-size:11px;
    gap:10px
  }
  .lab-sticker>span:first-child {
    font-size:43px
  }
  .lab-caption .mono {
    font-size:6px
  }
  .hero-bottom {
    margin-top:47px
  }
  .section {
    padding-block:76px
  }
  .playground-layout {
    gap:62px
  }
  .playground-copy h2 {
    font-size:50px
  }
  .signal-game {
    padding:20px
  }
  .game-header>.mono {
    font-size:9px
  }
  .about-layout {
    gap:64px
  }
  .monogram {
    font-size:195px
  }
  .monogram>i {
    font-size:57px
  }
  .contact-layout {
    gap:58px
  }
  .contact-email {
    font-size:17px
  }
}
@media(max-width:900px) {
  .main-nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:17px 32px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    font-size:14px;
    box-shadow:0 18px 30px #0002
  }
  .main-nav.open {
    display:flex
  }
  .main-nav a {
    padding:12px 0
  }
  .nav-contact {
    border:0;
    border-radius:0;
    padding:12px 0!important
  }
  .nav-row {
    height:76px;
    justify-content:space-between
  }
  .nav-tools {
    margin-inline-start:auto;
    gap:8px
  }
  .menu-toggle {
    display:grid
  }
  .hero h1 {
    font-size:clamp(51px,6.5vw,62px)
  }
  .title-arrow {
    width:27px;
    height:27px
  }
  .hero .eyebrow {
    font-size:7px
  }
  .hero-actions {
    gap:15px
  }
  .play-link {
    font-size:9px;
    max-width:140px;
    line-height:1.7
  }
  .hero-intro {
    font-size:12px
  }
  .hero-signature {
    gap:14px
  }
  .hero-signature .mono {
    padding-inline-start:14px;
    font-size:6px;
    max-width:130px
  }
  .signature {
    font-size:25px
  }
  .maker-lab {
    min-height:410px
  }
  .lab-core {
    width:169px;
    height:169px;
    top:78px;
    border-radius:31px
  }
  .lab-core>svg {
    width:111px;
    height:111px;
    stroke-width:17
  }
  .lab-rings {
    width:278px;
    height:278px
  }
  .lab-window {
    width:140px;
    top:20px;
    right:0
  }
  .lab-window .mono {
    font-size:5px
  }
  .mini-wave {
    height:65px;
    gap:4px
  }
  .mini-wave i {
    width:5px;
    height:15px
  }
  .mini-wave i:nth-child(2n) {
    height:27px
  }
  .mini-wave i:nth-child(3n) {
    height:39px
  }
  .mini-wave i:nth-child(5) {
    height:48px
  }
  .lab-code {
    top:234px;
    padding:15px 16px
  }
  .lab-code p {
    font-size:7px
  }
  .slip-top {
    font-size:6px
  }
  .lab-sticker {
    top:287px;
    right:0;
    font-size:10px;
    gap:8px
  }
  .lab-sticker>span:first-child {
    font-size:32px
  }
  .lab-caption {
    left:8px;
    right:8px;
    gap:10px;
    bottom:7px
  }
  .lab-caption .mono {
    font-size:5px
  }
  .lab-coordinate {
    font-size:6px
  }
  .lab-coordinate.second {
    bottom:46px
  }
  .hero-bottom>.mono {
    font-size:7px
  }
  .hero-bottom .hero-edition {
    display:none
  }
  .hero-bottom {
    margin-top:32px
  }
  .stack-band>.wrap {
    gap:27px
  }
  .stack-band .wrap>div {
    font-size:15px;
    gap:12px
  }
  .stack-band i {
    font-size:12px
  }
  .stack-band .mono {
    font-size:7px
  }
  .section-top>p {
    max-width:240px;
    font-size:11px
  }
  .project-card:first-child {
    gap:30px;
    grid-template-columns:1.1fr 1fr
  }
  .project-card:first-child .project-art {
    height:305px
  }
  .project-card:first-child h3 {
    font-size:33px
  }
  .project-art {
    height:265px
  }
  .project-title h3 {
    font-size:27px
  }
  .project-footer {
    flex-direction:column;
    align-items:start
  }
  .project-footer .mono {
    max-width:none
  }
  .project-footer .text-link {
    font-size:10px
  }
  .playground-layout {
    gap:38px
  }
  .playground-copy h2 {
    font-size:43px
  }
  .playground-arrow {
    font-size:40px
  }
  .playground-copy>p {
    font-size:12px
  }
  .playground-copy .eyebrow {
    font-size:8px
  }
  .game-instructions li {
    font-size:10px;
    gap:14px
  }
  .signal-game {
    padding:17px
  }
  .game-header {
    gap:9px
  }
  .game-indicator {
    font-size:6px
  }
  .game-header>.mono {
    font-size:8px
  }
  .game-levels {
    gap:5px
  }
  .game-levels button {
    font-size:8px;
    padding:9px 7px;
    gap:4px
  }
  .game-levels button span {
    font-size:9px
  }
  .game-route-label {
    font-size:6px
  }
  .game-board {
    gap:6px
  }
  .game-controls {
    gap:10px
  }
  .game-run {
    font-size:9px;
    padding:11px 12px;
    gap:9px
  }
  .game-run svg {
    width:14px;
    height:14px
  }
  .game-hint {
    font-size:9px
  }
  .game-status {
    font-size:10px
  }
  .game-keyboard {
    font-size:5px
  }
  .game-score .mono {
    font-size:7px
  }
  .about-layout {
    gap:42px
  }
  .monogram {
    font-size:172px;
    padding-top:62px
  }
  .monogram>i {
    font-size:45px;
    bottom:52px;
    inset-inline-end:5px
  }
  .about-copy h2 {
    font-size:37px
  }
  .about-copy .about-lead {
    font-size:15px
  }
  .about-facts {
    gap:17px
  }
  .about-facts b {
    font-size:10px
  }
  .service-list article {
    grid-template-columns:25px 1fr .8fr 42px;
    gap:18px
  }
  .service-heading h3 {
    font-size:25px
  }
  .service-list p {
    font-size:11px
  }
  .service-list article>a {
    width:40px;
    height:40px
  }
  .contact-layout {
    gap:37px
  }
  .contact-layout h2 {
    font-size:47px
  }
  .contact-email {
    font-size:15px
  }
  .brief-form {
    padding:22px
  }
  .site-footer {
    gap:18px
  }
  .site-footer .mono {
    font-size:6px
  }
}
@media(max-width:680px) {
  html {
    scroll-padding-top:92px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .nav-row {
    height:70px;
    gap:12px
  }
  .brand {
    font-size:19px
  }
  .brand-mark {
    width:27px;
    height:27px
  }
  .nav-tools {
    gap:2px
  }
  .language-toggle {
    border:0;
    padding:9px 6px;
    font-size:10px
  }
  .icon-button {
    width:32px;
    height:36px
  }
  .icon-button svg {
    width:16px;
    height:16px
  }
  .main-nav {
    top:70px;
    padding:16px 20px
  }
  .hero {
    display:block;
    padding-top:43px
  }
  .hero .eyebrow {
    font-size:7px
  }
  .hero h1 {
    font-size:clamp(50px,12.8vw,75px);
    line-height:1.12;
    margin:25px 0
  }
  .title-arrow {
    width:31px;
    height:31px;
    margin-inline-start:5px
  }
  .hero-intro {
    font-size:13px;
    max-width:370px
  }
  .hero-actions {
    margin-top:27px;
    gap:20px
  }
  .hero-actions .button {
    font-size:11px;
    min-height:51px;
    padding:14px 20px;
    gap:23px
  }
  .play-link {
    font-size:10px;
    max-width:147px
  }
  .hero-signature {
    gap:17px;
    margin-top:30px
  }
  .hero-signature .mono {
    font-size:7px;
    max-width:155px;
    padding-inline-start:17px
  }
  .maker-lab {
    min-height:433px;
    max-width:440px;
    margin:34px auto 0
  }
  .lab-core {
    top:72px;
    width:196px;
    height:196px;
    border-radius:36px;
    transform:translateX(-50%) rotate(-12deg)
  }
  .lab-core>svg {
    width:133px;
    height:133px;
    stroke-width:18
  }
  .lab-rings {
    width:305px;
    height:305px;
    top:43%
  }
  .lab-window {
    top:5px;
    right:0;
    width:170px
  }
  .window-bar {
    height:27px
  }
  .window-bar .mono {
    font-size:6px
  }
  .mini-wave {
    height:79px;
    gap:5px
  }
  .mini-wave i {
    width:6px
  }
  .mini-wave i:nth-child(2n) {
    height:32px
  }
  .mini-wave i:nth-child(3n) {
    height:45px
  }
  .mini-wave i:nth-child(5) {
    height:57px
  }
  .lab-window>.mono {
    font-size:6px
  }
  .lab-code {
    top:263px;
    left:0;
    padding:17px 21px
  }
  .lab-code p {
    font-size:8px
  }
  .slip-top {
    font-size:7px
  }
  .lab-sticker {
    top:302px;
    right:7px;
    font-size:11px;
    gap:11px
  }
  .lab-sticker>span:first-child {
    font-size:43px
  }
  .lab-coordinate {
    top:5px;
    font-size:7px;
    left:9px
  }
  .lab-coordinate.second {
    bottom:55px;
    right:8px
  }
  .lab-caption {
    bottom:0;
    left:0;
    right:0;
    padding-top:17px
  }
  .lab-caption .mono {
    font-size:6px
  }
  .lab-caption>span:last-child {
    font-size:23px
  }
  .hero-bottom {
    margin-top:28px;
    padding-block:21px;
    gap:14px
  }
  .hero-bottom>.mono {
    font-size:6px;
    max-width:165px;
    line-height:1.7
  }
  .scroll-cue {
    font-size:9px;
    gap:11px
  }
  .scroll-cue svg {
    width:22px;
    height:22px
  }
  .stack-band>.wrap {
    display:block;
    padding-block:22px
  }
  .stack-band .mono {
    display:block;
    font-size:7px;
    margin-bottom:16px
  }
  .stack-band .wrap>div {
    font-size:13px;
    gap:9px
  }
  .stack-band i {
    font-size:10px
  }
  .section {
    padding-block:57px
  }
  .section-top {
    display:block;
    margin-bottom:28px
  }
  .section-top h2 {
    font-size:38px;
    margin-top:13px
  }
  .section-top .eyebrow {
    font-size:8px
  }
  .section-top>p {
    margin-top:18px;
    max-width:335px;
    font-size:12px
  }
  .work-toolbar {
    display:block;
    padding-bottom:15px;
    margin-bottom:23px
  }
  .filters {
    gap:3px
  }
  .filters button {
    font-size:10px;
    padding:8px 10px
  }
  .project-count {
    display:none
  }
  .project-grid {
    display:block
  }
  .project-card,.project-card:first-child {
    display:block;
    margin-bottom:35px
  }
  .project-art,.project-card:first-child .project-art {
    height:279px
  }
  .project-meta {
    padding-top:21px
  }
  .project-title {
    padding:12px 0
  }
  .project-title h3,.project-card:first-child h3 {
    font-size:30px
  }
  .project-meta>p {
    font-size:12px;
    line-height:1.8
  }
  .project-meta .eyebrow {
    font-size:8px
  }
  .project-footer,.project-card:first-child .project-footer {
    flex-direction:row;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--line)
  }
  .project-footer .mono,.project-card:first-child .project-footer .mono {
    max-width:58%;
    font-size:7px
  }
  .project-footer .text-link,.project-card:first-child .project-footer .text-link {
    font-size:10px
  }
  .work-note {
    margin-top:13px;
    gap:13px
  }
  .work-note p {
    font-size:11px
  }
  .work-note p>span {
    font-size:10px;
    max-width:239px
  }
  .work-note a {
    font-size:10px;
    gap:8px
  }
  .work-note .tiny-cross {
    font-size:27px
  }
  .playground-section {
    padding-block:48px
  }
  .playground-layout {
    display:block
  }
  .playground-copy h2 {
    font-size:43px
  }
  .playground-copy>p {
    font-size:12px;
    max-width:335px;
    margin-block:20px
  }
  .playground-arrow {
    font-size:41px
  }
  .playground-copy .eyebrow {
    font-size:8px;
    margin-bottom:19px
  }
  .game-instructions {
    margin-top:23px
  }
  .game-instructions li {
    font-size:11px;
    gap:17px;
    padding:11px 0
  }
  .playground-note {
    margin-top:22px
  }
  .playground-note p {
    font-size:10px
  }
  .signal-game {
    margin-top:30px;
    padding:20px;
    max-width:440px;
    margin-inline:auto
  }
  .game-header>.mono {
    font-size:10px
  }
  .game-indicator {
    font-size:7px
  }
  .game-levels {
    gap:7px
  }
  .game-levels button {
    font-size:9px;
    padding:10px 10px;
    gap:6px
  }
  .game-levels button span {
    font-size:9px
  }
  .game-route-label {
    font-size:6px
  }
  .game-route-label>span:first-child,.game-route-label>span:last-child {
    font-size:7px
  }
  .game-board {
    gap:7px
  }
  .arrow-tile {
    border-radius:8px
  }
  .tile-label {
    font-size:6px
  }
  .game-score .mono {
    font-size:7px
  }
  .game-controls {
    gap:11px
  }
  .game-run {
    font-size:10px;
    padding:11px 13px;
    gap:10px;
    min-height:45px
  }
  .game-hint {
    font-size:10px
  }
  .game-status {
    font-size:11px
  }
  .game-keyboard {
    font-size:6px
  }
  .about-section {
    padding-block:52px
  }
  .about-layout {
    display:block
  }
  .about-graphic .eyebrow {
    font-size:8px
  }
  .monogram {
    font-size:201px;
    padding:32px 0 25px;
    max-width:380px
  }
  .monogram>i {
    font-size:56px;
    bottom:48px;
    inset-inline-end:17px
  }
  .identity h3 {
    font-size:25px
  }
  .about-coordinates {
    font-size:7px;
    padding-top:19px;
    max-width:380px
  }
  .about-copy {
    margin-top:39px
  }
  .about-copy h2 {
    font-size:40px
  }
  .about-copy .about-lead {
    font-size:16px;
    max-width:350px
  }
  .about-copy>p {
    font-size:12px
  }
  .about-facts {
    gap:22px;
    padding-block:19px
  }
  .about-facts b {
    font-size:11px
  }
  .service-list article {
    grid-template-columns:22px 1fr 37px;
    gap:15px;
    padding:25px 0
  }
  .service-heading h3 {
    font-size:25px
  }
  .service-list article>p {
    grid-column:2;
    grid-row:2;
    margin-top:-6px;
    font-size:12px
  }
  .service-list article>a {
    grid-column:3;
    grid-row:1;
    width:36px;
    height:36px
  }
  .service-heading .tags {
    margin-top:11px
  }
  .service-heading .tags span {
    font-size:7px
  }
  .process-heading {
    display:block;
    margin-top:46px
  }
  .process-heading h3 {
    font-size:26px
  }
  .process-heading>.mono {
    display:block;
    font-size:7px;
    margin-top:13px
  }
  .process {
    display:block
  }
  .process article {
    display:grid;
    grid-template-columns:90px 1fr;
    column-gap:13px;
    padding:20px 0 25px
  }
  .process article>.mono {
    grid-row:1/3;
    font-size:7px;
    margin-top:6px
  }
  .process h4 {
    font-size:21px;
    margin:0 0 11px
  }
  .process p {
    grid-column:2;
    font-size:11px;
    max-width:290px
  }
  .contact-section {
    padding-block:31px 43px
  }
  .contact-top {
    display:block;
    padding-bottom:20px
  }
  .contact-top>.mono {
    display:block;
    margin-top:14px;
    font-size:7px
  }
  .contact-top .eyebrow {
    font-size:8px
  }
  .contact-layout {
    display:block;
    padding-top:32px
  }
  .contact-layout h2 {
    font-size:45px
  }
  .contact-layout h2>span:last-child {
    font-size:31px;
    margin:10px 0 0 7px
  }
  .contact-layout>div>p {
    font-size:12px;
    max-width:350px;
    margin-block:19px
  }
  .contact-email {
    font-size:17px;
    margin-top:24px
  }
  .copy-email {
    font-size:10px
  }
  .social-links {
    font-size:11px;
    gap:28px;
    margin-top:23px
  }
  .brief-form {
    margin-top:35px;
    padding:23px
  }
  .brief-form label {
    font-size:11px
  }
  .brief-form input,.brief-form textarea,.brief-form select {
    font-size:16px
  }
  .brief-form .button {
    font-size:12px;
    min-height:49px
  }
  .form-note {
    font-size:9px
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    padding-block:27px
  }
  .site-footer .brand {
    font-size:19px
  }
  .site-footer>span:first-of-type {
    text-align:end;
    font-size:8px
  }
  .site-footer>.mono {
    font-size:6px
  }
  .site-footer>a:last-child {
    text-align:end;
    font-size:9px
  }
  dialog {
    padding:39px 24px 28px
  }
  dialog h2 {
    font-size:34px
  }
  .dialog-description {
    font-size:13px
  }
  .dialog-role {
    font-size:8px
  }
  .dialog-details {
    display:block
  }
  .dialog-details section+section {
    margin-top:23px
  }
  html[dir=rtl] .hero h1 {
    font-size:clamp(37px,9.5vw,51px)
  }
  html[dir=rtl] .hero-line {
    white-space:normal
  }
  html[dir=rtl] .hero-intro {
    font-size:13px
  }
  html[dir=rtl] .title-arrow {
    width:30px;
    height:30px
  }
  html[dir=rtl] .playground-copy h2 {
    font-size:40px
  }
  html[dir=rtl] .contact-layout h2 {
    font-size:38px
  }
  html[dir=rtl] .hero-actions {
    gap:16px
  }
  html[dir=rtl] .hero-actions .button {
    gap:17px
  }
}
@media(max-width:360px) {
  .wrap {
    width:calc(100% - 30px)
  }
  .brand {
    font-size:17px;
    gap:6px
  }
  .brand-mark {
    width:24px;
    height:24px
  }
  .nav-tools {
    gap:0
  }
  .icon-button {
    width:29px
  }
  .language-toggle {
    padding:9px 4px;
    font-size:9px
  }
  .hero h1 {
    font-size:47px
  }
  .title-arrow {
    width:24px;
    height:24px;
    margin-inline-start:0
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    padding:14px 16px;
    font-size:10px;
    gap:14px
  }
  .play-link {
    font-size:9px;
    max-width:127px
  }
  .maker-lab {
    min-height:420px
  }
  .lab-core {
    width:176px;
    height:176px;
    top:81px
  }
  .lab-core>svg {
    width:122px;
    height:122px
  }
  .lab-rings {
    width:271px;
    height:271px
  }
  .lab-window {
    width:151px
  }
  .lab-code {
    top:260px;
    padding:16px 16px
  }
  .lab-code p {
    font-size:7px
  }
  .lab-sticker {
    right:0;
    top:297px;
    font-size:10px;
    gap:7px
  }
  .lab-sticker>span:first-child {
    font-size:35px
  }
  .lab-caption .mono {
    font-size:5px
  }
  .filters button {
    font-size:9px;
    padding:8px 9px
  }
  .project-art,.project-card:first-child .project-art {
    height:249px
  }
  .project-title h3,.project-card:first-child h3 {
    font-size:27px
  }
  .file-icon {
    width:79px;
    height:109px
  }
  .converter-visual {
    gap:18px
  }
  .signal-game {
    padding:15px
  }
  .game-levels button {
    padding:9px 7px;
    font-size:8px
  }
  .game-levels button span {
    font-size:8px
  }
  .game-controls {
    gap:9px
  }
  .game-run {
    font-size:9px;
    padding:11px 10px;
    gap:8px
  }
  .game-keyboard {
    font-size:5px
  }
  .contact-email {
    font-size:14px
  }
  .contact-layout h2 {
    font-size:40px
  }
  .stack-band .wrap>div {
    font-size:11px;
    gap:7px
  }
  .stack-band i {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  [data-reveal] {
    opacity:1!important;
    transform:none!important
  }
  [data-tilt] {
    transform:none!important
  }
  .cursor-arrow {
    display:none!important
  }
}
@media(pointer:coarse) {
  .cursor-arrow {
    display:none!important
  }
  [data-tilt] {
    transform:none!important
  }
}