:root {
  --ink: #1c1916;
  --paper: #f4efe6;
  --fade: #6f675e;
  --seal: #c23b2e;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Shippori Mincho", "Noto Serif SC", "Songti SC", "STSong", serif;
  color-scheme: light;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--ink);
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--serif);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  background: #14110e;
}

button, a { font: inherit; color: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fold {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: 22px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.28);
  color: rgba(247, 242, 232, 0.88);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.fold.is-in {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.28s;
}

.fold svg { width: 16px; height: 16px; display: block; }
.fold:hover { background: rgba(20, 16, 12, 0.5); }

.stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.view {
  position: relative;
  display: flex;
  gap: 0;
  height: 100%;
  overflow: hidden;
  transition: gap 0.6s var(--ease);
}

.edge {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 112px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: #f7f2e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.edge-prev { left: 0; justify-content: flex-start; }
.edge-next { right: 0; justify-content: flex-end; }
.edge:hover,
.edge:focus-visible { opacity: 1; }

.edge-arrow {
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.edge-title {
  writing-mode: vertical-rl;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.stage.is-folded .edge { display: none; }

.edge:focus-visible,
.fold:focus-visible,
.mark:focus-visible,
.stage.is-folded .sheet:focus-visible {
  outline: 1px solid var(--seal);
  outline-offset: 3px;
}

.sheet {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  color: #f7f2e8;
  cursor: pointer;
  background-position: center;
  background-size: cover;
  transition: flex-grow 0.6s var(--ease);
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 12, 10, 0.28);
  pointer-events: none;
  transition: background 0.45s ease;
}

.sheet > * {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}

.sheet::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 15px;
  letter-spacing: 0.32em;
  color: #f7f2e8;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 0.28s ease;
}

.stage.is-folded .view { gap: 5px; }

.stage.is-folded .sheet.is-on { flex-grow: 1.35; }

@media (hover: hover) {
  .stage.is-folded .sheet:hover,
  .stage.is-folded .sheet:focus-visible { flex-grow: 2.15; }
}

.stage.is-folded .sheet:hover::before,
.stage.is-folded .sheet:focus-visible::before {
  background: rgba(16, 12, 10, 0.12);
}

.stage.is-folded .sheet.is-on {
  box-shadow: inset 0 0 0 1px rgba(247, 242, 232, 0.7);
}

.stage.is-folded .sheet :is(a, button) { visibility: hidden; }

.stage:not(.is-folded) .sheet {
  flex-grow: 0;
  cursor: default;
  pointer-events: none;
}

.stage:not(.is-folded) .sheet.is-on {
  flex-grow: 1;
  padding: 11vh 128px 12vh;
  pointer-events: auto;
}

.stage:not(.is-folded) .sheet::before {
  background: linear-gradient(90deg, rgba(16, 12, 10, 0.58) 0%, rgba(16, 12, 10, 0.22) 46%, rgba(16, 12, 10, 0.08) 100%);
}

.stage:not(.is-folded) .sheet::after { opacity: 0; }

.stage:not(.is-folded) .sheet.is-on > * {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}

.stage:not(.is-folded) .view {
  cursor: grab;
  touch-action: none;
}

.stage:not(.is-folded) .view :is(a, button) { cursor: pointer; }

.view.is-dragging,
.view.is-dragging * { cursor: grabbing; }

.view.is-blend .sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  flex: none;
  transition: none;
  pointer-events: none;
}

.view.is-blend .sheet.is-from { z-index: 1; }
.view.is-blend .sheet.is-to { z-index: 2; }

.stage:not(.is-folded) .view.is-blend .sheet > * {
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: none;
}

.stage:not(.is-folded) .view.is-blend .sheet.is-copy > * {
  opacity: 1;
  visibility: visible;
}

.view.is-settle .sheet { transition: none; }

html:not(.is-ready) .view,
html:not(.is-ready) .sheet,
html:not(.is-ready) .sheet > *,
html:not(.is-ready) .sheet::after,
html:not(.is-ready) .fold {
  transition: none;
}

.tone-ink { background-image: url("/img/hub-tools.jpg"); }
.tone-cream { background-image: url("/img/hub-stash.jpg"); }
.tone-indigo { background-image: url("/img/hub-drop.jpg"); }
.tone-moss { background-image: url("/img/hub-get.jpg"); }
.tone-sand { background-image: url("/img/hub-raw.jpg"); }
.tone-sumi { background-image: url("/img/hub-store.jpg"); }
.tone-blush { background-image: url("/img/hub-mail.jpg"); }
.tone-slate { background-image: url("/img/hub-dns.jpg"); }

.prose, .host { color: rgba(247, 242, 232, 0.78); }

.host {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
}

h2 {
  margin: 16px 0 0;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.12;
}

.lead {
  margin: 16px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
}

.prose {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.ornament, .path {
  margin: 28px 0 0;
  font-size: 16px;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.ornament span, .path span {
  margin-left: 1.1em;
  font-weight: 400;
  opacity: 0.72;
}

.figure {
  margin: 24px 0 0;
  font-size: clamp(64px, 8vw, 108px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.figure span {
  margin-left: 10px;
  font-size: 0.26em;
  letter-spacing: 0.2em;
  vertical-align: 0.4em;
}

.command {
  margin: 26px 0 0;
  font-family: "SF Mono", Menlo, ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.7;
}

.records { margin: 26px 0 0; }
.records div + div { margin-top: 14px; }

.records dt {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--seal);
}

.records dd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.records dd span { overflow-wrap: anywhere; }

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 28px;
  margin-top: 32px;
}

.mark {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(247, 242, 232, 0.55);
  border-radius: 50%;
  background: transparent;
  color: #f7f2e8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mark svg { width: 15px; height: 15px; display: block; }
.mark .icon-ok { display: none; }
.mark.is-done .icon-copy { display: none; }
.mark.is-done .icon-ok { display: block; }
.mark.goto { border-color: var(--seal); color: #f0b2ab; }
.mark:hover { background: rgba(20, 16, 12, 0.28); }

.records .mark { flex: 0 0 auto; width: 28px; height: 28px; }

@media (max-width: 800px) {
  .view { flex-direction: column; }

  .sheet {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .sheet::after {
    writing-mode: horizontal-tb;
    letter-spacing: 0.18em;
    font-size: 16px;
  }

  .edge {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 72px;
    padding: 0 20px;
    opacity: 0.92;
    justify-content: center;
  }

  .edge-prev { top: 0; }
  .edge-next { bottom: 0; }
  .edge-title { writing-mode: horizontal-tb; letter-spacing: 0.14em; }
  .edge-arrow { transform: rotate(90deg); }

  .fold {
    left: auto;
    right: 16px;
    top: 16px;
    bottom: auto;
    transform: none;
  }

  .stage:not(.is-folded) .sheet.is-on {
    padding: calc(16vh + env(safe-area-inset-top)) 24px calc(14vh + env(safe-area-inset-bottom));
  }

  .stage:not(.is-folded) .sheet::before {
    background: linear-gradient(180deg, rgba(16, 12, 10, 0.62) 0%, rgba(16, 12, 10, 0.34) 48%, rgba(16, 12, 10, 0.16) 100%);
  }

  h2 { font-size: 36px; }
  .lead { font-size: 22px; }
  .prose { font-size: 15px; line-height: 1.85; }
  .ornament, .path { font-size: 14px; letter-spacing: 0.08em; }
  .command { font-size: 12px; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .view,
  .sheet,
  .sheet > *,
  .sheet::before,
  .sheet::after,
  .edge,
  .fold {
    transition: none;
  }
}