@font-face {
  font-family:Inter Tight;
  src:url('/3d-lab/kinesis/fonts/inter-tight-400-800-latin.woff2?v=cd078966b4b3') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Inter Tight;
  src:url('/3d-lab/kinesis/fonts/inter-tight-400-800-cyrillic.woff2?v=cd078966b4b3') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family:Plex Mono;
  src:url('/3d-lab/kinesis/fonts/ibm-plex-mono-400-latin.woff2?v=cd078966b4b3') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --blue:#2338df;
  --ink:#f3f4ff;
  --muted:#c0caff;
  --line:#ffffff35;
  --lime:#d8ff57;
  --gutter:clamp(24px,3vw,56px);
  font-family:Inter Tight,Arial,sans-serif;
  color:var(--ink);
  background:var(--blue);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,a {
  -webkit-tap-highlight-color:transparent;
}
button,a,input {
  touch-action:manipulation;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.5;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  border:0;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:6px;
}
button:focus:not(:focus-visible) {
  outline:none;
}
button,a {
  transition:background .2s,color .2s,opacity .2s;
}
button:hover:not(:disabled) {
  color:var(--lime);
}
.mono {
  font-family:Plex Mono,Inter Tight,monospace;
  font-size:12px;
  letter-spacing:.06em;
  font-weight:400;
}
.experience {
  position:relative;
  min-height:960px;
  height:100svh;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 67% 37%,#5267ef 0%,#324ae9 28%,#2338df 58%,#1b2dc9 100%);
}
.stage {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.stage canvas {
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .8s;
}
.ready .stage canvas {
  opacity:1;
}
.fallback-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
  opacity:1;
}
.ready .fallback-art {
  opacity:0;
  visibility:hidden;
}
.fallback-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center;
}
.fallback .fallback-art {
  opacity:1;
}
.topbar {
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:5;
  margin:0 var(--gutter);
  border-bottom:1px solid var(--line);
}






.edition {
  color:var(--muted);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}
.edition span {
  padding:0 12px;
  color:#92a3ff;
}
.portfolio-link {
  font-size:14px;
  display:flex;
  gap:13px;
  align-items:center;
  min-height:44px;
}
.portfolio-link:hover {
  color:var(--lime);
}
.portfolio-link>span {
  font-size:23px;
}
.composition {
  position:relative;
  height:calc(100% - 158px);
  margin:0 var(--gutter);
  min-height:702px;
}
.masthead {
  position:absolute;
  top:30px;
  left:0;
  right:0;
  pointer-events:none;
  z-index:-2;
}
.eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
}
.live-dot {
  height:6px;
  width:6px;
  display:block;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 14px #d8ff5770;
}
h1 {
  font-size:clamp(100px,min(16.85vw,22.8svh),280px);
  line-height:.91;
  font-weight:600;
  letter-spacing:-.065em;
  margin:21px 0 24px -9px;
  white-space:nowrap;
  position:relative;
}
.title-star {
  font-family:Arial,sans-serif;
  font-size:.32em;
  position:relative;
  display:inline-block;
  vertical-align:top;
  margin:.08em 0 0 .20em;
  font-weight:400;
  color:var(--lime);
}
.title-rule {
  display:flex;
  justify-content:space-between;
  padding-bottom:13px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  width:98%;
}
.title-rule span:last-child {
  padding-right:3px;
}
.intro {
  position:absolute;
  left:0;
  bottom:158px;
  z-index:2;
}
.intro-title {
  font-size:clamp(38px,3.9vw,64px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.04em;
  margin:0 0 17px;
}
.intro-copy {
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
  letter-spacing:.01em;
  margin:0 0 22px;
}
.burst-button {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:52px;
  background:var(--lime);
  color:#1b2580;
  border-radius:0;
  padding:0 17px;
  font-weight:600;
  font-size:14px;
}
.burst-button:hover:not(:disabled) {
  background:#e8ff97;
  color:#10194d;
  transform:translateY(-2px);
}
.burst-button>span:last-child {
  margin-left:18px;
  font-size:21px;
  font-weight:400;
}
.burst-icon {
  font-size:26px;
  line-height:1;
}
.micro-hint {
  font-size:12px;
  color:var(--muted);
  margin:11px 0 0;
}
.object-info {
  position:absolute;
  right:0;
  top:42%;
  display:flex;
  gap:14px;
  align-items:flex-start;
  pointer-events:none;
}
.object-cross {
  font-size:20px;
  font-weight:300;
  margin-top:-4px;
  color:var(--lime);
}
.object-info .mono {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:11px;
}
.object-info strong {
  font-size:13px;
  font-weight:400;
  color:white;
  letter-spacing:.12em;
}
.object-info .mono>span:last-child {
  opacity:.65;
  font-size:10px;
}
.gesture-zone {
  position:absolute;
  left:26%;
  right:8%;
  top:20%;
  bottom:177px;
  cursor:grab;
  touch-action:none;
  z-index:1;
}
.gesture-zone.dragging {
  cursor:grabbing;
}
.drag-hint {
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:13px;
  color:var(--muted);
  pointer-events:none;
  display:flex;
  gap:10px;
  align-items:center;
  padding:4px 12px;
  border:1px solid #ffffff30;
  border-radius:99px;
  background:#243bdfe6;
  opacity:0;
  transition:opacity .3s;
}
.ready .drag-hint {
  opacity:1;
}
.drag-hint>span {
  font-size:23px;
}
.dragging .drag-hint {
  opacity:0;
}
.controls {
  position:absolute;
  bottom:26px;
  left:0;
  right:0;
  display:grid;
  grid-template-columns:1.6fr 1.2fr .95fr;
  gap:40px;
  align-items:start;
  padding-top:20px;
  border-top:1px solid var(--line);
  z-index:3;
}
.control-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:18px;
  min-height:18px;
}
.control-caption .mono {
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
}
.shape-note {
  font-size:12px;
  color:var(--muted);
  text-align:right;
}
.shape-buttons {
  display:flex;
  gap:6px;
}
.shape-button {
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:49px;
  padding:6px 14px;
  background:transparent;
  border:1px solid var(--line);
  font-size:15px;
  white-space:nowrap;
}
.shape-button.is-active {
  background:var(--ink);
  color:#2434b9;
  border-color:var(--ink);
}
.shape-button:hover:not(:disabled) {
  color:var(--ink);
  border-color:var(--ink);
  background:#ffffff14;
}
.shape-button.is-active:hover:not(:disabled) {
  color:#14218f;
  background:white;
}
.form-glyph {
  font-size:28px;
  line-height:1;
}
.helix-glyph {
  transform:rotate(-30deg);
  font-size:26px;
}
.shape-button sup {
  font-family:Plex Mono,monospace;
  font-size:9px;
  margin-left:auto;
  align-self:flex-start;
  position:relative;
  top:5px;
  opacity:.65;
}
.material-buttons {
  display:flex;
  gap:14px;
  min-height:49px;
  align-items:center;
}
.material-buttons button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:none;
  font-size:14px;
  padding:7px 0;
  min-height:44px;
  color:var(--muted);
}
.material-buttons button[aria-pressed=true] {
  color:white;
}
.swatch {
  display:block;
  width:22px;
  height:22px;
  border-radius:50%;
  position:relative;
  flex:none;
}
.swatch.chrome {
  background:linear-gradient(125deg,#fff 4%,#364877 27%,#c8d5ea 45%,#fff 59%,#445688 84%);
}
.swatch.ceramic {
  background:#eceff5;
  box-shadow:inset -5px -3px 6px #abb2d8;
}
.swatch.gold {
  background:linear-gradient(130deg,#f6e9af 7%,#ac6f19 36%,#ffe7a9 59%,#ac6919 90%);
}
[aria-pressed=true]>.swatch:after {
  content:'';
  position:absolute;
  inset:-4px;
  border:1px solid #ffffffb3;
  border-radius:50%;
}
.chaos-control .control-caption {
  margin-bottom:14px;
}
.chaos-control output {
  font-family:Plex Mono,monospace;
  font-size:12px;
  color:var(--lime);
}
input[type=range] {
  display:block;
  width:100%;
  height:25px;
  margin:0;
  accent-color:var(--lime);
  appearance:none;
  background:transparent;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height:2px;
  background:#ffffff50;
}
input[type=range]::-moz-range-track {
  height:2px;
  background:#ffffff50;
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--lime);
  margin-top:-6.5px;
  box-shadow:0 0 0 5px #2338df;
}
input[type=range]::-moz-range-thumb {
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--lime);
  border:0;
  box-shadow:0 0 0 5px #2338df;
}
.range-ends {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
}
.bottom-bar {
  position:absolute;
  bottom:0;
  left:var(--gutter);
  right:var(--gutter);
  height:64px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  z-index:5;
}
.footer-note {
  font-size:10px;
  color:var(--muted);
  letter-spacing:.04em;
}
.footer-year {
  padding-left:15px;
}
.utility-buttons {
  display:flex;
  align-items:center;
  gap:23px;
}
.utility-buttons button {
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0;
  background:none;
  color:var(--muted);
  white-space:nowrap;
}
.utility-buttons button[aria-pressed=true] {
  color:var(--lime);
}
.utility-buttons button>span:first-child {
  font-size:20px;
}
.sound-bars {
  display:flex;
  height:15px;
  align-items:center;
  gap:2px;
}
.sound-bars i {
  width:2px;
  height:5px;
  background:currentColor;
}
.sound-bars i:nth-child(2) {
  height:13px;
}
.sound-bars i:nth-child(3) {
  height:8px;
}
.fallback-message {
  position:absolute;
  left:50%;
  top:59%;
  transform:translate(-50%,-50%);
  padding:15px 20px;
  background:#122189e8;
  font-size:14px;
  max-width:min(420px,85vw);
  line-height:1.5;
  z-index:7;
  text-align:center;
}
.ready .fallback-message {
  display:none;
}
.fallback .gesture-zone {
  display:none;
}
.noscript-message {
  position:absolute;
  top:50%;
  right:10%;
  left:40%;
  padding:18px;
  background:#122189;
  font-size:16px;
  z-index:8;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip-link {
  position:absolute;
  z-index:20;
  left:20px;
  top:-80px;
  background:var(--lime);
  color:#172068;
  padding:15px;
}
.skip-link:focus {
  top:15px;
}
@media(min-width:1700px) {
  .intro {
    bottom:23%;
  }
  .intro-title {
    font-size:65px;
  }
  .intro-copy {
    font-size:17px;
  }
  .controls {
    bottom:35px;
    padding-top:25px;
  }
  .composition {
    min-height:702px;
  }
}
@media(max-width:1150px) {
  .experience {
    min-height:960px;
  }
  .composition {
    min-height:662px;
  }
  .controls {
    gap:24px;
    grid-template-columns:1.5fr 1.15fr 1fr;
  }
  .shape-note {
    display:none;
  }
  .shape-button {
    padding:6px 10px;
    gap:7px;
  }
  .shape-button sup {
    display:none;
  }
  .material-buttons {
    gap:10px;
  }
  .material-buttons button {
    gap:7px;
  }
  .intro {
    bottom:177px;
  }
  .intro-title {
    font-size:42px;
  }
  .object-info {
    top:40%;
  }
  .footer-note {
    font-size:9px;
  }
  .utility-buttons {
    gap:18px;
  }
  .edition {
    font-size:10px;
  }
}
@media(max-width:850px) {
  .controls {
    grid-template-columns:1.5fr 1fr;
    gap:24px 30px;
  }
  .shape-control {
    grid-column:1/-1;
  }
  .shape-note {
    display:block;
  }
  .shape-buttons {
    max-width:100%;
    gap:8px;
  }
  .shape-button {
    justify-content:center;
    min-height:44px;
  }
  .shape-button sup {
    display:block;
    position:absolute;
    right:10px;
    top:9px;
  }
  .control-caption {
    margin-bottom:10px;
  }
  .controls {
    padding-top:15px;
    bottom:20px;
  }
  .intro {
    bottom:260px;
  }
  .intro-title {
    font-size:39px;
  }
  .intro-copy {
    font-size:14px;
  }
  .gesture-zone {
    bottom:273px;
    left:29%;
    right:2%;
    top:20%;
  }
  .object-info {
    right:0;
    top:32%;
  }
  .object-info .mono {
    font-size:10px;
  }
  .object-info .mono>span:last-child {
    display:none;
  }
  .footer-note {
    display:none;
  }
  .bottom-bar {
    justify-content:center;
  }
  .utility-buttons {
    gap:30px;
  }
  .title-rule .mono {
    font-size:10px;
  }
  .title-rule span:last-child {
    display:none;
  }
  .edition {
    display:none;
  }
  .experience {
    min-height:920px;
  }
  .composition {
    min-height:762px;
  }
  .masthead {
    top:25px;
  }
  h1 {
    font-size:17vw;
    margin-left:-4px;
  }
  .intro-copy {
    line-height:1.5;
  }
}
@media(max-width:600px) {
  :root {
    --gutter:20px;
  }
  .experience {
    min-height:980px;
    height:100svh;
  }
  .topbar {
    height:75px;
  }




  .portfolio-link {
    font-size:13px;
    gap:9px;
  }
  .composition {
    height:calc(100% - 136px);
    min-height:844px;
  }
  .masthead {
    top:22px;
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.05em;
  }
  h1 {
    font-size:17.1vw;
    margin:18px 0 15px -3px;
    letter-spacing:-.075em;
  }
  .title-star {
    margin-left:.17em;
  }
  .title-rule {
    padding-bottom:10px;
    width:100%;
  }
  .title-rule .mono {
    font-size:9px;
  }
  .intro {
    bottom:294px;
    right:0;
    display:grid;
    grid-template-columns:1fr 1.14fr;
    gap:12px;
    align-items:start;
  }
  .intro-title {
    font-size:33px;
    margin:0;
    grid-row:1/3;
  }
  .intro-copy {
    font-size:13px;
    line-height:1.5;
    margin:0;
    text-align:left;
  }
  .burst-button {
    grid-column:1/-1;
    justify-content:center;
    min-height:47px;
    width:100%;
    margin-top:5px;
  }
  .burst-button>span:last-child {
    margin-left:auto;
  }
  .burst-icon {
    margin-right:auto;
  }
  .micro-hint {
    display:none;
  }
  .object-info {
    top:172px;
    right:0;
  }
  .object-info strong {
    font-size:11px;
  }
  .object-info .mono {
    gap:6px;
    font-size:9px;
  }
  .object-cross {
    font-size:17px;
  }
  .gesture-zone {
    top:160px;
    bottom:453px;
    left:0;
    right:0;
  }
  .drag-hint {
    bottom:5px;
    font-size:11px;
    gap:7px;
  }
  .drag-hint>span {
    font-size:21px;
  }
  .controls {
    bottom:25px;
    gap:23px 20px;
    padding-top:18px;
    grid-template-columns:1fr;
  }
  .shape-control {
    grid-column:auto;
  }
  .control-caption .mono {
    font-size:10px;
  }
  .shape-note {
    font-size:10px;
  }
  .shape-buttons {
    gap:6px;
  }
  .shape-button {
    font-size:14px;
    padding:6px 10px;
    gap:10px;
  }
  .shape-button sup {
    font-size:8px;
    right:6px;
    top:5px;
  }
  .material-control {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .material-control .control-caption {
    margin:0;
  }
  .material-buttons {
    gap:17px;
    min-height:38px;
  }
  .material-buttons button {
    font-size:12px;
    gap:7px;
    min-height:38px;
  }
  .swatch {
    width:19px;
    height:19px;
  }
  .chaos-control .control-caption {
    margin-bottom:8px;
  }
  .chaos-control output {
    font-size:11px;
  }
  .range-ends {
    font-size:11px;
    margin-top:2px;
  }
  .bottom-bar {
    height:61px;
    gap:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .utility-buttons {
    gap:22px;
    width:100%;
    justify-content:space-between;
  }
  .utility-buttons button {
    font-size:11px;
    gap:5px;
  }
  .utility-buttons button>span:first-child {
    font-size:18px;
  }
  .reset-label {
    display:none;
  }
  .footer-note {
    display:none;
  }
  .fallback-message {
    top:40%;
    font-size:13px;
    left:50%;
    min-width:260px;
  }
  .noscript-message {
    top:35%;
    left:20px;
    right:20px;
    font-size:14px;
  }
}
@media(max-width:360px) {
  :root {
    --gutter:15px;
  }
  .intro-title {
    font-size:29px;
  }
  .intro-copy {
    font-size:12px;
  }
  .material-buttons {
    gap:13px;
  }
  .material-buttons button {
    gap:6px;
    font-size:11px;
  }
  .shape-note {
    font-size:9px;
  }
  .shape-button {
    font-size:13px;
  }
  .utility-buttons {
    gap:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
.gesture-zone:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:-5px;
}
.experience:has(.noscript-message) .fallback-message {
  display:none;
}
.fallback .masthead,.experience:has(.noscript-message) .masthead {
  z-index:0;
}

body{--scene-brand-surface:var(--blue)}