:root {
  --ink: #f2efe6;
  --night: #11150f;
  --paper: #e9e4d9;
  --paper-ink: #11130f;
  --load-progress: 0;
  --sun-x: 74%;
  --sun-y: 44%;
  --sun-lens-opacity: 0;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  font-family: "Helvetica Neue", "Neue Haas Grotesk Text Pro", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--night);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--night);
}

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a { color: inherit; font: inherit; }
button { border: 0; }
a { text-decoration: none; }

.plain-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.vector-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #fae887;
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  color: #0b0d09;
  background: #f1eee5;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.world-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #11150f;
}

#world-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 1.45s ease;
}

body.world-ready #world-canvas { opacity: 1; }
body.title-hover #world-canvas { cursor: pointer; }

.webgl-fallback {
  position: absolute;
  inset: 0;
  display: none;
}

.webgl-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.no-webgl .webgl-fallback { display: block; }

.sun-bleach,
.lens-vignette,
.film-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sun-bleach {
  z-index: 2;
  opacity: var(--sun-lens-opacity);
  background:
    radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255, 255, 242, 0.58) 0, rgba(255, 224, 174, 0.24) 3.5%, rgba(255, 175, 91, 0.08) 12%, transparent 30%),
    radial-gradient(ellipse 48% 17% at var(--sun-x) calc(var(--sun-y) + 12%), rgba(255, 232, 188, 0.1) 0, rgba(255, 192, 111, 0.04) 38%, transparent 74%),
    linear-gradient(104deg, transparent 35%, rgba(255, 205, 132, 0.035) 67%, transparent 84%);
  mix-blend-mode: screen;
  transform: translateZ(0);
  transition: opacity 1.8s ease;
}

.lens-vignette {
  background:
    radial-gradient(circle at 76% 37%, rgba(255, 208, 136, 0.05), transparent 27%),
    radial-gradient(ellipse at center, transparent 53%, rgba(4, 6, 4, 0.17) 100%);
  mix-blend-mode: multiply;
}

.film-grain {
  opacity: 0.055;
  background-image: url("./assets/grain.png");
  background-size: 200px 200px;
  mix-blend-mode: soft-light;
  animation: grain 0.35s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(0.5%, 1%); }
  100% { transform: translate(-0.5%, -0.5%); }
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  min-width: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  padding: max(28px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  color: #e9e7df;
  background: #0b0e0a;
  visibility: visible;
  opacity: 1;
  transition: opacity 1.1s var(--ease-out), visibility 0s 1.1s;
}

body:not(.is-loading) .loader {
  visibility: hidden;
  opacity: 0;
}

.loader-lockup {
  align-self: center;
  display: grid;
  justify-items: start;
}

.loader-name,
.loader-place {
  margin: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.loader-name { margin-bottom: clamp(22px, 3vw, 46px); }
.loader-place { margin-top: clamp(24px, 3vw, 44px); color: rgba(233, 231, 223, 0.52); }

.loader-title {
  display: flex;
  flex-direction: column;
  font-size: clamp(4rem, 11.4vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.073em;
  line-height: 0.72;
  text-transform: uppercase;
}

.loader-title span:last-child { margin-left: 0.72em; }

.loader-readout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 1.5rem;
}

.loader-progress {
  grid-column: 1 / -1;
  height: 1px;
  overflow: hidden;
  background: rgba(233, 231, 223, 0.17);
}

.loader-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #e9e7df;
  transform: scaleX(var(--load-progress));
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}

.loader-state,
.loader-count {
  margin: 12px 0 0;
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.loader-count { font-variant-numeric: tabular-nums; }

.frame-header {
  position: fixed;
  top: max(30px, calc(env(safe-area-inset-top) + 18px));
  right: max(34px, calc(env(safe-area-inset-right) + 22px));
  left: max(34px, calc(env(safe-area-inset-left) + 22px));
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  color: #f4f1e9;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1s ease 0.7s, transform 1s var(--ease-out) 0.7s;
}

body:not(.is-loading) .frame-header {
  opacity: 1;
  transform: translateY(0);
}

.identity {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 11px;
  color: inherit;
  text-align: left;
}

.identity-name { font-size: 11px; font-weight: 500; }

.place-lockup {
  display: flex;
  margin: 1px 0 0;
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.55;
  text-transform: uppercase;
}

.place-lockup span:last-child { color: rgba(244, 241, 233, 0.58); }

.primary-nav {
  display: flex;
  justify-self: end;
  gap: 23px;
}

.primary-nav button {
  position: relative;
  color: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.primary-nav button::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 400ms var(--ease-out);
}

.primary-nav button:hover::after,
.primary-nav button:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.primary-nav button span {
  margin-left: 2px;
  color: rgba(244, 241, 233, 0.48);
  font-size: 8px;
  vertical-align: top;
}

.scene-access {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.scene-access * { max-width: 1px; overflow: hidden; }

.scene-meta {
  position: fixed;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 26px));
  left: max(36px, calc(env(safe-area-inset-left) + 24px));
  z-index: 11;
  width: min(420px, 32vw);
  padding-top: 10px;
  border-top: 1px solid rgba(240, 238, 231, 0.5);
  color: #f0eee7;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 850ms ease 1s, transform 1s var(--ease-out) 1s;
}

body:not(.is-loading) .scene-meta {
  opacity: 1;
  transform: translateY(0);
}

.meta-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.meta-role { color: rgba(240, 238, 231, 0.66); text-align: right; }

.meta-copy {
  min-height: 2.6em;
  margin: 1.05rem 0 0;
  font-size: clamp(12px, 0.82vw, 15px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: opacity 250ms ease, transform 400ms var(--ease-out);
}

.meta-open {
  display: inline-flex;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(240, 238, 231, 0.58);
  color: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.meta-open[hidden],
.contact-actions[hidden] { display: none; }

.contact-actions {
  display: flex;
  margin-top: 1rem;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 11px;
}

.scene-meta.is-changing .meta-copy,
.scene-meta.is-changing .meta-heading,
.scene-meta.is-changing .meta-open,
.scene-meta.is-changing .contact-actions {
  opacity: 0;
  transform: translateY(5px);
}

.scene-rail {
  position: fixed;
  top: 50%;
  right: max(34px, calc(env(safe-area-inset-right) + 22px));
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-50%) translateX(10px);
  transition: opacity 1s ease 1.1s, transform 1s var(--ease-out) 1.1s;
}

body:not(.is-loading) .scene-rail {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.scene-rail button {
  position: relative;
  display: flex;
  width: 31px;
  height: 21px;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  border: 0;
  color: rgba(240, 238, 231, 0.48);
  background: none;
  cursor: pointer;
}

.scene-rail button i {
  display: block;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: width 400ms var(--ease-out), background 300ms ease;
}

.scene-rail button span {
  position: absolute;
  right: 13px;
  font-size: 8px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}

.scene-rail button:hover,
.scene-rail button.is-active { color: #f4f1e9; }

.scene-rail button.is-active i {
  width: 13px;
  border-color: #f4f1e9;
  border-radius: 8px;
  background: rgba(244, 241, 233, 0.82);
}

.scene-rail button:hover span,
.scene-rail button:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

.navigation-hint {
  position: fixed;
  right: max(35px, calc(env(safe-area-inset-right) + 23px));
  bottom: max(62px, calc(env(safe-area-inset-bottom) + 50px));
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(240, 238, 231, 0.65);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 1px 13px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 1s ease 1.5s;
}

body:not(.is-loading) .navigation-hint { opacity: 1; }
body[data-scene="contact"] .navigation-hint { opacity: 0; }

.navigation-hint i {
  position: relative;
  display: block;
  width: 34px;
  height: 1px;
  overflow: hidden;
  background: rgba(240, 238, 231, 0.28);
}

.navigation-hint i::after {
  position: absolute;
  inset: 0;
  background: #f0eee7;
  content: "";
  animation: hint-line 2.5s var(--ease-in-out) infinite;
}

@keyframes hint-line {
  0% { transform: translateX(-105%); }
  55%, 100% { transform: translateX(105%); }
}

.motion-permission {
  position: fixed;
  right: max(25px, calc(env(safe-area-inset-right) + 15px));
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 74px));
  z-index: 13;
  padding: 8px 10px;
  border: 1px solid rgba(240, 238, 231, 0.45);
  color: var(--ink);
  background: rgba(8, 11, 8, 0.34);
  backdrop-filter: blur(12px);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.portfolio-index {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(30px, calc(env(safe-area-inset-top) + 18px)) max(36px, calc(env(safe-area-inset-right) + 24px)) max(30px, calc(env(safe-area-inset-bottom) + 18px)) max(36px, calc(env(safe-area-inset-left) + 24px));
  color: #f1eee7;
  background: rgba(5, 7, 5, 0.97);
  backdrop-filter: blur(22px) saturate(0.7);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 1s var(--ease-in-out), opacity 600ms ease, visibility 0s 1s;
}

body.index-open .portfolio-index {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.portfolio-index > header,
.portfolio-index > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.portfolio-index > header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(241, 238, 231, 0.36);
}

.portfolio-index > header p { display: flex; margin: 0; gap: 1.5rem; }
.portfolio-index > header p span,
.portfolio-index > footer span { color: rgba(241, 238, 231, 0.48); }

.portfolio-index > header button,
.portfolio-index > footer button {
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.portfolio-index > header button,
.portfolio-index > footer button { display: inline-flex; align-items: center; gap: 0.65rem; }

.portfolio-index > header button .icon-close {
  display: inline-block;
  width: 14px;
  height: 14px;
  transition: transform 450ms var(--ease-out);
}

.portfolio-index > header button:hover .icon-close { transform: rotate(90deg); }

.portfolio-index ol {
  display: flex;
  margin: 0;
  padding: 2vh 0;
  flex-direction: column;
  justify-content: center;
  list-style: none;
}

.portfolio-index li {
  border-bottom: 1px solid rgba(241, 238, 231, 0.17);
  overflow: hidden;
}

.portfolio-index li:first-child { border-top: 1px solid rgba(241, 238, 231, 0.17); }

.portfolio-index li button {
  --project-bg: #dce967;
  --project-fg: #11150c;
  display: grid;
  width: 100%;
  padding: 0.6vh 0 0.7vh;
  grid-template-columns: 3.5rem 1fr 14rem 2rem;
  align-items: baseline;
  gap: 1rem;
  color: #f1eee7;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color 350ms ease, padding 500ms var(--ease-out), background 350ms ease;
}

.portfolio-index li button[data-index-project="shipr"] { --project-bg: #dce967; --project-fg: #11150c; }
.portfolio-index li button[data-index-project="skate"] { --project-bg: #eee9de; --project-fg: #181713; }
.portfolio-index li button[data-index-project="tmux"] { --project-bg: #c9e557; --project-fg: #0a0c08; }
.portfolio-index li button[data-index-project="stratum"] { --project-bg: #ea604d; --project-fg: #120b09; }
.portfolio-index li button[data-index-project="lineup"] { --project-bg: #d84b22; --project-fg: #100806; }

.portfolio-index li button > span { font-size: 9px; letter-spacing: 0.11em; }

.portfolio-index li strong {
  font-size: clamp(2.6rem, 5.4vw, 6.3rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.9;
  text-transform: uppercase;
}

.portfolio-index li em {
  color: rgba(241, 238, 231, 0.5);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.portfolio-index li b {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 18px;
  font-weight: 300;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 350ms ease, transform 450ms var(--ease-out);
}

.portfolio-index li b .vector-icon { width: 18px; height: 18px; }

.portfolio-index li button:hover,
.portfolio-index li button:focus-visible,
.portfolio-index li button:active {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  color: var(--project-fg);
  background: var(--project-bg);
}

.portfolio-index li button:hover em,
.portfolio-index li button:focus-visible em,
.portfolio-index li button:active em { color: color-mix(in srgb, var(--project-fg) 62%, transparent); }

.portfolio-index li button:hover b,
.portfolio-index li button:focus-visible b,
.portfolio-index li button:active b {
  opacity: 1;
  transform: translate(0, 0);
}

.portfolio-index > footer {
  padding-top: 14px;
  border-top: 1px solid rgba(241, 238, 231, 0.36);
}

.case-panel {
  --case-bg: var(--paper);
  --case-fg: var(--paper-ink);
  position: fixed;
  inset: 0;
  z-index: 34;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  color: var(--case-fg);
  background: var(--case-bg);
  visibility: hidden;
  transform: translateY(101%);
  transition: transform 1.05s var(--ease-in-out), visibility 0s 1.05s;
}

body.case-open .case-panel {
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.case-header,
.case-footer {
  position: relative;
  z-index: 2;
  display: flex;
  margin: 0 22px;
  padding: 18px 0;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid rgba(17, 19, 15, 0.28);
  background: color-mix(in srgb, var(--case-bg) 91%, transparent);
  backdrop-filter: blur(20px);
}

.case-header p { display: flex; margin: 0; gap: 2.2rem; }
.case-kind { color: rgba(17, 19, 15, 0.52); }

.case-header button,
.case-footer button {
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.case-header button { display: inline-flex; align-items: center; gap: 0.6rem; }

.case-header button .icon-close {
  display: inline-block;
  width: 14px;
  height: 14px;
  transition: transform 450ms var(--ease-out);
}

.case-header button:hover .icon-close { transform: rotate(90deg); }

.case-body {
  display: grid;
  min-height: calc(100svh - 108px);
  padding: 2.5vw 22px 2vw;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 3vw;
}

.case-copy { display: flex; min-width: 0; padding-top: 0.5vw; flex-direction: column; }

.case-year {
  margin: 0 0 4vh;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.case-copy h2 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(3.8rem, 6.55vw, 8.4rem);
  font-weight: 700;
  letter-spacing: -0.073em;
  line-height: 0.69;
  text-transform: uppercase;
  transform: scaleX(0.88);
  transform-origin: left center;
}

.case-copy h2 span { display: block; }

.case-summary {
  max-width: 28em;
  margin: auto 0 2.4rem;
  font-size: clamp(1.1rem, 1.5vw, 1.75rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.case-disciplines {
  display: grid;
  margin: 0 0 1.7rem;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(17, 19, 15, 0.28);
  list-style: none;
}

.case-disciplines li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(17, 19, 15, 0.16);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-disciplines li:nth-child(even) { text-align: right; }

.case-link {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.case-link > a:not(.app-store-badge) {
  display: inline-flex;
  padding-bottom: 5px;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid currentColor;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-link a .vector-icon { width: 15px; height: 15px; transition: transform 350ms var(--ease-out); }
.case-link a:hover .vector-icon { transform: translate(4px, -4px); }

.case-link .app-store-badge {
  display: block;
  width: 120px;
  height: 40px;
  padding: 0;
  border: 0;
  line-height: 0;
  transition: opacity 250ms ease, transform 350ms var(--ease-out);
}

.case-link .app-store-badge:hover,
.case-link .app-store-badge:focus-visible { opacity: 0.76; transform: translateY(-2px); }
.case-link .app-store-badge img { display: block; width: 120px; height: 40px; }

.case-visual {
  position: relative;
  min-height: 68vh;
  overflow: hidden;
  background: #11130f;
}

.case-footer { border-top: 1px solid rgba(17, 19, 15, 0.28); }
.case-footer p { margin: 0; }
.case-footer button { display: inline-flex; align-items: center; gap: 1.2rem; }
.case-footer button .icon-east { width: 18px; transition: transform 350ms var(--ease-out); }
.case-footer button:hover .icon-east { transform: translateX(5px); }

body[data-project="shipr"] .case-panel { --case-bg: #dce967; --case-fg: #11150c; }
body[data-project="skate"] .case-panel { --case-bg: #eee9de; --case-fg: #181713; }
body[data-project="tmux"] .case-panel { --case-bg: #c9e557; --case-fg: #0a0c08; }
body[data-project="stratum"] .case-panel { --case-bg: #ea604d; --case-fg: #120b09; }
body[data-project="lineup"] .case-panel { --case-bg: #d84b22; --case-fg: #100806; }

.shipr-product-study {
  position: relative;
  height: 100%;
  min-height: 68vh;
  overflow: hidden;
  color: #10120e;
  background:
    radial-gradient(circle at 87% 9%, rgba(220, 233, 103, 0.24), transparent 30%),
    linear-gradient(145deg, #11150f 0%, #080a08 66%, #161c11 100%);
}

.shipr-browser {
  position: absolute;
  top: 5%;
  left: -3%;
  width: 91%;
  padding: clamp(13px, 1.6vw, 24px);
  border: 1px solid rgba(16, 18, 14, 0.2);
  background: #f4f2ec;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
  transform: rotate(-1.35deg);
}

.shipr-appbar,
.shipr-tabs,
.shipr-boxes article header,
.shipr-boxes article footer,
.shipr-export p,
.shipr-export dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shipr-appbar {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 18, 14, 0.22);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shipr-appbar strong { font-size: 13px; letter-spacing: -0.035em; }
.shipr-appbar i { padding: 4px 7px; color: #0d120b; background: #bddd4e; font-style: normal; }

.shipr-tabs {
  justify-content: flex-start;
  gap: clamp(15px, 2.2vw, 34px);
  padding: clamp(13px, 1.6vw, 22px) 0 10px;
  border-bottom: 1px solid rgba(16, 18, 14, 0.14);
  color: rgba(16, 18, 14, 0.45);
  font-size: 8px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.shipr-tabs .is-active { color: #10120e; }

.shipr-boxes {
  display: grid;
  padding-top: clamp(13px, 1.6vw, 24px);
  grid-template-columns: 1fr 1fr;
  gap: clamp(7px, 0.9vw, 13px);
}

.shipr-boxes article {
  --box-tone: #a83ca5;
  min-width: 0;
  padding: clamp(10px, 1.2vw, 17px);
  border: 1px solid rgba(16, 18, 14, 0.14);
  background: color-mix(in srgb, var(--box-tone) 88%, white);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--box-tone) 22%, transparent);
}

.shipr-boxes article[data-tone="cyan"] { --box-tone: #25a9d7; }
.shipr-boxes article[data-tone="green"] { --box-tone: #29bc72; }
.shipr-boxes article[data-tone="orange"] { --box-tone: #f2962d; }

.shipr-boxes article header,
.shipr-boxes article footer { display: flex; align-items: center; justify-content: space-between; }
.shipr-boxes article header { font-size: 9px; }
.shipr-boxes article header span { padding: 3px 6px; background: rgba(244, 242, 236, 0.88); font-size: 7px; text-transform: uppercase; }

.shipr-boxes dl {
  display: grid;
  margin: clamp(16px, 2.2vw, 34px) 0;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shipr-boxes dl div { min-width: 0; }
.shipr-boxes dt { margin-bottom: 5px; font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.58; }
.shipr-boxes dd { margin: 0; font-size: clamp(11px, 1.25vw, 16px); font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.shipr-boxes article footer { padding-top: 8px; border-top: 1px solid rgba(16, 18, 14, 0.22); font-size: 7px; letter-spacing: 0.07em; text-transform: uppercase; }
.shipr-boxes article footer i { font-style: normal; opacity: 0.52; }

.shipr-export {
  position: absolute;
  right: -3%;
  bottom: 7%;
  width: clamp(230px, 43%, 440px);
  padding: clamp(16px, 2vw, 28px);
  color: #eef0e7;
  background: #0a0c09;
  border: 1px solid rgba(238, 240, 231, 0.19);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  transform: rotate(1.8deg);
}

.shipr-export p { margin: 0 0 clamp(30px, 4vw, 66px); font-size: 8px; letter-spacing: 0.09em; text-transform: uppercase; }
.shipr-export p span { padding: 4px 7px; color: #11150c; background: #dce967; }
.shipr-export > strong { display: block; font-size: clamp(2.3rem, 5.6vw, 6.8rem); letter-spacing: -0.075em; line-height: 0.75; text-transform: uppercase; }
.shipr-export dl { margin: clamp(26px, 3vw, 48px) 0 14px; gap: 1.5rem; }
.shipr-export dl div { flex: 1; padding-top: 9px; border-top: 1px solid rgba(238, 240, 231, 0.2); }
.shipr-export dt { margin-bottom: 5px; color: rgba(238, 240, 231, 0.48); font-size: 7px; letter-spacing: 0.09em; text-transform: uppercase; }
.shipr-export dd { margin: 0; font-size: 10px; }
.shipr-export-action { display: block; width: 100%; padding: 10px; color: #10120e; background: #eef0e7; font-size: 8px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

.shipr-study-note {
  position: absolute;
  bottom: 14px;
  left: 16px;
  margin: 0;
  color: rgba(238, 240, 231, 0.46);
  font-size: 7px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skate-visual,
.tmux-visual,
.lineup-visual { display: grid; height: 100%; place-items: center; }

.skate-visual {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(22, 22, 20, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 22, 20, 0.035) 1px, transparent 1px), #f1ede5;
  background-size: 28px 28px;
}

.skate-visual img {
  position: absolute;
  bottom: 7%;
  left: 56%;
  width: auto;
  max-width: 72%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(22, 20, 17, 0.13));
  transform: translateX(-50%) rotate(-1.2deg);
}

.skate-render-meta,
.skate-render-footer {
  position: absolute;
  right: clamp(16px, 2vw, 30px);
  left: clamp(16px, 2vw, 30px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.skate-render-meta { top: clamp(16px, 2vw, 30px); padding-bottom: 10px; border-bottom: 1px solid rgba(22, 22, 20, 0.22); }
.skate-render-footer { bottom: clamp(16px, 2vw, 30px); padding-top: 10px; border-top: 1px solid rgba(22, 22, 20, 0.22); }
.tmux-visual { position: relative; overflow: hidden; padding: clamp(14px, 2.2vw, 36px); background: #050605; }
.tmux-visual img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

.stratum-visual { display: grid; height: 100%; padding: clamp(12px, 1.4vw, 24px); place-items: center; background: #030303; }
.stratum-visual img { width: 100%; height: 100%; object-fit: contain; }

.roads-interface {
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #d8e9ed;
  background: linear-gradient(rgba(190, 221, 226, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 221, 226, 0.08) 1px, transparent 1px), radial-gradient(circle at 67% 42%, #264653, #101d22 66%);
  background-size: 36px 36px, 36px 36px, auto;
}

.roads-top {
  position: absolute;
  top: clamp(18px, 2.2vw, 34px);
  right: clamp(18px, 2.2vw, 34px);
  left: clamp(18px, 2.2vw, 34px);
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.roads-route {
  position: absolute;
  top: 23%;
  left: -12%;
  width: 130%;
  height: 42%;
  border: 3px solid #e9ce5e;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 48% 38% 58% 27%;
  transform: rotate(-9deg);
  filter: drop-shadow(0 0 8px rgba(233, 206, 94, 0.25));
}

.roads-route::before,
.roads-route::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid #f4eee1;
  border-radius: 50%;
  background: #1a3038;
  content: "";
}

.roads-route::before { right: 14%; bottom: -7px; }
.roads-route::after { right: 56%; bottom: -7px; }

.roads-card {
  position: absolute;
  right: 5%;
  bottom: 6%;
  width: min(270px, 37%);
  padding: 18px;
  border: 1px solid rgba(216, 233, 237, 0.38);
  background: rgba(8, 20, 25, 0.74);
  backdrop-filter: blur(14px);
}

.roads-card span { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.roads-card strong { display: block; margin: 0.55rem 0 1.2rem; font-size: clamp(1.8rem, 3.3vw, 3.8rem); font-weight: 500; letter-spacing: -0.05em; }
.roads-card p { display: flex; margin: 0; padding-top: 8px; justify-content: space-between; border-top: 1px solid rgba(216, 233, 237, 0.23); font-size: 9px; text-transform: uppercase; }

.lineup-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: end center;
  background:
    radial-gradient(circle at 46% 28%, rgba(255, 218, 174, 0.17), transparent 38%),
    linear-gradient(155deg, rgba(82, 12, 5, 0.08), transparent 54%),
    var(--case-bg);
}

.lineup-visual img {
  width: auto;
  max-width: 96%;
  height: 97%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 22px 28px rgba(67, 9, 3, 0.18));
}

.no-script {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 80;
  padding: 1rem;
  color: #11130f;
  background: #e9e4d9;
}

body.index-open .frame-header,
body.index-open .scene-meta,
body.index-open .scene-rail,
body.index-open .navigation-hint,
body.case-open .frame-header,
body.case-open .scene-meta,
body.case-open .scene-rail,
body.case-open .navigation-hint {
  pointer-events: none;
}

@media (max-width: 960px) {
  .case-body { grid-template-columns: 0.46fr 0.54fr; gap: 22px; }
  .case-copy h2 { font-size: clamp(3.45rem, 6.5vw, 6.2rem); }
  .case-summary { font-size: 1rem; }
  .portfolio-index li button { grid-template-columns: 2.5rem 1fr 10rem 1.5rem; }
}

@media (max-width: 720px) {
  .sun-bleach {
    background:
      radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(255, 255, 244, 0.76) 0, rgba(255, 226, 174, 0.36) 5%, rgba(255, 174, 86, 0.14) 17%, transparent 39%),
      radial-gradient(ellipse 66% 24% at var(--sun-x) calc(var(--sun-y) + 12%), rgba(255, 235, 198, 0.16) 0, rgba(255, 190, 103, 0.055) 42%, transparent 78%),
      radial-gradient(ellipse 22% 58% at var(--sun-x) calc(var(--sun-y) + 18%), rgba(255, 224, 174, 0.18) 0, rgba(255, 184, 100, 0.065) 38%, transparent 74%),
      linear-gradient(104deg, transparent 27%, rgba(255, 210, 143, 0.055) 67%, transparent 91%);
  }

  .sun-bleach::before,
  .sun-bleach::after {
    position: absolute;
    top: var(--sun-y);
    left: var(--sun-x);
    content: "";
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .sun-bleach::before {
    width: 68px;
    height: 68px;
    background:
      radial-gradient(circle, rgba(255, 255, 250, 0.98) 0 2%, rgba(255, 236, 200, 0.74) 4%, rgba(255, 190, 112, 0.2) 11%, transparent 27%),
      linear-gradient(90deg, transparent 3%, rgba(150, 215, 255, 0.03) 28%, rgba(255, 248, 226, 0.54) 49%, rgba(255, 181, 128, 0.09) 63%, transparent 97%),
      linear-gradient(0deg, transparent 8%, rgba(255, 205, 150, 0.025) 34%, rgba(255, 250, 231, 0.36) 50%, rgba(168, 218, 255, 0.035) 68%, transparent 92%);
    filter: blur(0.2px);
    transform: translate(-50%, -50%) rotate(-8deg);
  }

  .sun-bleach::after {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 0 31%, rgba(151, 214, 255, 0.1) 32%, rgba(255, 174, 135, 0.08) 34%, transparent 36%);
    filter: blur(0.45px);
    transform: translate(-50%, -50%) scaleX(1.16);
  }

  .film-grain {
    opacity: 0.035;
    animation: none;
    transform: translate3d(-0.5%, 0.5%, 0);
  }

  .loader {
    padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  }

  .loader-name { margin-bottom: 22px; }
  .loader-title { max-width: 100%; font-size: clamp(3.55rem, 18.5vw, 6rem); line-height: 0.74; }
  .loader-title span:last-child { margin-left: 0.38em; }
  .loader-place { margin-top: 24px; }

  .frame-header {
    top: max(22px, calc(env(safe-area-inset-top) + 14px));
    right: max(21px, calc(env(safe-area-inset-right) + 13px));
    left: max(21px, calc(env(safe-area-inset-left) + 13px));
    grid-template-columns: 1fr auto;
  }

  .place-lockup { display: none; }
  .identity-name { display: inline; font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; }
  .primary-nav { gap: 18px; }

  .scene-meta {
    right: max(22px, calc(env(safe-area-inset-right) + 14px));
    bottom: max(25px, calc(env(safe-area-inset-bottom) + 17px));
    left: max(22px, calc(env(safe-area-inset-left) + 14px));
    width: auto;
    padding-right: 4rem;
  }

  .meta-copy { min-height: 0; margin-top: 0.75rem; font-size: 11px; }
  .meta-open { margin-top: 0.7rem; }
  .scene-rail { display: none; }

  .navigation-hint {
    right: max(22px, calc(env(safe-area-inset-right) + 14px));
    bottom: max(54px, calc(env(safe-area-inset-bottom) + 46px));
  }

  .navigation-hint span { display: none; }
  .navigation-hint i { width: 31px; }

  .portfolio-index {
    padding: max(24px, calc(env(safe-area-inset-top) + 16px)) max(22px, calc(env(safe-area-inset-right) + 14px)) max(24px, calc(env(safe-area-inset-bottom) + 16px)) max(22px, calc(env(safe-area-inset-left) + 14px));
  }

  .portfolio-index > header p span,
  .portfolio-index > footer span { display: none; }
  .portfolio-index ol { padding: 3vh 0; }

  .portfolio-index li button {
    padding: 1.1vh 0 1.2vh;
    grid-template-columns: 1.9rem 1fr 1.2rem;
    gap: 0.55rem;
  }

  .portfolio-index li button > span { font-size: 8px; }
  .portfolio-index li strong { font-size: clamp(2.1rem, 11.3vw, 4.2rem); line-height: 0.87; }
  .portfolio-index li em { display: none; }
  .portfolio-index li b { grid-column: 3; }
  .portfolio-index > footer { justify-content: flex-end; }

  .case-header,
  .case-footer { margin: 0 14px; padding: 14px 0; }
  .case-header p { gap: 1rem; }

  .case-body {
    display: flex;
    min-height: auto;
    padding: 6vw 14px 8vw;
    flex-direction: column;
    gap: 2rem;
  }

  .case-copy { min-height: 0; padding-top: 0; }
  .case-year { margin-bottom: clamp(28px, 8vw, 44px); }
  .case-copy h2 { max-width: none; font-size: clamp(3.55rem, 16vw, 6rem); line-height: 0.68; transform: scaleX(0.9); }
  .case-summary { margin: clamp(46px, 13vw, 74px) 0 1.7rem; font-size: 1.25rem; }
  .case-disciplines { margin-bottom: 1.25rem; }
  .case-visual { min-height: 56svh; }
  .case-footer { min-height: 70px; }
  .case-footer p { display: none; }
  .case-footer button { margin-left: auto; }

  .shipr-product-study { min-height: 62svh; }
  .shipr-browser { top: 4%; left: -18%; width: 112%; padding: 12px; }
  .shipr-appbar span { display: none; }
  .shipr-tabs { gap: 15px; }
  .shipr-tabs span:last-child { display: none; }
  .shipr-boxes { gap: 7px; }
  .shipr-boxes article { padding: 10px; }
  .shipr-boxes article:nth-child(n + 3) { display: none; }
  .shipr-boxes dl { margin: 18px 0; grid-template-columns: 1fr; gap: 9px; }
  .shipr-export { right: -8%; bottom: 8%; width: 68%; padding: 16px; }
  .shipr-export p { margin-bottom: 32px; }
  .shipr-export > strong { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .shipr-study-note { right: 14px; bottom: 12px; left: auto; max-width: 44%; text-align: right; }
  .roads-card { right: 6%; bottom: 6%; width: 58%; }
  .skate-visual img { bottom: 5%; left: 53%; height: 88%; max-width: 82%; }
  .lineup-visual { min-height: 62svh; }
  .lineup-visual img { width: 100%; max-width: 100%; height: auto; max-height: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .film-grain,
  .navigation-hint { display: none; }
}