/* Transparent assets use their own natural outline, with no banner polygons. */
.hero-copy { width: 55%; }
.hero-art-shell .hero-render.clean-render {
  width: 61%; height: auto; max-width: none; right: -2%; bottom: 12px;
  clip-path: none; mask-image: none; -webkit-mask-image: none; filter: none;
  object-fit: contain; transform: none;
}
.render-card .render-visual { overflow: visible; }
.render-card .render-visual .control-art.clean-render {
  position: relative; inset: auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center; clip-path: none;
  mask-image: none; -webkit-mask-image: none; filter: none;
}
.world-tile {
  aspect-ratio: 2 / 1; --frame-left: 0%; --frame-right: 0%;
  --surface-top: 12%; --frame-bottom: 0%; --label-top: 25%;
}
.world-tile .world-art.clean-render {
  position: absolute; inset: 0 auto 0 0; width: 90%; height: 100%;
  object-fit: contain; object-position: left bottom; margin: 0; max-width: none;
  clip-path: none; mask-image: none; -webkit-mask-image: none; filter: none;
}
.world-tile .world-label {
  right: 4%; width: 36%; max-width: 36%; min-height: 24%; height: auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px 6px; line-height: 1.25;
}
.world-tile .world-cta {
  right: 4%; bottom: 10%; padding: 6px 10px; border-radius: 10px;
  background: #000000CC; color: #D9C3AB;
}
html[data-theme="light"] .world-tile .world-cta {
  background: #F3F4F5E6; color: #95122C; box-shadow: inset 0 0 0 1px #DBE0E1;
}
html[data-theme="light"] .carousel-slide svg,
html[data-theme="light"] .carousel-slide:hover svg,
html[data-theme="light"] .carousel-slide:focus-visible svg { filter: none; }
html[data-theme="light"] .item-dialog-stage svg { filter: none; }
.item-dialog-stage { isolation: isolate; z-index: 0; pointer-events: none; }
.item-dialog-stage svg { pointer-events: none; }
.item-switches { position: relative; z-index: 2; }
.item-switches button, .carousel-arrow, .carousel-pause {
  min-width: 48px; min-height: 48px; height: auto; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.item-switches button { font-size: 1.25rem; }
.carousel-controls { touch-action: manipulation; }
.artifact-carousel--hero .carousel-controls { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.artifact-carousel--hero .carousel-arrow { width: 48px; min-width: 48px; height: 48px; }
@media (max-width: 1199px) {
  .hero-copy { width: 54%; }
  .hero-art-shell .hero-render.clean-render { width: 56%; right: 0; }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .hero-copy { width: 100%; }
  .hero-art-shell { width: calc(100% + 16px); aspect-ratio: 1374 / 1145; margin-top: 24px; margin-left: -8px; }
  .hero-art-shell .hero-render.clean-render { width: 100%; right: 0; bottom: 0; }
  .render-card .render-visual { height: 150px; min-height: 150px; }
  .world-grid { grid-template-columns: minmax(0, 1fr); }
  .world-tile .world-label { font-size: clamp(1rem, 4.2vw, 1.25rem); padding: 6px; }
}

/* Compact copy keeps the enlarged artwork in the original composition. */
.hero-copy .hero-description,
.hero-copy .play-hint { max-width: 70%; }
.hero-copy .hero-description { font-size: .9375rem; line-height: 1.55; }
.hero-copy .hero-title.brand-sign { margin-bottom: -8px; }
.hero-title .brand-word { line-height: 1; }
@media (max-width: 639px) {
  .hero-copy .hero-description,
  .hero-copy .play-hint { max-width: 100%; }
}

/* Smaller teaser frames keep the original transparent artwork complete. */
.hero-small { grid-template-rows: auto; gap: 16px; }
.hero-small :is(.staff-card, .tps-card) {
  min-height: 0; height: auto; aspect-ratio: auto; align-self: start;
  padding: 12px 14px; border-radius: 16px;
}
.hero-small :is(.staff-card, .tps-card)::before,
.hero-small :is(.staff-card, .tps-card)::after {
  inset: 0; border-radius: 16px; border-width: 1px;
}
.hero-small :is(.staff-card, .tps-card) .render-visual {
  position: relative; inset: auto; height: 104px; min-height: 104px; width: 100%;
}
.hero-small :is(.staff-card, .tps-card) .render-label {
  position: relative; inset: auto; display: block; padding: 0; margin-top: 8px;
  font-size: 1rem; line-height: 1.25; border-radius: 0;
}
@media (max-width: 639px) {
  .hero-small :is(.staff-card, .tps-card) { padding: 12px; }
  .hero-small :is(.staff-card, .tps-card) .render-visual { height: 96px; min-height: 96px; }
}

/* The hero returns to a generous scale around a single featured character. */
.site-page .hero-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.site-page .hero-main { container-type: inline-size; display: block; position: relative; min-height: 480px; aspect-ratio: auto; padding-top: 10px; }
.site-page .hero-main > .hero-meta { width: 48%; gap: 5px; }
.site-page .hero-main > .hero-title.brand-sign { margin: 30px 0 20px; width: 54%; max-width: 54%; }
.site-page .hero-title .brand-word { font-size: clamp(4rem, 7vw, 7rem); font-size: clamp(4rem, 13.2cqw, 7rem); letter-spacing: .02em; line-height: 1.05; gap: .01em; font-kerning: none; -webkit-text-stroke: .25px currentColor; }
.site-page .hero-main > .hero-copy { width: 47%; height: auto; min-height: 0; padding: 0 0 12px; gap: 16px; }
.site-page .hero-copy .hero-intro { font-size: clamp(1.65rem, 2.1vw, 2rem); line-height: 1.3; max-width: 14em; }
.site-page .hero-copy .hero-description { max-width: 100%; font-size: 1rem; line-height: 1.6; }
.site-page .hero-main > .hero-art-shell { position: absolute; inset: 44px -1% 0 auto; width: 54%; height: calc(100% - 44px); margin: 0; aspect-ratio: auto; overflow: visible; }
.site-page .hero-art-shell .hero-render.clean-render { position: static; width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; mask-image: linear-gradient(to bottom, #000 89%, transparent 98%); -webkit-mask-image: linear-gradient(to bottom, #000 89%, transparent 98%); }
.site-page .hero-art-shell::before, .site-page .hero-art-shell::after { content: none; }
.site-page .hero-small { padding: 0; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; align-items: stretch; }
.site-page .hero-small :is(.staff-card, .tps-card) { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto; gap: 12px; padding: 12px; align-self: stretch; align-items: center; }
.site-page .hero-small :is(.staff-card, .tps-card) .render-visual { height: 88px; min-height: 0; }
.site-page .hero-small :is(.staff-card, .tps-card) .render-label { margin: 0; font-size: 1.05rem; align-self: center; text-align: left; }
.site-page .hero-small .artifact-carousel--hero { grid-column: 1; padding: 12px; }
.site-page .artifact-carousel--hero .carousel-stage { height: 174px; }
.site-page .carousel-slide { width: var(--item-width, 100px); height: var(--item-height, 180px); padding: 0; }
.site-page .artifact-carousel--hero .carousel-slide { width: var(--item-width, 80px); height: var(--item-height, 110px); padding: 0; }
/* Smaller navigation graphics retain comfortable control targets. */
.site-page .sidebar { top: 56px; bottom: calc(8px + env(safe-area-inset-bottom)); width: 76px; min-height: 0; height: auto; padding-bottom: 12px; max-height: none; overflow-y: auto; scrollbar-width: none; }
.site-page .side-logo { flex-shrink: 0; width: 100%; display: flex; justify-content: center; align-items: center; padding: 14px 0; margin: 0 0 10px; }
.site-page .side-logo img { width: 34px; height: 34px; margin: 0; border-radius: 8px; object-fit: contain; }
.site-page .sidebar nav { flex: 0 0 auto; gap: 4px; justify-content: flex-start; }
.site-page .sidebar .nav-item { min-height: 48px; padding: 9px 2px; gap: 0; font-size: .75rem; }
.site-page .sidebar .nav-item svg { width: 22px; height: 22px; }
.site-page .sidebar-preferences { flex: 0 0 auto; width: 100%; padding: 8px 4px 0; margin-top: auto; }
.site-page .sidebar-preferences .theme-toggle { flex-direction: column; gap: 5px; width: 100%; min-height: 44px; padding: 3px 0; font-size: .75rem; }
.site-page .theme-track { flex: 0 0 auto; width: 40px; height: 24px; border-radius: 99px; }
.site-page .theme-thumb { left: 1px; top: 1px; width: 20px; height: 20px; border-radius: 50%; box-shadow: none; }
.site-page .theme-thumb svg { inset: 3px; width: 14px; height: 14px; }
.site-page .theme-toggle[aria-checked="true"] .theme-thumb { transform: translateX(16px); }
.site-page .hero-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0; gap: 12px; }
.site-page .hero-actions { gap: 16px; }
.site-page { --space-section: clamp(3rem, 5vw, 4rem); }
.site-page .section-rail { margin-bottom: 20px; gap: 14px; letter-spacing: .04em; }
.site-page .section-rail > span:first-child { border-left: 3px solid var(--orange); padding-left: 12px; color: var(--text); }
.site-page .section-rail > i { display: none; }
.site-page .feature-grid { margin-top: 20px; }
.site-page .feature-grid article { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding: 22px 0; gap: 24px; border: 0; align-items: center; }
.site-page .feature-kicker { display: block; color: var(--orange); font-size: .75rem; letter-spacing: .06em; margin-bottom: 10px; }
.site-page .feature-heading p { margin-top: 12px; }
.site-page .feature-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .875rem; margin-top: 8px; }
.site-page .feature-link span { color: var(--orange); transition: translate .25s ease; }
.site-page .feature-link:hover span { translate: 2px -2px; }
.site-page .features::before, .site-page .gallery-section::before { opacity: .4; }
/* Curved SVG paths use measured anchors, independent of column proportions. */
.site-page .world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-page .world-lines { height: 72px; display: block; margin: 0; }
.site-page .world-connection-svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.site-page .world-connection-base { stroke: var(--route-color); stroke-width: 1; opacity: .28; }
.site-page .world-connection-tip { stroke: var(--route-color); stroke-width: 1.2; opacity: .6; }
.site-page .world-connection-pulse { stroke: var(--route-paint, var(--route-color)); stroke-width: 2; stroke-dasharray: 3 15; opacity: 0; filter: drop-shadow(0 0 3px var(--route-color)); }
.site-page .world-flow .world-connection-pulse { animation: route-travel 1.2s linear 3, route-light 4.4s ease both; }
.site-page .world-flow [data-route="main"].world-connection-pulse { animation-delay: .35s; }
.site-page .world-flow [data-route="builds"].world-connection-pulse { animation-delay: .7s; }
@keyframes route-travel { to { stroke-dashoffset: -72; } }
@keyframes route-light { 0%, 100% { opacity: 0; } 15%, 70% { opacity: .9; } }
.site-page .world-grid .tile-farms { --flow-color: #FF9408; --flow-delay: .7s; }
.site-page .world-grid .tile-main { --flow-color: #FFD45C; --flow-delay: 1.4s; }
.site-page .world-grid .tile-builds { --flow-color: #F15C48; --flow-delay: 2.1s; }
.site-page .world-flow .world-grid .world-tile::after { background: radial-gradient(ellipse at 50% 90%, var(--flow-color), transparent 75%); animation: world-arrival 1.4s ease-in-out var(--flow-delay) both; }
.site-page .world-flow .world-grid .world-tile::before { animation: world-edge 1.4s ease-in-out var(--flow-delay) both; }
@keyframes world-arrival { 0%, 100% { opacity: 0; } 35%, 60% { opacity: .25; } }
@keyframes world-edge { 35%, 60% { border-color: var(--flow-color); box-shadow: 0 0 16px color-mix(in srgb, var(--flow-color) 24%, transparent); } }
.site-page .lobby-type { display: inline-block; vertical-align: bottom; }
.site-page .lobby-type.is-typing { animation: lobby-type 1.1s steps(12, end) both; }
@keyframes lobby-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Sword overview and controls remain visible side by side, with no expanding row. */
.site-page .artifact-feature .artifact-example { grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: 22px; padding-top: 0; }
.artifact-example-art { width: 100%; height: 230px; stroke: none; fill: none; }
.artifact-example h4 { margin: 0 0 10px; font: 400 1.25rem/1.3 RussoOne, Arial, sans-serif; }
.artifact-example .feature-kicker { margin-bottom: 6px; }
.artifact-rarity { display: inline-block; color: #FFD45C; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
html[data-theme="light"] .artifact-rarity { color: #985C00; }
.artifact-lore { margin-top: 10px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.artifact-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 14px 0; }
.artifact-stats div { display: flex; align-items: baseline; gap: 10px; }
.artifact-stats dt { color: var(--muted); font-size: .75rem; }
.artifact-stats dd { margin: 0; font-weight: 800; font-size: 1rem; }
.artifact-abilities h5 { margin: 0 0 8px; font: 700 .875rem/1.4 Manrope, Arial, sans-serif; }
.artifact-abilities dl { margin: 0; }
.artifact-abilities dl > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; }
.artifact-abilities dd { margin: 0; font-size: .8125rem; line-height: 1.4; }
.artifact-abilities kbd { display: inline-block; padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font: 600 .6875rem/1.4 Manrope, Arial, sans-serif; }
.site-page .item-dialog.has-item-info { width: min(820px, calc(100% - 32px)); }
.site-page .item-dialog.has-item-info[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; column-gap: 28px; }
.site-page .item-dialog.has-item-info .dialog-close, .site-page .item-dialog.has-item-info .dialog-kicker, .site-page .item-dialog.has-item-info h2, .site-page .item-dialog.has-item-info .item-switches { grid-column: 1 / -1; }
.site-page .item-dialog.has-item-info #item-information { grid-column: 1; grid-row: 4; }
.site-page .item-dialog.has-item-info .item-dialog-stage { grid-column: 1; grid-row: 5; height: 230px; padding: 12px; margin: 0; }
.site-page .item-dialog.has-item-info #item-abilities { grid-column: 2; grid-row: 4 / 6; align-self: center; }
.lobby-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 16px; }
.lobby-gallery-controls button { width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 8px; background: transparent; font-size: 1.25rem; touch-action: manipulation; transition: background .2s, transform .2s; }
.lobby-gallery-controls button:active { transform: translateY(2px); background: #CA3F1626; }
.lobby-gallery-controls span { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.site-page .lightbox-frame { touch-action: pan-y; }
@media (max-width: 1199px) {
 .site-page .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
 .site-page .hero-small { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto; }
 .site-page .hero-small .artifact-carousel--hero { grid-column: auto; }
 .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(0, 1fr); grid-template-rows: 96px minmax(44px, auto); gap: 8px; }
 .site-page .hero-small :is(.staff-card, .tps-card) .render-visual { height: 96px; }
}
@media (max-width: 899px) {
 .site-page .sidebar { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(430px, calc(100% - 24px)); flex-direction: row; padding: 5px 7px; max-height: none; overflow: visible; }
 .site-page .side-logo { display: none; }
 .site-page .sidebar nav { flex: 1; width: auto; gap: 0; }
 .site-page .sidebar .nav-item { font-size: .625rem; min-height: 48px; padding: 8px 1px; }
 .site-page .sidebar .nav-item svg { width: 20px; height: 20px; }
 .site-page .sidebar-preferences { flex: 0 0 44px; width: 44px; margin: 0; padding: 0; }
 .site-page .sidebar-preferences .theme-toggle { min-height: 48px; font-size: .5625rem; }
 .site-page .page { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
 .site-page .hero-actions { width: auto; }
 .site-page .hero-bottom { gap: 12px; }
 .site-page .artifact-feature .artifact-example { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
 .site-page .artifact-example > .artifact-abilities { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
 .site-page .hero-main { min-height: 0; padding-top: 6px; padding-bottom: 0; }
 .site-page .hero-main > .hero-meta { width: 100%; }
 .site-page .hero-main > .hero-title.brand-sign { width: 100%; max-width: 100%; margin: 12px 0 10px; }
 .site-page .hero-title .brand-word { font-size: 18cqw; }
 .site-page .hero-main > .hero-copy { width: 100%; gap: 14px; padding-bottom: 0; }
 .site-page .hero-copy .hero-intro { font-size: 1.6rem; max-width: 100%; }
 .site-page .hero-copy .hero-description { font-size: 1rem; line-height: 1.6; max-width: 29em; }
 .site-page .hero-main > .hero-art-shell { position: relative; inset: auto; width: min(100%, 430px); height: auto; aspect-ratio: 1374 / 1145; margin: 18px auto 0; }
 .site-page .hero-small { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
 .site-page .hero-small .artifact-carousel--hero { grid-column: 1 / -1; }
 .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(0, 1fr); grid-template-rows: 100px minmax(40px, auto); padding: 12px; gap: 8px; }
 .site-page .hero-small :is(.staff-card, .tps-card) .render-visual { height: 100px; }
 .site-page .world-grid { grid-template-columns: minmax(0, 1fr); }
 .site-page .world-lines { display: none; }
 .site-page .feature-grid article { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 0; }
 .site-page .feature-grid article .feature-heading { margin: 0; }
 .site-page .section-rail { gap: 8px 14px; font-size: .75rem; }
 .site-page #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
 .artifact-example-art { height: 170px; }
 .artifact-abilities dl > div { grid-template-columns: minmax(100px, .8fr) minmax(0, 1fr); }
 .site-page .item-dialog.has-item-info[open] { display: block; }
 .site-page .item-dialog.has-item-info #item-abilities { margin-top: 20px; }
 .site-page .item-dialog.has-item-info .item-dialog-stage { height: 180px; }
}
html[data-motion="reduced"] .site-page .world-flow *, html[data-motion="reduced"] .site-page .world-flow *::before, html[data-motion="reduced"] .site-page .world-flow *::after, html[data-motion="reduced"] .site-page .lobby-type { animation: none !important; clip-path: none; }
html[data-motion="reduced"] .site-page .feature-link span, html[data-motion="reduced"] .lobby-gallery-controls button { transition: none; }

.boss-topics { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 18px; }
.boss-topics a { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; border-left: 2px solid var(--orange); min-height: 44px; justify-content: center; }
.boss-topics strong { font-size: .875rem; }
.boss-topics small { color: var(--muted); font-size: .75rem; }
.boss-topics a:hover strong { color: var(--orange); }
.site-page .item-dialog { width: min(820px, calc(100% - 32px)); }
.site-page .item-dialog.has-item-info .dialog-close { justify-self: end; grid-row: 1; }

/* One quiet frame language across the right column and all four worlds. */
.site-page { --card-line: #64646480; --card-surface: #171717AD; --card-radius: 8px; }
html[data-theme="light"] .site-page { --card-line: #BCC4C5; --card-surface: #F3F4F5D9; }
.site-page .hero-small :is(.staff-card, .tps-card)::before,
.site-page .hero-small :is(.staff-card, .tps-card)::after { inset: 0; border-radius: var(--card-radius); }
.site-page .hero-small :is(.staff-card, .tps-card)::before { border: 1px solid var(--card-line); background: var(--card-surface); box-shadow: none; display: block; }
.site-page .hero-small .artifact-carousel--hero { border: 1px solid var(--card-line); border-radius: var(--card-radius); background: var(--card-surface); box-shadow: none; }
.site-page .hero-small .render-label { padding-left: 0; }
.site-page .hero-small :is(.staff-card, .tps-card):hover { transform: translateY(-2px); }
.site-page .world-tile::before { display: block; inset: var(--surface-top) 0 0; border: 1px solid var(--card-line); border-radius: var(--card-radius); background: var(--card-surface); box-shadow: none; }
.site-page .world-tile::after { inset: var(--surface-top) 0 0; border-radius: var(--card-radius); box-shadow: none; }
.site-page .world-tile:hover::before, .site-page .world-tile:focus-visible::before { border-color: var(--orange); box-shadow: none; }
.site-page .world-tile .world-frame { position: absolute; z-index: 2; inset: var(--surface-top) 0 0; width: 100%; height: calc(100% - var(--surface-top)); fill: none; stroke: var(--flow-color, var(--orange)); stroke-width: 1.5; pointer-events: none; overflow: visible; opacity: 0; }
.world-frame rect { vector-effect: non-scaling-stroke; stroke-dasharray: 1 3; }
.site-page .world-flow .world-grid .world-frame { animation: world-frame-arrive 3.6s ease var(--flow-delay) both; }
.site-page .world-flow .world-grid .world-frame rect { animation: world-frame-travel 3.6s linear var(--flow-delay) both; }
@keyframes world-frame-arrive { 0%, 100% { opacity: 0; } 15%, 80% { opacity: .9; } }
@keyframes world-frame-travel { to { stroke-dashoffset: -32; } }
.site-page .world-type { max-width: 13em; display: block; }
.site-page .world-type.is-typing { animation: lobby-type 1.5s steps(24, end) both; }
.site-page .hero-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 6px; }
.site-page .hero-connect .server-address { width: 100%; justify-content: flex-start; min-height: 48px; padding: 10px 12px; font-size: .95rem; }
.site-page .hero-connect .server-address small { margin-left: auto; font-size: .7rem; }
.site-page .hero-connect .next-section { gap: 10px; color: var(--muted); }
.site-page .hero-connect .next-section:hover { color: var(--orange); }
.site-page .hero-bottom { justify-content: flex-end; margin-top: 12px; }
.site-page .sidebar .nav-item { position: relative; justify-content: center; }
.site-page .sidebar .nav-item svg { width: 24px; height: 24px; }
.site-page .sidebar .theme-caption { display: none; }
.site-page .sidebar-preferences .theme-toggle { flex-direction: row; justify-content: center; }
/* An actual interactive exhibit: stable columns, levitating sword, small command burst. */
.soul-sword-scene { position: relative; width: 100%; height: 280px; display: grid; place-items: center; }
.soul-sword-scene::before { content: ''; position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFD45C1A, transparent 70%); pointer-events: none; }
.soul-sword { position: relative; z-index: 1; width: 86px; height: 254px; padding: 0; border: 0; background: transparent; touch-action: manipulation; border-radius: 12px; }
.soul-sword .artifact-example-art { height: 100%; width: 100%; overflow: visible; animation: soul-levitate 4.2s ease-in-out infinite; filter: drop-shadow(0 8px 8px #00000033); transition: filter .3s; }
.soul-sword:hover .artifact-example-art, .soul-sword:focus-visible .artifact-example-art { filter: drop-shadow(0 0 9px #FFD45C66); }
.soul-commands { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.soul-commands > span { position: absolute; display: block; animation: soul-command-burst .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--command) * 65ms); }
.soul-commands > span:nth-child(1) { left: 2px; top: 16px; --fly-x: 42px; --fly-y: 80px; }
.soul-commands > span:nth-child(2) { right: -2px; top: 102px; --fly-x: -40px; --fly-y: 0px; }
.soul-commands > span:nth-child(3) { left: -8px; bottom: 30px; --fly-x: 25px; --fly-y: -55px; }
.soul-commands kbd { display: block; padding: 6px 8px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--bg); color: var(--text); font: 700 .7rem/1.2 Manrope, Arial, sans-serif; }
@keyframes soul-levitate { 0%, 100% { transform: translateY(4px) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes soul-command-burst { from { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) scale(.7); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
.soul-sword-scene.motion-offscreen .artifact-example-art, .page-is-hidden .soul-sword .artifact-example-art, .has-open-dialog .soul-sword .artifact-example-art { animation-play-state: paused; }
@media (max-width: 1199px) { .site-page .hero-main { min-height: 470px; } .site-page .hero-small .artifact-carousel--hero .carousel-stage { height: 144px; } }
@media (max-width: 639px) {
 .site-page .hero-main { min-height: 0; display: flex; flex-direction: column; }
 .site-page .hero-main > .hero-meta { order: 0; }
 .site-page .hero-main > .hero-title { order: 1; }
 .site-page .hero-main > .hero-copy { order: 2; }
 .site-page .hero-main > .hero-art-shell { order: 3; }
 .site-page .hero-small .artifact-carousel--hero .carousel-stage { height: 190px; }
 .site-page .artifact-feature .artifact-example { grid-template-columns: minmax(0, 1fr); }
 .site-page .artifact-example > .artifact-abilities { grid-column: 1; }
 .soul-sword-scene { width: 200px; height: 264px; margin: 0 auto; }
 .site-page .sidebar { min-height: 60px; }
 .site-page .sidebar .nav-item { min-height: 48px; }
 .site-page .sidebar .nav-item svg { width: 22px; height: 22px; }
}
html[data-motion="reduced"] .world-type { clip-path: none; }
html[data-motion="reduced"] .soul-sword .artifact-example-art, html[data-motion="reduced"] .soul-commands > span { animation: none; transform: none; }

.site-page .side-logo img { width: 42px; height: 42px; border-radius: 0; filter: brightness(0) invert(1); }
html[data-theme="light"] .site-page .side-logo img { filter: brightness(0); }

/* Larger geometric captions and a lighter right column. */
@font-face { font-family: Montserrat; src: url('assets/fonts/Montserrat-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }
.site-page .hero-small { grid-template-rows: auto auto; align-self: center; }
.site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.site-page .hero-small :is(.staff-card, .tps-card) .render-label { font-family: RussoOne, Arial, sans-serif; font-weight: 400; font-size: clamp(1.25rem, 1.5vw, 1.55rem); line-height: 1.2; letter-spacing: -.025em; }
.site-page .hero-small .control-art { transition: transform .3s var(--ease-soft); transform-origin: center; }
.site-page .hero-small :is(.staff-card, .tps-card):hover { transform: none; }
.site-page .hero-small :is(.staff-card, .tps-card) .control-art, .site-page .hero-small :is(.staff-card, .tps-card):hover .control-art, .site-page .hero-small :is(.staff-card, .tps-card):focus-visible .control-art { animation: none; transform: none; translate: none; }
/* The artifacts now form one horizontal exhibit, freeing the right-hand column. */
.hero-discovery { margin-top: 22px; }
.site-page .hero-discovery .artifact-carousel--hero { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 0; }
.site-page .hero-discovery .carousel-stage { grid-column: 2; grid-row: 1; height: 136px; }
.site-page .hero-discovery .carousel-controls { grid-column: 1; grid-row: 1; align-self: center; gap: 10px; padding: 0; }
.site-page .hero-discovery .render-label { font-size: 1.2rem; }
.site-page .hero-bottom { border-top: 0; padding-top: 0; margin-top: 16px; justify-content: space-between; gap: 14px; }
.shared-progress { color: var(--muted); font-size: .8rem; letter-spacing: .015em; }
/* A thin address frame, with quiet orange type and no accent stripe. */
.site-page .hero-connect .server-address, .site-page .hero-connect .server-address:hover, .site-page .hero-connect .server-address:active,
html[data-theme="light"] .site-page .hero-connect .server-address, html[data-theme="light"] .site-page .hero-connect .server-address:hover { border: 1px solid var(--card-line); border-radius: 10px; background: transparent; box-shadow: none; padding: 10px 14px; transform: none; }
.site-page .hero-connect .server-address:hover, html[data-theme="light"] .site-page .hero-connect .server-address:hover { border-color: var(--orange); }
.site-page .hero-connect .server-address > span { color: #F16001; font-weight: 400; font-size: 1.1rem; letter-spacing: 0; }
html[data-theme="light"] .site-page .hero-connect .server-address > span { color: #CA3F16; }
.site-page .artifact-feature .artifact-carousel { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
/* One calm reveal per section: no child-by-child stagger or large movement. */
.site-page .reveal-ready.is-visible { animation: unified-entry .65s cubic-bezier(.22,1,.36,1) both; animation-delay: 0s; }
@keyframes unified-entry { from { opacity: .72; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.site-page .reveal-ready:focus-within { animation: none; }
/* A slow orange light passes through the lettering without moving it. */
.site-page .hero-title .brand-word, .site-page .hero-title:hover .brand-word { color: #F16001; filter: none; text-shadow: none; }
.site-page .hero-title .brand-word > span, .site-page .hero-title:hover .brand-word > span,
html[data-theme="light"] .site-page .hero-title .brand-word > span, html[data-theme="light"] .site-page .hero-title:hover .brand-word > span { --brand-ink: #F16001; --brand-highlight: #FF8C40; --brand-glow: #F16001D9; animation: orange-letter-light 4.6s ease-in-out infinite; animation-delay: calc(var(--letter) * -.18s); color: var(--brand-ink); -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .site-page .hero-title .brand-word > span, html[data-theme="light"] .site-page .hero-title:hover .brand-word > span { --brand-ink: #CA3F16; --brand-highlight: #EB6B21; --brand-glow: #CA3F1699; }
@keyframes orange-letter-light { 0%, 20%, 85%, 100% { color: var(--brand-ink); text-shadow: 0 0 5px var(--brand-glow), 0 0 14px var(--brand-glow); } 50% { color: var(--brand-highlight); text-shadow: 0 0 4px var(--brand-glow), 0 0 20px var(--brand-glow), 0 0 38px var(--brand-glow); } }
.site-page .hero-title.motion-offscreen .brand-word > span, .page-is-hidden .site-page .hero-title .brand-word > span, .has-open-dialog .site-page .hero-title .brand-word > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .site-page .hero-title .brand-word > span { animation: none; text-shadow: 0 0 8px var(--brand-glow); } }
/* Ability details occupy the same space before and after the sword is clicked. */
.soul-ability-panel { display: grid; align-items: center; min-height: 245px; }
.soul-ability-panel > * { grid-area: 1 / 1; }
.soul-invitation { border-left: 2px solid #FFD45C66; padding-left: 18px; }
.soul-invitation p { color: var(--text); font-size: 1rem; line-height: 1.5; max-width: 22em; }
.soul-invitation small { display: block; margin-top: 10px; color: var(--muted); font-size: .75rem; }
.soul-commands { pointer-events: none; }
.soul-commands > button { position: absolute; border: 0; padding: 0; background: transparent; pointer-events: auto; touch-action: manipulation; animation: soul-command-burst .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--command) * 65ms); }
.soul-commands > button:nth-child(1) { left: 2px; top: 16px; --fly-x: 42px; --fly-y: 80px; }
.soul-commands > button:nth-child(2) { right: -2px; top: 102px; --fly-x: -40px; --fly-y: 0px; }
.soul-commands > button:nth-child(3) { left: -8px; bottom: 30px; --fly-x: 25px; --fly-y: -55px; }
.soul-commands kbd { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.soul-commands > button:hover kbd { color: #FFD45C; border-color: #FFD45C; }
.soul-ability-panel .artifact-abilities dl > div { transition: background .2s; }
.soul-ability-panel .artifact-abilities .is-selected { background: #FF940814; }
/* The mark stays white; the warm circle provides contrast in the light theme. */
.site-page .side-logo { position: relative; }
.site-page .side-logo img { position: relative; z-index: 1; }
html[data-theme="light"] .site-page .side-logo img { filter: brightness(0) invert(1); }
html[data-theme="light"] .site-page .side-logo::before { content: ''; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #CA3F16; }
@media (max-width: 1199px) { .site-page .hero-small { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: 90px minmax(0, 1fr); grid-template-rows: auto; } }
@media (max-width: 899px) { .soul-ability-panel { grid-column: 1 / -1; } }
@media (max-width: 639px) {
 .site-page .hero-discovery .artifact-carousel--hero { display: flex; flex-direction: column; gap: 4px; }
 .site-page .hero-discovery .carousel-stage { height: 180px; width: 100%; }
 .site-page .hero-discovery .carousel-controls { width: 100%; }
 .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(0, 1fr); grid-template-rows: 100px minmax(44px, auto); }
 .site-page .hero-small :is(.staff-card, .tps-card) .render-label { font-size: 1.15rem; }
 .soul-ability-panel { grid-column: 1; }
 .shared-progress { font-size: .7rem; }
}
html[data-motion="reduced"] .site-page .hero-title .brand-word > span, html[data-motion="reduced"] .soul-commands > button { animation: none; }
/* Keep the user's 120% composition at normal zoom: a wide hero and one lower row. */
.site-page .hero-grid { display: block; }
.site-page .hero-main { min-height: calc(100svh - 56px); }
.site-page .hero-main > .hero-meta { width: 52%; }
.site-page .hero-main > .hero-copy { width: 52%; }
.site-page .hero-title .brand-word { font-size: clamp(4rem, 13.2cqw, 9rem); }
.site-page .hero-copy .hero-intro { font-size: clamp(1.8rem, 2.6vw, 2.35rem); }
.site-page .hero-copy .hero-description { font-size: 1.1rem; }
.site-page .hero-main > .hero-art-shell { display: grid; place-items: center; top: auto; right: -2%; bottom: 24px; width: 54%; height: calc(100% - 40px); }
.site-page .hero-small { display: grid; margin-top: 0; padding-top: 24px; border-top: 1px solid var(--card-line); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto; gap: 18px; align-items: stretch; }
.site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(110px, 42%) minmax(0, 1fr); grid-template-rows: auto; min-height: 208px; padding: 14px; gap: 10px; }
.site-page .hero-small :is(.staff-card, .tps-card) .render-visual { height: 164px; min-height: 0; }
.site-page .hero-small :is(.staff-card, .tps-card) .render-label { font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.2; font-weight: 400; margin: 0; }
.site-page .hero-small :is(.staff-card, .tps-card) .control-art.clean-render { object-position: center; }
.site-page .hero-small .artifact-carousel--hero { grid-column: auto; padding: 12px; min-height: 208px; }
.site-page .hero-small .artifact-carousel--hero .carousel-stage { height: 136px; }
@media (max-width: 1199px) { .site-page .hero-main { min-height: calc(100svh - 40px); } .site-page .hero-small { gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); } .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(90px, 42%) minmax(0, 1fr); } .site-page .hero-small :is(.staff-card, .tps-card) .render-label { font-size: clamp(1.2rem, 1.9vw, 1.45rem); } }
@media (max-width: 899px) { .site-page .hero-small { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-page .hero-small .artifact-carousel--hero { grid-column: 1 / -1; } .site-page .hero-small :is(.staff-card, .tps-card) { min-height: 140px; } .site-page .hero-small .artifact-carousel--hero .carousel-stage { height: 180px; } }
@media (max-width: 639px) {
 .site-page .hero-main { min-height: 0; }
 .site-page .hero-main > .hero-meta, .site-page .hero-main > .hero-copy { width: 100%; }
 .site-page .hero-title .brand-word { font-size: 18cqw; }
 .site-page .hero-copy .hero-intro { font-size: 1.6rem; }
 .site-page .hero-copy .hero-description { font-size: 1rem; }
 .site-page .hero-main > .hero-art-shell { position: relative; inset: auto; width: min(100%, 430px); height: auto; }
 .site-page .hero-small { margin-top: 18px; padding-top: 18px; }
 .site-page .hero-small :is(.staff-card, .tps-card) { grid-template-columns: minmax(0, 1fr); grid-template-rows: 144px minmax(48px, auto); gap: 8px; padding: 12px; }
 .site-page .hero-small :is(.staff-card, .tps-card) .render-visual { height: 144px; }
 .site-page .hero-small :is(.staff-card, .tps-card) .render-label { font-size: clamp(1.15rem, 4.9vw, 1.35rem); text-align: center; }

}

@media (min-width: 900px) and (max-width: 1199px) { .site-page .sidebar { top: 40px; } }

@media (min-width: 640px) and (max-width: 899px) { .site-page .hero-main { min-height: calc(100svh - 32px); } }

/* A pixel label and an orange neon outline fill the marked space beneath the address. */
.site-page .hero-play-row { margin-top: 12px; padding-bottom: 22px; }
.site-page .hero-play { position: relative; isolation: isolate; display: inline-flex; justify-content: center; align-items: center; gap: 18px; width: min(360px, 100%); min-height: 80px; padding: 16px 28px; border: 2px solid #F16001; border-radius: 8px; background: #F160010C; color: #FF8C40; font: 400 clamp(1.75rem, 2.5vw, 2.4rem)/1.15 Chaos16, monospace; letter-spacing: .02em; text-shadow: 0 0 12px #F16001A6; box-shadow: inset 0 0 18px #F1600114, 0 0 20px #F160014D; touch-action: manipulation; cursor: pointer; transition: background .25s, box-shadow .25s, transform .2s; }
.site-page .hero-play::before { content: ''; position: absolute; z-index: -1; inset: 5px; border: 1px solid #F160014D; border-radius: 4px; pointer-events: none; }
.site-page .hero-play::after { content: ''; position: absolute; z-index: -2; inset: -4px; border: 2px solid #F16001; border-radius: 10px; filter: blur(8px); opacity: .35; pointer-events: none; animation: play-neon-light 4.6s ease-in-out infinite; }
.site-page .hero-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; flex-shrink: 0; }
.site-page .hero-play:hover { background: #F1600126; box-shadow: inset 0 0 18px #F1600126, 0 0 30px #F1600166; }
.site-page .hero-play:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.site-page .hero-play:active { transform: translateY(1px); }
html[data-theme="light"] .site-page .hero-play { color: #CA3F16; background: #F3F4F5CC; text-shadow: 0 0 10px #F1600133; }
html[data-theme="light"] .site-page .hero-play:hover { background: #FF94081A; }
@keyframes play-neon-light { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
.site-page .hero-play.motion-offscreen::after, .page-is-hidden .site-page .hero-play::after, .has-open-dialog .hero-play::after { animation-play-state: paused; }
html[data-motion="reduced"] .site-page .hero-play::after { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .site-page .hero-play::after { animation: none; } }
@media (max-width: 639px) { .site-page .hero-play-row { margin-top: 4px; padding-bottom: 8px; } .site-page .hero-play { min-height: 64px; width: 100%; font-size: 1.8rem; } }