html.reference-reading, html.reference-reading body { overflow: hidden; }
.reference-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: end; margin-top: clamp(54px, 7vw, 94px); padding: clamp(24px, 3vw, 38px); border: 1px solid #ffffff42; border-left: 3px solid #f01624; background: #080c10d9; color: #fff; }
.reference-card span { font: 500 12px/1.6 var(--mono); letter-spacing: .08em; color: #ff4350; }
.reference-card h3 { margin: 10px 0; font: 600 clamp(30px, 4vw, 54px)/1 var(--title); text-transform: uppercase; }
.reference-card p { max-width: 610px; margin: 0; color: #c7cdd2; font-size: 16px; line-height: 1.7; }
.reference-actions { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 10px; }
.reference-actions button, .reference-actions a { display: flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 54px; padding: 12px 16px; border: 1px solid #ffffff4a; background: #0e1419; color: #fff; text-decoration: none; font: 500 13px/1.3 var(--mono); cursor: pointer; }
.reference-actions b { color: #ff2635; font-size: 20px; font-weight: 400; }
.reference-actions button:hover, .reference-actions a:hover { border-color: #f01624; }
.reference-actions button:focus-visible, .reference-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.reference-reader { width: min(1080px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 28px); margin: auto; padding: clamp(16px, 2vw, 28px); box-sizing: border-box; overflow-y: auto; border: 1px solid #ffffff55; background: #080c10; color: #fff; }
.reference-reader::backdrop { background: #020406f2; }
.reference-reader[open] { animation: reference-in .2s ease-out; }
.reference-reader-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid #ffffff30; }
.reference-reader-top span { color: #ff4350; font: 500 11px/1.5 var(--mono); }
.reference-reader-top h2 { margin: 5px 0 0; font: 600 clamp(26px, 4vw, 42px)/1 var(--title); text-transform: uppercase; }
.reference-reader button, .reference-reader-controls a { min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff50; background: #111820; color: #fff; text-decoration: none; cursor: pointer; font: 500 13px/1.5 var(--mono); }
.reference-reader button:hover, .reference-reader-controls a:hover { border-color: #f01624; }
.reference-reader button:focus-visible, .reference-reader-controls a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.reference-reader figure { position: relative; isolation: isolate; margin: 24px auto; max-width: 760px; padding: 10px 11px 14px; border: 1px solid #ffffff2d; background: linear-gradient(135deg, #17232b, #070a0d 42%, #1a242b); box-shadow: 0 28px 84px #000b; }
.reference-reader figure::before { content: ''; position: absolute; z-index: -1; inset: 8px -16px -8px 13px; border: 1px solid #ffffff1d; background: repeating-linear-gradient(0deg, #3e4c55 0 1px, #151d23 1px 3px); box-shadow: 9px 11px 26px #000b; }
.reference-reader figure::after { content: ''; pointer-events: none; position: absolute; z-index: 2; inset: 10px 11px 47px; background: linear-gradient(112deg, #fff0 30%, #ffffff12 48%, #fff0 64%); mix-blend-mode: screen; }
.reference-reader figure img { display: block; width: 100%; height: auto; background: #f8f9fa; box-shadow: inset 0 0 0 1px #000, 0 18px 38px #000b; transform-origin: left center; will-change: transform, opacity; }
.reference-reader figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; color: #c7cdd2; font: 500 13px/1.5 var(--mono); }
.reference-reader-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #ffffff30; }
.reference-reader-controls > :last-child { justify-self: end; }
.reference-reader-controls a { display: flex; align-items: center; }
@keyframes reference-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes reference-page-turn-next { 0% { opacity: .38; transform: perspective(1500px) rotateY(-10deg) scaleX(.97); filter: brightness(.8); } 55% { opacity: .72; transform: perspective(1500px) rotateY(3deg) scaleX(1.01); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes reference-page-turn-previous { 0% { opacity: .38; transform: perspective(1500px) rotateY(10deg) scaleX(.97); filter: brightness(.8); } 55% { opacity: .72; transform: perspective(1500px) rotateY(-3deg) scaleX(1.01); } 100% { opacity: 1; transform: none; filter: none; } }
.reference-reader figure img.reference-page-turn-next { animation: reference-page-turn-next .5s cubic-bezier(.2,.75,.2,1); }
.reference-reader figure img.reference-page-turn-previous { transform-origin: right center; animation: reference-page-turn-previous .5s cubic-bezier(.2,.75,.2,1); }
@media (max-width: 760px) { .reference-card { grid-template-columns: minmax(0, 1fr); } .reference-actions { grid-template-columns: minmax(0, 1fr); } .reference-reader-controls { grid-template-columns: 1fr 1fr; } .reference-reader-controls a { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .reference-reader[open], .reference-reader figure img.reference-page-turn-next, .reference-reader figure img.reference-page-turn-previous { animation: none; } }