/* Experiment Gallery (V5.1 X2) on ui-v5.css tokens: quiet surfaces, colour only for meaning. */
.gallery-page{margin:0;background:var(--ph-bg);color:var(--ph-ink);font:15px/1.55 var(--ph-font-ui);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.gallery-page *,.gallery-page *::before,.gallery-page *::after{box-sizing:border-box}
.gallery-page ::selection{background:var(--ph-chrome-accent-soft);color:var(--ph-ink)}
.gallery-page :is(button,input,select){font:inherit}
.gallery-page :is(a,button,input,select):focus-visible{outline:3px solid var(--ph-focus-ring,var(--ph-chrome-accent));outline-offset:2px}
.gallery-page a{color:var(--ph-chrome-accent);text-underline-offset:4px}
.gallery-page [hidden]{display:none!important}
.gallery-page .app-shell-header{position:relative;z-index:100;background:var(--ph-surface)}
.gallery-page #authBtn{display:inline-flex;align-items:center}
.gallery-page #authBtn>a,.gallery-page #authBtn>button{min-height:44px;min-width:44px}
.gallery-page #authBtn .login-link{color:#fff}
html[data-fixed-language="zh"] #galleryHeader .physics-language-switch{display:none!important}
.gallery-page #galleryMain{max-width:1320px;margin:auto;padding:0 max(var(--ph-layout-gutter),env(safe-area-inset-right)) 40px max(var(--ph-layout-gutter),env(safe-area-inset-left))}
.gallery-sr-only,.gallery-skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gallery-skip:focus{position:fixed;top:8px;left:8px;z-index:4000;padding:12px 18px;border-radius:12px;background:var(--ph-surface)}

/* ---------- hero ---------- */
.gal-hero{padding:48px 0 28px;text-align:center}
.gal-hero h1{margin:0;font-family:var(--ph-font-display);font-size:clamp(36px,5vw,56px);line-height:1.06;letter-spacing:-.035em;font-weight:700}
.gal-sub{margin:12px auto 0;max-width:620px;color:var(--ph-ink-secondary);font-size:clamp(17px,1.6vw,20px);line-height:1.45;letter-spacing:-.012em;text-wrap:balance}

/* ---------- Workshop entry (Ethan 2026-10-21: lives here and on Home, not in the header) ---------- */
.gallery-workshop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);align-items:center;gap:32px;margin:0 0 28px;padding:28px 28px 28px 32px;border-radius:var(--ph-radius-panel);background:var(--ph-surface);box-shadow:var(--ph-shadow-card)}
.gallery-workshop-kicker{margin:0 0 6px;color:var(--ph-chrome-accent);font-size:13px;font-weight:600}
.gallery-workshop h2{margin:0;font-family:var(--ph-font-display);font-size:calc(26px + var(--ph-type-shift,0px));line-height:1.2;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.gallery-workshop-text{margin:10px 0 0;max-width:46ch;color:var(--ph-ink-secondary);font-size:calc(15px + var(--ph-type-shift,0px));line-height:1.55}
.gallery-workshop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:20px}
.gallery-page .gallery-workshop-primary{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ph-btn-primary);color:var(--ph-btn-primary-ink);font-weight:600;text-decoration:none;transition:background-color var(--ph-motion-fast),transform var(--ph-motion-base) var(--ph-ease-press)}
.gallery-page .gallery-workshop-primary:hover{background:var(--ph-btn-primary-hover)}
.gallery-page .gallery-workshop-primary:active{transform:scale(.97)}
.gallery-page .gallery-workshop-secondary{display:inline-flex;align-items:center;min-height:44px;color:var(--ph-chrome-accent);font-weight:600;text-decoration:none}
.gallery-page .gallery-workshop-secondary:hover{text-decoration:underline}
.gallery-workshop-note{margin:14px 0 0;color:var(--ph-ink-tertiary);font-size:12.5px}
.gallery-page .gallery-workshop-quick{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding-top:12px;border-top:1px solid var(--ph-line);color:var(--ph-ink);font-size:14px;font-weight:550;text-decoration:none}
.gallery-page .gallery-workshop-quick span:last-child{color:var(--ph-chrome-accent);transition:transform var(--ph-motion-base) var(--ph-ease-press)}
.gallery-page .gallery-workshop-quick:hover span:last-child{transform:translateX(3px)}
.gallery-workshop-media{display:block;border-radius:18px;overflow:hidden;background:#d6c39c;aspect-ratio:1400/491}
.gallery-workshop-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--ph-motion-slow) var(--ph-ease-standard)}
.gallery-workshop:hover .gallery-workshop-media img{transform:scale(1.02)}

/* ---------- filters ---------- */
.gal-toolbar{position:sticky;top:0;z-index:20;display:grid;gap:10px;margin:0 calc(-1 * var(--ph-layout-gutter)) 8px;padding:12px var(--ph-layout-gutter);background:var(--ph-bg)}
.gal-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-width:0}
.gal-search{flex:1 1 260px;max-width:420px}
.gal-search .ph-input{width:100%}
.gal-select{flex:0 1 auto;min-width:0}
.gal-select .ph-select{max-width:260px}
.gal-count{margin-left:auto;color:var(--ph-ink-tertiary);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gal-academic{gap:10px 16px}
.gal-topics{gap:8px}
.gal-toolbar{--ph-control-h:38px}
.gallery-page :is(.ph-segment,.ph-chip){border:0}

/* ---------- featured lab-core experiments ---------- */
.gal-featured{margin:20px 0 44px}
.gal-featured-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:16px}
.gal-featured-head h2{margin:0;font-family:var(--ph-font-display);font-size:calc(26px + var(--ph-type-shift,0px));letter-spacing:-.022em;font-weight:700}
.gal-featured-head p{margin:0;color:var(--ph-ink-secondary);font-size:15px}
.gal-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.gal-feature{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--ph-surface);border-radius:var(--ph-radius-panel);box-shadow:var(--ph-shadow-card);overflow:hidden;transition:transform var(--ph-motion-slow) var(--ph-ease-spring),box-shadow var(--ph-motion-base) var(--ph-ease-standard)}
.gal-feature:hover{transform:translateY(var(--ph-card-lift));box-shadow:var(--ph-shadow-card-hover)}
.gal-feature-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.gal-feature-preview{position:relative;aspect-ratio:16/9;background:radial-gradient(110% 100% at 50% 0%,var(--ph-surface),var(--ph-bg) 78%)}
.gal-feature-preview .card-preview-svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.gal-live{position:absolute;left:16px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:color-mix(in srgb,var(--ph-surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--ph-shadow-control);color:var(--ph-ink-secondary);font-size:12.5px;font-weight:600}
.gal-live i{width:8px;height:8px;border-radius:50%;background:var(--ph-positive,#34c759);animation:gal-live 2s infinite}
@keyframes gal-live{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
.gal-feature-body{display:flex;flex-direction:column;padding:20px 26px 24px}
.gal-feature-title{margin:0;font-family:var(--ph-font-display);font-size:calc(24px + var(--ph-type-shift,0px));line-height:1.18;letter-spacing:-.022em;font-weight:700}
.gal-feature-q{margin:8px 0 14px;color:var(--ph-ink-secondary);font-size:calc(16px + var(--ph-type-shift,0px));line-height:1.45}
.gal-skills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.gal-skills li{padding:4px 10px;border-radius:999px;background:var(--ph-fill);color:var(--ph-ink-secondary);font-size:13px}
.gallery-page a.ph-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.gal-feature-start{position:relative;z-index:2;align-self:flex-start;margin-top:auto}

/* ---------- Unit shelves ---------- */
/* Shelves pack side by side: a Unit takes as many columns as it has cards (up to the row). */
#experimentGrid{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-flow:row dense;column-gap:18px}
#experimentGrid>.gal-unit{grid-column:span min(var(--n,1),var(--cols))}
#experimentGrid>.gal-unit>.gal-grid{grid-template-columns:repeat(min(var(--n,1),var(--cols)),minmax(0,1fr))}
@media(max-width:1180px){#experimentGrid{--cols:3}}
@media(max-width:900px){#experimentGrid{--cols:2}}
.gal-unit{margin:0 0 40px;scroll-margin-top:120px}
.gal-unit-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px;padding-top:18px;border-top:1px solid var(--ph-line)}
.gal-unit-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0;margin:0;font-family:var(--ph-font-display);font-size:calc(22px + var(--ph-type-shift,0px));line-height:1.25;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
.gal-unit-number{flex:none;color:var(--ph-chrome-accent);font-size:calc(14px + var(--ph-type-shift,0px));font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.gal-unit-count{flex:none;color:var(--ph-ink-tertiary);font-size:13px;font-variant-numeric:tabular-nums}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gallery-page .gal-card{display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;border-radius:var(--ph-radius-card);background:var(--ph-surface);box-shadow:var(--ph-shadow-card);color:var(--ph-ink);text-decoration:none;transition:transform var(--ph-motion-slow) var(--ph-ease-spring),box-shadow var(--ph-motion-base) var(--ph-ease-standard)}
.gallery-page .gal-card:hover{transform:translateY(var(--ph-card-lift));box-shadow:var(--ph-shadow-card-hover)}
.gallery-page .gal-card:active{transform:scale(.985);transition-duration:var(--ph-motion-press)}
.gal-card-media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(110% 100% at 50% 0%,var(--ph-surface),var(--ph-surface-subtle) 80%)}
.gal-card-media img{width:90%;height:88%;object-fit:contain;transition:transform var(--ph-motion-slow) var(--ph-ease-spring)}
.gal-card:hover .gal-card-media img{transform:scale(1.035)}
.gal-card-media .card-preview-svg{width:92%;height:92%}
.gal-card-body{padding:14px 18px 18px}
.gal-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px;color:var(--ph-ink-secondary);font-size:13px}
.gal-tag{padding:2px 9px;border-radius:999px;background:var(--ph-chrome-accent-soft);color:var(--ph-chrome-accent);font-size:12px;font-weight:600}
.gal-new{padding:2px 9px;border-radius:999px;background:var(--ph-btn-primary);color:var(--ph-btn-primary-ink);font-size:12px;font-weight:700}
.gal-card-title{margin:0 0 6px;font-size:calc(17px + var(--ph-type-shift,0px));line-height:1.3;letter-spacing:-.015em;font-weight:650}
.gal-card-sum{margin:0;color:var(--ph-ink-secondary);font-size:calc(14px + var(--ph-type-shift,0px));line-height:1.48;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gal-preview-fallback{max-width:20ch;color:var(--ph-ink-tertiary);text-align:center;font-size:12px}
.without-image::before{content:"";width:56px;height:56px;border:1px dashed var(--ph-line-strong);border-radius:50%}

.gallery-state{display:grid;min-height:240px;place-content:center;justify-items:center;gap:14px;text-align:center;color:var(--ph-ink-secondary)}
.gallery-state p{margin:0;font-size:17px}
.gallery-footer{display:flex;justify-content:space-between;gap:24px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--ph-line);color:var(--ph-ink-tertiary);font-size:12.5px}

@media(max-width:1100px){.gallery-workshop{grid-template-columns:1fr;gap:20px;padding:24px}.gallery-workshop-media{order:-1}}
@media(max-width:900px){.gal-feature-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .gal-hero{padding:28px 0 18px}
 .gal-sub{font-size:16.5px}
 .gallery-workshop{margin-bottom:16px;padding:12px 12px 16px;border-radius:var(--ph-radius-card);gap:12px}
 .gallery-workshop-body{padding:0 4px}
 .gallery-workshop h2{font-size:calc(19px + var(--ph-type-shift,0px))}
 .gallery-workshop-text{margin-top:6px;font-size:calc(14px + var(--ph-type-shift,0px));line-height:1.5}
 .gallery-workshop-actions{margin-top:12px;gap:4px 16px}
 .gallery-page .gallery-workshop-primary,.gallery-page .gallery-workshop-secondary{min-height:44px;font-size:14px}
 .gallery-workshop-note{margin-top:8px}
 .gallery-workshop-media{aspect-ratio:auto;height:92px;border-radius:14px}
 .gal-toolbar{position:static;margin-inline:0;padding:8px 0 4px;background:none}
 .gal-search{flex-basis:100%;max-width:none}
 .gal-select{flex:1 1 0}
 .gal-select .ph-select{width:100%;max-width:none}
 .gal-count{flex-basis:100%;margin:0}
 .gal-academic{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
 .gal-academic::-webkit-scrollbar{display:none}
 .gal-academic>*{flex:none}
 .gal-topics{flex-wrap:nowrap}
 .gal-topics .ph-chip{white-space:nowrap}
 .gal-featured{margin:12px 0 32px}
 .gal-featured-head h2{font-size:calc(21px + var(--ph-type-shift,0px))}
 .gal-feature-body{padding:16px 18px 20px}
 .gal-feature-title{font-size:calc(21px + var(--ph-type-shift,0px))}
 .gal-feature-start{align-self:stretch;justify-content:center}
 .gal-unit{margin-bottom:28px}
 .gal-unit-title{font-size:calc(19px + var(--ph-type-shift,0px))}
 #experimentGrid{display:block}
 #experimentGrid>.gal-unit>.gal-grid{grid-template-columns:1fr;gap:12px}
 .gallery-page .gal-card{grid-template-rows:none;grid-template-columns:128px minmax(0,1fr);align-items:center;border-radius:18px}
 .gal-card-media{aspect-ratio:auto;height:100%;min-height:104px}
 .gal-card-body{padding:12px 14px 12px 4px}
 .gal-card-meta{margin-bottom:4px}
 .gal-card-title{font-size:calc(16px + var(--ph-type-shift,0px))}
 .gal-card-sum{font-size:calc(13px + var(--ph-type-shift,0px));-webkit-line-clamp:2}
 .gallery-footer{flex-direction:column;gap:6px}
}
/* Touch screens and phones: every filter control is a full 44 px target. */
@media(pointer:coarse),(max-width:760px){.gal-toolbar{--ph-control-h:44px}.gal-toolbar .ph-segmented{--ph-control-h:50px}:root[data-ph-system="v5"] .gal-toolbar .ph-chip{min-height:44px}}
@media(prefers-reduced-motion:reduce){.gallery-page *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Existing teaching-embed preview (lesson-embed.html) remains a separate, readable consumer. */
body:not(.gallery-page) { margin:0; background:#f5f6f2; color:#1c3430; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body:not(.gallery-page) main { max-width:1120px; margin:auto; padding:32px; }
body:not(.gallery-page) a { color:#0f766e; text-underline-offset:4px; }
body:not(.gallery-page) .lesson-copy { max-width:740px; margin:24px auto; }
body:not(.gallery-page) h1 { font-size:36px; line-height:1.2; margin:20px 0 12px; }
body:not(.gallery-page) p { color:#536b66; }
body:not(.gallery-page) iframe { display:block; width:100%; height:550px; border:0; }
@media(max-width:720px) { body:not(.gallery-page) main { padding:24px 16px; } body:not(.gallery-page) iframe { height:720px; } body:not(.gallery-page) h1 { font-size:28px; } }

/* ---------- dark appearance (V5.1 全站主题; only with html[data-dark-ready]) ---------- */
/* Experiment pictures sit on paper: the preview areas keep a light, slightly dimmed ground, so the
 * older white-ground previews (previews/*.webp) and the apparatus drawings read as they do in light. */
:root[data-appearance="dark"] .gallery-page :is(.gal-card-media,.gal-feature-preview){
 color-scheme:light;--ph-ink:#1f1e1c;--ph-ink-secondary:#5f5e58;--ph-ink-tertiary:#71706a;--ph-line:#d9d6cc;--ph-line-strong:#c9c5b8;
 --ph-surface:#ffffff;--ph-surface-subtle:#f3f1eb;--ph-fill:rgba(70,60,40,.06);
 background:radial-gradient(110% 100% at 50% 0%,#f3f1eb,var(--ph-paper,#eceae4) 80%)}
:root[data-appearance="dark"] .gallery-page .gal-card-media img{mix-blend-mode:multiply}
:root[data-appearance="dark"] .gallery-page .gal-live{background:rgba(255,255,255,.82);color:#5f5e58;box-shadow:0 1px 3px rgba(0,0,0,.18)}
:root[data-appearance="dark"] .gallery-page #authBtn .login-link{color:var(--ph-chrome-accent-ink)}
:root[data-appearance="dark"] .gallery-workshop-media{background:#3a3428}