@charset "UTF-8";
@font-face { font-family: "Pixel Latin"; src: url("assets/pixel-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
:root {
  --paper: #f7f5e9;
  --paper-solid: #fbf9ee;
  --ink: #22392f;
  --green: #3d663f;
  --green-dark: #294b31;
  --muted: #70796a;
  --line: #d6d9c7;
  --mono: "Courier New", "Microsoft YaHei", monospace;
  --body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; background-image: linear-gradient(#a7ae8110 1px, transparent 1px), linear-gradient(90deg, #a7ae8110 1px, transparent 1px); background-size: 22px 22px; }
body.dialog-open { overflow: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; }
button, a[href] { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { border-radius: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid #be7a32; outline-offset: 6px; }
::selection { background: #d3dfaa; color: #1d3628; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--ink); color: white; }
.skip-link:focus { top: 8px; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #81907a; background: #f7f5e9f5; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; gap: 15px; align-items: center; white-space: nowrap; font: 400 12px / 1.7 "Pixel Latin", var(--mono); letter-spacing: 0; }
.brand-icon { width: 34px; height: 34px; flex-shrink: 0; }
.brand-slash { color: #8d9a7a; margin-inline: 3px; }
.main-nav { display: flex; align-items: center; gap: 38px; font-size: 14px; font-weight: 700; }
.main-nav > a { position: relative; padding: 9px 0; }
.main-nav > a:not(.nav-contact)::after { content: ""; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform .16s; }
.main-nav > a:hover::after, .main-nav > a[aria-current]::after { transform: scaleX(1); }
.main-nav > a.nav-contact { border: 1.5px solid var(--ink); padding: 8px 18px; box-shadow: 2px 2px 0 #cbd0bd; }
.nav-contact span { padding-left: 12px; }
.nav-contact:hover { background: #e9ecd9; }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--ink); padding: 8px 12px; font-size: 14px; }
.hero { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 8px; padding-top: 36px; padding-bottom: 24px; min-height: 548px; }
.hero-copy { position: relative; z-index: 1; padding: 16px 0 30px; }
.eyebrow { font: 700 13px / 1.5 var(--mono); letter-spacing: 2px; color: var(--muted); }
.tiny-cross { color: #7c9a53; padding-right: 7px; font-size: 17px; }
h1 { font-size: clamp(42px, 4.55vw, 66px); line-height: 1.35; letter-spacing: 1px; font-weight: 900; margin-top: 22px; }
.highlight { color: var(--green); }
.hero-description { margin-top: 20px; color: #697467; line-height: 1.95; font-size: 16px; white-space: pre-line; }
.hero-actions { display: flex; gap: 22px; margin-top: 30px; padding: 3px; }
.pixel-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 49px; padding: 10px 24px; border: 0; font-size: 15px; font-weight: 700; line-height: 1.6; text-align: center; background: var(--paper-solid); box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 3px 6px 0 #b3b99c, inset 0 3px 0 #ffffff80, inset 0 -3px 0 #00000012; transition: transform .15s, background .15s, box-shadow .15s; }
.pixel-button.primary { background: var(--green); color: #faf8e8; }
.pixel-button[href]:hover { transform: translateY(-3px); background: #e9ecd9; }
.pixel-button.primary[href]:hover { background: #4d784a; }
.pixel-button[href]:active { transform: translate(2px, 2px); }
.pixel-button span { font: bold 22px / 1 var(--mono); }
.pixel-button[aria-disabled="true"] { color: #777c6f; background: #edeedf; box-shadow: 0 -2px 0 #a2ab95, 0 2px 0 #a2ab95, -2px 0 0 #a2ab95, 2px 0 0 #a2ab95, 2px 5px 0 #d8dbc9; cursor: default; }
.hero-note { margin-top: 28px; font-size: 12px; letter-spacing: 1px; color: #8a927f; }
.hero-note span { color: #a1a78f; padding-inline: 3px; }
.hero-art { position: relative; min-width: 0; display: flex; justify-content: center; align-items: center; aspect-ratio: 1.15; }
.island { width: 98%; height: auto; max-height: 515px; object-fit: contain; filter: drop-shadow(0 12px 0 #34432508); animation: float 7s ease-in-out infinite; }
.scene-index { position: absolute; top: 8px; right: 0; font: 700 10px / 1 var(--mono); letter-spacing: 1.8px; color: #889680; }
.scene-index span { color: #b9bfaa; margin-inline: 8px; }
.scene-caption { position: absolute; bottom: 2px; font: 12px / 1.5 var(--body); letter-spacing: 2px; color: #839176; }
.scene-caption span { margin-inline: 10px; }
.section { padding-top: 35px; padding-bottom: 36px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.section-number { font-size: 12px; letter-spacing: 1.8px; margin-bottom: 6px; }
h2 { font-size: 30px; line-height: 1.5; font-weight: 800; letter-spacing: 1px; }
.heading-pixel { display: inline-block; width: 7px; height: 7px; background: #839e55; margin-left: 13px; vertical-align: middle; box-shadow: 7px -7px 0 #bdc99d; }
.filters { display: flex; border: 1px solid #c5ccb6; padding: 3px; background: #faf9ed; }
.filter { background: transparent; border: 0; padding: 7px 18px; min-height: 38px; font-size: 14px; }
.filter span { margin-left: 6px; font: 12px var(--mono); opacity: .7; }
.filter:hover { background: #e6ebd7; }
.filter.active { color: #fffceb; background: var(--green); box-shadow: inset 0 0 0 1px #2f5639; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.project-card { position: relative; display: block; text-align: left; min-width: 0; padding: 0; border: 2px solid var(--ink); background: var(--paper-solid); box-shadow: 4px 4px 0 #cdd2ba; transition: transform .18s, box-shadow .18s; overflow: hidden; }
.project-card:hover { transform: translateY(-5px); box-shadow: 5px 9px 0 #bdc8a6; }
.project-card:active { transform: translateY(-1px); }
.card-visual { position: relative; aspect-ratio: 1.66; border-bottom: 2px solid var(--ink); overflow: hidden; background: #d5e1c6; }
.project-image { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transition: transform .35s; }
.project-card:hover .project-image { transform: scale(1.035); }
.example-badge { position: absolute; top: 12px; left: 12px; background: #f8f6e8ed; border: 1px solid #43574166; padding: 2px 8px; color: #43533c; font-size: 12px; line-height: 1.7; }
.card-body { padding: 16px 20px 20px; }
.card-topline { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.card-category { letter-spacing: 2px; }
.card-number { font: 12px var(--mono); color: #939b86; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.card-title h3 { font-size: 23px; font-weight: 800; letter-spacing: 1px; }
.card-arrow { font: 30px / 1 var(--mono); transition: transform .2s; }
.project-card:hover .card-arrow { transform: translate(2px, -2px); }
.card-description { font-size: 13px; line-height: 1.8; color: #76806e; margin-top: 4px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.card-tags span { padding: 2px 8px; background: #edf0df; font-size: 12px; color: #67765b; }
.works-footnote { text-align: right; margin-top: 20px; font-size: 12px; color: #859079; }
.works-footnote span { color: #6d8553; }
.interface-art { position: relative; height: 100%; width: 100%; overflow: hidden; background-color: #89b8d4; background-image: linear-gradient(#d8edf32b 1px, transparent 1px), linear-gradient(90deg, #d8edf32b 1px, transparent 1px); background-size: 20px 20px; }
.mini-window { position: absolute; background: #f7f4e7; border: 2px solid #304955; box-shadow: 4px 4px 0 #395d6c55; }
.mini-titlebar { height: 23px; padding: 1px 7px; background: #668eac; border-bottom: 2px solid #304955; color: #f7f4e7; font: bold 10px / 19px var(--mono); letter-spacing: 1px; }
.mini-titlebar::after { content: "×"; position: absolute; right: 4px; top: 3px; background: #ead0a9; color: #394b4c; width: 14px; height: 14px; text-align: center; font: bold 13px / 13px var(--mono); border: 1px solid #364e57; }
.back-window { top: 23%; right: 11%; width: 42%; height: 62%; }
.front-window { top: 15%; left: 13%; width: 46%; min-height: 66%; z-index: 1; }
.mini-message { padding: 13px 15px; font: 900 clamp(15px, 1.5vw, 21px) / 1.15 var(--mono); letter-spacing: -.6px; }
.mini-message span { display: block; }
.mini-message .mini-cursor { color: #467341; }
.mini-folder { padding: 9px 6px 0 48%; font: bold 8px / 1.6 var(--mono); color: #637c84; }
.interface-coordinate { position: absolute; bottom: 7px; right: 10px; font: 9px var(--mono); letter-spacing: 1px; color: #3d6e85; }
.about { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 46px; }
.section-aside { font-size: 13px; color: #818b75; padding-bottom: 8px; }
.about-panel { display: grid; grid-template-columns: .95fr 1.2fr; gap: 48px; align-items: center; border: 1px solid #9aa98a; background: #f4f4e6; padding: 36px; box-shadow: 4px 4px 0 #dfe3cf; }
.profile-identity { display: flex; gap: 24px; align-items: center; }
.profile-avatar { position: relative; width: 106px; height: 114px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 15px; background: #e2e9cd; border: 2px solid #75886a; box-shadow: 3px 3px 0 #bdcba7; font: 900 36px var(--mono); color: #577348; }
.profile-avatar span { position: absolute; bottom: 11px; font: 9px var(--mono); letter-spacing: 1px; }
.profile-kicker { font-size: 13px; color: var(--muted); }
.profile-identity h3 { font-size: 25px; margin: 3px 0 7px; }
#profile-role { font-size: 14px; color: #707d64; }
.profile-story > p:first-child { font-size: 15px; line-height: 1.9; color: #65715f; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.skill-tag { border: 1px solid #cbd3bb; padding: 3px 10px; font-size: 12px; color: #6a795f; }
.placeholder-note { font-size: 12px; color: #8d967f; margin-top: 12px; }
.contact { padding-top: 30px; padding-bottom: 64px; }
.contact-panel { padding: 42px 46px; border: 2px solid #586d4b; background: #eaf0db; display: flex; justify-content: space-between; align-items: center; gap: 36px; box-shadow: 5px 5px 0 #c6cfaf; }
.contact-panel h2 { font-size: 29px; line-height: 1.65; margin: 13px 0; }
.contact-panel > div > p:last-child { font-size: 14px; color: #6f7c61; }
.contact-actions { display: flex; flex-direction: column; gap: 22px; min-width: 215px; padding: 3px; }
.contact-actions .pixel-button { font-size: 14px; }
.contact-note { max-width: 280px; font-size: 12px; color: #7c896d; text-align: center; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid #869378; }
.footer-inner { min-height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 12px; color: #7b876e; }
.footer-inner > p:nth-child(2) { font: 12px var(--mono); letter-spacing: 1px; margin-left: auto; }
.footer-cross { color: #66854a; margin-right: 9px; }
.footer-inner a { border-bottom: 1px solid #bdc5ad; }
.empty-state { grid-column: 1 / -1; padding: 55px 24px; border: 1px dashed #9eac8c; text-align: center; color: var(--muted); }
.project-dialog { width: min(760px, calc(100% - 40px)); max-height: calc(100dvh - 64px); padding: 0; background: var(--paper-solid); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 #162b2266; overscroll-behavior: contain; }
.project-dialog::backdrop { background: #14251ee0; backdrop-filter: blur(3px); }
.dialog-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; background: var(--green); color: #f7f6e8; padding: 9px 12px 9px 20px; font: bold 12px var(--mono); letter-spacing: 2px; }
.dialog-topbar button { display: grid; place-items: center; height: 36px; width: 36px; padding: 0; border: 1px solid #1d3826; background: #f0efdf; color: var(--ink); font: 25px / 1 var(--mono); box-shadow: 2px 2px 0 #203e2b; }
.dialog-topbar button:hover { background: #dfe8c6; }
.dialog-visual { height: 280px; border-bottom: 2px solid var(--ink); }
.dialog-visual .mini-window { max-width: 225px; }
.dialog-visual .front-window { left: 30%; }
.dialog-visual .back-window { right: 25%; }
.dialog-visual .mini-message { font-size: 27px; }
.dialog-content { padding: 30px; }
.dialog-content h2 { margin-top: 9px; }
.dialog-summary { color: #6e7965; margin-top: 14px; }
.dialog-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; border-block: 1px solid #d6ddc7; padding: 20px 0; margin: 25px 0; }
.dialog-meta dt { font-size: 12px; color: #7b896d; }
.dialog-meta dd { font-size: 14px; margin: 6px 0 0; overflow-wrap: anywhere; }
.dialog-sections section { margin: 22px 0; }
.dialog-sections h3 { font-size: 18px; margin-bottom: 8px; }
.dialog-sections p { color: #6e7965; font-size: 15px; white-space: pre-line; }
#dialog-link { margin: 10px 3px; }
.noscript-note { background: #f2ddae; padding: 20px; text-align: center; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (min-width: 1600px) { .hero { min-height: 585px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero { min-height: 490px; }
  h1 { font-size: 48px; }
  .scene-index { font-size: 9px; }
  .project-grid { gap: 18px; }
  .card-body { padding: 14px; }
  .card-description { font-size: 12px; }
  .about-panel { gap: 28px; padding: 28px; }
  .profile-identity { gap: 18px; }
  .profile-avatar { width: 80px; height: 94px; }
  .main-nav { gap: 28px; }
}
@media (max-width: 850px) {
  .brand { font-size: 10px; gap: 9px; }
  .main-nav { gap: 20px; }
  h1 { font-size: 39px; }
  .hero { min-height: 440px; gap: 0; }
  .hero-actions { gap: 16px; }
  .pixel-button { padding-inline: 19px; gap: 16px; font-size: 14px; }
  .hero-description { font-size: 14px; }
  .hero-note { font-size: 11px; }
  .scene-index { display: none; }
  .hero-art { margin-right: -15px; }
  .scene-caption { font-size: 10px; }
  .project-grid { gap: 16px; }
  .card-title h3 { font-size: 20px; }
  .card-description { min-height: 43px; }
  .mini-message { font-size: 14px; padding: 10px; }
  .mini-titlebar { height: 18px; line-height: 14px; font-size: 8px; }
  .mini-titlebar::after { width: 10px; height: 10px; font-size: 10px; line-height: 8px; }
  .mini-folder { font-size: 6px; }
  .about-panel { grid-template-columns: 1fr; gap: 25px; }
  .profile-identity { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .section-aside { display: none; }
  .contact-panel { padding: 32px; }
  .contact-panel h2 { font-size: 25px; }
  .contact-actions { min-width: 190px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 85px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 70px; gap: 10px; }
  .brand { font-size: 8px; letter-spacing: 0; }
  .brand-icon { width: 28px; height: 28px; }
  .brand-slash { margin: 0; }
  .menu-toggle { display: flex; align-items: center; gap: 9px; }
  .main-nav { display: none; position: absolute; top: 69px; left: 0; right: 0; padding: 14px 20px 20px; background: var(--paper); border-bottom: 2px solid var(--ink); box-shadow: 0 6px 0 #c4ccb077; }
  .main-nav.is-open { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
  .main-nav > a { text-align: center; padding: 10px 4px; }
  .main-nav > a.nav-contact { padding: 9px 6px; }
  .nav-contact span { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 39px; padding-bottom: 16px; }
  .hero-copy { padding: 0 4px; }
  .eyebrow { font-size: 12px; }
  h1 { font-size: clamp(38px, 8.8vw, 54px); line-height: 1.32; margin-top: 18px; }
  .hero-description { margin-top: 16px; font-size: 15px; }
  .hero-actions { margin-top: 25px; gap: 24px; }
  .pixel-button { min-height: 48px; padding-inline: 25px; font-size: 15px; }
  .hero-note { margin-top: 24px; font-size: 12px; }
  .hero-art { aspect-ratio: 1.35; width: min(470px, 100%); margin: 5px auto 0; }
  .island { width: 90%; max-height: 360px; }
  .scene-caption { bottom: 0; font-size: 11px; }
  .section { padding-top: 32px; padding-bottom: 28px; }
  .section-heading { flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 23px; }
  h2 { font-size: 27px; }
  .filters { width: 100%; }
  .filter { flex: 1; padding: 8px 12px; }
  .project-grid { grid-template-columns: 1fr; gap: 26px; }
  .card-visual { aspect-ratio: 1.7; }
  .card-body { padding: 18px 20px 20px; }
  .card-title h3 { font-size: 24px; }
  .card-description { font-size: 14px; min-height: 0; }
  .card-tags { margin-top: 15px; }
  .card-category, .card-number { font-size: 13px; }
  .mini-titlebar { height: 24px; line-height: 19px; font-size: 10px; }
  .mini-titlebar::after { width: 14px; height: 14px; font-size: 13px; line-height: 12px; }
  .mini-message { font-size: 22px; padding: 15px; }
  .mini-folder { font-size: 9px; padding-top: 11px; }
  .works-footnote { text-align: left; font-size: 12px; }
  .about { margin-top: 14px; }
  .about-panel { padding: 23px; gap: 21px; }
  .profile-avatar { width: 90px; height: 98px; }
  .profile-identity h3 { font-size: 24px; }
  .profile-story > p:first-child { font-size: 15px; }
  .contact { padding-bottom: 43px; }
  .contact-panel { flex-direction: column; align-items: stretch; gap: 28px; padding: 27px 24px; }
  .contact-panel h2 { font-size: 26px; }
  .contact-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .contact-actions .pixel-button { font-size: 13px; padding-inline: 10px; gap: 8px; }
  .contact-note { grid-column: 1 / -1; max-width: none; }
  .footer-inner { padding-block: 24px; min-height: 100px; flex-wrap: wrap; gap: 12px; }
  .footer-inner > p:first-child { width: 100%; }
  .footer-inner > p:nth-child(2) { margin-left: 0; margin-right: auto; font-size: 11px; }
  .project-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 30px); }
  .dialog-content { padding: 24px 20px; }
  .dialog-visual { height: 215px; }
  .dialog-visual .front-window { left: 14%; }
  .dialog-visual .back-window { right: 12%; }
  .dialog-visual .mini-message { font-size: 22px; }
  .dialog-meta { grid-template-columns: 1fr; gap: 15px; }
  .dialog-meta > div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; }
  .dialog-meta dd { margin-top: 0; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .brand { font-size: 7px; gap: 6px; }
  .menu-toggle { font-size: 12px; padding: 8px; }
  .hero-actions { gap: 18px; }
  .pixel-button { padding-inline: 18px; }
  h1 { font-size: 35px; }
  .profile-identity { gap: 16px; }
  .profile-avatar { width: 68px; height: 86px; font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 求职资料结构：姓名与基本资料优先，作品内容保持完整可读。 */
.hero { grid-template-columns: 1.2fr .8fr; min-height: 530px; gap: 35px; padding-top: 30px; }
.hero-copy { padding: 12px 0; min-width: 0; }
.hero h1 { margin-top: 16px; font-size: clamp(36px, 3.6vw, 52px); overflow-wrap: anywhere; }
.hero-role { display: block; font-size: 24px; letter-spacing: 1px; line-height: 1.6; color: var(--green); margin-top: 4px; }
.hero-description { font-size: 16px; line-height: 1.8; margin-top: 12px; }
.hero-art { aspect-ratio: auto; height: 420px; }
.island { max-height: 400px; }
.hero-actions { margin-top: 20px; flex-wrap: wrap; }
.hero-note { margin-top: 21px; color: #69735f; }
.education-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.education-summary > div, .hero-contact > div { display: flex; gap: 14px; min-width: 0; align-items: baseline; }
.education-summary dt, .hero-contact dt { flex-shrink: 0; color: #6b775f; font-size: 14px; }
.education-summary dd, .hero-contact dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.unfilled { color: #727b67; }
.hero-contact { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 12px 0 0; }
.work-order-note { font-size: 14px; color: #65725b; margin: -10px 0 20px; }
.work-order-note span { margin-inline: 6px; color: #9aa58b; }
.filters { flex-wrap: wrap; max-width: 100%; }
.filter { padding-inline: 14px; }
.card-category { letter-spacing: 0; font-size: 13px; }
.card-title h3 { font-size: 21px; overflow-wrap: anywhere; }
.card-description { font-size: 14px; color: #626f59; }
.card-completed { display: block; margin-top: 14px; font-size: 14px; color: #56674c; }
.card-contribution { font-size: 14px; line-height: 1.8; margin-top: 5px; color: #56674c; overflow-wrap: anywhere; }
.card-tags { margin-top: 12px; }
.works-footnote { text-align: left; color: #616e55; font-size: 13px; }
.example-badge { color: #34482c; background: #fcfaedf5; }
.experience { padding-top: 18px; }
.profile-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.profile-chapter { padding: 26px; border: 1px solid #a5b095; background: #fbfaef; min-width: 0; }
.growth-chapter { grid-column: 1 / -1; }
.chapter-heading { display: flex; align-items: flex-start; gap: 15px; }
.chapter-index { display: block; border: 1px solid #7b9262; background: #e4eccf; padding: 4px 8px; font: bold 14px / 1.6 var(--mono); }
.chapter-heading h3 { font-size: 20px; line-height: 1.5; }
.chapter-heading p { font-size: 14px; color: #64725a; margin-top: 3px; }
.chapter-empty { border-top: 1px dashed #c5ceb7; padding-top: 16px; margin-top: 18px; color: #67735d; font-size: 15px; line-height: 1.9; }
.experience-entry { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 16px; overflow-wrap: anywhere; }
.experience-entry h4 { margin: 0 0 6px; font-size: 18px; }
.experience-entry .entry-meta { font-size: 14px; color: #5d7150; margin-bottom: 8px; }
.inspiration-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.inspiration-figure { margin: 0; min-width: 0; }
.inspiration-figure img { display: block; width: 100%; height: auto; border: 1px solid #a5b095; }
.inspiration-figure figcaption { margin-top: 7px; font-size: 13px; line-height: 1.7; color: #5d7150; }
.experience-entry .inspiration-credit { margin-top: 14px; font-size: 12px; line-height: 1.8; color: #5d7150; }
.inspiration-credit .text-link { display: inline; white-space: nowrap; }
@media (max-width: 600px) { .inspiration-gallery { grid-template-columns: 1fr; gap: 18px; } }
.experience-entry p { white-space: pre-line; }
.entry-contribution { margin-top: 8px; color: #526747; }
.growth-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; align-items: start; }
.growth-gallery-single { grid-template-columns: minmax(0, 1fr); max-width: 920px; }
.growth-figure { margin: 0; min-width: 0; }
.growth-image-link { display: block; border: 1px solid #a5b095; background: #e7eadb; }
.growth-image-link img { display: block; width: 100%; height: auto; }
.growth-image-link:focus-visible { outline: 3px solid #3d623c; outline-offset: 4px; }
.growth-figure figcaption { margin-top: 9px; color: #5d7150; font-size: 13px; line-height: 1.8; }
.engine-badges { display: flex; flex-wrap: wrap; gap: 22px; margin: 24px 0 5px; padding: 0; list-style: none; }
.engine-badge { display: flex; align-items: center; gap: 18px; min-width: 255px; padding: 20px 24px; border: 2px solid #5b7150; box-shadow: 4px 4px 0 #ced7b8; background: #edf1df; }
.engine-icon { display: block; width: 80px; height: 80px; flex: 0 0 80px; image-rendering: pixelated; }
.engine-copy { display: grid; gap: 5px; }
.engine-copy strong { font-size: 19px; color: #253f35; }
.engine-copy span { font-size: 13px; color: #5d7150; }
@media (max-width: 600px) {
  .growth-gallery { grid-template-columns: 1fr; gap: 22px; }
  .engine-badges { gap: 16px; }
  .engine-badge { width: 100%; min-width: 0; padding: 16px; gap: 14px; }
  .engine-icon { width: 64px; height: 64px; flex-basis: 64px; }
  .engine-copy strong { font-size: 17px; }
  .engine-copy span { font-size: 12px; }
}
.text-link { display: inline-block; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-panel { align-items: flex-start; }
.contact-info { flex: 1; min-width: 0; }
.contact-panel h2 { font-size: 28px; }
.contact-details { display: grid; gap: 10px; margin: 20px 0 0; }
.contact-details > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 15px; }
.contact-details dt { font-size: 14px; color: #5e7050; }
.contact-details dd { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.contact-actions { min-width: 230px; }
.contribution-panel { background: #ecf1de; border-left: 3px solid #7c9862; padding: 17px 20px; }
.contribution-panel h3 { font-size: 18px; margin-bottom: 8px; }
.contribution-panel p { font-size: 16px; white-space: pre-line; overflow-wrap: anywhere; }
#dialog-team-context { color: #5d6d51; margin-top: 10px; font-size: 14px; }
.dialog-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialog-meta dt { font-size: 14px; }
.dialog-meta dd { font-size: 16px; }
.dialog-visual { height: auto; background: #e1e6d4; }
.dialog-visual .project-image { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.dialog-visual .interface-art { height: 280px; }
.dialog-content, .dialog-sections { overflow-wrap: anywhere; }
.dialog-sections p { font-size: 16px; }
.dialog-sections .media-figure { margin: 18px 0 30px; }
.dialog-sections .media-figure img { display: block; width: 100%; height: auto; background: #202320; }
.dialog-sections .media-figure figcaption { font-size: 14px; line-height: 1.8; color: #5d7050; margin-top: 8px; }
.parameter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 26px; }
.parameter-item { min-width: 0; padding: 18px; border: 1px solid var(--line); background: #f4f5e9; }
.parameter-item dt { font-size: 16px; font-weight: 700; color: #344b2e; }
.parameter-item dd { margin: 8px 0 0; }
.parameter-value { display: block; font-size: 13px; color: #5d7050; margin-bottom: 9px; }
.parameter-item dd p { font-size: 14px; line-height: 1.85; margin: 0; }
@media (max-width: 700px) { .parameter-list { grid-template-columns: 1fr; } }
.dialog-media figure { margin: 24px 0; }
.dialog-media img, .dialog-media video { display: block; width: 100%; height: auto; max-height: 650px; object-fit: contain; background: #e1e6d4; }
.dialog-media figcaption { font-size: 14px; color: #5d7050; margin-top: 8px; }
.media-badge { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; color: #fbfaef; background: #254736ed; border: 1px solid #dde9c9; font-size: 13px; }
.media-figure { margin: 0; }
.dialog-visual video { display: block; width: 100%; max-height: 490px; background: #101913; }
.dialog-visual figcaption { padding: 12px 24px; font-size: 14px; line-height: 1.8; background: #eff1e4; }
.media-source { display: inline-block; margin-left: 12px; text-decoration: underline; text-underline-offset: 4px; }
.date-note { margin: -10px 0 24px; color: #64725a; font-size: 13px; }
.missing-visual { min-height: 200px; height: 100%; display: grid; place-items: center; padding: 20px; color: #667859; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1.35fr .65fr; gap: 12px; }
  .hero-art { height: 330px; }
  .scene-index, .scene-caption { display: none; }
  .section-heading { flex-wrap: wrap; }
  .work-order-note { margin-top: 0; }
  .card-title h3 { font-size: 18px; }
  .card-body { padding: 15px; }
  .example-badge { font-size: 11px; padding-inline: 5px; left: 8px; }
}
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; padding-top: 27px; }
  .hero-role { font-size: 21px; }
  .hero h1 { font-size: 36px; }
  .hero-description { font-size: 16px; }
  .education-summary { grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 18px; }
  .education-summary > div { display: block; }
  .education-summary dd { font-size: 15px; margin-top: 2px; }
  .hero-contact { flex-direction: column; gap: 7px; }
  .hero-actions { gap: 18px; }
  .hero-actions .pixel-button { font-size: 14px; padding-inline: 17px; gap: 12px; }
  .hero-art { height: 225px; width: 250px; margin: 0 auto; }
  .island { max-height: 235px; }
  .hero-note { font-size: 12px; }
  .filter { flex: 1 1 45%; font-size: 14px; }
  .work-order-note { font-size: 13px; line-height: 1.9; }
  .card-title h3 { font-size: 22px; }
  .card-body { padding: 20px; }
  .example-badge { font-size: 12px; left: 12px; padding-inline: 8px; }
  .profile-chapters { grid-template-columns: 1fr; gap: 18px; }
  .profile-chapter { padding: 22px; }
  .contact-actions { min-width: 0; grid-template-columns: 1fr; }
  .contact-actions .pixel-button { font-size: 15px; }
  .contact-panel h2 { font-size: 25px; }
  .dialog-meta { grid-template-columns: 1fr; }
  .dialog-meta > div { grid-template-columns: 80px minmax(0, 1fr); }
  .dialog-visual .interface-art { height: 215px; }
}
@media print {
  body { background: white; font-size: 11pt; }
  .site-header, .hero-art, .hero-actions, .hero-note, .filters, .card-arrow, .contact-actions, .site-footer, dialog, .skip-link { display: none !important; }
  .container { width: 100%; }
  .hero { display: block; min-height: 0; padding: 0; }
  .hero h1 { font-size: 26pt; }
  .hero-role { font-size: 15pt; }
  .section { padding: 16pt 0; }
  .project-grid, .profile-chapters { display: block; }
  .project-card, .profile-chapter { margin-bottom: 16pt; break-inside: avoid; box-shadow: none; }
  .card-visual { max-height: 170pt; }
  .about-panel, .contact-panel { box-shadow: none; break-inside: avoid; }
}