:root {
  color-scheme: dark;
  --ink: #07110f;
  --ink-2: #0c1b18;
  --panel: #10231f;
  --line: rgba(185, 235, 215, .16);
  --jade: #54d6a4;
  --jade-pale: #d8fbea;
  --gold: #d9b873;
  --text: #f2f8f5;
  --muted: #a4bbb2;
  --danger: #e58475;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; font-size: 16px; line-height: 1.65; }
button, input { font: inherit; }
button { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 14px clamp(18px, 4vw, 64px); background: rgba(7,17,15,.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; font-family: STSong, SimSun, serif; font-size: 1.4rem; letter-spacing: .12em; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark { width: 28px; height: 28px; border-radius: 50%; border: 7px solid var(--jade); box-shadow: inset 0 0 0 1px #bfffe5, 0 0 18px rgba(84,214,164,.25); }
.main-nav { display: flex; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-btn { border: 0; background: transparent; color: var(--muted); padding: 9px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-size: .9rem; }
.nav-btn:hover, .nav-btn.active { color: var(--ink); background: var(--jade-pale); }
.wallet { display: flex; align-items: baseline; gap: 8px; border: 1px solid rgba(217,184,115,.35); background: rgba(217,184,115,.08); padding: 8px 14px; border-radius: 999px; color: var(--gold); white-space: nowrap; }
.wallet strong { font-size: 1.2rem; }
.wallet small { color:var(--muted); padding-left:8px; border-left:1px solid rgba(217,184,115,.3); }
.mobile-menu-toggle { display:none; }
main { width: min(1420px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 64px) 90px; }
.view { display: none; animation: rise .45s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.eyebrow { color: var(--jade); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; margin: 0 0 10px; font-weight: 700; }
.hero-grid { min-height: calc(100vh - 180px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .6fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.hero-copy h1 { font-family: STSong, SimSun, serif; font-size: clamp(3.7rem, 8vw, 8.4rem); line-height: .96; letter-spacing: -.05em; margin: 12px 0 30px; font-weight: 500; }
.hero-copy h1 em { color: var(--jade); font-style: normal; }
.hero-intro { color: var(--muted); max-width: 620px; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.primary-btn, .ghost-btn, .quiz-submit { border-radius: 999px; padding: 13px 22px; border: 1px solid var(--jade); cursor: pointer; font-weight: 700; }
.primary-btn, .quiz-submit { background: var(--jade); color: var(--ink); }
.ghost-btn { background: transparent; color: var(--jade-pale); }
.progress-card { position: relative; padding: 34px; border: 1px solid var(--line); border-radius: 34px; min-height: 450px; background: radial-gradient(circle at 60% 25%, rgba(84,214,164,.15), transparent 42%), var(--ink-2); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.jade-orbit { position: absolute; top: 35px; right: 24px; width: 210px; height: 210px; border-radius: 50%; border: 1px solid rgba(84,214,164,.18); display: grid; place-items: center; }
.jade-orbit::before, .jade-orbit::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(84,214,164,.22); }
.jade-orbit::before { inset: 28px; }.jade-orbit::after { inset: 62px; }
.jade-orbit span { width: 22px; height: 22px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 22px var(--jade); transform: translateY(-105px); }
.progress-card > p { color: var(--muted); margin: 0; }
.progress-card > strong { font-family: STSong, SimSun, serif; font-size: 4rem; line-height: 1; margin: 8px 0; }
.progress-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 5px; margin: 24px 0 12px; overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 0; background: var(--jade); transition: width .4s ease; }
.progress-card .next-step { color: var(--jade-pale); }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.path-card { border-top: 1px solid var(--line); padding: 20px 4px; }
.path-card span { color: var(--gold); font-size: .8rem; }.path-card h3 { margin: 6px 0; }.path-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.section-heading h2 { font-family: STSong, SimSun, serif; font-weight: 500; font-size: clamp(2.2rem, 4vw, 4.6rem); line-height: 1.05; margin: 0; }
.section-heading > p { color: var(--muted); max-width: 480px; margin: 0; }
.lesson-layout { display: grid; grid-template-columns: 290px 1fr; gap: 28px; }
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-tab { text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: transparent; cursor: pointer; }
.lesson-tab.active { background: var(--jade-pale); color: var(--ink); border-color: transparent; }
.lesson-tab small { display: block; opacity: .7; margin-top: 4px; }
.lesson-reader { min-height: 620px; padding: clamp(24px, 5vw, 62px); background: var(--ink-2); border: 1px solid var(--line); border-radius: 28px; }
.lesson-reader h3 { font-family: STSong, SimSun, serif; font-size: clamp(2rem, 4vw, 4rem); margin: 0 0 10px; font-weight: 500; }
.lesson-reader .lead { color: var(--jade-pale); font-size: 1.15rem; max-width: 850px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 30px 0; }
.knowledge-card { padding: 20px; border-left: 2px solid var(--jade); background: rgba(84,214,164,.06); }
.knowledge-card h4 { margin: 0 0 8px; }.knowledge-card p { color: var(--muted); margin: 0; }
.tip-strip { padding: 16px 18px; border: 1px solid rgba(217,184,115,.32); color: #f0dcae; border-radius: 14px; }
.quiz { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 28px; }
.question { margin: 25px 0; }.question p { font-weight: 700; }
.option { display: block; margin: 8px 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--jade); background: rgba(84,214,164,.1); }
.museum-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.museum-card { grid-column: span 4; min-height: 430px; position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; padding: 0; }
.museum-card:nth-child(1), .museum-card:nth-child(5) { grid-column: span 8; }
.museum-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .6s ease; background: #183028; }
.museum-card:hover img { transform: scale(1.035); }
.museum-card::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 35%, rgba(4,10,8,.92)); }
.museum-label { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; }
.museum-label small { color: var(--gold); }.museum-label h3 { font-family: STSong, SimSun, serif; font-size: 1.8rem; margin: 5px 0; }.museum-label p { color: #d3e0da; margin: 0; font-size: .9rem; }
.shop-toolbar { display:flex; justify-content:space-between; align-items:center; padding: 13px 0 24px; color: var(--muted); }
.text-btn { border:0; color:var(--jade); background:transparent; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.shop-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--ink-2); }
.shop-visual { height:200px; overflow:hidden; background:#183028; }
.shop-visual img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.shop-card:hover .shop-visual img { transform:scale(1.04); }
.shop-body { padding:20px; }.shop-meta { color:var(--muted); font-size:.85rem; }.shop-body h3 { margin:5px 0; }.price-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.price { color:var(--gold); font-weight:800; }.inspect-btn, .buy-btn { border:1px solid var(--line); border-radius:999px; background:transparent; padding:8px 12px; cursor:pointer; }.buy-btn { border-color:var(--jade); color:var(--jade); }
.clues { display:none; padding:14px; margin-top:14px; border-radius:12px; background:rgba(255,255,255,.04); color:var(--muted); font-size:.9rem; }.clues.open { display:block; }
dialog { width:min(720px,calc(100% - 30px)); max-height:85vh; overflow:auto; border:1px solid var(--line); border-radius:24px; background:#0d1c19; color:var(--text); padding:30px; box-shadow:0 30px 100px rgba(0,0,0,.6); } dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }.modal-close { position:absolute; right:14px; top:12px; border:0; background:transparent; font-size:1.8rem; cursor:pointer; }.modal-image { width:100%; max-height:390px; object-fit:contain; background:#07110f; border-radius:14px; }.modal-source { color:var(--jade); }
.toast { position:fixed; z-index:50; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--jade-pale); color:var(--ink); padding:11px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:.25s; font-weight:700; }.toast.show { opacity:1; transform:translate(-50%,0); }
.collection-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.collection-item { padding:14px; border:1px solid var(--line); border-radius:14px; }.collection-item strong { display:block; }.collection-item small { color:var(--muted); }.reveal-true { color:var(--jade); }.reveal-false { color:var(--danger); }
@media (max-width: 950px) { .topbar { grid-template-columns:1fr auto; }.main-nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; }.hero-grid { grid-template-columns:1fr; }.hero-grid { min-height:auto; }.progress-card { min-height:380px; }.path-grid { grid-template-columns:repeat(2,1fr); }.lesson-layout { grid-template-columns:1fr; }.lesson-list { display:grid; grid-template-columns:repeat(2,1fr); }.museum-card,.museum-card:nth-child(1),.museum-card:nth-child(5) { grid-column:span 6; }.shop-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px) { .topbar { gap:10px; }.wallet span,.wallet small { display:none; } main { padding-top:35px; }.hero-copy h1 { font-size:3.5rem; }.section-heading { align-items:flex-start; flex-direction:column; }.path-grid,.lesson-list,.knowledge-grid,.shop-grid { grid-template-columns:1fr; }.museum-card,.museum-card:nth-child(1),.museum-card:nth-child(5) { grid-column:1/-1; min-height:380px; }.progress-card { min-height:340px; }.shop-toolbar { align-items:flex-start; gap:10px; }}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Expanded curriculum and catalog */
button:disabled { opacity:.48; cursor:not-allowed; }
.path-grid { grid-template-columns:repeat(3,1fr); }
.hero-grid { min-height:500px; }
.path-card { display:block; width:100%; text-align:left; color:var(--text); background:transparent; border-left:0; border-right:0; border-bottom:0; cursor:pointer; }
.path-card:hover h3 { color:var(--jade); }
.chapter-index,.category-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; }
.chapter-pill,.category-btn,.mode-btn { border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--muted); background:transparent; cursor:pointer; }
.chapter-pill.active,.category-btn.active,.mode-btn.active { background:var(--jade-pale); color:var(--ink); border-color:var(--jade-pale); }
.chapter-points { display:grid; gap:14px; }
.chapter-points section { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:18px 20px; background:rgba(84,214,164,.055); border-left:2px solid var(--jade); border-radius:0 14px 14px 0; }
.chapter-points section span { color:var(--gold); font-family:STSong,SimSun,serif; font-size:1.25rem; }
.chapter-points section p { margin:0; color:#d8e8e0; }
.chapter-nav { display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
.lesson-layout { grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.lesson-list { position:sticky; top:106px; gap:0; padding:20px 14px; border:1px solid rgba(226,205,163,.2); border-radius:4px; background:#14231e; }
.lesson-toc-label { margin:0 12px 12px; color:var(--gold); font-family:STSong,SimSun,serif; letter-spacing:.2em; }
.lesson-tab { display:grid; grid-template-columns:29px 1fr; column-gap:8px; padding:12px; border:0; border-top:1px solid var(--line); border-radius:0; color:var(--text); }
.lesson-tab span { grid-row:1/3; color:var(--gold); font-family:Georgia,serif; font-size:.87rem; }
.lesson-tab strong { font-family:STSong,SimSun,serif; font-size:1.1rem; font-weight:500; }
.lesson-tab small { grid-column:2; margin-top:0; font-size:.75rem; }
.lesson-tab.active { background:rgba(216,251,234,.12); color:var(--jade-pale); border-color:var(--line); }
.lesson-reader { max-width:960px; min-height:760px; padding:clamp(28px,5vw,76px); border:1px solid #c4b99f; border-radius:4px; color:#28382e; background:linear-gradient(90deg,rgba(93,74,45,.08),transparent 28px),linear-gradient(140deg,#f6f0df,#e9e0cb); box-shadow:0 16px 55px rgba(0,0,0,.28),inset 0 0 0 8px rgba(255,255,255,.18); }
.chapter-header { padding-bottom:24px; border-bottom:1px solid #a99e84; }
.chapter-kicker { margin:0 0 14px; color:#627360; font-size:.82rem; letter-spacing:.18em; }
.lesson-reader h3 { font-size:clamp(2.5rem,4vw,4.2rem); line-height:1.15; }
.lesson-reader .lead { margin:12px 0 0; color:#5f6b5a; font-family:STSong,SimSun,serif; font-size:1.28rem; }
.lesson-reader .chapter-index { margin:24px 0 36px; gap:16px 22px; }
.lesson-reader .chapter-pill { padding:3px 0 7px; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; color:#687567; font-family:STSong,SimSun,serif; font-size:.95rem; }
.lesson-reader .chapter-pill span { color:#a08250; margin-right:3px; }
.lesson-reader .chapter-pill.active { border-color:#466b58; color:#254836; }
.chapter-body { max-width:720px; margin:auto; }
.chapter-paragraph { margin:0 0 1.35em; font-family:STSong,SimSun,serif; font-size:clamp(1.08rem,1.65vw,1.24rem); line-height:2.05; text-indent:2em; }
.chapter-figure { width:min(100%,460px); margin:32px auto 38px; padding:10px; background:#fcf9ee; border:1px solid #d2c5a8; box-shadow:0 7px 22px rgba(54,45,27,.13); }
.chapter-figure img { display:block; width:100%; max-height:330px; object-fit:contain; background:#ebe6d9; }
.chapter-figure figcaption { padding:12px 4px 3px; color:#697365; font-size:.78rem; line-height:1.5; }
.chapter-figure figcaption span { margin-right:9px; color:#8d7046; letter-spacing:.08em; }
.chapter-figure figcaption strong { color:#374a3a; }
.chapter-figure figcaption a { color:#2d6951; text-decoration:underline; }
.chapter-figure figcaption small { display:block; margin-top:4px; font-size:.75rem; }
.chapter-sources { max-width:720px; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; margin:28px auto 0; padding:15px 0; border-top:1px solid #c7bda6; color:#6b7366; font-size:.8rem; }
.chapter-sources strong { color:#475c49; }
.chapter-sources span { width:100%; }
.chapter-sources a { color:#2c6a50; }
.chapter-quiz { margin-top:40px; padding-top:28px; border-top:2px solid #9b9b7a; }
.chapter-quiz h4 { margin:0; font-family:STSong,SimSun,serif; font-size:1.65rem; font-weight:500; }
.chapter-quiz > p:not(.chapter-kicker) { color:#657262; margin:4px 0 18px; font-size:.9rem; }
.chapter-test-status { min-height:1.5em; margin-top:12px; color:#24684d; font-size:.92rem; }
.lesson-reader .chapter-quiz .question,.lesson-reader .quiz .question { max-width:720px; }
.lesson-reader .chapter-nav { align-items:center; padding-top:22px; border-top:1px solid #b3aa92; }
.lesson-reader .chapter-nav > span { color:#6b7468; font-family:Georgia,serif; font-size:.85rem; }
.lesson-reader .ghost-btn { border-color:#3a6953; color:#2d5a44; }
.lesson-reader .primary-btn,.lesson-reader .quiz-submit { background:#2f7052; border-color:#2f7052; color:#fff; }
.lesson-reader .quiz { border-top-color:#b3aa92; }
.lesson-reader .quiz .eyebrow { color:#367653; }
.lesson-reader .quiz h4 { font-family:STSong,SimSun,serif; font-size:1.6rem; font-weight:500; margin:0; }
.lesson-reader .option { border-color:#c5bca5; }
.lesson-reader .option:has(input:checked) { background:#dbe9d6; border-color:#4c8b67; }
@media (max-width:950px) { .lesson-layout { grid-template-columns:1fr; }.lesson-list { position:static; display:flex; flex-direction:row; flex-wrap:wrap; }.lesson-toc-label { width:100%; }.lesson-tab { flex:1 1 180px; border-top:0; } }
@media (max-width:620px) { .lesson-reader { padding:26px 22px; }.lesson-list { gap:0; }.lesson-tab { flex:1 1 45%; }.lesson-reader .chapter-index { gap:8px 14px; }.chapter-figure { padding:7px; }.lesson-reader .chapter-nav > span { display:none; } }
.question { border:0; padding:0; }.question legend { font-weight:700; margin-bottom:12px; }
.museum-card:nth-child(1),.museum-card:nth-child(5) { grid-column:span 4; }
.museum-card { min-height:360px; }
.museum-label p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.shop-modes { justify-content:flex-start; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:20px; }
.shop-rate { margin-left:auto; font-size:.88rem; }
.shop-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.product-card { display:block; width:100%; padding:0; color:var(--text); text-align:left; cursor:pointer; transition:transform .2s,border-color .2s; }
.product-card:hover { transform:translateY(-3px); border-color:rgba(84,214,164,.55); }
.shop-visual { height:225px; }
.shop-body h3 { font-size:1.12rem; min-height:2.2em; }
.product-claim { color:var(--muted); font-size:.9rem; margin:5px 0; }
.price-row { gap:10px; align-items:end; }
.price small { display:block; color:var(--muted); font-weight:400; font-size:.8rem; }
.enter-detail { color:var(--jade); white-space:nowrap; font-size:.88rem; }
dialog:has(.product-detail) { width:min(1080px,calc(100% - 24px)); }
.product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; }
.product-detail h2 { font-family:STSong,SimSun,serif; font-size:clamp(2.1rem,4vw,3.3rem); margin:5px 0 14px; }
.product-detail h3 { margin-bottom:8px; }
.product-detail > div:first-child small { display:block; color:var(--muted); margin-top:8px; }
.product-hero-image { display:block; width:100%; max-height:550px; object-fit:contain; border-radius:18px; background:#162d25; }
.detail-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:22px 0; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-price strong { color:var(--gold); font-size:1.6rem; }.detail-price small { margin-left:auto; color:var(--muted); }
.detail-clues { padding-left:21px; color:#d3e6dc; }.detail-clues li { margin:6px 0; }
.product-buy { margin-top:15px; }
.reveal-panel { border:1px solid rgba(84,214,164,.3); background:rgba(84,214,164,.055); padding:16px; border-radius:16px; }
.value-pair { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.value-pair > div { min-width:140px; flex:1; border:1px solid var(--line); border-radius:14px; padding:10px 13px; }
.value-pair small { display:block; color:var(--muted); }.value-pair strong { display:block; font-size:1.2rem; }
#confirm-modal { width:min(480px,calc(100% - 24px)); }.confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.collection-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }.collection-summary > div { border:1px solid var(--line); border-radius:16px; padding:18px; background:var(--ink-2); }.collection-summary small { color:var(--muted); display:block; }.collection-summary strong { display:block; font-size:1.35rem; color:var(--gold); }
.collection-list { display:grid; grid-template-columns:280px minmax(0,1fr); gap:18px; }.collection-items { display:flex; flex-direction:column; gap:8px; }.collection-tile { width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:9px; border:1px solid var(--line); border-radius:14px; background:var(--ink-2); cursor:pointer; }.collection-tile.active { border-color:var(--jade); }.collection-tile img { width:64px; height:64px; object-fit:cover; border-radius:8px; }.collection-tile strong,.collection-tile small { display:block; }.collection-tile small { color:var(--muted); font-size:.78rem; }
.owned-detail { display:grid; grid-template-columns:minmax(180px,.75fr) 1.25fr; gap:22px; border:1px solid var(--line); border-radius:20px; background:var(--ink-2); overflow:hidden; padding:18px; }.owned-detail > img { width:100%; height:100%; min-height:300px; object-fit:cover; border-radius:12px; }.owned-detail h3 { font-size:1.6rem; margin:4px 0; }.owned-detail h4 { color:var(--jade); margin:15px 0 0; }.owned-detail p { color:var(--muted); }
.collection-empty { grid-column:2; padding:32px; border:1px dashed var(--line); border-radius:20px; }.sale-history { grid-column:1/-1; margin-top:10px; border-top:1px solid var(--line); }.sale-history p { color:var(--muted); margin:8px 0; }
@media (max-width:1100px) { .shop-grid { grid-template-columns:repeat(3,1fr); }.collection-list { grid-template-columns:230px minmax(0,1fr); }.owned-detail { grid-template-columns:1fr; }.owned-detail > img { height:260px; min-height:0; } }
@media (max-width:950px) { .museum-card:nth-child(1),.museum-card:nth-child(5) { grid-column:span 6; }.shop-grid { grid-template-columns:repeat(2,1fr); }}
@media (max-width:620px) { .path-grid { grid-template-columns:1fr; }.museum-card:nth-child(1),.museum-card:nth-child(5) { grid-column:1/-1; }.shop-grid { grid-template-columns:1fr; }.shop-rate { width:100%; margin-left:0; }.product-detail { grid-template-columns:1fr; }.product-hero-image { max-height:260px; }.collection-summary { grid-template-columns:1fr 1fr; }.collection-list { grid-template-columns:1fr; }.collection-items { max-height:250px; overflow:auto; }.collection-empty { grid-column:1; }.owned-detail { grid-template-columns:1fr; }}

/* 玉友圈沿用琢玉局深色玉石主题，照片是内容而不是装饰。 */
.community-heading { align-items:center; }
.community-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.community-heading-actions .primary-btn { flex:none; }
.community-account-name { color:var(--jade-pale); font-weight:700; }
.community-logout { border:0; background:none; color:var(--muted); cursor:pointer; font-size:.85rem; }
.community-stream { width:min(100%,920px); margin:0 auto; }
#community-compose-dialog,#community-auth-dialog { width:min(620px,calc(100% - 24px)); max-height:min(88vh,900px); padding:clamp(20px,4vw,32px); }
#community-auth-dialog { width:min(430px,calc(100% - 24px)); }
#community-compose-dialog .modal-close,#community-auth-dialog .modal-close { color:var(--muted); }
.community-compose { display:grid; gap:14px; }
.community-compose h2 { font-family:STSong,SimSun,serif; font-size:2rem; font-weight:500; margin:0 36px 4px 0; }
.community-posting-as { margin:-8px 0 0; color:var(--muted); font-size:.9rem; }
#community-auth-dialog h2 { font-family:STSong,SimSun,serif; font-size:2rem; font-weight:500; margin:0 30px 16px 0; }
.community-auth-tabs { display:flex; gap:8px; margin-bottom:18px; }
.community-auth-tabs button { flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.community-auth-tabs button.active { border-color:var(--jade); background:rgba(84,214,164,.13); color:var(--jade-pale); }
#community-auth-form { display:grid; gap:14px; }
#community-auth-form label { display:grid; gap:6px; color:#d9e6df; font-size:.92rem; }
#community-auth-form input { width:100%; border:1px solid var(--line); border-radius:11px; background:#071410; color:var(--text); padding:11px 12px; }
.community-auth-note { margin:0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.community-login-prompt { border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--jade-pale); padding:9px 14px; cursor:pointer; }
.community-compose label { display:grid; gap:7px; color:#d9e6df; font-size:.92rem; }
.community-compose input:not([type=file]),.community-compose textarea,.community-comment-form input { width:100%; min-width:0; border:1px solid var(--line); border-radius:11px; background:#071410; color:var(--text); padding:11px 12px; font:inherit; }
.community-compose textarea { min-height:106px; resize:vertical; }
.community-photo-picker { border:1px dashed rgba(84,214,164,.42); border-radius:14px; padding:15px; cursor:pointer; }
.community-photo-picker input { width:100%; color:var(--muted); font:inherit; }
.community-photo-picker input::file-selector-button { margin-right:8px; border:1px solid var(--jade); border-radius:999px; padding:7px 13px; color:var(--ink); background:var(--jade); cursor:pointer; }
.community-photo-picker span,.community-guidance,.community-form-status { color:var(--muted); font-size:.86rem; }
.community-guidance { margin:0; line-height:1.55; }
.community-compose .community-consent { display:flex; align-items:flex-start; gap:8px; line-height:1.5; font-size:.87rem; color:var(--muted); }
.community-consent input { margin-top:4px; accent-color:var(--jade); }
.community-form-status { min-height:1.3em; color:var(--jade-pale); }
.community-previews { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.community-previews img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.community-stream-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.community-stream-head p { margin:0; color:var(--muted); }
.community-stream-head .ghost-btn { padding:9px 15px; white-space:nowrap; }
.community-live { min-height:1.4em; margin-top:12px; color:var(--jade-pale); }
.community-feed { display:grid; gap:18px; }
.community-post { border:1px solid var(--line); border-radius:24px; background:var(--ink-2); overflow:hidden; padding:24px; }
.community-post-head { display:flex; align-items:center; gap:12px; }
.community-avatar { width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(84,214,164,.18); color:var(--jade); font-weight:700; }
.community-post-head strong,.community-post-head small { display:block; }
.community-post-head small { color:var(--muted); font-size:.8rem; }
.community-delete { margin-left:auto; border:0; background:none; color:var(--muted); font:inherit; font-size:.82rem; cursor:pointer; }
.community-delete:hover { color:var(--danger); }
.community-post h4 { font-size:1.35rem; margin:18px 0 8px; }
.community-story { margin:0 0 16px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; color:#d7e7de; }
.community-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; border-radius:14px; overflow:hidden; }
.community-photos.single { grid-template-columns:1fr; }
.community-photos img { width:100%; height:250px; object-fit:cover; background:#142b23; }
.community-photos.single img { height:auto; max-height:570px; object-fit:contain; }
.community-post-actions { display:flex; align-items:center; gap:20px; margin:18px 0 12px; color:var(--muted); }
.community-like { border:0; background:none; color:var(--text); font:inherit; cursor:pointer; padding:4px 0; }
.community-like.active { color:#ff9cac; }
.community-like:disabled,.community-comment-form button:disabled { opacity:.6; cursor:wait; }
.community-comments { border-top:1px solid var(--line); padding-top:10px; }
.community-comment { margin:9px 0; color:#d5e6dc; overflow-wrap:anywhere; }
.community-comment strong { color:var(--jade-pale); margin-right:5px; }
.community-comment small { color:var(--muted); margin-left:6px; font-size:.78rem; }
.community-no-comments { color:var(--muted); font-size:.9rem; }
.community-comment-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:14px; }
.community-comment-form input { padding:9px 10px; font-size:.9rem; }
.community-comment-form button { border:1px solid var(--jade); border-radius:10px; background:var(--jade); color:var(--ink); font-weight:700; padding:8px 14px; cursor:pointer; }
.community-empty { border:1px dashed var(--line); border-radius:20px; padding:38px 24px; color:var(--muted); text-align:center; }
.community-empty h4 { color:var(--text); font-size:1.3rem; margin:0 0 8px; }
.community-more { justify-self:center; }
@media (max-width:620px) { .community-heading { flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; }.community-heading h2 { font-size:2.5rem; }.community-heading-actions { width:100%; justify-content:flex-end; }.community-heading-actions .primary-btn { padding:10px 16px; }.community-stream-head { align-items:flex-start; }.community-stream-head p { flex:1; font-size:.9rem; }.community-post { padding:16px; }.community-photos img { height:180px; }.community-comment-form { grid-template-columns:minmax(0,1fr) auto; } }

/* Daily jade draw and original five-virtue questionnaire */
.fortune-layout { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); gap:clamp(20px,4vw,56px); align-items:stretch; }
.fortune-stage { --fortune-accent:#96e8c0; --fortune-deep:#235d47; position:relative; min-height:600px; padding:26px; border:1px solid rgba(147,225,186,.23); border-radius:28px; background:radial-gradient(circle at 50% 34%,rgba(88,176,128,.16),transparent 45%),linear-gradient(140deg,#10231e,#091512 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.fortune-stage::before,.fortune-stage::after { content:""; position:absolute; top:45%; left:50%; width:370px; height:370px; border:1px solid rgba(181,240,206,.1); border-radius:50%; pointer-events:none; }
.fortune-stage::before { transform:translate(-50%,-50%) scale(.95); }.fortune-stage::after { transform:translate(-50%,-50%) scale(1.37); }
.fortune-stage[data-tone="steady"] { --fortune-accent:#d9c899; --fortune-deep:#4b4834; }
.fortune-stage[data-tone="caution"] { --fortune-accent:#e9a99c; --fortune-deep:#643d3f; }
.fortune-date { position:relative; z-index:1; margin:0 0 22px; color:var(--gold); letter-spacing:.12em; font-size:.9rem; }
.fortune-card { position:relative; z-index:1; width:min(295px,82vw); aspect-ratio:3/4; perspective:1200px; filter:drop-shadow(0 24px 34px rgba(0,0,0,.4)); }
.fortune-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.1s cubic-bezier(.2,.8,.18,1); }
.fortune-stage.is-revealed .fortune-card-inner { transform:rotateY(180deg); }
.fortune-card-back,.fortune-card-front { position:absolute; inset:0; backface-visibility:hidden; border:1px solid rgba(212,250,227,.48); border-radius:24px; box-shadow:inset 0 0 0 7px rgba(4,20,14,.23),inset 0 0 0 8px rgba(221,252,230,.2); }
.fortune-card-back { background:radial-gradient(circle at 50% 30%,#306f55 0,#174536 45%,#0b241c 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; color:#e4ffed; letter-spacing:.2em; }
.fortune-seal { display:grid; place-items:center; width:154px; height:154px; border:17px solid rgba(224,255,231,.78); border-radius:50%; font-family:STSong,SimSun,serif; font-size:2.4rem; text-indent:.2em; box-shadow:0 0 0 2px rgba(233,255,237,.24),0 0 45px rgba(134,236,175,.24); }
.fortune-card-back > span:last-child { font-size:.8rem; }
.fortune-card-front { transform:rotateY(180deg); background:radial-gradient(circle at 52% 41%,var(--fortune-deep),#10211b 65%,#0a1713); color:#f5fff8; display:flex; flex-direction:column; align-items:center; padding:27px 20px 19px; }
.fortune-card-domain { color:var(--fortune-accent); font-size:.78rem; letter-spacing:.1em; }
.fortune-gem { position:relative; display:grid; place-items:center; width:175px; height:175px; margin:20px 0 13px; border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.85),transparent 22%),radial-gradient(circle at 68% 75%,rgba(9,44,31,.7),transparent 42%),linear-gradient(130deg,#d8f4dc,var(--fortune-accent) 42%,var(--fortune-deep)); box-shadow:inset -16px -19px 30px rgba(5,25,16,.46),inset 12px 10px 26px rgba(255,255,255,.2),0 18px 32px rgba(0,0,0,.25); transform:rotate(-8deg); }
.fortune-gem i { font-family:STSong,SimSun,serif; font-size:3rem; font-style:normal; color:#0e2a20; text-shadow:0 1px 1px rgba(255,255,255,.35); transform:rotate(8deg); }
.fortune-stage[data-tone="caution"] .fortune-gem::after { content:""; display:block; position:absolute; width:75px; height:1px; background:rgba(31,42,36,.45); transform:rotate(-28deg) translate(8px,24px); box-shadow:12px 7px 0 rgba(31,42,36,.25); }
.fortune-card-material { color:var(--fortune-accent); font-size:.8rem; letter-spacing:.12em; }
.fortune-card-front strong { margin-top:3px; font-family:STSong,SimSun,serif; font-size:1.7rem; font-weight:500; }
.fortune-card-footer { margin-top:auto; color:rgba(236,255,242,.56); font-size:.72rem; letter-spacing:.13em; }
.fortune-stage.is-shuffling .fortune-card { animation:jade-shuffle 1.35s cubic-bezier(.4,0,.25,1) both; }
.fortune-stage.is-shuffling .fortune-card-back { animation:jade-glow 1.35s ease-in-out both; }
@keyframes jade-shuffle { 0%{transform:translateY(0) rotate(0)} 22%{transform:translateY(-20px) rotate(-5deg)} 45%{transform:translateY(-34px) rotate(5deg)} 65%{transform:translateY(-22px) rotate(-3deg)} 84%{transform:translateY(-38px) rotate(2deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes jade-glow { 0%,100%{filter:brightness(1)} 48%{filter:brightness(1.6)} }
.fortune-draw { position:relative; z-index:1; margin-top:27px; min-width:220px; }
.fortune-reset-note { position:relative; z-index:1; max-width:370px; margin:14px 0 0; color:var(--muted); font-size:.82rem; }
.fortune-reading { min-height:600px; padding:clamp(28px,5vw,58px); border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,rgba(28,61,46,.66),rgba(10,24,20,.95)); display:flex; flex-direction:column; justify-content:center; }
.fortune-reading h3 { font-family:STSong,SimSun,serif; font-size:clamp(2.2rem,4vw,4rem); line-height:1.12; font-weight:500; margin:10px 0 25px; }
.fortune-photo { margin:0 0 17px; }.fortune-photo img { display:block; width:100%; aspect-ratio:16/9; max-height:285px; object-fit:contain; border:1px solid rgba(221,247,228,.12); border-radius:15px; background:#071310; }.fortune-photo figcaption { margin-top:9px; color:var(--muted); font-size:.8rem; line-height:1.55; }.fortune-photo a { color:var(--jade); text-underline-offset:3px; }
.fortune-reading > p:not(.eyebrow):not(.fortune-reading-label):not(.fortune-disclaimer) { font-size:1.08rem; line-height:1.9; color:#d9ebe0; }
.fortune-reading-label { margin:0; color:var(--gold); letter-spacing:.12em; }
.fortune-action { margin-top:22px; padding:19px 22px; border-left:3px solid var(--jade); background:rgba(84,214,164,.075); }
.fortune-action span { display:block; color:var(--jade); font-size:.83rem; letter-spacing:.08em; }
.fortune-action strong { display:block; margin-top:6px; font-weight:500; line-height:1.6; }
.fortune-disclaimer { margin-top:22px; color:var(--muted); font-size:.82rem; }
.play-sources { margin-top:26px; padding:18px 22px; border:1px solid var(--line); border-radius:16px; color:var(--muted); font-size:.85rem; line-height:1.65; }
.play-sources strong { color:var(--jade-pale); margin-right:14px; }.play-sources a { color:var(--jade); margin-right:18px; text-underline-offset:3px; }.play-sources p { margin:9px 0 0; }
.personality-shell { min-height:480px; scroll-margin-top:135px; }
.personality-intro,.personality-quiz,.personality-result { border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,#112720,#0b1915); padding:clamp(24px,4vw,48px); }
.personality-intro { display:grid; grid-template-columns:minmax(200px,.72fr) minmax(0,1.28fr); gap:clamp(25px,5vw,80px); align-items:center; min-height:500px; }
.personality-intro h3,.personality-result h3 { font-family:STSong,SimSun,serif; font-size:clamp(2.2rem,4vw,4rem); font-weight:500; line-height:1.15; margin:8px 0 22px; }
.personality-intro p:not(.eyebrow),.result-overview p { color:#d4e7da; line-height:1.8; }
.personality-note,.result-overview .personality-note { color:var(--muted)!important; font-size:.9rem; }
.personality-intro .primary-btn { margin-top:14px; }
.virtue-crest { width:min(100%,310px); aspect-ratio:1; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; transform:rotate(-8deg); }
.virtue-crest span { display:grid; place-items:center; border:1px solid rgba(193,242,212,.4); border-radius:20px 34px 20px 32px; background:linear-gradient(135deg,rgba(155,229,188,.55),rgba(22,77,54,.45)); color:#ecfff4; font-family:STSong,SimSun,serif; font-size:clamp(2rem,4vw,3.3rem); box-shadow:inset 3px 4px 16px rgba(255,255,255,.12),0 12px 25px rgba(0,0,0,.16); }
.virtue-crest span:nth-child(1) { grid-column:2; }.virtue-crest span:nth-child(2) { grid-column:1; }.virtue-crest span:nth-child(3) { grid-column:2; }.virtue-crest span:nth-child(4) { grid-column:3; }.virtue-crest span:nth-child(5) { grid-column:2; }
.personality-progress { display:flex; align-items:end; justify-content:space-between; gap:18px; }.personality-progress .eyebrow { margin:0 0 4px; }.personality-progress strong { color:var(--jade-pale); font-size:1.1rem; }
.personality-progress-track { width:min(360px,45%); height:7px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }.personality-progress-track i { display:block; height:100%; background:var(--jade); border-radius:inherit; transition:width .25s; }
.personality-scale-note { color:var(--muted); margin:14px 0 24px; }
.personality-question-list { display:grid; gap:15px; }.personality-question { min-width:0; margin:0; padding:19px 21px 20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.personality-question legend { float:left; width:100%; margin-bottom:14px; font-weight:600; line-height:1.55; }.personality-question legend span { color:var(--gold); font-weight:500; margin-right:12px; }.personality-question legend + * { clear:both; }
.personality-scale { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; width:100%; }.personality-scale label { cursor:pointer; min-width:0; }.personality-scale input { position:absolute; opacity:0; width:1px; height:1px; }.personality-scale label span { display:grid; place-items:center; min-height:48px; height:100%; padding:7px 5px; border:1px solid rgba(181,231,205,.23); border-radius:11px; color:#d3e7da; text-align:center; font-size:.86rem; line-height:1.3; transition:background .15s,border-color .15s; }
.personality-scale label:hover span,.personality-scale label:has(input:checked) span { border-color:var(--jade); background:rgba(84,214,164,.16); color:#effff5; }.personality-scale input:focus-visible + span { outline:3px solid var(--gold); outline-offset:2px; }
.personality-controls { display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
.result-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.8fr); gap:24px; align-items:center; }.result-title { color:var(--gold)!important; font-size:1.25rem; margin:-6px 0 20px; }.result-overview .ghost-btn { margin-top:10px; }
.result-radar { display:grid; place-items:center; }.personality-radar { width:min(100%,430px); height:auto; overflow:visible; }.radar-grid polygon,.radar-grid line { fill:none; stroke:rgba(186,227,205,.21); stroke-width:1; }.radar-shape { fill:rgba(84,214,164,.2); stroke:#83e5b8; stroke-width:3; transform-origin:180px 175px; animation:radar-grow .7s ease-out both; }.personality-radar text { fill:var(--jade-pale); font:700 17px "Microsoft YaHei",sans-serif; }.personality-radar circle { stroke:#092018; stroke-width:2; }
@keyframes radar-grow { from { transform:scale(.15); opacity:0; } to { transform:scale(1); opacity:1; } }
.virtue-score-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; margin-top:32px; }.virtue-score { padding:16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }.virtue-score > div:first-child { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; }.virtue-score strong { font-family:STSong,SimSun,serif; font-size:1.4rem; }.virtue-score span { color:var(--muted); font-size:.8rem; }.virtue-score b { color:var(--jade-pale); }.virtue-score-track { height:5px; background:rgba(255,255,255,.11); border-radius:99px; overflow:hidden; margin-top:12px; }.virtue-score-track i { display:block; height:100%; border-radius:inherit; }
.result-footnote { color:var(--muted); font-size:.86rem; margin:22px 0 0; }
@media (max-width:950px) { .fortune-layout,.personality-intro,.result-overview { grid-template-columns:1fr; }.fortune-stage,.fortune-reading { min-height:auto; }.fortune-stage { padding:34px 18px; }.fortune-reading { padding:30px; }.virtue-score-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px) { .fortune-card { width:min(275px,80vw); }.fortune-stage { min-height:510px; }.personality-question { padding:15px 12px; }.personality-scale { gap:4px; }.personality-scale label span { min-height:56px; padding:5px 2px; font-size:.76rem; }.personality-progress { align-items:start; flex-direction:column; }.personality-progress-track { width:100%; }.personality-controls .primary-btn,.personality-controls .ghost-btn { padding:11px 14px; }.virtue-score-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.virtue-score > div:first-child { grid-template-columns:auto 1fr; }.virtue-score b { grid-column:2; }.play-sources a { display:inline-block; margin-top:5px; } }
@media (max-width:620px) {
  .topbar { min-height:64px; grid-template-columns:auto 1fr auto auto; gap:8px; padding:10px 16px; }
  .brand { grid-column:1; font-size:1.22rem; gap:8px; }
  .brand-mark { width:24px; height:24px; border-width:6px; }
  .wallet { grid-column:3; padding:5px 11px; min-width:38px; justify-content:center; }
  .wallet strong { font-size:1rem; }
  .mobile-menu-toggle { grid-column:4; display:flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:10px; background:var(--ink-2); padding:7px 10px; color:var(--jade-pale); font-size:.85rem; font-weight:700; cursor:pointer; }
  .mobile-menu-toggle span { font-size:1.1rem; line-height:1; }
  .main-nav { display:none; position:absolute; left:8px; right:8px; top:calc(100% - 1px); grid-column:auto; grid-row:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:min(65dvh,520px); overflow-y:auto; padding:12px; border:1px solid var(--line); border-radius:0 0 16px 16px; background:#10231f; box-shadow:0 22px 40px rgba(0,0,0,.5); }
  .topbar.nav-open .main-nav { display:grid; }
  .main-nav .nav-btn { display:block; width:100%; padding:11px 12px; border-radius:10px; text-align:left; }
  main { padding:22px 16px 64px; }
  .section-heading { gap:12px; margin-bottom:20px; }
  .section-heading h2 { font-size:clamp(2rem,9vw,2.5rem); line-height:1.13; }
  .section-heading > p { font-size:.91rem; line-height:1.6; }
  .hero-grid { gap:22px; }
  .hero-copy h1 { font-size:clamp(3.1rem,14vw,4rem); margin:10px 0 22px; }
  .hero-intro { font-size:.96rem; }
  .hero-actions { margin-top:24px; gap:8px; }
  .hero-actions .primary-btn,.hero-actions .ghost-btn { padding:11px 15px; }
  .progress-card { min-height:230px; padding:24px; border-radius:22px; }
  .jade-orbit { width:150px; height:150px; right:16px; top:14px; }
  .jade-orbit span { transform:translateY(-75px); }
  .progress-card > strong { font-size:3rem; }
  .category-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:14px -16px 20px; padding:0 16px 8px; scroll-snap-type:x proximity; }
  .category-tabs::-webkit-scrollbar,.lesson-list::-webkit-scrollbar { display:none; }
  .category-tabs button { flex:0 0 auto; scroll-snap-align:start; }
  .lesson-layout { gap:14px; }
  .lesson-list { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:6px; border-radius:12px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .lesson-toc-label { display:none; }
  .lesson-tab { flex:0 0 148px; padding:9px; border:0; border-radius:9px; scroll-snap-align:start; }
  .lesson-tab strong { font-size:.98rem; }
  .lesson-tab small { font-size:.68rem; line-height:1.4; }
  .lesson-reader { padding:24px 18px; min-height:0; }
  .lesson-reader h3 { font-size:2.35rem; }
  .lesson-reader .chapter-index { margin:18px 0 26px; }
  .museum-card,.museum-card:nth-child(1),.museum-card:nth-child(5) { min-height:325px; border-radius:17px; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .shop-visual { height:150px; }
  .shop-card { border-radius:14px; }
  .shop-body { padding:10px; }
  .shop-meta { font-size:.7rem; line-height:1.4; }
  .shop-body h3 { font-size:.94rem; line-height:1.35; min-height:2.7em; }
  .product-claim { font-size:.78rem; line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.8em; }
  .price-row { display:block; margin-top:9px; }
  .price { font-size:.95rem; }
  .price small { display:none; }
  .enter-detail { display:block; margin-top:4px; font-size:.76rem; }
  .shop-modes { padding-top:4px; }
  .shop-rate { font-size:.78rem; }
  .community-heading-actions { justify-content:flex-start; gap:7px; }
  .community-heading-actions .primary-btn,.community-heading-actions .ghost-btn { padding:9px 13px; font-size:.88rem; }
  .community-stream-head { gap:8px; }
  .community-stream-head .ghost-btn { padding:8px 12px; font-size:.82rem; }
  dialog,dialog:has(.product-detail),#community-compose-dialog,#community-auth-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 20px); padding:20px 16px; border-radius:16px; }
  .product-detail { gap:14px; }
  .product-hero-image { max-height:220px; }
  .personality-intro,.personality-quiz,.personality-result { padding:20px 14px; border-radius:18px; }
  .personality-intro { min-height:0; }
  .personality-scale label span { font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce) { .fortune-card-inner,.fortune-stage.is-shuffling .fortune-card,.fortune-stage.is-shuffling .fortune-card-back,.radar-shape { animation:none!important; transition:none!important; } }