:root {
  --paper: #F6F3EC;
  --paper-2: #EFEBE2;
  --ink: #141414;
  --ink-soft: #3A3A3A;
  --mute: #8A8680;
  --line: #1A1A1A;
  --rule: #C9C4B8;
  --accent: #1F6F6F;
  --accent-soft: #CFE3E0;
  --accent-2: #E8F1EE;
  --halftone: #D9D4C6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #2a2a28; }
body {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 1180px; margin: 0 auto; padding: 48px 24px 96px; }
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  color: #E8E4D9; padding: 0 6px 22px;
  border-bottom: 1px solid #444; margin-bottom: 36px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}
.masthead .title { font-size: 26px; letter-spacing: .14em; font-weight: 700; }
.masthead .title .small {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px; letter-spacing: .3em; color: #9a9a95;
  margin-right: 14px; font-weight: 500;
}
.masthead .meta {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px; letter-spacing: .25em; color: #9a9a95;
}
.page {
  background: var(--paper); position: relative;
  width: 100%; aspect-ratio: 1 / 1.414;
  margin: 0 auto 56px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.3);
  overflow: hidden;
  background-image: radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 4px 4px;
}
.page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), transparent 8%, transparent 92%, rgba(0,0,0,.06)),
    linear-gradient(90deg, rgba(0,0,0,.05), transparent 4%, transparent 96%, rgba(0,0,0,.05));
}
.page-inner { position: absolute; inset: 3.4% 4%; display: grid; gap: 14px; }
.page-strip {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 20px;
  font-family: "Shippori Mincho", serif;
  font-size: 11px; letter-spacing: .3em; color: #6a6660;
}
.page-strip .pn { font-weight: 700; color: #2a2a28; }
.panel {
  position: relative; background: var(--paper);
  border: 2px solid var(--line); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.panel.tilt-l { transform: rotate(-.3deg); }
.panel.tilt-r { transform: rotate(.3deg); }
.panel-scene { position: absolute; inset: 0; overflow: hidden; }
.caption {
  position: absolute; background: var(--paper);
  border: 1.5px solid var(--line); padding: 8px 12px 9px;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 14px; line-height: 1.55; font-weight: 500;
  color: var(--ink); max-width: 58%;
  box-shadow: 2px 2px 0 var(--line); z-index: 5;
}
.caption.top-l { top: 10px; left: 10px; }
.caption.top-r { top: 10px; right: 10px; }
.caption.bot-l { bottom: 10px; left: 10px; }
.caption.bot-r { bottom: 10px; right: 10px; }
.bubble {
  position: absolute; background: #fff;
  border: 2px solid var(--line); border-radius: 50% / 42%;
  padding: 10px 16px; font-size: 14px; line-height: 1.45;
  font-weight: 500; max-width: 52%; z-index: 6;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.bubble.thought { border-style: dashed; background: #fbfaf4; }
.bubble .em { color: var(--accent); font-weight: 900; }
.bubble .tail {
  position: absolute; width: 22px; height: 22px;
  background: #fff; border: 2px solid var(--line);
  transform: rotate(45deg); border-top: none; border-left: none; z-index: -1;
}
.sfx {
  position: absolute;
  font-family: "Yuji Syuku", "Shippori Mincho", serif;
  font-weight: 900; color: var(--ink); line-height: .9;
  z-index: 7; pointer-events: none; letter-spacing: -.02em;
  text-shadow:
    2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
    2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff,
    3px 3px 0 var(--line);
}
.halftone {
  background-image: radial-gradient(var(--halftone) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
}
.halftone.dense { background-size: 4px 4px; }
.halftone.teal {
  background-image: radial-gradient(var(--accent-soft) 1.6px, transparent 1.8px);
  background-size: 5px 5px; background-color: var(--accent-2);
}
.speedlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.28) 14px 15px, transparent 15px 28px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%);
}
.tag {
  position: absolute;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  background: #fff; border: 1.5px solid var(--line);
  color: var(--ink); z-index: 4; letter-spacing: .04em;
}
.tag.accent { background: var(--accent); color: #fff; border-color: var(--accent); }