.vn-site,.vn-play{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#080b14;color:#f6f7fb}.vn-site,.vn-play,.vn-site *,.vn-play *{box-sizing:border-box}html:has(>body.vn-play),body.vn-play,body.vn-site{margin:0;min-height:100%}.vn-site a,.vn-play a{color:inherit}.vn-site{background:radial-gradient(circle at 15% 5%,#29345f 0,transparent 35rem),#080b14}.vn-header{height:4rem;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,4rem);border-bottom:1px solid #ffffff18;background:#080b14cc;backdrop-filter:blur(16px)}.vn-header nav{display:flex;gap:1.25rem}.vn-header a{text-decoration:none}.vn-brand{font-weight:800;letter-spacing:-.03em}.vn-landing{width:min(1120px,calc(100% - 2rem));margin:auto;padding:clamp(2rem,7vw,6rem) 0;display:grid;gap:3rem}.vn-intro{max-width:760px}.vn-kicker,.vnd-kicker{text-transform:uppercase;letter-spacing:.14em;color:#9da9d5;font-size:.78rem;font-weight:800}.vn-intro h1{font-size:clamp(2.4rem,7vw,5.5rem);line-height:.96;letter-spacing:-.06em;margin:.3em 0}.vn-intro p{font-size:clamp(1rem,2vw,1.3rem);color:#c4c9da;max-width:60ch}.vn-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.vn-button,.vn-controls button,.vn-start,.vn-error button,.vn-exit,.vn-choices button,.vn-game-menu button{border:1px solid #ffffff30;border-radius:.65rem;background:#171d31;color:#fff;padding:.7rem 1rem;font:600 .92rem inherit;text-decoration:none;cursor:pointer}.vn-button-primary,.vn-start{background:#7865ee;border-color:#a799ff}.vn-player-shell{position:relative;width:100%;aspect-ratio:16/9;max-height:100vh;overflow:hidden;background:#050812;box-shadow:0 2rem 5rem #0009}.vn-site .vn-player-shell{border:1px solid #ffffff1c;border-radius:1rem}.vn-player-shell canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.vn-start{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:8;font-size:1rem}.vn-status{position:absolute;z-index:7;top:.75rem;right:.75rem;padding:.25rem .5rem;border-radius:.3rem;background:#050812b8;color:#fffd;font-size:.78rem;pointer-events:none}.vn-dialogue{position:absolute;z-index:4;inset:auto 0 0;padding:1rem clamp(1rem,5vw,3rem) 3.1rem;background:linear-gradient(#080d1dcc,#050912f7 22%,#050912fa);border-top:1px solid #ffffff24;pointer-events:none}.vn-dialogue strong{display:block;color:#f0a9b6;font-size:clamp(.9rem,2vw,1.2rem)}.vn-dialogue p{margin:.35rem 0 0;font-size:clamp(.9rem,2.2vw,1.25rem);line-height:1.4}.vn-choices{position:absolute;z-index:6;inset:20% max(1rem,15%) auto;display:grid;gap:.65rem}.vn-choices[hidden],.vn-dialogue[hidden]{display:none}.vn-choices button{width:100%;background:#111a35ed;border-color:#b8aeff70;font-size:clamp(.85rem,2vw,1.1rem)}.vn-choices button:hover,.vn-choices button:focus-visible{background:#6854b8}.vn-controls{position:absolute;z-index:5;inset:auto 0 0;display:flex;justify-content:center;gap:.35rem;padding:.5rem;background:linear-gradient(transparent,#050812df)}.vn-controls button{padding:.45rem .7rem;background:#111625cc;font-size:.75rem}.vn-game-menu{width:min(30rem,calc(100% - 2rem));border:1px solid #ffffff30;border-radius:1rem;background:#0d1326f5;color:#fff;padding:1.25rem}.vn-game-menu::backdrop{background:#02040bb8}.vn-game-menu h2{margin-top:0}.vn-game-menu label{display:grid;grid-template-columns:5rem 1fr;align-items:center;gap:.75rem;margin:1rem 0}.vn-game-menu input{width:100%}.vn-menu-actions{display:flex;gap:.5rem;flex-wrap:wrap}.vn-error{position:absolute;z-index:10;inset:5%;overflow:auto;padding:1.25rem;border:1px solid #ff9eaa80;border-radius:.65rem;background:#241718f2;color:#ffe9eb}.vn-error pre{white-space:pre-wrap}.vn-error menu{display:flex;gap:.5rem;padding:0}.vn-exit{position:absolute;z-index:7;top:.65rem;left:.65rem;padding:.4rem .65rem;background:#050812b8;font-size:.75rem}.vn-play{width:100vw;height:100vh;overflow:hidden;background:#050812;display:grid;place-items:center}.vn-play .vn-player-shell{width:min(100vw,177.78vh);height:min(100vh,56.25vw)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #fff;outline-offset:2px}@media(max-width:700px){.vn-header{height:auto;padding:1rem}.vn-header nav{gap:.75rem;font-size:.85rem}.vn-landing{padding:2rem 0}.vn-dialogue{padding:.6rem .8rem 2.7rem}.vn-dialogue p{margin-top:.15rem}.vn-choices{inset:12% .75rem auto}.vn-choices button{padding:.5rem .65rem}.vn-controls{overflow-x:auto;justify-content:flex-start;padding-bottom:max(.5rem,env(safe-area-inset-bottom))}.vn-controls button{white-space:nowrap}.vn-play .vn-player-shell{width:100vw;height:56.25vw}.vn-play{align-content:center}}
.vn-library{display:grid;gap:1.25rem}.vn-library h2{font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.04em;margin:0}.vn-library-note{color:#c4c9da;max-width:80ch;margin:0}.vn-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}.vn-card{display:grid;gap:.6rem;align-content:start;border:1px solid #ffffff1c;border-radius:1rem;background:#101528d9;padding:1.1rem}.vn-card h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}.vn-card-hook{margin:0;color:#d5d9e8}.vn-card-stats{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}.vn-card-stats li{border:1px solid #ffffff1f;border-radius:.4rem;padding:.15rem .45rem;font-size:.72rem;color:#a9b2d0}.vn-card-tracked,.vn-card-flags{margin:0;font-size:.78rem;color:#9da9d5}.vn-card-warnings{font-size:.8rem;color:#d8b7bf}.vn-card-warnings summary{cursor:pointer;color:#f0a9b6}.vn-card-warnings ul{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.2rem}.vn-card-support{margin:.5rem 0 0}.vn-card-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}.vn-card-actions .vn-button{padding:.5rem .8rem;font-size:.82rem}.vn-notice{position:absolute;z-index:9;top:3rem;left:.65rem;width:min(26rem,calc(100% - 1.3rem));max-height:70%;overflow:auto;border:1px solid #ffffff2b;border-radius:.8rem;background:#0a0f20f2;padding:.9rem 1rem;font-size:.82rem;color:#d8dbe8}.vn-notice summary{cursor:pointer;font-weight:700;color:#f0a9b6}.vn-notice ul{margin:.6rem 0;padding-left:1.1rem;display:grid;gap:.2rem}.vn-notice-draft{color:#9da9d5}.vn-notice .vn-button{padding:.45rem .7rem;font-size:.78rem}

.vn-market-intro h1{font-size:clamp(2rem,5.5vw,4rem)}.vn-market-controls{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end;padding:1rem;border:1px solid #ffffff1c;border-radius:1rem;background:#101528a8}.vn-field{display:grid;gap:.3rem;font-size:.78rem;color:#9da9d5;font-weight:700}.vn-field-search{flex:1 1 18rem;min-width:12rem}.vn-field input,.vn-field select{width:100%;padding:.55rem .7rem;border:1px solid #ffffff2b;border-radius:.55rem;background:#0b1020;color:#f6f7fb;font:400 .92rem inherit}.vn-market-controls .vn-button{padding:.55rem .9rem}.vn-market-status{margin:0;color:#c4c9da;font-size:.86rem;max-width:90ch}.vn-market-status strong{color:#f6f7fb}.vn-market-empty{color:#d8b7bf}.vn-featured{display:grid;gap:.5rem}.vn-featured h3{margin:0;font-size:1.15rem}.vn-featured-note{margin:0;color:#9da9d5;font-size:.8rem;max-width:80ch}.vn-featured-row{display:flex;gap:.75rem;overflow-x:auto;list-style:none;margin:.35rem 0 0;padding:0 0 .5rem;scroll-snap-type:x proximity}.vn-featured-card{flex:0 0 9.5rem;scroll-snap-align:start}.vn-featured-link{display:grid;gap:.35rem;text-decoration:none}.vn-featured-link strong{font-size:.9rem;letter-spacing:-.01em}.vn-featured-link small{color:#9da9d5;font-size:.72rem}.vn-cover{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:3/4;border-radius:.7rem;border:1px solid #ffffff1c;background:linear-gradient(160deg,hsl(var(--vn-hue,220) 45% 26%),hsl(calc(var(--vn-hue,220) + 40) 40% 12%));text-decoration:none}.vn-cover img{width:100%;height:100%;object-fit:cover;display:block}.vn-cover-text{padding:.75rem;font:800 clamp(.95rem,2.4vw,1.35rem)/1.15 inherit;letter-spacing:-.03em;text-align:center;text-wrap:balance;color:#fff;text-shadow:0 .12em .5em #0009}.vn-cover-flag{position:absolute;bottom:.4rem;left:.4rem;right:.4rem;text-align:center;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#ffffffb0}.vn-cover-flag-inline{color:#9da9d5;font-size:.7rem}.vn-cover-small{aspect-ratio:3/4}.vn-cover-large{aspect-ratio:3/4;max-width:20rem}.vn-cover-portrait{aspect-ratio:4/5}.vn-cover-initial{font:800 1.6rem inherit;color:#fff9}.vn-poster-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.vn-poster-card h3 a{text-decoration:none}.vn-poster-card h3 a:hover{text-decoration:underline}.vn-card-meta,.vn-card-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:0}.vn-chip{border:1px solid #ffffff26;border-radius:999px;padding:.12rem .5rem;font-size:.7rem;color:#c4c9da;text-decoration:none;background:#ffffff0a}.vn-chip:hover{background:#ffffff1a}.vn-chip-tag{color:#a9b2d0}.vn-chip-period{border-color:#a799ff4d;color:#cfc7ff}.vn-pager{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.vn-pager-label{color:#9da9d5;font-size:.85rem}.vn-crumbs{display:flex;gap:.5rem;font-size:.82rem;color:#9da9d5}.vn-crumbs a{color:#c4c9da}.vn-listing-body{grid-template-columns:1fr}.vn-listing-card{gap:1.25rem;padding:clamp(1rem,3vw,1.75rem)}.vn-listing-head{display:grid;gap:1.25rem;grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}.vn-listing-summary{display:grid;gap:.6rem;align-content:start}.vn-listing-summary h1{margin:0;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.04em;line-height:1.05}.vn-listing-icon{border-radius:.5rem;border:1px solid #ffffff26}.vn-listing-tagline{margin:0;font-size:1.05rem;color:#d5d9e8}.vn-listing-plays{margin:0;font-size:.8rem;color:#9da9d5}.vn-listing-section{display:grid;gap:.5rem;border-top:1px solid #ffffff14;padding-top:1rem}.vn-listing-section h2{margin:0;font-size:1.05rem;letter-spacing:-.01em}.vn-listing-description{margin:0;color:#d5d9e8;max-width:80ch;white-space:pre-wrap}.vn-listing-warnings{margin:0;padding-left:1.1rem;display:grid;gap:.2rem;color:#d8b7bf;font-size:.88rem}.vn-cast{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));list-style:none;margin:0;padding:0}.vn-cast-card{display:grid;gap:.3rem}.vn-cast-card strong{font-size:.88rem}.vn-cast-card small{color:#9da9d5;font-size:.74rem}@media(max-width:760px){.vn-listing-head{grid-template-columns:1fr}.vn-cover-large{max-width:14rem}.vn-market-controls{padding:.75rem}}

/* Clean play mode (share link, ?play=1). The controls stay in the DOM - and inside the
   element that goes fullscreen - so quick save, quick load and rollback keep working; they
   just fade out until the pointer or the keyboard asks for them. */
body.vn-clean .vn-exit,
body.vn-clean .vn-notice { display: none; }
body.vn-clean .vn-controls { opacity: .12; transition: opacity .15s; }
body.vn-clean .vn-controls:hover,
body.vn-clean .vn-controls:focus-within { opacity: 1; }
body.vn-clean-css .vn-player-shell {
  position: fixed;
  inset: 0;
  z-index: 40;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}
.vn-choices button.vn-input-focus { background: #6854b8; outline: 3px solid #fff; outline-offset: 2px; }
.vn-clean-gate {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: #050812f2;
}
.vn-clean-gate h1 { font-size: 20px; margin: 0; }
.vn-clean-gate p { max-width: 44ch; margin: 0; color: #b9c0d8; font-size: 13px; }
.vn-clean-gate button { padding: 10px 20px; font-size: 15px; }
.vn-clean-gate[hidden] { display: none; }

.vn-notice-credits { margin: .55rem 0 .35rem; font-size: .78rem; color: #9da9d5; }
.vn-notice-credits summary { cursor: pointer; font-weight: 600; color: #a9b6e2; }
.vn-notice-credits ul { margin: .45rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.vn-notice-credits a { color: #cfd6ef; }

/* Brand pass: netwrck's warm gradient on the dark shell, and poster art given the
   space it earns. Everything below overrides the base rules above on purpose. */
:root {
  --vn-warm: #ffcb66;
  --vn-orange: #ff9e43;
  --vn-pink: #d94b86;
  --vn-brand: linear-gradient(135deg, var(--vn-warm) 0%, var(--vn-orange) 42%, var(--vn-pink) 100%);
  --vn-ink-dim: #b9b3c6;
}
.vn-site {
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(255, 158, 67, .20), transparent 62%),
    radial-gradient(52rem 38rem at 92% 6%, rgba(217, 75, 134, .22), transparent 60%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(217, 75, 134, .10), transparent 65%),
    #0a0710;
}
.vn-header {
  background: #0a0710d9;
  border-bottom: 1px solid #ffffff14;
}
.vn-brand {
  background: var(--vn-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* .vn-intro p and .vn-hero-copy > p both out-specify a bare .vn-kicker, so the
   kicker needs the element qualifier to keep its accent colour. */
p.vn-kicker, .vnd-kicker { color: var(--vn-orange); }
.vn-button { background: #ffffff0f; border-color: #ffffff26; }
.vn-button:hover { background: #ffffff1c; }
.vn-button.vn-button-primary, .vn-start {
  background: var(--vn-brand);
  border-color: transparent;
  color: #1b0d14;
  font-weight: 800;
}
.vn-play .vn-start, .vn-site .vn-start { display: none; }
.vn-button.vn-button-primary:hover, .vn-start:hover { filter: brightness(1.08); background: var(--vn-brand); }
.vn-choices button:hover, .vn-choices button:focus-visible { background: #b8437a; }
.vn-dialogue strong {
  display: table;
  max-width: 80%;
  margin: 0 0 .35rem;
  padding: .25rem .65rem;
  border-left: 3px solid currentColor;
  border-radius: .3rem;
  background: #090812e8;
  background: color-mix(in srgb, var(--vn-speaker-color, var(--vn-warm)) 16%, #090812);
  color: var(--vn-speaker-color, var(--vn-warm));
  font-weight: 800;
  letter-spacing: .025em;
  text-shadow: 0 1px 2px #000, 0 0 8px #000;
}
.vn-dialogue strong:empty { display: none; }
.vn-dialogue p { color: #fff; text-shadow: 0 1px 2px #000; }
.vn-card-warnings summary, .vn-notice summary { color: var(--vn-orange); }
.vn-chip-period { border-color: #ff9e4359; color: var(--vn-warm); }

/* Wider shell, and sections that can break the shell to go edge to edge. */
.vn-landing { width: min(1560px, calc(100% - 2.5rem)); gap: 2.25rem; padding: 0 0 clamp(3rem, 6vw, 6rem); }
.vn-full-bleed, .vn-hero, .vn-featured-row {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Hero: the posters are the page, the copy sits on top of them. */
.vn-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: min(72vh, 40rem);
  padding: clamp(3rem, 9vw, 7rem) max(1.25rem, calc(50vw - 780px)) clamp(2.5rem, 6vw, 4.5rem);
  max-width: none;
  overflow: hidden;
}
.vn-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  gap: 0;
}
.vn-hero-art img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  filter: saturate(.85) contrast(1.05);
}
.vn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0a0710e6 0%, #0a071099 34%, #0a0710f2 92%),
    linear-gradient(100deg, rgba(255, 158, 67, .26), transparent 46%, rgba(217, 75, 134, .3));
}
.vn-hero-copy { max-width: 46rem; display: grid; gap: .35rem; }
.vn-hero-copy h1 { margin: .15em 0 .1em; text-shadow: 0 .1em .6em #0a0710cc; }
.vn-hero-copy > p:not(.vn-kicker) { color: #e6e0ee; }
.vn-market-intro h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.vn-market-page .vn-hero { min-height: min(68vh, 42rem); align-content: center; border-bottom: 1px solid #ffffff12; }
.vn-market-page .vn-hero-copy { position: relative; z-index: 2; max-width: 47rem; }
.vn-market-page .vn-hero-copy h1 { max-width: 12ch; background: var(--vn-brand); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.vn-market-page .vn-hero-art { left: 48%; display: grid; grid-template-columns: repeat(3,minmax(10rem,1fr)); gap: .6rem; padding: 1.5rem 1.5rem 1.5rem 0; transform: rotate(2deg) scale(1.04); transform-origin: center; }
.vn-market-page .vn-hero-art img { width: 100%; border: 1px solid #ffffff18; border-radius: .8rem; opacity: .68; box-shadow: 0 1.5rem 3rem #0008; }
.vn-market-page .vn-hero-art img:nth-child(3n+2) { transform: translateY(-1.4rem); }
.vn-market-page .vn-hero-art img:nth-child(n+7) { display: none; }
.vn-market-page .vn-hero::after { background: linear-gradient(90deg,#0a0710 0%,#0a0710f5 38%,#0a071099 61%,#0a0710d6 100%),radial-gradient(circle at 75% 35%,rgba(255,158,67,.24),transparent 34rem); }
.vn-hero-proof { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.vn-hero-proof span { padding: .3rem .65rem; border: 1px solid #ffffff20; border-radius: 999px; background: #ffffff09; color: #d5ced9; font-size: .75rem; font-weight: 700; }
.vn-market-page .vn-market > h2 { font-size: clamp(2rem,4vw,3rem); }
.vn-market-page .vn-market-controls { border-color: #ff9e4329; background: linear-gradient(135deg,#ff9e430d,#d94b860b),#ffffff06; }

.vn-library h2 {
  background: var(--vn-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.vn-library-note, .vn-market-status, .vn-card-hook { color: var(--vn-ink-dim); }
.vn-note-more { font-size: .84rem; color: #9b93aa; max-width: 90ch; }
.vn-note-more summary { cursor: pointer; color: var(--vn-orange); }
.vn-note-more p { margin: .5rem 0 0; }
.vn-market-controls { background: #ffffff08; border-color: #ffffff1a; }
.vn-field input, .vn-field select { background: #150e1c; border-color: #ffffff26; }
.vn-field input:focus, .vn-field select:focus { outline: 2px solid var(--vn-orange); outline-offset: 1px; }

/* Featured rail runs to both edges instead of stopping at the text column. */
.vn-featured-row {
  padding: .35rem max(1.25rem, calc(50vw - 780px)) .75rem;
  /* Without matching scroll padding the snap points align to the scrollport edge
     and the rail parks itself 20px in, clipping the first poster. */
  scroll-padding-inline: max(1.25rem, calc(50vw - 780px));
  gap: 1rem;
}
.vn-featured-card { flex: 0 0 clamp(9rem, 14vw, 13rem); }
.vn-featured-link .vn-cover { box-shadow: 0 1rem 2.4rem #00000073; }
.vn-featured-link:hover .vn-cover { transform: translateY(-3px); }

/* Poster grid: art edge to edge inside each card, copy underneath. */
.vn-poster-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem 1.25rem; }
.vn-poster-card {
  padding: 0;
  gap: .55rem;
  background: #ffffff08;
  border-color: #ffffff14;
  overflow: hidden;
}
.vn-poster-card > *:not(.vn-cover) { padding-inline: .9rem; }
.vn-poster-card > .vn-cover {
  border: 0;
  border-radius: 0;
  aspect-ratio: 4/5;
  margin-bottom: .35rem;
}
.vn-poster-card > .vn-cover img { transition: transform .35s ease; }
.vn-poster-card:hover > .vn-cover img { transform: scale(1.04); }
.vn-poster-card > .vn-card-actions { padding-bottom: 1rem; margin-top: .4rem; }
.vn-poster-card h3 { font-size: 1.05rem; }
.vn-poster-card .vn-card-hook {
  font-size: .86rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vn-poster-card .vn-card-flags { font-size: .72rem; color: #8d8599; }
/* Some novels carry 15 tags. Two rows is enough to characterise one; the rest
   are still on the listing page. */
.vn-poster-card .vn-card-tags { max-height: 3.5rem; overflow: hidden; }
.vn-cover { box-shadow: none; transition: transform .25s ease; }
.vn-cover-flag { background: linear-gradient(transparent, #0a0710cc); padding: 1.2rem .4rem .3rem; bottom: 0; left: 0; right: 0; }

@media (max-width: 700px) {
  .vn-landing { width: calc(100% - 1.5rem); gap: 1.75rem; }
  .vn-hero { min-height: 26rem; padding-inline: 1rem; }
  .vn-hero-art img:nth-child(n+4) { display: none; }
  .vn-featured-row { padding-inline: 1rem; }
  .vn-poster-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 1.1rem .75rem; }
  .vn-poster-card > *:not(.vn-cover) { padding-inline: .65rem; }
  .vn-market-page .vn-hero { min-height: min(80svh, 42rem); align-content: end; }
  .vn-market-page .vn-hero-art { inset: 0; display: flex; gap: 0; padding: 0; transform: none; }
  .vn-market-page .vn-hero-art img { flex: 1 1 0; min-width: 0; border: 0; border-radius: 0; opacity: .62; transform: none !important; box-shadow: none; }
  .vn-market-page .vn-hero-art img:nth-child(n+4) { display: none; }
  .vn-market-page .vn-hero::after { background: linear-gradient(180deg,#0a07104d 0%,#0a07102e 27%,#0a0710c4 60%,#0a0710 100%),linear-gradient(100deg,rgba(255,158,67,.16),rgba(217,75,134,.16)); }
  .vn-market-page .vn-hero-copy h1 { max-width: 14ch; font-size: clamp(2.65rem,11.5vw,4rem); }
  .vn-market-page .vn-hero-copy > p:not(.vn-kicker) { max-width: 30ch; }
  .vn-hero-proof { display: none; }
}

/* Listing detail: the 1560px shell is right for a poster grid and far too wide for
   one column of prose, so this page keeps a reading measure and pairs the
   sections up instead of running a single narrow column down the left. */
.vn-listing-page .vn-landing { width: min(1240px, calc(100% - 2.5rem)); }
.vn-listing-card { background: #ffffff08; border-color: #ffffff14; }
.vn-listing-head { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.75rem; }
.vn-cover-large { max-width: 20rem; }
.vn-listing-summary h1 {
  background: var(--vn-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.vn-listing-section h2 { color: var(--vn-orange); }
.vn-listing-section { border-top-color: #ffffff1a; }
.vn-play-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem;
  border: 1px solid #ffb5524d;
  border-radius: .8rem;
  background: linear-gradient(135deg, #ff9e4317, #d94b861c);
}
.vn-play-card > div { display: grid; gap: .1rem; }
.vn-play-card strong { color: var(--vn-warm); font-size: .95rem; }
.vn-play-card span { color: #c8c1d1; font-size: .78rem; line-height: 1.35; }
.vn-play-card .vn-button { flex: 0 0 auto; text-align: center; }
.vn-listing-notice { display: block; }
.vn-listing-notice > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.vn-listing-notice > summary::-webkit-details-marker { display: none; }
.vn-listing-notice > summary span { color: var(--vn-orange); font-weight: 800; }
.vn-listing-notice > summary small { color: #aaa2b6; font-size: .76rem; font-weight: 600; }
.vn-listing-notice > summary::after { content: "+"; color: var(--vn-orange); font-size: 1.25rem; line-height: 1; }
.vn-listing-notice[open] > summary::after { content: "−"; }
.vn-listing-notice-body { display: grid; gap: .5rem; padding-top: .75rem; }
@media (min-width: 900px) {
  .vn-listing-card { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.25rem; align-items: start; }
  .vn-listing-head { grid-column: 1 / -1; }
}

/* Embedded in the netwrck site chrome: the VN surface is a dark theatre slab
   under the site header, not a page of its own. Everything the standalone
   pages put on <body class="vn-site"> now lives on a wrapper div. */
.vn-embedded {
  display: block;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  min-height: 60vh;
}
#mainbody:has(> .vn-embedded) { background: #0a0710; }
.vn-subnav {
  border-bottom: 1px solid #ffffff14;
  background: #0a0710d9;
  backdrop-filter: blur(14px);
}
.vn-subnav-inner {
  width: min(1560px, calc(100% - 2.5rem));
  margin: auto;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  min-height: 3.25rem;
  flex-wrap: wrap;
}
.vn-subnav-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 800 1rem/1 inherit;
  letter-spacing: -.03em;
  text-decoration: none;
  padding: .5rem 0;
}
.vn-subnav-brand img { width: 26px; height: 26px; display: block; }
.vn-subnav-brand span {
  background: var(--vn-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vn-subnav-links {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.vn-subnav-links::-webkit-scrollbar { display: none; }
.vn-subnav-links a {
  padding: .45rem .7rem;
  border-radius: .5rem;
  font: 600 .86rem inherit;
  color: #cfc7d8;
  text-decoration: none;
  white-space: nowrap;
}
.vn-subnav-links a:hover { background: #ffffff12; color: #fff; }
.vn-subnav-links a[aria-current="page"] {
  background: #ffffff14;
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--vn-orange);
}
.vn-embedded .vn-landing { padding-top: clamp(1rem, 3vw, 2rem); }
/* The hero and the featured rail break out of the reading column. 100vw is the
   viewport including the scrollbar, and the site chrome scrolls .mdl-layout
   rather than the document, so vw overshot by the scrollbar width and pushed
   the page sideways. cqw measures the VN slab itself. */
.vn-embedded { container-type: inline-size; }
.vn-embedded .vn-full-bleed,
.vn-embedded .vn-hero,
.vn-embedded .vn-featured-row {
  width: 100cqw;
  max-width: 100cqw;
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
}
.vn-embedded .vn-hero { border-radius: 0; }
/* base.pongo's stylesheet sets a monospace stack on html/body, a serif on <main>
   and a 20px type scale on <p>. None of that fits a dense poster grid, so the VN
   slab restates its own type inside the site chrome. */
.vn-embedded,
.vn-embedded main,
.vn-embedded *:not(code):not(pre):not(kbd):not(samp) {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.vn-embedded code, .vn-embedded pre, .vn-embedded kbd, .vn-embedded samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vn-embedded { font-size: 16px; line-height: 1.55; font-weight: 400; text-align: left; }
.vn-embedded .vn-cover-text, .vn-embedded .vn-cover-flag { text-align: center; }
/* Full-width site chrome makes the standalone hero scale read as shouting. */
.vn-embedded .vn-intro h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -.04em; }
.vn-embedded .vn-market-intro h1 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
.vn-embedded .vnd-layout main h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.vn-embedded .vn-intro p, .vn-embedded .vn-hero-copy > p:not(.vn-kicker) { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.vn-embedded .vnd-summary { font-size: 1.15rem; }
.vn-embedded p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  font-weight: 400;
  margin: 0 0 .5rem;
}
.vn-embedded .vn-landing > * p:last-child { margin-bottom: 0; }
.vn-embedded h1, .vn-embedded h2, .vn-embedded h3 { font-weight: 800; line-height: 1.1; }
.vn-embedded .vn-intro h1, .vn-embedded .vn-hero-copy h1 { line-height: .98; }
.vn-embedded ul, .vn-embedded ol { font-size: inherit; }
/* base.pongo sets html{font-size:18px}, so every rem in the standalone VN sheet
   lands 12.5% wider inside the site chrome - enough to drop the mobile poster
   grid from two columns to one. The tracks that decide the layout are px here. */
.vn-embedded .vn-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.vn-embedded .vn-poster-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
.vn-embedded .vn-featured-card { flex: 0 0 clamp(140px, 13vw, 196px); }
/* The listing detail is one card, not a grid of them, and out-specifies the rule above. */
.vn-embedded .vn-listing-body { grid-template-columns: 1fr; }
.vn-embedded .vn-listing-head { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }

@media (max-width: 700px) {
  .vn-subnav-inner { width: calc(100% - 1.5rem); gap: .4rem; padding: .35rem 0 .5rem; }
  .vn-subnav-links { margin-left: 0; width: 100%; flex-wrap: wrap; gap: .2rem; }
  .vn-subnav-links a { padding: .4rem .55rem; font-size: .82rem; }
  .vn-embedded .vn-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .vn-embedded .vn-poster-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: 18px 12px; }
  /* Two columns leave ~150px of card. Chips that wrap one per line there turn a
     poster grid into a wall of pills, so the small cards keep the numbers and
     drop the taxonomy - the listing page still carries all of it. */
  .vn-embedded .vn-poster-card .vn-card-meta,
  .vn-embedded .vn-poster-card .vn-card-tags { display: none; }
  .vn-embedded .vn-poster-card .vn-card-stats { max-height: 3.6em; overflow: hidden; }
  .vn-embedded .vn-poster-card .vn-card-stats li { font-size: .68rem; }
  .vn-embedded .vn-listing-head { grid-template-columns: 1fr; }
}

/* Browse wall: a masonry of covers at their own aspect ratio. The catalog art is
   all 3:4 today, but an author's listing poster is whatever they uploaded, and a
   fixed 4/5 crop either cuts their art or leaves a ragged grid row. Columns pack
   mixed heights with no gaps; the trade is column-major reading order, which is
   what a browse wall wants anyway. */
@media (min-width: 900px) {
  .vn-embedded .vn-poster-grid {
    display: block;
    column-width: 15rem;
    column-gap: 14px;
  }
  .vn-embedded .vn-poster-card {
    break-inside: avoid;
    margin: 0 0 14px;
    display: grid;
  }
  .vn-embedded .vn-poster-card > .vn-cover {
    aspect-ratio: var(--vn-ar, 3/4);
  }
  /* The hero was sized for a page with no site chrome above it. */
  .vn-embedded .vn-hero { min-height: min(46vh, 26rem); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
}
@media (min-width: 1500px) {
  .vn-embedded .vn-poster-grid { column-width: 13.5rem; }
}
.vn-embedded .vn-poster-card > .vn-cover { aspect-ratio: var(--vn-ar, 3/4); }

/* A browse card is a poster with just enough to choose by: title, hook, three
   numbers, the notice count and the two actions. Genre, period and tags are a
   taxonomy - they belong on the listing page, and on a card they tripled its
   height and pushed the art off the screen. */
.vn-embedded .vn-poster-card .vn-card-meta,
.vn-embedded .vn-poster-card .vn-card-tags { display: none; }
.vn-embedded .vn-poster-card .vn-card-stats li:nth-child(n+4) { display: none; }
.vn-embedded .vn-poster-card .vn-card-hook { -webkit-line-clamp: 2; margin-bottom: .1rem; }
.vn-embedded .vn-poster-card .vn-card-warnings { font-size: .74rem; }
.vn-embedded .vn-poster-card .vn-card-flags { font-size: .7rem; }
.vn-embedded .vn-poster-card .vn-card-actions .vn-button { padding: .4rem .65rem; font-size: .78rem; }
@media (min-width: 900px) {
  .vn-embedded .vn-poster-grid { column-width: 14rem; }
}

/* Portrait phones. A 16:9 stage in a 390x844 window is 219px tall, and centring
   it left ~300px of dead black above and below while the dialogue was crammed
   into the bottom of the stage. The stage goes to the top and the space that was
   empty becomes the reading area, which is how a visual novel reads on a phone. */
@media (orientation: portrait) and (max-width: 760px) {
  .vn-play { align-content: start; }
  .vn-play .vn-player-shell { width: 100vw; height: 56.25vw; box-shadow: none; }
  .vn-play .vn-dialogue {
    position: fixed;
    inset: calc(56.25vw + .75rem) .75rem calc(3.85rem + env(safe-area-inset-bottom)) .75rem;
    overflow: auto;
    padding: 1rem 1rem 1.25rem;
    background: #11101bf2;
    border: 1px solid #ffffff24;
    border-radius: .85rem;
    box-shadow: 0 .8rem 2.5rem #0006;
  }
  .vn-play .vn-dialogue p { font-size: 1.08rem; line-height: 1.62; }
  .vn-play .vn-dialogue strong { font-size: 1rem; }
  .vn-play .vn-choices {
    position: fixed;
    inset: auto .75rem calc(3.25rem + env(safe-area-inset-bottom)) .75rem;
    max-height: calc(100dvh - 56.25vw - 6rem);
    overflow: auto;
  }
  .vn-play .vn-controls {
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #0a0710;
    border-top: 1px solid #ffffff14;
    gap: .35rem;
    padding: .45rem .5rem max(.45rem, env(safe-area-inset-bottom));
    overflow: visible;
  }
  .vn-play .vn-controls button { min-height: 2.65rem; padding: .45rem .3rem; font-size: .78rem; }
  .vn-play .vn-controls button[data-vn-action="save"] { color: #1b0d14; background: var(--vn-brand); border-color: transparent; font-weight: 800; }
  .vn-play .vn-controls button[data-vn-action="fullscreen"] { display: none; }
  .vn-play .vn-notice {
    position: fixed;
    inset: calc(56.25vw + .6rem) .75rem calc(3.85rem + env(safe-area-inset-bottom)) .75rem;
    width: auto;
    max-height: none;
    padding: 1rem;
    font-size: .88rem;
    line-height: 1.4;
  }
  .vn-play .vn-notice:not([open]) {
    inset: calc(56.25vw + .6rem) .75rem auto .75rem;
    max-height: 3.25rem;
    overflow: hidden;
  }
  .vn-play[data-vn-started="true"] .vn-notice:not([open]) { display: none; }
  .vn-play .vn-dialogue { padding-bottom: 1.25rem; }
  .vn-play .vn-save-state {
    position: fixed;
    z-index: 8;
    right: .65rem;
    bottom: calc(3.65rem + env(safe-area-inset-bottom));
    max-width: calc(100vw - 1.3rem);
  }
}

.vn-notice > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; }
.vn-choices {
  padding: .65rem;
  border: 1px solid rgba(255, 203, 102, .58);
  border-radius: .9rem;
  background: rgba(255, 248, 246, .76);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 .8rem 2rem rgba(32, 8, 22, .30);
}
.vn-choices button {
  border-color: rgba(217, 75, 134, .34);
  background: rgba(255, 255, 255, .72);
  color: #351120;
  box-shadow: 0 .2rem .65rem rgba(102, 25, 59, .12);
}
.vn-choices button:hover,
.vn-choices button:focus-visible,
.vn-choices button.vn-input-focus {
  border-color: rgba(217, 75, 134, .76);
  background: linear-gradient(135deg, rgba(255, 203, 102, .88), rgba(255, 158, 67, .84) 48%, rgba(217, 75, 134, .84));
  color: #351120;
  outline: 3px solid rgba(255, 255, 255, .82);
  outline-offset: 2px;
}
.vn-notice > summary small { color: #9da9d5; font-size: .7rem; font-weight: 600; }
.vn-notice-close { margin-top: .6rem; }
.vn-save-state { position: absolute; z-index: 8; right: .7rem; bottom: 3.3rem; padding: .28rem .55rem; border: 1px solid #ffffff1a; border-radius: 999px; background: #070a13e8; color: #bfc5d8; font-size: .7rem; pointer-events: none; opacity: 0; transform: translateY(.25rem); transition: opacity .15s, transform .15s; }
.vn-save-state[data-visible="true"] { opacity: 1; transform: none; }
.vn-paywall { width: min(30rem, calc(100% - 1.5rem)); border: 1px solid #ffb55259; border-radius: 1rem; background: #110d18; color: #f6f7fb; padding: 1.15rem; box-shadow: 0 2rem 6rem #000c; }
.vn-paywall::backdrop { background: #030207d9; backdrop-filter: blur(4px); }
.vn-paywall-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vn-paywall-head h2 { margin: 0; color: var(--vn-warm); font-size: 1.2rem; }
.vn-paywall-head button { border: 0; background: transparent; color: #b9b3c6; padding: .5rem; cursor: pointer; }
.vn-paywall p { line-height: 1.5; }
.vn-paywall-price { display: grid; gap: .4rem; padding: .75rem; border: 1px solid #ffffff1a; border-radius: .7rem; background: #ffffff08; color: #fff; font-weight: 700; }
.vn-paywall-price:empty { display: none; }
.vn-paywall-note { color: #b9b3c6; font-size: .82rem; }
.vn-paywall-actions { display: flex; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }

@media (max-width: 760px) {
  .vn-listing-page .vn-landing { width: calc(100% - 1rem); }
  .vn-listing-page .vn-listing-card { padding: .75rem; border-radius: .85rem; }
  .vn-embedded .vn-listing-head { grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; }
  .vn-listing-page .vn-cover-large { width: 7rem; max-width: 7rem; }
  .vn-listing-page .vn-listing-icon { display: none; }
  .vn-listing-page .vn-listing-summary { gap: .45rem; min-width: 0; }
  .vn-listing-page .vn-listing-summary h1 { font-size: clamp(1.35rem, 7vw, 1.8rem); }
  .vn-listing-page .vn-listing-tagline { font-size: .88rem; line-height: 1.4; }
  .vn-listing-page .vn-play-card { display: grid; gap: .55rem; padding: .65rem; }
  .vn-listing-page .vn-play-card span { font-size: .7rem; }
  .vn-listing-page .vn-play-card .vn-button { width: 100%; padding: .58rem .65rem; }
  .vn-listing-page .vn-card-stats { grid-column: 1 / -1; }
  .vn-listing-page .vn-listing-plays,
  .vn-listing-page .vn-card-meta,
  .vn-listing-page .vn-card-tags,
  .vn-listing-page .vn-card-flags { grid-column: 1 / -1; }
  .vn-listing-page .vn-card-actions { grid-column: 1 / -1; }
  .vn-listing-page .vn-listing-section { padding: .85rem; border: 1px solid #ffffff18; border-radius: .75rem; background: #ffffff05; }
  .vn-listing-notice > summary { gap: .5rem; }
  .vn-listing-notice > summary small { margin-left: auto; text-align: right; }
  .vn-paywall-actions > * { flex: 1 1 9rem; text-align: center; }
}