.scene-note {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: min(75dvh, 680px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line, #dbdedf);
  border-radius: 15px;
  background: var(--surface, #fff);
  color: var(--ink, #1c1c1e);
  box-shadow: 0 16px 64px #0003;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
.scene-note[open] { display: flex; flex-direction: column; }
.scene-note::backdrop { background: rgb(17 26 30 / 38%); }
.scene-note * { box-sizing: border-box; }
.scene-note-header { flex: 0 0 auto; padding: 22px 24px 17px; border-bottom: 1px solid var(--line, #dbdedf); }
.scene-note-eyebrow { margin: 0 0 5px; color: var(--muted, #646871); font-size: 10px; line-height: 1.5; letter-spacing: .1em; }
.scene-note h2 { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 600; }
.scene-note-source-title { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted, #646871); overflow-wrap: anywhere; }
.scene-note-scroll { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 22px 24px; -webkit-overflow-scrolling: touch; }
.scene-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: 'Iowan Old Style', 'Songti TC', 'PMingLiU', serif; font-size: 17px; line-height: 1.9; letter-spacing: .025em; }
.scene-note-footer { flex: 0 0 auto; padding: 0 16px 16px; }
.scene-note-navigation { display: flex; align-items: center; justify-content: space-between; gap: 5px; border-top: 1px solid var(--line, #dbdedf); padding-top: 8px; }
.scene-note button { min-width: 44px; min-height: 44px; border: 0; border-radius: 9px; padding: 10px 12px; color: var(--accent, #366984); background: transparent; font: 500 13px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; touch-action: manipulation; cursor: pointer; }
.scene-note button:disabled { opacity: .4; cursor: default; }
.scene-note button:not(:disabled):hover { background: color-mix(in srgb, var(--accent, #366984) 7%, var(--surface, #fff)); }
.scene-note-counter { margin: 0; color: var(--muted, #646871); font-size: 11px; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }
.scene-note .scene-note-close { display: block; width: 100%; margin-top: 5px; background: var(--soft, #e6ecef); color: var(--ink, #1c1c1e); font-size: 14px; }
.scene-note-status { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted, #646871); }
.scene-note-status:not(:empty) { padding: 8px 8px 0; }
.scene-note :focus-visible { outline: 2px solid var(--accent, #366984); outline-offset: -3px; }
@media (max-width: 359px) {
  .scene-note { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: 75dvh; }
  .scene-note-header { padding: 16px 18px 12px; }
  .scene-note-scroll { padding: 16px 18px; }
  .scene-note-text { font-size: 16px; line-height: 1.85; }
  .scene-note-footer { padding: 0 10px 12px; }
}
@media (max-height: 520px) {
  .scene-note { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .scene-note-header { padding-block: 10px; }
  .scene-note-scroll { padding-block: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-note, .scene-note * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}