/* Novel2Gal editorial art direction: light-novel desk × professional VN studio. */
:root {
  color-scheme: dark;
  --bg-0: #0b1020;
  --bg-1: #0b1020;
  --bg-2: #0b1020;
  --panel-strong: #11172a;
  --panel-base: #141a2d;
  --panel-soft: #1a2137;
  --paper: #f4eee6;
  --paper-deep: #e7ddd2;
  --paper-ink: #2d2a31;
  --primary: #f07896;
  --primary-strong: #d85e7b;
  --secondary: #9c91b0;
  --secondary-strong: #7f7396;
  --accent: #e4c56a;
  --success: #63cfc4;
  --danger: #e76f7f;
  --border-soft: rgba(244, 238, 230, .11);
  --border-active: rgba(99, 207, 196, .62);
  --text-main: #f6f0e9;
  --text-secondary: rgba(246, 240, 233, .72);
  --text-muted: rgba(246, 240, 233, .48);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-panel: 0 12px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
  --glow-primary: none;
  --glow-secondary: none;
}

html,
body { background: #0b1020; }
body { font-family: Inter, ui-sans-serif, "Noto Sans SC", "Microsoft YaHei", sans-serif; }
h1, h2, h3, .brand-copy strong, .volume-cover-title { font-family: ui-serif, "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; }
body::selection { color: #221d23; background: #f2a2b6; }

.ambient-backdrop { background: #0b1020; }
.ambient-grid { opacity: .12; background-size: 64px 64px; mask-image: none; }
.ambient-noise { opacity: .018; }
.ambient-orb, .ambient-canvas { display: none !important; }

.glass-panel,
.panel {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #141a2d;
  box-shadow: var(--shadow-panel);
  backdrop-filter: none;
}

.anime-button,
.landing-button {
  min-height: 40px;
  border-radius: 7px;
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.anime-button::before,
.landing-button::before,
.button-ripple { display: none !important; }
.anime-button:hover,
.landing-button:hover { transform: translateY(-2px); }
.anime-button:active,
.landing-button:active { transform: translateY(1px); }
.anime-button--primary {
  border-color: #f07896;
  color: #231922;
  background: #f07896;
  box-shadow: none;
}
.anime-button--primary:hover { border-color: #f49ab0; background: #f49ab0; }
.anime-button--ghost {
  border-color: rgba(244, 238, 230, .17);
  color: var(--text-main);
  background: transparent;
}
.anime-button--ghost:hover { border-color: rgba(244, 238, 230, .36); background: rgba(244, 238, 230, .05); box-shadow: none; }
.status-badge {
  border-color: rgba(99, 207, 196, .3);
  border-radius: 3px;
  color: #8edbd3;
  background: rgba(99, 207, 196, .07);
  letter-spacing: 0;
}

input, textarea, select { border-radius: 7px; color: var(--text-main); background: #0e1426; }
input:focus, textarea:focus, select:focus { border-color: #63cfc4; background: #0e1426; box-shadow: 0 0 0 2px rgba(99, 207, 196, .12); }
:where(a, button, input, textarea, select):focus-visible { outline-color: #63cfc4; }

/* Header */
.site-header,
.site-header.is-scrolled {
  min-height: 70px;
  border-bottom-color: rgba(244, 238, 230, .1);
  padding-block: 9px;
  background: #0e1426;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  backdrop-filter: none;
}
.brand-logo { width: 42px; height: 42px; filter: none; }
.brand-copy strong { font-size: 19px; letter-spacing: -.02em; }
.brand-copy strong span { color: #f07896; }
.brand-copy small { color: var(--text-muted); letter-spacing: .05em; }
.site-nav a { padding-block: 11px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.site-nav a::after { right: 50%; bottom: 1px; left: 50%; height: 2px; background: #f07896; box-shadow: none; }
.site-nav a:hover::after,
.site-nav a.active::after { right: 16%; left: 16%; }
.recent-project__dot { width: 6px; height: 6px; background: #63cfc4; box-shadow: none; }
.recent-project small { color: var(--text-muted); font-size: 8px; letter-spacing: .04em; }
.icon-button { border-radius: 7px; background: transparent; }
.icon-button:hover { border-color: rgba(244, 238, 230, .3); color: #f4eee6; }
.header-cta { border-color: #e4c56a; color: #211e18; background: #e4c56a; }
.header-cta:hover { border-color: #edcf7b; background: #edcf7b; }
#runButton, #runButton:hover { border-color: #e4c56a; color: #211e18; background: #e4c56a; box-shadow: none; filter: none; }

.chapter-ribbon,
.paper-tab {
  display: inline-flex;
  width: max-content;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px 5px 12px;
  border-left: 3px solid #f07896;
  border-radius: 2px 5px 5px 2px;
  color: #4b3840;
  background: #f1dce0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.paper-tab--gold { border-left-color: #b5963d; color: #4a3e24; background: #efe3b8; }
.text-action { color: #f39ab0; font-size: 12px; font-weight: 750; text-decoration: none; }
.text-action:hover { color: #f7b1c2; }

/* Homepage */
.home-editorial { width: min(1500px, 100%); margin: 0 auto; padding: clamp(28px, 4vw, 58px); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .72fr); gap: clamp(18px, 2vw, 30px); align-items: stretch; }
.home-main-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, 1.05fr) minmax(300px, .8fr);
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(244, 238, 230, .13);
  border-radius: 10px;
  background: #141a2d;
  box-shadow: var(--shadow-panel);
}
.home-main-feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #f07896; }
.home-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: start; padding: clamp(42px, 5vw, 78px) 12px clamp(38px, 4vw, 64px) clamp(38px, 5vw, 76px); }
.home-copy h1 { margin: 28px 0 20px; font-size: clamp(48px, 5vw, 78px); font-weight: 720; letter-spacing: -.055em; line-height: 1.08; }
.home-copy h1 em { color: #f3a0b5; font-style: normal; }
.home-lead { max-width: 570px; color: var(--text-secondary); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.9; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.home-actions .anime-button { min-height: 46px; padding-inline: 20px; text-decoration: none; }
.home-actions i { margin-left: 13px; font-style: normal; }
.home-dialogue {
  position: relative;
  width: min(570px, calc(100% + 42px));
  min-height: 112px;
  margin-top: auto;
  border: 1px solid rgba(244, 238, 230, .3);
  border-radius: 5px;
  padding: 26px 32px 22px;
  color: #fffaf3;
  background: rgba(8, 13, 27, .94);
  box-shadow: 0 14px 24px rgba(0,0,0,.28), inset 4px 0 #f07896;
}
.home-dialogue strong { position: absolute; top: -17px; left: 20px; min-width: 86px; padding: 7px 18px; border-radius: 3px; color: #281b22; background: #f07896; text-align: center; }
.home-dialogue p { min-height: 47px; color: rgba(255,250,243,.88); line-height: 1.75; }
.home-dialogue > span { position: absolute; right: 16px; bottom: 10px; color: #e4c56a; font-size: 8px; }
.home-character-stage { position: relative; min-width: 0; overflow: hidden; background: #e8dfd7; }
.home-character-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(65,50,55,.04) 0 1px, transparent 1px 6px); }
.home-character-stage img { position: absolute; z-index: 4; right: -5%; bottom: -3%; width: min(430px, 120%); max-height: 96%; object-fit: contain; object-position: bottom center; filter: drop-shadow(-16px 22px 20px rgba(36, 25, 31, .2)); transform: translate(var(--parallax-x, 0), var(--parallax-y, 0)); animation: character-breathe 6s ease-in-out infinite; transition: transform .3s ease-out; }
.story-sheet { position: absolute; z-index: 2; border: 1px solid rgba(58,45,50,.17); border-radius: 2px; background: #f7f2eb; box-shadow: 0 10px 24px rgba(50,36,42,.15); }
.story-sheet--back { top: 9%; right: -12%; width: 92%; height: 54%; transform: rotate(5deg); }
.story-sheet--back span { position: absolute; top: 18px; left: 24px; color: rgba(45,42,49,.4); font: 700 11px ui-monospace, monospace; letter-spacing: .16em; }
.story-sheet--front { top: 18%; right: -18%; width: 100%; height: 50%; transform: rotate(-3deg); }
.story-sheet--front i { display: block; width: 70%; height: 1px; margin: 28px 0 0 28px; background: rgba(45,42,49,.14); }
.character-caption { position: absolute; z-index: 5; right: 16px; bottom: 16px; padding: 6px 9px; border-radius: 2px; color: #45383e; background: rgba(244,238,230,.88); font-size: 10px; font-weight: 700; }
.home-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.home-side-card { position: relative; display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(244,238,230,.12); border-radius: 8px; padding: 22px; background: #11172a; box-shadow: var(--shadow-panel); }
.home-side-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-side-card header a { color: var(--text-muted); font-size: 11px; text-decoration: none; }
.recent-cover { display: flex; align-items: end; min-height: 112px; margin: 20px 0 18px; border: 1px solid rgba(244,238,230,.14); border-radius: 5px; padding: 14px; color: rgba(244,238,230,.52); background: #1b2236; }
.recent-cover.has-project { align-items: center; justify-content: center; flex-direction: column; border-left: 4px solid #63cfc4; background: #1b2433; }
.recent-cover.has-project span { color: #f4eee6; font: 700 32px ui-serif, serif; }
.recent-cover.has-project small { color: var(--text-muted); }
.home-side-card h2 { margin: 0 0 8px; font-size: clamp(20px, 2vw, 27px); }
.home-side-card p { color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.recent-progress { display: flex; align-items: center; gap: 9px; margin: 18px 0 13px; }
.recent-progress > span { height: 3px; flex: 1; overflow: hidden; background: rgba(244,238,230,.13); }
.recent-progress i { display: block; height: 100%; background: #63cfc4; }
.recent-progress small { color: var(--text-muted); font-size: 10px; }
.home-side-card .text-action { margin-top: auto; }
.home-recommend { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto 1fr auto; gap: 15px; }
.home-recommend > .paper-tab { grid-column: 1 / -1; }
.recommend-cover { position: relative; display: grid; min-height: 148px; place-items: center; overflow: hidden; border-radius: 3px 7px 7px 3px; color: #f2eadf; background: #536777; box-shadow: -5px 0 #c9b4ad, 0 12px 20px rgba(0,0,0,.22); }
.recommend-cover::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(244,238,230,.35); }
.recommend-cover span { z-index: 1; font: 700 34px ui-serif, serif; }
.recommend-cover i { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 48px; border-radius: 50% 50% 20% 20%; background: #f1cad3; opacity: .75; }
.home-recommend .text-action { grid-column: 1 / -1; }
.home-workflow { display: grid; grid-template-columns: minmax(220px,.55fr) 1.45fr; gap: 34px; margin-top: 28px; border-top: 1px solid rgba(244,238,230,.12); border-bottom: 1px solid rgba(244,238,230,.12); padding: 30px 0; }
.home-workflow header span { font: 700 clamp(21px,2vw,30px) ui-serif, "Noto Serif SC", serif; }
.home-workflow header p { margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.home-workflow ol { display: grid; grid-template-columns: repeat(4,1fr); }
.home-workflow li { display: grid; gap: 5px; border-left: 1px solid rgba(244,238,230,.12); padding: 2px 18px; }
.home-workflow b { color: #f07896; font: 700 10px ui-monospace, monospace; }
.home-workflow strong { font-size: 13px; }
.home-workflow span { color: var(--text-muted); font-size: 10px; }

/* Template bookshelf */
.library-main { width: min(1450px, 100%); padding: clamp(28px,4vw,56px); }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; border-bottom: 1px solid rgba(244,238,230,.12); padding: 14px 0 30px; }
.library-heading-copy { display: grid; gap: 14px; }
.library-heading h1 { font-size: clamp(34px,4vw,56px); letter-spacing: -.04em; }
.library-heading p { color: var(--text-secondary); }
.library-toolbar--editorial { min-width: min(410px, 100%); padding: 0; }
.bookmark-filters { display: flex; align-items: end; gap: 5px; overflow-x: auto; padding: 0 6px; }
.bookmark-filters button { min-width: max-content; border: 0; border-top: 3px solid transparent; border-radius: 0 0 5px 5px; padding: 13px 18px 12px; color: #51464b; background: #d8cec5; font-size: 12px; font-weight: 700; transform: translateY(-1px); transition: padding .16s ease, background .16s ease; }
.bookmark-filters button:nth-child(2n) { background: #cadbd8; }
.bookmark-filters button:nth-child(3n) { background: #e8d6da; }
.bookmark-filters button:hover,
.bookmark-filters button.active { border-top-color: #f07896; padding-top: 17px; color: #2e282b; background: #f4eee6; }
.bookshelf-label { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 16px; color: var(--text-secondary); }
.bookshelf-label span { font: 700 19px ui-serif, serif; }
.bookshelf-label small { color: var(--text-muted); }
.template-bookshelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 18px; }
.template-volume { position: relative; display: grid; grid-template-rows: 318px 1fr; min-width: 0; overflow: hidden; border: 1px solid rgba(244,238,230,.12); border-radius: 6px; background: #11172a; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.template-volume--featured { grid-column: span 2; grid-template-columns: minmax(250px,.85fr) 1.15fr; grid-template-rows: minmax(430px,1fr); }
.volume-cover { position: relative; display: flex; flex-direction: column; align-items: start; justify-content: end; min-width: 0; overflow: hidden; border: 0; border-radius: 0; padding: 28px 24px; color: #fff; background-color: #596675; background-image: linear-gradient(0deg, rgba(10,13,22,.84), rgba(10,13,22,.04) 68%), var(--template-art); background-position: center; background-size: cover; text-align: left; transition: background-size .25s ease, transform .25s ease; }
.volume-cover:hover { transform: translateY(-2px); background-size: 102%; }
.volume-binding { position: absolute; inset: 0 auto 0 0; width: 10px; border-right: 1px solid rgba(255,255,255,.18); background: rgba(20,14,20,.4); }
.volume-issue { position: absolute; top: 18px; right: 16px; padding: 5px 8px; color: #40352f; background: #f4eee6; font-size: 9px; font-weight: 800; }
.volume-cover-title { position: relative; z-index: 1; max-width: 12ch; font-size: 27px; font-weight: 750; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.volume-cover-category { position: relative; z-index: 1; margin-top: 9px; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .1em; }
.volume-copy { display: flex; flex-direction: column; align-items: start; padding: 22px; }
.volume-copy h2 { margin: 16px 0 9px; font-size: 23px; }
.volume-copy > p { color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.volume-copy > small { margin-top: 10px; color: var(--text-muted); }
.volume-meta { display: grid; grid-template-columns: repeat(4,1fr); width: 100%; margin: 20px 0; border-top: 1px solid rgba(244,238,230,.1); border-bottom: 1px solid rgba(244,238,230,.1); }
.volume-meta div { display: grid; gap: 3px; padding: 10px 7px; border-left: 1px solid rgba(244,238,230,.08); }
.volume-meta div:first-child { border-left: 0; }
.volume-meta dt { color: var(--text-muted); font-size: 9px; }
.volume-meta dd { margin: 0; color: var(--text-main); font-size: 11px; font-weight: 700; }
.volume-copy footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; }
.volume-copy footer > span { color: var(--text-muted); font-size: 10px; }
.template-volume--private::after { content: "私人"; position: absolute; z-index: 3; top: 12px; left: -24px; width: 90px; padding: 4px; color: #31292d; background: #e4c56a; font-size: 9px; font-weight: 900; text-align: center; transform: rotate(-42deg); }
.genre-romance .paper-tab { background: #f1dce0; }
.genre-mystery .paper-tab { border-left-color: #688a9d; background: #d7e0e4; }
.genre-fantasy .paper-tab { border-left-color: #8d82a4; background: #ddd7e7; }
.genre-healing .paper-tab { border-left-color: #63a89f; background: #d4e5e0; }
.genre-dark .paper-tab { border-left-color: #8f6370; background: #d8c5cb; }

/* Project save slots */
.projects-hero--editorial { align-items: end; border-bottom: 1px solid rgba(244,238,230,.12); padding: 14px 0 30px; }
.projects-hero--editorial h1 { margin: 15px 0 8px; font-size: clamp(36px,4vw,58px); }
.project-stats { gap: 0; overflow: hidden; border: 1px solid rgba(244,238,230,.1); border-radius: 7px; background: #11172a; }
.project-stats article { border: 0; border-left: 1px solid rgba(244,238,230,.09); border-radius: 0; background: transparent; box-shadow: none; }
.project-stats article:first-child { border-left: 0; }
.project-stats small { color: var(--text-muted); letter-spacing: .04em; }
.project-toolbar { display: grid; grid-template-columns: minmax(260px,1fr) auto auto auto; align-items: center; gap: 14px; border-bottom: 1px solid rgba(244,238,230,.11); border-radius: 0; padding: 10px 0 18px; background: transparent; box-shadow: none; }
.project-view-toggle { display: flex; overflow: hidden; border: 1px solid rgba(244,238,230,.15); border-radius: 6px; }
.project-view-toggle button { width: 38px; height: 36px; border: 0; border-left: 1px solid rgba(244,238,230,.1); border-radius: 0; color: var(--text-muted); background: transparent; }
.project-view-toggle button:first-child { border-left: 0; }
.project-view-toggle button.active { color: #261d21; background: #e4c56a; }
.project-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.save-slot { position: relative; display: grid; grid-template-columns: 64px 154px minmax(0,1fr) 150px; min-height: 190px; overflow: visible; border: 1px solid rgba(244,238,230,.12); border-radius: 7px; background: #11172a; box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease; }
.save-slot:hover { z-index: 2; border-color: rgba(244,238,230,.25); transform: translateY(-2px); }
.save-slot::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #f07896; }
.save-number { display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid rgba(244,238,230,.1); color: var(--text-muted); }
.save-number span { font-size: 9px; }
.save-number strong { margin-top: 5px; color: #e4c56a; font: 700 22px ui-serif, serif; }
.save-cover { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; margin: 16px; border: 1px solid rgba(244,238,230,.14); border-radius: 4px; background: #384455; }
.save-cover::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.05) 18px 19px); }
.save-cover span { z-index: 1; color: #f4eee6; font: 700 34px ui-serif, serif; }
.save-cover small { z-index: 1; color: rgba(244,238,230,.58); }
.save-cover i { position: absolute; right: 12px; bottom: 10px; width: 32px; height: 56px; border-radius: 50% 50% 20% 20%; background: rgba(240,120,150,.7); }
.save-cover--done { background: #315b5d; }
.save-cover--running, .save-cover--queued { background: #596148; }
.save-cover--failed { background: #5b3742; }
.save-content { display: flex; flex-direction: column; min-width: 0; padding: 21px 18px 18px; }
.save-content header { display: flex; justify-content: space-between; gap: 16px; }
.save-content h2 { margin: 7px 0 4px; font-size: clamp(20px,2vw,27px); }
.save-content header p { overflow: hidden; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.save-chapter { color: #e4c56a; font: 700 12px ui-serif, serif; white-space: nowrap; }
.project-status { position: static; display: inline-flex; align-items: center; gap: 6px; color: #94dad3; background: transparent; font-size: 10px; }
.project-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: none; }
.save-meta { display: grid; grid-template-columns: repeat(4,1fr); margin-top: auto; }
.save-meta div { display: grid; gap: 4px; border-left: 1px solid rgba(244,238,230,.08); padding: 4px 12px; }
.save-meta div:first-child { border-left: 0; padding-left: 0; }
.save-meta dt { color: var(--text-muted); font-size: 9px; }
.save-meta dd { margin: 0; color: var(--text-secondary); font-size: 11px; }
.save-actions { position: relative; display: flex; justify-content: center; flex-direction: column; gap: 8px; border-left: 1px solid rgba(244,238,230,.09); padding: 20px; }
.save-actions .anime-button { width: 100%; min-height: 36px; padding: 7px 10px; }
.project-more { position: static; z-index: auto; right: auto; bottom: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: auto; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
.project-more button { border: 0; border-radius: 3px; padding: 5px 3px; color: var(--text-muted); background: transparent; font-size: 9px; }
.project-more button:hover { color: var(--text-main); background: rgba(244,238,230,.06); }
.project-progress i { background: #63cfc4; box-shadow: none; }
.project-grid[data-view="grid"] { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.project-grid[data-view="grid"] .save-slot { grid-template-columns: 46px 1fr; grid-template-rows: 160px auto auto; }
.project-grid[data-view="grid"] .save-number { grid-row: 1 / 4; }
.project-grid[data-view="grid"] .save-cover { margin: 14px 14px 0; }
.project-grid[data-view="grid"] .save-content { padding: 18px 14px; }
.project-grid[data-view="grid"] .save-meta { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 17px; }
.project-grid[data-view="grid"] .save-meta div { border: 0; padding: 0; }
.project-grid[data-view="grid"] .save-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; border-top: 1px solid rgba(244,238,230,.08); border-left: 0; padding: 12px 14px; }
.project-grid[data-view="grid"] .save-actions .anime-button { width: auto; flex: 1; }
.project-grid[data-view="grid"] .project-more { width: 100%; }
.project-empty { border: 1px solid rgba(244,238,230,.12); border-radius: 7px; background: #11172a; }
.empty-manuscript { position: relative; width: 210px; height: 150px; margin: 0 auto 20px; }
.empty-manuscript span { position: absolute; inset: 10px 45px 12px 12px; border: 1px solid #cabfb4; border-radius: 2px; background: #f4eee6; box-shadow: 8px 8px #dfd5cb; transform: rotate(-3deg); }
.empty-manuscript span::after { content: ""; position: absolute; inset: 24px; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(45,42,49,.18) 14px 15px); }
.empty-manuscript i { position: absolute; z-index: 2; right: 24px; bottom: 8px; width: 10px; height: 130px; border-radius: 5px; background: #e4c56a; transform: rotate(24deg); }
.empty-manuscript b { position: absolute; z-index: 2; right: 0; top: 18px; width: 72px; height: 92px; border: 1px solid #bdaeb4; border-radius: 3px; background: #ead8de; transform: rotate(7deg); }

/* Workbench: scene navigator × stage × inspector × performance timeline */
.workspace-page { padding-bottom: 22px; background: #0b1020; }
.project-status-bar {
  top: 70px;
  grid-template-columns: minmax(210px,.78fr) minmax(470px,1.35fr) auto;
  min-height: 66px;
  border-bottom: 1px solid rgba(244,238,230,.11);
  padding: 9px clamp(14px,2vw,30px);
  background: #11172a;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  backdrop-filter: none;
}
.project-status-title small { color: var(--text-muted); letter-spacing: .03em; }
.project-status-title strong { font-family: ui-serif, "Noto Serif SC", serif; font-size: 14px; }
.story-node { width: 7px; height: 18px; border: 0; border-radius: 1px; background: #f07896; box-shadow: none; }
.status-cluster { grid-template-columns: repeat(5,minmax(78px,1fr)); border: 0; border-radius: 5px; background: rgba(244,238,230,.08); }
.status-item { background: #0e1426; }
.status-item strong { font-size: 10px; }
.status-actions .anime-button { min-height: 34px; border-radius: 6px; }
.workspace-mobile-tabs { background: #11172a; }

.workspace {
  grid-template-columns: minmax(220px,.52fr) minmax(560px,1.55fr) minmax(280px,.7fr);
  grid-template-areas: "navigator preview inspector" "output output output";
  width: min(1880px,100%);
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: #0b1020;
}
.workspace .panel { border-radius: 7px; padding: 14px; background: #11172a; box-shadow: 0 10px 24px rgba(0,0,0,.18); backdrop-filter: none; }
.panel-head { align-items: center; margin-bottom: 13px; }
.panel-head > div { display: grid; gap: 2px; }
.panel-head small { color: var(--text-muted); font-size: 9px; letter-spacing: .04em; }
.panel-head h2 { font-size: 18px; }

.scene-navigator { position: relative; top: auto; grid-area: navigator; max-height: none; overflow: hidden; align-self: start; }
.scene-tool-button { border: 1px solid rgba(244,238,230,.15); border-radius: 5px; padding: 7px 9px; color: var(--text-secondary); background: transparent; font-size: 10px; }
.scene-nav-summary { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(244,238,230,.1); border-bottom: 1px solid rgba(244,238,230,.1); padding: 9px 1px; color: var(--text-muted); font-size: 9px; }
.scene-nav-summary strong { color: #63cfc4; font-size: 9px; }
.scene-navigator-list { display: grid; gap: 5px; max-height: 520px; overflow-y: auto; margin-top: 10px; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #343c50 transparent; }
.scene-chapter-label { position: sticky; z-index: 2; top: 0; border-left: 3px solid #e4c56a; padding: 6px 8px; color: #e6d193; background: #11172a; font: 700 10px ui-serif, serif; }
.scene-nav-item { display: grid; grid-template-columns: 52px minmax(0,1fr) 12px; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; border-radius: 5px; padding: 6px; color: var(--text-secondary); background: transparent; text-align: left; }
.scene-nav-item:hover { border-color: rgba(244,238,230,.12); background: rgba(244,238,230,.035); }
.scene-nav-item.active { border-color: rgba(240,120,150,.24); color: var(--text-main); background: rgba(240,120,150,.065); box-shadow: inset 3px 0 #f07896; }
.scene-nav-item.is-dragging { opacity: .45; }
.scene-nav-thumb { position: relative; display: grid; width: 52px; aspect-ratio: 16/10; place-items: end start; overflow: hidden; border-radius: 3px; padding: 4px; color: #fff; background: #48566a; }
.scene-nav-thumb::after { content: ""; position: absolute; right: 5px; bottom: 0; width: 15px; height: 25px; border-radius: 50% 50% 20% 20%; background: rgba(240,120,150,.65); }
.scene-nav-thumb--night { background: #30364d; }
.scene-nav-thumb--school { background: #647a83; }
.scene-nav-thumb--evening { background: #936f64; }
.scene-nav-thumb b { z-index: 1; font: 700 8px ui-monospace, monospace; }
.scene-nav-copy { display: grid; min-width: 0; gap: 3px; }
.scene-nav-copy strong, .scene-nav-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-nav-copy strong { font-size: 10px; }
.scene-nav-copy small { color: var(--text-muted); font-size: 8px; }
.scene-nav-item > i { color: var(--text-muted); font-style: normal; cursor: grab; }
.scene-nav-empty { display: grid; place-items: center; gap: 12px; min-height: 180px; padding: 20px; color: var(--text-muted); text-align: center; }
.scene-nav-empty span { color: rgba(228,197,106,.42); font: 700 42px ui-serif,serif; }
.scene-nav-empty p { font-size: 10px; line-height: 1.7; }
.scene-add-button { width: 100%; margin-top: 10px; border: 1px dashed rgba(244,238,230,.18); border-radius: 5px; padding: 9px; color: var(--text-muted); background: transparent; font-size: 10px; }
.scene-add-button:hover { color: #f3a0b5; border-color: rgba(240,120,150,.45); }

.preview-panel { position: relative; top: auto; grid-area: preview; grid-column: auto; grid-row: auto; }
.game-screen { border-color: rgba(244,238,230,.2); border-radius: 5px; background: #101522; box-shadow: 0 16px 36px rgba(0,0,0,.34); }
.stage-character.portrait-missing::before { content: ""; position: absolute; inset: 12% 18% 8%; border-radius: 48% 48% 18% 18%; background: rgba(240,120,150,.34); box-shadow: inset 0 0 0 1px rgba(244,238,230,.14); }
.scene-art:not(.asset-backed) { background-image: none !important; background-color: #344052 !important; }
.dialogue-box { right: 3%; bottom: 4%; left: 3%; border: 1px solid rgba(244,238,230,.38); border-radius: 5px; background: rgba(7,11,22,.93); box-shadow: 0 12px 26px rgba(0,0,0,.38), inset 4px 0 #f07896; }
.speaker-name { border-radius: 3px; color: #211820; background: #f07896; box-shadow: none; }
.game-meta { border-radius: 3px; color: rgba(244,238,230,.72); background: rgba(8,12,23,.72); }
.game-controls { gap: 5px; }
.game-controls button { min-height: 33px; border-radius: 5px; color: var(--text-secondary); background: #0e1426; }
.game-controls button:hover, .game-controls button.active { border-color: rgba(99,207,196,.42); color: #8edbd3; background: rgba(99,207,196,.06); }
.scene-timeline summary span { color: #e4c56a; letter-spacing: .04em; }
.scene-timeline-track button { border-radius: 4px; background: #0e1426; }
.scene-timeline-track button::after { background: rgba(244,238,230,.15); }
.scene-timeline-track button.active { border-color: rgba(240,120,150,.42); color: var(--text-main); background: rgba(240,120,150,.06); box-shadow: inset 3px 0 #f07896; }
.scene-timeline-track span { color: #f3a0b5; }

.inspector-panel { position: relative; top: auto; grid-area: inspector; max-height: none; overflow: hidden; align-self: start; }
.inspector-panel > .panel-head #statusText { color: #63cfc4; font-size: 9px; }
.inspector-tabs { grid-template-columns: repeat(4,1fr); margin-bottom: 10px; }
.inspector-tabs button { padding-inline: 2px; font-size: 9px; }
.memory-tabs button::after { background: #f07896; }
.inspector-panel .memory-pane { min-height: 0; max-height: 620px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #343c50 transparent; }
.inspector-pane-head { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0; }
.inspector-pane-head h3 { font-family: ui-serif, "Noto Serif SC", serif; }
.inspector-pane-head small { color: var(--text-muted); font-size: 9px; }
.inspector-character-list li { border: 1px solid rgba(244,238,230,.09); border-radius: 5px; margin-bottom: 6px; padding: 9px; background: #0e1426; }
.quick-expression { margin-top: 14px; border-top: 1px solid rgba(244,238,230,.1); padding-top: 12px; }
.quick-expression > span { color: var(--text-muted); font-size: 9px; }
.quick-expression > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 8px; }
.quick-expression button { border: 1px solid rgba(244,238,230,.11); border-radius: 4px; padding: 7px 2px; color: var(--text-muted); background: #0e1426; font-size: 9px; }
.quick-expression button.active, .quick-expression button:hover { border-color: rgba(240,120,150,.42); color: #f3a0b5; }
.quick-resource { display: grid; gap: 6px; margin: 8px 0 12px; color: var(--text-muted); font-size: 9px; }
.quick-resource select { width: 100%; }
.world-facts-title { margin-top: 16px; border-top: 1px solid rgba(244,238,230,.1); padding-top: 13px; }
.memory-ledger { display: grid; gap: 7px; padding-top: 8px; }
.memory-ledger article { border-left: 3px solid #9c91b0; border-radius: 2px 5px 5px 2px; padding: 10px 11px; background: #0e1426; }
.memory-ledger article:nth-child(2) { border-left-color: #63cfc4; }
.memory-ledger article:nth-child(3) { border-left-color: #e4c56a; }
.memory-ledger span { color: var(--text-main); font-size: 10px; font-weight: 800; }
.memory-ledger p { margin-top: 4px; color: var(--text-muted); font-size: 9px; line-height: 1.6; }
.inspector-task-panel { grid-column: auto; grid-row: auto; padding: 4px 1px; background: transparent; }
.cache-state { display: inline-flex; margin: 0 0 8px; color: var(--text-muted); font-size: 9px; }
.ai-task-metrics div { border-radius: 4px; background: #0e1426; }
.thought-log, .adapter-status { border-radius: 4px; background: #0e1426; }

.output-panel { grid-area: output; grid-column: auto; border-color: rgba(244,238,230,.12); }
.performance-timeline { margin-bottom: 14px; border-bottom: 1px solid rgba(244,238,230,.1); padding-bottom: 14px; }
.performance-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 11px; }
.performance-head small { color: #e4c56a; font-size: 9px; }
.performance-head h2 { margin-top: 3px; font-size: 17px; }
.performance-head > span { color: var(--text-muted); font-size: 9px; }
.performance-tracks { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.performance-track { display: grid; grid-template-columns: 72px minmax(760px,1fr); align-items: center; gap: 5px; min-height: 31px; }
.performance-track > strong { border-right: 2px solid rgba(244,238,230,.12); padding-right: 10px; color: var(--text-muted); font-size: 9px; text-align: right; }
.performance-track > div { display: grid; grid-auto-columns: minmax(105px,1fr); grid-auto-flow: column; gap: 3px; }
.performance-track button { overflow: hidden; border: 1px solid rgba(244,238,230,.09); border-radius: 3px; padding: 6px 7px; color: var(--text-muted); background: #0e1426; font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.performance-track button span { margin-right: 7px; color: rgba(228,197,106,.7); font-size: 8px; }
.performance-track button.active { border-color: rgba(240,120,150,.38); color: var(--text-main); background: rgba(240,120,150,.06); box-shadow: inset 2px 0 #f07896; }
.performance-track:nth-child(2) button { border-left-color: rgba(240,120,150,.35); }
.performance-track:nth-child(4) button { border-left-color: rgba(99,207,196,.35); }
.performance-track:nth-child(5) button { border-left-color: rgba(228,197,106,.4); }
.track-empty { min-height: 90px; border: 1px dashed rgba(244,238,230,.14); border-radius: 5px; padding: 34px 16px; color: var(--text-muted); font-size: 10px; text-align: center; }
.output-panel .tabs { border-bottom-color: rgba(244,238,230,.1); }
.script-edit-toggle { color: #f3a0b5; background: transparent; }
pre.is-editing { outline-color: #f07896; background: #0e1426; box-shadow: inset 3px 0 #f07896; }

.project-settings-drawer {
  position: fixed;
  z-index: 160;
  top: 76px;
  bottom: 16px;
  left: 16px;
  display: flex;
  width: min(440px,calc(100vw - 32px));
  max-height: none;
  overflow-y: auto;
  flex-direction: column;
  gap: 10px;
  border-color: rgba(244,238,230,.2) !important;
  padding: 20px !important;
  background: #141a2d !important;
  box-shadow: 18px 0 50px rgba(0,0,0,.42) !important;
  transform: translateX(calc(-100% - 32px));
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.settings-open .project-settings-drawer { transform: translateX(0); }
.drawer-title { display: flex; align-items: start; justify-content: space-between; }
.drawer-title > div { display: grid; gap: 10px; }
.drawer-close { width: 34px; height: 34px; border: 1px solid rgba(244,238,230,.14); border-radius: 5px; color: var(--text-secondary); background: transparent; font-size: 22px; }
.settings-drawer-backdrop { position: fixed; z-index: 150; inset: 70px 0 0; display: block; border: 0; border-radius: 0; padding: 0; opacity: 0; background: rgba(3,6,13,.64); pointer-events: none; transition: opacity .22s ease; }
.settings-open .settings-drawer-backdrop { opacity: 1; pointer-events: auto; }
.project-settings-drawer .studio-setting-group { border-top-color: rgba(244,238,230,.11); }
.project-settings-drawer .setting-group-body textarea { min-height: 300px; }
.project-settings-drawer .model-option.active { border-color: rgba(240,120,150,.46); background: rgba(240,120,150,.06); box-shadow: inset 3px 0 #f07896; }

body:has(.preview-panel:fullscreen) .site-header,
body:has(.preview-panel:fullscreen) .project-status-bar { display: none; }

@media (max-width: 1280px) {
  .project-status-bar { grid-template-columns: minmax(190px,.7fr) minmax(400px,1fr) auto; }
  .status-actions #publishSampleButton, .status-actions #resourceCenterButton { display: none; }
  .workspace { grid-template-columns: 210px minmax(520px,1fr) 260px; }
}

@media (max-width: 980px) {
  .project-status-bar { position: relative; top: 0; grid-template-columns: 1fr auto; }
  .status-cluster { display: none; }
  .workspace-mobile-tabs { display: grid; grid-template-columns: repeat(4,1fr); position: sticky; z-index: 55; top: 62px; border-bottom: 1px solid rgba(244,238,230,.1); }
  .workspace-mobile-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px; color: var(--text-muted); background: #11172a; }
  .workspace-mobile-tabs button.active { border-bottom-color: #f07896; color: var(--text-main); }
  .workspace { display: block; padding: 10px; }
  .workspace > [data-workspace-panel] { display: none; position: static; max-height: none; }
  .workspace > [data-workspace-panel].mobile-tab-active { display: block; }
  .scene-navigator-list, .inspector-panel .memory-pane { max-height: none; }
  .output-panel.mobile-tab-active { display: block; }
  .project-settings-drawer { display: flex !important; top: 70px; }
}

/* Dialogs and route motion */
.modal-backdrop { background: rgba(5,8,16,.78); backdrop-filter: none; }
.modal-panel { border-radius: 9px; background: #141a2d; box-shadow: 0 28px 70px rgba(0,0,0,.52); }
.modal-ornament { display: none; }
.route-curtain { color: #2d2a31; background: #f4eee6; }
.route-curtain::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(45,42,49,.13); }
.route-curtain span { font-family: ui-serif, "Noto Serif SC", serif; font-weight: 750; letter-spacing: .12em; text-shadow: none; }
.route-curtain i { width: min(320px,55vw); height: 3px; background: #f07896; box-shadow: none; }
.command-backdrop { background: rgba(5,8,16,.76); backdrop-filter: none; }
.command-palette { border-color: rgba(244,238,230,.18); border-radius: 7px; background: #141a2d; box-shadow: 0 28px 70px rgba(0,0,0,.52); }
.command-search > span { color: #f07896; }
.command-results button { border-radius: 4px; }
.command-results button.active { color: var(--text-main); background: rgba(240,120,150,.07); box-shadow: inset 3px 0 #f07896; }
.anime-button--danger { border-color: #e76f7f; color: #fff; background: #b84f60; }
.export-summary span, .export-row, .resource-groups section { border-radius: 5px; background: #0e1426; }
.export-summary strong, .export-icon, .resource-overview strong, .resource-groups header span { color: #f3a0b5; }
.export-icon { border-radius: 4px; background: rgba(240,120,150,.07); }
.version-list::before { background: #f07896; }
.resource-overview { border-radius: 5px; background: rgba(99,207,196,.05); }
.onboarding-modal { border-top: 3px solid #f07896; }
.onboarding-visual { min-height: 140px; }
.open-book-mark { position: relative; width: 150px; height: 96px; border: 0; border-radius: 3px; background: transparent; box-shadow: none; }
.open-book-mark::before, .open-book-mark::after { content: ""; position: absolute; top: 9px; bottom: 5px; width: 72px; border: 1px solid #cbbfb4; background: #f4eee6; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.open-book-mark::before { left: 4px; border-radius: 3px 0 0 3px; transform: skewY(5deg); }
.open-book-mark::after { right: 4px; left: auto; height: auto; border-radius: 0 3px 3px 0; transform: skewY(-5deg); }
.open-book-mark i { position: absolute; z-index: 2; top: 14px; bottom: 12px; left: 50%; width: 1px; background: #aa9d92; }
.open-book-mark b { position: absolute; z-index: 3; top: 20px; right: 22px; width: 42px; height: 2px; background: #d3c6bb; box-shadow: 0 12px #d3c6bb, 0 24px #d3c6bb, 0 36px #d3c6bb; }
.onboarding-step small { color: #f3a0b5; letter-spacing: .04em; }
.motion-options input:checked + span { border-color: #63cfc4; background: rgba(99,207,196,.06); box-shadow: inset 3px 0 #63cfc4; }
.toast > span { box-shadow: none; }

@keyframes character-breathe { 0%,100% { transform: translate(var(--parallax-x,0),var(--parallax-y,0)) scale(1); } 50% { transform: translate(var(--parallax-x,0),calc(var(--parallax-y,0) - 3px)) scale(1.006); } }

@media (prefers-reduced-motion: reduce) { .home-character-stage img { animation: none; } }

@media (max-width: 1120px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .home-main-feature { min-height: 600px; }
  .template-bookshelf { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .project-grid[data-view="grid"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-toolbar { grid-template-columns: 1fr auto; }
  .project-toolbar .segmented-filter { order: 3; grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-header, .site-header.is-scrolled { min-height: 62px; }
  .home-editorial, .library-main { padding: 20px 14px 34px; }
  .home-main-feature { grid-template-columns: 1fr; min-height: 720px; }
  .home-copy { z-index: 6; padding: 32px 22px 28px; }
  .home-copy h1 { margin-top: 22px; font-size: clamp(40px,13vw,58px); }
  .home-character-stage { position: absolute; right: 0; bottom: 0; left: 0; height: 48%; opacity: .68; }
  .home-character-stage::before { content: ""; position: absolute; z-index: 5; inset: 0; background: linear-gradient(180deg, #141a2d, transparent 35%); }
  .home-character-stage img { right: -10%; max-height: 100%; }
  .home-dialogue { width: 100%; margin-top: 225px; padding-inline: 20px; }
  .home-side { grid-template-columns: 1fr; }
  .home-workflow { grid-template-columns: 1fr; }
  .home-workflow ol { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .library-heading { align-items: stretch; flex-direction: column; }
  .library-toolbar--editorial { min-width: 0; }
  .template-bookshelf { grid-template-columns: 1fr 1fr; gap: 14px; }
  .template-volume { grid-template-rows: 240px 1fr; }
  .template-volume--featured { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: 390px; }
  .volume-copy { padding: 15px; }
  .volume-meta { grid-template-columns: 1fr 1fr; }
  .volume-copy footer { align-items: stretch; flex-direction: column; }
  .volume-copy footer .anime-button { width: 100%; }
  .projects-hero--editorial { align-items: stretch; }
  .project-stats { grid-template-columns: 1fr 1fr; }
  .project-stats article { border-bottom: 1px solid rgba(244,238,230,.08); }
  .project-toolbar { grid-template-columns: 1fr auto; }
  .project-toolbar .sort-field { grid-column: 1; }
  .project-toolbar .project-view-toggle { grid-column: 2; }
  .save-slot { grid-template-columns: 45px 100px minmax(0,1fr); min-height: 174px; }
  .save-actions { grid-column: 2 / -1; flex-direction: row; border-top: 1px solid rgba(244,238,230,.08); border-left: 0; padding: 10px; }
  .save-actions .anime-button { width: auto; flex: 1; }
  .save-actions .project-more { flex: 2; }
  .save-meta { grid-template-columns: 1fr 1fr; gap: 6px; }
  .save-meta div { border: 0; padding: 0; }
  .project-grid[data-view="grid"] { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .home-actions { width: 100%; }
  .home-actions .anime-button { width: 100%; justify-content: center; }
  .template-bookshelf { grid-template-columns: 1fr; }
  .template-volume--featured { grid-template-columns: 1fr; grid-template-rows: 290px auto; }
  .save-slot, .project-grid[data-view="grid"] .save-slot { grid-template-columns: 40px 1fr; grid-template-rows: 130px auto auto; }
  .save-number, .project-grid[data-view="grid"] .save-number { grid-row: 1 / 4; }
  .save-cover { margin: 10px 10px 0; }
  .save-content { padding: 14px 10px; }
  .save-content header { flex-direction: column; gap: 6px; }
  .save-chapter { display: none; }
  .save-actions { grid-column: 2; }
}

/* Artistic frontispiece and interactive folio deck. */
.artistic-cover { min-height: 100vh; overflow: hidden; background: #0b1020; }
.cover-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px,.82fr) minmax(610px,1.18fr);
  min-height: calc(100vh - 70px);
  overflow: hidden;
  isolation: isolate;
  align-items: center;
  gap: clamp(20px,4vw,72px);
  padding: clamp(42px,5vw,86px) clamp(36px,6vw,110px) 72px;
  background-color: #0b1020;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(244,238,230,.012) 5px 6px),
    linear-gradient(90deg, rgba(240,120,150,.035), transparent 28%, transparent 72%, rgba(228,197,106,.025));
}
.cover-page::before { content: ""; position: absolute; z-index: -1; top: 8%; bottom: 8%; left: clamp(22px,3vw,54px); width: 1px; background: rgba(240,120,150,.38); }
.cover-page::after { content: ""; position: absolute; z-index: -1; right: 4%; bottom: 7%; width: 32vw; height: 32vw; border: 1px solid rgba(244,238,230,.04); border-radius: 50%; box-shadow: 0 0 0 46px rgba(244,238,230,.015), 0 0 0 92px rgba(244,238,230,.01); }
.cover-watermark { position: absolute; z-index: -1; top: -4vw; left: 1vw; color: transparent; font: 800 clamp(220px,32vw,520px)/.8 ui-serif,serif; letter-spacing: -.16em; -webkit-text-stroke: 1px rgba(244,238,230,.035); user-select: none; }
.cover-watermark span { -webkit-text-stroke-color: rgba(240,120,150,.055); }

.cover-intro { position: relative; z-index: 4; display: flex; align-items: start; flex-direction: column; max-width: 680px; padding-left: clamp(10px,2vw,32px); }
.cover-volume { display: inline-flex; align-items: center; gap: 13px; color: rgba(244,238,230,.5); font: 700 10px/1 ui-monospace,monospace; letter-spacing: .16em; text-transform: uppercase; }
.cover-volume::before { content: ""; width: 42px; height: 3px; background: #e4c56a; }
.cover-overline { margin-top: clamp(28px,5vh,56px); color: #f3a0b5; font-size: 12px; font-weight: 750; letter-spacing: .2em; }
.cover-intro h1 { margin-top: 20px; font-size: clamp(62px,6.25vw,112px); font-weight: 740; letter-spacing: -.075em; line-height: .98; }
.cover-title-line { display: block; width: max-content; max-width: 100%; opacity: 0; animation: cover-title-in 900ms cubic-bezier(.16,1,.3,1) forwards; }
.cover-title-line:nth-child(2) { animation-delay: 150ms; }
.cover-title-line em { position: relative; color: #f19ab0; font-style: normal; }
.cover-title-line em::after { content: ""; position: absolute; right: 3%; bottom: -.09em; left: 2%; height: .055em; background: #e4c56a; transform: scaleX(0); transform-origin: left; animation: cover-rule-in 760ms cubic-bezier(.16,1,.3,1) 820ms forwards; }
.cover-note { max-width: 490px; margin-top: 30px; color: rgba(244,238,230,.6); font: 500 clamp(14px,1.2vw,18px)/1.9 ui-serif,"Noto Serif SC",serif; letter-spacing: .04em; opacity: 0; animation: cover-copy-in 700ms ease 520ms forwards; }
.cover-prompt { display: flex; align-items: center; gap: 14px; margin-top: clamp(34px,7vh,78px); color: rgba(244,238,230,.42); font-size: 10px; letter-spacing: .08em; opacity: 0; animation: cover-copy-in 700ms ease 760ms forwards; }
.cover-prompt i { position: relative; width: 38px; height: 38px; border: 1px solid rgba(244,238,230,.16); border-radius: 50%; }
.cover-prompt i::before { content: ""; position: absolute; top: 50%; left: 9px; width: 18px; height: 1px; background: #f07896; animation: cover-pointer 1.8s ease-in-out infinite; }
.cover-prompt i::after { content: ""; position: absolute; top: calc(50% - 3px); right: 9px; width: 6px; height: 6px; border-top: 1px solid #f07896; border-right: 1px solid #f07896; transform: rotate(45deg); }

.folio-stage { position: relative; z-index: 5; width: min(680px,48vw); min-height: 680px; justify-self: end; perspective: 1400px; }
.folio-deck { position: relative; width: 650px; max-width: 100%; height: 650px; margin: 0 auto; perspective: 1400px; }
.folio-deck::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 340px; height: 340px; border: 1px solid rgba(228,197,106,.12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(228,197,106,.025), 0 0 0 68px rgba(240,120,150,.018); transform: translate(-50%,-50%); }
.folio-orbit { position: absolute; z-index: -1; border: 1px solid rgba(244,238,230,.055); border-radius: 50%; pointer-events: none; }
.folio-orbit--one { top: 40px; right: -110px; width: 470px; height: 470px; }
.folio-orbit--two { right: 110px; bottom: -36px; width: 260px; height: 260px; border-style: dashed; }

.folio-letter {
  position: absolute;
  top: var(--stack-top);
  left: var(--stack-left);
  z-index: var(--stack-z);
  display: grid;
  grid-template-rows: 46% 54%;
  width: 390px;
  height: 540px;
  overflow: visible;
  border: 1px solid rgba(61,50,54,.22);
  border-radius: 3px 8px 8px 3px;
  color: #302a2d;
  background-color: #f4eee6;
  background-image: repeating-linear-gradient(0deg, transparent 0 21px, rgba(77,66,68,.055) 21px 22px);
  box-shadow: -8px 12px 24px rgba(0,0,0,.2), inset 11px 0 rgba(117,89,96,.045);
  text-decoration: none;
  transform: perspective(1400px) rotate(var(--stack-r));
  transform-origin: 50% 88%;
  transition: left 720ms cubic-bezier(.16,1,.3,1), top 720ms cubic-bezier(.16,1,.3,1), transform 720ms cubic-bezier(.16,1,.3,1), opacity 420ms ease, filter 420ms ease, box-shadow 420ms ease;
  animation: folio-arrive 720ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(260ms + var(--stack-z) * 95ms);
  will-change: transform,left,top;
}
.folio-letter::before { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 13px; width: 1px; background: rgba(240,120,150,.32); }
.folio-letter::after { content: ""; position: absolute; z-index: 5; inset: 7px; border: 1px solid rgba(61,50,54,.1); border-radius: 2px 5px 5px 2px; pointer-events: none; }
.folio-letter--recent { background-color: #f0e8df; }
.folio-letter--templates { background-color: #e9eee9; }
.folio-letter--studio { background-color: #eee7e2; }
.folio-number { position: absolute; z-index: 6; top: 18px; left: 27px; color: rgba(244,238,230,.78); font: 700 10px ui-monospace,monospace; letter-spacing: .13em; }
.folio-tab { position: absolute; z-index: 8; top: 18px; right: -18px; min-width: 66px; border-left: 3px solid #f07896; border-radius: 1px 4px 4px 1px; padding: 7px 11px; color: #473a3f; background: #f1dce0; font-size: 10px; font-weight: 800; text-align: center; box-shadow: 4px 6px 12px rgba(0,0,0,.11); }
.folio-letter--recent .folio-tab { border-left-color: #63a89f; background: #d4e5e0; }
.folio-letter--templates .folio-tab { border-left-color: #8d82a4; background: #ddd7e7; }
.folio-letter--studio .folio-tab { border-left-color: #b5963d; background: #efe3b8; }
.folio-art { position: relative; overflow: hidden; margin: 0; border-radius: 2px 7px 0 0; background-image: linear-gradient(0deg, rgba(20,18,20,.72), transparent 58%), var(--folio-art); background-position: center; background-size: cover; filter: saturate(.72) contrast(.95); }
.folio-art::after { content: ""; position: absolute; inset: 0; background: rgba(244,238,230,.06); mix-blend-mode: screen; }
.folio-copy { position: relative; display: flex; align-items: start; flex-direction: column; padding: 32px 34px 28px; }
.folio-copy small { color: rgba(61,50,54,.54); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.folio-copy h2 { margin-top: 11px; color: #30272b; font-size: 32px; letter-spacing: -.04em; }
.folio-copy p { margin-top: 12px; color: rgba(61,50,54,.68); font-size: 12px; line-height: 1.75; }
.folio-copy b { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; color: #b84f6a; font-size: 11px; }
.folio-copy b i { font-style: normal; transition: transform 180ms ease; }
.folio-letter:hover .folio-copy b i, .folio-letter:focus-visible .folio-copy b i { transform: translateX(4px); }

.folio-deck.is-exploded .folio-letter { pointer-events: auto; opacity: .08; filter: grayscale(.45); transform: translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-r)) scale(.8); }
.folio-deck.is-exploded .folio-letter.is-active {
  top: 30px;
  left: 112px;
  z-index: 20;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  box-shadow: -20px 30px 58px rgba(0,0,0,.34), 0 0 0 1px rgba(228,197,106,.34);
  transform: perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(0) scale(1.065);
}
.folio-deck.is-exploded .folio-letter.is-active .folio-art { filter: saturate(.92) contrast(1); }
.folio-instruction { position: absolute; right: 45px; bottom: 0; display: flex; align-items: center; gap: 10px; color: rgba(244,238,230,.35); font-size: 9px; letter-spacing: .08em; }
.folio-instruction i { width: 28px; height: 1px; background: rgba(244,238,230,.18); }
.folio-switcher { position: absolute; z-index: 35; top: 50%; right: -12px; display: grid; gap: 5px; opacity: 0; pointer-events: none; transform: translate(18px,-50%); transition: opacity 220ms ease, transform 320ms cubic-bezier(.16,1,.3,1); }
.folio-stage.has-active-folio .folio-switcher { opacity: 1; pointer-events: auto; transform: translate(0,-50%); }
.folio-switcher button { display: flex; align-items: center; gap: 8px; width: 76px; border: 1px solid rgba(244,238,230,.12); border-radius: 3px 0 0 3px; padding: 8px 9px; color: rgba(244,238,230,.58); background: rgba(8,11,25,.86); box-shadow: -8px 10px 24px rgba(0,0,0,.18); font-size: 10px; text-align: left; backdrop-filter: blur(12px); transition: color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.folio-switcher button:hover, .folio-switcher button:focus-visible { color: #fff8ef; border-color: rgba(240,120,150,.5); transform: translateX(-5px); }
.folio-switcher button span { color: #f19ab0; font: 700 8px ui-monospace,monospace; }
.folio-stage[data-active-folio="create"] [data-folio-switch="create"], .folio-stage[data-active-folio="recent"] [data-folio-switch="recent"], .folio-stage[data-active-folio="templates"] [data-folio-switch="templates"], .folio-stage[data-active-folio="studio"] [data-folio-switch="studio"] { border-color: #e4c56a; color: #e4c56a; }
.cover-footer { position: absolute; right: clamp(36px,6vw,110px); bottom: 22px; left: clamp(36px,6vw,110px); display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(244,238,230,.08); padding-top: 13px; color: rgba(244,238,230,.28); font-size: 9px; letter-spacing: .12em; }

@keyframes cover-title-in { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-20px); } to { opacity: 1; clip-path: inset(0); transform: translateX(0); } }
@keyframes cover-rule-in { to { transform: scaleX(1); } }
@keyframes cover-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cover-pointer { 50% { transform: translateX(5px); } }
@keyframes folio-arrive {
  from { opacity: 0; transform: perspective(1400px) translate(120px,80px) rotate(var(--stack-r)); }
  to { opacity: 1; transform: perspective(1400px) rotate(var(--stack-r)); }
}

@media (max-width: 1220px) {
  .cover-page { grid-template-columns: minmax(390px,.8fr) minmax(520px,1.2fr); gap: 8px; padding-inline: 42px; }
  .cover-intro h1 { font-size: clamp(58px,6.5vw,86px); }
  .folio-stage { width: 580px; transform: scale(.9); transform-origin: right center; }
}

@media (max-width: 960px) {
  .artistic-cover { overflow: visible; }
  .cover-page { display: block; min-height: auto; overflow: hidden; padding: 54px 24px 52px; }
  .cover-page::before { left: 14px; }
  .cover-intro { max-width: 720px; padding-left: 12px; }
  .cover-intro h1 { font-size: clamp(56px,10vw,88px); }
  .cover-note { margin-top: 20px; }
  .cover-prompt { display: none; }
  .folio-stage { width: 650px; max-width: 100%; min-height: 660px; margin: 30px auto 0; transform: scale(.9); transform-origin: top center; }
  .cover-footer { position: relative; right: auto; bottom: auto; left: auto; margin-top: -34px; }
}

@media (max-width: 759px) {
  .cover-page { padding: 42px 15px 36px; }
  .cover-volume { font-size: 8px; }
  .cover-overline { margin-top: 28px; font-size: 10px; }
  .cover-intro h1 { font-size: clamp(47px,14vw,70px); line-height: 1.02; }
  .cover-title-line { width: auto; }
  .cover-note { font-size: 13px; }
  .folio-stage { width: 100%; min-height: 540px; margin-top: 34px; transform: none; }
  .folio-orbit, .folio-deck::before, .folio-instruction, .folio-switcher { display: none; }
  .folio-deck { display: flex; width: 100%; height: auto; gap: 12px; overflow-x: auto; padding: 8px 8vw 28px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .folio-deck::-webkit-scrollbar { display: none; }
  .folio-letter, .folio-deck.is-exploded .folio-letter, .folio-deck.is-exploded .folio-letter.is-active {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    width: min(78vw,350px);
    height: 480px;
    flex: 0 0 min(78vw,350px);
    opacity: 1;
    filter: none;
    pointer-events: auto;
    scroll-snap-align: center;
    transform: none;
    animation-delay: calc(120ms + var(--stack-z) * 70ms);
  }
  .folio-copy { padding: 24px 26px; }
  .folio-copy h2 { font-size: 27px; }
  .cover-footer { align-items: start; flex-direction: column; gap: 6px; margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-title-line, .cover-note, .cover-prompt, .folio-letter, .cover-title-line em::after { opacity: 1; animation: none; transform: none; }
  .folio-deck.is-exploded .folio-letter { transition-duration: .01ms; }
}

/* Identity, privacy, and administration */
.identity-page, .admin-page { min-height: 100vh; background: #080c1d; }
.identity-main, .admin-main { width: min(1360px,100%); margin: 0 auto; padding: clamp(28px,5vw,72px); }
.admin-dashboard, .admin-panel { width: 100%; min-width: 0; max-width: 100%; }
.identity-loading { display: grid; place-items: center; gap: 15px; min-height: 65vh; color: var(--text-muted); }
.identity-card { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(360px,.7fr); gap: clamp(30px,7vw,110px); align-items: center; min-height: 680px; }
.identity-intro { position: relative; border-left: 1px solid rgba(240,120,150,.42); padding: 38px clamp(22px,4vw,58px); }
.identity-intro > span, .admin-heading span, .account-dashboard header > div > span { color: #e4c56a; font: 750 9px ui-monospace,monospace; letter-spacing: .2em; }
.identity-intro h1, .account-dashboard h1, .admin-heading h1 { margin-top: 18px; font: 740 clamp(44px,6vw,82px)/1.04 ui-serif,"Noto Serif SC",serif; letter-spacing: -.055em; }
.identity-intro p { max-width: 620px; margin-top: 24px; color: var(--text-secondary); font-size: 15px; line-height: 1.9; }
.identity-intro ul { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; color: var(--text-muted); list-style: none; }
.identity-intro li::before { content: "✓"; margin-right: 10px; color: #63cfc4; }
.identity-forms { border: 1px solid rgba(255,255,255,.1); border-radius: 4px 18px 18px 4px; padding: clamp(24px,4vw,44px); background: rgba(13,18,39,.88); box-shadow: -16px 26px 70px rgba(0,0,0,.28); }
.identity-tabs { display: flex; gap: 5px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.identity-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 12px 18px; color: var(--text-muted); background: transparent; }
.identity-tabs button.active { border-bottom-color: #f07896; color: #fff; }
.identity-forms form, .account-setting { display: grid; gap: 16px; }
.identity-forms label, .account-setting label { display: grid; gap: 7px; color: var(--text-secondary); font-size: 11px; }
.identity-forms label small { color: var(--text-muted); font-size: 9px; }
.identity-forms input, .account-setting input { min-height: 46px; border-color: rgba(255,255,255,.13); background: rgba(3,7,18,.72); }
.identity-forms .anime-button { margin-top: 6px; }
.form-error { min-height: 18px; color: #ff809c; font-size: 11px; }
.account-dashboard > header, .admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 30px; }
.account-dashboard h1, .admin-heading h1 { font-size: clamp(42px,5vw,68px); }
.account-dashboard header p, .admin-heading p { margin-top: 9px; color: var(--text-muted); }
.account-actions { display: flex; gap: 8px; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 30px; }
.account-setting { position: relative; border: 1px solid rgba(255,255,255,.1); padding: 30px; background: rgba(12,17,36,.72); }
.account-setting > span { position: absolute; top: 18px; right: 20px; color: rgba(228,197,106,.5); font: 700 10px ui-monospace,monospace; }
.account-setting h2 { margin-bottom: 8px; font: 700 25px ui-serif,"Noto Serif SC",serif; }
.admin-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin-top: 28px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.1); }
.admin-stats article { display: grid; gap: 5px; padding: 20px; background: #0d1227; }
.admin-stats small { color: var(--text-muted); font-size: 9px; }
.admin-stats strong { color: #e4c56a; font-size: 30px; }
.admin-tabs { display: flex; gap: 4px; margin-top: 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 12px 18px; color: var(--text-muted); background: transparent; }
.admin-tabs button.active { border-bottom-color: #f07896; color: #fff; }
.admin-panel { margin-top: 24px; }
.admin-panel > header { display: flex; justify-content: space-between; margin-bottom: 16px; }
.admin-panel h2 { font: 700 25px ui-serif,"Noto Serif SC",serif; }
.admin-panel header p { margin-top: 5px; color: var(--text-muted); font-size: 11px; }
.admin-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid rgba(255,255,255,.1); }
.admin-table-wrap table { width: 100%; border-collapse: collapse; min-width: 840px; }
.admin-table-wrap th, .admin-table-wrap td { border-bottom: 1px solid rgba(255,255,255,.07); padding: 14px; color: var(--text-secondary); font-size: 11px; text-align: left; vertical-align: middle; }
.admin-table-wrap th { color: var(--text-muted); background: rgba(255,255,255,.025); font-size: 9px; letter-spacing: .12em; }
.admin-table-wrap td strong, .admin-table-wrap td small { display: block; }
.admin-table-wrap td strong { color: var(--text-main); }
.admin-table-wrap td small { margin-top: 4px; color: var(--text-muted); }
.admin-table-wrap td button, .admin-table-wrap td select { margin: 2px 5px 2px 0; border: 1px solid rgba(255,255,255,.1); padding: 7px 9px; color: var(--text-secondary); background: rgba(3,7,18,.64); font-size: 9px; }
.admin-badge { display: inline-flex; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 5px 8px; font-size: 9px; }
.admin-badge--active, .admin-badge--public { color: #63cfc4; border-color: rgba(99,207,196,.3); }
.admin-badge--suspended, .admin-badge--private { color: #f0a0b5; border-color: rgba(240,160,181,.3); }
.admin-access-state { display: grid; place-items: center; gap: 13px; min-height: 65vh; text-align: center; }
.admin-access-state > span { color: rgba(240,120,150,.35); font: 800 100px/1 ui-serif,serif; }
.admin-access-state p { color: var(--text-muted); }
@media (max-width: 860px) { .identity-card, .account-settings-grid { grid-template-columns: 1fr; } .identity-card { min-height: auto; } .admin-stats { grid-template-columns: repeat(2,1fr); } .account-dashboard > header, .admin-heading { align-items: start; flex-direction: column; } }