/* VibeJam Fest — 70 年代 groovy 贴纸风
   粗黑描边 + 硬投影 + 倾斜贴纸 + 弹性过冲；悬停 = Figma 多人选框 + 作者光标旗 */
:root {
  --cream: #FFF6E6; --paper: #FFFDF7; --ink: #111;
  --or: #F25C05; --pk: #F06BB3; --ye: #FFC21A; --do: #FF8A00;
  --fig: #0D99FF;
  --hd: 88px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --snap: cubic-bezier(.2, 1.9, .45, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --disp: "Shrikhand", "ZCOOL KuaiLe", "PingFang SC", serif;
  --cn: "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --body: "Quicksand", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--cream); color: var(--ink); font: 500 15px/1.6 var(--body);
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
.sprite { position: absolute; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fig); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* ---------- 描边大字：黑字 + 白圈 + 黑外圈 + 硬投影（data-t 叠一层） */
.outl { position: relative; display: inline-block; color: var(--ink); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; filter: drop-shadow(.06em .08em 0 rgba(17,17,17,.28)); }
.outl::after { content: attr(data-t); position: absolute; inset: 0; color: var(--ink); -webkit-text-stroke: .11em #fff; paint-order: stroke fill; pointer-events: none; }
.outl.inv { color: #fff; }
.outl.inv::after { color: #fff; -webkit-text-stroke-color: var(--ink); }
.lat { font-family: "Shrikhand", serif; font-weight: 400; letter-spacing: .01em; }

/* 贴纸色带（像 “Flowfest is back” 那条） */
.band { display: inline-block; background: var(--do); border: 3px solid var(--ink); border-radius: 10px; padding: .02em .22em .08em; transform: rotate(-3deg); box-shadow: 5px 5px 0 var(--ink); }
.band .outl { color: #fff; -webkit-text-stroke-color: var(--ink); filter: none; }
.band .outl::after { color: #fff; -webkit-text-stroke: 0; }
.band.b-or { background: var(--or); }
.band.b-pk { background: var(--pk); transform: rotate(2.5deg); }
.pill { display: inline-block; font: 700 13px/1 var(--body); padding: 7px 12px 6px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--or); color: #fff; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); white-space: nowrap; }
.pill.pk { background: var(--pk); }
.pill.wt { background: #fff; color: var(--ink); }

/* ---------- 顶栏 */
.top { position: fixed; inset: 0 0 auto; height: var(--hd); z-index: 40; display: flex; align-items: center; justify-content: center; background: var(--cream); border-bottom: 2.5px solid var(--ink); }
.mark { text-decoration: none; font: 400 40px/1 "Shrikhand", serif; transform: rotate(-2deg); transition: transform .5s var(--pop); }
.mark:hover { transform: rotate(1deg) scale(1.04); }
.mark .outl { -webkit-text-stroke-width: .17em; }
.mark .outl::after { -webkit-text-stroke-width: .09em; }
.cd-sticker { position: absolute; left: 28px; top: 50%; display: flex; align-items: center; gap: 8px; text-decoration: none; background: var(--or); color: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 6px 14px 6px 8px; box-shadow: 4px 4px 0 var(--ink); transform: translateY(-50%) rotate(-4deg); transition: transform .45s var(--pop); }
.cd-sticker:hover { transform: translateY(-54%) rotate(-1deg); }
.cd-sun { width: 38px; height: 38px; flex: none; animation: spin 18s linear infinite; }
.cd-sticker small { display: block; font: 700 11px/1.2 var(--body); opacity: .92; }
.cd-sticker b { display: block; font: 700 17px/1.15 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 垂落彩条导航（桌面） */
.drips { position: fixed; top: 0; right: 40px; z-index: 60; display: flex; align-items: flex-start; }
.drip { position: relative; width: 50px; height: var(--len); margin-left: -2.5px; background: var(--c); border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 26px 26px; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16px; box-shadow: 3px 4px 0 rgba(17,17,17,.9); transition: height .6s var(--snap); }
.drip span { writing-mode: vertical-rl; font: 400 20px/1 var(--cn); letter-spacing: .12em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.drip span.lat { text-orientation: upright; font: 400 16px/1 "Shrikhand", serif; letter-spacing: -.12em; }
.drip:hover { animation: tug .8s var(--out); }
@keyframes tug { 0% { height: var(--len); } 30% { height: calc(var(--len) + 56px); } 55% { height: calc(var(--len) + 10px); } 75% { height: calc(var(--len) + 26px); } 100% { height: calc(var(--len) + 18px); } }
.drip:hover { height: calc(var(--len) + 18px); }
.drip[aria-current="page"] { --len: 262px !important; z-index: 2; }
.drip-sun { position: absolute; bottom: -22px; left: 50%; width: 46px; height: 46px; margin-left: -23px; opacity: 0; transform: scale(.3) rotate(-90deg); transition: opacity .3s, transform .6s var(--pop); }
.drip[aria-current="page"] .drip-sun { opacity: 1; transform: none; animation: spin 14s linear infinite .6s; }
.drip[aria-current="page"] span { margin-bottom: 26px; }
.drips-m { display: none; }

/* ---------- 签名转场：整屏彩条垂落 */
.curtain { position: fixed; inset: 0; z-index: 85; display: flex; pointer-events: none; visibility: hidden; }
.curtain.on { visibility: visible; pointer-events: auto; }
.curtain i { flex: 1; height: 112%; margin-left: -3px; background: var(--c); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 46px 46px; transform: translateY(-105%); }
.curtain-label { position: absolute; left: 50%; top: 50%; font: 400 clamp(54px, 9vw, 130px)/1 var(--cn); transform: translate(-50%, -50%) scale(.4) rotate(-6deg); opacity: 0; z-index: 2; white-space: nowrap; }
.curtain-label.lat { font-family: "Shrikhand", serif; }

/* ---------- 视图外壳 */
.view { position: fixed; inset: var(--hd) 0 0; overflow: hidden; }
.view.is-in > * { animation: viewIn .6s var(--out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }
.ttl { margin: 0; font: 400 52px/1.15 var(--cn); }
.ttl .band { font-size: .92em; }
.ttl .lat { font-size: .9em; }
.hint { font: 400 16px/1 var(--cn); color: var(--ye); background: var(--ink); padding: 9px 14px 8px; border-radius: 999px; box-shadow: 3px 3px 0 var(--or); animation: hintIn .6s var(--pop) both, bob 1.6s ease-in-out .6s infinite; }
@keyframes hintIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* ---------- Figma 多人选框 + 光标旗（所有作品贴纸共用） */
.sel { position: absolute; inset: -9px; border: 1.5px solid var(--sc, var(--fig)); border-radius: 4px; pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity .12s, transform .45s var(--snap); z-index: 3; }
.sel .hd { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--sc, var(--fig)); }
.sel .hd:nth-child(2) { left: -5px; top: -5px; } .sel .hd:nth-child(3) { right: -5px; top: -5px; }
.sel .hd:nth-child(4) { left: -5px; bottom: -5px; } .sel .hd:nth-child(5) { right: -5px; bottom: -5px; }
.sel-tag { display: inline-block; font: 700 12px/1 var(--body); color: #fff; background: var(--sc, var(--fig)); padding: 5px 8px 4px; border-radius: 4px; white-space: nowrap; }
.sel > .sel-tag { position: absolute; left: -1.5px; bottom: calc(100% + 6px); transform: translateY(6px); opacity: 0; transition: transform .35s var(--pop) .06s, opacity .2s .06s; }
.flag { position: absolute; left: calc(100% + 8px); top: calc(100% + 6px); z-index: 6; pointer-events: none; display: flex; align-items: flex-start; gap: 0; opacity: 0; transform: translate(70px, 56px) rotate(16deg); transition: opacity .15s, transform .55s var(--pop); }
.flag svg, .gh svg, .sh-flag svg { width: 22px; height: 22px; fill: var(--fc); flex: none; filter: drop-shadow(1px 2px 0 rgba(17,17,17,.35)); }
.flag em { font: 700 12.5px/1 var(--body); font-style: normal; color: #fff; background: var(--fc); border: 2px solid var(--ink); border-radius: 999px 999px 999px 4px; padding: 6px 10px 5px; margin: 16px 0 0 -6px; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
.card { position: relative; }
.card.sel-on .sel, .card.ghosted .sel { opacity: 1; transform: none; }
.card.sel-on .sel > .sel-tag, .card.ghosted .sel > .sel-tag { opacity: 1; transform: none; }
.card.sel-on .flag { opacity: 1; transform: none; }
.card.ghosted:not(.sel-on) { --sc: var(--gc); }
html:not(.touch) .card:hover .sel { opacity: 1; transform: none; --sc: var(--fig); }
html:not(.touch) .card:hover .sel > .sel-tag { opacity: 1; transform: none; }
html:not(.touch) .card:hover .flag { opacity: 1; transform: none; }

/* 贴纸基础：白边 + 粗黑描边 + 硬投影；悬停只上浮 + 投影加深 */
.stk { background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 10px; box-shadow: 6px 7px 0 var(--ink); transition: transform .45s var(--pop), box-shadow .45s var(--pop); }
.stk img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 13px; border: 2px solid var(--ink); background: #eee3cf; }
.stk figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 8px 4px 0; font: 700 13px/1.25 var(--body); }
.stk figcaption b { font: 400 16px/1.15 var(--cn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk figcaption small { color: #6d6252; white-space: nowrap; font-size: 12px; }
html:not(.touch) .card:hover > .stk, .card.sel-on > .stk { box-shadow: 10px 13px 0 var(--ink); }

/* ---------- 幽灵光标 */
.ghosts { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.gh { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; will-change: transform; transition: opacity .4s; }
.gh em { font: 700 12px/1 var(--body); font-style: normal; color: #fff; background: var(--fc); border: 2px solid var(--ink); border-radius: 999px 999px 999px 4px; padding: 5px 9px 4px; margin: 16px 0 0 -6px; white-space: nowrap; }
.gh q { position: absolute; left: 24px; top: 44px; quotes: none; font: 400 15px/1.25 var(--cn); background: #fff; border: 2.5px solid var(--ink); border-radius: 4px 16px 16px 16px; padding: 7px 12px 6px; white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); opacity: 0; transform: scale(.4) translate(-20px, -20px); transform-origin: 0 0; transition: opacity .2s, transform .45s var(--pop); }
.gh.say q { opacity: 1; transform: none; }
.gh.left { flex-direction: row-reverse; }
.gh.left svg { transform: scaleX(-1); }
.gh.left em { margin: 16px -6px 0 0; border-radius: 999px 999px 4px 999px; }
.gh.left q { left: auto; right: 24px; border-radius: 16px 4px 16px 16px; transform-origin: 100% 0; transform: scale(.4) translate(20px, -20px); }
.gh.left.say q { transform: none; }
.gh.off { opacity: 0; }

/* =====================================================================
   首页：Shuffle 堆 + 彩虹跑道
   ===================================================================== */
.runway { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; }
.runway polygon { stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-home .runway { clip-path: inset(0 0 0 0); animation: runIn .9s var(--out) .05s both; }
@keyframes runIn { from { clip-path: inset(100% 0 0 0); } }
.home-copy { position: absolute; left: 6vw; top: 7.5vh; width: min(600px, 42vw); z-index: 2; }
.eyebrow { margin: 0 0 18px; font: 700 15px/1 var(--body); display: flex; align-items: center; gap: 10px; }
.hero { margin: 0; font: 400 clamp(52px, 5.6vw, 84px)/1.16 var(--cn); }
.hero .ln { display: block; white-space: nowrap; }
.hero .band { font-size: .9em; margin-right: .12em; transform: rotate(-4deg) translateY(-.04em); background: var(--do); }
.lede { margin: 22px 0 16px; max-width: 30em; font-size: 16px; color: #3b342b; }
.textlink { font: 700 16px/1 var(--body); text-decoration: none; border-bottom: 2.5px solid var(--ink); padding-bottom: 3px; transition: color .2s; }
.textlink span { display: inline-block; transition: transform .4s var(--pop); }
.textlink:hover { color: var(--or); }
.textlink:hover span { transform: translateX(6px); }

.stack-wrap { position: absolute; left: 62%; top: 5vh; width: 340px; transform: translateX(-50%); z-index: 3; }
.stack { position: relative; width: 340px; height: 384px; }
.stack > .sc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: rotate(var(--r)); }
.sc:not(.lead) figcaption { visibility: hidden; }
.sc > .stk { height: 100%; cursor: pointer; }
.sc .stk img { aspect-ratio: auto; height: 312px; }
.sc:not(.lead) .sel, .sc:not(.lead) .flag { display: none; }
.sc.lead > .stk { animation: float 4.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(.6deg); } }
.sc.deal { animation: deal .8s var(--pop) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
@keyframes deal { from { transform: translate(var(--dx, 0), -120vh) rotate(calc(var(--r) * -3)); } }
.shuffle { position: absolute; left: 50%; top: calc(100% - 16px); transform: translateX(-50%) rotate(-2deg); z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 12px 24px 11px 18px; font: 700 18px/1 var(--body); box-shadow: 5px 5px 0 var(--ink); transition: transform .4s var(--pop), box-shadow .2s, background .2s; white-space: nowrap; }
.shuffle svg { width: 22px; height: 22px; transition: transform .6s var(--pop); }
.shuffle:hover { background: var(--ye); transform: translateX(-50%) rotate(1deg) scale(1.05); }
.shuffle:hover svg { transform: rotate(180deg); }
.shuffle:active { transform: translateX(-50%) translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.shuffle.pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 3px solid var(--or); animation: pulse 1.4s var(--out) infinite; pointer-events: none; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35, 1.7); opacity: 0; } }
.home-badge { position: absolute; right: 3vw; top: 25vh; width: 160px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.home-badge svg { width: 132px; height: 132px; animation: spin 26s linear infinite; }
.home-badge .pill { transform: rotate(4deg); }
.insp { position: relative; margin: 26px 0 22px; max-width: 470px; z-index: 3; background: var(--ye); border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 14px 18px 12px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1.2deg); }
.textlink { position: relative; z-index: 3; background: var(--cream); padding: 4px 2px 3px; }
.insp.swap { animation: inspSwap .5s var(--pop); }
@keyframes inspSwap { from { transform: rotate(-1.2deg) scale(.9); opacity: .3; } }
.insp-k { font: 400 15px/1 var(--cn); background: var(--ink); color: var(--ye); padding: 5px 9px 4px; border-radius: 6px; display: inline-block; transform: rotate(-3deg); }
.insp-t { margin: 8px 0 8px; font: 400 17px/1.45 var(--cn); }
.insp-m { font: 700 12px/1 var(--body); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 9px 3px; }
.marquee { position: absolute; left: -30px; right: -30px; bottom: 26px; height: 54px; z-index: 4; overflow: hidden; background: var(--do); border-block: 3px solid var(--ink); transform: rotate(-1.4deg); display: flex; align-items: center; box-shadow: 0 6px 0 rgba(17,17,17,.18); }
.mq-track { display: flex; flex: none; white-space: nowrap; animation: mq 38s linear infinite; }
.mq-track span { font: 400 22px/1 var(--cn); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; padding: 0 22px; display: inline-flex; align-items: center; gap: 22px; }
.mq-track span.lat { font: 400 22px/1 "Shrikhand", serif; }
.mq-track i { font-style: normal; color: var(--ye); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; font-size: 22px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* =====================================================================
   阵容：FigJam 点阵看板
   ===================================================================== */
.board { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: #FBF1DE; background-image: radial-gradient(circle, rgba(17,17,17,.22) 1.4px, transparent 1.8px); background-size: 28px 28px; background-position: var(--bx, 0) var(--by, 0); }
.board.drag { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 2700px; height: 1800px; will-change: transform; transform-origin: 0 0; }
.world > .lc { position: absolute; width: var(--w); transform: rotate(var(--r)); perspective: 900px; }
.lc .flip { position: relative; transform-style: preserve-3d; transition: transform .6s var(--pop); }
.lc .stk { backface-visibility: hidden; cursor: pointer; }
.lc .back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; border: 3px solid var(--ink); border-radius: 22px; background: #D9D1C1 repeating-linear-gradient(45deg, transparent 0 10px, rgba(17,17,17,.06) 10px 20px); display: grid; place-items: center; box-shadow: 4px 5px 0 rgba(17,17,17,.4); }
.lc .back b { font: 400 22px/1 "Shrikhand", serif; color: #B8AE9A; transform: rotate(-8deg); }
.lc.off .flip { transform: rotateY(180deg); }
.lc.off { pointer-events: none; }
.lc.off .sel, .lc.off .flag { display: none; }
.lc.pop .flip { animation: pop .6s var(--pop); }
@keyframes pop { 40% { transform: scale(1.12); } }
html:not(.touch) .lc:hover > .flip > .stk { transform: translateY(-6px); }
html:not(.touch) .lc:hover { z-index: 5; }
.lc.sel-on, .lc.ghosted { z-index: 4; }
.chips { position: absolute; top: 20px; left: 50%; transform: translateX(-50%) rotate(-.6deg); z-index: 6; display: flex; gap: 10px; padding: 10px 14px 12px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
.chip { border: 2.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 8px 16px 7px; font: 400 17px/1 var(--cn); box-shadow: 3px 3px 0 var(--ink); transform: rotate(var(--r, -2deg)); transition: transform .4s var(--pop), background .2s; white-space: nowrap; }
.chip:hover { transform: rotate(0) translateY(-3px); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ye); }
.chip small { font: 700 11px/1 var(--body); opacity: .65; margin-left: 4px; }
.board-meta { position: absolute; left: 28px; bottom: 24px; z-index: 6; margin: 0; font: 700 14px/1 var(--body); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 9px 14px 8px; box-shadow: 3px 3px 0 var(--ink); }
.board-meta b { color: var(--or); }
.note { position: absolute; left: 50%; top: 50%; z-index: 7; width: 230px; padding: 22px 18px 18px; background: #FFE36E; border: 2.5px solid var(--ink); box-shadow: 5px 6px 0 rgba(17,17,17,.85); transform: translate(-50%, -50%) rotate(-4deg); text-align: center; font: 400 26px/1.25 var(--cn); pointer-events: none; animation: noteIn .6s var(--pop) both; }
.note::before { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 24px; margin-left: -43px; background: rgba(240,107,179,.7); transform: rotate(3deg); }
.note b { display: block; font-weight: 400; }
.note span { display: block; font-size: 19px; color: #5a4a20; margin-top: 4px; }
.note.bye { animation: noteOut .5s var(--out) forwards; }
@keyframes noteIn { from { opacity: 0; transform: translate(-50%, -40%) rotate(-12deg) scale(.7); } }
@keyframes noteOut { to { opacity: 0; transform: translate(-50%, -60%) rotate(4deg) scale(.9); } }

/* =====================================================================
   创作者：讲者卡阵容
   ===================================================================== */
.v-people { background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(17,17,17,.1) calc(12.5% - 1px) 12.5%); }
.ppl-head { position: absolute; left: 6vw; right: 340px; top: 4.5vh; display: flex; align-items: flex-end; gap: 28px; z-index: 2; }
.ppl-lede { margin: 0 0 6px; max-width: 17em; font-size: 15px; color: #3b342b; }
.ppl-nav { display: flex; gap: 12px; margin: 0 0 4px auto; }
.rbtn { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); background: var(--ye); font: 700 24px/1 var(--body); box-shadow: 4px 4px 0 var(--ink); transition: transform .4s var(--pop), background .2s; }
.rbtn:hover { transform: translateY(-3px) rotate(-6deg); background: var(--pk); }
.rbtn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.rbtn:disabled { opacity: .35; pointer-events: none; }
.ppl-track { position: absolute; left: 0; right: 0; top: 23vh; bottom: 0; display: flex; gap: 56px; padding: 34px 6vw 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 6vw; scrollbar-width: none; }
.ppl-track::-webkit-scrollbar { display: none; }
.pc { flex: none; width: 290px; scroll-snap-align: start; margin-top: var(--oy); }
.pc-art { position: relative; height: 272px; border: 3px solid var(--ink); border-radius: 6px; background: var(--bg); overflow: visible; box-shadow: 6px 6px 0 var(--ink); transition: transform .45s var(--pop), box-shadow .45s var(--pop); }
.pc-art .clip { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; }
.pc-art .av { position: absolute; left: 50%; bottom: -6px; height: 104%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .5s var(--pop); }
.pc-art .sel { inset: -8px; opacity: .55; transform: none; --sc: rgba(17,17,17,.55); }
.pc-art .sel > .sel-tag { opacity: 1; transform: none; left: 50%; translate: -50% 0; bottom: calc(100% + 2px); background: #fff; color: var(--ink); border: 2px solid var(--ink); font-size: 13px; padding: 6px 10px 5px; border-radius: 6px; }
.pc .flag { left: 38%; top: auto; bottom: 26%; }
html:not(.touch) .pc:hover .pc-art, .pc.sel-on .pc-art { transform: translateY(-6px); box-shadow: 9px 11px 0 var(--ink); }
html:not(.touch) .pc:hover .sel, .pc.sel-on .sel, .pc.ghosted .sel { opacity: 1; --sc: var(--fig); }
.pc.ghosted:not(.sel-on) .sel { --sc: var(--gc); }
.pc-q { position: relative; z-index: 2; margin: -14px 10px 0; background: #fff; border: 2.5px solid var(--ink); padding: 14px 16px 24px; font-size: 14px; line-height: 1.55; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg); }
.pc-q b { display: flex; justify-content: space-between; align-items: baseline; font: 400 21px/1.1 var(--cn); margin-bottom: 6px; }
.pc-q b small { font: 700 12px/1 var(--body); color: #7a6c58; }
.pc-works { display: flex; gap: 10px; margin: -10px 0 0 22px; position: relative; z-index: 3; }
.pc-works button { width: 66px; padding: 4px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 var(--ink); transform: rotate(var(--r)); transition: transform .4s var(--pop); }
.pc-works button:hover { transform: rotate(0) translateY(-6px) scale(1.08); }
.pc-works img { border-radius: 7px; aspect-ratio: 1; object-fit: cover; }

/* =====================================================================
   本周 Jam：垂落彩条排行
   ===================================================================== */
.bars { position: absolute; left: 5vw; top: 0; bottom: 0; width: 52vw; display: flex; gap: 0; }
.bar { position: relative; flex: 1; max-width: 76px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; cursor: pointer; }
.bar-rope { position: relative; width: 58px; height: var(--h); background: var(--c); border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 8px 8px; transition: height .6s var(--snap); display: flex; justify-content: center; padding-top: 12px; }
.bar-rope b { font: 400 20px/1 "Shrikhand", serif; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.bar.drop { animation: barDrop .9s var(--pop) both; animation-delay: calc(var(--i) * 80ms + 80ms); }
@keyframes barDrop { from { transform: translateY(-110%); } }
.bar .card { width: 84px; margin-top: -8px; transform: rotate(var(--r)); }
.bar .stk { padding: 5px; border-radius: 14px; box-shadow: 3px 4px 0 var(--ink); }
.bar .stk img { border-radius: 8px; }
.bar .sel { inset: -7px; }
.bar-v { margin-top: 8px; font: 700 13px/1 var(--body); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 8px 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar.picked .bar-v { background: var(--ink); color: var(--ye); }
html:not(.touch) .bar:hover { animation: sway 1.1s ease-in-out; }
.bar.picked .card { --sc: var(--fig); }
.bar.picked .sel, .bar.picked .sel > .sel-tag, .bar.picked .flag { opacity: 1; transform: none; }
@keyframes sway { 25% { transform: rotate(1.6deg); } 60% { transform: rotate(-1.1deg); } 85% { transform: rotate(.4deg); } }
.bar.bump .bar-rope { animation: bump .6s var(--pop); }
@keyframes bump { 40% { transform: scaleX(1.18); } }
.jam-panel { position: absolute; left: 59vw; right: 4vw; top: 4vh; bottom: 3vh; display: flex; flex-direction: column; z-index: 2; }
.jam-panel .ttl { margin-right: 300px; white-space: nowrap; font-size: 44px; }
.ticket { position: relative; margin: auto 0 0; background: var(--ye); border: 3px solid var(--ink); border-radius: 22px; padding: 18px 22px 18px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1.5deg); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: var(--cream); border: 3px solid var(--ink); border-radius: 50%; }
.ticket::before { left: -15px; clip-path: inset(0 0 0 50%); } .ticket::after { right: -15px; clip-path: inset(0 50% 0 0); }
.tk-k { font: 700 12px/1 var(--body); background: var(--ink); color: var(--ye); padding: 5px 9px 4px; border-radius: 6px; }
.tk-t { display: block; margin: 12px 0 8px; font-size: 38px; line-height: 1.05; }
.ticket p { max-width: 24em !important; }
.ticket p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 19em; }
.tk-sun { position: absolute; right: -26px; bottom: -30px; width: 74px; height: 74px; animation: spin 20s linear infinite; }
.cd-big { display: flex; gap: 10px; margin-top: 26px; }
.cd-big span { flex: 1; text-align: center; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 0 8px; box-shadow: 4px 4px 0 var(--ink); }
.cd-big span:nth-child(odd) { transform: rotate(-2deg); } .cd-big span:nth-child(even) { transform: rotate(1.5deg); background: var(--ye); }
.cd-big b { display: block; font: 400 34px/1 "Shrikhand", serif; font-variant-numeric: tabular-nums; }
.cd-big small { font: 700 12px/1 var(--body); }
.pick { display: flex; align-items: center; gap: 14px; margin-top: 22px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 5px 5px 0 var(--ink); }
.pick-img { width: 84px; height: 84px; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; }
.pick div { flex: 1; min-width: 0; }
.pick-k { display: block; font: 700 11px/1 var(--body); color: var(--or); }
.pick-t { display: block; font: 400 22px/1.2 var(--cn); margin: 5px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-by { font: 700 13px/1 var(--body); color: #6d6252; }
.pick-v { font: 400 30px/1 "Shrikhand", serif; white-space: nowrap; }
.pick-v small { font: 700 12px/1 var(--body); margin-left: 3px; }
.pick.swap { animation: inspSwap .45s var(--pop); }
.vote { margin-top: 18px; align-self: stretch; padding: 18px 0 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--pk); color: #fff; font: 400 26px/1 var(--cn); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1.5deg); transition: transform .4s var(--pop), box-shadow .2s, background .2s; }
.vote span { -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.vote:hover { transform: rotate(0) translateY(-3px); background: var(--or); }
.vote:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.vote.done { background: #fff; color: var(--ink); }
.vote.done span { -webkit-text-stroke: 0; }
.swipe-hint { display: none; position: absolute; right: 14px; bottom: 16px; z-index: 5; margin: 0; font: 400 15px/1 var(--cn); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: 8px 14px 7px; box-shadow: 3px 3px 0 var(--ink); animation: nudge 1.6s ease-in-out infinite; transition: opacity .3s; }
.swipe-hint.gone { opacity: 0; pointer-events: none; }
@keyframes nudge { 50% { transform: translateX(-6px); } }
.pick-tip { margin: 14px 0 0; font-size: 13px; color: #7a6c58; text-align: center; }

/* =====================================================================
   投稿：粉色 CTA + 文件夹 FAQ
   ===================================================================== */
.cta { position: absolute; left: 5vw; top: 4vh; bottom: 4vh; width: 48vw; background: var(--pk); border: 3px solid var(--ink); border-radius: 40px; box-shadow: 9px 9px 0 var(--ink); overflow: hidden; }
.wave { position: absolute; display: block; }
.wave-t { right: 0; top: 0; width: 72%; height: 30%; }
.wave-b { left: 0; right: 0; bottom: 0; width: 100%; height: 22%; z-index: 2; }
.sun-big { position: absolute; left: 34px; top: 30px; width: 110px; height: 110px; animation: spin 24s linear infinite; z-index: 2; }
.cta-in { position: relative; z-index: 3; padding: 132px 52px 0; color: #fff; }
.cta-t { margin: 18px 0 0; font: 400 clamp(36px, 3.5vw, 54px)/1.25 var(--cn); }
.cta-t .outl { color: #fff; }
.cta-t .outl::after { color: #fff; -webkit-text-stroke-color: var(--ink); -webkit-text-stroke-width: 0; }
.cta-p { margin: 16px 0 24px; max-width: 30em; font-size: 15px; line-height: 1.7; color: #fff; text-shadow: 0 1px 0 rgba(17,17,17,.25); }
.cta-btn { color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 15px 30px 13px; font: 400 22px/1 var(--cn); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); transition: transform .4s var(--pop), background .2s, box-shadow .2s; }
.cta-btn:hover { background: var(--ye); transform: rotate(1deg) scale(1.05); }
.cta-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.crowd { position: absolute; left: 0; right: 0; bottom: 6%; height: 31%; z-index: 1; }
.crowd img { position: absolute; bottom: 0; height: var(--h); width: auto; max-width: none; left: var(--x); transform: translateX(-50%) rotate(var(--r)); transform-origin: 50% 100%; animation: crowdBob 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes crowdBob { 50% { transform: translateX(-50%) translateY(-7px) rotate(calc(var(--r) * -1)); } }
.faq { position: absolute; left: 58vw; right: 4vw; top: 4vh; bottom: 4vh; display: flex; flex-direction: column; justify-content: flex-end; }
.faq .ttl { margin-right: 300px; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 0; counter-reset: s; }
.steps li { position: relative; flex: 1; background: var(--c); border: 2.5px solid var(--ink); margin-left: -2.5px; padding: 12px 14px 11px 46px; counter-increment: s; }
.steps li:first-child { border-radius: 14px 0 0 14px; margin-left: 0; } .steps li:last-child { border-radius: 0 14px 14px 0; }
.steps li::before { content: counter(s); position: absolute; left: 10px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--ink); color: #fff; font: 400 15px/28px "Shrikhand", serif; text-align: center; }
.steps b { display: block; font: 400 18px/1.1 var(--cn); }
.steps span { font: 700 12px/1.3 var(--body); }
.folders { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.fd { position: relative; padding-top: 14px; transform: rotate(var(--r)); }
.fd::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 22px; background: var(--fc, var(--do)); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 10px 18px 0 0; }
.fd-b { position: relative; background: var(--fc, var(--do)); border: 2.5px solid var(--ink); border-radius: 0 12px 12px 12px; box-shadow: 5px 5px 0 var(--ink); }
.fd-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 13px 20px 12px; font: 400 19px/1.2 var(--cn); }
.fd-q i { font-style: normal; font: 700 24px/1 var(--body); transition: transform .45s var(--pop); }
.fd.open .fd-q i { transform: rotate(135deg); }
.fd-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--out); }
.fd.open .fd-a { grid-template-rows: 1fr; }
.fd-a > div { overflow: hidden; }
.fd-a p { margin: 0 14px 14px; padding: 12px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; font-size: 14.5px; line-height: 1.65; }

/* =====================================================================
   作品详情：大贴纸卡
   ===================================================================== */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(28,20,10,.5); }
.sheet.opening { animation: fadeIn .35s both; }
.sheet.closing { animation: fadeIn .28s reverse both; }
@keyframes fadeIn { from { opacity: 0; } }
.sh-card { position: relative; width: min(1100px, 88vw); height: min(640px, 82vh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--paper); border: 3px solid var(--ink); border-radius: 30px; box-shadow: 12px 12px 0 var(--ink); transform: rotate(-.6deg); }
.sheet.opening .sh-card { animation: cardIn .45s var(--pop) .38s both; }
.sheet.opening.nofly .sh-card { animation-delay: 0s; }
.sheet.closing .sh-card { animation: cardOut .28s var(--out) both; }
@keyframes cardIn { from { opacity: 0; transform: rotate(-.6deg) scale(.94); } }
@keyframes cardOut { to { opacity: 0; transform: rotate(3deg) scale(.9) translateY(30px); } }
.sh-img { padding: 18px; min-height: 0; }
.sh-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; border: 3px solid var(--ink); background: #eee3cf; }
.sh-body { padding: 34px 40px 28px 18px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.sh-type { align-self: flex-start; }
.sh-body h2 { margin: 12px 0 10px; font: 400 40px/1.15 var(--cn); }
.sh-flag { display: flex; align-items: flex-start; margin: 0 0 12px; }
.sh-flag em { font: 700 14px/1 var(--body); font-style: normal; color: #fff; background: var(--fc); border: 2px solid var(--ink); border-radius: 999px 999px 999px 4px; padding: 7px 12px 6px; margin: 15px 0 0 -6px; box-shadow: 2px 2px 0 var(--ink); }
.sh-flag small { margin: 21px 0 0 10px; font: 700 13px/1 var(--body); color: #7a6c58; }
.sh-desc { margin: 0 0 16px; font: 400 18px/1.6 var(--cn); }
.sh-k { font-style: normal; font: 400 13px/1 var(--cn); background: var(--pk); color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 7px 2px; margin-right: 8px; vertical-align: 3px; }
.sh-who { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 10px 12px; border: 2.5px dashed var(--ink); border-radius: 16px; background: #FFF1D6; }
.sh-who img { width: 58px; height: 58px; flex: none; object-fit: cover; object-position: 50% 8%; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ye); }
.sh-who p { margin: 0; font-size: 13px; line-height: 1.5; color: #3b342b; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sh-who b { display: block; font: 400 15px/1.3 var(--cn); color: var(--ink); }
.sh-prompt { background: var(--ink); color: #FFEFD2; border-radius: 16px; padding: 12px 14px 14px; box-shadow: 4px 4px 0 var(--or); }
.sh-ph { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 var(--body); color: var(--ye); margin-bottom: 8px; }
.sh-ph i { font-style: normal; color: #fff; }
.copy { background: var(--ye); color: var(--ink); border: 2px solid #fff; border-radius: 999px; padding: 5px 12px 4px; font: 700 12px/1 var(--body); transition: transform .3s var(--pop); }
.copy:hover { transform: scale(1.08) rotate(-3deg); }
.sh-prompt code { display: block; font: 13px/1.6 var(--mono); max-height: 128px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.sh-stats { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: flex; gap: 10px; }
.sh-stats li { flex: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 9px 12px 8px; box-shadow: 3px 3px 0 var(--ink); }
.sh-stats li:nth-child(2) { transform: rotate(1.5deg); background: var(--ye); } .sh-stats li:nth-child(3) { transform: rotate(-1.5deg); background: var(--pk); }
.sh-stats small { display: block; font: 700 11px/1 var(--body); }
.sh-stats b { display: block; font: 700 19px/1.2 var(--body); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-x { position: absolute; right: -18px; top: -18px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: var(--ye); font: 700 20px/1 var(--body); box-shadow: 3px 3px 0 var(--ink); transition: transform .4s var(--pop); }
.sh-x:hover { transform: rotate(90deg) scale(1.08); }
.sh-nav { position: fixed; top: 50%; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; font: 700 24px/1 var(--body); box-shadow: 4px 4px 0 var(--ink); z-index: 2; transition: transform .4s var(--pop), background .2s; }
.sh-nav:hover { background: var(--ye); transform: scale(1.08); }
.sh-nav.prev { left: max(14px, calc(50vw - 620px)); } .sh-nav.next { right: max(14px, calc(50vw - 620px)); }
.sh-card.swap .sh-img img, .sh-card.swap .sh-body > * { animation: viewIn .4s var(--out) both; }
/* 揭贴纸：右下角真的被 clip-path 切掉，折起来的那片是半透明背面 */
.peeling { position: relative; z-index: 30; animation: lift .2s var(--out) forwards, peelClip .2s var(--out) forwards; }
.peeling::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; background: linear-gradient(315deg, transparent 50%, rgba(255,255,255,.9) 50%, rgba(232,226,214,.78) 70%, rgba(17,17,17,.28) 100%); filter: drop-shadow(-2px -2px 3px rgba(17,17,17,.25)); animation: curl .2s var(--out) forwards; pointer-events: none; }
@keyframes peelClip { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 58%, 58% 100%, 0 100%); } }
@keyframes curl { to { width: 42%; height: 42%; } }
@keyframes lift { to { transform: translateY(-8px) rotate(-2deg); } }
.flyer { position: fixed; left: 0; top: 0; z-index: 95; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 10px; box-shadow: 12px 14px 0 rgba(17,17,17,.9); transform-origin: 0 0; pointer-events: none; }
.flyer img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; border: 2px solid var(--ink); }

/* ---------- 提示条 */
.toast { position: fixed; left: 50%; top: calc(var(--hd) + 16px); z-index: 120; opacity: 0; transform: translate(-50%, -24px) rotate(-2deg); transition: transform .5s var(--pop), opacity .2s; background: var(--ink); color: var(--ye); font: 400 18px/1.2 var(--cn); padding: 13px 22px 12px; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--or); transition: transform .5s var(--pop); pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }
.toast.at-left { left: 24px; transform: translate(0, -24px) rotate(-2deg); } .toast.at-left.on { transform: translate(0, 0) rotate(-2deg); }
.toast.at-bottom { top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 24px) rotate(-2deg); } .toast.at-bottom.on { transform: translate(-50%, 0) rotate(-2deg); }

/* ---------- 手机菜单 */
.mmenu { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; padding-top: 64px; overflow: hidden; touch-action: none; }
.mmenu::before { content: ""; position: absolute; inset: 0; background: var(--cream); animation: fadeIn .2s both; }
.mm-bar { position: relative; flex: 1; margin: -4px -20px 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--c); border-block: 3px solid var(--ink); text-decoration: none; transform: rotate(-2.5deg); animation: barFall .6s var(--pop) both; animation-delay: calc(var(--i) * 65ms); box-shadow: 0 5px 0 rgba(17,17,17,.2); }
.mm-bar span { font: 400 38px/1 var(--cn); color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.mm-bar em { font: 400 18px/1 "Shrikhand", serif; font-style: normal; color: var(--ink); opacity: .55; }
.mm-bar[aria-current="page"] span::after { content: " ☀"; color: var(--ye); }
@keyframes barFall { from { transform: translateY(-140vh) rotate(-8deg); } }
.mmenu.bye .mm-bar { animation: barUp .4s var(--out) both; animation-delay: calc((4 - var(--i)) * 40ms); }
@keyframes barUp { to { transform: translateY(-140vh) rotate(-2.5deg); } }
.mmenu.bye::before { animation: fadeIn .3s .2s reverse both; }
.mm-follow { position: fixed; left: 0; top: 0; width: 132px; height: 132px; object-fit: cover; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); z-index: 3; pointer-events: none; opacity: 0; transition: opacity .2s; }
.mm-follow.on { opacity: 1; }
.mm-close { position: absolute; left: 14px; top: 10px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--ye); font: 700 18px/1 var(--body); box-shadow: 3px 3px 0 var(--ink); }

/* =====================================================================
   减少动画：直接最终状态
   ===================================================================== */
html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* =====================================================================
   中等宽度
   ===================================================================== */
@media (max-width: 1180px) and (min-width: 761px) {
  .home-copy { width: 46vw; }
  .insp { max-width: 420px; }
  .home-badge { display: none; }
  .stack-wrap { left: 70%; }
  .jam-panel .ttl, .faq .ttl { margin-right: 250px; }
}

/* =====================================================================
   手机 390×844
   ===================================================================== */
@media (max-width: 760px) {
  .home-badge { display: none; }
  :root { --hd: 64px; }
  body { font-size: 14px; }
  .mark { font-size: 21px; }
  .cd-sticker { left: 10px; padding: 4px 8px 4px 4px; gap: 5px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .cd-sun { width: 24px; height: 24px; }
  .cd-sticker small { display: none; }
  .cd-sticker b { font-size: 11px; letter-spacing: 0; }
  .top { justify-content: center; padding-left: 92px; }
  .drips { display: none; }
  .drips-m { display: flex; position: fixed; right: 12px; top: 0; z-index: 76; gap: 0; align-items: flex-start; background: none; border: 0; padding: 0; height: 58px; }
  .drips-m i { display: block; width: 13px; margin-left: -2px; border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 8px 8px; transition: height .5s var(--snap); }
  .drips-m i:nth-child(1) { height: 34px; background: var(--do); } .drips-m i:nth-child(2) { height: 50px; background: var(--ye); }
  .drips-m i:nth-child(3) { height: 28px; background: var(--pk); } .drips-m i:nth-child(4) { height: 42px; background: var(--or); }
  .drips-m:active i { height: 56px; }
  .ttl { font-size: 34px; }
  .note { font-size: 22px; width: 200px; }

  /* 首页 */
  .runway { height: 34%; }
  .home-copy { left: 20px; right: 20px; top: 18px; width: auto; text-align: center; }
  .eyebrow { display: none; }
  .hero { font-size: 36px; line-height: 1.16; }
  .lede { display: none; }
  .textlink { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100vh - var(--hd) - 150px); white-space: nowrap; font-size: 15px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: 9px 16px 8px; box-shadow: 3px 3px 0 var(--ink); }
  .textlink:hover span { transform: none; }
  .stack-wrap { left: 50%; top: 200px; width: 208px; }
  .shuffle { top: calc(100% + 58px); }
  .flag { left: auto; right: -2px; top: calc(100% + 2px); flex-direction: row-reverse; }
  .flag svg { transform: scaleX(-1); }
  .flag em { margin: 16px -6px 0 0; border-radius: 999px 999px 4px 999px; font-size: 11.5px; }
  .bar .flag { left: 4px; right: auto; top: calc(100% + 30px); flex-direction: row; } .bar .flag svg { transform: none; } .bar .flag em { margin: 16px 0 0 -6px; border-radius: 999px 999px 999px 4px; }
  .pc .flag { right: auto; flex-direction: row; } .pc .flag svg { transform: none; } .pc .flag em { margin: 16px 0 0 -6px; border-radius: 999px 999px 999px 4px; }
  .stack { width: 208px; height: 240px; }
  .sc .stk img { height: 176px; }
  .sc .stk { padding: 8px; border-radius: 18px; }
  .shuffle { font-size: 16px; padding: 10px 18px 9px 14px; }
  .hint-shuffle { top: auto; bottom: calc(100% + 46px); font-size: 15px; display: none; }
  .insp { position: absolute; left: 4px; right: 4px; top: calc(100vh - var(--hd) - 238px); margin: 0; max-width: none; transform: rotate(-1.5deg); padding: 9px 12px 8px; box-shadow: 4px 4px 0 var(--ink); display: flex; gap: 8px; align-items: center; text-align: left; }
  .insp-k { flex: none; font-size: 13px; }
  .insp-t { margin: 0; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .insp-m { display: none; }
  .marquee { height: 44px; bottom: 18px; }
  .mq-track span, .mq-track span.lat, .mq-track i { font-size: 18px; }

  /* 阵容 */
  .chips { top: 10px; left: 10px; right: 10px; transform: none; overflow-x: auto; padding: 8px 10px 10px; scrollbar-width: none; border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { font-size: 15px; padding: 7px 13px 6px; }
  .board-meta { left: 14px; bottom: 16px; font-size: 13px; }

  /* 创作者 */
  .v-people { background-size: auto; }
  .ppl-head { left: 20px; right: 20px; top: 16px; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .ppl-head .ttl { width: 100%; font-size: 32px; }
  .ppl-lede { flex: 1; font-size: 13px; margin: 6px 0 0; }
  .ppl-nav { margin: 6px 0 0; }
  .rbtn { width: 46px; height: 46px; font-size: 19px; }
  .ppl-track { top: 160px; gap: 24px; padding: 34px 40px 20px; scroll-padding: 0 40px; }
  .pc { width: calc(100vw - 80px); margin-top: 0; scroll-snap-align: center; }
  .pc-art { height: 330px; }
  .pc-q { font-size: 13.5px; }

  /* Jam */
  .jam-panel { left: 18px; right: 18px; top: 14px; bottom: auto; }
  .jam-panel .ttl { margin-right: 0; font-size: 32px; }
  .ticket { margin: 10px 0 0; padding: 10px 14px; } .tk-t { font-size: 24px; margin: 6px 0 4px; } .ticket p { font-size: 12.5px; line-height: 1.45; } .tk-sun { width: 46px; height: 46px; right: -10px; bottom: -16px; }
  .cd-big { margin-top: 12px; gap: 8px; }
  .cd-big span { padding: 6px 0 5px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .cd-big b { font-size: 22px; }
  .pick { display: none; }
  .vote { margin-top: 12px; padding: 13px 0 11px; font-size: 21px; box-shadow: 4px 4px 0 var(--ink); }
  .pick-tip { display: none; }
  .bars { left: 0; right: 0; width: auto; top: 300px; overflow-x: auto; overflow-y: hidden; padding: 0 14px; scrollbar-width: none; border-top: 2.5px solid var(--ink); }
  .bars::-webkit-scrollbar { display: none; }
  .bar { flex: none; width: calc((100vw - 28px) / 5); max-width: none; }
  .bar-rope { width: 42px; padding-top: 8px; }
  .bar-rope b { font-size: 15px; }
  .bar .card { width: 58px; }
  .bar .stk { padding: 4px; border-radius: 11px; }
  .bar-v { font-size: 11px; padding: 3px 6px 2px; }
  .bar .sel > .sel-tag { font-size: 10.5px; padding: 4px 6px 3px; }
  .ticket p { display: none; }
  .swipe-hint { display: block; }

  /* 投稿 */
  .v-submit { overflow-y: auto; }
  .cta { position: relative; left: auto; top: auto; bottom: auto; width: auto; margin: 14px 14px 0; height: 384px; border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); }
  .sun-big { width: 64px; height: 64px; left: 18px; top: 16px; }
  .cta-in { padding: 88px 22px 0; }
  .cta-in .pill { position: absolute; left: 96px; top: 34px; font-size: 11px; }
  .cta-t { margin: 0; font-size: 29px; }
  .cta-p { font-size: 13px; margin: 10px 0 14px; line-height: 1.55; }
  .cta-btn { font-size: 19px; padding: 12px 22px 11px; }
  .crowd { height: 27%; bottom: 4%; }
  .faq { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px 16px 24px; }
  .folders { margin-top: 0; }
  .fd-a p { font-size: 13.5px; padding: 9px 12px; margin: 0 10px 10px; }
  .faq .ttl, .steps { display: none; }
  .folders { gap: 8px; }
  .fd-q { font-size: 17px; padding: 12px 16px 11px; }
  .fd { padding-top: 11px; } .fd::before { height: 16px; }

  /* 详情 */
  .sheet { place-items: end stretch; }
  .sh-card { width: 100%; height: 92vh; display: block; border-radius: 26px 26px 0 0; transform: none; overflow: auto; box-shadow: none; border-bottom: 0; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(40px); } }
  .sh-img { padding: 14px 14px 0; }
  .sh-img img { aspect-ratio: 1.15; height: auto; }
  .sh-body { padding: 16px 20px 24px; overflow: visible; }
  .sh-body h2 { font-size: 30px; margin: 8px 0 6px; }
  .sh-desc { font-size: 16px; }
  .sh-x { right: 12px; top: 12px; width: 44px; height: 44px; }
  .sh-nav { top: auto; bottom: 18px; margin: 0; width: 48px; height: 48px; font-size: 19px; }
  /* 手机：卡片底部的 sticky 操作条（奶油底 + 上边线），内容留出等高的底部空间 */
  .sheet::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(72px + env(safe-area-inset-bottom)); background: var(--cream); border-top: 3px solid var(--ink); z-index: 1; pointer-events: none; }
  .sheet.opening::after { animation: fadeIn .3s .45s both; }
  .sh-body { min-height: auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sh-nav { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .sh-nav.prev { left: 16px; right: auto; } .sh-nav.next { right: 16px; }
  .sh-stats { padding-bottom: 54px; }
  .toast { font-size: 15px; max-width: calc(100vw - 28px); overflow: hidden; text-overflow: ellipsis; }
}