:root{
  --bg:#05070b;
  --panel:#0b0f17;
  --text:#f5f7fb;
  --muted:#8c95a6;
  --line:rgba(255,255,255,.12);
  --accent:#7df9ff;
  --accent2:#a589ff;
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 70% 10%, rgba(86,78,164,.16), transparent 36%),
    radial-gradient(circle at 10% 55%, rgba(39,161,177,.10), transparent 35%),
    var(--bg);
  font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden;
}
button,a{font:inherit}
button{color:inherit}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-3;opacity:.75}
.noise{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:72px;padding:0 clamp(18px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(to bottom,rgba(5,7,11,.82),rgba(5,7,11,.28));
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:750;letter-spacing:.12em}
.brand-mark{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 24px var(--accent)}
.nav{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025)}
.nav-btn,.sound-toggle{border:0;background:transparent;cursor:pointer}
.nav-btn{padding:8px 14px;border-radius:999px;color:var(--muted);font-size:13px;transition:.3s}
.nav-btn.active{background:rgba(255,255,255,.10);color:#fff}
.sound-toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;letter-spacing:.16em}
.sound-dot{width:7px;height:7px;border-radius:50%;background:#555}
.sound-toggle[aria-pressed="true"] .sound-dot{background:var(--accent);box-shadow:0 0 18px var(--accent)}

.hero{
  min-height:100svh;position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  align-items:center;gap:3vw;padding:120px max(6vw,24px) 80px;max-width:1700px;margin:auto;
}
.hero-copy{position:relative;z-index:2}
.kicker{margin:0 0 18px;color:#9aa3b7;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
h1{font-size:clamp(64px,10vw,170px);line-height:.88;letter-spacing:-.06em;margin:0;font-weight:720}
.hero-sub{max-width:620px;margin:34px 0 0;color:#aeb6c5;font-size:clamp(16px,1.4vw,22px);line-height:1.75}
.hero-actions{display:flex;align-items:center;gap:22px;margin-top:42px}
.enter-btn{
  width:190px;height:58px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  transition:transform .3s,background .3s,border-color .3s;
}
.enter-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.55)}
.arrow{font-size:24px}
.hint{font-size:12px;color:#758094;letter-spacing:.12em}

.hero-orbit{position:relative;min-height:620px;display:grid;place-items:center;perspective:1100px}
.orbital-core{
  width:min(27vw,420px);aspect-ratio:.72;position:relative;border-radius:22px;overflow:hidden;
  transform:rotateY(-12deg) rotateX(6deg) rotateZ(3deg);
  box-shadow:0 50px 120px rgba(0,0,0,.65),0 0 60px rgba(125,249,255,.12);
  animation:float 7s ease-in-out infinite;
}
.orbital-core:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.28);border-radius:inherit;pointer-events:none}
.orbital-core img{width:100%;height:100%;object-fit:cover;display:block}
.orbital-ring{position:absolute;border:1px solid rgba(125,249,255,.26);border-radius:50%;filter:drop-shadow(0 0 10px rgba(125,249,255,.18))}
.ring-a{width:78%;height:36%;transform:rotate(-14deg);animation:spinA 18s linear infinite}
.ring-b{width:98%;height:58%;transform:rotate(48deg);border-color:rgba(165,137,255,.18);animation:spinB 24s linear infinite}
.hero-glow{position:absolute;width:42vw;height:42vw;border-radius:50%;right:2%;top:18%;background:radial-gradient(circle,rgba(112,96,255,.16),transparent 68%);filter:blur(30px)}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#687285;font-size:10px;letter-spacing:.2em}
.scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(#6f7c90,transparent)}

.museum-shell{min-height:115vh;padding:100px max(4vw,20px) 140px;max-width:var(--max);margin:auto}
.section-heading{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin-bottom:36px}
.section-heading h2{font-size:clamp(36px,5vw,78px);line-height:1;margin:0;letter-spacing:-.045em}
.section-meta{display:flex;gap:28px;color:#768094;font-size:10px;letter-spacing:.16em}
.viewport{
  position:relative;height:min(78vh,860px);min-height:620px;overflow:hidden;border-radius:28px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at center,rgba(41,58,91,.20),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 40px 100px rgba(0,0,0,.38);
  perspective:1500px;touch-action:pan-y;
}
.depth-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.27;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:68px 68px;
  transform:perspective(700px) rotateX(68deg) translateY(44%);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,#000,transparent 88%);
}
.orbit-stage,.grid-stage{position:absolute;inset:0}
.orbit-card{
  --x:0px;--y:0px;--z:0px;--r:0deg;
  position:absolute;left:50%;top:50%;width:clamp(190px,19vw,330px);aspect-ratio:.72;
  transform-style:preserve-3d;
  transform:translate3d(calc(-50% + var(--x)),calc(-50% + var(--y)),var(--z)) rotateZ(var(--r));
  transition:transform .12s linear,filter .35s,opacity .35s;
  cursor:pointer;
}
.orbit-card .card-inner{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 35px 80px rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16)}
.orbit-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .5s}
.orbit-card:hover img{transform:scale(1.035)}
.orbit-card:after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.card-label{position:absolute;left:16px;right:16px;bottom:14px;padding:12px 14px;border-radius:12px;background:rgba(7,9,14,.68);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);transform:translateZ(24px)}
.card-label small{display:block;color:#8f9aae;font-size:9px;letter-spacing:.14em;margin-bottom:5px}
.card-label strong{font-size:14px;font-weight:620}

.progress-rail{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(420px,58%);height:2px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 14px rgba(125,249,255,.45);transition:width .2s ease-out}

.grid-stage{padding:26px;overflow:auto}
.grid-stage.active{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-card{position:relative;min-height:360px;border-radius:18px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.grid-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.grid-card:hover img{transform:scale(1.03)}
.grid-card .card-label{position:absolute}

.manifesto{padding:120px max(7vw,26px) 150px;max-width:1250px;margin:auto}
.manifesto blockquote{margin:28px 0;font-size:clamp(34px,5.8vw,88px);line-height:1.12;letter-spacing:-.045em;font-weight:620}
.manifesto-note{max-width:760px;color:#858fa1;line-height:1.8}

.viewer{position:fixed;inset:0;z-index:100;display:none;overflow:hidden}
.viewer.open{display:block}
.viewer-backdrop{position:absolute;inset:0;background:rgba(2,3,6,.91);backdrop-filter:blur(22px)}
.viewer-close{
  position:absolute;right:24px;top:22px;z-index:4;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);font-size:28px;cursor:pointer
}
.viewer-stage{
  position:relative;z-index:2;
  width:100vw;height:100dvh;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,24vw,430px);
  gap:clamp(20px,3vw,48px);
  padding:72px 4vw 28px;
  overflow:hidden
}
.viewer-image-wrap{
  position:relative;
  width:100%;height:calc(100dvh - 100px);
  min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden
}
.viewer-image-wrap img{
  display:block;
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:14px;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  transition:opacity .25s ease
}
.viewer-loader{position:absolute;color:#788296;font-size:11px;letter-spacing:.2em}
.viewer-info{
  align-self:center;
  max-height:calc(100dvh - 130px);
  overflow:auto;
  padding:20px 18px 24px 0
}
.viewer-count,.viewer-eyebrow{color:#7f899b;font-size:11px;letter-spacing:.16em}
.viewer-info h3{font-size:clamp(34px,4vw,64px);line-height:1.05;margin:18px 0 16px;letter-spacing:-.04em}
.viewer-info>p:last-of-type{color:#a4adbc;line-height:1.8}
.viewer-controls{display:flex;gap:8px;margin-top:30px;position:sticky;bottom:0;padding-top:12px;background:linear-gradient(transparent,rgba(2,3,6,.92) 28%)}
.viewer-controls button{flex:1;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.055);cursor:pointer}

footer{padding:30px max(4vw,20px);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;color:#687285;font-size:10px;letter-spacing:.16em}

@keyframes float{0%,100%{transform:rotateY(-12deg) rotateX(6deg) rotateZ(3deg) translateY(0)}50%{transform:rotateY(-7deg) rotateX(3deg) rotateZ(-1deg) translateY(-20px)}}
@keyframes spinA{to{transform:rotate(346deg)}}
@keyframes spinB{to{transform:rotate(408deg)}}



/* Stronger desktop depth cues for V6.3 */
.viewer-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:15%;
  width:min(980px,68vw);
  height:56vh;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.42) 0%,
      rgba(247,233,192,.16) 34%,
      rgba(247,233,192,0) 74%);
  filter:blur(18px);
  z-index:0;
}

.viewer-stage::after{
  content:"";
  position:absolute;
  left:50%;
  top:58%;
  width:min(760px,54vw);
  height:1px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(190,154,76,.22), rgba(243,223,171,.74), rgba(190,154,76,.22), transparent);
  box-shadow:0 0 26px rgba(232,203,124,.22);
  z-index:2;
}

.viewer-image-wrap{
  filter:drop-shadow(0 42px 84px rgba(132,104,45,.08));
}

.viewer-image-wrap img{
  box-shadow:
    0 68px 160px rgba(112,88,38,.16),
    0 16px 32px rgba(104,82,37,.08),
    0 0 0 1px rgba(170,131,48,.08) !important;
}

.viewer-info{
  width:min(330px,23vw) !important;
  bottom:clamp(28px,4vh,58px) !important;
}

.viewer-zoom-hint{
  bottom:2.4vh;
}

@media(max-width:900px){
  .topbar{height:62px}
  .nav{display:none}
  .sound-toggle span:last-child{display:none}
  .hero{grid-template-columns:1fr;padding-top:110px;min-height:110svh}
  .hero-orbit{min-height:460px;margin-top:-40px}
  .orbital-core{width:min(54vw,330px)}
  .section-heading{align-items:flex-start;flex-direction:column}
  .section-meta{flex-wrap:wrap}
  .viewport{min-height:560px;height:76svh}
  .orbit-card{width:clamp(168px,42vw,260px)}
  .grid-stage.active{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-card{min-height:310px}
  .viewer-stage{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:14px;
    padding:66px 14px 14px
  }
  .viewer-image-wrap{
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 270px)
  }
  .viewer-image-wrap img{
    width:100%;
    height:100%;
    max-height:calc(100dvh - 270px)
  }
  .viewer-info{
    align-self:end;
    max-height:210px;
    overflow:auto;
    padding:0 4px 4px
  }
  .viewer-info h3{font-size:30px;margin:10px 0 8px}
  .viewer-info>p:last-of-type{margin:0;line-height:1.55}
  .viewer-controls{margin-top:14px}
}
@media(max-width:560px){
  .viewer-image-wrap{max-height:calc(100dvh - 245px)}
  .viewer-image-wrap img{max-height:calc(100dvh - 245px)}
  .viewer-info{max-height:190px}
  .hero{padding-left:22px;padding-right:22px}
  h1{font-size:20vw}
  .hero-sub{font-size:15px}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .museum-shell{padding-left:12px;padding-right:12px}
  .viewport{border-radius:20px;min-height:540px}
  .grid-stage{padding:12px}
  .grid-stage.active{grid-template-columns:1fr}
  .grid-card{min-height:520px}
  footer{gap:14px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
}


/* ===== V3 CATALOG EDITION ===== */
.nav a,.admin-link{color:#8c95a6;text-decoration:none;font-size:12px;letter-spacing:.08em;transition:.25s}
.nav{display:flex;gap:24px}
.nav a:hover,.admin-link:hover{color:#fff}
.admin-link{font-size:10px;letter-spacing:.14em}
.enter-btn{text-decoration:none;color:#fff}

.catalog-section{max-width:1500px;margin:auto;padding:120px max(4vw,20px) 150px}
.catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}
.catalog-head h2{font-size:clamp(42px,6vw,92px);line-height:.95;letter-spacing:-.05em;margin:0}
.search-box{width:min(390px,100%);height:50px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.035);backdrop-filter:blur(12px)}
.search-box span{color:#768094;font-size:22px}
.search-box input{width:100%;border:0;outline:0;background:transparent;color:#fff;font:inherit}
.search-box input::placeholder{color:#5f6878}

.catalog-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:clamp(28px,5vw,78px);padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.grade-rail{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:4px;padding-top:18px}
.grade-btn{position:relative;width:100%;padding:16px 14px;border:0;background:transparent;color:#667083;text-align:left;cursor:pointer;border-radius:12px;transition:.28s}
.grade-btn::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--accent);transition:.28s}
.grade-btn span{display:block;font-size:12px;letter-spacing:.08em}
.grade-btn small{display:block;font-size:9px;letter-spacing:.14em;margin-top:5px;opacity:.58}
.grade-btn:hover{color:#b9c2cf}
.grade-btn.active{color:#fff;padding-left:28px}
.grade-btn.active::before{width:18px;box-shadow:0 0 12px var(--accent)}

.catalog-main{min-width:0}
.semester-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025)}
.semester-switch button{border:0;background:transparent;color:#727d8f;padding:9px 20px;border-radius:999px;cursor:pointer}
.semester-switch button.active{color:#fff;background:rgba(255,255,255,.10)}
.catalog-meta{display:flex;justify-content:space-between;align-items:flex-end;margin:34px 0 12px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.10)}
.catalog-meta>div{display:flex;align-items:baseline;gap:14px}
.catalog-meta span{font-size:11px;letter-spacing:.13em;color:#778194}
.catalog-meta b{font-size:22px;font-weight:560}

.lesson-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:46px}
.lesson-item{position:relative;min-height:76px;padding:18px 52px 18px 4px;display:flex;align-items:center;gap:14px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:#a6afbd;text-align:left;cursor:pointer;transition:color .25s,padding-left .25s,background .25s}
.lesson-item:hover{color:#fff;padding-left:12px;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent)}
.lesson-index{font-size:10px;letter-spacing:.12em;color:#505a6a;min-width:28px}
.lesson-title{font-size:15px;line-height:1.55}
.lesson-sub{display:block;color:#667083;font-size:10px;margin-top:4px}
.lesson-state{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:9px;letter-spacing:.12em;color:#505a6a}
.lesson-item.available{color:#fff}
.lesson-item.available::after{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;border-radius:999px;background:linear-gradient(var(--accent),var(--accent2));box-shadow:0 0 16px rgba(125,249,255,.45)}
.lesson-item.available .lesson-state{color:var(--accent)}

.museum-toolbar{display:flex;gap:8px;margin:-12px 0 18px}
.museum-mode{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.025);color:#707b8d;padding:9px 16px;border-radius:999px;cursor:pointer}
.museum-mode.active{color:#fff;background:rgba(255,255,255,.09)}

.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,22px);padding:12px 18px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(10,13,20,.9);backdrop-filter:blur(16px);color:#c4ccd8;opacity:0;pointer-events:none;transition:.3s;font-size:12px}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .admin-link{display:none}
  .catalog-head{align-items:flex-start;flex-direction:column}
  .search-box{width:100%}
  .catalog-layout{grid-template-columns:1fr}
  .grade-rail{position:static;display:grid;grid-template-columns:repeat(3,1fr);padding-top:0}
  .grade-btn{padding:13px 10px;text-align:center;border:1px solid rgba(255,255,255,.07)}
  .grade-btn.active{padding-left:10px;background:rgba(255,255,255,.06)}
  .grade-btn::before{display:none}
  .lesson-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .catalog-section{padding-left:16px;padding-right:16px}
  .grade-rail{grid-template-columns:repeat(2,1fr)}
  .catalog-meta{align-items:flex-start;gap:14px}
  .catalog-meta>div{flex-direction:column;gap:5px}
  .lesson-item{padding-right:56px}
}


/* ===== V3.2 LIGHT THEME ===== */
:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --text:#11131a;
  --muted:#6f7888;
  --line:rgba(17,19,26,.12);
  --accent:#25b9c4;
  --accent2:#7f6ee8;
}

html{background:var(--bg)}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 72% 12%, rgba(127,110,232,.10), transparent 34%),
    radial-gradient(circle at 12% 58%, rgba(37,185,196,.08), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f7f8fb 55%,#f3f5f8 100%);
}

#starfield{opacity:.28;filter:invert(1)}
.noise{opacity:.018;mix-blend-mode:multiply}

.topbar{
  border-bottom:1px solid rgba(17,19,26,.08);
  background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,.72));
  box-shadow:0 6px 24px rgba(16,20,32,.03);
}
.brand{color:#11131a}
.brand-mark{
  background:var(--accent);
  box-shadow:0 0 20px rgba(37,185,196,.45)
}
.nav a,.admin-link{color:#6f7888}
.nav a:hover,.admin-link:hover{color:#11131a}

.kicker{color:#788292}
.hero-sub{color:#5f6978}
.hint{color:#8992a0}
.enter-btn{
  color:#11131a;
  border-color:rgba(17,19,26,.16);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(19,24,36,.06)
}
.enter-btn:hover{
  background:#fff;
  border-color:rgba(17,19,26,.28)
}
.scroll-cue{color:#8d96a4}
.scroll-cue i{background:linear-gradient(#7e8898,transparent)}

.hero-glow{
  background:radial-gradient(circle,rgba(127,110,232,.13),transparent 68%)
}
.orbital-core{
  box-shadow:0 45px 100px rgba(28,34,48,.18),0 0 50px rgba(37,185,196,.10)
}
.orbital-core:after{
  border-color:rgba(17,19,26,.12)
}
.orbital-ring{
  border-color:rgba(37,185,196,.30);
  filter:drop-shadow(0 0 10px rgba(37,185,196,.16))
}
.ring-b{border-color:rgba(127,110,232,.22)}

.catalog-layout{
  border-top-color:rgba(17,19,26,.08)
}
.search-box{
  border-color:rgba(17,19,26,.10);
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 26px rgba(22,28,40,.04)
}
.search-box span{color:#818a98}
.search-box input{color:#11131a}
.search-box input::placeholder{color:#9aa2af}

.grade-btn{color:#7c8594}
.grade-btn:hover{color:#1a1d25}
.grade-btn.active{
  color:#11131a;
  background:rgba(17,19,26,.035)
}
.semester-switch{
  border-color:rgba(17,19,26,.10);
  background:rgba(255,255,255,.82)
}
.semester-switch button{color:#7d8695}
.semester-switch button.active{
  color:#11131a;
  background:rgba(17,19,26,.07)
}
.catalog-meta{
  border-bottom-color:rgba(17,19,26,.09)
}
.catalog-meta span{color:#7e8796}
.lesson-item{
  color:#5f6877;
  border-bottom-color:rgba(17,19,26,.07)
}
.lesson-item:hover{
  color:#11131a;
  background:linear-gradient(90deg,rgba(17,19,26,.035),transparent)
}
.lesson-index{color:#a0a7b2}
.lesson-state{color:#9ca4b0}
.lesson-item.available{color:#11131a}
.lesson-item.available .lesson-state{color:#129ba6}

.museum-shell .section-meta{color:#788291}
.museum-mode{
  border-color:rgba(17,19,26,.10);
  background:rgba(255,255,255,.72);
  color:#7a8493
}
.museum-mode.active{
  color:#11131a;
  background:#fff;
  box-shadow:0 8px 22px rgba(22,28,40,.05)
}

.viewport{
  border-color:rgba(17,19,26,.10);
  background:
    radial-gradient(circle at center,rgba(110,126,170,.08),transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,251,.96));
  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    0 34px 80px rgba(24,30,44,.10)
}
.depth-lines{
  opacity:.22;
  background:
    linear-gradient(rgba(17,19,26,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,19,26,.04) 1px,transparent 1px)
}
.orbit-card .card-inner{
  background:#fff;
  border-color:rgba(17,19,26,.10);
  box-shadow:0 30px 65px rgba(24,30,44,.20)
}
.orbit-card:after{
  box-shadow:inset 0 0 0 1px rgba(17,19,26,.08)
}
.card-label{
  background:rgba(255,255,255,.84);
  border-color:rgba(17,19,26,.10);
  box-shadow:0 8px 24px rgba(20,26,38,.08);
  color:#11131a
}
.card-label small{color:#798392}

.progress-rail{background:rgba(17,19,26,.10)}
.grid-card{
  background:#fff;
  border-color:rgba(17,19,26,.10);
  box-shadow:0 18px 44px rgba(24,30,44,.10)
}

.manifesto-note{color:#737d8c}

.viewer-backdrop{
  background:rgba(246,248,251,.94);
  backdrop-filter:blur(22px)
}
.viewer-close{
  color:#11131a;
  border-color:rgba(17,19,26,.12);
  background:rgba(255,255,255,.86)
}
.viewer-image-wrap img{
  box-shadow:0 34px 90px rgba(24,30,44,.22)
}
.viewer-loader{color:#858e9d}
.viewer-count,.viewer-eyebrow{color:#7e8795}
.viewer-info>p:last-of-type{color:#5f6877}
.viewer-controls{
  background:linear-gradient(transparent,rgba(247,248,251,.97) 30%)
}
.viewer-controls button{
  color:#11131a;
  border-color:rgba(17,19,26,.12);
  background:rgba(255,255,255,.88)
}

.toast{
  background:rgba(255,255,255,.94);
  color:#2b3039;
  border-color:rgba(17,19,26,.12);
  box-shadow:0 14px 40px rgba(20,26,38,.12)
}

footer{
  border-top-color:rgba(17,19,26,.08);
  color:#7d8694
}

/* Light-theme mobile refinements */
@media(max-width:900px){
  .grade-btn{
    border-color:rgba(17,19,26,.08);
    background:rgba(255,255,255,.60)
  }
  .grade-btn.active{
    background:#fff;
    box-shadow:0 8px 22px rgba(22,28,40,.05)
  }
}


/* ===== V3.3 COMPACT GALLERY LAYOUT ===== */

/* Overall exhibition section feels lighter and less dominant */
.museum-shell{
  min-height:auto;
  padding-top:84px;
  padding-bottom:100px;
}

/* Smaller roaming / flat-view frame */
.viewport{
  height:min(60vh,620px);
  min-height:460px;
  max-height:620px;
  border-radius:22px;
}

/* Smaller roaming thumbnails */
.orbit-card{
  width:clamp(145px,14vw,230px);
}

/* Slightly calmer labels on smaller cards */
.card-label{
  left:10px;
  right:10px;
  bottom:10px;
  padding:9px 11px;
  border-radius:10px;
}
.card-label small{
  font-size:8px;
  margin-bottom:4px;
}
.card-label strong{
  font-size:12px;
}

/* Make roaming scene breathe more */
.depth-lines{
  background-size:82px 82px;
}
.progress-rail{
  bottom:16px;
  width:min(320px,46%);
}

/* Flat view becomes a compact gallery rather than large poster cards */
.grid-stage{
  padding:18px;
}
.grid-stage.active{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-content:start;
}
.grid-card{
  min-height:0;
  aspect-ratio:0.76;
  border-radius:14px;
}
.grid-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Reduce section heading dominance around the gallery */
.section-heading{
  margin-bottom:24px;
}
.section-heading h2{
  font-size:clamp(34px,4.4vw,64px);
}
.museum-toolbar{
  margin-top:-4px;
  margin-bottom:14px;
}

/* Tablet */
@media(max-width:1100px){
  .viewport{
    height:min(58vh,560px);
    min-height:430px;
  }
  .orbit-card{
    width:clamp(140px,18vw,210px);
  }
  .grid-stage.active{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:900px){
  .museum-shell{
    padding-top:72px;
    padding-bottom:84px;
  }
  .viewport{
    height:56svh;
    min-height:420px;
    max-height:560px;
  }
  .orbit-card{
    width:clamp(132px,34vw,190px);
  }
  .grid-stage.active{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .grid-card{
    min-height:0;
    aspect-ratio:0.76;
  }
}

/* Small phones */
@media(max-width:560px){
  .viewport{
    height:52svh;
    min-height:390px;
    max-height:500px;
    border-radius:18px;
  }
  .orbit-card{
    width:clamp(124px,38vw,170px);
  }
  .grid-stage{
    padding:10px;
  }
  .grid-stage.active{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .card-label{
    left:7px;
    right:7px;
    bottom:7px;
    padding:7px 8px;
  }
  .card-label strong{
    font-size:11px;
  }
  .progress-rail{
    width:44%;
  }
}


/* ===== V3.4 GRID OVERLAP FIX ===== */

/* The flat-view container must scroll internally and size rows correctly */
.grid-stage{
  width:100%;
  height:100%;
  overflow:auto;
  align-content:start;
  align-items:start;
  grid-auto-rows:auto;
}

/* Keep the active grid compact but structurally stable */
.grid-stage.active{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  padding:18px;
}

/* Each flat-view card is a self-contained vertical card */
.grid-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:0;
  height:auto;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}

/* Critical fix: image height must be constrained by the card, not free-grow */
.grid-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center top;
  flex:0 0 auto;
}

/* Make the caption a normal block under the image in grid mode */
.grid-card .card-label{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  margin:0;
  border-radius:0;
  border:0;
  border-top:1px solid rgba(17,19,26,.08);
  background:rgba(255,255,255,.96);
  box-shadow:none;
  padding:10px 12px 12px;
}

.grid-card .card-label small{
  display:block;
  font-size:8px;
  margin-bottom:4px;
}

.grid-card .card-label strong{
  display:block;
  font-size:12px;
  line-height:1.35;
  word-break:break-word;
}

/* Responsive columns */
@media(max-width:1100px){
  .grid-stage.active{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:900px){
  .grid-stage.active{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}
@media(max-width:560px){
  .grid-stage.active{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:10px;
  }
  .grid-card .card-label{
    padding:8px 9px 10px;
  }
  .grid-card .card-label strong{
    font-size:11px;
  }
}


/* ===== V3.5 SINGLE-ROW HORIZONTAL FLAT VIEW ===== */

/* Flat view: exactly one row, horizontal scrolling only */
.grid-stage{
  width:100%;
  height:100%;
  padding:20px;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(17,19,26,.28) transparent;
}

.grid-stage::-webkit-scrollbar{
  height:9px;
}
.grid-stage::-webkit-scrollbar-track{
  background:transparent;
}
.grid-stage::-webkit-scrollbar-thumb{
  background:rgba(17,19,26,.22);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

/* Critical override: no CSS grid rows at all */
.grid-stage.active{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  align-content:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  grid-template-columns:none !important;
  grid-auto-rows:unset !important;
  padding:20px !important;
}

/* Every card is an independent fixed-width item */
.grid-card{
  position:relative !important;
  flex:0 0 clamp(180px,16vw,240px) !important;
  width:clamp(180px,16vw,240px) !important;
  height:calc(100% - 28px) !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  scroll-snap-align:center;
  scroll-snap-stop:normal;
  border-radius:14px;
}

/* Image stays inside its own card and can never overlap another card */
.grid-card img{
  display:block !important;
  width:100% !important;
  height:calc(100% - 58px) !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center top !important;
  flex:1 1 auto !important;
}

/* Caption sits under each image as a fixed-height footer */
.grid-card .card-label{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  flex:0 0 58px !important;
  min-height:58px !important;
  margin:0 !important;
  padding:9px 11px !important;
  border:0 !important;
  border-top:1px solid rgba(17,19,26,.08) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:none !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Remove old responsive multi-column behavior */
@media(max-width:1100px){
  .grid-stage.active{
    display:flex !important;
    grid-template-columns:none !important;
  }
  .grid-card{
    flex-basis:clamp(170px,22vw,220px) !important;
    width:clamp(170px,22vw,220px) !important;
  }
}

@media(max-width:900px){
  .grid-stage.active{
    display:flex !important;
    gap:12px !important;
    padding:14px !important;
  }
  .grid-card{
    flex-basis:clamp(160px,40vw,210px) !important;
    width:clamp(160px,40vw,210px) !important;
    height:calc(100% - 20px) !important;
  }
}

@media(max-width:560px){
  .grid-stage{
    padding:10px !important;
  }
  .grid-stage.active{
    display:flex !important;
    gap:10px !important;
    padding:10px !important;
  }
  .grid-card{
    flex-basis:72vw !important;
    width:72vw !important;
    height:calc(100% - 16px) !important;
  }
}


/* ===== V3.6 WIDER HORIZONTAL CARDS ===== */

/* Give the horizontal gallery more breathing room */
.grid-stage.active{
  gap:20px !important;
  padding:20px 22px !important;
}

/* Wider cards: better match for portrait teaching posters */
.grid-card{
  flex:0 0 clamp(280px,24vw,380px) !important;
  width:clamp(280px,24vw,380px) !important;
  height:calc(100% - 28px) !important;
}

/* Show the whole poster instead of cropping it */
.grid-card img{
  width:100% !important;
  height:calc(100% - 58px) !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
}

/* Slightly roomier caption area */
.grid-card .card-label{
  flex:0 0 62px !important;
  min-height:62px !important;
  padding:10px 13px !important;
}

/* Tablet */
@media(max-width:1100px){
  .grid-card{
    flex-basis:clamp(250px,30vw,330px) !important;
    width:clamp(250px,30vw,330px) !important;
  }
}

/* Mobile */
@media(max-width:900px){
  .grid-card{
    flex-basis:clamp(230px,62vw,300px) !important;
    width:clamp(230px,62vw,300px) !important;
  }
}

/* Small phones */
@media(max-width:560px){
  .grid-card{
    flex-basis:82vw !important;
    width:82vw !important;
  }
}


/* ===== V3.7 INFINITE HORIZONTAL LOOP ===== */
.grid-stage{
  scroll-behavior:auto !important;
}
.grid-stage.active{
  scrollbar-gutter:stable;
}


/* ===== V3.8 SOFT EDGES / IMAGE BLEND ===== */

/* Shared soft-edge look for poem images */
.orbit-card .card-inner img,
.grid-card img{
  -webkit-mask-image:
    radial-gradient(circle at center,
      rgba(0,0,0,1) 72%,
      rgba(0,0,0,.96) 80%,
      rgba(0,0,0,.72) 88%,
      rgba(0,0,0,.35) 94%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(circle at center,
      rgba(0,0,0,1) 72%,
      rgba(0,0,0,.96) 80%,
      rgba(0,0,0,.72) 88%,
      rgba(0,0,0,.35) 94%,
      rgba(0,0,0,0) 100%);
  filter: saturate(1.01) contrast(1.01);
}

/* Orbit cards: lighter frame, less hard cutout */
.orbit-card .card-inner{
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(17,19,26,.07) !important;
  box-shadow:
    0 22px 52px rgba(24,30,44,.11),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  backdrop-filter:blur(10px);
}

.orbit-card::after{
  opacity:.55;
}

.orbit-card .card-inner::before{
  content:"";
  position:absolute;
  inset:10px 10px 68px 10px;
  border-radius:18px;
  pointer-events:none;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,.10) 76%,
      rgba(255,255,255,.32) 88%,
      rgba(247,248,251,.72) 100%);
  mix-blend-mode:normal;
}

/* Flat view cards: softer gallery-card feeling */
.grid-card{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(17,19,26,.07) !important;
  box-shadow:
    0 18px 42px rgba(24,30,44,.08),
    0 0 0 1px rgba(255,255,255,.52) inset !important;
  backdrop-filter:blur(8px);
}

.grid-card img{
  background:
    radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(249,250,252,1) 100%) !important;
}

/* Soft white glow around the visible artwork area */
.grid-card::before{
  content:"";
  position:absolute;
  inset:10px 10px 74px 10px;
  border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,.12) 76%,
      rgba(255,255,255,.40) 90%,
      rgba(247,248,251,.84) 100%);
  z-index:1;
}

.grid-card img,
.orbit-card .card-inner img{
  position:relative;
  z-index:0;
}

/* Caption blocks also become slightly softer */
.grid-card .card-label,
.orbit-card .card-label{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(17,19,26,.06) !important;
}

/* On smaller screens, reduce the softness slightly so text in images stays clear */
@media(max-width:900px){
  .orbit-card .card-inner img,
  .grid-card img{
    -webkit-mask-image:
      radial-gradient(circle at center,
        rgba(0,0,0,1) 76%,
        rgba(0,0,0,.92) 85%,
        rgba(0,0,0,.55) 93%,
        rgba(0,0,0,0) 100%);
    mask-image:
      radial-gradient(circle at center,
        rgba(0,0,0,1) 76%,
        rgba(0,0,0,.92) 85%,
        rgba(0,0,0,.55) 93%,
        rgba(0,0,0,0) 100%);
  }
}


/* ===== V3.9 PROGRESSIVE INVISIBLE EDGES ===== */

/* 1) Use a stronger, more progressive alpha fade on the image itself */
.orbit-card .card-inner img,
.grid-card img{
  -webkit-mask-image:
    radial-gradient(ellipse 84% 88% at center,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.98) 62%,
      rgba(0,0,0,.92) 72%,
      rgba(0,0,0,.74) 82%,
      rgba(0,0,0,.42) 90%,
      rgba(0,0,0,.16) 96%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 84% 88% at center,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.98) 62%,
      rgba(0,0,0,.92) 72%,
      rgba(0,0,0,.74) 82%,
      rgba(0,0,0,.42) 90%,
      rgba(0,0,0,.16) 96%,
      rgba(0,0,0,0) 100%);
}

/* 2) Add a progressive white veil over the artwork area so the edge fully melts
   into the page background instead of stopping at a visible border */
.orbit-card .card-inner::before,
.grid-card::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 84% 88% at center,
      rgba(255,255,255,0) 46%,
      rgba(255,255,255,.04) 58%,
      rgba(255,255,255,.10) 68%,
      rgba(255,255,255,.24) 78%,
      rgba(249,250,252,.54) 88%,
      rgba(247,248,251,.88) 96%,
      rgba(247,248,251,1) 100%),
    linear-gradient(to right,
      rgba(247,248,251,.96) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%,
      rgba(247,248,251,.96) 100%),
    linear-gradient(to bottom,
      rgba(247,248,251,.94) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%,
      rgba(247,248,251,.94) 100%);
}

/* Orbit image area */
.orbit-card .card-inner::before{
  inset:8px 8px 66px 8px;
  border-radius:20px;
}

/* Flat-view image area */
.grid-card::before{
  inset:8px 8px 72px 8px;
  border-radius:18px;
}

/* Keep labels above the fade overlay */
.orbit-card .card-label,
.grid-card .card-label{
  position:relative;
  z-index:2;
}

/* Soften card chrome as well, so there isn't a strong boxed feeling */
.orbit-card .card-inner,
.grid-card{
  border-color:rgba(17,19,26,.05) !important;
  box-shadow:
    0 18px 42px rgba(24,30,44,.07),
    0 0 0 1px rgba(255,255,255,.44) inset !important;
}

/* Slightly reduce clarity loss on smaller screens */
@media(max-width:900px){
  .orbit-card .card-inner img,
  .grid-card img{
    -webkit-mask-image:
      radial-gradient(ellipse 86% 90% at center,
        rgba(0,0,0,1) 58%,
        rgba(0,0,0,.95) 70%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.28) 94%,
        rgba(0,0,0,0) 100%);
    mask-image:
      radial-gradient(ellipse 86% 90% at center,
        rgba(0,0,0,1) 58%,
        rgba(0,0,0,.95) 70%,
        rgba(0,0,0,.72) 84%,
        rgba(0,0,0,.28) 94%,
        rgba(0,0,0,0) 100%);
  }

  .orbit-card .card-inner::before,
  .grid-card::before{
    background:
      radial-gradient(ellipse 86% 90% at center,
        rgba(255,255,255,0) 52%,
        rgba(255,255,255,.08) 66%,
        rgba(249,250,252,.40) 84%,
        rgba(247,248,251,.92) 100%);
  }
}


/* ===== V4.0 GAP FOG / INTER-CARD BLEND ===== */

/* The flat-view lane itself gets a very soft ambient mist */
.grid-stage{
  position:relative;
  isolation:isolate;
}

.grid-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 12% 50%, rgba(247,248,251,.96) 0%, rgba(247,248,251,0) 18%),
    radial-gradient(circle at 32% 50%, rgba(247,248,251,.52) 0%, rgba(247,248,251,0) 14%),
    radial-gradient(circle at 52% 50%, rgba(247,248,251,.52) 0%, rgba(247,248,251,0) 14%),
    radial-gradient(circle at 72% 50%, rgba(247,248,251,.52) 0%, rgba(247,248,251,0) 14%),
    radial-gradient(circle at 92% 50%, rgba(247,248,251,.96) 0%, rgba(247,248,251,0) 18%);
  filter:blur(16px);
  opacity:.72;
}

/* Cards float above the lane mist */
.grid-card,
.orbit-card .card-inner{
  position:relative;
  z-index:1;
}

/* Allow fog to spill slightly outside the card into the gap */
.grid-card{
  overflow:visible !important;
}

.grid-card::after{
  content:"";
  position:absolute;
  inset:18px -18px 78px -18px;
  pointer-events:none;
  z-index:-1;
  border-radius:24px;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.16) 58%,
      rgba(249,250,252,.44) 74%,
      rgba(247,248,251,.76) 88%,
      rgba(247,248,251,0) 100%);
  filter:blur(18px);
  opacity:.95;
}

/* Extra side fog so the gap between adjacent cards softly disappears */
.grid-card + .grid-card::before{
  content:"";
  position:absolute;
  left:-20px;
  top:12%;
  bottom:22%;
  width:40px;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(to right,
    rgba(247,248,251,.92) 0%,
    rgba(247,248,251,.58) 34%,
    rgba(247,248,251,.18) 68%,
    rgba(247,248,251,0) 100%);
  filter:blur(14px);
  mix-blend-mode:normal;
}

/* Mirror fog on the right edge so every card contributes to the gap */
.grid-card::selection{
  background:transparent;
}

.grid-card > img + .card-label{
  position:relative;
  z-index:3;
}

/* Orbit cards also get soft exterior mist so the space between floating cards is gentler */
.orbit-card{
  overflow:visible;
}

.orbit-card::before{
  content:"";
  position:absolute;
  inset:16px -18px 68px -18px;
  pointer-events:none;
  z-index:-1;
  border-radius:26px;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.12) 58%,
      rgba(249,250,252,.34) 74%,
      rgba(247,248,251,.60) 88%,
      rgba(247,248,251,0) 100%);
  filter:blur(18px);
  opacity:.9;
}

/* On smaller screens, keep the fog a bit tighter */
@media(max-width:900px){
  .grid-stage::before{
    filter:blur(12px);
    opacity:.62;
  }

  .grid-card::after{
    inset:16px -12px 74px -12px;
    filter:blur(14px);
    opacity:.88;
  }

  .grid-card + .grid-card::before{
    left:-14px;
    width:28px;
    filter:blur(10px);
  }

  .orbit-card::before{
    inset:14px -12px 66px -12px;
    filter:blur(14px);
  }
}


/* ===== V4.1 CLOUD MIST GALLERY ===== */

/* Exhibition viewport becomes a luminous mist chamber */
.viewport{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.98), rgba(244,247,250,.86) 34%, transparent 62%),
    radial-gradient(circle at 78% 68%, rgba(242,246,250,.90), rgba(255,255,255,.72) 36%, transparent 66%),
    linear-gradient(180deg,#fbfcfd 0%,#f4f7fa 52%,#f7f9fb 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(215,223,231,.46),
    0 28px 90px rgba(34,45,63,.10) !important;
}

/* Soft moving cloud layer: back */
.viewport::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 32% 24% at 15% 42%, rgba(255,255,255,.88) 0%, rgba(245,248,251,.54) 48%, rgba(255,255,255,0) 76%),
    radial-gradient(ellipse 34% 26% at 40% 68%, rgba(238,243,248,.72) 0%, rgba(255,255,255,.30) 52%, rgba(255,255,255,0) 78%),
    radial-gradient(ellipse 30% 22% at 72% 34%, rgba(255,255,255,.92) 0%, rgba(241,245,249,.50) 50%, rgba(255,255,255,0) 80%),
    radial-gradient(ellipse 38% 28% at 88% 72%, rgba(239,244,248,.70) 0%, rgba(255,255,255,.26) 56%, rgba(255,255,255,0) 82%);
  filter:blur(30px);
  opacity:.82;
  animation:cloudDriftA 28s ease-in-out infinite alternate;
}

/* Soft moving cloud layer: front */
.viewport::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 24% 16% at 18% 82%, rgba(255,255,255,.72) 0%, rgba(249,251,253,.46) 52%, rgba(255,255,255,0) 80%),
    radial-gradient(ellipse 28% 18% at 54% 24%, rgba(255,255,255,.76) 0%, rgba(243,247,250,.42) 52%, rgba(255,255,255,0) 78%),
    radial-gradient(ellipse 26% 18% at 84% 56%, rgba(247,250,252,.72) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 80%);
  filter:blur(24px);
  opacity:.62;
  animation:cloudDriftB 22s ease-in-out infinite alternate;
}

/* Stages and UI must stay above the cloud layers */
.depth-lines,
.orbit-stage,
.grid-stage,
.progress-rail{
  position:absolute;
  z-index:3;
}

/* Grid lane becomes a softly glowing ribbon inside the mist */
.grid-stage{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.42) 18%,
      rgba(255,255,255,.26) 52%,
      rgba(255,255,255,.42) 82%,
      rgba(255,255,255,.16) 100%) !important;
  backdrop-filter:blur(4px);
}

/* Ambient fog pools between cards */
.grid-stage::before{
  z-index:0 !important;
  inset:-8% !important;
  background:
    radial-gradient(ellipse 18% 46% at 8% 52%, rgba(255,255,255,.90) 0%, rgba(242,246,249,.48) 54%, rgba(255,255,255,0) 82%),
    radial-gradient(ellipse 20% 50% at 30% 48%, rgba(247,249,252,.74) 0%, rgba(255,255,255,.30) 56%, rgba(255,255,255,0) 84%),
    radial-gradient(ellipse 20% 50% at 52% 54%, rgba(241,246,250,.68) 0%, rgba(255,255,255,.28) 58%, rgba(255,255,255,0) 84%),
    radial-gradient(ellipse 20% 50% at 74% 46%, rgba(247,249,252,.76) 0%, rgba(255,255,255,.32) 56%, rgba(255,255,255,0) 84%),
    radial-gradient(ellipse 18% 46% at 96% 52%, rgba(255,255,255,.92) 0%, rgba(242,246,249,.50) 56%, rgba(255,255,255,0) 82%) !important;
  filter:blur(26px) !important;
  opacity:.82 !important;
  animation:mistLane 24s ease-in-out infinite alternate;
}

/* Cards feel like floating sheets emerging from clouds */
.grid-card{
  z-index:2 !important;
  border-color:rgba(255,255,255,.64) !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:
    0 24px 56px rgba(43,54,72,.08),
    0 6px 20px rgba(255,255,255,.34),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  backdrop-filter:blur(10px) saturate(1.04);
}

/* Exterior cloud halo around each flat card */
.grid-card::after{
  inset:10px -34px 64px -34px !important;
  background:
    radial-gradient(ellipse 80% 62% at center,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.16) 50%,
      rgba(245,248,251,.44) 68%,
      rgba(241,246,250,.72) 82%,
      rgba(255,255,255,0) 100%) !important;
  filter:blur(28px) !important;
  opacity:.94 !important;
}

/* Gap veil: make the separation between neighboring cards feel cloud-filled */
.grid-card + .grid-card::before{
  left:-34px !important;
  width:68px !important;
  top:8% !important;
  bottom:18% !important;
  background:
    radial-gradient(ellipse at center,
      rgba(247,249,251,.96) 0%,
      rgba(244,247,250,.76) 34%,
      rgba(255,255,255,.34) 66%,
      rgba(255,255,255,0) 100%) !important;
  filter:blur(20px) !important;
  opacity:.92;
}

/* Artwork fades into mist without a hard edge */
.grid-card img,
.orbit-card .card-inner img{
  -webkit-mask-image:
    radial-gradient(ellipse 86% 90% at center,
      #000 48%,
      rgba(0,0,0,.98) 60%,
      rgba(0,0,0,.88) 72%,
      rgba(0,0,0,.62) 84%,
      rgba(0,0,0,.28) 94%,
      rgba(0,0,0,0) 100%) !important;
  mask-image:
    radial-gradient(ellipse 86% 90% at center,
      #000 48%,
      rgba(0,0,0,.98) 60%,
      rgba(0,0,0,.88) 72%,
      rgba(0,0,0,.62) 84%,
      rgba(0,0,0,.28) 94%,
      rgba(0,0,0,0) 100%) !important;
}

/* Orbit cards get deeper mist and softer depth */
.orbit-card{
  filter:drop-shadow(0 22px 40px rgba(42,54,72,.08));
}

.orbit-card::before{
  inset:8px -34px 60px -34px !important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.14) 52%,
      rgba(245,248,251,.44) 70%,
      rgba(239,245,249,.68) 86%,
      rgba(255,255,255,0) 100%) !important;
  filter:blur(26px) !important;
  opacity:.94 !important;
}

/* Labels look like frosted museum tags */
.grid-card .card-label,
.orbit-card .card-label{
  background:rgba(255,255,255,.76) !important;
  backdrop-filter:blur(14px) saturate(1.05);
  border-color:rgba(255,255,255,.58) !important;
  box-shadow:
    0 8px 24px rgba(43,54,72,.05),
    0 1px 0 rgba(255,255,255,.82) inset !important;
}

/* Subtle luminous vignette at both ends of horizontal gallery */
.grid-stage.active{
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.50) 3%,
      #000 8%,
      #000 92%,
      rgba(0,0,0,.50) 97%,
      transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.50) 3%,
      #000 8%,
      #000 92%,
      rgba(0,0,0,.50) 97%,
      transparent 100%);
}

/* Cloud animations */
@keyframes cloudDriftA{
  0%{transform:translate3d(-2%,1%,0) scale(1)}
  50%{transform:translate3d(2%,-1%,0) scale(1.025)}
  100%{transform:translate3d(4%,1.5%,0) scale(1.01)}
}
@keyframes cloudDriftB{
  0%{transform:translate3d(1%,-1%,0) scale(1.02)}
  50%{transform:translate3d(-2%,1.5%,0) scale(1)}
  100%{transform:translate3d(3%,0,0) scale(1.03)}
}
@keyframes mistLane{
  0%{transform:translateX(-1.5%) scaleX(1)}
  50%{transform:translateX(1.5%) scaleX(1.02)}
  100%{transform:translateX(0) scaleX(1)}
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .viewport::before,
  .viewport::after,
  .grid-stage::before{
    animation:none !important;
  }
}

/* Mobile: keep the effect subtle and performant */
@media(max-width:900px){
  .viewport::before{filter:blur(22px);opacity:.66}
  .viewport::after{filter:blur(18px);opacity:.48}
  .grid-stage::before{filter:blur(18px) !important;opacity:.70 !important}
  .grid-card::after{filter:blur(18px) !important}
  .grid-card + .grid-card::before{filter:blur(14px) !important}
}


/* ===== V4.3 LARGE VIEW SOFT EDGES ===== */

/* Let the large detail image melt into the viewer background like the thumbnails */
.viewer-image-wrap{
  isolation:isolate;
}

/* Large image: center stays sharp, outer edge gradually disappears */
.viewer-image-wrap img{
  position:relative;
  z-index:1;
  -webkit-mask-image:
    radial-gradient(ellipse 86% 92% at center,
      rgba(0,0,0,1) 56%,
      rgba(0,0,0,.98) 66%,
      rgba(0,0,0,.90) 76%,
      rgba(0,0,0,.68) 86%,
      rgba(0,0,0,.34) 94%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 86% 92% at center,
      rgba(0,0,0,1) 56%,
      rgba(0,0,0,.98) 66%,
      rgba(0,0,0,.90) 76%,
      rgba(0,0,0,.68) 86%,
      rgba(0,0,0,.34) 94%,
      rgba(0,0,0,0) 100%);
  box-shadow:none !important;
}

/* Progressive white veil so the edge becomes almost invisible */
.viewer-image-wrap::before{
  content:"";
  position:absolute;
  inset:3% 4%;
  pointer-events:none;
  z-index:2;
  border-radius:22px;
  background:
    radial-gradient(ellipse 84% 90% at center,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.04) 62%,
      rgba(247,248,251,.12) 72%,
      rgba(247,248,251,.30) 82%,
      rgba(247,248,251,.62) 91%,
      rgba(247,248,251,.92) 97%,
      rgba(247,248,251,1) 100%);
}

/* Soft ambient halo behind the large image */
.viewer-image-wrap::after{
  content:"";
  position:absolute;
  inset:4% 2%;
  pointer-events:none;
  z-index:0;
  border-radius:28px;
  background:
    radial-gradient(ellipse 76% 72% at center,
      rgba(255,255,255,0) 36%,
      rgba(255,255,255,.12) 54%,
      rgba(244,247,250,.34) 70%,
      rgba(241,245,249,.62) 84%,
      rgba(247,248,251,0) 100%);
  filter:blur(26px);
  opacity:.96;
}

/* Slightly reduce the effect on small screens so text remains very crisp */
@media(max-width:900px){
  .viewer-image-wrap img{
    -webkit-mask-image:
      radial-gradient(ellipse 88% 94% at center,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,.96) 74%,
        rgba(0,0,0,.74) 88%,
        rgba(0,0,0,.26) 96%,
        rgba(0,0,0,0) 100%);
    mask-image:
      radial-gradient(ellipse 88% 94% at center,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,.96) 74%,
        rgba(0,0,0,.74) 88%,
        rgba(0,0,0,.26) 96%,
        rgba(0,0,0,0) 100%);
  }

  .viewer-image-wrap::before{
    inset:2% 2.5%;
    background:
      radial-gradient(ellipse 86% 92% at center,
        rgba(255,255,255,0) 58%,
        rgba(247,248,251,.14) 78%,
        rgba(247,248,251,.76) 95%,
        rgba(247,248,251,1) 100%);
  }

  .viewer-image-wrap::after{
    filter:blur(20px);
    opacity:.9;
  }
}


/* ===== V4.4 LARGE VIEW SUBTLE CORNER FADE ===== */

/* Override V4.3: keep center text clearer, only soften edges/corners slightly */
.viewer-image-wrap img{
  -webkit-mask-image:
    radial-gradient(ellipse 94% 97% at center,
      rgba(0,0,0,1) 74%,
      rgba(0,0,0,.995) 82%,
      rgba(0,0,0,.96) 88%,
      rgba(0,0,0,.84) 93%,
      rgba(0,0,0,.55) 97%,
      rgba(0,0,0,.18) 99%,
      rgba(0,0,0,0) 100%) !important;
  mask-image:
    radial-gradient(ellipse 94% 97% at center,
      rgba(0,0,0,1) 74%,
      rgba(0,0,0,.995) 82%,
      rgba(0,0,0,.96) 88%,
      rgba(0,0,0,.84) 93%,
      rgba(0,0,0,.55) 97%,
      rgba(0,0,0,.18) 99%,
      rgba(0,0,0,0) 100%) !important;
}

/* Lighter veil: only the outer rim melts into the page */
.viewer-image-wrap::before{
  inset:1.6% 2.2% !important;
  border-radius:18px !important;
  background:
    radial-gradient(ellipse 94% 97% at center,
      rgba(255,255,255,0) 74%,
      rgba(247,248,251,.03) 84%,
      rgba(247,248,251,.09) 90%,
      rgba(247,248,251,.22) 95%,
      rgba(247,248,251,.48) 98%,
      rgba(247,248,251,.82) 100%) !important;
}

/* Reduce halo intensity so the image feels cleaner and text sharper */
.viewer-image-wrap::after{
  inset:2.5% 1.5% !important;
  background:
    radial-gradient(ellipse 82% 78% at center,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.06) 66%,
      rgba(244,247,250,.18) 80%,
      rgba(241,245,249,.34) 92%,
      rgba(247,248,251,0) 100%) !important;
  filter:blur(16px) !important;
  opacity:.72 !important;
}

@media(max-width:900px){
  .viewer-image-wrap img{
    -webkit-mask-image:
      radial-gradient(ellipse 96% 98% at center,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,.985) 88%,
        rgba(0,0,0,.80) 95%,
        rgba(0,0,0,.28) 99%,
        rgba(0,0,0,0) 100%) !important;
    mask-image:
      radial-gradient(ellipse 96% 98% at center,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,.985) 88%,
        rgba(0,0,0,.80) 95%,
        rgba(0,0,0,.28) 99%,
        rgba(0,0,0,0) 100%) !important;
  }

  .viewer-image-wrap::before{
    inset:1% 1.5% !important;
    background:
      radial-gradient(ellipse 96% 98% at center,
        rgba(255,255,255,0) 80%,
        rgba(247,248,251,.08) 92%,
        rgba(247,248,251,.62) 99%,
        rgba(247,248,251,1) 100%) !important;
  }

  .viewer-image-wrap::after{
    filter:blur(12px) !important;
    opacity:.48 !important;
  }
}


/* ===== V4.5 LARGE VIEW STRONGER EDGE FOG ===== */

/* Stronger than V4.4, but still preserve a clear reading area in the center */
.viewer-image-wrap img{
  -webkit-mask-image:
    radial-gradient(ellipse 92% 95% at center,
      rgba(0,0,0,1) 66%,
      rgba(0,0,0,.995) 76%,
      rgba(0,0,0,.95) 84%,
      rgba(0,0,0,.80) 90%,
      rgba(0,0,0,.56) 95%,
      rgba(0,0,0,.24) 98%,
      rgba(0,0,0,0) 100%) !important;
  mask-image:
    radial-gradient(ellipse 92% 95% at center,
      rgba(0,0,0,1) 66%,
      rgba(0,0,0,.995) 76%,
      rgba(0,0,0,.95) 84%,
      rgba(0,0,0,.80) 90%,
      rgba(0,0,0,.56) 95%,
      rgba(0,0,0,.24) 98%,
      rgba(0,0,0,0) 100%) !important;
}

/* Stronger progressive veil on the outer rim and corners */
.viewer-image-wrap::before{
  inset:1.2% 1.8% !important;
  border-radius:20px !important;
  background:
    radial-gradient(ellipse 92% 95% at center,
      rgba(255,255,255,0) 66%,
      rgba(247,248,251,.05) 76%,
      rgba(247,248,251,.14) 84%,
      rgba(247,248,251,.32) 90%,
      rgba(247,248,251,.58) 95%,
      rgba(247,248,251,.88) 98%,
      rgba(247,248,251,1) 100%) !important;
}

/* Add extra corner fog so the four corners read more clearly as softened */
.viewer-image-wrap{
  position:relative;
  isolation:isolate;
}

.viewer-image-wrap::after{
  content:"";
  position:absolute;
  inset:1.5% 1.2%;
  pointer-events:none;
  z-index:0;
  border-radius:26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(247,248,251,.95) 0%, rgba(247,248,251,.42) 14%, rgba(247,248,251,0) 30%),
    radial-gradient(circle at 100% 0%, rgba(247,248,251,.95) 0%, rgba(247,248,251,.42) 14%, rgba(247,248,251,0) 30%),
    radial-gradient(circle at 0% 100%, rgba(247,248,251,.95) 0%, rgba(247,248,251,.42) 14%, rgba(247,248,251,0) 30%),
    radial-gradient(circle at 100% 100%, rgba(247,248,251,.95) 0%, rgba(247,248,251,.42) 14%, rgba(247,248,251,0) 30%),
    radial-gradient(ellipse 84% 78% at center,
      rgba(255,255,255,0) 54%,
      rgba(244,247,250,.10) 70%,
      rgba(241,245,249,.22) 84%,
      rgba(247,248,251,0) 100%) !important;
  filter:blur(20px) !important;
  opacity:.92 !important;
}

/* Mobile: keep stronger effect, but still avoid harming readability too much */
@media(max-width:900px){
  .viewer-image-wrap img{
    -webkit-mask-image:
      radial-gradient(ellipse 94% 96% at center,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,.985) 82%,
        rgba(0,0,0,.86) 90%,
        rgba(0,0,0,.42) 97%,
        rgba(0,0,0,0) 100%) !important;
    mask-image:
      radial-gradient(ellipse 94% 96% at center,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,.985) 82%,
        rgba(0,0,0,.86) 90%,
        rgba(0,0,0,.42) 97%,
        rgba(0,0,0,0) 100%) !important;
  }

  .viewer-image-wrap::before{
    inset:1% 1.2% !important;
    background:
      radial-gradient(ellipse 94% 96% at center,
        rgba(255,255,255,0) 70%,
        rgba(247,248,251,.10) 84%,
        rgba(247,248,251,.36) 92%,
        rgba(247,248,251,.82) 98%,
        rgba(247,248,251,1) 100%) !important;
  }

  .viewer-image-wrap::after{
    filter:blur(14px) !important;
    opacity:.82 !important;
  }
}


/* ===== V4.6 QIGONG DISPLAY HEADINGS ===== */

/* Custom calligraphy font pipeline:
   1) bundled font in assets/fonts
   2) local installed Qigong font
   3) graceful fallback to Kai/Kaiti style fonts
*/
@font-face{
  font-family:"AyoQigong";
  src:
    url("assets/fonts/qigong.woff2") format("woff2"),
    url("assets/fonts/qigong.woff") format("woff"),
    url("assets/fonts/qigong.ttf") format("truetype");
  font-display:swap;
}

/* Big headline font stack */
:root{
  --display-calligraphy-font:
    "AyoQigong",
    "启功体",
    "Qigong",
    "STQingKe",
    "STKaiti",
    "Kaiti SC",
    "KaiTi",
    "DFKai-SB",
    "Songti SC",
    serif;
}

/* Apply only to the prominent large titles */
.hero h1,
.catalog-head h2,
.section-heading h2,
#viewerTitle{
  font-family:var(--display-calligraphy-font) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Homepage giant title: more breathing room for calligraphic strokes */
.hero h1{
  line-height:.92 !important;
  letter-spacing:.01em !important;
}

/* Collection title and catalog big title */
.catalog-head h2,
.section-heading h2{
  line-height:1.05 !important;
}

/* Viewer title slightly more refined */
#viewerTitle{
  line-height:1.08 !important;
}

/* Optional subtle traditional feel without hurting readability */
.hero h1,
.section-heading h2{
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}


/* ===== V4.7 ALL SANS-SERIF TYPOGRAPHY ===== */

/* Unified modern sans-serif stack for the whole website */
:root{
  --ui-sans:
    Inter,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    "Noto Sans SC",
    system-ui,
    sans-serif;
}

html,
body,
button,
input,
select,
textarea,
a,
label,
small,
strong,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6{
  font-family:var(--ui-sans) !important;
}

/* Cancel the previous calligraphy-heading overrides */
.hero h1,
.catalog-head h2,
.section-heading h2,
#viewerTitle{
  font-family:var(--ui-sans) !important;
  font-weight:700 !important;
  letter-spacing:-.045em !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.hero h1{
  line-height:.88 !important;
}

.catalog-head h2,
.section-heading h2,
#viewerTitle{
  line-height:1.02 !important;
}

/* Keep body text clear and modern */
body{
  font-weight:400;
}

button,
input,
select,
textarea{
  font-family:var(--ui-sans) !important;
}

/* Admin page inherits the same typography when shared styles are not used */


/* ===== V4.8 CALLIGRAPHY DISPLAY HEADINGS ===== */

/* Body/UI remains clean sans-serif; only major display titles use brush calligraphy. */
:root{
  --display-calligraphy:
    "Ma Shan Zheng",
    "STKaiti",
    "Kaiti SC",
    "KaiTi",
    "DFKai-SB",
    serif;
}

/* Main large titles */
.hero h1,
.catalog-head h2,
.section-heading h2,
#viewerTitle{
  font-family:var(--display-calligraphy) !important;
  font-weight:400 !important;
  letter-spacing:.015em !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Homepage title gets more breathing room for brush strokes */
.hero h1{
  line-height:.94 !important;
}

/* Collection and catalog titles */
.catalog-head h2,
.section-heading h2{
  line-height:1.08 !important;
}

/* Viewer title */
#viewerTitle{
  line-height:1.12 !important;
}

/* Keep navigation, body, buttons and lesson lists sans-serif */
body,
button,
input,
select,
textarea,
.lesson-title,
.card-label,
.brand,
.nav,
.kicker,
.hero-sub,
.catalog-meta,
.viewer-info{
  font-family:var(--ui-sans) !important;
}


/* ===== V4.9 PRACTICE MODULE / 牛刀小试 ===== */

.practice-shell{
  max-width:1500px;
  margin:auto;
  padding:24px max(4vw,20px) 120px;
}

.practice-heading{
  margin-bottom:22px;
}

.practice-heading h2{
  font-family:var(--display-calligraphy, var(--ui-sans)) !important;
  font-size:clamp(36px,4.8vw,72px);
  line-height:1.05;
  margin:0;
  font-weight:400;
  letter-spacing:.01em;
}

.practice-viewport{
  position:relative;
  min-height:300px;
  height:min(46vh,470px);
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(17,19,26,.08);
  background:
    radial-gradient(circle at 18% 32%, rgba(255,255,255,.98), rgba(244,247,250,.78) 34%, transparent 62%),
    radial-gradient(circle at 80% 68%, rgba(241,246,250,.88), rgba(255,255,255,.64) 34%, transparent 66%),
    linear-gradient(180deg,#fbfcfd 0%,#f4f7fa 52%,#f7f9fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 24px 72px rgba(34,45,63,.08);
}

.practice-clouds{
  position:absolute;
  inset:-16%;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 26% at 16% 44%, rgba(255,255,255,.88) 0%, rgba(245,248,251,.46) 50%, rgba(255,255,255,0) 78%),
    radial-gradient(ellipse 30% 24% at 48% 68%, rgba(239,244,248,.64) 0%, rgba(255,255,255,.28) 52%, rgba(255,255,255,0) 80%),
    radial-gradient(ellipse 34% 26% at 82% 36%, rgba(255,255,255,.90) 0%, rgba(241,246,249,.48) 52%, rgba(255,255,255,0) 80%);
  filter:blur(28px);
  opacity:.76;
  animation:practiceCloudDrift 26s ease-in-out infinite alternate;
}

.practice-empty{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#758091;
  padding:28px;
}

.practice-empty-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(17,19,26,.10);
  background:rgba(255,255,255,.62);
  font-size:32px;
  font-weight:200;
  margin-bottom:14px;
  box-shadow:0 12px 30px rgba(28,34,48,.06);
}

.practice-empty strong{
  color:#313741;
  font-size:18px;
  font-weight:600;
}

.practice-empty small{
  margin-top:8px;
  font-size:12px;
  color:#8d96a5;
}

.practice-track{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(17,19,26,.22) transparent;
}

.practice-track::-webkit-scrollbar{height:8px}
.practice-track::-webkit-scrollbar-track{background:transparent}
.practice-track::-webkit-scrollbar-thumb{
  background:rgba(17,19,26,.20);
  border-radius:999px;
}

.practice-card{
  position:relative;
  flex:0 0 clamp(260px,23vw,360px);
  width:clamp(260px,23vw,360px);
  height:calc(100% - 20px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  scroll-snap-align:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.68);
  box-shadow:
    0 20px 46px rgba(43,54,72,.08),
    0 0 0 1px rgba(255,255,255,.52) inset;
  backdrop-filter:blur(10px);
  cursor:pointer;
}

.practice-card::before{
  content:"";
  position:absolute;
  inset:10px -28px 64px -28px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0) 36%,
      rgba(255,255,255,.16) 54%,
      rgba(245,248,251,.44) 72%,
      rgba(241,246,250,.70) 86%,
      rgba(255,255,255,0) 100%);
  filter:blur(22px);
}

.practice-card img{
  display:block;
  width:100%;
  height:calc(100% - 56px);
  object-fit:contain;
  background:transparent;
  -webkit-mask-image:
    radial-gradient(ellipse 90% 94% at center,
      #000 60%,
      rgba(0,0,0,.96) 74%,
      rgba(0,0,0,.74) 86%,
      rgba(0,0,0,.30) 95%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse 90% 94% at center,
      #000 60%,
      rgba(0,0,0,.96) 74%,
      rgba(0,0,0,.74) 86%,
      rgba(0,0,0,.30) 95%,
      rgba(0,0,0,0) 100%);
}

.practice-card .practice-label{
  flex:0 0 56px;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 12px;
  border-top:1px solid rgba(17,19,26,.06);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(12px);
}

.practice-card .practice-label small{
  color:#8490a1;
  font-size:8px;
  letter-spacing:.12em;
}

.practice-card .practice-label strong{
  color:#222831;
  font-size:13px;
  line-height:1.35;
  margin-top:3px;
}

@keyframes practiceCloudDrift{
  0%{transform:translate3d(-2%,1%,0) scale(1)}
  50%{transform:translate3d(2%,-1%,0) scale(1.02)}
  100%{transform:translate3d(4%,1%,0) scale(1.01)}
}

@media(max-width:900px){
  .practice-shell{
    padding-top:12px;
    padding-bottom:90px;
  }
  .practice-viewport{
    height:44svh;
    min-height:320px;
  }
  .practice-card{
    flex-basis:70vw;
    width:70vw;
  }
}

@media(max-width:560px){
  .practice-viewport{
    min-height:300px;
    height:42svh;
    border-radius:18px;
  }
  .practice-track{
    gap:12px;
    padding:12px;
  }
  .practice-card{
    flex-basis:82vw;
    width:82vw;
  }
}

@media(prefers-reduced-motion:reduce){
  .practice-clouds{animation:none !important}
}


/* ===== V5.0 Practice-only lesson empty museum state ===== */
.museum-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  color:#6f7988;
  padding:28px;
}
.museum-empty-mark{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(17,19,26,.08);
  background:rgba(255,255,255,.72);
  box-shadow:0 16px 32px rgba(44,52,66,.06);
  font-size:22px;
}
.museum-empty strong{
  font-size:18px;
  font-weight:600;
  color:#2d3440;
}
.museum-empty small{
  font-size:12px;
  color:#8b94a3;
}


/* ===== V5.1 PRACTICE INFINITE LOOP ===== */
.practice-track{
  scroll-behavior:auto !important;
  scrollbar-gutter:stable;
}


/* ===== V5.3 CONTACT COPY SIZE ===== */
.manifesto .contact-copy{
  font-size:clamp(14px,1.6vw,28px) !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
}


/* ===== V5.4 CONTACT COPY REAL SIZE FIX ===== */
.manifesto blockquote.contact-copy{
  font-size:clamp(16px,1.8vw,30px) !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  font-weight:500 !important;
  margin:18px 0 0 !important;
  max-width:100% !important;
}

/* ===== V6.0 MOBILE PORTRAIT READER / 手机竖屏诗图流 ===== */
.mobile-museum-status,
.mobile-dock{
  display:none;
}

@media(max-width:900px){
  html{
    scroll-padding-top:64px;
  }

  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
  }

  #starfield{
    opacity:.38;
  }

  .noise{
    opacity:.022;
  }

  .topbar{
    height:58px !important;
    padding:0 16px !important;
    background:rgba(250,251,253,.82) !important;
    border-bottom:1px solid rgba(17,19,26,.07) !important;
    backdrop-filter:blur(18px) saturate(1.15) !important;
  }

  .brand{
    gap:9px !important;
    color:#171a21 !important;
    font-size:13px !important;
    letter-spacing:.08em !important;
  }

  .brand-mark{
    width:8px !important;
    height:8px !important;
  }

  .nav,
  .admin-link{
    display:none !important;
  }

  .hero{
    min-height:100svh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:8px !important;
    padding:88px 22px 72px !important;
  }

  .hero-copy{
    width:100%;
  }

  .hero .kicker{
    margin-bottom:13px !important;
    font-size:10px !important;
    letter-spacing:.14em !important;
  }

  .hero h1{
    font-size:min(21vw,92px) !important;
    line-height:.9 !important;
    letter-spacing:-.065em !important;
  }

  .hero-sub{
    margin-top:22px !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .hero-actions{
    margin-top:26px !important;
    gap:12px !important;
    flex-direction:row !important;
    align-items:center !important;
  }

  .enter-btn{
    width:158px !important;
    height:50px !important;
  }

  .hint{
    font-size:10px !important;
    letter-spacing:.08em !important;
  }

  .hero-orbit{
    width:100% !important;
    min-height:300px !important;
    margin:4px 0 -10px !important;
  }

  .orbital-core{
    width:min(56vw,250px) !important;
  }

  .hero-glow{
    width:84vw !important;
    height:84vw !important;
    right:-26vw !important;
    top:46% !important;
  }

  .scroll-cue{
    display:none !important;
  }

  .catalog-section{
    padding:84px 16px 82px !important;
  }

  .catalog-head{
    margin-bottom:24px !important;
    gap:18px !important;
  }

  .catalog-head h2{
    font-size:clamp(38px,11vw,56px) !important;
    line-height:.98 !important;
  }

  .search-box{
    min-height:48px !important;
    border-radius:16px !important;
  }

  .catalog-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    padding-top:14px !important;
  }

  .grade-rail{
    position:sticky !important;
    top:58px !important;
    z-index:18 !important;
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    width:calc(100% + 32px) !important;
    margin:0 -16px !important;
    padding:10px 16px 11px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    background:rgba(247,248,251,.88) !important;
    backdrop-filter:blur(18px) saturate(1.12) !important;
    border-bottom:1px solid rgba(17,19,26,.06) !important;
  }

  .grade-rail::-webkit-scrollbar{
    display:none !important;
  }

  .grade-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:94px !important;
    padding:10px 14px !important;
    text-align:left !important;
    scroll-snap-align:center !important;
    border:1px solid rgba(17,19,26,.08) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.58) !important;
  }

  .grade-btn.active{
    padding-left:14px !important;
    color:#11131a !important;
    background:#fff !important;
    border-color:rgba(37,185,196,.34) !important;
    box-shadow:0 8px 24px rgba(35,55,72,.08) !important;
  }

  .semester-switch{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    padding:4px !important;
  }

  .semester-switch button{
    min-height:40px !important;
  }

  .catalog-meta{
    margin:20px 0 6px !important;
    padding-bottom:14px !important;
  }

  .catalog-meta>div{
    flex-direction:row !important;
    align-items:baseline !important;
    gap:10px !important;
  }

  .catalog-meta b{
    font-size:18px !important;
  }

  .lesson-list{
    grid-template-columns:1fr !important;
  }

  .lesson-item{
    min-height:68px !important;
    padding:14px 62px 14px 8px !important;
  }

  .lesson-title{
    font-size:14px !important;
  }

  .museum-shell{
    min-height:0 !important;
    padding:78px 12px 76px !important;
  }

  .section-heading{
    gap:12px !important;
    margin-bottom:18px !important;
  }

  .section-heading h2,
  .practice-heading h2{
    font-size:clamp(34px,10.5vw,52px) !important;
    line-height:1.03 !important;
  }

  .section-meta{
    gap:12px !important;
    font-size:9px !important;
  }

  .museum-toolbar{
    display:none !important;
  }

  .viewport{
    position:relative !important;
    height:calc(100svh - 112px) !important;
    min-height:540px !important;
    overflow:hidden !important;
    border-radius:24px !important;
    border:1px solid rgba(17,19,26,.07) !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,.98), rgba(246,248,251,.82) 48%, transparent 76%),
      linear-gradient(180deg,#f8fafc 0%,#f2f6f8 100%) !important;
    box-shadow:0 24px 70px rgba(35,47,62,.09) !important;
    perspective:none !important;
    touch-action:pan-y !important;
  }

  .viewport::before,
  .viewport::after,
  .depth-lines,
  .progress-rail,
  .orbit-stage{
    display:none !important;
  }

  .mobile-museum-status{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:44px;
    padding:9px 13px;
    border:1px solid rgba(17,19,26,.07);
    border-radius:15px;
    background:rgba(255,255,255,.78);
    box-shadow:0 10px 30px rgba(37,48,62,.07);
    backdrop-filter:blur(16px) saturate(1.1);
    pointer-events:none;
  }

  .mobile-museum-status span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#252b34;
    font-size:13px;
    font-weight:600;
  }

  .mobile-museum-status b{
    flex:0 0 auto;
    color:#7e8795;
    font-size:10px;
    font-weight:600;
    letter-spacing:.12em;
  }

  .grid-stage,
  .grid-stage.active{
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scroll-snap-type:y mandatory !important;
    overscroll-behavior-y:contain !important;
    scroll-behavior:smooth !important;
    scrollbar-width:none !important;
    background:transparent !important;
  }

  .grid-stage::-webkit-scrollbar{
    display:none !important;
  }

  .grid-stage::before,
  .grid-card::before,
  .grid-card::after,
  .grid-card + .grid-card::before{
    display:none !important;
    content:none !important;
  }

  .grid-card{
    position:relative !important;
    width:100% !important;
    min-width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:64px 10px 16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .grid-card img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:94% !important;
    max-height:calc(100% - 10px) !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:14px !important;
    box-shadow:0 20px 52px rgba(30,41,55,.13) !important;
    transform:none !important;
    filter:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .grid-card .card-label{
    display:none !important;
  }

  .practice-shell{
    padding:16px 12px 82px !important;
  }

  .practice-heading{
    margin-bottom:16px !important;
  }

  .practice-viewport{
    height:calc(100svh - 112px) !important;
    min-height:540px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }

  .practice-clouds{
    animation:none !important;
    opacity:.46 !important;
  }

  .practice-track{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scroll-snap-type:y mandatory !important;
    overscroll-behavior-y:contain !important;
    scrollbar-width:none !important;
  }

  .practice-track::-webkit-scrollbar{
    display:none !important;
  }

  .practice-card{
    flex:0 0 100% !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:16px 12px 12px !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .practice-card::before{
    display:none !important;
    content:none !important;
  }

  .practice-card img{
    width:100% !important;
    height:calc(100% - 66px) !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.42) !important;
    box-shadow:0 18px 48px rgba(37,49,65,.10) !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .practice-card .practice-label{
    flex:0 0 58px !important;
    min-height:58px !important;
    width:100% !important;
    padding:10px 8px 4px !important;
    border:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
  }

  .practice-card .practice-label strong{
    color:#252b34 !important;
    font-size:14px !important;
  }

  .viewer{
    z-index:1000 !important;
  }

  .viewer-stage{
    width:100vw !important;
    height:100svh !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:0 !important;
    padding:calc(54px + env(safe-area-inset-top)) 0 0 !important;
    overflow:hidden !important;
  }

  .viewer-image-wrap{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    padding:8px 10px 10px !important;
    overflow:hidden !important;
  }

  .viewer-image-wrap::before,
  .viewer-image-wrap::after{
    display:none !important;
    content:none !important;
  }

  .viewer-image-wrap img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    border-radius:12px !important;
    box-shadow:0 18px 50px rgba(34,44,57,.15) !important;
  }

  .viewer-close{
    top:calc(10px + env(safe-area-inset-top)) !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
    color:#252b34 !important;
    background:rgba(255,255,255,.86) !important;
    border-color:rgba(17,19,26,.08) !important;
    box-shadow:0 8px 24px rgba(27,38,52,.10) !important;
  }

  .viewer-info{
    align-self:auto !important;
    width:100% !important;
    max-height:38svh !important;
    margin:0 !important;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom)) !important;
    overflow:auto !important;
    border-radius:24px 24px 0 0 !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 -14px 46px rgba(36,47,61,.10) !important;
    backdrop-filter:blur(20px) saturate(1.12) !important;
  }

  .viewer-count,
  .viewer-eyebrow{
    margin:0 !important;
    font-size:9px !important;
  }

  .viewer-info h3{
    margin:8px 0 6px !important;
    font-size:28px !important;
    line-height:1.08 !important;
  }

  .viewer-info>p:last-of-type{
    display:-webkit-box !important;
    margin:0 !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-height:1.55 !important;
    font-size:13px !important;
  }

  .viewer-controls{
    position:static !important;
    margin-top:12px !important;
    padding-top:0 !important;
    background:transparent !important;
  }

  .viewer-controls button{
    height:44px !important;
    background:#f5f7f9 !important;
  }

  .manifesto{
    padding:72px 20px 84px !important;
  }

  footer{
    padding:24px 18px 96px !important;
  }

  .mobile-dock{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:80;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:58px;
    padding:5px;
    border:1px solid rgba(17,19,26,.08);
    border-radius:20px;
    background:rgba(255,255,255,.86);
    box-shadow:0 18px 48px rgba(30,43,57,.16);
    backdrop-filter:blur(20px) saturate(1.18);
  }

  .mobile-dock a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    color:#717b89;
    text-decoration:none;
    border-radius:15px;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-dock a:active{
    background:rgba(37,185,196,.09);
    color:#1a8f99;
  }

  .mobile-dock span{
    font-size:17px;
    line-height:1;
  }

  .mobile-dock small{
    font-size:9px;
    letter-spacing:.06em;
  }

  .toast{
    bottom:calc(84px + env(safe-area-inset-bottom)) !important;
    max-width:calc(100vw - 28px) !important;
    white-space:normal !important;
    text-align:center !important;
  }
}

@media(max-width:560px){
  .hero-actions{
    justify-content:space-between !important;
  }

  .hero-orbit{
    min-height:270px !important;
  }

  .viewport,
  .practice-viewport{
    height:calc(100svh - 96px) !important;
    min-height:500px !important;
    border-radius:20px !important;
  }

  .grid-card{
    padding:60px 6px 12px !important;
  }

  .grid-card img{
    max-width:96% !important;
    border-radius:12px !important;
  }

  .practice-card{
    padding:12px 8px 10px !important;
  }

  .viewer-info{
    max-height:40svh !important;
  }
}

@media(max-width:900px) and (orientation:landscape){
  .mobile-dock{
    left:50%;
    right:auto;
    width:min(420px,72vw);
    transform:translateX(-50%);
  }

  .viewport,
  .practice-viewport{
    min-height:420px !important;
  }

  .grid-card img{
    max-width:74% !important;
  }
}

/* V6.0 hidden-state guards */
@media(max-width:900px){
  .grid-stage[hidden],
  .practice-track[hidden]{
    display:none !important;
  }
}


/* ===== V6.5 CLOUD SEA SUNRISE VIEWER =====
   Warm sunlight, pale cream atmosphere, distant gallery depth.
   Desktop gets perspective / wheel approach; mobile keeps the V6 portrait reader.
*/

.viewer{
  --viewer-zoom:.82;
  --viewer-pan-x:0px;
  --viewer-pan-y:0px;
  color:#5d5038;
}

.viewer.open{
  animation:viewerWarmFadeIn .42s ease both;
}

.viewer-backdrop{
  background:
    radial-gradient(circle at 52% 4%, rgba(255,253,241,.96) 0 7%, rgba(248,235,188,.18) 18%, rgba(248,235,188,0) 38%),
    radial-gradient(ellipse at 12% 46%, rgba(224,192,110,.07), rgba(224,192,110,0) 28%),
    radial-gradient(ellipse at 88% 56%, rgba(214,177,90,.06), rgba(214,177,90,0) 30%),
    linear-gradient(180deg,#fffdfa 0%,#fbf8f1 44%,#f4efe5 100%) !important;
  backdrop-filter:none !important;
  overflow:hidden;
}

.viewer-backdrop::before{
  content:"";
  position:absolute;
  inset:-18% -12% 18% -8%;
  pointer-events:none;
  background:
    linear-gradient(112deg,
      transparent 30%,
      rgba(231,196,112,.015) 39%,
      rgba(245,229,176,.16) 47%,
      rgba(255,252,239,.08) 54%,
      transparent 66%);
  filter:blur(18px);
  opacity:.34;
  transform:translate3d(-1%,0,0) rotate(-4deg);
  transform-origin:50% 0;
  animation:viewerSunBreath 11s ease-in-out infinite alternate;
}

.viewer-backdrop::after{
  content:"";
  position:absolute;
  left:50%;
  top:55%;
  width:120vw;
  height:34vh;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(225,194,116,.10) 0%,
      rgba(234,214,165,.035) 34%,
      rgba(234,214,165,0) 72%);
  filter:blur(12px);
}

.viewer-stage{
  position:relative !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
  perspective:2400px;
  isolation:isolate;
}

.viewer-horizon{
  position:absolute;
  left:50%;
  top:60%;
  z-index:1;
  width:168vw;
  height:86vh;
  pointer-events:none;
  transform:translateX(-50%) perspective(960px) rotateX(72deg);
  transform-origin:center top;
  opacity:.28;
  background:
    linear-gradient(rgba(159,124,55,.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,124,55,.078) 1px, transparent 1px);
  background-size:92px 78px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.42) 38%, transparent 86%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.42) 38%, transparent 86%);
}

.viewer-horizon::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(189,150,67,.34),rgba(242,221,166,.68),rgba(189,150,67,.34),transparent);
  box-shadow:0 0 30px rgba(221,188,106,.34);
}

.viewer-image-wrap{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  z-index:4;
  width:min(36vw,620px) !important;
  height:min(68vh,820px) !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  isolation:isolate;
  cursor:zoom-in;
  transform:
    translate3d(
      calc(-50% + var(--viewer-pan-x)),
      calc(-58% + var(--viewer-pan-y)),
      0
    )
    scale(var(--viewer-zoom));
  transform-origin:center;
  transition:
    transform .95s cubic-bezier(.2,.76,.2,1),
    filter .65s ease;
  will-change:transform;
}

.viewer-image-wrap::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:10% -14% !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:42% !important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,251,236,.62) 0%,
      rgba(239,220,166,.12) 38%,
      rgba(219,184,95,.03) 58%,
      rgba(219,184,95,0) 78%) !important;
  filter:blur(24px) !important;
  opacity:.58 !important;
}

.viewer-image-wrap::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:1.5% !important;
  z-index:2 !important;
  pointer-events:none !important;
  border:1px solid rgba(171,132,50,.13) !important;
  border-radius:18px !important;
  background:none !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.62),
    0 0 80px rgba(219,184,98,.10) !important;
  opacity:.78 !important;
}

.viewer-image-wrap img{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.18);
  box-shadow:
    0 52px 124px rgba(112,88,38,.14),
    0 12px 28px rgba(104,82,37,.08),
    0 0 0 1px rgba(170,131,48,.08) !important;
  filter:saturate(.98) contrast(.99);
  transition:
    opacity .42s ease,
    filter .62s ease !important;
}

.viewer.is-ready .viewer-image-wrap img{
  filter:saturate(1) contrast(1);
}

.viewer-loader{
  z-index:5;
  color:#a1864f !important;
  font-size:10px !important;
  letter-spacing:.24em !important;
}

.viewer-info{
  position:absolute !important;
  left:clamp(28px,5vw,96px) !important;
  bottom:clamp(30px,5vh,72px) !important;
  z-index:8;
  align-self:auto !important;
  width:min(360px,25vw) !important;
  max-height:min(48vh,520px) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:auto !important;
  color:#594c34;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transition:opacity .5s ease, transform .5s ease;
}

.viewer-count,
.viewer-eyebrow{
  color:#9a8050 !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
}

.viewer-info h3{
  margin:14px 0 12px !important;
  color:#4f422d;
  font-size:clamp(30px,3.3vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  text-shadow:0 1px rgba(255,255,255,.55);
}

.viewer-info>p:last-of-type{
  color:#75674e !important;
  line-height:1.75 !important;
}

.viewer-controls{
  position:static !important;
  display:flex !important;
  gap:8px !important;
  margin-top:24px !important;
  padding-top:0 !important;
  background:transparent !important;
}

.viewer-controls button{
  height:45px !important;
  color:#665538 !important;
  border:1px solid rgba(151,117,48,.16) !important;
  border-radius:999px !important;
  background:rgba(255,252,244,.70) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.84),
    0 10px 28px rgba(112,87,35,.07) !important;
  backdrop-filter:blur(14px) saturate(1.08);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.viewer-controls button:hover{
  transform:translateY(-2px);
  background:rgba(255,253,247,.94) !important;
  border-color:rgba(151,117,48,.30) !important;
}

.viewer-close{
  top:24px !important;
  right:28px !important;
  z-index:12 !important;
  color:#75613c !important;
  border:1px solid rgba(155,119,46,.16) !important;
  background:rgba(255,253,247,.72) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    0 12px 36px rgba(98,76,34,.09) !important;
  backdrop-filter:blur(15px) saturate(1.12);
  transition:opacity .5s ease, transform .35s ease, background .25s ease;
}

.viewer-close:hover{
  transform:rotate(4deg) scale(1.04);
  background:rgba(255,254,250,.96) !important;
}

.viewer-neighbor{
  position:absolute;
  top:50%;
  z-index:3;
  width:clamp(104px,10vw,176px);
  padding:0;
  border:0;
  color:#6d5d40;
  background:transparent;
  cursor:pointer;
  opacity:.42;
  transition:
    opacity .5s ease,
    filter .5s ease,
    transform .7s cubic-bezier(.2,.76,.2,1);
}

.viewer-neighbor-prev{
  left:clamp(16px,3.2vw,64px);
  transform:translateY(-50%) perspective(1400px) rotateY(34deg) translateZ(-80px) scale(.56);
  transform-origin:left center;
}

.viewer-neighbor-next{
  right:clamp(16px,3.2vw,64px);
  transform:translateY(-50%) perspective(1400px) rotateY(-34deg) translateZ(-80px) scale(.56);
  transform-origin:right center;
}

.viewer-neighbor:hover{
  opacity:.82;
  filter:none;
}

.viewer-neighbor-prev:hover{
  transform:translateY(-50%) perspective(1400px) rotateY(20deg) translateZ(-28px) scale(.64) translateX(6px);
}

.viewer-neighbor-next:hover{
  transform:translateY(-50%) perspective(1400px) rotateY(-20deg) translateZ(-28px) scale(.64) translateX(-6px);
}

.viewer-neighbor-frame{
  display:block;
  width:100%;
  aspect-ratio:.72;
  padding:6px;
  overflow:hidden;
  border:1px solid rgba(155,119,46,.14);
  border-radius:18px;
  background:rgba(255,253,247,.44);
  box-shadow:0 28px 74px rgba(104,80,33,.13);
  backdrop-filter:blur(8px);
}

.viewer-neighbor-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  filter:blur(1.4px) saturate(.78) contrast(.95);
  transition:filter .45s ease, transform .55s ease;
}

.viewer-neighbor:hover .viewer-neighbor-frame img{
  filter:blur(.15px) saturate(.95) contrast(1);
  transform:scale(1.02);
}

.viewer-neighbor-copy{
  display:block;
  margin-top:12px;
  text-align:center;
}

.viewer-neighbor-copy small{
  display:block;
  margin-bottom:5px;
  color:#a68c5c;
  font-size:8px;
  letter-spacing:.22em;
}

.viewer-neighbor-copy strong{
  display:block;
  overflow:hidden;
  color:#766344;
  font-size:12px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.viewer.has-single-item .viewer-neighbor{
  display:none;
}

.viewer-zoom-hint{
  position:absolute;
  left:50%;
  bottom:3.4vh;
  z-index:7;
  margin:0;
  color:rgba(126,101,54,.58);
  font-size:9px;
  letter-spacing:.18em;
  transform:translateX(-50%);
  white-space:nowrap;
  transition:opacity .5s ease, transform .5s ease;
}

@media(min-width:901px){
  .viewer.is-idle .viewer-close,
  .viewer.is-idle .viewer-info,
  .viewer.is-idle .viewer-neighbor,
  .viewer.is-idle .viewer-zoom-hint{
    opacity:0;
    pointer-events:none;
  }

  .viewer.is-idle .viewer-info{
    transform:translateY(10px);
  }

  .viewer.is-idle .viewer-zoom-hint{
    transform:translate(-50%,8px);
  }
}

@keyframes viewerWarmFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes viewerSunBreath{
  0%{opacity:.56;transform:translate3d(-4%,-1%,0) rotate(-6deg) scale(1)}
  100%{opacity:.84;transform:translate3d(3%,1%,0) rotate(-3deg) scale(1.05)}
}

/* Mobile keeps the portrait-reading behavior, but changes the atmosphere to warm sunlight. */
@media(max-width:900px){
  .viewer-backdrop{
    background:
      radial-gradient(circle at 52% 0%, rgba(255,251,232,.90) 0 10%, rgba(242,220,161,.14) 28%, transparent 48%),
      radial-gradient(ellipse at 6% 45%, rgba(221,185,99,.05), transparent 34%),
      linear-gradient(180deg,#fffdfa 0%,#fbf8f1 58%,#f4eee3 100%) !important;
  }

  .viewer-backdrop::before{
    inset:-16% -30% 34% -16%;
    opacity:.24;
    filter:blur(18px);
  }

  .viewer-backdrop::after{
    top:50%;
    height:28vh;
    opacity:.58;
  }

  .viewer-stage{
    width:100vw !important;
    height:100svh !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:0 !important;
    padding:calc(54px + env(safe-area-inset-top)) 0 0 !important;
    overflow:hidden !important;
    perspective:none !important;
  }

  .viewer-horizon,
  .viewer-neighbor,
  .viewer-zoom-hint{
    display:none !important;
  }

  .viewer-image-wrap{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    padding:8px 10px 10px !important;
    overflow:hidden !important;
    cursor:default !important;
    transform:none !important;
    transition:none !important;
  }

  .viewer-image-wrap::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    inset:9% 8% !important;
    z-index:0 !important;
    border-radius:34% !important;
    background:
      radial-gradient(ellipse at center,
        rgba(255,251,233,.72) 0%,
        rgba(235,207,136,.12) 48%,
        rgba(216,177,84,0) 76%) !important;
    filter:blur(18px) !important;
    opacity:.52 !important;
  }

  .viewer-image-wrap::after{
    display:none !important;
    content:none !important;
  }

  .viewer-image-wrap img{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.16) !important;
    box-shadow:
      0 16px 42px rgba(108,83,36,.10),
      0 0 0 1px rgba(163,125,48,.07) !important;
  }

  .viewer-close{
    top:calc(10px + env(safe-area-inset-top)) !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
    color:#735f3b !important;
    background:rgba(255,253,247,.88) !important;
    border-color:rgba(159,121,46,.13) !important;
    box-shadow:0 8px 24px rgba(103,79,34,.09) !important;
  }

  .viewer-info{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    align-self:auto !important;
    width:100% !important;
    max-height:38svh !important;
    margin:0 !important;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom)) !important;
    overflow:auto !important;
    border-top:1px solid rgba(157,119,45,.10) !important;
    border-radius:24px 24px 0 0 !important;
    color:#594c34 !important;
    background:rgba(255,253,248,.94) !important;
    box-shadow:0 -14px 46px rgba(105,82,38,.09) !important;
    backdrop-filter:blur(20px) saturate(1.08) !important;
    transform:none !important;
  }

  .viewer-count,
  .viewer-eyebrow{
    color:#9a8050 !important;
  }

  .viewer-info h3{
    color:#4f422d !important;
  }

  .viewer-info>p:last-of-type{
    color:#75674e !important;
  }

  .viewer-controls{
    position:static !important;
    margin-top:12px !important;
    padding-top:0 !important;
    background:transparent !important;
  }

  .viewer-controls button{
    height:44px !important;
    color:#665538 !important;
    border-color:rgba(151,117,48,.14) !important;
    background:#f7f1e5 !important;
    box-shadow:none !important;
  }
}

@media(max-width:560px){
  .viewer-info{
    max-height:40svh !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .viewer.open,
  .viewer-backdrop::before{
    animation:none !important;
  }

  .viewer-image-wrap,
  .viewer-neighbor,
  .viewer-close,
  .viewer-info,
  .viewer-zoom-hint{
    transition:none !important;
  }
}


/* ===== V6.4 MOUNTAIN OUTLOOK TUNING =====
   Goal: less “gallery floor”, more “standing on a hilltop and looking far away”.
   Desktop only. Mobile keeps the portrait-reading behavior.
*/
@media(min-width:901px){
  .viewer-stage{
    perspective:3200px !important;
  }

  .viewer-backdrop{
    background:
      radial-gradient(circle at 52% 4%, rgba(255,254,245,.98) 0 8%, rgba(248,235,188,.10) 18%, rgba(248,235,188,0) 36%),
      linear-gradient(180deg,#fffdfa 0%,#fcf8f0 42%,#f5efe4 72%,#f0e8dc 100%) !important;
  }

  .viewer-backdrop::before{
    inset:-8% -4% 34% -4% !important;
    background:
      linear-gradient(112deg,
        transparent 26%,
        rgba(234,204,126,.035) 39%,
        rgba(251,242,207,.12) 48%,
        rgba(255,252,241,.05) 56%,
        transparent 68%) !important;
    filter:blur(16px) !important;
    opacity:.30 !important;
    transform:translate3d(0,0,0) rotate(-3deg) !important;
  }

  .viewer-backdrop::after{
    left:50% !important;
    top:54% !important;
    width:118vw !important;
    height:26vh !important;
    transform:translateX(-50%) !important;
    background:
      radial-gradient(ellipse at center,
        rgba(231,204,136,.08) 0%,
        rgba(240,222,178,.03) 36%,
        rgba(240,222,178,0) 74%) !important;
    filter:blur(10px) !important;
    opacity:.9 !important;
  }

  /* Open sky above the far horizon */
  .viewer-stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:11%;
    width:min(1020px,72vw);
    height:44vh;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(ellipse at center,
        rgba(255,255,255,.44) 0%,
        rgba(249,240,208,.11) 32%,
        rgba(249,240,208,0) 72%);
    filter:blur(12px);
  }

  /* Foreground ridge: like standing on a gentle hill */
  .viewer-stage::after{
    content:"";
    position:absolute;
    left:-6vw;
    right:-6vw;
    bottom:-8vh;
    height:26vh;
    pointer-events:none;
    z-index:2;
    background:
      linear-gradient(180deg,
        rgba(207,176,109,.02) 0%,
        rgba(192,161,98,.08) 26%,
        rgba(173,142,83,.13) 72%,
        rgba(155,124,69,.18) 100%);
    clip-path:ellipse(78% 88% at 50% 100%);
    box-shadow:0 -1px 0 rgba(255,255,255,.20) inset;
  }

  .viewer-horizon{
    top:63% !important;
    width:192vw !important;
    height:100vh !important;
    transform:translateX(-50%) perspective(1350px) rotateX(78deg) !important;
    opacity:.22 !important;
    background:
      linear-gradient(rgba(157,123,60,.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(157,123,60,.05) 1px, transparent 1px) !important;
    background-size:104px 84px !important;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.34) 34%, transparent 84%) !important;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.34) 34%, transparent 84%) !important;
  }

  /* distant layered ridgelines / atmosphere */
  .viewer-horizon::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(188,154,78,.18),rgba(247,230,179,.68),rgba(188,154,78,.18),transparent) !important;
    box-shadow:0 0 18px rgba(233,203,124,.18) !important;
  }

  .viewer-horizon::after{
    content:"";
    position:absolute;
    left:50%;
    top:-8%;
    width:110%;
    height:34%;
    transform:translateX(-50%);
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(188,155,87,.10) 0%, rgba(188,155,87,0) 58%),
      radial-gradient(ellipse at 34% 100%, rgba(188,155,87,.08) 0%, rgba(188,155,87,0) 44%),
      radial-gradient(ellipse at 66% 100%, rgba(188,155,87,.08) 0%, rgba(188,155,87,0) 44%);
    filter:blur(6px);
    opacity:.52;
  }

  .viewer-image-wrap{
    top:49% !important;
    width:min(30vw,540px) !important;
    height:min(60vh,720px) !important;
    transform:
      translate3d(
        calc(-50% + var(--viewer-pan-x)),
        calc(-62% + var(--viewer-pan-y)),
        0
      )
      scale(var(--viewer-zoom)) !important;
    transition:transform 1s cubic-bezier(.2,.76,.2,1), filter .65s ease !important;
    filter:drop-shadow(0 56px 90px rgba(132,104,45,.07)) !important;
  }

  .viewer-image-wrap::before{
    inset:14% -18% !important;
    background:
      radial-gradient(ellipse at center,
        rgba(255,252,239,.58) 0%,
        rgba(241,223,176,.10) 34%,
        rgba(219,184,95,.02) 56%,
        rgba(219,184,95,0) 78%) !important;
    filter:blur(26px) !important;
    opacity:.42 !important;
  }

  .viewer-image-wrap img{
    box-shadow:
      0 78px 170px rgba(112,88,38,.13),
      0 18px 34px rgba(104,82,37,.07),
      0 0 0 1px rgba(170,131,48,.07) !important;
  }

  .viewer-neighbor{
    top:52% !important;
    width:clamp(92px,8vw,146px) !important;
    opacity:.26 !important;
  }

  .viewer-neighbor-prev{
    left:clamp(22px,4vw,78px) !important;
    transform:translateY(-46%) perspective(1600px) rotateY(40deg) translateZ(-120px) scale(.48) !important;
  }

  .viewer-neighbor-next{
    right:clamp(22px,4vw,78px) !important;
    transform:translateY(-46%) perspective(1600px) rotateY(-40deg) translateZ(-120px) scale(.48) !important;
  }

  .viewer-neighbor:hover{
    opacity:.54 !important;
  }

  .viewer-neighbor-prev:hover{
    transform:translateY(-46%) perspective(1600px) rotateY(24deg) translateZ(-54px) scale(.58) translateX(5px) !important;
  }

  .viewer-neighbor-next:hover{
    transform:translateY(-46%) perspective(1600px) rotateY(-24deg) translateZ(-54px) scale(.58) translateX(-5px) !important;
  }

  .viewer-info{
    width:min(320px,22vw) !important;
    bottom:clamp(22px,3.2vh,46px) !important;
    left:clamp(22px,4vw,82px) !important;
  }

  .viewer-zoom-hint{
    bottom:1.8vh !important;
  }
}


/* ===== V6.5 CLOUD-SEA SUNRISE TUNING =====
   Goal: transparent golden sunrise over a sea of clouds.
   Less foggy yellow wash, more clear sunlight / cloud horizon atmosphere.
*/
@media(min-width:901px){
  .viewer-backdrop{
    background:
      radial-gradient(circle at 52% 7%, rgba(255,253,245,.98) 0 7%, rgba(255,238,188,.18) 15%, rgba(255,238,188,0) 30%),
      radial-gradient(circle at 50% 11%, rgba(247,214,126,.14) 0 4%, rgba(247,214,126,0) 11%),
      linear-gradient(180deg,#fffefa 0%, #fffaf1 30%, #f8f3e8 62%, #f2eadc 100%) !important;
  }

  /* sunrise beam */
  .viewer-backdrop::before{
    inset:-8% -4% 22% -4% !important;
    background:
      linear-gradient(180deg,
        rgba(255,249,232,.00) 0%,
        rgba(255,241,200,.08) 14%,
        rgba(249,216,128,.13) 26%,
        rgba(255,250,233,.05) 38%,
        rgba(255,250,233,0) 60%) !important;
    filter:blur(14px) !important;
    opacity:.34 !important;
    transform:translate3d(0,0,0) !important;
  }

  /* sea of clouds band */
  .viewer-backdrop::after{
    left:50% !important;
    top:55% !important;
    width:132vw !important;
    height:30vh !important;
    transform:translateX(-50%) !important;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.42) 0%, rgba(255,250,234,.19) 36%, rgba(255,250,234,0) 74%),
      radial-gradient(ellipse at 34% 56%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 44%),
      radial-gradient(ellipse at 66% 56%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 44%),
      radial-gradient(ellipse at center, rgba(236,206,125,.06) 0%, rgba(236,206,125,0) 68%) !important;
    filter:blur(12px) !important;
    opacity:1 !important;
  }

  /* open sky glow */
  .viewer-stage::before{
    background:
      radial-gradient(ellipse at center,
        rgba(255,255,255,.48) 0%,
        rgba(253,244,214,.12) 34%,
        rgba(253,244,214,0) 74%) !important;
    filter:blur(10px) !important;
    top:10% !important;
    height:42vh !important;
  }

  /* foreground ridge, lighter and cleaner */
  .viewer-stage::after{
    bottom:-10vh !important;
    height:24vh !important;
    background:
      linear-gradient(180deg,
        rgba(214,185,120,.00) 0%,
        rgba(199,169,106,.04) 28%,
        rgba(182,151,92,.09) 72%,
        rgba(164,133,76,.13) 100%) !important;
    clip-path:ellipse(80% 90% at 50% 100%) !important;
    box-shadow:0 -1px 0 rgba(255,255,255,.24) inset !important;
  }

  .viewer-horizon{
    top:62.5% !important;
    width:198vw !important;
    height:104vh !important;
    transform:translateX(-50%) perspective(1450px) rotateX(79deg) !important;
    opacity:.18 !important;
    background:
      linear-gradient(rgba(162,129,63,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(162,129,63,.032) 1px, transparent 1px) !important;
    background-size:110px 90px !important;
  }

  .viewer-horizon::before{
    top:0 !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(201,166,85,.14),rgba(255,236,184,.82),rgba(201,166,85,.14),transparent) !important;
    box-shadow:0 0 12px rgba(243,214,128,.16) !important;
  }

  /* layered cloud sea sitting on the horizon */
  .viewer-horizon::after{
    content:"";
    position:absolute;
    left:50%;
    top:-4%;
    width:116%;
    height:28%;
    transform:translateX(-50%);
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.50) 0%, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 60%),
      radial-gradient(ellipse at 24% 80%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(ellipse at 76% 80%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(ellipse at 40% 84%, rgba(255,248,228,.24) 0%, rgba(255,248,228,0) 36%),
      radial-gradient(ellipse at 60% 84%, rgba(255,248,228,.24) 0%, rgba(255,248,228,0) 36%);
    filter:blur(8px);
    opacity:.78;
  }

  .viewer-image-wrap::before{
    inset:14% -18% !important;
    background:
      radial-gradient(ellipse at center,
        rgba(255,252,241,.50) 0%,
        rgba(245,226,177,.08) 34%,
        rgba(245,226,177,.01) 50%,
        rgba(245,226,177,0) 74%) !important;
    filter:blur(22px) !important;
    opacity:.34 !important;
  }

  .viewer-image-wrap img{
    box-shadow:
      0 82px 178px rgba(112,88,38,.11),
      0 18px 34px rgba(104,82,37,.06),
      0 0 0 1px rgba(170,131,48,.06) !important;
  }

  .viewer-info,
  .viewer-close{
    color:#665435 !important;
  }
}

/* mobile version keeps portrait reader, but shifts to clear sunrise / cloud-sea colors */
@media(max-width:900px){
  .viewer-backdrop{
    background:
      radial-gradient(circle at 52% 6%, rgba(255,252,238,.96) 0 9%, rgba(248,222,148,.12) 22%, rgba(248,222,148,0) 38%),
      linear-gradient(180deg,#fffefa 0%, #fbf7ef 55%, #f3ebdf 100%) !important;
  }

  .viewer-backdrop::before{
    inset:-10% -12% 26% -12% !important;
    background:
      linear-gradient(180deg,
        rgba(255,250,236,0) 0%,
        rgba(250,220,138,.08) 24%,
        rgba(255,252,238,.04) 38%,
        rgba(255,252,238,0) 60%) !important;
    filter:blur(12px) !important;
    opacity:.24 !important;
  }

  .viewer-backdrop::after{
    top:52% !important;
    height:22vh !important;
    background:
      radial-gradient(ellipse at center, rgba(255,255,255,.34) 0%, rgba(255,251,240,.12) 34%, rgba(255,251,240,0) 70%),
      radial-gradient(ellipse at 32% 58%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%),
      radial-gradient(ellipse at 68% 58%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%) !important;
    filter:blur(10px) !important;
    opacity:.95 !important;
  }

  .viewer-image-wrap::before{
    background:
      radial-gradient(ellipse at center,
        rgba(255,252,238,.62) 0%,
        rgba(242,214,146,.08) 46%,
        rgba(242,214,146,0) 76%) !important;
    filter:blur(16px) !important;
    opacity:.44 !important;
  }

  .viewer-info{
    background:rgba(255,253,247,.95) !important;
    border-top:1px solid rgba(176,140,73,.08) !important;
    box-shadow:0 -12px 34px rgba(105,82,38,.06) !important;
  }

  .viewer-controls button{
    background:#faf3e6 !important;
  }
}

/* ===== V6.6 CLEAR TOP-TO-BOTTOM SUNRISE GRADIENT =====
   Top: clear pale-blue sky with a restrained golden sunrise.
   Bottom: progressively lighter, ending in warm white.
   No full-screen blur or fog wash. Desktop depth and mobile portrait reading remain.
*/

.viewer-backdrop{
  background:
    radial-gradient(
      circle at 50% 7%,
      rgba(255,225,136,.56) 0 2.6%,
      rgba(255,237,187,.24) 5.4%,
      rgba(255,247,222,.08) 10%,
      rgba(255,247,222,0) 17%
    ),
    linear-gradient(
      180deg,
      #b8deed 0%,
      #cae6ef 22%,
      #dcecef 43%,
      #edf3f0 63%,
      #f8f8f3 82%,
      #fffdfa 100%
    ) !important;
  backdrop-filter:none !important;
}

/* A clean vertical sunlight tint—not a blurred fog layer. */
.viewer-backdrop::before{
  inset:0 !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,229,153,.17) 0%,
      rgba(255,239,199,.09) 17%,
      rgba(255,249,229,.025) 39%,
      rgba(255,255,255,0) 64%
    ) !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

/* Remove the broad cloud/fog wash from the previous version. */
.viewer-backdrop::after{
  display:none !important;
}

@media(min-width:901px){
  /* Let the sky gradient stay open and transparent. */
  .viewer-stage::before{
    display:none !important;
  }

  /* Keep the hilltop foreground, but make it crisp and very light. */
  .viewer-stage::after{
    bottom:-11vh !important;
    height:22vh !important;
    background:
      linear-gradient(
        180deg,
        rgba(190,160,100,0) 0%,
        rgba(180,149,91,.025) 30%,
        rgba(166,135,79,.075) 72%,
        rgba(151,120,68,.11) 100%
      ) !important;
    clip-path:ellipse(82% 90% at 50% 100%) !important;
    box-shadow:0 -1px 0 rgba(255,255,255,.32) inset !important;
  }

  .viewer-horizon{
    top:62.5% !important;
    opacity:.14 !important;
    background:
      linear-gradient(rgba(118,143,148,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118,143,148,.038) 1px, transparent 1px) !important;
    background-size:112px 92px !important;
  }

  /* A narrow, clear sunrise line. */
  .viewer-horizon::before{
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(202,168,88,.10),
        rgba(255,229,160,.70),
        rgba(202,168,88,.10),
        transparent
      ) !important;
    box-shadow:none !important;
  }

  /* Cloud-sea suggestion made from clean shapes, with no blur. */
  .viewer-horizon::after{
    top:-2% !important;
    width:112% !important;
    height:20% !important;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.62) 0 26%, rgba(255,255,255,0) 66%),
      radial-gradient(ellipse at 24% 100%, rgba(255,255,255,.36) 0 22%, rgba(255,255,255,0) 58%),
      radial-gradient(ellipse at 76% 100%, rgba(255,255,255,.36) 0 22%, rgba(255,255,255,0) 58%),
      radial-gradient(ellipse at 39% 100%, rgba(255,248,227,.24) 0 20%, rgba(255,248,227,0) 54%),
      radial-gradient(ellipse at 61% 100%, rgba(255,248,227,.24) 0 20%, rgba(255,248,227,0) 54%) !important;
    filter:none !important;
    opacity:.52 !important;
  }

  /* Reduce the halo around the artwork so the image stays crisp. */
  .viewer-image-wrap::before{
    inset:16% -12% !important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(255,251,238,.38) 0%,
        rgba(255,244,211,.08) 42%,
        rgba(255,244,211,0) 72%
      ) !important;
    filter:none !important;
    opacity:.38 !important;
  }

  .viewer-image-wrap img{
    box-shadow:
      0 72px 158px rgba(91,104,98,.10),
      0 16px 30px rgba(102,91,62,.055),
      0 0 0 1px rgba(158,137,85,.055) !important;
  }
}

@media(max-width:900px){
  .viewer-backdrop{
    background:
      radial-gradient(
        circle at 52% 5%,
        rgba(255,226,139,.44) 0 3.2%,
        rgba(255,239,194,.18) 7%,
        rgba(255,247,222,0) 16%
      ),
      linear-gradient(
        180deg,
        #c1e2ee 0%,
        #d4e9ef 28%,
        #e8f1ef 55%,
        #f6f7f2 78%,
        #fffdfa 100%
      ) !important;
  }

  .viewer-backdrop::before,
  .viewer-backdrop::after{
    display:none !important;
  }

  .viewer-image-wrap::before{
    background:
      radial-gradient(
        ellipse at center,
        rgba(255,252,240,.34) 0%,
        rgba(255,244,211,.05) 48%,
        rgba(255,244,211,0) 76%
      ) !important;
    filter:none !important;
    opacity:.30 !important;
  }

  .viewer-info{
    background:rgba(255,254,251,.965) !important;
    border-top:1px solid rgba(151,137,104,.08) !important;
    box-shadow:0 -10px 28px rgba(72,92,91,.055) !important;
  }

  .viewer-controls button{
    background:#f8f6ef !important;
  }
}


/* ===== FINAL DETAIL PAGE SPACING TUNE =====
   Move the main artwork upward on desktop detail view
   to reduce the blank area between the header and the poster.
*/
@media (min-width: 901px){
  .viewer-image-wrap{
    top: 43.5% !important;
  }
}

/* ===== FINAL DETAIL HEADER POSITION FIX START ===== */

/* The injected detail title is hidden unless the large-image viewer is open. */
.v614-detail-header,
.v6131-detail-header,
.v613-detail-header {
  display: none !important;
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483000 !important;
  width: min(360px, calc(100vw - 150px)) !important;
  max-width: 360px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  pointer-events: none !important;
  user-select: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Chrome/Edge: tie visibility directly to the real viewer state. */
body:has(#viewer.open) .v614-detail-header,
body:has(#viewer.open) .v6131-detail-header,
body:has(#viewer.open) .v613-detail-header,
body.v614-detail-mode .v614-detail-header,
body.v6131-detail-mode .v6131-detail-header,
body.v613-detail-mode .v613-detail-header {
  display: flex !important;
}

.v614-detail-cn,
.v6131-detail-title,
.v613-detail-title {
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: #111 !important;
  font-family:
    "Ma Shan Zheng",
    "STXinwei",
    "FZShuTi",
    "STKaiti",
    "KaiTi",
    "Kaiti SC",
    "Microsoft YaHei",
    serif !important;
  font-size: clamp(58px, 5.2vw, 76px) !important;
  font-weight: 400 !important;
  line-height: .9 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: none !important;
}

.v614-detail-rule,
.v6131-detail-line,
.v613-detail-line {
  display: block !important;
  width: min(280px, 70vw) !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1.5px solid rgba(25,25,25,.78) !important;
  background: none !important;
}

.v614-detail-en,
.v6131-detail-pinyin,
.v613-detail-pinyin {
  display: block !important;
  margin: 5px 0 5px !important;
  padding: 0 !important;
  color: #171717 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(25px, 2.25vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Keep the detail background white and remove the previous blue sky / sun. */
#viewer.open .viewer-backdrop {
  background: #fff !important;
  backdrop-filter: none !important;
}

#viewer.open .viewer-backdrop::before,
#viewer.open .viewer-backdrop::after,
#viewer.open .viewer-stage::before,
#viewer.open .viewer-stage::after,
#viewer.open .viewer-horizon {
  display: none !important;
  content: none !important;
}

/* Move the artwork upward, but leave a clean gap below the title. */
@media (min-width: 901px) {
  #viewer.open .viewer-image-wrap {
    top: 43.5% !important;
  }
}

@media (max-width: 900px) {
  .v614-detail-header,
  .v6131-detail-header,
  .v613-detail-header {
    top: 8px !important;
    width: min(300px, calc(100vw - 90px)) !important;
  }

  .v614-detail-cn,
  .v6131-detail-title,
  .v613-detail-title {
    font-size: clamp(46px, 12vw, 64px) !important;
  }

  .v614-detail-rule,
  .v6131-detail-line,
  .v613-detail-line {
    width: min(225px, 65vw) !important;
  }

  .v614-detail-en,
  .v6131-detail-pinyin,
  .v613-detail-pinyin {
    font-size: clamp(20px, 5vw, 27px) !important;
  }
}

/* ===== FINAL DETAIL HEADER POSITION FIX END ===== */

/* ===== SOURCE MOBILE VIEWER FINAL FIX START ===== */

/* Remove the duplicate title that previously appeared in the old viewer layer. */
.viewer-yuwen-header{
  display:none !important;
}

/* One source-level title for the real detail viewer. */
#viewer{
  background:#fff !important;
}

#viewer .source-yuwen-header{
  display:none !important;
  position:absolute !important;
  top:clamp(10px,1.8vh,22px) !important;
  left:50% !important;
  z-index:10030 !important;
  width:min(360px,70vw) !important;
  transform:translateX(-50%) !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  color:#111 !important;
  text-align:center !important;
  pointer-events:none !important;
  user-select:none !important;
}

#viewer.open .source-yuwen-header{
  display:flex !important;
}

#viewer .source-yuwen-cn{
  margin:2px 0 0 !important;
  font-family:"Ma Shan Zheng","STKaiti","KaiTi","FangSong",serif !important;
  font-size:clamp(38px,5.3vw,68px) !important;
  font-weight:400 !important;
  line-height:.92 !important;
  letter-spacing:.08em !important;
  color:#090909 !important;
  white-space:nowrap !important;
}

#viewer .source-yuwen-en{
  margin:6px 0 5px !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(9px,1vw,12px) !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.48em !important;
  text-indent:.48em !important;
  color:rgba(17,17,17,.72) !important;
  white-space:nowrap !important;
}

#viewer .source-yuwen-rule{
  display:block !important;
  width:min(220px,48vw) !important;
  height:1px !important;
  min-height:1px !important;
  border:0 !important;
  background:rgba(17,17,17,.62) !important;
}

#viewer .source-yuwen-rule-top{margin-bottom:7px !important}
#viewer .source-yuwen-rule-bottom{margin-top:1px !important}

/* Desktop: move the actual wrapper, not a guessed image/card selector. */
@media(min-width:901px){
  #viewer.open .viewer-image-wrap{
    top:56% !important;
    transform:
      translate3d(
        calc(-50% + var(--viewer-pan-x)),
        calc(-50% + var(--viewer-pan-y)),
        0
      )
      scale(var(--viewer-zoom)) !important;
    transform-origin:center !important;
  }
}

/*
  Mobile uses the original viewer elements directly:
  title -> complete natural-ratio image -> information card.
  No cloned overlay, MutationObserver, duplicate image, fixed-height crop,
  or mysterious layer remains.
*/
@media(max-width:900px){
  body.viewer-open{
    overflow:hidden !important;
  }

  body.viewer-open .mobile-dock{
    display:none !important;
  }

  #viewer{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    background:#fff !important;
  }

  #viewer.open{
    display:block !important;
  }

  #viewer .viewer-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:0 !important;
    background:#fff !important;
    backdrop-filter:none !important;
  }

  #viewer .viewer-backdrop::before,
  #viewer .viewer-backdrop::after,
  #viewer .viewer-stage::before,
  #viewer .viewer-stage::after,
  #viewer .viewer-image-wrap::before,
  #viewer .viewer-image-wrap::after{
    display:none !important;
    content:none !important;
  }

  #viewer .source-yuwen-header{
    top:10px !important;
    width:min(300px,78vw) !important;
  }

  #viewer .source-yuwen-cn{
    font-size:clamp(42px,12vw,58px) !important;
  }

  #viewer .source-yuwen-en{
    font-size:9px !important;
    letter-spacing:.38em !important;
    text-indent:.38em !important;
  }

  #viewer .source-yuwen-rule{
    width:min(210px,58vw) !important;
  }

  #viewer .viewer-stage{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:
      calc(142px + env(safe-area-inset-top))
      12px
      calc(28px + env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
    perspective:none !important;
    isolation:auto !important;
  }

  #viewer .viewer-horizon,
  #viewer .viewer-neighbor,
  #viewer .viewer-zoom-hint{
    display:none !important;
  }

  #viewer .viewer-image-wrap{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:760px !important;
    max-height:none !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    cursor:default !important;
    filter:none !important;
    transform:none !important;
    translate:0 0 !important;
    transition:none !important;
  }

  #viewer .viewer-image-wrap img{
    position:relative !important;
    inset:auto !important;
    z-index:2 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:18px !important;
    object-fit:contain !important;
    object-position:center top !important;
    aspect-ratio:auto !important;
    transform:none !important;
    translate:0 0 !important;
    clip:auto !important;
    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    background:#fff !important;
    box-shadow:0 14px 38px rgba(35,44,58,.10) !important;
  }

  #viewer .viewer-loader{
    z-index:3 !important;
  }

  #viewer .viewer-info{
    position:relative !important;
    inset:auto !important;
    z-index:3 !important;
    flex:0 0 auto !important;
    align-self:auto !important;
    width:100% !important;
    max-width:760px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:20px auto 0 !important;
    padding:22px 18px 24px !important;
    overflow:visible !important;
    border:1px solid rgba(144,112,60,.10) !important;
    border-radius:24px !important;
    color:#594c34 !important;
    background:rgba(255,253,248,.98) !important;
    box-shadow:0 8px 24px rgba(85,67,40,.06) !important;
    backdrop-filter:none !important;
    transform:none !important;
    translate:0 0 !important;
  }

  #viewer .viewer-count,
  #viewer .viewer-eyebrow{
    margin:0 !important;
    color:#9a8050 !important;
    font-size:10px !important;
  }

  #viewer .viewer-info h3{
    margin:10px 0 8px !important;
    color:#4f422d !important;
    font-size:clamp(30px,9vw,42px) !important;
    line-height:1.08 !important;
  }

  #viewer .viewer-info>p:last-of-type{
    display:block !important;
    margin:0 !important;
    overflow:visible !important;
    color:#75674e !important;
    font-size:14px !important;
    line-height:1.65 !important;
    -webkit-line-clamp:unset !important;
  }

  #viewer .viewer-controls{
    position:static !important;
    display:flex !important;
    gap:10px !important;
    margin-top:16px !important;
    padding:0 !important;
    background:transparent !important;
  }

  #viewer .viewer-controls button{
    min-width:0 !important;
    height:48px !important;
    color:#665538 !important;
    border:1px solid rgba(151,117,48,.14) !important;
    border-radius:999px !important;
    background:#f7f1e5 !important;
    box-shadow:none !important;
  }

  #viewer .viewer-close{
    position:fixed !important;
    top:calc(12px + env(safe-area-inset-top)) !important;
    right:12px !important;
    z-index:10040 !important;
    width:44px !important;
    height:44px !important;
    color:#735f3b !important;
    background:rgba(255,253,247,.96) !important;
    border:1px solid rgba(159,121,46,.13) !important;
    box-shadow:0 7px 20px rgba(103,79,34,.08) !important;
  }
}

/* ===== SOURCE MOBILE VIEWER FINAL FIX END ===== */