/* Desktop Hub integration preview — v11 all pages */
body.desktop-hub-preview .loader,
body.desktop-hub-preview .index-row { display:none !important; }
body.desktop-hub-preview .site-shell { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
body.desktop-hub-preview .fixed-index-menu {
  left:13.15vw !important;
  bottom:12.7vh !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}
body.desktop-hub-preview .site-copyright {
  left:13.15vw !important;
  bottom:10.95vh !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:7px !important;
  color:rgba(0,0,0,.34) !important;
}
body.desktop-hub-preview .content-frame { z-index:4; }
body.desktop-hub-preview .desktop-hub-field {
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  opacity:.27; pointer-events:none;
}
body.desktop-hub-preview .desktop-hud {
  position:fixed; z-index:3; color:#777; font-family:Monaco,Menlo,"SFMono-Regular",Consolas,monospace;
  font-size:10px; line-height:1.55; letter-spacing:.035em; white-space:nowrap; user-select:none;
}
body.desktop-hub-preview .desktop-hud span { color:#454545; }
.desktop-hud--tl{top:28px;left:30px}.desktop-hud--tr{top:28px;right:30px;text-align:right}
.desktop-hud--bl{left:30px;bottom:27px}.desktop-hud--br{right:30px;bottom:27px;text-align:right}
.desktop-cursor{display:inline-block;width:.65em;animation:desktopBlink 1.12s steps(1,end) infinite}
@keyframes desktopBlink{0%,47%{opacity:1}48%,100%{opacity:0}}
body.desktop-hub-preview.is-life-mode .desktop-hub-field,
body.desktop-hub-preview.is-life-mode .desktop-hud { opacity:0; transition:opacity 500ms ease; }
body.desktop-hub-preview:not(.is-life-mode) .desktop-hub-field { transition:opacity 500ms ease; }
body.desktop-hub-preview:not(.is-life-mode) .desktop-hud { opacity:1; transition:opacity 500ms ease; }
@media(max-width:800px){
 body.desktop-hub-preview .fixed-index-menu{left:11% !important;bottom:70px !important}
 body.desktop-hub-preview .site-copyright{left:11% !important;bottom:53px !important}
 .desktop-hud--tl,.desktop-hud--bl{left:15px}.desktop-hud--tr,.desktop-hud--br{right:15px}
 .desktop-hud--tl,.desktop-hud--tr{top:15px}.desktop-hud--bl,.desktop-hud--br{bottom:15px}
}

/* r2 — remove the legacy centre menu and align every section to the v11 content axis */
body.desktop-hub-preview .index-row,
body.desktop-hub-preview #indexRow,
body.desktop-hub-preview .index-motion {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the HUD in the corners; section content begins on the established v11 axis. */
body.desktop-hub-preview:not(.is-life-mode) .archive-intro,
body.desktop-hub-preview.is-lab-mode .lab-inner,
body.desktop-hub-preview.is-journal-mode .journal-inner {
  position: absolute !important;
  top: clamp(150px, 23.5vh, 245px) !important;
  left: clamp(210px, 22.5vw, 360px) !important;
  width: min(620px, 52vw) !important;
}

body.desktop-hub-preview .archive-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/* The section label belongs to content, not to the HUD line. */
body.desktop-hub-preview .archive-intro .content-kicker,
body.desktop-hub-preview .lab-inner .content-kicker,
body.desktop-hub-preview .journal-inner .content-kicker {
  margin-bottom: 16px !important;
}

@media (max-width: 900px) {
  body.desktop-hub-preview:not(.is-life-mode) .archive-intro,
  body.desktop-hub-preview.is-lab-mode .lab-inner,
  body.desktop-hub-preview.is-journal-mode .journal-inner {
    top: 118px !important;
    left: 15vw !important;
    width: 72vw !important;
  }
}


/* r4 — independent About navigation; SoulCraft.jp remains the empty Hub return */
body.desktop-hub-preview .fixed-index-menu .main-menu {
  flex-wrap: nowrap !important;
}
body.desktop-hub-preview .fixed-index-menu .menu-item {
  white-space: nowrap;
}

/* r5 — shared Desktop Interface content grid */
:root {
  --desktop-content-left: clamp(150px, 13.8vw, 225px);
  --desktop-content-top: clamp(116px, 13.8vh, 150px);
  --desktop-content-width: min(690px, 49vw);
}

/* Archive / Lab / Journal use one stable origin inside the same observed space. */
body.desktop-hub-preview:not(.is-life-mode) .archive-intro,
body.desktop-hub-preview.is-lab-mode .lab-inner,
body.desktop-hub-preview.is-journal-mode .journal-inner {
  top: var(--desktop-content-top) !important;
  left: var(--desktop-content-left) !important;
  width: var(--desktop-content-width) !important;
}

/* About uses the same origin; its internal SoulCraft label duplicates the HUD. */
body.desktop-hub-preview.is-about-mode .about-left {
  top: var(--desktop-content-top) !important;
  left: var(--desktop-content-left) !important;
  width: clamp(500px, 38vw, 620px) !important;
}
body.desktop-hub-preview.is-about-mode .about-panel .content-kicker {
  display: none !important;
}

/* About is longer than the other views. Keep the space fixed and scroll only its content. */
body.desktop-hub-preview.is-about-mode,
body.desktop-hub-preview.is-about-mode .content-frame {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.desktop-hub-preview.is-about-mode .content-panel.about-panel {
  min-height: 1120px !important;
  height: auto !important;
  overflow: visible !important;
}
body.desktop-hub-preview.is-about-mode .about-art {
  position: fixed !important;
  left: 43vw !important;
  opacity: .72;
}
body.desktop-hub-preview.is-about-mode .about-left {
  padding-bottom: 190px;
}

/* Keep the footer as one compact unit while preserving the v11 lower-left anchor. */
body.desktop-hub-preview .fixed-index-menu {
  bottom: 12.7vh !important;
}
body.desktop-hub-preview .site-copyright {
  bottom: calc(12.7vh - 17px) !important;
}

@media (max-width: 900px) {
  :root {
    --desktop-content-left: 15vw;
    --desktop-content-top: 112px;
    --desktop-content-width: 72vw;
  }
  body.desktop-hub-preview.is-about-mode .about-left {
    width: 72vw !important;
    font-size: 8.5px !important;
  }
  body.desktop-hub-preview.is-about-mode .about-background {
    width: 72vw !important;
  }
  body.desktop-hub-preview.is-about-mode .about-art {
    left: 48vw !important;
    opacity: .38;
  }
}

/* r6 — decisive About separation from the fixed upper-left HUD */
body.desktop-hub-preview.is-about-mode .about-left {
  top: clamp(172px, 19vh, 220px) !important;
  left: clamp(210px, 18.5vw, 300px) !important;
  width: clamp(500px, 37vw, 610px) !important;
}
body.desktop-hub-preview.is-about-mode .about-panel .content-kicker {
  display: none !important;
}
body.desktop-hub-preview.is-about-mode .about-art {
  left: 48vw !important;
}
@media (max-width: 900px) {
  body.desktop-hub-preview.is-about-mode .about-left {
    top: 132px !important;
    left: 18vw !important;
    width: 70vw !important;
  }
  body.desktop-hub-preview.is-about-mode .about-art {
    left: 55vw !important;
    opacity: .30 !important;
  }
}

/* r9 — About must complete inside one desktop viewport. No page or panel scrolling. */
html:has(body.desktop-hub-preview.is-about-mode),
body.desktop-hub-preview.is-about-mode {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.desktop-hub-preview.is-about-mode .content-frame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.desktop-hub-preview.is-about-mode .content-panel.about-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.desktop-hub-preview.is-about-mode .about-left {
  top: clamp(96px, 10.5vh, 118px) !important;
  padding-bottom: 0 !important;
  max-height: calc(100vh - 190px) !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  body.desktop-hub-preview.is-about-mode .about-left {
    top: 88px !important;
    padding-bottom: 0 !important;
    max-height: calc(100vh - 160px) !important;
  }
}

/* r10 — Archive index follows the same list grid as Lab and Journal. */
body.desktop-hub-preview .archive-panel.is-active .archive-work-list {
  list-style: none !important;
  margin: clamp(42px, 5.4vh, 72px) 0 0 !important;
  padding: 0 !important;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(9px, .64vw, 11px) !important;
  line-height: 1.65 !important;
  letter-spacing: .018em !important;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-link {
  display: grid !important;
  grid-template-columns: 48px minmax(180px, 260px) auto;
  align-items: baseline !important;
  column-gap: 20px !important;
  width: max-content;
  color: inherit;
  text-decoration: none;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  transition: opacity 180ms ease;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-year {
  opacity: .48;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-separator {
  display: none !important;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-status {
  margin-left: 0 !important;
  align-self: center;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-link:hover .archive-work-title,
body.desktop-hub-preview .archive-panel.is-active .archive-work-link:focus-visible .archive-work-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.desktop-hub-preview .archive-panel.is-active .archive-work-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 7px;
}

@media (max-width: 860px) {
  body.desktop-hub-preview .archive-panel.is-active .archive-work-link {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    width: 100%;
  }
}

/* r13 — approved Entrance Typography r10 is preserved in its own viewport. */
.entrance-r10-layer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #fbfbfa;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.entrance-r10-layer.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entrance-r10-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fbfbfa;
}

body.desktop-hub-preview.entrance-r10-active .site-shell,
body.desktop-hub-preview.entrance-r10-active .desktop-hub-field,
body.desktop-hub-preview.entrance-r10-active .desktop-hud,
body.desktop-hub-preview.entrance-r10-active .fixed-index-menu,
body.desktop-hub-preview.entrance-r10-active .site-copyright {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.audio-interface-layer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fbfbfa;
  color: #181818;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

.audio-interface-layer.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.audio-interface {
  width: min(420px, calc(100vw - 56px));
  transform: translateY(-4vh);
  font-family: Monaco, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.72;
  letter-spacing: .035em;
}

.audio-interface p { margin: 0; }
.audio-brand { margin-bottom: 22px !important; color: rgba(24,24,24,.78); }
.audio-runtime,
.audio-found { color: rgba(24,24,24,.43); }
.audio-label { margin-top: 22px !important; color: rgba(24,24,24,.36); }
.audio-choices { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-top:10px; }
.audio-choice {
  position:relative;
  appearance:none;
  border:0;
  padding:2px 0 3px;
  background:none;
  color:rgba(24,24,24,.55);
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  transition:color 180ms ease, opacity 180ms ease;
}
.audio-choice::after {
  content:"";
  position:absolute;
  left:1.7em;
  right:100%;
  bottom:1px;
  height:1px;
  background:rgba(24,24,24,.5);
  transition:right 240ms ease;
}
.audio-choice:hover,
.audio-choice:focus-visible { color:rgba(24,24,24,.96); outline:none; }
.audio-choice:hover::after,
.audio-choice:focus-visible::after { right:0; }
.audio-marker { display:inline-block; width:1.7em; color:rgba(24,24,24,.48); }
.audio-choice:not(:hover):not(:focus-visible):last-child .audio-marker { opacity:.42; }
.audio-note { margin:16px 0 0 1.7em !important; color:rgba(24,24,24,.46); font-size:8px; letter-spacing:.07em; }
.audio-cursor { animation:audio-cursor 1.05s steps(1,end) infinite; }
.audio-meta {
  position:fixed;
  left:18px;
  bottom:15px;
  margin:0;
  color:rgba(24,24,24,.18);
  font:8px/1 Monaco, "SFMono-Regular", Menlo, monospace;
  letter-spacing:.08em;
}
@keyframes audio-cursor { 0%,48%{opacity:1} 49%,100%{opacity:0} }

.life-organic-transition {
  position:fixed;
  inset:0;
  z-index:10010;
  width:100vw;
  height:100vh;
  background:rgba(251,251,250,.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.life-organic-transition.is-active {
  opacity:1;
  visibility:visible;
}

@media (max-width:640px) {
  .audio-interface { place-self:center start; margin-left:28px; width:calc(100vw - 56px); font-size:10px; }
  .audio-meta { left:12px; bottom:11px; }
}

body.desktop-hub-preview.desktop-boot-running .loader {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Life keeps the page shell, but enters through the organic trace layer. */
body.desktop-hub-preview .content-frame.is-life {
  transition: opacity 360ms ease !important;
}

body.desktop-hub-preview.is-life-entering .content-frame.is-life,
body.desktop-hub-preview.is-life-leaving .content-frame.is-life {
  animation: none !important;
}

/* Experience r2 — the Hub title is never represented as a selected section. */
body.desktop-hub-preview .fixed-index-menu .site-title--code,
body.desktop-hub-preview .fixed-index-menu .site-title--code.is-active {
  text-decoration: none !important;
}

/* Life grows into the inorganic shell from left to right. */
body.desktop-hub-preview.is-life-entering .content-frame.is-life {
  animation: lifePageReveal 820ms cubic-bezier(.2,.72,.18,1) both !important;
  transform-origin: left center;
}

@keyframes lifePageReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: .18;
  }
  45% { opacity: .72; }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.desktop-hub-preview.is-life-entering .content-frame.is-life {
    animation: none !important;
    clip-path: none;
  }
}