.resume-page { min-height: 100vh; background: #050d1a; color: #eef6ff; }
.resume-main { position: relative; min-height: 100vh; padding: 118px 20px 60px; isolation: isolate; background: #050d1a; }
.resume-main::before { content: ''; position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 11, 21, .18), rgba(3, 11, 21, .5)), url('assets/resume-drafting-table.53ba69f79182.webp') center center / cover no-repeat; }
.resume-main > * { position: relative; z-index: 1; }
.resume-heading { text-align: center; }
.resume-heading .eyebrow { justify-content: center; margin-bottom: 8px; }
.resume-heading h1 { margin: 0; font: 800 clamp(46px, 5.8vw, 80px)/.92 var(--display); letter-spacing: -.045em; }
.resume-heading h1 em { color: var(--blue); font-style: normal; }
.resume-experience { max-width: 620px; margin: 24px auto 0; }
.resume-stage { width: min(84vw, 410px); margin: auto; perspective: 1200px; touch-action: pan-y; cursor: grab; filter: drop-shadow(16px 24px 24px rgba(0, 0, 0, .68)); }
.resume-stage:active { cursor: grabbing; }
.resume-frame-list { width: 100%; }
.resume-print-sheet { display: contents; }
.resume-frame { display: none; width: 100%; aspect-ratio: 4 / 5; }
.resume-frame.is-current { display: block; }
.resume-frame.is-entering-forward { animation: flip-in-forward .12s ease-out; transform-origin: left center; }
.resume-frame.is-entering-backward { animation: flip-in-backward .12s ease-out; transform-origin: right center; }
.resume-frame-face { position: relative; width: 100%; height: 100%; overflow: hidden; background: rgba(3, 17, 31, .78); border: 1px solid rgba(119, 203, 255, .45); box-shadow: 5px 0 0 #224b68; }
.resume-frame-opening .resume-frame-face { background: #f7f5f0; border-color: #c5c4bf; box-shadow: 5px 0 0 #b7b4aa; }
.resume-frame-top, .resume-frame-footer { position: absolute; z-index: 2; left: 5%; right: 5%; display: flex; justify-content: space-between; color: #8fcaf1; font: 700 clamp(7px, .82vw, 9px)/1.2 var(--mono); letter-spacing: .11em; }
.resume-frame-top { top: 5%; border-bottom: 1px solid rgba(119, 203, 255, .45); padding-bottom: 7px; }
.resume-frame-footer { bottom: 4%; border-top: 1px solid rgba(119, 203, 255, .45); padding-top: 7px; }
.resume-frame-opening .resume-frame-top, .resume-frame-opening .resume-frame-footer { display: none; }
.resume-art-layer { position: absolute; inset: 0; user-select: none; pointer-events: none; }
.resume-frame-art { display: block; width: 100%; height: 100%; }
.resume-rain-group { font: 800 11px 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', var(--mono); }
.resume-rain-far { font-size: 7.5px; filter: blur(.9px); }
.resume-rain-middle { font-size: 10px; filter: blur(.25px); }
.resume-rain-near { font-size: 14px; }
.resume-rain-head { fill: #f1fdff; filter: drop-shadow(0 0 3px #b5f4ff) drop-shadow(0 0 7px #4dbdff); }
.resume-rain-spark { fill: #f1fdff; filter: drop-shadow(0 0 3px #b5f4ff) drop-shadow(0 0 9px #4dbdff); }
.resume-rain-hot { fill: #8edaff; }
.resume-rain-mid { fill: #368dcb; }
.resume-rain-tail { fill: #19517d; }
.resume-formed-group { font: 900 13px 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', var(--mono); filter: drop-shadow(0 0 3px #55c5ff) drop-shadow(0 0 8px #278fef); }
.resume-settled-character { fill: #dcf6ff; }
.resume-forming-character { fill: #79d3ff; }
.resume-letter-outline { fill: none; stroke: #b8ebff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 3px #6bcfff); }
.resume-sky-character-group { font: 900 11px 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', var(--mono); filter: drop-shadow(0 0 4px #6bd0ff) drop-shadow(0 0 10px #278fef); }
.resume-sky-dim { fill: #8fd8fa; opacity: .7; }
.resume-sky-mid { fill: #cbf0ff; opacity: .9; }
.resume-sky-bright { fill: #f4fcff; opacity: 1; }
.resume-sky-helmet-edge { fill: #f4fcff; }
.resume-sky-visor { fill: #205d89; }
.resume-sky-pack-core { fill: #3f9ccc; }
.resume-controls { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 19px auto 0; }
.resume-controls button, .resume-actions button, .resume-actions a { min-height: 44px; border: 1px solid rgba(143, 201, 246, .45); background: rgba(11, 29, 52, .82); color: #eaf5ff; font: 700 11px var(--mono); letter-spacing: .1em; cursor: pointer; text-decoration: none; }
.resume-controls button { min-width: 72px; padding: 0 11px; }
.resume-controls button span, .resume-actions span { color: #8bc7f4; font-size: 16px; vertical-align: -1px; }
.resume-controls button:hover:not(:disabled), .resume-actions button:hover, .resume-actions a:hover { border-color: #8bc7f4; background: #143a60; }
.resume-controls button:disabled { opacity: .38; cursor: default; }
.resume-controls > span { min-width: 125px; color: #adcadf; text-align: center; font: 700 10px var(--mono); letter-spacing: .11em; }
.resume-scrub-label { display: block; margin: 15px auto 5px; color: #829caf; text-align: center; font: 700 9px var(--mono); letter-spacing: .16em; }
.resume-scrub { display: block; width: min(84vw, 410px); margin: 0 auto; accent-color: #8bc7f4; }
.resume-actions { display: flex; justify-content: center; gap: 12px; margin-top: 21px; }
.resume-actions button, .resume-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; }
.resume-hint { margin: 15px 0 0; color: #7891a7; text-align: center; font: 600 10px var(--mono); letter-spacing: .1em; }
.resume-gesture-hint { margin: 10px 0 0; color: #a9cde8; text-align: center; font: 600 10px var(--mono); letter-spacing: .1em; }
.resume-next { display: block; width: fit-content; margin: 20px auto 0; color: #91c7ec; font: 700 10px var(--mono); letter-spacing: .12em; }
.resume-next:hover { color: white; }
.resume-transcript { max-width: 800px; margin: 48px auto 0; border-top: 1px solid rgba(143, 201, 246, .25); }
.resume-transcript summary { padding: 18px 0; color: #9bcced; font: 700 11px var(--mono); letter-spacing: .12em; cursor: pointer; }
.resume-transcript pre { overflow-wrap: anywhere; white-space: pre-wrap; color: #d4e0ec; font: 14px/1.55 var(--body); }
@keyframes flip-in-forward { from { transform: rotateY(64deg); opacity: .7; } to { transform: rotateY(0); opacity: 1; } }
@keyframes flip-in-backward { from { transform: rotateY(-64deg); opacity: .7; } to { transform: rotateY(0); opacity: 1; } }
@media (max-width: 700px) {
  .resume-main { padding: 98px 14px 38px; }
  .resume-main::before { background-position: 16% center; }
  .resume-heading h1 { font-size: clamp(38px, 10vw, 60px); }
  .resume-experience { margin-top: 20px; }
  .resume-controls { gap: 5px; }
  .resume-controls button { min-width: 63px; padding: 0 6px; font-size: 9px; }
  .resume-controls > span { min-width: 108px; font-size: 9px; }
  .resume-actions button, .resume-actions a { padding: 0 10px; font-size: 9px; }
  .resume-hint, .resume-gesture-hint { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .resume-frame.is-entering-forward, .resume-frame.is-entering-backward { animation: none; }
}
@media print {
  @page { size: letter; margin: .25in; }
  html, body, .resume-page, .resume-main { width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; background: white !important; }
  .resume-main::before, .site-header, .skip-link, .resume-heading, .resume-controls, .resume-scrub-label, .resume-scrub, .resume-actions, .resume-hint, .resume-gesture-hint, .resume-next, .resume-transcript { display: none !important; }
  .resume-experience, .resume-stage, .resume-frame-list { display: block; width: 8in; max-width: none; height: auto; margin: 0; padding: 0; perspective: none; filter: none; }
  .resume-print-sheet { display: grid; grid-template-columns: 4in 4in; grid-template-rows: 5in 5in; width: 8in; height: 10in; margin: 0; break-after: page; page-break-after: always; }
  .resume-print-sheet:last-child { break-after: auto; page-break-after: auto; }
  .resume-frame, .resume-frame:not(.is-current) { display: block !important; width: 4in; height: 5in; margin: 0; padding: 0; aspect-ratio: auto; animation: none !important; transform: none !important; }
  .resume-frame-face, .resume-frame-opening .resume-frame-face { background: white; box-shadow: none; border: 1px dashed #888; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .resume-frame-top, .resume-frame-footer { color: #496478; border-color: #a1b3bf; font-size: 8px; }
  .resume-rain-far, .resume-rain-middle, .resume-rain-head, .resume-rain-spark { filter: none; }
  .resume-rain-head, .resume-rain-spark { fill: #4d7187; }
  .resume-rain-hot { fill: #6e8da0; }
  .resume-rain-mid { fill: #a1b3bf; }
  .resume-rain-tail { fill: #bfccd3; }
  .resume-formed-group { filter: none; }
  .resume-settled-character, .resume-forming-character { fill: #163b56; }
  .resume-letter-outline { stroke: #2a536d; filter: none; }
  .resume-sky-character-group { filter: none; }
  .resume-sky-dim { fill: #617e91; opacity: .8; }
  .resume-sky-mid { fill: #244d68; opacity: .9; }
  .resume-sky-bright { fill: #102f45; opacity: 1; }
  .resume-sky-helmet-edge { fill: #173e58; }
  .resume-sky-visor { fill: #112c40; }
  .resume-sky-pack-core { fill: #51758d; }
}