otobon-shiori-no-oto {
  --shiori-bg: rgba(28, 22, 18, 0.96);
  --shiori-fg: #f7efe4;
  --shiori-accent: #b8874b;
  --shiori-muted: #b9aa98;
  --shiori-panel-width: min(420px, calc(100vw - 88px));
  --shiori-tab-height: 88px;
  --shiori-tab-width: 42px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147480000;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--shiori-fg);
}
.otobon-shiori-shell { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; }
.otobon-shiori-rail { display: flex; flex-direction: column; gap: 6px; }
.otobon-shiori-tab {
  width: var(--shiori-tab-width); min-height: var(--shiori-tab-height); padding: 10px 7px;
  writing-mode: vertical-rl; text-orientation: mixed; border: 1px solid rgba(255,255,255,.18);
  border-right: 0; border-radius: 10px 0 0 10px; cursor: pointer;
  background: var(--shiori-bg); color: var(--shiori-fg); box-shadow: 0 10px 28px rgba(0,0,0,.28);
  letter-spacing: .08em; font: inherit; transition: transform .18s ease, background .18s ease;
}
.otobon-shiori-tab:hover, .otobon-shiori-tab[aria-expanded="true"] { transform: translateX(-6px); background: color-mix(in srgb, var(--shiori-bg) 82%, var(--shiori-accent)); }
.otobon-shiori-tab--author { border-left: 3px solid #9c6f35; }
.otobon-shiori-tab--work { border-left: 3px solid #7f3f49; }
.otobon-shiori-tab--detour { border-left: 3px solid #4f6f63; }
.otobon-shiori-tab--trail { border-left: 3px solid #5a617f; }
.otobon-shiori-tab--world { border-left: 3px solid #745b8f; }
.otobon-shiori-panel {
  width: var(--shiori-panel-width); max-height: min(72vh, 720px); overflow: auto;
  background: var(--shiori-bg); border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38); backdrop-filter: blur(12px);
}
.otobon-shiori-panel[hidden] { display: none; }
.otobon-shiori-panel__header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: inherit; border-bottom: 1px solid rgba(255,255,255,.12); z-index: 2; }
.otobon-shiori-panel__header strong { font-size: 1rem; letter-spacing: .06em; }
.otobon-shiori-close { appearance: none; border: 0; background: transparent; color: var(--shiori-muted); cursor: pointer; font: inherit; font-size: .82rem; }
.otobon-shiori-tree { padding: 10px; }
.otobon-shiori-node { margin-left: calc(var(--otobon-shiori-depth, 0) * 10px); border-left: 1px solid rgba(255,255,255,.08); padding-left: 10px; }
.otobon-shiori-branch > summary, .otobon-shiori-link, .otobon-shiori-label { display: block; padding: 11px 12px; border-radius: 10px; color: var(--shiori-fg); text-decoration: none; }
.otobon-shiori-branch > summary { cursor: pointer; list-style: none; }
.otobon-shiori-branch > summary::-webkit-details-marker { display: none; }
.otobon-shiori-branch > summary::before { content: "＋"; margin-right: .55em; color: var(--shiori-accent); }
.otobon-shiori-branch[open] > summary::before { content: "−"; }
.otobon-shiori-link:hover, .otobon-shiori-branch > summary:hover { background: rgba(255,255,255,.07); }
.otobon-shiori-description { display: block; margin: -7px 12px 10px; color: var(--shiori-muted); line-height: 1.55; }
.otobon-shiori-empty { margin: 0; padding: 18px; color: var(--shiori-muted); }
@media (max-width: 720px) {
  otobon-shiori-no-oto { top: auto; bottom: 10px; transform: none; }
  .otobon-shiori-shell { align-items: flex-end; }
  .otobon-shiori-rail { gap: 4px; }
  .otobon-shiori-tab { --shiori-tab-height: 74px; --shiori-tab-width: 36px; font-size: .82rem; }
  .otobon-shiori-panel { max-height: 62vh; width: min(360px, calc(100vw - 58px)); }
}
@media (prefers-reduced-motion: reduce) {
  .otobon-shiori-tab { transition: none; }
}