:root {
  --bg: #0b0b0d;
  --panel: #121214;
  --text: #f7f0e4;
  --muted: #aea7a3;
  --signal: #edbe78;
  --flame: #ed4939;
  --water: #6fceda;
  --wisteria: #c5a4e9;
  --line: #ffffff18;
  --line-strong: #ffffff35;
  --page-gutter: clamp(22px, 5.5vw, 96px);
  --font-sans: "Yu Gothic UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --font-serif: "Yu Mincho", "STZhongsong", "Songti SC", "SimSun", serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --scroll-progress: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  min-width: 320px;
  font-size: 15px;
  line-height: 1.8;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button,
input,
select,
textarea {
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}
::selection {
  color: #180c09;
  background: var(--signal);
}
img,
video {
  display: block;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
}
p {
  margin: 0 0 18px;
}
.shell {
  width: min(1440px, calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.site-frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.skip-link {
  position: fixed;
  z-index: 120;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: #111;
  background: var(--signal);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.scroll-progress {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--flame), var(--signal));
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
  pointer-events: none;
}
.scene-atmosphere {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.scene-atmosphere img,
.scene-atmosphere video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.13;
}
.scene-atmosphere:after {
  position: absolute;
  content: "";
  inset: 0;
  background:
    linear-gradient(90deg, #0b0b0ded, #0b0b0d8c 55%, #0b0b0ddb),
    linear-gradient(0deg, var(--bg), transparent 65%);
}
.hero {
  position: relative;
  min-height: 780px;
  height: min(1040px, 100svh);
  background:
    radial-gradient(ellipse at 78% 53%, #75272040, transparent 48%), #0b0b0e;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 89px,
    #ffffff03 90px,
    transparent 91px
  );
  pointer-events: none;
}
.hero:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #0b0b0e 2%,
      #0b0b0ef2 24%,
      #0b0b0e60 53%,
      transparent 75%
    ),
    linear-gradient(0deg, #0b0b0e 0%, transparent 24%);
  pointer-events: none;
}
.topbar {
  position: absolute;
  z-index: 60;
  top: 0;
  left: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 96px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--text);
  border: 1px solid #ea665e88;
  font: 23px var(--font-serif);
  background: #6c211b50;
  transform: rotate(-5deg);
}
.brand-meta {
  font-size: 13px;
  letter-spacing: 0.17em;
  font-weight: 600;
}
.brand-meta > span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.1em;
  font-weight: 400;
}
.nav-links {
  display: flex;
  gap: clamp(14px, 1.7vw, 28px);
  align-items: center;
}
.nav-links a {
  position: relative;
  font-size: 12px;
  padding-block: 14px;
  color: #d0c7be;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a > span {
  font-size: 9px;
  color: #e96e60;
  margin-right: 6px;
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--signal);
}
.nav-links a:after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.nav-links a:hover:after,
.nav-links a.is-active:after {
  transform: scaleX(1);
}
.contact-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 17px;
  border: 1px solid #bc786144;
  color: var(--signal);
  font-size: 12px;
  white-space: nowrap;
}
.contact-pill:hover {
  background: #eab77416;
}
.menu-toggle {
  display: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(210px, 27vh, 330px);
  pointer-events: none;
}
.hero-content a {
  pointer-events: auto;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--signal);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: 0 0 12px #ee514966;
  flex-shrink: 0;
}
.hero-roles {
  margin: 25px 0 16px;
  font-size: 12px;
  color: #c4b6ad;
  letter-spacing: 0.14em;
}
.hero-title {
  margin: 0 0 26px -5px;
  font-family: var(--font-serif);
  font-size: clamp(62px, 6.3vw, 103px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.035em;
  text-shadow: 0 3px 24px #0008;
}
.hero-line {
  display: block;
}
.hero-line + .hero-line {
  font-size: 0.76em;
}
.hero-title-accent {
  color: var(--signal);
}
.hero-bottom {
  max-width: 540px;
}
.hero-bottom > p {
  color: #b9b1ac;
  font-size: 13px;
  line-height: 2;
}
.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 29px;
}
.text-link {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  transition:
    background 0.25s,
    transform 0.25s,
    border-color 0.25s;
}
.primary-action {
  color: #fff5e8;
  background: #b63c2e;
  border-color: #de6854;
  box-shadow: 0 5px 24px #b1302226;
}
.primary-action:hover {
  background: #d44937;
  transform: translateY(-3px);
}
.text-link-quiet {
  background: #101012a6;
  color: #ded1bc;
}
.text-link-quiet:hover {
  border-color: var(--signal);
  transform: translateY(-3px);
}
.hero-art {
  position: absolute;
  inset: 96px 0 0 38%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-moon {
  position: absolute;
  top: 9%;
  left: 17%;
  width: min(40vw, 570px);
  aspect-ratio: 1;
  border: 1px solid #cd574a77;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #7a2d26, #591c1b 62%, #241315);
  box-shadow:
    0 0 90px #d63e3110,
    inset 0 0 70px #0a08094d;
  display: grid;
  place-items: center;
}
.hero-moon:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #e3836129;
  border-radius: 50%;
}
.hero-moon span {
  color: #f1aa7526;
  font: 380px var(--font-serif);
  transform: rotate(-8deg);
  line-height: 1;
}
.hero-character {
  position: absolute;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 20px 18px #030306ad);
}
.hero-character-main {
  z-index: 4;
  bottom: 4%;
  left: 21%;
  width: 62%;
  height: 91%;
  transform: rotate(-6deg);
}
.hero-character-secondary {
  z-index: 2;
  bottom: 13%;
  right: 0;
  width: 43%;
  height: 77%;
  transform: rotate(8deg);
  filter: brightness(0.78) drop-shadow(0 10px 20px #0008);
}
.hero-orbit {
  position: absolute;
  z-index: 3;
  width: 88%;
  height: 33%;
  left: 7%;
  top: 40%;
  border-radius: 50%;
  transform: rotate(-29deg);
  pointer-events: none;
}
.hero-orbit-one {
  border-top: 3px solid #f3c184;
  border-bottom: 8px solid #dc3b28;
  box-shadow:
    0 -6px #a542292e,
    0 7px 32px #ef4a333b;
}
.hero-orbit-two {
  top: 47%;
  left: -2%;
  width: 103%;
  height: 20%;
  border-bottom: 1px solid #f8d9a4;
  transform: rotate(-36deg);
  opacity: 0.58;
}
.hero-sword {
  position: absolute;
  z-index: 5;
  top: 67%;
  left: -10%;
  width: 117%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #e16142 30%,
    #ffe6bb 70%,
    transparent
  );
  transform: rotate(-29deg);
  box-shadow: 0 0 16px #fba36355;
}
.hero-japanese {
  position: absolute;
  z-index: 6;
  top: 6%;
  right: 9%;
  writing-mode: vertical-rl;
  font: 19px var(--font-serif);
  letter-spacing: 0.55em;
  color: #edcfa5;
}
.hero-art-caption {
  position: absolute;
  z-index: 6;
  bottom: 8%;
  right: 13%;
  color: #d99776;
  font-size: 9px;
  letter-spacing: 0.13em;
}
.hero-embers {
  position: absolute;
  z-index: 6;
  inset: 0;
}
.hero-embers i {
  position: absolute;
  width: 3px;
  height: 7px;
  border-radius: 50%;
  left: calc(10% + var(--i) * 7%);
  bottom: calc(5% + var(--i) * 3%);
  background: #f7a56f;
  box-shadow: 0 0 9px #f18349;
  transform: rotate(30deg);
  opacity: 0.7;
}
.effects-on .hero-embers i {
  animation: ember-rise calc(5s + var(--i) * 0.27s) linear infinite;
  animation-delay: calc(var(--i) * -0.8s);
}
.effects-on .hero-orbit-one {
  animation: orbit-breathe 5s ease-in-out infinite alternate;
}
.hero-rail {
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: var(--page-gutter);
  right: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9c928a;
  font-size: 9px;
}
.hero-rail a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rail-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--signal);
}
.hero-rail > span:last-child {
  color: var(--signal);
}
.media-toggle {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 13px;
  background: #141112ee;
  border-color: #c3a07755;
  color: #ddbf91;
  box-shadow: 0 4px 16px #0005;
}
.media-toggle .mono {
  font-size: 10px;
}
.media-toggle:hover {
  border-color: var(--signal);
}
.motion-strip {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #141011;
  color: #a99788;
}
.motion-strip-track {
  display: flex;
  width: max-content;
}
.motion-strip-group {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 18px 22px;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.motion-strip-group i {
  width: 4px;
  height: 4px;
  background: #ca6550;
  transform: rotate(45deg);
}
.effects-on .motion-strip-track {
  animation: marquee 48s linear infinite;
}
.chapter-dock {
  position: fixed;
  z-index: 65;
  right: 14px;
  top: 50%;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
:root[data-scrolled="true"] .chapter-dock {
  opacity: 1;
  pointer-events: auto;
}
.chapter-dock a {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  font-size: 10px;
}
.chapter-dock span {
  order: 2;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #78675d5e;
  background: #101012dc;
  color: #b6a289;
}
.chapter-dock em {
  font-style: normal;
  padding: 2px 8px;
  background: #121013ef;
  opacity: 0;
  transform: translate(5px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.chapter-dock a:hover em,
.chapter-dock a:focus-visible em {
  opacity: 1;
  transform: none;
}
.chapter-dock a.is-active span {
  color: #f1cb8e;
  border-color: #cd7b5477;
  background: #3b211c;
}
.section {
  position: relative;
  padding-block: clamp(80px, 8vw, 124px);
  border-bottom: 1px solid var(--line);
}
.section-head {
  position: relative;
  min-height: 260px;
  margin-bottom: 50px;
  padding-top: 8px;
  max-width: 78%;
}
.section-kicker {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--signal);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-bottom: 23px;
}
.section-kicker > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #c3945855;
  color: var(--signal);
}
.masked-title {
  margin: 0 0 22px;
  font: 600 clamp(32px, 3.6vw, 55px) / 1.4 var(--font-serif);
  letter-spacing: -0.02em;
}
.masked-title-line {
  display: block;
}
.section-head > p {
  color: var(--muted);
  max-width: 540px;
  font-size: 13px;
  line-height: 1.95;
}
.section-guardian {
  position: absolute;
  z-index: 1;
  right: 1%;
  top: 56px;
  width: 250px;
  height: 290px;
  pointer-events: none;
}
.work > .section-guardian,
.studio > .section-guardian,
.local-ai > .section-guardian,
.contact-screen > .section-guardian {
  right: var(--page-gutter);
}
.guardian-character {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px #0008);
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
  mask-image: linear-gradient(#000 80%, transparent);
}
.guardian-orbit {
  position: absolute;
  inset: 12% 8%;
  border: 1px solid #d8634238;
  border-radius: 50%;
  background: radial-gradient(circle, #9a352730, transparent 65%);
}
.guardian-orbit:after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed #e1a16333;
  border-radius: 50%;
}
.guardian-label {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #b89979;
  font-size: 8px;
}
.guardian-strengths .guardian-orbit {
  border-color: #6fceda44;
  background: radial-gradient(circle, #348aaf33, transparent 66%);
}
.guardian-local-ai .guardian-orbit {
  border-color: #c5a4e955;
  background: radial-gradient(circle, #9762b333, transparent 66%);
}
.profile-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.15fr 0.73fr;
  gap: 38px;
  align-items: start;
}
.portrait-panel {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: linear-gradient(140deg, #1e1d1a, #131318);
  overflow: hidden;
}
.portrait-panel img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}
.portrait-panel figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 7px;
}
.profile-copy {
  color: var(--muted);
  font-size: 13px;
}
.profile-copy .lead {
  color: #e1d8ce;
  font-size: 15px;
  line-height: 1.95;
}
.skill-cloud,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-cloud {
  margin-top: 27px;
}
.skill-cloud span,
.tag-row span {
  padding: 5px 10px;
  color: #c4b9a8;
  border: 1px solid #bca78422;
  background: #cfa77106;
  font: 10px var(--font-mono);
}
.profile-aside {
  padding: 24px;
  border-left: 1px solid var(--line);
  font-size: 12px;
}
.aside-block {
  display: grid;
  gap: 6px;
  margin-bottom: 28px;
  overflow-wrap: anywhere;
}
.eyebrow {
  margin-bottom: 9px;
  color: var(--signal);
}
.aside-block > span:not(.eyebrow) {
  color: var(--muted);
}
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--signal);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  margin-top: 64px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  border-right: 1px solid var(--line);
}
.stat:first-child {
  padding-left: 0;
}
.stat:last-child {
  border: none;
}
.stat strong {
  font: 30px var(--font-mono);
  letter-spacing: -0.07em;
  color: #e5c8a0;
}
.stat span {
  color: var(--muted);
  font-size: 10px;
  margin-top: 9px;
}
.timeline {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
  margin-top: 54px;
}
.timeline-label {
  color: var(--signal);
  padding-top: 18px;
}
.timeline-list {
  position: relative;
}
.timeline-beam {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(var(--flame), var(--signal), #c3a07211);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 5px 24px;
  padding: 16px 0 22px 28px;
}
.timeline-item:before {
  content: "";
  position: absolute;
  left: -2px;
  top: 23px;
  width: 5px;
  height: 5px;
  background: var(--signal);
}
.timeline-item time {
  color: var(--muted);
  font-size: 10px;
}
.timeline-item h3 {
  font-size: 13px;
  margin: 0;
  font-weight: 500;
}
.timeline-item p {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.project-stack {
  display: grid;
  gap: 34px;
}
.project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  border: 1px solid var(--line);
  background: #111113ee;
  transition: border-color 0.3s;
}
.project-card:hover {
  border-color: #c3916355;
}
.project-card.is-reversed .project-visual {
  order: 2;
}
.project-visual {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 50%, #292522, #141316 75%);
  overflow: hidden;
}
.project-visual:before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid #d3ac6917;
  pointer-events: none;
}
.project-visual:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 70%;
  right: -8%;
  bottom: 18%;
  background: linear-gradient(90deg, transparent, #d8b17a77, transparent);
  transform: rotate(-32deg);
}
.visual-index {
  position: absolute;
  top: 28px;
  left: 28px;
  color: #ad9677;
  font-size: 9px;
  z-index: 1;
}
.project-visual img {
  width: 92%;
  aspect-ratio: 1.25;
  object-fit: contain;
  transition: transform 0.65s var(--ease);
}
.project-card:hover .project-visual img {
  transform: scale(1.035);
}
.project-info {
  padding: clamp(26px, 3.1vw, 48px);
  min-width: 0;
}
.project-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  color: #aa906e;
  font-size: 9px;
}
.project-subtitle {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
}
.project-info h3 {
  font: 500 clamp(28px, 3vw, 43px) / 1.3 var(--font-mono);
  letter-spacing: -0.06em;
  margin: 6px 0 22px;
}
.project-description {
  font-size: 13px;
  color: #c6bdb3;
}
.project-facts {
  display: grid;
  gap: 10px;
  border-block: 1px solid var(--line);
  margin: 23px 0;
  padding: 17px 0;
}
.project-fact {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
}
.project-fact dt {
  color: #c5a577;
  font-size: 9px;
  padding-top: 3px;
}
.project-fact dd {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.tag-block {
  display: grid;
  gap: 9px;
}
.tag-label {
  color: var(--muted);
  font-size: 9px;
}
.project-links {
  display: flex;
  gap: 22px;
  margin-top: 25px;
}
.project-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--signal);
  font-size: 11px;
  padding-bottom: 6px;
  border-bottom: 1px solid #bb976844;
}
.project-links a:hover {
  border-color: var(--signal);
}
.strength-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.strength-card {
  position: relative;
  grid-column: span 5;
  padding: 32px;
  border: 1px solid var(--line);
  background: #131316ee;
  min-height: 290px;
  overflow: hidden;
}
.strength-primary,
.strength-stack {
  grid-column: span 7;
}
.strength-primary {
  background:
    radial-gradient(circle at 100% 0, #73331c36, transparent 70%), #131316f5;
}
.card-top {
  display: flex;
  justify-content: space-between;
  color: #b79675;
  font-size: 9px;
  margin-bottom: 28px;
}
.strength-card h3 {
  margin: 18px 0 12px;
  font: 600 22px/1.5 var(--font-serif);
}
.strength-card p {
  font-size: 13px;
  color: var(--muted);
  max-width: 470px;
}
.big-mark {
  display: block;
  font: 66px/1 var(--font-mono);
  color: var(--signal);
  letter-spacing: -0.1em;
}
.evidence {
  font-size: 9px;
  color: #aa8965;
  margin-top: 27px;
}
.signal-lines {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 54px;
}
.signal-lines i {
  display: block;
  width: 26px;
  height: 1px;
  background: #e4c391;
  transform: rotate(-52deg);
}
.signal-lines i:nth-child(2n) {
  width: 48px;
}
.matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.matrix span {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  font-size: 10px;
  color: #bb9acb;
}
.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  color: var(--water);
  font-size: 10px;
}
.studio-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 38px;
  align-items: start;
}
.studio-manifest {
  position: relative;
  padding: 30px;
  border: 1px solid #ba855935;
  background:
    radial-gradient(ellipse at 100% 100%, #76492240, transparent 70%), #141318;
  overflow: hidden;
}
.studio-manifest-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 8px;
  color: #ad946d;
  margin-bottom: 64px;
}
.studio-manifest-copy {
  position: relative;
  z-index: 1;
}
.studio-manifest-copy > span {
  color: var(--signal);
  font-size: 9px;
}
.studio-manifest h3 {
  margin: 14px 0;
  font: 30px var(--font-serif);
}
.studio-manifest p {
  font-size: 13px;
  color: var(--muted);
  max-width: 420px;
}
.studio-frame-mark {
  position: absolute;
  right: -6px;
  bottom: -20px;
  color: #d9bc8320;
  font-size: 100px;
  line-height: 1;
}
.studio-service-list {
  margin-top: 20px;
}
.studio-service-row {
  display: grid;
  grid-template-columns: 30px 100px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.studio-service-row > span {
  font-size: 9px;
  color: #b49b7c;
}
.studio-service-row h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}
.studio-service-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.studio-process {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.studio-process > div {
  display: grid;
  gap: 8px;
}
.studio-process span {
  color: #ad9477;
  font-size: 9px;
}
.studio-process strong {
  font-size: 12px;
  font-weight: 500;
}
.studio-brief {
  padding: 30px;
  border: 1px solid #c1925d44;
  background: #171418f5;
}
.studio-brief-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
  padding-bottom: 20px;
}
.studio-brief-head .mono {
  color: var(--signal);
  font-size: 9px;
}
.studio-brief-head h3 {
  margin: 6px 0 0;
  font: 25px var(--font-serif);
}
.studio-form-availability {
  display: flex;
  align-items: center;
  gap: 6px;
}
.studio-form-availability i {
  width: 4px;
  height: 4px;
  background: #c4d092;
  border-radius: 50%;
}
.studio-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.studio-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.studio-field > span,
.friend-auth-form label > span,
.ai-prompt-field > span,
.ai-request-form label > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #d0c2b1;
}
.studio-field small {
  font-size: 10px;
  color: var(--muted);
}
.studio-field-wide {
  grid-column: 1/-1;
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #cfbba528;
  background: #0e0e12;
  font-size: 13px;
  line-height: 1.65;
  transition: border-color 0.2s;
}
input:hover,
select:hover,
textarea:hover {
  border-color: #bfab8766;
}
input::placeholder,
textarea::placeholder {
  color: #847e7b;
}
textarea {
  min-height: 130px;
  resize: vertical;
}
.studio-form-actions {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}
.studio-form-actions > p,
.ai-actions p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
.studio-form-actions button,
.friend-auth-form > button,
.ai-request-form > button,
.ai-actions button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #b13b2e;
  border: 1px solid #d76b4e;
  font-size: 12px;
  color: #fff0db;
  transition: background 0.2s;
}
.studio-form-actions button:hover:not(:disabled),
.friend-auth-form > button:hover:not(:disabled),
.ai-request-form > button:hover:not(:disabled),
.ai-actions button:hover:not(:disabled) {
  background: #ce4938;
}
.studio-form-status {
  margin: 12px 0 0;
  font-size: 12px;
  min-height: 22px;
  color: #cddca6;
}
.is-error {
  color: #ff9b8e !important;
}
.local-ai {
  background: radial-gradient(ellipse at 80% 20%, #683a7920, transparent 60%);
}
.local-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
}
.account-console,
.ai-console {
  border: 1px solid #c9abc32e;
  padding: 30px;
  min-width: 0;
  background: #131116f2;
}
.console-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 23px;
  margin-bottom: 23px;
  border-bottom: 1px solid var(--line);
}
.console-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #b399c746;
  color: var(--wisteria);
  background: #6b42731c;
}
.console-head p {
  font-size: 9px;
  color: #b59cc7;
  margin: 0 0 5px;
}
.console-head h3 {
  margin: 0;
  font: 20px/1.5 var(--font-serif);
}
.forge-guest-card,
.forge-pass-card {
  display: grid;
  gap: 12px;
}
.forge-guest-card > span {
  color: #af9cbb;
  font-size: 9px;
}
.forge-guest-card h4 {
  margin: 0;
  font-size: 15px;
}
.forge-guest-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.auth-tabs,
.ai-mode-tabs,
.request-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.auth-tabs {
  margin-top: 10px;
}
.auth-tabs button {
  flex: 1;
}
.auth-tabs button,
.ai-mode-tabs button,
.request-options button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 11px;
  color: #b5aaba;
  border: 1px solid #b39bc333;
  background: #9971b408;
}
.auth-tabs button.is-active,
.ai-mode-tabs button.is-active,
.request-options button.is-active {
  color: #ecd8ff;
  border-color: #c297d980;
  background: #65416e50;
}
.friend-auth-form,
.ai-request-form {
  display: grid;
  gap: 14px;
}
.friend-auth-form label,
.ai-request-form label,
.ai-prompt-field {
  display: grid;
  gap: 8px;
}
.ai-request-form {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 24px;
}
.ai-request-form textarea {
  min-height: 96px;
}
.ai-request-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ai-request-head h4 {
  margin: 0;
  font-size: 14px;
}
.ai-request-head .mono {
  color: var(--muted);
  font-size: 8px;
}
.console-message {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.9;
  margin: 18px 0 0;
  min-height: 20px;
}
.ai-mode-tabs {
  margin-bottom: 23px;
}
.ai-mode-tabs button {
  flex: 1;
  white-space: nowrap;
  padding-inline: 9px;
}
.ai-prompt-field textarea {
  min-height: 210px;
}
.ai-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block: 20px;
}
.ai-output {
  display: block;
  min-height: 200px;
  padding: 22px;
  border: 1px dashed #b391bc33;
  background: #0d0d105c;
  color: #b3a7bc;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.account-card {
  grid-template-columns: 54px 1fr;
  align-items: center;
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: #624a70;
  font-size: 16px;
}
.account-card > div:nth-child(2) {
  display: grid;
}
.account-card .mono {
  font-size: 10px;
  color: var(--muted);
}
.access-row {
  display: flex;
  gap: 8px;
  grid-column: 1/-1;
  flex-wrap: wrap;
}
.access-badge {
  font-size: 10px;
  border: 1px solid var(--line);
  padding: 3px 9px;
  color: var(--muted);
}
.access-badge.is-on {
  color: #c5d998;
  border-color: #a5bc7944;
}
.ghost-button {
  grid-column: 1/-1;
  padding: 9px 14px;
  color: #baa4c8;
  font-size: 11px;
}
.contact-screen {
  position: relative;
  padding-top: 120px;
  background:
    radial-gradient(ellipse at 75% 35%, #62202b29, transparent 60%), #0d0b0eeb;
}
.contact-screen > .section-guardian {
  top: 78px;
  width: 280px;
  height: 360px;
}
.contact-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--signal);
  font-size: 10px;
}
.contact-screen h2 {
  margin: 30px 0;
  font: 600 clamp(36px, 4.8vw, 70px) / 1.4 var(--font-serif);
}
.contact-email {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 35px;
}
.contact-email > a {
  font: clamp(19px, 3.1vw, 43px) / 1.5 var(--font-mono);
  letter-spacing: -0.055em;
  border-bottom: 1px solid #aa7a4d88;
  overflow-wrap: anywhere;
}
.contact-email > a:hover {
  color: var(--signal);
}
.contact-email button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: none;
  color: #b9a385;
}
.contact-email button .mono {
  font-size: 9px;
}
.contact-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 30px;
  padding-block: 52px;
}
.contact-meta > div {
  display: grid;
  gap: 7px;
}
.contact-meta .mono {
  color: #978878;
  font-size: 9px;
}
.contact-meta strong,
.contact-meta a {
  font-size: 12px;
  font-weight: 400;
}
.contact-meta a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-top {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
}
.footer-line {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 23px 0 68px;
  border-top: 1px solid var(--line);
  color: #91847b;
  font-size: 8px;
}
@keyframes ember-rise {
  0% {
    transform: translate3d(0, 20px, 0) rotate(20deg);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  to {
    transform: translate3d(-45px, -260px, 0) rotate(90deg);
    opacity: 0;
  }
}
@keyframes orbit-breathe {
  0% {
    transform: rotate(-29deg) scale(0.99);
    opacity: 0.7;
  }
  to {
    transform: rotate(-25deg) scale(1.03);
    opacity: 1;
  }
}
@keyframes marquee {
  to {
    transform: translate(-50%);
  }
}
@keyframes title-enter {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.effects-on .hero-reveal {
  animation: title-enter 0.75s var(--ease) both;
}
.hero-delay-1 {
  animation-delay: 0.05s !important;
}
.hero-delay-2 {
  animation-delay: 0.12s !important;
}
.hero-delay-3 {
  animation-delay: 0.2s !important;
}
.hero-delay-4 {
  animation-delay: 0.28s !important;
}
[data-reveal][data-animate] {
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.effects-on [data-reveal][data-animate]:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}
.hero.is-away *,
.effects-off *,
.effects-off *:before,
.effects-off *:after {
  animation-play-state: paused !important;
}
.effects-off .hero-reveal {
  opacity: 1;
  transform: none;
}
@media (min-width: 1600px) {
  .topbar {
    left: calc((100% - min(1440px, 100% - var(--page-gutter) * 2)) / 2);
  }
}
@media (max-width: 1180px) {
  .nav-links {
    gap: 14px;
  }
  .nav-links a > span {
    display: none;
  }
  .brand-meta {
    font-size: 11px;
  }
  .contact-pill {
    display: none;
  }
  .hero-title {
    font-size: 7vw;
  }
  .hero-art {
    left: 32%;
  }
  .hero-bottom {
    max-width: 470px;
  }
  .profile-grid {
    grid-template-columns: 0.85fr 1.3fr;
    gap: 28px;
  }
  .profile-aside {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 35px;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 24px 0 0;
  }
  .aside-block {
    margin: 0;
    flex: 1;
  }
  .section-guardian {
    width: 210px;
    height: 265px;
  }
  .section-head {
    max-width: 75%;
  }
  .studio-layout {
    gap: 22px;
  }
  .studio-brief,
  .account-console,
  .ai-console {
    padding: 24px;
  }
  .studio-service-row {
    grid-template-columns: 24px 85px 1fr;
    gap: 8px;
  }
  .ai-mode-tabs button {
    flex-basis: 40%;
  }
  .timeline {
    grid-template-columns: 1fr 3fr;
    gap: 24px;
  }
}
@media (max-width: 900px) {
  .hero-title {
    font-size: 7.5vw;
  }
  .hero-bottom {
    max-width: 420px;
  }
  .hero-roles {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .hero-art {
    left: 26%;
    opacity: 0.8;
  }
  .hero:after {
    background:
      linear-gradient(
        90deg,
        #0b0b0e 2%,
        #0b0b0edb 20%,
        #0b0b0e60 60%,
        transparent
      ),
      linear-gradient(0deg, #0b0b0e, transparent 60%);
  }
  .hero-japanese {
    right: 7%;
    font-size: 15px;
  }
  .project-info {
    padding: 24px;
  }
  .project-visual {
    min-height: 330px;
  }
  .studio-layout,
  .local-ai-grid {
    grid-template-columns: 1fr;
  }
  .studio-brief {
    max-width: none;
  }
  .studio-process {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
  }
  .chapter-dock {
    display: none;
  }
  .contact-screen > .section-guardian {
    width: 200px;
    height: 280px;
  }
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: 28px;
  }
  .hero {
    min-height: 900px;
    height: auto;
    padding-bottom: 100px;
  }
  .topbar {
    min-height: 80px;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .brand-meta {
    font-size: 12px;
  }
  .menu-toggle {
    display: grid;
    gap: 5px;
    place-content: center;
    width: 44px;
    height: 44px;
    border-color: #c6a8783b;
  }
  .menu-toggle span {
    width: 17px;
    height: 1px;
    background: var(--text);
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 79px;
    right: 0;
    width: min(300px, 100%);
    padding: 18px 24px;
    background: #151215;
    border: 1px solid #b98a6155;
    box-shadow: 0 25px 50px #0009;
  }
  .nav-links.is-open {
    display: grid;
    gap: 0;
  }
  .nav-links a {
    padding-block: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .nav-links a > span {
    display: inline;
    margin-right: 15px;
  }
  .hero-art {
    top: 65px;
    left: 0;
    height: 475px;
    opacity: 1;
  }
  .hero-moon {
    width: 325px;
    left: calc(50% - 165px);
    top: 14%;
  }
  .hero-moon span {
    font-size: 240px;
  }
  .hero-character-main {
    height: 92%;
    width: 63%;
    left: 13%;
    bottom: 0;
  }
  .hero-character-secondary {
    height: 74%;
    width: 43%;
    right: 2%;
    bottom: 9%;
  }
  .hero-orbit-one {
    top: 46%;
    width: 87%;
    left: 6%;
  }
  .hero-orbit-two {
    top: 59%;
  }
  .hero-japanese {
    top: 14%;
    right: 8%;
    font-size: 13px;
  }
  .hero-art-caption {
    display: none;
  }
  .hero:after {
    background: linear-gradient(
      0deg,
      #0b0b0e 0%,
      #0b0b0e 42%,
      #0b0b0edb 48%,
      transparent 67%
    );
  }
  .hero-content {
    padding-top: 480px;
  }
  .hero-eyebrow {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .hero-roles {
    margin-top: 21px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .hero-title {
    font-size: clamp(42px, 9.7vw, 68px);
    margin: 12px 0 23px -2px;
  }
  .hero-title .hero-line + .hero-line {
    font-size: 0.78em;
  }
  .hero-bottom {
    max-width: 580px;
  }
  .hero-bottom > p {
    font-size: 12px;
    line-height: 1.9;
  }
  .hero-actions {
    margin-top: 22px;
    gap: 10px;
  }
  .text-link {
    padding: 12px 16px;
    gap: 14px;
    font-size: 11px;
  }
  .hero-rail {
    bottom: 26px;
    font-size: 8px;
  }
  .hero-rail > span:nth-child(2) {
    display: none;
  }
  .motion-strip-group {
    gap: 25px;
    padding-block: 15px;
    font-size: 8px;
  }
  .section {
    padding-block: 70px;
  }
  .section-head {
    max-width: none;
    min-height: 210px;
    padding-top: 0;
    margin-bottom: 30px;
  }
  .section-kicker {
    font-size: 9px;
    margin-bottom: 23px;
  }
  .masked-title {
    font-size: clamp(26px, 5.1vw, 38px);
    padding-right: 85px;
    line-height: 1.55;
  }
  .section-head > p {
    max-width: 78%;
    font-size: 12px;
  }
  .section-guardian {
    top: 84px;
    right: -18px;
    width: 125px;
    height: 180px;
    opacity: 0.76;
  }
  .work > .section-guardian,
  .studio > .section-guardian,
  .local-ai > .section-guardian {
    right: 5px;
  }
  .guardian-label {
    display: none;
  }
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portrait-panel {
    display: none;
  }
  .profile-copy .lead {
    font-size: 14px;
  }
  .profile-aside {
    gap: 22px;
  }
  .profile-aside .inline-link {
    flex-basis: 100%;
  }
  .stats-row {
    margin-top: 36px;
    grid-template-columns: repeat(2, 1fr);
  }
  .stat {
    padding: 22px 14px !important;
    border-bottom: 1px solid var(--line);
  }
  .stat:nth-child(2n) {
    border-right: none;
  }
  .stat:nth-child(n + 3) {
    border-bottom: none;
  }
  .stat strong {
    font-size: 26px;
  }
  .timeline {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 30px;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .timeline-item p {
    grid-column: 1;
  }
  .project-stack {
    gap: 24px;
  }
  .project-card {
    grid-template-columns: 1fr;
  }
  .project-card.is-reversed .project-visual {
    order: 0;
  }
  .project-visual {
    min-height: 240px;
    max-height: 350px;
  }
  .project-visual img {
    width: 85%;
    max-height: 310px;
  }
  .visual-index {
    top: 20px;
    left: 20px;
    font-size: 8px;
  }
  .project-info {
    padding: 24px;
  }
  .project-info h3 {
    font-size: 32px;
  }
  .project-meta {
    margin-bottom: 20px;
  }
  .project-description {
    font-size: 12px;
  }
  .project-fact {
    grid-template-columns: 58px 1fr;
  }
  .strength-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .strength-card,
  .strength-primary,
  .strength-stack {
    grid-column: 1;
    min-height: 0;
    padding: 25px;
  }
  .strength-card h3 {
    font-size: 21px;
  }
  .studio-manifest {
    padding: 25px;
  }
  .studio-manifest-meta {
    margin-bottom: 45px;
  }
  .studio-manifest h3 {
    font-size: 26px;
  }
  .studio-service-row {
    grid-template-columns: 24px 1fr;
  }
  .studio-service-row p {
    grid-column: 2;
  }
  .studio-process {
    grid-template-columns: 1fr 1fr;
  }
  .studio-brief,
  .account-console,
  .ai-console {
    padding: 22px;
  }
  .studio-brief-grid {
    grid-template-columns: 1fr;
  }
  .studio-field-wide {
    grid-column: 1;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .ai-actions {
    flex-wrap: wrap;
  }
  .ai-actions button {
    width: 100%;
  }
  .console-head h3 {
    font-size: 18px;
  }
  .contact-screen {
    padding-top: 75px;
  }
  .contact-screen > .section-guardian {
    top: 40px;
    right: -22px;
    width: 150px;
    height: 240px;
    opacity: 0.5;
  }
  .contact-inner {
    position: relative;
    z-index: 2;
  }
  .contact-kicker {
    font-size: 8px;
    max-width: 80%;
  }
  .contact-screen h2 {
    font-size: 35px;
  }
  .contact-email {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
  .contact-email > a {
    font-size: clamp(18px, 5.7vw, 30px);
  }
  .contact-email button {
    padding-left: 0;
  }
  .contact-meta {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding-block: 32px;
  }
  .back-top {
    justify-self: end;
  }
  .footer-line {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 75px;
  }
  .media-toggle {
    right: 13px;
    bottom: 13px;
    padding: 8px 10px;
  }
  .scene-atmosphere img {
    opacity: 0.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal][data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}
.motion-strip.is-away .motion-strip-track {
  animation-play-state: paused;
}
.journal {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 35%, #30201533, transparent 34%),
    linear-gradient(135deg, #100f11, #0b0b0d 64%, #11100f);
}
.journal > .shell {
  position: relative;
  z-index: 1;
}
.journal-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  margin-bottom: 20px;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}
.journal-toolbar > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--signal);
}
.journal-toolbar .status-dot {
  width: 6px;
  height: 6px;
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.journal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: clamp(24px, 3.2vw, 42px);
  overflow: hidden;
  border: 1px solid #ffffff1b;
  background: linear-gradient(145deg, #191719ed, #121114ed 70%);
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background 0.35s var(--ease);
}
.journal-card:after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -105px;
  width: 220px;
  height: 220px;
  border: 1px solid #d49d5b20;
  border-radius: 50%;
  box-shadow:
    0 0 0 22px #d49d5b08,
    0 0 0 46px #d49d5b05;
  pointer-events: none;
}
.journal-card:hover {
  transform: translateY(-4px);
  border-color: #d7a56377;
  background: linear-gradient(145deg, #201a19, #151315 72%);
}
.journal-card-featured {
  grid-column: 1/-1;
  min-height: 300px;
  background: linear-gradient(110deg, #211817, #151315 58%, #191613);
}
.journal-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #c7a477;
  font-size: 9px;
}
.journal-card-meta time {
  color: var(--muted);
}
.journal-card-copy {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-block: auto;
  padding-block: 28px;
}
.journal-category {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--water);
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
}
.journal-card h3 {
  max-width: 680px;
  margin: 0 0 12px;
  font: 600 clamp(21px, 2.3vw, 31px) / 1.45 var(--font-serif);
  letter-spacing: -0.015em;
}
.journal-card p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-card-featured h3 {
  font-size: clamp(26px, 3vw, 40px);
}
.journal-card-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  color: var(--signal);
  font-size: 11px;
}
.journal-state {
  min-height: 110px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.journal-dialog {
  width: min(900px, calc(100% - 28px));
  max-width: none;
  max-height: min(88dvh, 920px);
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 1px solid #c3945855;
  background: #111012;
  box-shadow: 0 35px 120px #000c;
}
.journal-dialog::backdrop {
  background: #050506c9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.journal-dialog-shell {
  position: relative;
  max-height: min(88dvh, 920px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 6vw, 72px);
}
.journal-dialog-close {
  position: sticky;
  z-index: 2;
  top: 0;
  float: right;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -18px -18px 0 16px;
  border: 1px solid var(--line-strong);
  background: #181619;
  color: var(--text);
  font-size: 27px;
  line-height: 1;
}
.journal-dialog-close:hover {
  border-color: var(--signal);
  color: var(--signal);
}
.journal-article {
  max-width: 720px;
  margin-inline: auto;
}
.journal-article-header {
  padding: 12px 0 30px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.journal-article-header > p {
  margin: 0 0 14px;
  color: var(--signal);
  font-size: 10px;
}
.journal-article-header h1 {
  margin: 0 0 18px;
  font: 600 clamp(28px, 5vw, 48px) / 1.38 var(--font-serif);
}
.journal-article-header time {
  color: var(--muted);
  font: 10px var(--font-mono);
}
.markdown-body {
  color: #e8e0d6;
  font-size: 14px;
  line-height: 2;
}
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.9em 0 0.65em;
  color: var(--text);
  font-family: var(--font-serif);
  line-height: 1.5;
}
.markdown-body h2 {
  font-size: 1.55em;
}
.markdown-body h3 {
  font-size: 1.3em;
}
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-size: 1.12em;
}
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote {
  margin: 0 0 1.25em;
}
.markdown-body ul,
.markdown-body ol {
  padding-left: 1.5em;
}
.markdown-body li + li {
  margin-top: 0.35em;
}
.markdown-body a {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-color: #edbe7855;
  text-underline-offset: 3px;
}
.markdown-body a:hover {
  text-decoration-color: var(--signal);
}
.markdown-body strong {
  color: #fff4df;
}
.markdown-body blockquote {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--flame);
  color: #c9beb3;
}
.markdown-body blockquote p:last-child {
  margin-bottom: 0;
}
.markdown-body :not(pre) > code {
  padding: 0.18em 0.45em;
  border: 1px solid #ffffff16;
  background: #211f20;
  color: #f2c98e;
  font: 0.88em var(--font-mono);
}
.markdown-body pre {
  max-width: 100%;
  margin: 1.4em 0;
  padding: 20px 22px;
  overflow: auto;
  border: 1px solid #ffffff1b;
  background: #09090b;
  color: #eee2d1;
  font: 12px/1.8 var(--font-mono);
  tab-size: 2;
}
.markdown-body pre code {
  font: inherit;
  white-space: pre;
}
.markdown-body hr {
  width: 100%;
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.markdown-table-wrap {
  max-width: 100%;
  margin: 1.5em 0;
  overflow: auto;
  border: 1px solid var(--line);
}
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.markdown-body th,
.markdown-body td {
  min-width: 110px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.markdown-body th {
  color: var(--signal);
  background: #ffffff08;
  font-weight: 600;
}
.markdown-body tr:last-child td {
  border-bottom: 0;
}
.markdown-image {
  max-height: 640px;
  margin: 1.6em auto;
  border: 1px solid var(--line);
  object-fit: contain;
}
@media (max-width: 700px) {
  .journal-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .journal-grid {
    grid-template-columns: 1fr;
  }
  .journal-card-featured {
    grid-column: auto;
    min-height: 280px;
  }
  .journal-card {
    min-height: 245px;
    padding: 24px;
  }
  .journal-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
  .journal-dialog-shell {
    max-height: calc(100dvh - 16px);
    padding: 25px 20px 34px;
  }
  .journal-dialog-close {
    margin: -8px -6px 0 12px;
  }
  .markdown-body {
    font-size: 13px;
  }
  .markdown-body pre {
    padding: 16px;
    font-size: 11px;
  }
}

/* 4.0 · Progressive content, persistent navigation and accessible controls. */
[hidden] {
  display: none !important;
}
.topbar {
  position: fixed;
  background: #0b0b0ef5;
  min-height: 86px;
}
:root[data-scrolled="true"] .topbar {
  border-bottom-color: #c1925d44;
  box-shadow: 0 8px 28px #0005;
}
.nojs-nav {
  position: relative;
  z-index: 80;
  padding: 96px var(--page-gutter) 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg);
}
.nojs-nav p {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}
.ai-mode-tabs .studio-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 8px 13px;
  font-size: 11px;
  color: #e2c0ef;
  border: 1px solid #b39bc355;
  background: #9971b408;
  flex: 1;
  white-space: nowrap;
}
.ai-mode-tabs .studio-link:hover {
  background: #65416e50;
}
.auth-tabs button,
.ai-mode-tabs button,
.request-options button {
  min-height: 44px;
}
.ghost-button,
.contact-email button,
.project-links a,
.inline-link {
  min-height: 44px;
}
.quiet-button {
  margin: 12px 0 20px;
  padding: 10px 18px;
  min-height: 44px;
  color: var(--signal);
}
.journal-article-header h2 {
  margin: 0 0 18px;
  font: 600 clamp(28px, 5vw, 48px) / 1.38 var(--font-serif);
}
.journal-dialog[open] {
  overscroll-behavior: contain;
}
body:has(.journal-dialog[open]) {
  overflow: hidden;
}
.scene-atmosphere video {
  transition: opacity 0.2s;
}
.section-head > p,
.project-description,
.profile-copy,
.strength-card p,
.studio-manifest p {
  font-size: 14px;
}
.footer-line {
  font-size: 10px;
}
.console-message,
.studio-form-status {
  overflow-wrap: anywhere;
}
.account-console:focus-within,
.ai-console:focus-within,
.studio-brief:focus-within {
  border-color: #c297d980;
}
@media (max-width: 1180px) {
  .ai-mode-tabs .studio-link {
    flex-basis: 40%;
  }
}
@media (max-width: 768px) {
  .topbar {
    min-height: 80px;
  }
  body.menu-open {
    overflow: hidden;
  }
  .nav-links {
    max-height: calc(100svh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links a {
    min-height: 48px;
  }
  .hero {
    min-height: 790px;
  }
  .hero-art {
    height: 370px;
  }
  .hero-moon {
    width: 275px;
    left: calc(50% - 140px);
  }
  .hero-moon span {
    font-size: 200px;
  }
  .hero-content {
    padding-top: 380px;
  }
  .hero-roles {
    font-size: 11px;
  }
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .hero-bottom > p,
  .section-head > p {
    font-size: 14px;
  }
  .section-head > p {
    max-width: 85%;
  }
  .project-description,
  .profile-copy,
  .strength-card p {
    font-size: 14px;
  }
  .project-fact dd {
    font-size: 12px;
  }
  .studio-field > span,
  .friend-auth-form label > span,
  .ai-prompt-field > span,
  .ai-request-form label > span {
    font-size: 13px;
  }
  .console-message {
    font-size: 12px;
  }
  .media-toggle {
    bottom: max(13px, env(safe-area-inset-bottom));
  }
  .nojs-nav {
    padding-top: 92px;
  }
}

/* Card depth: a warm surface, pointer light and a thin illuminated edge. */
.motion-card {
  --card-accent: 237, 190, 120;
  --card-x: 50%;
  --card-y: 50%;
  position: relative;
  isolation: isolate;
  transform-origin: center;
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s,
    border-color 0.3s;
}
.strength-ai,
.journal-card {
  --card-accent: 197, 164, 233;
}
.strength-stack {
  --card-accent: 111, 206, 218;
}
.card-light,
.card-glow {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s;
}
.card-light {
  background: radial-gradient(
    520px circle at var(--card-x) var(--card-y),
    rgba(var(--card-accent), 0.12),
    transparent 65%
  );
  mix-blend-mode: screen;
}
.card-glow {
  padding: 1px;
  background: radial-gradient(
    350px circle at var(--card-x) var(--card-y),
    rgba(var(--card-accent), 0.85),
    rgba(var(--card-accent), 0.05) 75%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.effects-on .motion-card.is-tracking {
  transform: perspective(1100px) translate3d(0, -5px, 0)
    rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  border-color: rgba(var(--card-accent), 0.45);
  box-shadow:
    0 22px 52px #0005,
    0 2px 18px rgba(var(--card-accent), 0.07);
  transition:
    box-shadow 0.3s,
    border-color 0.3s;
  will-change: transform;
}
.effects-on .motion-card.is-tracking .card-light,
.effects-on .motion-card.is-tracking .card-glow,
.motion-card:focus-within .card-glow {
  opacity: 1;
}
.effects-on .project-card.is-tracking .project-visual img {
  transform: translate3d(var(--card-px, 0px), var(--card-py, 0px), 0)
    scale(1.035);
}
.motion-card:focus-within {
  border-color: rgba(var(--card-accent), 0.6);
}
.effects-off .motion-card {
  transform: none;
  transition: none;
}
@media (hover: none), (pointer: coarse) {
  .effects-on .motion-card:active,
  .effects-on .motion-card.is-pressed {
    transform: scale(0.99);
    border-color: rgba(var(--card-accent), 0.5);
    transition: transform 0.12s;
  }
  .motion-card .card-light,
  .motion-card .card-glow {
    display: none;
  }
  .journal-card:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-card,
  .effects-on .motion-card.is-tracking,
  .effects-on .motion-card.is-pressed,
  .effects-on .motion-card:active {
    transform: none !important;
  }
  .card-light,
  .card-glow {
    display: none;
  }
}