/* Homepage workshop: extend the existing pixel palette and static content. */
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; background: var(--gold); color: var(--outline); padding: 12px; }
.skip-link:focus { top: 12px; }
.home main, .home .site-header, .home .site-footer { max-width: 1120px; }
.home .site-header { margin-bottom: 30px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.home .quest-start { margin: 0; font-size: 12px; }
.home .scroll-banner { padding-block: 15px; }
.home .scroll-banner h1 { font-size: 24px; }
.workshop-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 24px; padding: 32px !important; text-align: left !important; align-items: center; }
.hero-copy { padding: 8px 0 16px 8px; }
.pixel-panel .hero-kicker { color: #a9c5e2; font-size: 14px; margin-bottom: 16px; }
.workshop-hero .hero-title { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.4; letter-spacing: 1px; margin-bottom: 18px; }
.workshop-hero .hero-title span { color: var(--parchment-light); }
.workshop-hero .hero-sub { font-size: 17px; line-height: 1.9; }
.workshop-hero .secondary { color: #c6d7e9; margin-top: 12px; max-width: 25em; }
.workshop-hero .press-start { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 18px; background: var(--gold); color: var(--outline); animation: none; box-shadow: 5px 5px 0 #0d1832; margin-top: 24px; }
.press-start .en { font-size: 12px; }
.start-caption { font-size: 14px; font-family: 'Microsoft JhengHei', system-ui, sans-serif; }
.workshop { min-width: 0; border: 2px solid #476187; background: #152442; box-shadow: 5px 5px 0 #101a30; align-self: stretch; display: flex; flex-direction: column; }
.workshop-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 2px solid #476187; }
.workshop-heading .en { font-size: 10px; line-height: 1.6; color: #b9d6ed; }
.scene-label { font-size: 14px; color: var(--gold); }
.workshop-stage { position: relative; min-width: 0; aspect-ratio: 1.35; background: radial-gradient(ellipse at 50% 50%, #284562, #152442 75%); }
.workshop-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.workshop-canvas:active { cursor: grabbing; }
.view-controls { position: absolute; right: 12px; bottom: 8px; display: flex; gap: 6px; }
.view-controls button, .scene-choices a { font: inherit; font-size: 14px; border: 2px solid #7189a9; color: #e4edf6; background: #1b2b52; min-width: 44px; min-height: 44px; cursor: pointer; box-shadow: 2px 2px 0 #0d1832; }
.view-controls button { padding: 4px 8px; }
.view-controls button:first-child, .view-controls button:last-child { font-size: 24px; }
.scene-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scene-choices a[aria-pressed="true"] { background: var(--gold); color: var(--outline); border-color: var(--gold); }
.workshop figcaption { padding: 10px 14px 14px; border-top: 2px solid #476187; margin-top: auto; }
.pixel-panel .scene-caption { font-size: 14px; line-height: 1.7; color: #d1e2f2; margin-top: 10px; min-height: 3.4em; }
.scene-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 20px; text-align: center; gap: 12px; }
.fallback-doctor { width: 82px; height: 124px; }
.scene-fallback .hero-sword { animation: none; }
.home .grid { gap: 32px; margin-top: 34px; }
.home .grid > .pixel-panel { padding: 12px 24px 26px; }
.home .section-gloss { color: #655134; font-size: 14px; margin: -2px 0 14px; }
.home .stat-list li { padding-block: 8px; }
.stat-explain { display: block; margin-left: 3.6em; font-size: 14px; color: #655134; }
.skill-path { list-style: none; }
.pixel-panel .skill-path > li { padding: 0 0 12px; }
.pixel-panel .skill-path > li:last-child { padding-bottom: 0; }
.pixel-panel .skill-path > li::before { width: 3px; height: 100%; left: 18px; top: 20px; background: #927548; }
.pixel-panel .skill-path > li:last-child::before { display: none; }
.skill-path details { position: relative; }
.skill-path summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; min-height: 52px; padding: 4px 0; }
.skill-path summary::-webkit-details-marker { display: none; }
.skill-path summary::after { content: "+"; margin-left: auto; width: 28px; font-size: 24px; text-align: center; color: var(--blue); }
.skill-path details[open] > summary::after { content: "−"; }
.skill-number { background: var(--navy); color: var(--gold); width: 40px; height: 40px; flex: 0 0 40px; border: 3px solid var(--outline); display: grid; place-items: center; font-size: 10px; box-shadow: 3px 3px 0 #b89a63; }
.skill-path strong { font-size: 17px; color: var(--navy); font-weight: 700; }
.skill-plain { display: block; font-size: 14px; line-height: 1.6; color: #655134; }
.pixel-panel .skill-path details p { margin: 8px 0 8px 54px; font-size: 15px; line-height: 1.8; }
.home .quest-list li { line-height: 1.9; padding-bottom: 14px; }
.home .q { min-width: 3.4em; padding: 2px 6px; font-size: 14px; }
.home .quest-note { font-size: 14px; color: #655134; }
.home .quest-updated { font-size: 13px; opacity: 1; color: #655134; }
.home .panel-index-link { font-size: 14px; }
.home .equipment-window { padding: 12px; overflow: visible; background: #f7edce; box-shadow: inset 3px 3px 0 #d8c088, 4px 4px 0 #b89a63; }
.home .equipment-window::before, .home .equipment-window::after { content: none; }
.home .equipment-item { display: flex; align-items: center; gap: 12px; }
.home .equipment-item[hidden] { display: none; }
.equipment-copy { min-width: 0; }
.equipment-art { width: 108px; height: 128px; flex: 0 0 108px; transition: transform .2s ease; }
.equipment-art canvas, .journal-art canvas { display: block; width: 100%; height: 100%; }
.prop-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.prop-fallback .hero-icon { margin: 0; transform: perspective(350px) rotateY(-20deg) rotateZ(-8deg); filter: drop-shadow(5px 6px 0 #b89a63); }
.home .equipment-name { font-size: 22px !important; line-height: 1.5; }
.home .equipment-description { font-size: 15px; line-height: 1.8; }
.home .panel-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; font-size: 16px; }
.home .equipment-spin[hidden] { display: none; }
.home .equipment-meta { font-size: 14px; margin-top: 4px; }
.home .equipment-meta .en { font-size: 10px; }
.journal-preview { display: flex; align-items: center; gap: 24px; }
.journal-art { width: 96px; height: 110px; flex: 0 0 96px; }
.home .journal-name { font-size: 24px !important; }
.home .journal-status { color: #655134; font-size: 14px; margin-top: 10px; }
.journal-seal { margin-left: auto; padding: 9px 12px; border: 2px dashed #88714b; color: #655134; white-space: nowrap; font-size: 14px; }
.home .site-footer { margin-top: 60px; padding-bottom: 40px; }
.home .rights-link { font-size: 14px; }
.home .copyright { line-height: 2; }
.home button:focus-visible, .home a:focus-visible, .home summary:focus-visible { outline: 3px solid var(--red-dark); outline-offset: 5px; }
.workshop button:focus-visible, .hero-copy a:focus-visible { outline-color: #fff; }
.home button:active, .home .panel-link:active, .home .press-start:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .equipment-panel:hover .equipment-art, .equipment-panel:focus-within .equipment-art { transform: perspective(500px) translateY(-5px) rotateY(10deg); }
  .home .scroll-banner { transform: perspective(900px) rotateX(4deg); }
  .home .ribbon { transform: perspective(500px) rotateY(-5deg); transform-origin: left; }
  .scene-choices a:hover, .view-controls button:hover { border-color: var(--gold); }
}
@media (max-width: 900px) {
  .workshop-hero { gap: 20px; padding: 24px !important; grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-left: 0; }
  .desktop-break { display: none; }
  .home .quest-start { display: none; }
  .equipment-art { width: 80px; flex-basis: 80px; }
}
@media (max-width: 700px) {
  .home .site-header { margin-bottom: 22px; }
  .home .scroll-banner h1 { font-size: 18px; }
  .home .scroll-banner { padding-inline: 36px; }
  .home .tagline { font-size: 14px; }
  .workshop-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px !important; }
  .hero-copy { padding: 0; }
  .workshop-hero .hero-title { font-size: 32px; }
  .workshop-hero .hero-sub { font-size: 16px; }
  .workshop-hero .press-start { margin-top: 18px; }
  .workshop-stage { aspect-ratio: 1.35; }
  .home .grid { grid-template-columns: 1fr; }
  .home .grid > .pixel-panel { padding-inline: 20px; }
  .equipment-art { width: 96px; flex-basis: 96px; }
  .journal-preview { gap: 14px; flex-wrap: wrap; }
  .journal-preview > div:nth-child(2) { flex: 1; min-width: 160px; }
  .journal-art { width: 72px; flex-basis: 72px; height: 90px; }
  .journal-seal { margin-left: 86px; }
  .home .site-footer { padding-bottom: 65px; }
}
@media (max-width: 360px) {
  .workshop-hero { padding: 20px 14px !important; }
  .workshop-hero .hero-title { font-size: 28px; }
  .home .scroll-banner h1 { font-size: 16px; }
  .equipment-art { width: 65px; flex-basis: 65px; height: 100px; }
  .home .equipment-name { font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .equipment-art, .prop-fallback .hero-icon { transition: none; transform: none; }
}

/* Real object navigation: labels follow projected world positions. */
.scene-hotspots { position: absolute; inset: 0; pointer-events: none; }
.scene-hotspot { position: absolute; transform: translate(-50%,-100%); pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; padding: 5px 8px; background: #f7d63e; border: 2px solid #202e42; box-shadow: 2px 2px 0 #101a30; color: #202e42; font-size: 14px; text-decoration: none; white-space: nowrap; }
.scene-hotspot[data-scene-link="2"] { transform: translate(-50%,8px); }
.scene-hotspot:hover { background: #fff2a6; }
.home .scene-hotspot:active { transform: translate(-50%,-100%); }
.home .scene-hotspot[data-scene-link="2"]:active { transform: translate(-50%,8px); }
.scene-choices a { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 6px; }
.scene-choices a:hover, .scene-choices a:focus-visible { background: var(--gold); color: var(--outline); }
.scene-help { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pixel-panel .scene-help .scene-caption { margin: 0; min-height: 0; flex: 1 1 180px; }
.motion-toggle { font: inherit; font-size: 14px; min-height: 44px; padding: 6px 9px; border: 1px solid #7189a9; background: transparent; color: #e4edf6; cursor: pointer; }
.motion-toggle[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.motion-toggle:disabled { cursor: default; }
.home #about, .home #clinical, .home #research, .home #equipment { scroll-margin-top: 36px; }
.home #about:target, .home #equipment:target { outline: 3px solid var(--blue); outline-offset: 7px; }
.home #clinical:target summary, .home #research:target summary { background: #f7edce; }
@media (max-width: 700px) {
  .scene-hotspot { min-width: 44px; padding: 4px; font-size: 12px; }
  .scene-help .motion-toggle { margin-left: auto; }
  .workshop-stage { margin-bottom: 52px; }
  .view-controls { bottom: -48px; }
}

/* Selected papers remain within the research disclosure; citation details use their own hierarchy. */
.research-selected { margin: 18px 0 12px 54px; }
.research-selected > h3 { margin: 0 0 12px; font-size: 18px; color: var(--navy); }
.research-paper { padding: 16px; margin-top: 12px; border: 1px solid #b99d67; border-left: 4px solid #3c7791; background: #f7edce; }
.research-paper h4 { margin: 8px 0; font-size: 17px; line-height: 1.6; color: #223754; }
.pixel-panel .skill-path .research-paper p { margin: 8px 0; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.pixel-panel .skill-path .research-paper .paper-meta { font-size: 14px; color: #675332; }
.paper-actions a, .research-profile a { display: inline-block; color: #255885; line-height: 1.8; font-size: 15px; text-underline-offset: 4px; }
.paper-citation { margin-top: 10px; }
.skill-path .paper-citation > summary { min-height: 36px; gap: 8px; font-size: 14px; color: #655134; }
.skill-path .paper-citation > summary::after { content: "+"; margin-left: 0; font-size: 18px; width: 20px; }
.skill-path .paper-citation[open] > summary::after { content: "−"; }
.pixel-panel .skill-path .paper-citation p { font-family: system-ui, sans-serif; font-size: 14px; }
.pixel-panel .skill-path .research-profile { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width: 480px) { .research-selected { margin-left: 0; } }

/* Contact: one visible email, native mail link, optional copy enhancement. */
.home .contact-shortcut { display:block; width:fit-content; padding:12px 0; margin-top:8px; color:var(--parchment-light); font-size:16px; text-underline-offset:5px; }
.contact-panel { margin-top:32px; scroll-margin-top:24px; }
.contact-content { display:flex; align-items:center; gap:28px; padding-top:16px; }
.contact-envelope { width:96px; flex:0 0 96px; height:72px; }
.contact-details { min-width:0; flex:1; }
.contact-details p { line-height:1.8; }
.contact-email { display:inline-block; max-width:100%; margin:12px 0; font:20px/1.6 'Microsoft JhengHei',system-ui,sans-serif; color:var(--navy); overflow-wrap:anywhere; text-underline-offset:4px; }
.contact-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.contact-actions .panel-link { min-height:44px; font:inherit; cursor:pointer; }
.contact-copy[hidden] { display:none; }
.contact-feedback { font-size:14px; margin-top:12px; }
.contact-feedback:empty { display:none; }
@media (max-width:600px) { .contact-content { flex-direction:column; align-items:flex-start; gap:12px; } .contact-envelope { width:64px; height:48px; flex-basis:auto; } .contact-actions { flex-direction:column; align-items:stretch; } .contact-actions .panel-link { text-align:center; } .contact-details { width:100%; } }