/* Experience stays broad: exhibition, collaboration, and classroom work. */
.experience-icon { padding-top: 2px; }
.experience-icon .feature-icon { width: 26px; height: 26px; fill: none; stroke: #badcde; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.experience-page { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.home.detail-draft .experience-page h1,.home.detail-draft .experience-page h2 { font-size: clamp(2.1rem,3.6vw,3.3rem); line-height: 1.25; margin: 18px 0 24px; }
.experience-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 15px; }
.experience-split figure { margin: 0; }
.experience-split img { width: 100%; height: auto; display: block; border: 1px solid #bacad755; }
.experience-description { font-size: 1rem; line-height: 1.8; color: #bfcfda; margin-top: 18px; }
.experience-event-tabs { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.experience-event-tabs button { appearance: none; min-height: 46px; padding: 10px 22px; border: 1px solid #bacfd078; border-radius: 999px; background: transparent; color: #c6d5de; font: inherit; font-size: .9375rem; line-height: 1.5; text-align: center; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.experience-event-tabs button[aria-selected="true"] { color: #f0fcfc; border-color: #c6dde1; background: #c6e0e526; }
@media (hover: hover) { .experience-event-tabs button:hover { color: #f0fcfc; border-color: #d3e7e9; background: #c6e0e51a; } .experience-event-tabs button[aria-selected="true"]:hover { background: #c6e0e538; } }
.experience-event-tabs button:focus-visible { outline: 2px solid #c6dde1; outline-offset: 4px; }
.experience-event[hidden] { display: none; }
.experience-event .panel-kicker { margin-top: 0; }
.experience-event .experience-split { margin-top: 12px; }
.experience-event .robot-character svg { height: min(48dvh,420px); transform: scale(1.18); transform-origin: 50% 90%; }
.experience-split .conference-photo { width: min(100%,61.33dvh); aspect-ratio: 4 / 3; overflow: hidden; justify-self: center; border-radius: 4px; }
.experience-split .conference-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 54%; border: 0; transform: scale(1.13); transform-origin: 20% 50%; }
@media (max-width:650px) {
 .home.experience-detail .nav { grid-template-columns: .8fr .8fr 1.4fr; overflow: visible; white-space: normal; padding-bottom: 6px; }
 .home.experience-detail .nav a { white-space: normal; line-height: 1.4; }
 .home.experience-detail .experience-event-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
 .home.experience-detail .experience-event-tabs button { min-height: 48px; min-width: 0; padding: 10px 12px; font-size: .9375rem; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
 .experience-event .robot-character svg { height: auto; transform: scale(1.08); }
 .experience-split .conference-photo { width: 100%; }
}
.paper-list { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
.paper-list article { display: grid; grid-template-columns: 190px minmax(0,1fr) auto; align-items: start; gap: 28px; border-top: 1px solid #94bac466; padding-top: 18px; }
.paper-list .paper-journal { color: #afced9; font-size: .8125rem; margin: 0; line-height: 1.6; }
.paper-copy { min-width: 0; }
.home.detail-draft #story .profile-intro { max-width: none; }
.home.detail-draft #story .experience-page { padding-bottom: clamp(48px,6dvh,72px); }
.paper-list h3 { font-size: 1rem; line-height: 1.5; margin: 0 0 8px; font-weight: 600; text-wrap: pretty; }
.paper-list p:not(.paper-journal) { margin: 0; font-size: .9375rem; line-height: 1.6; color: #c8d7dd; }
.paper-list .text-link { margin-top: 0; font-size: .875rem; white-space: nowrap; padding-bottom: 6px; }
.learning-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 18px; }
.learning-columns section { border-top: 1px solid #bcbad65c; padding-top: 24px; }
.learning-columns h3 { font-size: 1.4rem; line-height: 1.45; margin: 14px 0; }
.learning-columns .learning-label { color: #b8cfd7; font-size: .875rem; margin-top: 20px; }
.learning-columns p { color: #c8d6de; font-size: 1rem; line-height: 1.8; }
.teaching-visual { width: min(100%,360px); margin: 0 0 20px; }
.teaching-visual svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: #b5d9de; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.teaching-visual .diagram-link { stroke: #a1bbc16b; }
.teaching-visual .diagram-trace { stroke: #daeff0; stroke-dasharray: 12 220; opacity: 0; }
.teaching-visual .diagram-node rect,.teaching-visual .diagram-paper { fill: #25364b80; }
.teaching-visual .summary-bar { fill: #a8d5dc99; stroke: none; transform-box: fill-box; transform-origin: center bottom; }
.teaching-visual .step-b { animation-delay: .6s !important; }
.teaching-visual .step-c { animation-delay: 1.2s !important; }
.teaching-visual .step-d { animation-delay: 1.8s !important; }
.teaching-visual.is-playing .diagram-node { animation: teaching-node 5s ease-in-out infinite; }
.teaching-visual.is-playing .diagram-trace { animation: teaching-trace 5s linear infinite; }
.teaching-visual.is-playing .survey-row { animation: teaching-row 5s ease-in-out infinite; }
.teaching-visual.is-playing .summary-bar { animation: teaching-bar 5s ease-in-out infinite; }
@keyframes teaching-node { 0%,65%,100% { stroke: #95b5c0; } 22%,40% { stroke: #edffff; filter: drop-shadow(0 0 5px #bce8eb80); } }
@keyframes teaching-trace { 0%,10% { stroke-dashoffset: 235; opacity: 0; } 20%,70% { opacity: .9; } 90%,100% { stroke-dashoffset: -220; opacity: 0; } }
@keyframes teaching-row { 0%,100% { opacity: .35; } 25%,75% { opacity: 1; } }
@keyframes teaching-bar { 0%,100% { transform: scaleY(.45); opacity: .45; } 40%,80% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .teaching-visual * { animation: none !important; }
 .teaching-visual .diagram-trace { display: none; }
}
@media (max-width:850px) {
 .experience-split { gap: 28px; }
 .learning-columns { gap: 28px; }
 .paper-list article { grid-template-columns: 150px minmax(0,1fr); gap: 12px 24px; }
 .paper-list .text-link { grid-column: 2; justify-self: start; }
}
@media (max-width:650px) {
 .experience-split,.paper-list,.learning-columns { grid-template-columns: 1fr; }
 .experience-page { justify-content: flex-start; }
 .home.detail-draft .experience-page h1,.home.detail-draft .experience-page h2 { font-size: 2rem; margin: 16px 0 22px; }
 .paper-list article { grid-template-columns: 1fr; gap: 12px; }
 .paper-list .text-link { grid-column: auto; }
 .paper-list h3 { font-size: 1.0625rem; }
 .learning-columns h3 { font-size: 1.25rem; }
 .home:not(.detail-site) .nav a { white-space: normal; line-height: 1.4; }
}
/* Keep the exhibition in place while a related project is previewed. */
.preview-trigger { cursor: pointer; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font: inherit; }
.project-preview { width: min(1000px,calc(100% - 48px)); max-height: calc(100dvh - 64px); padding: 32px; margin: auto; border: 1px solid #98bdca70; border-radius: 12px; background: #142335; color: #e1ecef; box-shadow: 0 24px 80px #0006; overflow: auto; }
.project-preview::backdrop { background: #070e19bb; backdrop-filter: blur(6px); }
.preview-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.preview-topline .panel-kicker { margin: 0; }
.preview-close { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #8aabba; border-radius: 24px; padding: 10px 16px; background: transparent; color: #dcecf0; font: inherit; font-size: .875rem; cursor: pointer; }
.preview-close:hover { background: #2d4458; }
.preview-close:focus-visible,.preview-trigger:focus-visible { outline: 2px solid #c2e9eb; outline-offset: 4px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
.preview-grid img { width: 100%; height: auto; display: block; }
.preview-grid h2 { font-size: 1.875rem; margin: 0 0 20px; line-height: 1.3; }
.preview-grid p { font-size: 1rem; line-height: 1.8; color: #c4d7e0; margin: 14px 0; }
.preview-grid .text-link { font-size: .9375rem; margin-top: 16px; }
@media (min-width:851px) and (max-height:760px) {
 .home.detail-draft #story .experience-page { padding-block: 24px 48px; }
 .home.detail-draft #story .experience-page :is(h1,h2) { font-size: 2.5rem; margin-block: 12px 14px; }
 .paper-list { gap: 16px; margin-top: 22px; }
 .paper-list article { padding-top: 14px; }
}
@media (min-width:851px) and (max-height:680px) {
 .home.detail-draft #story .experience-page :is(h1,h2) { font-size: 2.25rem; margin-block: 10px 12px; }
 .paper-list { gap: 14px; margin-top: 16px; }
 .paper-list article { padding-top: 12px; }
 .paper-list h3 { line-height: 1.45; margin-bottom: 6px; }
}
@media (max-width:650px) {
 .project-preview { width: calc(100% - 24px); max-height: calc(100dvh - 32px); padding: 20px; }
 .preview-topline { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
 .preview-grid { grid-template-columns: 1fr; gap: 24px; }
 .preview-grid h2 { font-size: 1.6rem; }
}