:root {
  color-scheme: light;
  --ink: #181b19;
  --muted: #696d67;
  --ground: #f1eee6;
  --ground-soft: #e4e9e4;
  --line: rgba(24, 27, 25, .16);
  --orange: #e66b1f;
  --green: #2aa88f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ground); }
body { color: var(--ink); }
button, a { font: inherit; }

.story-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  height: 4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 238, 230, .94);
  backdrop-filter: blur(14px);
}

.back-button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.25rem;
  text-decoration: none;
}
.back-button:hover, .back-button:focus-visible { color: var(--orange); }
.back-button:focus-visible, .chapter-button:focus-visible, .story-controls button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.story-name { display: grid; gap: .12rem; padding-inline: 1rem; }
.story-name strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 500; }
.story-name small, .story-position small { color: var(--muted); font-size: .56rem; letter-spacing: .12em; }
.story-position { display: grid; justify-items: end; gap: .08rem; min-width: 6.5rem; padding-right: 1rem; }
.story-position strong { font-size: .76rem; font-weight: 600; }

.story-stage { position: fixed; inset: 4rem 0 0 7rem; background: var(--ground-soft); }
#story-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--ground-soft); }
.frame-wait { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ground-soft); color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
body.frame-loading .frame-wait { opacity: 1; }

.chapter-rail {
  position: fixed;
  z-index: 10;
  inset: 4rem auto 0 0;
  width: 7rem;
  border-right: 1px solid var(--line);
  background: var(--ground);
}
.chapter-list { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.chapter-list::-webkit-scrollbar { display: none; }
.chapter-button {
  position: relative;
  display: grid;
  gap: .12rem;
  width: 100%;
  min-height: 4.15rem;
  padding: .72rem .75rem .62rem 1.05rem;
  border: 0;
  border-bottom: 1px solid rgba(24, 27, 25, .08);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.chapter-button::before { content: ""; position: absolute; inset: .8rem auto .8rem 0; width: 2px; background: transparent; }
.chapter-button strong { color: inherit; font-size: .72rem; font-weight: 600; }
.chapter-button small { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.chapter-button:hover { color: var(--ink); }
.chapter-button.active { color: var(--ink); background: rgba(19, 140, 116, .09); }
.chapter-button.active::before { background: linear-gradient(var(--orange), var(--green)); }

.story-controls { position: fixed; z-index: 25; top: .65rem; right: 7.25rem; display: flex; gap: .45rem; }
.story-controls button { display: grid; place-items: center; width: 2.7rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: rgba(248, 245, 237, .88); color: var(--ink); font-size: 1rem; cursor: pointer; backdrop-filter: blur(10px); }
.story-controls button:hover { border-color: var(--orange); color: var(--orange); }
.story-controls button:disabled { opacity: .28; cursor: default; }

@media (max-width: 700px) {
  .story-header { grid-template-columns: 3.65rem minmax(0, 1fr) auto; height: 3.65rem; }
  .back-button { font-size: 1.05rem; }
  .story-name { padding-inline: .75rem; }
  .story-name strong { font-size: .84rem; }
  .story-name small { font-size: .48rem; }
  .story-position { min-width: 4.8rem; padding-right: .72rem; }
  .story-position strong { font-size: .68rem; }
  .story-position small { font-size: .48rem; }
  .story-stage { inset: 3.65rem 0 5.15rem; }
  .chapter-rail { inset: auto 0 0; width: auto; height: 5.15rem; border-top: 1px solid var(--line); border-right: 0; }
  .chapter-list { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
  .chapter-button { flex: 0 0 4.8rem; min-height: 100%; padding: .75rem .55rem .55rem; border-right: 1px solid rgba(24, 27, 25, .08); border-bottom: 0; text-align: center; scroll-snap-align: center; }
  .chapter-button::before { inset: 0 .7rem auto; width: auto; height: 2px; }
  .chapter-button small { font-size: .53rem; }
  .story-controls { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-wait { transition: none; }
  .chapter-list { scroll-behavior: auto; }
}