* { box-sizing: border-box; }
:root {
  --ink: #242229;
  --muted: #77727d;
  --paper: #fbfbfd;
  --paper-2: #f5f4f7;
  --edge: #d8d5dc;
  --pink: #eadfe8;
  --pink-2: #f3ebf1;
  --black: #17161b;
  --shadow: rgba(30, 27, 35, .18);
}
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 68%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(135deg, #f2f2f5, #e9e8ed 58%, #f1eef2);
  background-size: 27px 27px, 19px 19px, auto;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.scene {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 42px 32px 34px;
  position: relative;
  isolation: isolate;
}
.home-link {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 30;
  color: #7b7780;
  text-decoration: none;
  font: 11px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
  opacity: .65;
}
.home-link:hover, .home-link:focus-visible { opacity: 1; text-decoration: underline; }
.halo {
  position: fixed;
  width: 42vmax;
  aspect-ratio: 1;
  border: 1px solid rgba(70, 60, 75, .055);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.halo::before, .halo::after { content: ""; position: absolute; inset: 8%; border: inherit; border-radius: inherit; }
.halo::after { inset: 19%; }
.halo-a { left: -18vmax; top: -15vmax; }
.halo-b { right: -20vmax; bottom: -17vmax; }
.book-shell {
  width: min(1120px, calc(100vw - 72px));
  user-select: none;
  touch-action: pan-y;
}
.book {
  width: 100%;
  aspect-ratio: 1.56;
  max-height: 76vh;
  position: relative;
  perspective: 2400px;
  filter: drop-shadow(0 28px 30px rgba(28, 25, 33, .16));
}
.spread { position: absolute; inset: 0; }
.page, .turn-face {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: clamp(30px, 4vw, 62px) clamp(28px, 4.2vw, 68px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(102,92,110,.055), transparent 8%, transparent 92%, rgba(102,92,110,.035)),
    repeating-linear-gradient(0deg, rgba(70,65,75,.012) 0 1px, transparent 1px 5px),
    var(--paper);
  border: 1px solid rgba(72,67,78,.16);
  box-shadow: inset 0 0 32px rgba(75,68,82,.035);
}
.page-left { left: 0; border-radius: 15px 3px 3px 15px; }
.page-right { right: 0; border-radius: 3px 15px 15px 3px; }
.page-left::after, .page-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  pointer-events: none;
}
.page-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(40,35,45,.10)); }
.page-right::before { left: 0; background: linear-gradient(90deg, rgba(40,35,45,.11), transparent); }
.spine {
  position: absolute;
  z-index: 7;
  left: calc(50% - 8px);
  top: 1.5%;
  width: 16px;
  height: 97%;
  background: linear-gradient(90deg, transparent, rgba(48,42,54,.20), rgba(255,255,255,.62), rgba(48,42,54,.13), transparent);
  opacity: .62;
  pointer-events: none;
}
.page-stack { position: absolute; top: 1.1%; bottom: 1.1%; width: 49.4%; background: repeating-linear-gradient(#f6f5f8 0 2px, #d9d6dd 2px 3px); z-index: -1; }
.stack-left { left: -.7%; border-radius: 14px 0 0 14px; box-shadow: -7px 8px 9px rgba(32,28,36,.10); }
.stack-right { right: -.7%; border-radius: 0 14px 14px 0; box-shadow: 7px 8px 9px rgba(32,28,36,.10); }
.front-cover {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
  border: 1px solid #b8b4bc;
  border-radius: 14px 18px 18px 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(238,223,234,.72), transparent 31%),
    linear-gradient(90deg, rgba(39,35,43,.10), transparent 5%, transparent 96%, rgba(39,35,43,.08)),
    #f7f6f8;
  box-shadow: inset 0 0 0 9px #eeedf0, inset 0 0 0 10px #cbc7cf, inset 0 0 70px rgba(90,80,96,.06), 12px 16px 26px rgba(38,34,42,.22);
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: left .6s ease, transform .92s cubic-bezier(.2,.72,.12,1), opacity .18s linear .76s;
}
.front-cover strong {
  display: block;
  font-weight: 400;
  font-size: clamp(32px, 4.7vw, 68px);
  letter-spacing: .12em;
  margin: 12px 0 3px;
}
.front-cover small, .cover-kicker { display: block; letter-spacing: .26em; color: #77717c; }
.front-cover small { font-size: clamp(11px, 1.1vw, 15px); }
.cover-kicker { font: 9px/1.2 ui-monospace, Consolas, monospace; }
.cover-crest { width: 34%; height: auto; margin-top: 9%; fill: none; stroke: #57515d; stroke-width: 2; }
.cover-crest .cut { fill: #f7f6f8; }
.cover-rule { position: absolute; left: 17%; right: 17%; height: 1px; background: #aaa5ae; }
.cover-rule::after { content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-53%); background: #f7f6f8; padding: 0 9px; font-size: 9px; }
.cover-rule-top { top: 14%; }
.cover-rule-bottom { bottom: 14%; }
.cover-corner { position: absolute; width: 35px; height: 35px; border-color: #b4afb8; border-style: solid; }
.c1 { left: 23px; top: 23px; border-width: 1px 0 0 1px; }
.c2 { right: 23px; top: 23px; border-width: 1px 1px 0 0; }
.c3 { left: 23px; bottom: 23px; border-width: 0 0 1px 1px; }
.c4 { right: 23px; bottom: 23px; border-width: 0 1px 1px 0; }
.book-shell:not(.is-closed) .front-cover { left: 50%; transform: rotateY(-178deg); opacity: 0; pointer-events: none; }
.is-closed .spread, .is-closed .spine, .is-closed .page-stack, .is-closed .edge-control, .is-closed .bookmark, .is-closed .folio-status { opacity: 0; pointer-events: none; }
.turn-sheet {
  display: none;
  position: absolute;
  z-index: 15;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}
.turn-sheet.is-active { display: block; }
.turn-sheet.is-prev { left: 0; transform-origin: right center; }
.turn-face { inset: 0; width: 100%; backface-visibility: hidden; border-radius: 3px 15px 15px 3px; }
.turn-back { transform: rotateY(180deg); border-radius: 15px 3px 3px 15px; }
.turn-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30,26,34,.21), transparent 28%, rgba(255,255,255,.16) 70%, rgba(30,26,34,.10));
  opacity: .35;
  backface-visibility: hidden;
  pointer-events: none;
}
.turn-sheet.animate-next { animation: turn-next .72s cubic-bezier(.24,.76,.16,1) forwards; }
.turn-sheet.animate-prev { animation: turn-prev .72s cubic-bezier(.24,.76,.16,1) forwards; }
@keyframes turn-next { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes turn-prev { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
.edge-control {
  position: absolute;
  z-index: 9;
  top: 44%;
  width: 34px;
  height: 70px;
  border: 0;
  background: rgba(249,248,251,.72);
  color: #85808a;
  font-size: 28px;
  cursor: pointer;
  opacity: .36;
  transition: opacity .2s, transform .2s;
}
.edge-control:hover, .edge-control:focus-visible { opacity: .95; }
.edge-prev { left: -18px; border-radius: 16px 0 0 16px; }
.edge-next { right: -18px; border-radius: 0 16px 16px 0; }
.bookmark {
  position: absolute;
  z-index: 8;
  right: 8.5%;
  top: -11px;
  border: 0;
  background: #d7c0d0;
  color: #574d56;
  width: 42px;
  height: 76px;
  clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  font: 8px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .11em;
  cursor: pointer;
}
.page-inner { position: relative; height: 100%; display: flex; flex-direction: column; }
.page-eyebrow { font: 9px/1.35 ui-monospace, Consolas, monospace; letter-spacing: .18em; color: #8b858f; text-transform: uppercase; }
.page-title { margin: clamp(18px, 3.2vh, 30px) 0 18px; font-weight: 400; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.28; letter-spacing: .055em; }
.page-date { position: absolute; top: 0; right: 0; font: 10px/1 ui-monospace, Consolas, monospace; color: #8d8790; letter-spacing: .12em; }
.page-body { font-size: clamp(13px, 1.25vw, 17px); line-height: 2.05; letter-spacing: .025em; }
.page-body p { margin: 0 0 1.25em; }
.page-margin { margin-top: auto; align-self: flex-end; max-width: 74%; color: #847c86; font-size: clamp(10px, 1vw, 13px); line-height: 1.7; transform: rotate(-1.2deg); }
.page-folio { position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); font: 9px/1 ui-monospace, Consolas, monospace; color: #9d98a1; letter-spacing: .16em; }
.ornament { width: 42px; height: 42px; fill: none; stroke: #756e79; stroke-width: 1.5; margin: 4px 0 12px; }
.ornament.crest { width: 76px; height: 56px; }
.ornament.star { width: 28px; height: 28px; }
.kind-inside .page-inner { border: 1px solid #c7c2ca; padding: 10% 9%; margin: 1%; outline: 5px double #dedbe1; }
.kind-inside .page-title { font-size: clamp(18px, 2vw, 28px); }
.page-stamp { margin-top: auto; align-self: flex-start; border: 1px solid #9c949f; padding: 7px 11px 6px; color: #7d747f; font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; transform: rotate(-4deg); }
.kind-title .page-inner { justify-content: center; align-items: center; text-align: center; }
.kind-title .page-title { font-size: clamp(28px, 3.4vw, 50px); margin: 12px 0 24px; }
.kind-title .page-body { max-width: 78%; font-size: clamp(12px, 1.15vw, 16px); }
.kind-title::after { content:""; position:absolute; inset: 10%; border: 1px solid #d6d1d9; pointer-events:none; }
.kind-contents .content-list { margin-top: 4px; }
.content-list { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: item; }
.content-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted #c5c0c8; font-size: clamp(12px, 1.1vw, 15px); }
.content-list li::before { counter-increment: item; content: counter(item, decimal-leading-zero); font: 9px/1 ui-monospace, Consolas, monospace; color: #9b949e; }
.page-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #ddd8df; color: #77717a; font-size: clamp(10px, .95vw, 13px); line-height: 1.7; }
.kind-scrap { background:
  linear-gradient(100deg, transparent 0 57%, rgba(231,219,229,.55) 57% 58%, transparent 58%),
  repeating-linear-gradient(0deg, transparent 0 28px, rgba(110,103,114,.055) 28px 29px),
  var(--paper); }
.scrap-ticket { width: 58%; margin: 12px 0 18px auto; padding: 14px 16px; border: 1px dashed #aaa4ad; background: #f0eff2; transform: rotate(2.5deg); font: 10px/1.6 ui-monospace, Consolas, monospace; letter-spacing: .09em; }
.scrap-label { display: inline-block; padding: 5px 9px; background: #dfcfd9; font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; transform: rotate(-2deg); }
.kind-black { color: #e9e6ec; background: radial-gradient(circle at 70% 20%, #28252e, #17161b 58%); border-color: #28252e; }
.kind-black .page-eyebrow, .kind-black .page-date, .kind-black .page-folio { color: #a9a3ad; }
.kind-black .page-body { font-family: ui-monospace, "Yu Gothic", monospace; font-size: clamp(11px, 1vw, 14px); letter-spacing: .08em; }
.kind-collage::before { content:""; position:absolute; width: 36%; aspect-ratio:1; right:8%; top:11%; border:1px solid #c6bdc6; transform:rotate(7deg); background: repeating-linear-gradient(45deg,#f4f1f4 0 6px,#ece7ec 6px 7px); }
.collage-labels { margin-top: auto; display: flex; flex-wrap: wrap; gap: 9px; max-width: 86%; }
.collage-labels span { padding: 5px 9px; border: 1px solid #bdb5c0; background: rgba(255,255,255,.72); font: 8px/1 ui-monospace,Consolas,monospace; letter-spacing:.12em; transform: rotate(var(--r,0deg)); }
.kind-letter .page-inner { margin: 2%; padding: 7% 8%; border: 1px solid #d6cbd3; background: linear-gradient(135deg, rgba(240,224,235,.45), transparent 45%); }
.kind-letter .page-inner::before, .kind-letter .page-inner::after { content:""; position:absolute; left:0; right:0; height:1px; background:#ddd4db; transform-origin:center; }
.kind-letter .page-inner::before { top:49%; transform:rotate(7deg); opacity:.35; }
.kind-letter .page-inner::after { top:49%; transform:rotate(-7deg); opacity:.35; }
.reveal-button { margin-top:auto; align-self:center; border:0; width:74px; height:74px; border-radius:50%; background:#c9aebf; color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 3px 7px rgba(70,55,66,.18); cursor:pointer; font-size:10px; letter-spacing:.08em; }
.reveal-panel { margin-top: 14px; padding: 13px 14px; border:1px solid #d8cfd6; background:#f6eff4; font-size: clamp(10px,1vw,13px); line-height:1.8; opacity:0; transform:translateY(5px); transition:.35s ease; }
.is-revealed .reveal-panel { opacity:1; transform:none; }
.is-revealed .reveal-button { transform:scale(.78); opacity:.55; }
.kind-vellum { background: linear-gradient(rgba(252,252,253,.78),rgba(252,252,253,.78)), repeating-linear-gradient(90deg, rgba(93,85,99,.05) 0 1px, transparent 1px 11px); }
.kind-vellum .page-title { letter-spacing: .24em; }
.kind-vellum::after { content:"PRIVATE"; position:absolute; right:-7%; bottom:15%; font:56px/1 Georgia,serif; letter-spacing:.16em; color:rgba(139,112,132,.08); transform:rotate(-90deg); }
.kind-archive .page-inner::after { content:"ARCHIVE"; position:absolute; right:-14px; top:46%; transform:rotate(90deg); color:#c2bbc4; font:8px/1 ui-monospace,Consolas,monospace; letter-spacing:.32em; }
.kind-taxonomy .content-list li { border-bottom-style: solid; }
.kind-blank .page-body { margin-top:auto; margin-bottom:auto; color:#7f7982; text-align:center; }
.kind-flower .page-inner::before { content:""; position:absolute; width:180px; height:180px; right:-30px; bottom:10%; border:1px solid rgba(129,112,128,.22); border-radius:52% 48% 46% 54%; transform:rotate(38deg); }
.kind-flower .ornament { width:96px; height:96px; stroke:#b09aa9; opacity:.55; margin-top:auto; }
.kind-pocket .page-inner::after { content:""; position:absolute; left:8%; right:8%; bottom:5%; height:29%; border:1px solid #c3b9c2; background:linear-gradient(155deg,#f0e7ed 0 49%,#e4d6df 50%); clip-path:polygon(0 22%,50% 0,100% 22%,100% 100%,0 100%); z-index:-1; }
.kind-pocket .content-list { width:78%; }
.kind-back-cover { background: linear-gradient(120deg,#eceaed,#f7f6f8 55%,#e5e2e7); }
.kind-back-cover .page-inner { align-items:center; justify-content:center; }
.kind-back-cover .ornament { width:92px; height:68px; opacity:.48; }
.folio-status { height: 24px; text-align:center; padding-top:12px; color:#77717a; font:9px/1 ui-monospace,Consolas,monospace; letter-spacing:.16em; transition:opacity .2s; }
.gesture-hint { position:fixed; bottom:13px; left:50%; transform:translateX(-50%); margin:0; color:#8e8992; font:9px/1.2 ui-monospace,Consolas,monospace; letter-spacing:.13em; white-space:nowrap; opacity:.72; }
.book-shell:not(.is-closed) + .gesture-hint { opacity:.55; }
.page.is-empty { background:transparent; border:0; box-shadow:none; }
.page.is-empty::before, .page.is-empty::after { display:none; }
@media (prefers-reduced-motion: reduce) {
  .front-cover, .turn-sheet, .reveal-panel { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 720px) {
  .scene { padding: 34px 18px 40px; }
  .book-shell { width: min(92vw, 500px); }
  .book { aspect-ratio: .72; max-height: 78vh; }
  .book-shell.single .page-left, .book-shell.single .stack-left, .book-shell.single .spine { display: none; }
  .book-shell.single .page-right { left: 0; right: auto; width: 100%; border-radius: 13px; }
  .book-shell.single .page-right::before { width: 7%; opacity:.45; }
  .book-shell.single .stack-right { left: 1%; right: 1%; width:98%; border-radius:13px; }
  .book-shell.single .turn-sheet { left: 0; width: 100%; transform-origin: left center; }
  .book-shell.single .turn-sheet.is-prev { left: 0; transform-origin: right center; }
  .book-shell.single .front-cover { left: 0; width: 100%; }
  .book-shell.single:not(.is-closed) .front-cover { left: 0; transform: rotateY(-178deg); }
  .page, .turn-face { padding: 38px 32px 44px; }
  .page-title { font-size: clamp(24px, 8vw, 36px); }
  .page-body { font-size: clamp(13px, 3.9vw, 16px); line-height: 1.95; }
  .edge-prev { left: -12px; }
  .edge-next { right: -12px; }
  .bookmark { right: 11%; }
  .home-link { top: 12px; left: 14px; }
  .gesture-hint { font-size:8px; max-width:86vw; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-height: 620px) and (min-width: 721px) {
  .book { max-height: 82vh; width: min(920px, calc(100vw - 90px)); margin-inline:auto; }
  .scene { padding-top: 24px; padding-bottom: 24px; }
  .page, .turn-face { padding-top: 28px; padding-bottom: 34px; }
}