/* VibeJam/26 · Relief —— 石膏浮雕 × 钴蓝 × Sprint/26 编号 Tab
   色值取自参考视频实测：石膏底 #DFDCD6（223,220,214）· 钴蓝 #0F56BA（15,86,186） */
:root {
  --plaster: #DFDCD6;      /* 墙面 */
  --plaster-hi: #E7E5E1;   /* 卡片纸面 */
  --plaster-lo: #D3CFC8;   /* 按下 / 阴影面 */
  --line: #C9C5BD;         /* 1px 分格线 */
  --cobalt: #0F56BA;       /* 主色：文字 / 柱子 / 按钮 */
  --cobalt-deep: #0A3F8C;
  --volt: #1E2BFF;         /* Sprint/26 电光蓝，只用于演示窗渐变 */
  --demo: #3BE07A;         /* 演示光标绿 */
  --ink: #23262B;
  --f-disp: "Cinzel", "Noto Serif SC", serif;
  --f-serif: "Noto Serif SC", "Cinzel", serif;
  --f-body: "Tenor Sans", "Noto Sans SC", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --bar: 48px;
  --dock: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--plaster); color: var(--cobalt);
  font: 15px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 99; background: var(--cobalt); color: #fff; padding: 8px 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
::selection { background: var(--cobalt); color: var(--plaster); }

/* 滚动条：细钴蓝滑块 + 石膏轨道（仅内部滚动区出现） */
* { scrollbar-width: thin; scrollbar-color: var(--cobalt) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cobalt); border-radius: 6px; border: 1px solid var(--plaster); }

/* ---------------------------------------------------------------- L1 顶栏 */
.bar {
  position: fixed; inset: 0 0 auto; height: var(--bar); z-index: 20;
  display: flex; align-items: stretch; background: var(--plaster);
  border-bottom: 1px solid var(--line); font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
}
.brand { display: flex; align-items: center; gap: 1px; padding: 0 18px; text-decoration: none; border-right: 1px solid var(--line); font: 800 15px/1 var(--f-disp); letter-spacing: .04em; }
.brand i { font-style: normal; font-family: var(--f-mono); font-weight: 400; font-size: 12px; opacity: .7; }
.tabs { position: relative; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabs a {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; border-right: 1px solid var(--line); white-space: nowrap; transition: color .35s var(--ease);
}
.tabs a span { opacity: .55; }
.tabs a:hover { background: var(--plaster-hi); }
.tabs a[aria-current="page"] { color: #fff; background: none; }
.tabs a[aria-current="page"] span { opacity: .75; }
/* 激活滑块：left/width 由 JS 写入，形变过渡 = Sprint/26 Tab 填充 */
.tabs-ink { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--cobalt); transition: left .5s var(--ease), width .5s var(--ease); }
.bar-faq { display: none; }
.bar-cta { display: flex; align-items: center; padding: 0 18px; background: var(--ink); color: var(--plaster); text-decoration: none; position: relative; overflow: hidden; }
.bar-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-100%); transition: transform .7s var(--ease); }
.bar-cta:hover::after { transform: translateX(100%); }

/* ---------------------------------------------------------------- 视图舞台：100svh 固定，1px 线分格 */
.views { position: fixed; inset: var(--bar) 0 var(--dock); outline: none; }
.view { position: absolute; inset: 0; display: grid; gap: 1px; background: var(--line); overflow: hidden; }
.view[hidden] { display: none; }
.cell { position: relative; background: var(--plaster); min-width: 0; min-height: 0; overflow: hidden; }
/* 进场：石膏「浇注」——自下而上 clip-path 揭开 + 轻微上浮，按 --i 错峰 */
.view.is-in .cell { animation: cast .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cast { from { clip-path: inset(100% 0 0 0); transform: translateY(18px); } to { clip-path: inset(0); transform: none; } }
.view.is-out { animation: fadeout .22s ease both; }
@keyframes fadeout { to { opacity: 0; } }

/* 通用排版 */
.eyebrow { margin: 0 0 8px; font: 600 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
h2 { margin: 0 0 12px; font: 900 clamp(24px, 2.4vw, 34px)/1.22 var(--f-serif); letter-spacing: .01em; }
.lede { margin: 0; max-width: 60ch; color: var(--ink); opacity: .82; font-size: 14px; }
.list-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font: 600 15px/1.2 var(--f-disp); letter-spacing: .06em; }
.list-h small { font: 500 12px var(--f-body); opacity: .7; letter-spacing: 0; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--cobalt); border-radius: 999px; background: var(--cobalt); color: #fff; text-decoration: none; font: 500 14px/1 var(--f-body);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
/* 悬停：镀铬高光扫过 + 轻微抬起；按下：压进石膏 */
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--cobalt); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.btn-ghost { background: transparent; color: var(--cobalt); }
.btn-big { min-height: 52px; font-size: 16px; padding: 0 28px; }

/* 浮雕容器：石膏 img + 镀铬 canvas 叠层（canvas 由 reveal.js 插入） */
.relief { position: absolute; inset: 0; margin: 0; touch-action: pan-y; }
.relief > img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.relief > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.relief-round > img { object-fit: contain; }
.relief-round > img, .relief-round > canvas { clip-path: circle(closest-side at 50% 50%); }
.hint { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; font: 600 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); background: rgba(231,229,225,.85); padding: 7px 10px; border-radius: 99px; transition: opacity .5s; pointer-events: none; }
.hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); animation: pulse 1.6s ease-in-out infinite; }
.hint-touch { display: none; }
.touch .hint-fine { display: none; } .touch .hint-touch { display: inline; }
.relief.touched .hint { opacity: 0; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .4; } }

/* ---------------------------------------------------------------- 00 首页 */
.v-home { grid-template: "mark mark mark" 33% "facts frieze studio" 1fr / minmax(260px, 24%) 1fr minmax(300px, 27%); }
.c-mark { grid-area: mark; display: flex; flex-direction: column; justify-content: flex-end; }
.mark { position: absolute; inset: 8px 10px 40px; margin: 0; }
.mark-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mark-svg text { font: 800 250px/1 var(--f-disp); fill: var(--cobalt); }
.mark-sub { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 0 18px 9px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink); }
.mark-sub b { color: var(--cobalt); }
.mark-sub em, .mark-sub i { font-style: normal; }
.mark-sub span { color: var(--cobalt); opacity: .8; }

/* 悬挂风筝（L3 交互层）：pivot 在顶端，JS 写 --rot */
.kite { position: absolute; left: 50%; top: 0; width: min(19%, 34vh); aspect-ratio: 1 / 1.2; transform: translateX(-50%); z-index: 3; touch-action: none; cursor: grab; outline-offset: -8px; }
.kite:active { cursor: grabbing; }
.kite-string { position: absolute; left: 50%; top: 0; width: 1px; height: 12%; background: var(--cobalt); opacity: .5; }
.kite-body { position: absolute; inset: 8% 0 0; transform-origin: 50% -8%; transform: rotate(var(--rot, 0deg)); will-change: transform; }
.kite-body img { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(60,50,40,.18)); pointer-events: none; user-select: none; }
.kite-txt { position: absolute; left: 0; right: 0; top: 35%; margin: 0; text-align: center; font: 800 clamp(11px, 1.15vw, 17px)/1.15 var(--f-disp); color: var(--cobalt); pointer-events: none; }
.kite-txt small { font: 600 .62em var(--f-mono); letter-spacing: .1em; }

.c-facts { grid-area: facts; padding: 18px; }
.c-frieze { grid-area: frieze; }
.facts { height: 100%; display: flex; flex-direction: column; background: var(--plaster-hi); border: 1px solid #fff; outline: 1px solid var(--line); outline-offset: -12px; padding: 22px 24px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.facts h2 { text-align: center; font: 600 16px/1.2 var(--f-disp); letter-spacing: .08em; margin: 0 0 auto; }
.facts h2 small { display: block; font: 500 11px var(--f-body); letter-spacing: .2em; opacity: .7; margin-top: 4px; }
.facts dl { margin: 12px 0 0; display: grid; gap: 9px; font-size: 13px; line-height: 1.35; }
.facts dl div { display: flex; justify-content: space-between; gap: 12px; }
.facts dt { font-family: var(--f-disp); font-weight: 600; }
.facts dd { margin: 0; text-align: right; }
.facts dd b { font-weight: 400; font-variant-numeric: tabular-nums; }
.facts-cta { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* AI 生成演示窗（Sprint/26 Chat 卡语言） */
.c-studio { grid-area: studio; padding: 18px; }
.studio { position: relative; height: 100%; display: flex; flex-direction: column; background: #F3F2EF; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 #fff inset, 0 18px 40px -26px rgba(15,86,186,.55); }
.studio-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cobalt); color: #fff; font: 600 12px/1 var(--f-mono); letter-spacing: .04em; }
.dot3 { display: flex; gap: 4px; } .dot3 i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); }
.studio-model { margin-left: auto; margin-right: 32px; font-style: normal; padding: 4px 8px; border-radius: 99px; background: rgba(255,255,255,.16); transition: background .3s; }
.studio-log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; }
.bub { margin: 0; max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.bub.on { opacity: 1; transform: none; }
.bub-me { align-self: flex-end; background: #E2E1DD; color: var(--ink); font-family: var(--f-mono); font-size: 11px; }
.bub-ai { display: flex; align-items: center; gap: 10px; background: transparent; padding: 0 2px; font: 600 11px var(--f-mono); }
.studio-bar { flex: 1; height: 3px; background: var(--plaster-lo); border-radius: 3px; overflow: hidden; }
.studio-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--cobalt); }
.studio-out { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity .4s; }
.studio-out.on { opacity: 1; }
.studio-img { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--plaster-lo); }
.studio-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 石膏草稿 → 彩色成品：圆形扩散遮罩（--r 由 JS 推进） */
.studio-img .s-col { clip-path: circle(var(--r, 0%) at var(--cx, 50%) var(--cy, 50%)); }
.studio-out figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.studio-out figcaption b { font-weight: 400; color: var(--ink); }
.studio-by { font: 600 10px var(--f-mono); opacity: .8; }
.studio-in { display: flex; align-items: center; gap: 2px; margin: 0 12px 12px; padding: 0 6px 0 12px; min-height: 42px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); font: 11px var(--f-mono); color: var(--ink); overflow: hidden; }
.studio-typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 46px); }
.studio-typed:empty::before { content: "描述你的想法…"; opacity: .4; }
.caret { width: 1px; height: 14px; background: var(--cobalt); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.studio-send { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 15px; transition: transform .15s; }
.studio-send.press { transform: scale(.86); }
.studio-ctl { position: absolute; right: 10px; top: 7px; z-index: 3; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font: 700 10px var(--f-mono); }
/* 演示光标：绿点 + 点击涟漪（Sprint/26 同款） */
.demo-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--demo); box-shadow: 0 0 0 4px rgba(59,224,122,.25), 0 4px 14px rgba(59,224,122,.6); pointer-events: none; opacity: 0; transform: translate(var(--x, 50%), var(--y, 50%)); transition: transform .7s var(--ease-io), opacity .3s; }
.demo-cursor.on { opacity: .92; }
.demo-cursor.tap::before, .demo-cursor.tap::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--demo); border-radius: 50%; animation: ripple .7s var(--ease) forwards; }
.demo-cursor.tap::after { animation-delay: .12s; }
@keyframes ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* ---------------------------------------------------------------- 01 作品馆 · 石膏回廊（CSS 3D；位姿由 js/gallery.js 每帧写入） */
.v-works { grid-template: "top top" auto "gal card" minmax(0, 1fr) "plan plan" auto / minmax(0, 1fr) clamp(340px, 29vw, 440px); }
.c-wtop { grid-area: top; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 14px 22px 12px; overflow: visible; z-index: 5; }
.view.is-in .c-wtop { animation-name: castsoft; }   /* 不用 clip-path，避免裁掉创作者弹出列表 */
@keyframes castsoft { from { opacity: 0; transform: translateY(-10px); } }
.c-wtop h2 { margin: 0; font-size: clamp(20px, 1.9vw, 28px); }
.gal-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--plaster-hi); font: 500 13px var(--f-body); color: var(--cobalt); transition: background .2s, color .2s, border-color .2s; }
.chip small { font-family: var(--f-mono); font-size: 10px; opacity: .65; margin-left: 4px; }
.chip:hover { border-color: var(--cobalt); }
.chip[aria-selected="true"] { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.gal-who { position: relative; flex: none; }
.gal-who-btn { display: inline-flex; align-items: center; gap: 6px; border-color: var(--cobalt); }
.gal-who-btn svg { font-size: 15px; }
.gal-who-btn[aria-expanded="true"] { background: var(--cobalt); color: #fff; }
.gal-who-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; margin: 0; padding: 6px; list-style: none; background: var(--plaster-hi); border: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(35,38,43,.5); animation: fadein .25s both; }
.gal-who-list button { all: unset; box-sizing: border-box; width: 100%; min-height: 42px; padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.gal-who-list button:hover, .gal-who-list button:focus-visible { background: var(--cobalt); color: #fff; }
.gal-who-list b { font: 600 14px var(--f-serif); }
.gal-who-list span { font: 11px var(--f-mono); opacity: .75; }

.c-gal { grid-area: gal; }
.gal-stage { position: absolute; inset: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none;
  background: radial-gradient(circle at 50% 50%, #F4F2EE 0, #E2DFD9 9%, #D6D2CA 30%); }
.gal-stage.dragging { cursor: grabbing; }
/* 开场：整条回廊先暗，灯亮后褪去 */
.gal-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(46,40,33,.2), rgba(46,40,33,.55)); transition: opacity 1.5s ease .25s; }
.gal-stage.lit::after { opacity: 0; }
.gal-space { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.gal-world { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.gs, .gw, .gz, .gend, .gfog { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* 墙面：石膏 + 1px 浅灰分格 + 踢脚线 */
.gs-l, .gs-r { background-color: #D8D4CD;
  background-image: linear-gradient(to top, rgba(120,110,98,.16) 0 13%, rgba(255,255,255,.5) 13% calc(13% + 1px), transparent 0), linear-gradient(90deg, rgba(150,142,130,.42) 1px, transparent 1px), linear-gradient(rgba(150,142,130,.32) 1px, transparent 1px);
  background-size: 100% 100%, calc(var(--S) * .5) 100%, 100% calc(var(--S) * .5); }
.gs-r { background-color: #E1DED8; }
.gs-f { background: #C6C0B7 linear-gradient(90deg, rgba(140,132,120,.4) 1px, transparent 1px) 0 0 / 12.5% 100%, #CBC6BE; box-shadow: inset 0 1px 0 rgba(140,132,120,.35); }
.gs-c { background: linear-gradient(90deg, transparent 47%, rgba(255,255,255,.95) 47% 53%, transparent 53%), linear-gradient(90deg, rgba(160,152,140,.3) 1px, transparent 1px) 0 0 / 25% 100%, #E9E7E3; }
.gfog { background: rgba(223,220,214,.42); pointer-events: none; }
/* 展区门楣：钴蓝横额挂在回廊顶部 */
.gz { height: 46px; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--cobalt); color: #fff; box-shadow: 0 10px 20px -12px rgba(10,40,90,.6); }
.gz b { font: 700 20px/1 var(--f-disp); letter-spacing: .08em; }
.gz span { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; opacity: .85; }
.gend { display: grid; place-content: center; justify-items: center; gap: 6px; background: var(--plaster-hi); text-align: center; outline: 1px solid var(--line); outline-offset: -26px; }
.gend p { margin: 0; font: 600 13px var(--f-mono); letter-spacing: .2em; opacity: .7; }
.gend b { font: 800 46px/1 var(--f-disp); letter-spacing: .06em; }
.gend span { font: 12px var(--f-mono); opacity: .7; }

/* 作品：石膏浮雕挂墙；.on = 开灯并压出，.focus = 被请下墙正对观众，.rev = 彩色圆形揭示 */
.gw { width: var(--S); height: var(--S); padding: 0; border: 0; background: none; color: inherit; }
.gw-frame { position: absolute; inset: 0; display: block; background: var(--plaster-lo); transform: scale(.93); transition: transform .9s var(--ease) var(--d, 0ms), box-shadow .9s var(--ease) var(--d, 0ms), opacity .45s; }
.gw-frame::after { content: ""; position: absolute; inset: 0; background: rgba(58,50,42,.34); transition: opacity .9s ease var(--d, 0ms); pointer-events: none; }
.gw-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gw-co { clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .45s var(--ease-io); }
.gw.on .gw-frame { transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 18px 26px -14px rgba(52,44,36,.6), 0 3px 6px -2px rgba(52,44,36,.3); }
.gw.on .gw-frame::after { opacity: 0; }
.gw.rev .gw-co { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 1.5s var(--ease); }
.gw-lamp { position: absolute; left: -32%; right: -32%; top: -24%; height: 110%; pointer-events: none; opacity: 0; transition: opacity .7s ease var(--d, 0ms);
  background: radial-gradient(ellipse 50% 62% at 50% 0%, rgba(255,253,244,.9), rgba(255,251,238,.38) 46%, transparent 72%); }
.gw-lamp::before { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 6px; border-radius: 0 0 4px 4px; background: var(--cobalt); }
.gw.on .gw-lamp { opacity: .55; }
.gw.focus .gw-lamp { opacity: 1; }
.gw.focus .gw-lamp::before { opacity: 0; }
.gw-tag { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); display: flex; gap: 6px; padding: 4px 9px; white-space: nowrap; background: var(--cobalt); color: #fff; font: 500 10px/1.2 var(--f-mono); transition: box-shadow .4s, opacity .45s; }
.gw-tag b { font-weight: 700; }
/* 创作者巡游：TA 的铭牌亮起 */
.gw.hl .gw-tag { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 22px 4px rgba(15,86,186,.75); animation: tagglow 1.6s ease-in-out infinite; }
.gw.hl .gw-frame { outline: 2px solid var(--cobalt); outline-offset: 4px; }
@keyframes tagglow { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 8px 1px rgba(15,86,186,.4); } }
/* 筛选：沉回墙里 */
.gw.sunk .gw-frame { transform: scale(.8); box-shadow: none; opacity: 0; transition-delay: 0ms; }
.gw.sunk .gw-tag, .gw.sunk .gw-lamp { opacity: 0; transition-delay: 0ms; }
.gw.gone { display: none; }
.gw:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 6px; }
@media (hover: hover) { .gw:not(.focus):hover .gw-frame { box-shadow: inset 0 0 0 1px #fff, 0 24px 30px -12px rgba(52,44,36,.7); } }

.gal-hint { position: absolute; left: 14px; top: 12px; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 99px; background: rgba(231,229,225,.88); font: 600 10px/1 var(--f-mono); letter-spacing: .08em; pointer-events: none; }
.gal-hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); animation: pulse 1.6s ease-in-out infinite; }
.gal-nav { position: absolute; bottom: 14px; left: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(231,229,225,.92); display: grid; place-items: center; font-size: 18px; transition: background .2s, color .2s; }
.gal-nav + .gal-nav { left: auto; right: 14px; }
.gal-nav:hover { background: var(--cobalt); color: #fff; }
.gal-tour { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 99px; background: var(--ink); color: var(--plaster); white-space: nowrap; animation: fadein .3s both; }
.gal-tour[hidden] { display: none; }
.gt-txt { margin: 0; display: flex; align-items: center; gap: 6px; font: 12px var(--f-mono); }
.gt-txt i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.gal-tour.paused .gt-txt i { animation: none; opacity: .5; }
.gt-txt b { color: #fff; }
.gt-pause, .gt-end { min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--plaster); color: var(--cobalt); font: 600 11px var(--f-mono); }
.gt-end { width: 36px; padding: 0; display: grid; place-items: center; font-size: 15px; background: transparent; color: var(--plaster); }

/* 展签：钴蓝衬线大标题 + 创作者的创意 */
.c-gcard { grid-area: card; padding: 20px 24px 18px; overflow: auto; }
.gcard { min-height: 100%; display: flex; flex-direction: column; gap: 9px; }
.gc-eye { margin: 0; }
.gc-t { margin: 0; font: 800 clamp(26px, 2.5vw, 40px)/1.06 var(--f-disp); letter-spacing: .01em; overflow-wrap: anywhere; }
.gc-by { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.gc-by b { font: 700 17px var(--f-serif); }
.gc-by span { font: 11px var(--f-mono); opacity: .75; }
.gc-k { margin: 4px 0 -4px; padding-top: 10px; border-top: 1px solid var(--line); font: 600 10px var(--f-mono); letter-spacing: .12em; opacity: .7; }
.gc-desc { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.gc-prompt { flex: 1 1 auto; min-height: 9em; display: flex; flex-direction: column; border: 1px solid var(--line); background: #F3F2EF; }   /* 高屏：prompt 框撑满剩余高度 */
.gc-prompt header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 4px 12px; border-bottom: 1px solid var(--line); font: 600 10px var(--f-mono); letter-spacing: .08em; }
.gc-copy { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--cobalt); color: #fff; font: 600 11px var(--f-mono); }
.gc-prompt code { display: block; flex: 1 1 0; min-height: 0; overflow: auto; padding: 10px 12px; font: 12px/1.6 var(--f-mono); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.gc-prompt .caret { display: inline-block; vertical-align: -2px; margin-left: 1px; }
.gcard.typed .caret { display: none; }
.gc-stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; }
.gc-stats div { min-width: 0; }
.gc-stats dt { font: 600 10px var(--f-mono); letter-spacing: .08em; opacity: .65; }
.gc-stats dd { margin: 0; font: 600 13px var(--f-body); white-space: nowrap; }
.gc-more { flex: none; }
.gc-more[hidden] { display: none; }
.gc-more ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gc-more button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.gc-more img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; box-shadow: inset 0 0 0 1px #fff, 0 6px 10px -6px rgba(52,44,36,.5); transition: transform .3s var(--ease); }
.gc-more span { display: block; margin-top: 3px; font: 10px/1.2 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-more button:hover img { transform: translateY(-3px); }
.gc-more button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.gc-act { margin-top: auto; display: flex; gap: 8px; padding-top: 4px; }
.gc-act .btn { flex: 1; padding: 0 12px; white-space: nowrap; }
.gcard.swap > * { animation: gcin .6s var(--ease) both; }
.gcard.swap > :nth-child(2) { animation-delay: 40ms; } .gcard.swap > :nth-child(3) { animation-delay: 80ms; }
.gcard.swap > :nth-child(n+4) { animation-delay: 120ms; }
@keyframes gcin { from { opacity: 0; transform: translateY(10px); } }

/* 展厅平面图：5 个展区 × 作品点，钴蓝指示块滑动 */
.c-plan { grid-area: plan; display: flex; align-items: center; gap: 18px; padding: 8px 22px 10px; }
.fp-hd { margin: 0; display: flex; flex-direction: column; flex: none; line-height: 1.3; }
.fp-hd b { font: 700 13px var(--f-serif); }
.fp-hd span { font: 10px var(--f-mono); letter-spacing: .12em; opacity: .7; }
.fp-rail { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fp-zone { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fp-zl { all: unset; box-sizing: border-box; cursor: pointer; font: 10px/1.2 var(--f-mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.fp-zl:hover, .fp-zl:focus-visible { opacity: 1; text-decoration: underline; }
.fp-zl b { font-family: var(--f-disp); }
.fp-dots { display: flex; gap: 3px; }
.fp-dot { flex: 1; min-width: 0; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--plaster-hi); transition: border-color .2s, opacity .4s; }
.fp-dot:hover { border-color: var(--cobalt); }
.fp-dot.off { opacity: .3; }
.fp-ink { position: absolute; left: 0; bottom: 0; height: 20px; width: 0; border-radius: 2px; background: var(--cobalt); pointer-events: none; box-shadow: 0 4px 10px -4px var(--cobalt); }
.fp-count { margin: 0; flex: none; min-width: 66px; text-align: right; font: 600 13px var(--f-mono); }

@media (min-width: 1024px) and (max-height: 820px) {
  .gc-more { display: none !important; }
  .c-gcard { padding-top: 16px; }
  .gc-t { font-size: clamp(24px, 2.2vw, 32px); }
}

/* ---------------------------------------------------------------- 02 每周 JAM */
.v-jam { grid-template: "col bring medal" 1fr "col feast feast" 36% / minmax(280px, 29%) 1fr minmax(280px, 29%); }
.c-col { grid-area: col; display: flex; justify-content: center; padding: 18px 26px 0; }
.column { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; color: #fff; filter: drop-shadow(0 18px 20px rgba(10,63,140,.25)); }
.col-cap { display: block; width: 100%; height: auto; background: var(--cobalt); border-radius: 30px 30px 0 0; }
.col-shaft {
  flex: 1; margin: 0 7%; padding: 10px 22px 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--cobalt) repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.1) 18px 19px, transparent 19px 30px, rgba(0,0,0,.08) 30px 31px, transparent 31px 44px);
}
.col-shaft .eyebrow { opacity: .85; }
.col-shaft h2 { margin: 0; font-size: clamp(34px, 3.6vw, 52px); }
.col-shaft p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.col-pool { display: flex; align-items: baseline; gap: 10px; margin-top: auto !important; }
.col-pool b { font: 800 34px/1 var(--f-disp); }
.cd { display: flex; gap: 6px; }
.cd span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; }
.cd b { font: 600 20px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cd i { font: 10px var(--f-body); font-style: normal; opacity: .8; }
.col-base { margin: 0 -2px; background: var(--cobalt); border-radius: 10px 10px 0 0; padding: 14px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.col-base a { font: 600 11px var(--f-mono); letter-spacing: .1em; text-decoration: none; }
.c-bring { grid-area: bring; padding: 20px 24px; overflow: auto; }
.roman { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 3px; }
.roman li, .board li { display: flex; align-items: center; gap: 12px; min-height: 26px; padding: 3px 10px; background: linear-gradient(var(--plaster-hi), var(--plaster-hi)) 0 50% / 100% 70% no-repeat; font-size: 13px; }
.roman i { width: 34px; font: 600 12px var(--f-disp); font-style: normal; }
.roman span { margin-left: auto; text-align: right; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.board li { cursor: pointer; transition: background-size .3s; position: relative; }
.board li:hover { background-size: 100% 100%; }
.board .rk { width: 34px; font: 600 12px var(--f-disp); }
.board .bt { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .bm { font: 10px var(--f-mono); opacity: .7; }
.board .bv { width: 90px; height: 4px; background: var(--plaster-lo); border-radius: 3px; overflow: hidden; }
.board .bv i { display: block; height: 100%; width: var(--w); background: var(--cobalt); transform-origin: left; animation: grow 1s var(--ease) both; }
.board .bn { width: 34px; text-align: right; font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums; }
@keyframes grow { from { transform: scaleX(0); } }
.c-medal { grid-area: medal; display: grid; place-items: center; }
.c-medal .relief { inset: 12px; }
.medal-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 0; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 0 0 8px rgba(15,86,186,.12); transition: transform .3s var(--ease), box-shadow .3s; z-index: 2; }
.medal-play:hover { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(15,86,186,.14); }
.medal-cap { position: absolute; left: 14px; bottom: 10px; margin: 0; font: 600 9.5px var(--f-mono); letter-spacing: .08em; }
.c-feast { grid-area: feast; }

/* ---------------------------------------------------------------- 03 创意星云 */
.v-team { grid-template: "panel steps" 1fr "panel lingo" auto / minmax(260px, 27%) 1fr; }
.c-tpanel { grid-area: panel; }
.c-steps { grid-area: steps; padding: 20px 26px 14px; overflow: auto; }
.day { margin-top: 10px; }
.day header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 12px; background: var(--plaster-hi); font: 600 10.5px var(--f-mono); letter-spacing: .06em; }
.day header b { font: 600 19px var(--f-serif); letter-spacing: .04em; }
.day header span:last-child { text-align: right; }
.day dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 22px; margin: 8px 12px 0; font-size: 13.5px; }
.day dt { font: 500 13px var(--f-body); }
.day dt small { display: block; color: var(--ink); opacity: .45; font-size: 11px; }
.day dd { margin: 0; color: var(--cobalt); line-height: 1.5; }
.ideas-h { margin-top: 18px; }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.idea { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--plaster-hi); border: 1px solid #fff; outline: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.idea:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -16px rgba(35,38,43,.5); }
.idea img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; filter: grayscale(.85) contrast(.9) brightness(1.08); transition: filter .5s; }
.idea:hover img { filter: none; }
.idea div { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.idea b { display: block; font-weight: 500; color: var(--ink); }
.idea p { margin: 2px 0 4px; opacity: .8; }
.need { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--cobalt); color: #fff; font: 600 10px var(--f-mono); }
.idea-btn { flex: none; min-height: 40px; padding: 0 12px; border: 1px solid var(--cobalt); border-radius: 99px; background: none; color: var(--cobalt); font: 500 12px var(--f-body); transition: background .2s, color .2s; }
.idea-btn:hover, .idea-btn[aria-pressed="true"] { background: var(--cobalt); color: #fff; }
.c-lingo { grid-area: lingo; padding: 12px 22px 16px; }
.lingo-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font: 600 9.5px var(--f-mono); letter-spacing: .06em; }
.lingo-hd p { margin: 0; } .lingo-hd i { font-style: normal; opacity: .6; margin: 0 2px 0 8px; }
.lingo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.lingo li { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.lingo svg.sil { flex: none; width: 34px; height: 42px; fill: var(--cobalt); stroke: none; color: var(--cobalt); transition: transform .4s var(--ease); }
.lingo li:hover svg.sil, .lingo li.say svg.sil { transform: translateY(-4px) rotate(-6deg); }
.lingo .lw { min-width: 0; font-size: 11.5px; line-height: 1.35; }
.lingo .lw b { display: block; font-weight: 400; color: var(--ink); text-align: center; white-space: nowrap; }
.lingo button { all: unset; display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; min-height: 22px; }
.lingo button svg { font-size: 12px; background: var(--cobalt); color: #fff; border-radius: 50%; padding: 2px; }
.lingo button:hover, .lingo button.on { text-decoration: underline; }
.lingo button:focus-visible { outline: 2px solid var(--cobalt); }

/* ---------------------------------------------------------------- 04 商单托管 */
.v-deals { grid-template: "head flow" 1fr / minmax(300px, 31%) 1fr; }
.c-dhead { grid-area: head; padding: 26px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.c-dhead h2 { font-size: clamp(30px, 3.2vw, 46px); }
.kpis { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kpis li { background: var(--plaster-hi); padding: 12px; }
.kpis b { display: block; font: 600 clamp(16px, 1.5vw, 22px)/1.1 var(--f-mono); }
.kpis span { font-size: 11.5px; color: var(--ink); opacity: .7; }
blockquote { margin: auto 0 0; padding: 14px 16px; border-left: 3px solid var(--cobalt); background: var(--plaster-hi); font-size: 13.5px; color: var(--ink); }
cite { display: block; margin-top: 6px; font: normal 600 11px var(--f-mono); color: var(--cobalt); }
.c-flow { grid-area: flow; background: #15161A; display: flex; flex-direction: column; padding: 26px 26px 14px; }
.flow { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: center; }
/* 窗口卡：Sprint/26 结账窗语言（灰标题栏 + 电光蓝底部渐变） */
.win { position: relative; display: flex; flex-direction: column; background: #24262B; border: 1px solid #3A3D44; color: #E9E9EC; min-height: 0; height: min(100%, 500px); transform: translateY(var(--ty, 18px)); opacity: .38; transition: opacity .5s var(--ease), transform .6s var(--ease), border-color .4s; }
.win.on { opacity: 1; --ty: 0px; border-color: #5b6070; }
.win.done { opacity: .78; --ty: 0px; }
.win header { display: flex; justify-content: space-between; padding: 8px 10px; background: #3A3D44; font: 600 10px var(--f-mono); letter-spacing: .06em; color: #C8CAD0; }
.win header i { font-style: normal; opacity: .6; }
.win-bd { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px; background: linear-gradient(180deg, transparent 45%, rgba(30,43,255,.55) 100%); }
.win-bd img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.win-bd p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.win-bd p span { font: 10.5px var(--f-mono); opacity: .7; }
.win-bd em { font: normal 700 26px/1.1 var(--f-mono); }
.ring { width: 64%; height: auto; aspect-ratio: 1; margin: auto; }
.ring circle { stroke: #3A3D44; stroke-width: 3; }
.ring path { stroke: var(--demo); stroke-width: 5; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .7s var(--ease) .15s; }
.win.on .ring path, .win.done .ring path { stroke-dashoffset: 0; }
.upload { justify-content: center; }
.up-bar { display: block; height: 6px; background: #3A3D44; border-radius: 6px; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--demo); }
.upload ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 10px; font: 11px var(--f-mono); opacity: .8; }
.payout { justify-content: center; }
.clock { font: 600 clamp(24px, 2.4vw, 34px)/1 var(--f-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.paid { transition: color .3s; }
.win.paid-on .paid { color: var(--demo); }
.win-btn { min-height: 44px; margin: 0 12px 12px; border: 0; background: var(--cobalt); color: #fff; font: 600 11px var(--f-mono); letter-spacing: .08em; transition: background .2s, transform .15s; }
.win-btn:hover { background: var(--volt); }
.win-btn.press { transform: scale(.95); }
.flow-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 0; color: #C8CAD0; font: 11px var(--f-mono); letter-spacing: .04em; }
.flow-replay { min-height: 36px; padding: 0 14px; border: 1px solid #3A3D44; border-radius: 99px; background: none; color: #fff; font: 11px var(--f-mono); }
.flow-replay:hover { border-color: var(--demo); color: var(--demo); }

/* ---------------------------------------------------------------- 05 创始席位 */
.v-seats { grid-template: "seal seat price" 1fr / minmax(280px, 33%) 1fr minmax(280px, 29%); }
.c-seal { grid-area: seal; display: grid; place-items: center; }
.c-seal .relief { inset: 18px; }
.seal-no { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; font: 800 clamp(30px, 3.4vw, 50px)/1 var(--f-disp); pointer-events: none; text-shadow: 0 1px 0 #fff; }
.seal-no small { font: 600 10px var(--f-mono); letter-spacing: .2em; margin: 6px 0; }
.c-seat { grid-area: seat; padding: 26px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.seat-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.seat-meta p { margin: 0; font-size: 14px; color: var(--ink); } .seat-meta b { color: var(--cobalt); font-family: var(--f-mono); }
.c-seat .cd span { border-color: var(--line); background: var(--plaster-hi); min-width: 54px; }
.seatgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.seatgrid li { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 600 10px var(--f-mono); border: 1px solid var(--line); background: var(--plaster-hi); color: var(--cobalt); transition: transform .3s var(--ease); }
.seatgrid li.taken { background: var(--plaster-lo); color: rgba(15,86,186,.45); border-color: transparent; box-shadow: inset 0 2px 3px rgba(0,0,0,.12); }
.seatgrid li.mine { background: var(--cobalt); color: #fff; border-color: var(--cobalt); animation: mine 2s var(--ease) infinite; }
.seatgrid li:not(.taken):hover { transform: scale(1.15); }
@keyframes mine { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,86,186,.4); } 50% { box-shadow: 0 0 0 7px rgba(15,86,186,0); } }
.seat-free { margin: 0; font-size: 13px; color: var(--ink); opacity: .8; }
.c-seat .btn-big { align-self: flex-start; }
.c-price { grid-area: price; padding: 22px; overflow: auto; display: flex; flex-direction: column; }
.price-medal { position: relative; flex: 1; min-height: 160px; margin-top: 14px; }
.plans { display: grid; gap: 12px; }
.plan { border: 1px solid var(--line); background: var(--plaster-hi); padding: 12px 14px; transition: transform .35s var(--ease), box-shadow .35s; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -16px rgba(35,38,43,.5); }
.plan header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.plan header b { font: 600 14px var(--f-disp); letter-spacing: .04em; }
.plan header span { font: 600 12px var(--f-mono); }
.plan s { opacity: .55; font-weight: 400; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12.5px; color: var(--ink); }
.plan-hot { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.plan-hot ul { color: #fff; } .plan-hot header { border-color: rgba(255,255,255,.3); }

/* ---------------------------------------------------------------- 06 FAQ */
.v-faq { grid-template: "panel faqs" 1fr / minmax(260px, 30%) 1fr; }
.c-fpanel { grid-area: panel; }
.c-faqs { grid-area: faqs; padding: 26px 30px; display: flex; flex-direction: column; overflow: auto; }
.faqs { margin-top: auto; display: grid; gap: 4px; }
.faqs details { background: var(--plaster-hi); }
.faqs summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; padding: 6px 14px; cursor: pointer; font: 500 14px var(--f-body); text-transform: uppercase; letter-spacing: .02em; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faqs summary i::before, .faqs summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .35s var(--ease); }
.faqs summary i::after { transform: rotate(90deg); }
.faqs details[open] summary i::after { transform: rotate(0); }
.faqs summary:hover { background: var(--plaster-lo); }
/* 手风琴展开：::details-content 高度过渡（支持的浏览器），否则瞬时 */
.faqs details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faqs details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.faqs details p { margin: 0; padding: 4px 14px 14px; color: var(--ink); font-size: 13.5px; }
.foot { margin-top: 18px; font: 11px var(--f-mono); opacity: .7; }

/* ---------------------------------------------------------------- L2 弹层 */
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(223,220,214,.72); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; width: min(1040px, 100%); max-height: calc(100svh - 48px); display: grid; grid-template-columns: 1.05fr 1fr; background: var(--plaster-hi); box-shadow: 0 40px 80px -40px rgba(35,38,43,.55), 0 0 0 1px #fff inset; overflow: hidden; }
/* 展开：从点击点 circle() 扩散；收起反向 */
.sheet.opening .sheet-card { animation: iris .62s var(--ease) both; }
.sheet.closing .sheet-card { animation: iris .38s var(--ease-io) reverse both; }
.sheet.opening { animation: fadein .3s both; } .sheet.closing { animation: fadein .38s reverse both; }
@keyframes iris { from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }
@keyframes fadein { from { opacity: 0; } }
.x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--plaster-hi); display: grid; place-items: center; font-size: 18px; transition: transform .3s var(--ease), background .2s; }
.x:hover { transform: rotate(90deg); background: var(--cobalt); color: #fff; }
.sheet-img { position: relative; inset: auto; aspect-ratio: 1; min-height: 0; background: var(--plaster-lo); }
.sheet-bd { padding: 28px 30px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.sheet-bd h2 { margin: 0; font-family: var(--f-disp); font-weight: 800; }
.sheet-by { margin: 0; font: 600 12px var(--f-mono); }
.sheet-desc { margin: 0; color: var(--ink); font-size: 14px; }
.prompt { border: 1px solid var(--line); background: #F3F2EF; }
.prompt header { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); font: 600 10px var(--f-mono); letter-spacing: .08em; }
.copy { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--cobalt); color: #fff; font: 600 11px var(--f-mono); }
.prompt code { display: block; padding: 12px; font: 12px/1.6 var(--f-mono); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.sheet-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-stats li { padding: 6px 10px; border-radius: 99px; background: var(--plaster); font: 600 11px var(--f-mono); }
.sheet-stats li.hot { background: var(--cobalt); color: #fff; }
.sheet-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.sheet-nav button { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; background: none; font: 500 13px var(--f-body); color: var(--cobalt); }
.sheet-nav button:hover { border-color: var(--cobalt); }
.claim-card { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 30px 30px; text-align: center; }
.claim-card p { margin: 0; color: var(--ink); font-size: 14px; }
.claim-no { font: 800 64px/1 var(--f-disp) !important; color: var(--cobalt) !important; }
.toast { position: fixed; left: 50%; bottom: calc(var(--dock) + 20px); z-index: 50; margin: 0; padding: 10px 16px; border-radius: 99px; background: var(--ink); color: var(--plaster); font: 12px var(--f-mono); transform: translate(-50%, 20px); opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.dock { display: none; }

/* ---------------------------------------------------------------- 平板 761–1180：两栏，视图内部可滚 */
@media (max-width: 1180px) {
  .tabs a { font-size: 10px; letter-spacing: .02em; }
  .tabs a span { display: none; }
}
@media (max-width: 1023px) {
  .view { overflow-y: auto; align-content: start; }
  .col-shaft { flex: auto; }   /* 自适应高度下 flex:1 的 0 基准会塌缩 */
  .v-home { grid-template: "mark mark" minmax(220px, 30svh) "frieze frieze" minmax(300px, 40svh) "facts studio" minmax(460px, max-content) / 1fr 1fr; }
  .v-works { grid-template: "top" max-content "gal" clamp(340px, 56svh, 560px) "plan" max-content "card" max-content / 1fr; }
  .c-gcard { overflow: visible; }
  .gc-prompt { flex: none; min-height: 0; }
  .gc-prompt code { flex: none; max-height: 12.8em; }
  .v-jam { grid-template: "col bring" max-content "medal medal" 380px "feast feast" 300px / 1fr 1fr; }
  .c-col { padding-bottom: 0; }
  .v-team { grid-template: "panel steps" max-content "lingo lingo" max-content / 34% 1fr; }
  .lingo { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
  .ideas { grid-template-columns: 1fr; }
  .v-deals { grid-template: "head" max-content "flow" max-content / 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .win { height: 340px; }
  .v-seats { grid-template: "seal seat" max-content "price price" max-content / 40% 1fr; }
  .c-seal { min-height: 380px; }
  .v-faq { grid-template: "panel faqs" max-content / 34% 1fr; }
  .c-fpanel, .c-tpanel { min-height: 560px; }
}

/* ---------------------------------------------------------------- 手机 ≤760：底栏 + 单栏，视图 ≤ 2 屏 */
@media (max-width: 760px) {
  :root { --bar: 52px; --dock: calc(62px + env(safe-area-inset-bottom)); }
  body { font-size: 14px; }
  .tabs, .bar-cta { display: none; }
  .brand { border-right: 0; padding-left: max(16px, env(safe-area-inset-left)); }
  .bar { justify-content: space-between; }
  .bar-faq, .bar-cta { display: flex; }
  .bar-faq { align-items: center; margin-left: auto; padding: 0 14px; min-width: 52px; justify-content: center; text-decoration: none; border-left: 1px solid var(--line); }
  .bar-faq[aria-current="page"] { background: var(--cobalt); color: #fff; }
  .bar-cta { padding: 0 14px; padding-right: max(14px, env(safe-area-inset-right)); font-size: 10.5px; }
  .dock {
    position: fixed; inset: auto 0 0; z-index: 20; height: var(--dock); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(231,229,225,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; text-decoration: none; font: 500 10.5px var(--f-body); color: var(--cobalt); opacity: .62; transition: opacity .2s; }
  .dock a svg { font-size: 21px; }
  .dock a[aria-current="page"] { opacity: 1; }
  .dock a[aria-current="page"] svg { fill: var(--cobalt); fill-opacity: .18; }
  .view { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cell { overflow: visible; }
  .relief { overflow: hidden; }

  .v-home { grid-template: "mark" 190px "studio" 420px "frieze" 230px "facts" max-content / 1fr; }
  .mark { inset: 6px 8px 52px; }
  .kite { width: 27%; }
  .mark-sub { flex-direction: column; gap: 2px; padding: 0 12px 6px; font-size: 10.5px; }
  .mark-sub span { font-size: 9.5px; }
  .mark-sub .kl { display: none; }
  .c-studio, .c-facts { padding: 12px; }
  .facts { padding: 16px 18px; }
  .facts h2 { margin-bottom: 4px; }
  .facts-cta { grid-template-columns: 1fr 1fr; }

  .v-works { grid-template-rows: max-content clamp(330px, 50svh, 420px) max-content max-content; }
  .c-wtop { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px 10px; }
  .c-wtop { display: grid; grid-template: "vh who" auto "chips chips" auto / minmax(0, 1fr) auto; column-gap: 10px; }
  .c-wtop h2 { font-size: 17px; text-wrap: balance; }
  .gal-tools { display: contents; }
  .chips { grid-area: chips; margin: 0 -14px; padding: 0 14px 2px; }
  .gal-who { grid-area: who; align-self: start; }
  .chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 40px; padding: 0 12px; }
  .gal-who-btn { padding: 0 10px; }
  .gal-who-list { width: min(280px, calc(100vw - 28px)); }
  .gal-hint { left: 10px; top: 10px; }
  .gal-nav { bottom: 10px; left: 10px; } .gal-nav + .gal-nav { right: 10px; }
  .gal-tour { bottom: 10px; padding-left: 10px; }
  .gt-txt { font-size: 11px; }
  .gz { height: 34px; gap: 8px; } .gz b { font-size: 14px; } .gz span { font-size: 9px; }
  .gend b { font-size: 26px; }
  .gw-tag { font-size: 9px; padding: 3px 7px; top: calc(100% + 8px); }
  .c-plan { gap: 10px; padding: 8px 14px; }
  .fp-hd { display: none; }
  /* 手机平面图：上排 5 个展区按钮，下排只展开当前展区的格子（目标 ≥ 32×44） */
  .fp-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; align-items: stretch; }
  .fp-zone { display: contents; }
  .fp-zl { grid-row: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 2px; border: 1px solid var(--line); border-radius: 4px; background: var(--plaster-hi); font-size: 11px; letter-spacing: 0; opacity: 1; text-decoration: none !important; }
  .fp-zone.cur .fp-zl { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
  .fp-dots { grid-row: 2; grid-column: 1 / -1; display: none; gap: 4px; }
  .fp-zone.cur .fp-dots { display: flex; }
  .fp-dot { flex: 0 1 44px; min-width: 32px; }
  .fp-dot, .fp-ink { height: 44px; }
  .fp-count { display: none; }   /* 手机：序号并入展签眉题 */
  .c-gcard { padding: 16px 16px 20px; }
  .gc-t { font-size: 28px; }
  .gc-stats { grid-template-columns: 1fr 1fr; justify-content: stretch; }

  .v-jam { grid-template: "col" max-content "bring" max-content "medal" 300px "feast" 210px / 1fr; }
  .c-col { padding: 16px 16px 0; }
  .col-cap { border-radius: 22px 22px 0 0; }
  .c-bring { padding: 16px; overflow: visible; }
  .board .bv { width: 54px; }
  .board .bm { display: none; }

  .v-team { grid-template: "steps" max-content "lingo" max-content "panel" 260px / 1fr; }
  .c-tpanel { min-height: 0; }
  .c-steps { padding: 16px; overflow: visible; }
  .day dl { grid-template-columns: 74px 1fr; gap: 6px 12px; margin: 8px 4px 0; font-size: 13px; }
  .day header { grid-template-columns: auto 1fr auto; gap: 8px; }
  .day header b { font-size: 16px; text-align: center; }
  .c-lingo { padding: 12px 16px 16px; }
  .lingo-hd { flex-direction: column; align-items: flex-start; }
  .lingo { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ideas { grid-template-columns: 1fr; }

  .c-dhead { padding: 18px 16px; overflow: visible; }
  .c-flow { padding: 16px; }
  .flow { grid-template-columns: 1fr 1fr; gap: 10px; }
  .win { height: 250px; }
  .win-bd em { font-size: 20px; }
  .win-bd p { font-size: 12px; }
  .upload ul { flex-wrap: wrap; gap: 2px 8px; }
  .flow-cap { flex-direction: column; align-items: flex-start; }

  .v-seats { grid-template: "seal" 300px "seat" max-content "price" max-content / 1fr; }
  .c-seat { padding: 16px; overflow: visible; }
  .seat-meta { flex-direction: column; align-items: flex-start; }
  .c-seat .btn-big { align-self: stretch; }
  .c-price { padding: 16px; overflow: visible; }
  .price-medal { display: none; }

  .v-faq { grid-template: "faqs" max-content "panel" 300px / 1fr; }
  .c-fpanel { min-height: 0; }
  .c-faqs { padding: 18px 16px; overflow: visible; }
  .faqs { margin-top: 10px; }
  .faqs summary { font-size: 13px; }

  .sheet { padding: 0; align-items: end; }
  .sheet-card { grid-template-columns: 1fr; max-height: 92svh; overflow: auto; border-radius: 18px 18px 0 0; }
  .sheet-img { aspect-ratio: 4 / 3; }
  .sheet-bd { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow: visible; }
  .claim-card { border-radius: 18px 18px 0 0; }
}
@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  :root { --dock: 0px; }
  .dock { display: none; }
  .tabs { display: grid; } .bar-faq { display: none; }
  .tabs a { font-size: 9.5px; }
}
@media (min-width: 761px) and (max-height: 500px) {
  .view { overflow-y: auto; }
}

/* ---------------------------------------------------------------- 减少动画：去掉位移/循环，只保留即时状态 */
.rm *, .rm *::before, .rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}