:root {
  --ark-ink: #191919;
  --ark-paper: #f2f2f0;
  --ark-signal: #fffa00;
  --ark-state: #00ffa2;
  --ark-accent-alt: #00ffa2;
  --ark-muted: #888;
  --ark-panel: rgb(25 25 25 / 84%);
  --ark-display: "Arial Narrow", "Roboto Condensed", "DIN Condensed", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --ark-ui: "Space Grotesk", "IBM Plex Sans", "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --ark-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Noto Sans SC", "Microsoft YaHei UI", monospace;
  --ark-serif: "Noto Serif SC", "Source Han Serif SC", serif;
  --ark-rule: rgb(25 25 25 / 24%);
  --ark-paper-rule: rgb(255 255 255 / 22%);
  --ark-direct: 240ms;
  --ark-reveal: 650ms;
  --ark-ease: cubic-bezier(.22, .8, .2, 1);
  --ark-radius: 2px;
  --ark-depth-grid-opacity: .65;
  --ark-depth-art-opacity: .88;
  --ark-depth-readout-shadow: 1rem 1rem 0 color-mix(in srgb, var(--ark-signal), transparent 35%);
  color-scheme: light dark;
  font-family: var(--ark-ui);
  font-synthesis: none;
}

[data-ark-depth="minimal"] {
  --ark-depth-grid-opacity: .16;
  --ark-depth-art-opacity: .3;
  --ark-depth-readout-shadow: 0 0 0 transparent;
  --ark-reveal: 220ms;
}

[data-ark-depth="moderate"] {
  --ark-depth-grid-opacity: .38;
  --ark-depth-art-opacity: .58;
  --ark-depth-readout-shadow: .35rem .35rem 0 color-mix(in srgb, var(--ark-signal), transparent 64%);
  --ark-reveal: 480ms;
}

[data-ark-depth="complex"] {
  --ark-depth-grid-opacity: .65;
  --ark-depth-art-opacity: .88;
  --ark-depth-readout-shadow: 1rem 1rem 0 color-mix(in srgb, var(--ark-signal), transparent 35%);
  --ark-reveal: 650ms;
}

[data-ark-depth="maximal"] {
  --ark-depth-grid-opacity: .82;
  --ark-depth-art-opacity: 1;
  --ark-depth-readout-shadow: 1.25rem 1.25rem 0 color-mix(in srgb, var(--ark-signal), transparent 22%);
  --ark-reveal: 780ms;
}

[data-ark-theme="ark"] {
  --ark-ink: #080a0b;
  --ark-paper: #f4f6f6;
  --ark-signal: #18d1ff;
  --ark-state: #c8eb21;
  --ark-accent-alt: #8fc31f;
  --ark-muted: #8d9396;
  --ark-panel: rgb(8 10 11 / 82%);
  --ark-radius: 0;
}

[data-ark-theme="exa"] {
  --ark-ink: #080914;
  --ark-paper: #f3f2ef;
  --ark-signal: #00fbec;
  --ark-state: #925dff;
  --ark-accent-alt: #925dff;
  --ark-muted: #9b9daa;
  --ark-panel: rgb(8 9 20 / 78%);
  --ark-display: var(--ark-serif);
  --ark-radius: 999px;
}

[data-ark-theme="popucom"] {
  --ark-ink: #141414;
  --ark-paper: #fffdf4;
  --ark-signal: #ffcc1a;
  --ark-state: #3994ff;
  --ark-accent-alt: #ffa800;
  --ark-muted: #5a5a5a;
  --ark-panel: rgb(20 20 20 / 86%);
  --ark-radius: 999px;
}

[data-ark-theme="corporate"] {
  --ark-ink: #050505;
  --ark-paper: #f3f3f3;
  --ark-signal: #f3ff00;
  --ark-state: #fff;
  --ark-accent-alt: #fff;
  --ark-muted: #8a8a8a;
  --ark-panel: rgb(0 0 0 / 88%);
  --ark-radius: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--ark-ink);
  color: var(--ark-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }

button { color: inherit; }

a { color: inherit; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ark-signal);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset: .75rem auto auto .75rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--ark-signal);
  color: var(--ark-ink);
  transform: translateY(-160%);
  transition: transform var(--ark-direct);
}

.skip-link:focus { transform: none; }

.ark-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-rows: 4.5rem minmax(0, 1fr) auto;
  background: var(--ark-paper);
}

.ark-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 3.5rem);
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  background: var(--ark-panel);
  color: #fff;
  backdrop-filter: blur(.65rem);
}

.ark-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ark-wordmark strong,
.ark-wordmark small { display: block; }

.ark-wordmark strong {
  font-family: var(--ark-display);
  font-size: 1.35rem;
  line-height: .9;
  letter-spacing: -.04em;
}

.ark-wordmark small {
  margin-top: .28rem;
  color: rgb(255 255 255 / 65%);
  font-family: var(--ark-mono);
  font-size: .57rem;
  letter-spacing: .14em;
}

.ark-mark {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--ark-signal);
}

.ark-mark i {
  position: absolute;
  width: 1.65rem;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.ark-mark i:nth-child(1) { transform: rotate(0deg); }
.ark-mark i:nth-child(2) { transform: rotate(60deg); }
.ark-mark i:nth-child(3) { transform: rotate(-60deg); }

.ark-top-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--ark-mono);
  font-size: .67rem;
  letter-spacing: .12em;
}

.ark-pulse {
  width: .5rem;
  height: .5rem;
  background: var(--ark-state);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ark-state), transparent 55%);
  animation: ark-pulse 1.8s ease-out infinite;
}

@keyframes ark-pulse {
  70%, 100% { box-shadow: 0 0 0 .55rem transparent; }
}

.ark-menu-button {
  display: none;
  border: 1px solid rgb(255 255 255 / 40%);
  background: transparent;
  color: #fff;
  padding: .55rem .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ark-rail {
  position: sticky;
  top: 0;
  z-index: 40;
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--ark-paper);
  border-right: 1px solid var(--ark-rule);
}

.ark-rail-item {
  position: relative;
  min-height: 6.75rem;
  padding: .75rem .5rem;
  border: 0;
  border-bottom: 1px solid var(--ark-rule);
  background: transparent;
  color: var(--ark-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: .64rem;
  letter-spacing: .1em;
  transition: color var(--ark-direct), background var(--ark-direct);
}

.ark-rail-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .28rem;
  background: var(--ark-signal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--ark-direct) var(--ark-ease);
}

.ark-rail-item:hover { color: var(--ark-ink); }

.ark-rail-item.is-active {
  background: var(--ark-ink);
  color: #fff;
}

.ark-rail-item.is-active::before { transform: scaleY(1); }

.ark-rail-index {
  font-family: var(--ark-mono);
  color: var(--ark-signal);
  writing-mode: horizontal-tb;
}

.ark-rail-code {
  margin-top: auto;
  padding: 1rem .6rem;
  color: var(--ark-muted);
  font-family: var(--ark-mono);
  font-size: .58rem;
  line-height: 1.55;
}

.ark-main { grid-column: 2; min-width: 0; }

.ark-hero {
  position: relative;
  min-height: calc(100svh - 4.5rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 27rem);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: clamp(3rem, 8vw, 8.5rem) clamp(1.25rem, 6vw, 7rem) 4.25rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--ark-paper), transparent 2%) 0 42%, transparent 66%),
    linear-gradient(135deg, var(--ark-paper), color-mix(in srgb, var(--ark-signal), var(--ark-paper) 92%));
  isolation: isolate;
}

.ark-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: var(--ark-depth-grid-opacity);
  background-image:
    linear-gradient(var(--ark-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--ark-rule) 1px, transparent 1px);
  background-size: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 80%, transparent);
}

.ark-art {
  position: absolute;
  z-index: -3;
  inset: 3% -4% 0 28%;
  color: var(--ark-ink);
  opacity: var(--ark-depth-art-opacity);
}

.ark-art::before,
.ark-art::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ark-ink), transparent 38%);
  transform: rotate(-13deg);
}

.ark-art::before { inset: 21% 14% 15% 13%; }
.ark-art::after { inset: 30% 6% 4% 30%; border-color: var(--ark-signal); }

.ark-orbit {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.ark-orbit::before,
.ark-orbit::after {
  content: "";
  position: absolute;
  width: .6rem;
  height: .6rem;
  background: var(--ark-signal);
}

.ark-orbit::before { top: 10%; left: 18%; }
.ark-orbit::after { right: 8%; bottom: 26%; }

.ark-orbit-a { width: min(54vw, 48rem); aspect-ratio: 1; right: 9%; top: 7%; }
.ark-orbit-b { width: min(38vw, 34rem); aspect-ratio: 1; right: 17%; top: 19%; border-style: dashed; }
.ark-orbit-c { width: min(21vw, 18rem); aspect-ratio: 1; right: 27%; top: 35%; border-width: 2px; }

.ark-core {
  position: absolute;
  right: 34%;
  top: 42%;
  width: clamp(5rem, 10vw, 10rem);
  aspect-ratio: 1;
  background: var(--ark-ink);
  clip-path: polygon(50% 0, 100% 29%, 82% 100%, 18% 100%, 0 29%);
  transform: rotate(18deg);
}

.ark-core::before,
.ark-core::after,
.ark-core span {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid var(--ark-signal);
  transform: rotate(32deg);
}

.ark-core::after { inset: 35%; transform: rotate(-18deg); }
.ark-core span { inset: 46%; background: var(--ark-signal); }

.ark-vector {
  position: absolute;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.ark-vector::after {
  content: "";
  position: absolute;
  right: 0;
  top: -.28rem;
  width: .55rem;
  height: .55rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.ark-vector-a { width: 48%; top: 28%; left: 8%; transform: rotate(11deg); }
.ark-vector-b { width: 42%; bottom: 22%; left: 28%; transform: rotate(-24deg); }

.ark-hero-copy { max-width: 48rem; }

.ark-kicker,
.ark-module-code,
.ark-panel-label {
  margin: 0 0 1rem;
  font-family: var(--ark-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ark-kicker::before,
.ark-module-code::before,
.ark-panel-label::before {
  content: "";
  display: inline-block;
  width: 1.8rem;
  height: .38rem;
  margin-right: .6rem;
  background: var(--ark-signal);
  vertical-align: .04rem;
}

.ark-hero h1 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--ark-display);
  font-size: clamp(4.2rem, 11vw, 10.5rem);
  font-stretch: condensed;
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.ark-hero h1 .ark-title-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--ark-ink);
}

.ark-lede {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.65;
}

.ark-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.ark-button {
  position: relative;
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  padding: .7rem 1.15rem .7rem 2rem;
  border: 1px solid var(--ark-ink);
  background: transparent;
  color: var(--ark-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background var(--ark-direct), color var(--ark-direct), transform var(--ark-direct);
}

.ark-button::before {
  content: "";
  position: absolute;
  left: .75rem;
  width: .38rem;
  height: 56%;
  background: var(--ark-signal);
  clip-path: polygon(0 0, 45% 0, 45% 100%, 0 100%);
  transition: clip-path var(--ark-direct), transform var(--ark-direct);
}

.ark-button:hover { transform: translateY(-2px); }
.ark-button:hover::before { clip-path: polygon(0 18%, 100% 50%, 0 82%); transform: translateX(.25rem); }

.ark-button-primary { background: var(--ark-ink); color: #fff; }

[data-ark-theme="popucom"] .ark-button,
[data-ark-theme="popucom"] .ark-theme-picker button,
[data-ark-theme="popucom"] .ark-depth-picker button {
  border-radius: 999px;
}

/* Family composition is intentionally more than a palette swap. */
[data-ark-theme="ark"] .ark-hero,
[data-ark-theme="exa"] .ark-hero,
[data-ark-theme="corporate"] .ark-hero {
  color: var(--ark-paper);
}

[data-ark-theme="ark"] .ark-hero {
  background:
    linear-gradient(90deg, rgb(8 10 11 / 98%) 0 44%, rgb(8 10 11 / 64%) 70%, rgb(8 10 11 / 92%)),
    linear-gradient(145deg, #1d1f20, #080a0b 62%);
}

[data-ark-theme="ark"] .ark-grid {
  background-image:
    linear-gradient(rgb(24 209 255 / 15%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, transparent 1px);
  mask-image: linear-gradient(90deg, #000, #000 68%, transparent 95%);
}

[data-ark-theme="ark"] :is(.ark-art, .ark-hero-footer) { color: var(--ark-paper); }
[data-ark-theme="ark"] .ark-art { mix-blend-mode: screen; }
[data-ark-theme="ark"] .ark-core { background: var(--ark-paper); }
[data-ark-theme="ark"] .ark-title-outline {
  color: rgb(244 246 246 / 8%);
  -webkit-text-stroke-color: var(--ark-paper);
  text-shadow: 1px 0 var(--ark-paper), -1px 0 var(--ark-paper), 0 1px var(--ark-paper), 0 -1px var(--ark-paper);
}
[data-ark-theme="ark"] .ark-button { border-color: var(--ark-paper); color: var(--ark-paper); }
[data-ark-theme="ark"] .ark-button-primary { background: var(--ark-paper); color: var(--ark-ink); }
[data-ark-theme="ark"] .ark-readout {
  border-color: rgb(255 255 255 / 54%);
  background: var(--ark-panel);
  color: var(--ark-paper);
}
[data-ark-theme="ark"] .ark-readout :is(dt, .ark-readout-head) { color: rgb(255 255 255 / 66%); }
[data-ark-theme="ark"] .ark-spark { border-color: rgb(255 255 255 / 28%); }
[data-ark-theme="ark"] .ark-spark i { background: var(--ark-paper); }

[data-ark-theme="exa"] .ark-hero {
  background:
    radial-gradient(circle at 72% 46%, rgb(0 251 236 / 11%) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 46%, transparent 0 19%, rgb(0 251 236 / 12%) 19.1% 19.3%, transparent 19.5% 31%, rgb(255 255 255 / 10%) 31.1% 31.25%, transparent 31.5%),
    linear-gradient(118deg, #080914 0 52%, #15172a 78%, #080914);
}

[data-ark-theme="exa"] .ark-grid {
  background-image: radial-gradient(circle, rgb(255 255 255 / 48%) 0 1px, transparent 1.5px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(circle at 70% 46%, #000 0 45%, transparent 75%);
}

[data-ark-theme="exa"] .ark-rail { background: var(--ark-ink); border-color: rgb(255 255 255 / 18%); }
[data-ark-theme="exa"] .ark-rail-item { color: rgb(255 255 255 / 56%); border-color: rgb(255 255 255 / 16%); }
[data-ark-theme="exa"] .ark-rail-item:hover,
[data-ark-theme="exa"] .ark-rail-item.is-active { color: var(--ark-paper); }
[data-ark-theme="exa"] .ark-art { color: rgb(255 255 255 / 62%); }
[data-ark-theme="exa"] .ark-orbit { border-radius: 50%; }
[data-ark-theme="exa"] .ark-core { border-radius: 50%; background: rgb(8 9 20 / 78%); box-shadow: 0 0 0 1px var(--ark-signal), 0 0 3rem rgb(0 251 236 / 14%); }
[data-ark-theme="exa"] .ark-title-outline { -webkit-text-stroke-color: var(--ark-signal); }
[data-ark-theme="exa"] .ark-button { border-color: rgb(255 255 255 / 48%); color: var(--ark-paper); border-radius: var(--ark-radius); }
[data-ark-theme="exa"] .ark-button::before { width: .5rem; height: .5rem; border-radius: 50%; }
[data-ark-theme="exa"] .ark-button-primary { background: var(--ark-paper); color: var(--ark-ink); }
[data-ark-theme="exa"] .ark-readout { border-color: rgb(255 255 255 / 28%); background: rgb(8 9 20 / 64%); color: var(--ark-paper); border-radius: 0 2.5rem 0 2.5rem; box-shadow: inset 0 0 0 1px rgb(0 251 236 / 10%); }
[data-ark-theme="exa"] .ark-readout :is(dt, .ark-readout-head) { color: rgb(255 255 255 / 64%); }
[data-ark-theme="exa"] .ark-spark i { border-radius: 999px 999px 0 0; background: rgb(255 255 255 / 72%); }
[data-ark-theme="exa"] .ark-hero-footer { color: rgb(255 255 255 / 58%); border-color: rgb(255 255 255 / 18%); }

[data-ark-theme="popucom"] .ark-topbar { background: #26366f; }
[data-ark-theme="popucom"] .ark-hero {
  background:
    radial-gradient(circle at 76% 23%, #ffcc1a 0 8%, transparent 8.2%),
    radial-gradient(circle at 67% 54%, rgb(255 255 255 / 74%) 0 16%, transparent 16.2%),
    linear-gradient(145deg, #fffdf4 0 44%, #81daff 44.2% 72%, #3994ff 72.2%);
}
[data-ark-theme="popucom"] .ark-grid {
  background-image: radial-gradient(circle, rgb(20 20 20 / 17%) 0 2px, transparent 2.4px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 90%);
}
[data-ark-theme="popucom"] .ark-rail { background: #26366f; border-color: rgb(255 255 255 / 18%); }
[data-ark-theme="popucom"] .ark-rail-item { color: rgb(255 255 255 / 72%); border-color: rgb(255 255 255 / 14%); writing-mode: horizontal-tb; justify-content: center; text-align: center; }
[data-ark-theme="popucom"] .ark-rail-item:hover { color: #fff; }
[data-ark-theme="popucom"] .ark-rail-item.is-active { background: var(--ark-state); color: #fff; }
[data-ark-theme="popucom"] .ark-rail-item::before { inset: auto 12% 10%; width: auto; height: .32rem; border-radius: 999px; transform: scaleX(0); }
[data-ark-theme="popucom"] .ark-rail-item.is-active::before { transform: scaleX(1); }
[data-ark-theme="popucom"] .ark-art { color: #3a5dad; }
[data-ark-theme="popucom"] .ark-orbit { border-width: 3px; border-style: solid; }
[data-ark-theme="popucom"] .ark-orbit-b { border-style: dashed; }
[data-ark-theme="popucom"] .ark-core { border-radius: 44% 56% 64% 36%; background: var(--ark-signal); box-shadow: .8rem .8rem 0 var(--ark-state); }
[data-ark-theme="popucom"] .ark-title-outline { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #3a5dad; }
[data-ark-theme="popucom"] .ark-button { border-width: 2px; box-shadow: .3rem .3rem 0 #3a5dad; }
[data-ark-theme="popucom"] .ark-button-primary { background: var(--ark-signal); color: var(--ark-ink); }
[data-ark-theme="popucom"] .ark-readout { border: 2px solid #3a5dad; border-radius: 1.5rem; background: rgb(255 253 244 / 92%); box-shadow: .65rem .65rem 0 #3a5dad; }
[data-ark-theme="popucom"] .ark-spark i { border-radius: 999px 999px 0 0; background: var(--ark-state); }
[data-ark-theme="popucom"] .ark-spark i:nth-child(3n) { background: var(--ark-signal); }

[data-ark-theme="corporate"] .ark-hero {
  background:
    linear-gradient(90deg, #050505 0 46%, rgb(5 5 5 / 78%) 64%, rgb(5 5 5 / 24%)),
    linear-gradient(132deg, #303030, #101010 52%, #4a4a4a);
}
[data-ark-theme="corporate"] .ark-grid {
  background-image: linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, transparent 1px);
  background-size: 12.5% 100%;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}
[data-ark-theme="corporate"] .ark-art { inset: 8% 2% 4% 52%; color: rgb(255 255 255 / 44%); }
[data-ark-theme="corporate"] .ark-orbit { border-radius: 0; transform: rotate(0); }
[data-ark-theme="corporate"] .ark-orbit-b { display: none; }
[data-ark-theme="corporate"] .ark-core { right: 15%; top: 14%; width: .75rem; height: 44%; aspect-ratio: auto; clip-path: none; transform: none; background: var(--ark-signal); }
[data-ark-theme="corporate"] .ark-core::before,
[data-ark-theme="corporate"] .ark-core::after,
[data-ark-theme="corporate"] .ark-core span { display: none; }
[data-ark-theme="corporate"] .ark-title-outline { -webkit-text-stroke-color: var(--ark-paper); }
[data-ark-theme="corporate"] .ark-button { border-color: rgb(255 255 255 / 54%); color: var(--ark-paper); }
[data-ark-theme="corporate"] .ark-button-primary { background: var(--ark-signal); border-color: var(--ark-signal); color: var(--ark-ink); }
[data-ark-theme="corporate"] .ark-readout { border-width: 1px 0; border-color: rgb(255 255 255 / 24%); background: rgb(0 0 0 / 58%); color: var(--ark-paper); box-shadow: none; }
[data-ark-theme="corporate"] .ark-readout :is(dt, .ark-readout-head) { color: rgb(255 255 255 / 60%); }
[data-ark-theme="corporate"] .ark-spark i { background: rgb(255 255 255 / 62%); }
[data-ark-theme="corporate"] .ark-hero-footer { color: rgb(255 255 255 / 58%); border-color: rgb(255 255 255 / 20%); }

.ark-readout {
  align-self: end;
  padding: 1rem;
  border: 1px solid var(--ark-ink);
  background: color-mix(in srgb, var(--ark-paper), transparent 10%);
  box-shadow: var(--ark-depth-readout-shadow);
}

.ark-readout-head {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ark-rule);
  font-family: var(--ark-mono);
  font-size: .7rem;
}

.ark-readout-head strong { color: color-mix(in srgb, var(--ark-state), var(--ark-ink) 35%); }

.ark-readout dl { margin: .5rem 0; }
.ark-readout dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.ark-readout dt { color: var(--ark-muted); }
.ark-readout dd { margin: 0; font: 700 1rem var(--ark-mono); }

.ark-spark {
  height: 4rem;
  display: flex;
  align-items: end;
  gap: .35rem;
  padding-top: .7rem;
  border-top: 1px solid var(--ark-rule);
}

.ark-spark i { flex: 1; background: var(--ark-ink); min-height: 8%; }
.ark-spark i:nth-child(1) { height: 18%; }
.ark-spark i:nth-child(2) { height: 42%; }
.ark-spark i:nth-child(3) { height: 30%; }
.ark-spark i:nth-child(4) { height: 74%; background: var(--ark-signal); }
.ark-spark i:nth-child(5) { height: 55%; }
.ark-spark i:nth-child(6) { height: 84%; }
.ark-spark i:nth-child(7) { height: 61%; background: var(--ark-signal); }
.ark-spark i:nth-child(8) { height: 96%; }

.ark-hero-footer {
  position: absolute;
  inset: auto clamp(1.25rem, 6vw, 7rem) 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--ark-rule);
  font-family: var(--ark-mono);
  font-size: .58rem;
  letter-spacing: .09em;
}

.ark-section {
  min-height: 95svh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 7rem);
  background: var(--ark-paper);
  border-top: 1px solid var(--ark-rule);
}

.ark-section-title {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr);
  align-items: end;
  column-gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.ark-section-title .ark-kicker { grid-column: 1 / -1; }

.ark-section-title h2 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--ark-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.ark-title-rule { height: 1px; background: var(--ark-ink); margin-bottom: .4rem; }

.ark-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ark-rule);
  border: 1px solid var(--ark-rule);
}

.ark-module {
  min-height: 31rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--ark-paper);
}

.ark-module-dark { background: var(--ark-ink); color: #fff; }
.ark-module-dark .ark-module-code::before { background: var(--ark-signal); }

.ark-module h3 {
  margin: 1rem 0;
  font-family: var(--ark-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ark-module > p:not(.ark-module-code) { line-height: 1.6; }

.ark-module > a {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}

.ark-module > a span { color: var(--ark-signal); }

.ark-module-chart {
  height: 8rem;
  display: flex;
  align-items: end;
  gap: .45rem;
  margin: 2rem 0;
  border-bottom: 1px solid var(--ark-ink);
  background-image: linear-gradient(var(--ark-rule) 1px, transparent 1px);
  background-size: 100% 25%;
}

.ark-module-chart i { flex: 1; background: var(--ark-ink); }
.ark-module-chart i:nth-child(1) { height: 24%; }
.ark-module-chart i:nth-child(2) { height: 38%; }
.ark-module-chart i:nth-child(3) { height: 31%; }
.ark-module-chart i:nth-child(4) { height: 57%; background: var(--ark-signal); }
.ark-module-chart i:nth-child(5) { height: 76%; }
.ark-module-chart i:nth-child(6) { height: 93%; }

.ark-route { position: relative; min-height: 9rem; margin: 2rem 0; }
.ark-route::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgb(255 255 255 / 55%); transform: rotate(-8deg); }
.ark-route span { position: absolute; width: .65rem; height: .65rem; background: var(--ark-signal); transform: rotate(45deg); }
.ark-route span:nth-child(1) { left: 5%; top: 58%; }
.ark-route span:nth-child(2) { left: 34%; top: 47%; }
.ark-route span:nth-child(3) { left: 67%; top: 31%; }
.ark-route span:nth-child(4) { right: 3%; top: 20%; }

.ark-checks { list-style: none; padding: 0; margin: 2rem 0; border-top: 1px solid var(--ark-rule); }
.ark-checks li { display: flex; justify-content: space-between; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--ark-rule); }
.ark-checks strong { font: .7rem var(--ark-mono); color: color-mix(in srgb, var(--ark-state), var(--ark-ink) 35%); }

.ark-archive {
  background:
    linear-gradient(90deg, transparent 49.95%, var(--ark-paper-rule) 50%, transparent 50.05%),
    var(--ark-ink);
  color: #fff;
}

.ark-archive .ark-title-rule { background: #fff; }
.ark-archive .ark-section-title { color: #fff; }

.ark-theme-picker,
.ark-depth-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2rem;
}

.ark-depth-control { margin-bottom: 2.25rem; }

.ark-depth-control .ark-panel-label { color: rgb(255 255 255 / 68%); }

.ark-theme-picker button,
.ark-depth-picker button {
  min-height: 2.55rem;
  padding: .6rem .9rem;
  border: 1px solid rgb(255 255 255 / 40%);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--ark-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  transition: background var(--ark-direct), color var(--ark-direct), border-color var(--ark-direct);
}

.ark-theme-picker button:hover,
.ark-theme-picker button.is-selected,
.ark-depth-picker button:hover,
.ark-depth-picker button.is-selected {
  border-color: var(--ark-signal);
  background: var(--ark-signal);
  color: var(--ark-ink);
}

[data-ark-depth="minimal"] :is(.ark-orbit-b, .ark-orbit-c, .ark-vector-a, .ark-vector-b) {
  display: none;
}

[data-ark-depth="moderate"] :is(.ark-orbit-c, .ark-vector-b) {
  display: none;
}

[data-ark-depth="maximal"] .ark-hero::after {
  position: absolute;
  z-index: -2;
  inset: 7% 4% 9% 43%;
  border-top: 1px solid color-mix(in srgb, var(--ark-ink), transparent 58%);
  border-right: 1px solid color-mix(in srgb, var(--ark-ink), transparent 58%);
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--ark-ink), transparent 92%) 31px 32px),
    linear-gradient(135deg, transparent 0 71%, color-mix(in srgb, var(--ark-signal), transparent 70%) 71% 76%, transparent 76%);
  content: "";
  pointer-events: none;
}

.ark-archive-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr) minmax(13rem, 19rem);
  gap: 1px;
  border: 1px solid var(--ark-paper-rule);
  background: var(--ark-paper-rule);
}

.ark-tablist,
.ark-tabpanels,
.ark-record-card { background: var(--ark-ink); }

.ark-tablist { display: flex; flex-direction: column; }

.ark-tablist button {
  position: relative;
  min-height: 4.5rem;
  padding: 1rem;
  border: 0;
  border-bottom: 1px solid var(--ark-paper-rule);
  background: transparent;
  color: rgb(255 255 255 / 60%);
  text-align: left;
  cursor: pointer;
  font: .72rem var(--ark-mono);
  letter-spacing: .06em;
}

.ark-tablist button[aria-selected="true"] { color: #fff; background: rgb(255 255 255 / 5%); }
.ark-tablist button[aria-selected="true"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .35rem; background: var(--ark-signal); }

.ark-tabpanels { min-height: 24rem; padding: clamp(1.5rem, 4vw, 4rem); }
.ark-tabpanels h3 { margin: 0 0 1.25rem; max-width: 10ch; font: 900 clamp(2.8rem, 6vw, 6.5rem)/.85 var(--ark-display); letter-spacing: -.06em; text-transform: uppercase; }
.ark-tabpanels p:not(.ark-panel-label) { max-width: 46rem; line-height: 1.7; color: rgb(255 255 255 / 74%); }

.ark-record-card {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
}

.ark-record-number {
  display: block;
  margin: -.75rem 0 3rem;
  color: var(--ark-signal);
  font: 900 8rem/.8 var(--ark-display);
  letter-spacing: -.08em;
}

.ark-record-card p { margin: 1.35rem 0 .25rem; color: var(--ark-muted); font: .58rem var(--ark-mono); letter-spacing: .1em; }
.ark-record-card strong { font-size: .78rem; letter-spacing: .04em; }

.ark-reveal {
  clip-path: inset(0);
  transform: none;
  opacity: 1;
  transition: clip-path var(--ark-reveal) var(--ark-ease), transform var(--ark-reveal) var(--ark-ease), opacity var(--ark-reveal);
}

.js.reveal-ready .ark-reveal:not([data-visible="true"]) {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-12px);
  opacity: .55;
}

.ark-reveal[data-visible="true"] {
  clip-path: inset(0);
  transform: none;
  opacity: 1;
}

.ark-footer {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid rgb(255 255 255 / 18%);
  background: var(--ark-ink);
  color: rgb(255 255 255 / 58%);
  font: .58rem var(--ark-mono);
  letter-spacing: .09em;
}

.ark-footer p { margin: 0; }

@media (max-width: 980px) {
  .ark-hero { grid-template-columns: 1fr; align-items: end; }
  .ark-art { inset-inline-start: 5%; opacity: .48; }
  .ark-readout { max-width: 32rem; }
  .ark-module-grid { grid-template-columns: 1fr; }
  .ark-module { min-height: 24rem; }
  .ark-archive-layout { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); }
  .ark-record-card { grid-column: 1 / -1; }
  .ark-record-number { font-size: 5rem; margin-bottom: 1rem; }
}

@media (max-width: 760px), (orientation: portrait) {
  .ark-shell { grid-template-columns: 1fr; grid-template-rows: 3.8rem minmax(0, 1fr) auto auto; }
  .ark-topbar { grid-column: 1; min-height: 3.8rem; padding-inline: 1rem; }
  .ark-top-status { display: none; }
  .ark-menu-button { display: block; }
  .ark-rail {
    position: fixed;
    inset: 3.8rem 0 auto;
    z-index: 35;
    height: auto;
    display: none;
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--ark-rule);
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 20%);
  }
  .ark-rail[data-open="true"] { display: flex; }
  .ark-rail-item { flex: 1; min-height: 3.7rem; writing-mode: horizontal-tb; justify-content: center; align-items: center; gap: .35rem; text-align: center; }
  .ark-rail-item::before { inset: auto 0 0; width: auto; height: .25rem; transform: scaleX(0); transform-origin: left; }
  .ark-rail-item.is-active::before { transform: scaleX(1); }
  .ark-rail-code { display: none; }
  .ark-main { grid-column: 1; }
  .ark-hero { min-height: calc(100svh - 3.8rem); padding: 5rem 1.15rem 5rem; gap: 1.5rem; }
  .ark-art { inset: 10% -28% 34% 7%; }
  .ark-orbit-a { width: 28rem; }
  .ark-orbit-b { width: 20rem; }
  .ark-orbit-c { width: 11rem; }
  .ark-core { right: 38%; top: 46%; }
  .ark-hero h1 { font-size: clamp(3.7rem, 20vw, 7.25rem); }
  .ark-readout { margin-right: .75rem; box-shadow: var(--ark-depth-readout-shadow); }
  .ark-hero-footer { inset-inline: 1.15rem; flex-wrap: wrap; justify-content: flex-start; }
  .ark-section { min-height: auto; padding: 4.5rem 1.15rem; }
  .ark-section-title { display: block; }
  .ark-title-rule { margin-top: 1.4rem; }
  .ark-module { min-height: 22rem; padding: 1.25rem; }
  .ark-archive-layout { grid-template-columns: 1fr; }
  .ark-tablist { flex-direction: row; overflow-x: auto; }
  .ark-tablist button { min-width: max-content; flex: 1; }
  .ark-tablist button[aria-selected="true"]::before { inset: auto 0 0; width: auto; height: .25rem; }
  .ark-tabpanels { min-height: 22rem; padding: 2rem 1.25rem; }
  .ark-tabpanels h3 { font-size: clamp(2.7rem, 15vw, 5rem); }
  .ark-footer { grid-column: 1; flex-direction: column; padding: 1rem 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ark-reveal { clip-path: none; transform: none; opacity: 1; }
}

/* Shared language control: injected only when JavaScript is available. */
.language-switcher {
  position: fixed;
  z-index: 120;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid rgba(244, 246, 246, 0.28);
  background: rgba(8, 10, 11, 0.92);
  box-shadow: 0 0 0 1px rgba(8, 10, 11, 0.7), 0 0.75rem 2rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.language-switcher button {
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  background: transparent;
  color: #f4f6f6;
  font: 700 0.72rem/1 var(--ark-font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.language-switcher button:hover,
.language-switcher button:focus-visible {
  border-color: #18d1ff;
  outline: none;
}

.language-switcher button[aria-pressed='true'] {
  border-color: #18d1ff;
  background: #18d1ff;
  color: #080a0b;
}

@media (max-width: 680px) {
  .language-switcher {
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
  }
}

/* Personal site composition ------------------------------------------------ */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(19rem, .8fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.section-index,
.project-status,
.gateway-index {
  margin: 0;
  color: var(--ark-muted);
  font: .68rem var(--ark-mono);
  letter-spacing: .14em;
}

.profile-statement h3 {
  margin: .8rem 0;
  max-width: 10ch;
  font: 900 clamp(3.4rem, 8vw, 8rem)/.82 var(--ark-display);
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.profile-statement > p:last-child { max-width: 52rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.75; }
.profile-role { margin: 1.4rem 0; color: var(--ark-muted); font: 700 .78rem var(--ark-mono); letter-spacing: .12em; text-transform: uppercase; }
.profile-dossier { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--ark-ink); box-shadow: .7rem .7rem 0 var(--ark-signal); }
.profile-dossier dl { margin: 0 0 1.5rem; }
.profile-dossier dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--ark-rule); }
.profile-dossier dt { color: var(--ark-muted); }
.profile-dossier dd { margin: 0; font-weight: 700; text-align: end; }
.skill-list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.5rem 0; }
.skill-list span,
.project-tags span { padding: .35rem .55rem; border: 1px solid var(--ark-rule); font: .66rem var(--ark-mono); letter-spacing: .06em; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.profile-actions .ark-button {
  min-width: min(100%, 12rem);
  border-color: var(--ark-ink);
  color: var(--ark-ink);
  overflow-wrap: anywhere;
}
.github-action[data-pending="true"] { border-style: dashed; color: var(--ark-muted); }

.projects-section { background: #0d1011; color: var(--ark-paper); }
.projects-section .ark-title-rule { background: var(--ark-paper); }
.project-list { border-top: 1px solid rgb(255 255 255 / 22%); }
.project-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 15rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 22%);
}
.project-index { align-self: start; color: var(--ark-signal); font: 700 1rem var(--ark-mono); }
.project-row h3 { margin: .6rem 0; font: 900 clamp(2rem, 5vw, 5rem)/.9 var(--ark-display); letter-spacing: -.05em; text-transform: uppercase; }
.project-row p:not(.project-status) { max-width: 55rem; color: rgb(255 255 255 / 70%); line-height: 1.6; }
.project-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.project-tags span { border-color: rgb(255 255 255 / 22%); }
.project-row > a { min-width: 9rem; padding: 1rem 0; border-top: 1px solid var(--signal, var(--ark-signal)); color: var(--ark-paper); text-decoration: none; font-weight: 700; }
.project-row > a span { color: var(--ark-signal); }
.project-pending { color: rgb(255 255 255 / 42%); font: .7rem var(--ark-mono); letter-spacing: .1em; }

.gateway-section { background: linear-gradient(132deg, var(--ark-paper) 0 62%, color-mix(in srgb, var(--ark-signal), var(--ark-paper) 88%)); }
.gateway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--ark-ink); background: var(--ark-ink); }
.gateway-card { position: relative; min-height: 32rem; display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; background: var(--ark-paper); color: var(--ark-ink); text-decoration: none; isolation: isolate; }
.gateway-card::before { content: ""; position: absolute; inset: 42% -15% -32% 34%; z-index: -1; border: 1px solid currentColor; transform: rotate(-12deg); transition: transform .5s var(--ark-ease); }
.gateway-card::after { content: ""; position: absolute; right: 8%; top: 12%; width: 7rem; aspect-ratio: 1; z-index: -1; border: 1px dashed currentColor; border-radius: 50%; }
.gateway-card:hover::before { transform: rotate(-4deg) translateY(-1rem); }
.gateway-card h3 { margin: auto 0 1rem; font: 900 clamp(4rem, 9vw, 9rem)/.76 var(--ark-display); letter-spacing: -.075em; }
.gateway-card p { max-width: 36rem; line-height: 1.65; }
.gateway-card strong { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid currentColor; }
.gateway-games { background: var(--ark-ink); color: var(--ark-paper); }
.gateway-games::after { border-color: var(--ark-signal); box-shadow: 0 0 0 2rem rgb(24 209 255 / 6%); }
.gateway-mc::before { background: repeating-linear-gradient(90deg, transparent 0 1.8rem, rgb(8 10 11 / 8%) 1.8rem calc(1.8rem + 1px)); }
.ark-readout-head strong.is-online { color: var(--ark-state); }

@media (max-width: 900px) {
  .profile-layout, .gateway-grid { grid-template-columns: 1fr; }
  .gateway-card { min-height: 25rem; }
}

@media (max-width: 640px) {
  .project-row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .project-row > :last-child { grid-column: 2; }
  .profile-dossier { box-shadow: .4rem .4rem 0 var(--ark-signal); }
}