.profile-intro { max-width: 1440px; margin: 0 auto; padding: 48px 32px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.profile-intro .profile-eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .08em; margin: 0 0 12px; }
.profile-intro h1 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -.04em; margin: 0; }
.profile-intro .profile-description { max-width: 500px; color: #66665f; font-size: 13px; line-height: 1.7; margin: 15px 0 0; }
.profile-download, .profile-control, .profile-jump button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid #c9c9c2; border-radius: 6px; background: #fff; color: #222; padding: 10px 16px; font: inherit; font-size: 12px; line-height: 1.35; cursor: pointer; text-decoration: none; }
.profile-download { white-space: nowrap; border-color: var(--accent); color: var(--accent); background: transparent; }
.profile-control:hover:not(:disabled), .profile-jump button:hover, .profile-download:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.profile-control:disabled { opacity: .35; cursor: default; }
.profile-reader button:focus-visible, .profile-reader input:focus-visible, .profile-reader summary:focus-visible, .profile-download:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.profile-reader { margin: 0 auto 80px; width: 100%; background: #eeeee8; border-block: 1px solid #ddddd6; }
.profile-toolbar { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 18px 32px; }
.profile-toolbar-group { display: flex; align-items: center; gap: 12px; }
.profile-counter { min-width: 105px; text-align: center; color: #50504a; font-size: 12px; font-variant-numeric: tabular-nums; }
.profile-jump { display: flex; align-items: center; gap: 9px; font-size: 12px; margin: 0; }
.profile-jump input { width: 62px; min-height: 44px; background: #fff; color: #222; border: 1px solid #c9c9c2; border-radius: 6px; font: inherit; padding: 9px; font-variant-numeric: tabular-nums; }
.profile-canvas { padding: 12px 28px 28px; overflow: hidden; }
.profile-book { --profile-page-width: min(42vw, 490px); display: flex; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; position: relative; perspective: 1800px; isolation: isolate; }
.profile-page { width: var(--profile-page-width); flex: 0 0 var(--profile-page-width); margin: 0; position: relative; background: #fff; box-shadow: 0 8px 24px #0002; }
.profile-page img { display: block; width: 100%; height: auto; aspect-ratio: 1132 / 1600; object-fit: contain; background: #fff; }
.profile-book[data-spread="true"] .profile-page:first-child { box-shadow: -6px 8px 24px #0002; }
.profile-book[data-spread="true"] .profile-page:last-child { box-shadow: 6px 8px 24px #0002; }
.profile-book[data-spread="true"]::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 18px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #00000012, transparent); pointer-events: none; z-index: 2; }
.profile-turn-sheet { position: absolute; top: 0; bottom: 0; width: var(--profile-page-width); pointer-events: none; backface-visibility: hidden; transform-style: preserve-3d; z-index: 3; }
.profile-turn-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; }
.profile-turn-sheet.is-forward { right: 0; transform-origin: left center; animation: profile-turn-forward .5s ease-in-out both; }
.profile-turn-sheet.is-backward { left: 0; transform-origin: right center; animation: profile-turn-backward .5s ease-in-out both; }
@keyframes profile-turn-forward { from { transform: rotateY(0deg); filter: brightness(1); } to { transform: rotateY(-165deg); filter: brightness(.8); } }
@keyframes profile-turn-backward { from { transform: rotateY(0deg); filter: brightness(1); } to { transform: rotateY(165deg); filter: brightness(.8); } }
.profile-hint { max-width: 1040px; margin: 0 auto; padding: 0 24px 18px; color: #6b6b63; font-size: 11px; line-height: 1.6; text-align: center; }
.profile-status { margin: 0; color: #9d2222; font-size: 12px; line-height: 1.5; text-align: center; padding: 0 24px 12px; }
.profile-status:empty { display: none; }
.profile-transcript { max-width: 1040px; margin: 0 auto; padding: 0 24px 24px; }
.profile-transcript summary { width: fit-content; cursor: pointer; color: #55554f; font-size: 12px; padding: 12px 0; }
.profile-transcript div { max-height: 320px; overflow: auto; padding: 20px; background: #fafaf7; border: 1px solid #ddddd6; }
.profile-transcript pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.75 var(--font); color: #444; margin: 0 0 22px; }
.profile-transcript pre:last-child { margin-bottom: 0; }
.profile-reader:fullscreen { overflow-y: auto; background: #eeeee8; margin: 0; padding: 16px 0; }
.profile-reader:fullscreen .profile-book { --profile-page-width: min(42vw, calc((100dvh - 190px) * .7075)); }
.profile-reader:fullscreen .profile-transcript { display: none; }
.profile-reader [hidden] { display: none !important; }
@media (max-width: 760px) {
  .profile-intro { padding: 24px 18px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .profile-intro .profile-description { font-size: 12px; }
  .profile-intro h1 { font-size: clamp(32px, 8vw, 46px); }
  .profile-toolbar { padding: 16px 14px; gap: 12px; justify-content: center; }
  .profile-toolbar-group { justify-content: center; gap: 8px; width: 100%; }
  .profile-control, .profile-jump button { padding: 10px 12px; }
  .profile-counter { min-width: 90px; }
  .profile-canvas { padding: 0 14px 18px; }
  .profile-book, .profile-reader:fullscreen .profile-book { --profile-page-width: min(calc(100vw - 28px), 530px); }
  .profile-reader { margin-bottom: 42px; }
  .profile-hint { text-align: left; padding-inline: 18px; }
  .profile-transcript { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-turn-sheet { animation: none !important; }
}