:root {
  --ink: #17231f;
  --ink-soft: #3f4d47;
  --paper: #f4f0e6;
  --paper-deep: #e7dfcf;
  --jade: #295e53;
  --jade-light: #5e8c7c;
  --gold: #b28a4c;
  --cinnabar: #a64e3f;
  --line: rgba(26, 45, 38, 0.14);
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --host-nav-offset: 72px;
  color-scheme: light;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  touch-action: manipulation;
  background: #0f1916;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(80, 121, 102, 0.26), transparent 34%),
    #0f1916;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button, input, select, textarea {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  transform: translateY(1px);
  opacity: 0.82;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

#app {
  position: relative;
  width: min(100%, 680px);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.34);
}

.page-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(rgba(255,255,255,0.36), rgba(255,255,255,0)),
    radial-gradient(circle at 95% 6%, rgba(163, 126, 72, 0.08), transparent 23%),
    var(--paper);
}

.home {
  padding: calc(var(--safe-top) + 64px) 16px calc(var(--safe-bottom) + 118px);
}

.home-panel-hero {
  position: relative;
  min-height: 164px;
  padding: 24px 20px;
  overflow: hidden;
  border-radius: 25px;
  color: #f4efe3;
  background: linear-gradient(145deg, #3e6658, #152f28);
  box-shadow: 0 18px 40px rgba(23,52,43,.18);
}

.home-panel-hero.culture { background: linear-gradient(145deg, #8a6c43, #4a3a28); }
.home-panel-hero span { color: rgba(244,239,227,.58); font-size: 10px; letter-spacing: .18em; }
.home-panel-hero h1 { margin-top: 27px; font-family: "Songti SC", STSong, serif; font-size: 31px; font-weight: 500; letter-spacing: .12em; }
.home-panel-hero p { margin-top: 10px; color: rgba(244,239,227,.68); font-size: 11px; line-height: 1.7; }

.home-empty {
  margin-top: 28px;
  padding: 44px 24px;
  border: 1px dashed rgba(41,94,83,.24);
  border-radius: 22px;
  text-align: center;
  background: rgba(255,255,255,.34);
}

.home-empty > span { display: grid; width: 48px; height: 48px; margin: 0 auto 15px; place-items: center; border: 1px solid #a78352; color: #956e3e; font-family: "Songti SC", STSong, serif; font-size: 18px; }
.home-empty h2 { font-family: "Songti SC", STSong, serif; font-size: 19px; }
.home-empty p { margin-top: 9px; color: #7b867f; font-size: 10px; line-height: 1.7; }
.home-empty button { min-height: 42px; margin-top: 18px; padding: 0 22px; border-radius: 999px; color: #fff; background: var(--jade); font-size: 11px; }

.home-tabbar {
  position: absolute;
  z-index: 35;
  left: 10px;
  right: 10px;
  bottom: calc(var(--safe-bottom) + 8px);
  display: grid;
  min-height: 72px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 22px;
  background: rgba(244,240,230,.94);
  box-shadow: 0 10px 32px rgba(18,39,32,.2);
  backdrop-filter: blur(18px);
}

.home-tabbar button {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0,auto);
  gap: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #76827b;
  background: transparent;
}

.home-tabbar button > span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgba(71,91,82,.24); border-radius: 8px; font-family: "Songti SC", STSong, serif; font-size: 10px; }
.home-tabbar button > strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.home-tabbar button.active { color: #f6f0e4; background: var(--jade); box-shadow: 0 6px 14px rgba(41,94,83,.22); }
.home-tabbar button.active > span { border-color: rgba(255,255,255,.38); }

.hero {
  position: relative;
  min-height: 180px;
  padding: 22px 18px 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  color: #f4efe3;
  background:
    linear-gradient(145deg, rgba(27, 55, 47, 0.78), rgba(9, 25, 22, 0.98)),
    #142923;
  box-shadow: 0 18px 44px rgba(20, 38, 32, 0.2);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero::before {
  right: -44px;
  bottom: -20px;
  width: 230px;
  height: 145px;
  border-radius: 55% 0 0 0;
  opacity: 0.55;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 38%, rgba(155, 186, 161, 0.26) 39%, transparent 43%),
    linear-gradient(150deg, transparent 30%, rgba(120, 157, 136, 0.38) 31%, rgba(44, 84, 71, 0.78) 69%);
  transform: rotate(-6deg);
}

.hero::after {
  top: 23px;
  right: 36px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(229, 216, 177, 0.84);
  box-shadow: 0 0 34px rgba(236, 221, 175, 0.3);
}

.hero-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(244, 239, 227, 0.62);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.hero-mark::before {
  content: "卷";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(220, 186, 119, 0.56);
  color: #d7bb7c;
  font-family: "Songti SC", STSong, serif;
  letter-spacing: 0;
}

.hero h1 {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-family: "Songti SC", STSong, serif;
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.hero p {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: rgba(244, 239, 227, 0.72);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.hero-diy {
  display: block;
  width: 100%;
  min-height: 238px;
  text-align: left;
}

.hero-diy-cta {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(82%, 330px);
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid rgba(232,218,178,.2);
}

.hero-diy-cta > span { color: #c9ac71; font-size: 9px; letter-spacing: .2em; }
.hero-diy-cta > strong { display: flex; margin-top: 9px; align-items: center; gap: 9px; font-family: "Songti SC", STSong, serif; font-size: 16px; font-weight: 500; letter-spacing: .08em; }
.hero-diy-cta > small { margin-top: 7px; color: rgba(244,239,227,.56); font-size: 9px; letter-spacing: .04em; }
.hero-plus { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(245,229,188,.78); border-radius: 50%; color: #173d33; background: #ddc487; box-shadow: 0 5px 15px rgba(5,20,16,.28); font: 25px/1 Georgia, serif; }
.hero-tap-hint { width: max-content; margin-top: 8px; padding: 5px 10px; border-radius: 999px; color: #ead9ae; background: rgba(255,255,255,.09); font-size: 9px; font-style: normal; letter-spacing: .08em; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 30px 2px 14px;
}

.section-heading h2 {
  font-family: "Songti SC", STSong, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section-heading p {
  margin-top: 5px;
  color: #758078;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.section-count {
  color: #8e7c5d;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.preset-grid,
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.preset-card,
.collection-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,0.62);
  box-shadow: 0 8px 20px rgba(48, 58, 49, 0.08);
}

.art-thumb {
  position: relative;
  height: 145px;
  overflow: hidden;
  isolation: isolate;
  background: #1a201d;
}

.thumb-wash {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .08;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(12,20,17,.16));
}

.sound-help-link {
  display: block;
  margin: 4px 0 4px auto;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: #536f63;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.player .sound-help-link { color: #e4ddc6; margin-bottom: 0; }
.sound-notice[hidden] { display: none; }
.sound-notice {
  position: fixed;
  z-index: 110;
  top: calc(var(--safe-top) + var(--host-nav-offset) + 124px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 32px));
  padding: 18px 42px 16px 18px;
  border: 1px solid rgba(151, 135, 92, .45);
  border-radius: 16px;
  background: #f8f4e9;
  color: #243d33;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  font-size: 14px;
  line-height: 1.7;
  max-height: calc(100% - var(--safe-top) - var(--host-nav-offset) - var(--safe-bottom) - 148px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sound-notice p { margin: 5px 0 0; }
.sound-notice ol { margin: 12px 0 0; padding-left: 20px; }
.sound-notice li + li { margin-top: 8px; }
.sound-notice-close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}
.preset-number {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 11px;
  color: rgba(255,255,255,0.74);
  font-family: Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.preset-body,
.collection-body {
  padding: 12px;
}

.preset-body h3,
.collection-body h3 {
  overflow: hidden;
  font-family: "Songti SC", STSong, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painting-name,
.instrument-line {
  overflow: hidden;
  color: #67736c;
  font-size: 10px;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painting-name { margin-top: 5px; }
.instrument-line { margin-top: 4px; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.tag {
  padding: 3px 6px;
  border-radius: 999px;
  color: #50665d;
  background: rgba(68, 107, 89, 0.08);
  font-size: 8px;
}

.preset-line {
  min-height: 38px;
  margin-top: 9px;
  color: #59645e;
  font-family: "Songti SC", STSong, serif;
  font-size: 10px;
  line-height: 1.7;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.btn-card,
.btn-pill,
.btn-primary,
.btn-ghost,
.btn-icon {
  min-height: 40px;
  border-radius: 12px;
}

.btn-card {
  color: var(--ink-soft);
  background: #e9e4d8;
  font-size: 11px;
}

.btn-card.primary {
  color: #f7f3e8;
  background: var(--jade);
}

.diy-entry {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 152px;
  margin-top: 28px;
  padding: 24px 22px;
  overflow: hidden;
  border-radius: 24px;
  color: #f4efe3;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(26, 67, 56, 0.94), rgba(12, 35, 30, 0.98)),
    #173f35;
  box-shadow: 0 18px 34px rgba(22, 55, 45, 0.2);
}

.diy-entry::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 9px;
  color: rgba(221, 196, 137, 0.24);
  font-family: Georgia, serif;
  font-size: 110px;
  font-weight: 200;
  line-height: 1;
}

.diy-entry span,
.diy-entry strong,
.diy-entry small { position: relative; z-index: 1; }
.diy-entry span { color: #c9ac71; font-size: 10px; letter-spacing: .18em; }
.diy-entry strong { align-self: end; font-family: "Songti SC", STSong, serif; font-size: 21px; font-weight: 500; letter-spacing: .08em; }
.diy-entry small { margin-top: 8px; color: rgba(244,239,227,.62); font-size: 11px; }

.collection-time {
  margin-top: 9px;
  color: #9a8b70;
  font-size: 9px;
}

.culture-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.42);
}

.culture-card button {
  display: flex;
  min-height: 86px;
  padding: 14px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 15px;
  color: #f4efe3;
  background: linear-gradient(150deg, #476b5e, #1d3730);
}

.culture-browser { margin-top: 16px; }

.culture-tabs {
  position: sticky;
  z-index: 31;
  top: calc(var(--safe-top) + var(--host-nav-offset));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(244,240,230,.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(44,54,48,.06);
}

.culture-tabs button {
  display: grid;
  min-width: 0;
  min-height: 67px;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 0 12px;
  border-radius: 15px;
  color: #6f796f;
  text-align: left;
  background: rgba(225,218,203,.56);
}

.culture-tabs button > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid currentColor; border-radius: 9px; font-family: "Songti SC", STSong, serif; font-size: 12px; }
.culture-tabs button > strong { overflow: hidden; font-family: "Songti SC", STSong, serif; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.culture-tabs button > small { color: inherit; font-size: 9px; opacity: .66; white-space: nowrap; }
.culture-tabs button.active { color: #f6f0e5; background: linear-gradient(145deg, #42695c, #1e3c33); box-shadow: 0 7px 16px rgba(35,69,58,.18); }
.culture-tabs button:nth-child(2).active { background: linear-gradient(145deg, #8a6c43, #5a4228); }

.culture-direct-content { margin-top: 19px; }

.culture-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 2px;
}

.culture-catalog-head h2 { font-family: "Songti SC", STSong, serif; font-size: 20px; letter-spacing: .08em; }
.culture-catalog-head p { margin-top: 5px; color: #7c867f; font-size: 10px; }
.culture-catalog-head > span { color: #987c54; font-family: Georgia, serif; font-size: 10px; letter-spacing: .1em; }
.culture-filter-row { position: sticky; z-index: 30; top: calc(var(--safe-top) + var(--host-nav-offset) + 80px); margin-top: 12px; padding: 8px 2px; background: linear-gradient(180deg, rgba(244,240,230,.98) 76%, rgba(244,240,230,0)); backdrop-filter: blur(12px); }
.culture-inline-list { padding-bottom: 5px; }
.culture-instrument-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.culture-card button:last-child { background: linear-gradient(150deg, #8b6d43, #4f3e2c); }
.culture-card strong { font-family: "Songti SC", STSong, serif; font-size: 17px; letter-spacing: .08em; }
.culture-card span { margin-bottom: auto; color: rgba(255,255,255,.55); font-size: 10px; }

.topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 44px 1fr 70px;
  align-items: end;
  min-height: calc(var(--safe-top) + var(--host-nav-offset) + 62px);
  padding: calc(var(--safe-top) + var(--host-nav-offset)) 12px 9px;
  color: var(--ink);
  background: linear-gradient(to bottom, rgba(244,240,230,.98), rgba(244,240,230,.86), transparent);
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }
.topbar h1 { padding-bottom: 9px; text-align: center; font-family: "Songti SC", STSong, serif; font-size: 16px; letter-spacing: .12em; }
.btn-icon { display: grid; width: 42px; place-items: center; color: var(--ink); background: rgba(255,255,255,.64); font-size: 19px; box-shadow: 0 4px 14px rgba(30,45,39,.08); }
.topbar .text-action { min-height: 42px; padding: 0 13px; border-radius: 13px; color: #f6f2e8; background: var(--jade); font-size: 12px; }

.editor {
  display: grid;
  height: 100%;
  grid-template-rows: minmax(260px, 42vh) 1fr;
  overflow: hidden;
  background: var(--paper);
}

.painting-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #183128;
}

.dream-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #183128;
  contain: strict;
}

.dream-base,
.dream-canvas,
.dream-motion-layers { position: absolute; inset: 0; width: 100%; height: 100%; }
.dream-base { display: block; object-fit: cover; object-position: 50% 50%; }
.dream-canvas { z-index: 2; pointer-events: none; }
.dream-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.dream-visual.is-paused .dream-mesh,
.dream-visual.is-recording .dream-mesh { visibility: hidden; }
.dream-motion-layers { z-index: 3; overflow: hidden; pointer-events: none; }
.dream-motion-layer { position: absolute; display: block; max-width: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.waterfall-motion { overflow: hidden; }
.waterfall-copy { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.derived-motion,
.derived-copy {
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, rgba(0,0,0,.92) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 58%, rgba(0,0,0,.92) 72%, transparent 100%);
}
.derived-source { position: absolute; display: block; max-width: none; pointer-events: none; }
.sprite-motion { -webkit-mask-image: none; mask-image: none; }
.procedural-motion { overflow: visible; background-repeat: repeat; will-change: transform, opacity, background-position; }
.dream-visual.is-recording .dream-base,
.dream-visual.is-recording .dream-motion-layers { visibility: hidden; }

.dream-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,18,15,.18), transparent 25%, transparent 68%, rgba(8,18,15,.48));
}

.painting-caption {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  bottom: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: #f5efe1;
}

.painting-caption small { display: block; margin-bottom: 4px; color: rgba(255,255,255,.6); font-size: 9px; letter-spacing: .14em; }
.painting-caption h2 { font-family: "Songti SC", STSong, serif; font-size: 23px; font-weight: 500; letter-spacing: .1em; }
.painting-actions { display: flex; flex: 0 0 auto; gap: 7px; align-items: center; }
.change-scroll { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #fff; background: rgba(10,25,20,.38); backdrop-filter: blur(10px); font-size: 11px; white-space: nowrap; }
.visual-toggle { padding-inline: 11px; }

.editor-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(var(--safe-bottom) + 94px);
}

.editor-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editor-intro h3 { font-family: "Songti SC", STSong, serif; font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.editor-intro p { margin-top: 4px; color: #758078; font-size: 10px; }
.slot-count { color: #907d5b; font-family: Georgia, serif; font-size: 12px; }

.slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.slot {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 67px;
  padding: 9px 5px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.56);
}

.slot.empty { border: 1px dashed rgba(41,94,83,.48); color: #536e64; background: rgba(255,255,255,.44); box-shadow: inset 0 0 0 1px rgba(255,255,255,.52); }
.slot.muted { opacity: .45; }
.slot-no { position: absolute; top: 5px; left: 7px; color: #ae9f87; font: 8px Georgia, serif; }
.slot strong { overflow: hidden; max-width: 100%; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.slot small { margin-top: 5px; color: #7f8a83; font-size: 8px; }
.slot-plus { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #fff8e9; background: var(--jade); box-shadow: 0 4px 10px rgba(31,76,63,.24); font-family: Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1; }
.slot.empty small { color: #46675b; font-size: 9px; font-weight: 600; }

.empty-hint {
  margin-top: 12px;
  padding: 13px;
  border-left: 2px solid #b49a68;
  color: #6d776f;
  background: rgba(181, 157, 105, .08);
  font-family: "Songti SC", STSong, serif;
  font-size: 11px;
  line-height: 1.7;
}

.control-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.control-title strong { font-family: "Songti SC", STSong, serif; font-size: 14px; letter-spacing: .06em; }
.control-title span { color: #8b958f; font-size: 9px; }

.music-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.music-choice {
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  text-align: left;
  background: rgba(255,255,255,.45);
}

.music-choice.active { border-color: rgba(41,94,83,.6); color: #f7f2e7; background: var(--jade); }
.music-choice strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.music-choice small { display: block; margin-top: 4px; color: #87928c; font-size: 8px; }
.music-choice.active small { color: rgba(255,255,255,.62); }

.music-controls {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.music-play-state { color: #6f7a73; font-size: 10px; }

.audio-toggle { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: var(--jade); font-size: 15px; }
.volume-slider { width: 100%; accent-color: var(--jade); }
.volume-value { color: #6f7a73; font-size: 10px; text-align: right; }
.music-credit { margin-top: 8px; color: #9a8a70; font-size: 9px; text-align: center; }

.mix-volumes {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.mix-volume-row {
  display: grid;
  grid-template-columns: 114px 1fr 36px;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.42);
}

.mix-volume-row.disabled { opacity: .48; }
.mix-volume-row span { min-width: 0; }
.mix-volume-row strong { display: block; font-size: 11px; }
.mix-volume-row small { display: block; margin-top: 3px; overflow: hidden; color: #87928c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mix-volume-row em { color: #6f7a73; font-size: 9px; font-style: normal; text-align: right; }

.playback-settings {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.behavior-title { margin-top: 14px; }
.behavior-segment { grid-template-columns: 1fr 1fr; }

.segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.segment button { min-height: 38px; border-radius: 11px; color: #65716a; background: #e5dfd2; font-size: 11px; }
.segment button.active { color: #fff; background: var(--jade); }

.editor-footer {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(var(--safe-bottom) + 10px);
  background: linear-gradient(to top, var(--paper) 72%, rgba(244,240,230,0));
}

.btn-primary,
.btn-ghost {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  font-weight: 600;
  letter-spacing: .08em;
}

.btn-primary { color: #f7f2e7; background: var(--jade); box-shadow: 0 10px 24px rgba(41,94,83,.18); }
.btn-ghost { color: var(--jade); border: 1px solid rgba(41,94,83,.25); background: rgba(255,255,255,.58); }
.btn-danger { color: #a45245; background: #f0e2dc; }

.modal-backdrop {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(var(--safe-top) + 52px);
  background: rgba(8, 17, 14, .48);
  backdrop-filter: blur(4px);
  animation: fade-in .2s ease-out;
}

.sheet {
  display: flex;
  width: 100%;
  max-height: 88%;
  padding: 18px 16px calc(var(--safe-bottom) + 16px);
  flex-direction: column;
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  background: var(--paper);
  box-shadow: 0 -22px 55px rgba(0,0,0,.22);
  animation: slide-up .24s ease-out;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-up { from { transform: translateY(24px); opacity: .6; } }

.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}

.sheet-head h2 { font-family: "Songti SC", STSong, serif; font-size: 20px; font-weight: 600; letter-spacing: .08em; }
.sheet-head p { margin-top: 5px; color: #7e8982; font-size: 10px; }
.close-sheet { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #e6e0d4; font-size: 18px; }

.filter-row {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
  margin: 14px -2px 12px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 999px; color: #657069; background: #e6e0d5; font-size: 10px; }
.filter-row button.active { color: #fff; background: var(--jade); }

.catalog-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-bottom: 8px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.painting-option,
.instrument-option {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  text-align: left;
  background: rgba(255,255,255,.52);
}

.painting-option.active,
.instrument-option.active { border-color: var(--jade); box-shadow: 0 0 0 1px var(--jade) inset; }
.painting-option .art-thumb { height: 96px; }
.painting-meta { padding: 9px 10px 11px; }
.painting-meta strong { display: block; overflow: hidden; font-family: "Songti SC", STSong, serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.painting-meta small { display: block; margin-top: 4px; overflow: hidden; color: #7b867f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.painting-meta em { display: block; margin-top: 5px; color: #9d8965; font-size: 8px; font-style: normal; }

.instrument-option { position: relative; min-height: 118px; padding: 13px; }
.instrument-option .tone-mark { display: grid; width: 30px; height: 30px; place-items: center; margin-bottom: 13px; border-radius: 50%; color: #f6efe0; background: var(--jade); font-family: "Songti SC", STSong, serif; font-size: 14px; }
.instrument-option strong { display: block; font-family: "Songti SC", STSong, serif; font-size: 14px; }
.instrument-option small { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #738078; font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.instrument-option .add-mark { position: absolute; top: 10px; right: 11px; color: #9b896a; font-size: 18px; }
.instrument-option.active .add-mark { color: var(--jade); }

.painting-library-list {
  display: block;
}

.painting-drawer {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.5);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.painting-drawer.is-open {
  border-color: rgba(41,94,83,.48);
  box-shadow: 0 8px 22px rgba(32,64,53,.1);
}

.painting-drawer-toggle {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 112px;
  grid-template-columns: 104px minmax(0,1fr) 28px;
  gap: 11px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  text-align: left;
  background: transparent;
}

.painting-drawer-toggle .art-thumb {
  width: 104px;
  height: 96px;
  border-radius: 12px;
}

.painting-drawer-toggle .painting-meta {
  min-width: 0;
  padding: 0;
}

.painting-drawer-toggle .painting-meta strong { font-size: 17px; line-height: 1.35; }
.painting-drawer-toggle .painting-meta small { margin-top: 7px; color: #4f5e57; font-size: 11px; line-height: 1.45; }
.painting-drawer-toggle .painting-meta em { margin-top: 7px; color: #7b6a4f; font-size: 11px; line-height: 1.45; }

.drawer-mark {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: var(--jade);
  background: rgba(41,94,83,.1);
  font-family: "Songti SC", STSong, serif;
  font-size: 10px;
}

.painting-drawer-body {
  margin: 0 12px 12px;
  padding: 13px 14px;
  border-top: 1px solid rgba(41,94,83,.13);
  color: #53625b;
  background: rgba(41,94,83,.055);
}

.painting-drawer-body p { font-size: 11px; line-height: 1.8; }
.painting-drawer-body small { display: block; margin-top: 8px; color: #938466; font-size: 9px; }

.instrument-card-grid { align-content: start; }

.instrument-option.instrument-card {
  min-height: 260px;
  padding: 10px 11px 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.instrument-art {
  display: grid;
  width: 100%;
  height: 98px;
  margin-bottom: 8px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(255,255,255,.34), rgba(68,50,28,.07)), #e9e1d1;
  box-shadow: inset 0 0 0 1px rgba(91,70,41,.08);
}

.instrument-art img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px 7px;
  object-fit: contain;
  object-position: center;
}

.instrument-card .tone-mark {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 26px;
  height: 26px;
  margin: 0;
  background: rgba(35,74,63,.9);
  box-shadow: 0 3px 10px rgba(22,48,41,.18);
  font-size: 12px;
}

.instrument-card .add-mark {
  top: 17px;
  right: 17px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #f5ecdc;
  background: rgba(96,72,42,.82);
  font-size: 9px;
}

.instrument-card small { -webkit-line-clamp: 2; }
.instrument-provenance { display: block; margin-top: 8px; color: #756950; font-size: 9px; line-height: 1.65; }
.instrument-listen-label { display: block; margin-top: 7px; color: #9b7c4e; font-size: 9px; font-style: normal; }
.instrument-card.is-previewing { border-color: var(--gold); background: rgba(248,240,222,.92); box-shadow: 0 0 0 1px rgba(178,138,76,.45) inset, 0 8px 20px rgba(91,68,35,.12); }
.instrument-card.is-previewing .add-mark { background: var(--jade); }
.instrument-card.is-previewing .instrument-listen-label { color: var(--jade); }

.detail-card {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.5);
}

.detail-card .category-seal { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 14px; border: 1px solid #9e7c49; color: #9e6d3a; font-family: "Songti SC", STSong, serif; font-size: 19px; }
.detail-card h3 { font-family: "Songti SC", STSong, serif; font-size: 22px; letter-spacing: .1em; }
.detail-card p { margin-top: 9px; color: #68746d; font-size: 11px; line-height: 1.8; }

.position-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 18px;
}

.position-choices button { min-height: 46px; border-radius: 13px; color: #68736d; background: #e5dfd3; font-size: 11px; }
.position-choices button.active { color: #fff; background: var(--jade); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.sheet-actions button { min-height: 46px; border-radius: 13px; font-size: 11px; }

.save-form label { display: block; margin-top: 18px; color: #6e7b74; font-size: 10px; }
.save-form input { width: 100%; height: 50px; margin-top: 7px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: var(--ink); background: rgba(255,255,255,.65); }
.save-form input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(41,94,83,.08); }
.save-summary { margin-top: 13px; padding: 13px; border-radius: 13px; color: #68736d; background: rgba(38,78,65,.07); font-size: 10px; line-height: 1.8; }
.save-form .btn-primary { margin-top: 16px; }

.result-page {
  display: flex;
  height: 100%;
  padding: calc(var(--safe-top) + 72px) 18px calc(var(--safe-bottom) + 24px);
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 24%, rgba(105,145,125,.13), transparent 30%),
    var(--paper);
}

.result-seal { display: grid; width: 54px; height: 54px; margin: 0 auto; place-items: center; border: 1px solid #a47743; color: #a05f3e; font-family: "Songti SC", STSong, serif; font-size: 17px; }
.result-page h1 { margin-top: 22px; text-align: center; font-family: "Songti SC", STSong, serif; font-size: 28px; font-weight: 500; letter-spacing: .12em; }
.result-page > p { margin-top: 9px; color: #7c8780; font-size: 11px; text-align: center; }
.result-preview { position: relative; height: min(42vh, 320px); margin-top: 23px; overflow: hidden; border-radius: 24px; box-shadow: 0 18px 42px rgba(23,43,36,.18); }
.result-preview .art-thumb { height: 100%; }
.result-preview-caption { position: absolute; z-index: 4; left: 18px; bottom: 17px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.result-preview-caption strong { display: block; font-family: "Songti SC", STSong, serif; font-size: 20px; letter-spacing: .1em; }
.result-preview-caption small { display: block; margin-top: 5px; color: rgba(255,255,255,.7); font-size: 9px; }
.result-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 18px; }

.share-card-wrap { margin-top: 14px; min-height: 0; overflow-y: auto; }
.share-canvas { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; border-radius: 13px; box-shadow: 0 12px 34px rgba(26,41,35,.18); }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.share-actions button { min-height: 46px; border-radius: 13px; font-size: 11px; }

.player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #f7f2e7;
  background: #0a1713;
}

.player .dream-visual { position: absolute; inset: 0; }
.player-shade { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(5,13,11,.5), transparent 28%, transparent 60%, rgba(5,13,11,.72)); }
.player-hud { position: absolute; z-index: 8; inset: 0; display: flex; padding: calc(var(--safe-top) + var(--host-nav-offset) + 68px) 17px calc(var(--safe-bottom) + 20px); flex-direction: column; transition: opacity .6s ease; }
.player-hud.is-hidden { opacity: 0; pointer-events: none; }
.player-top { display: flex; align-items: center; justify-content: space-between; }
.player .btn-icon { color: #fff; background: rgba(10,24,20,.38); backdrop-filter: blur(10px); }
.player-time { padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(10,24,20,.34); font: 11px Georgia, serif; backdrop-filter: blur(10px); }
.player-center { margin: auto 0; text-align: center; text-shadow: 0 2px 22px rgba(0,0,0,.46); }
.player-center small { display: block; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .18em; }
.player-center h1 { margin-top: 10px; font-family: "Songti SC", STSong, serif; font-size: clamp(30px, 10vw, 45px); font-weight: 400; letter-spacing: .14em; }
.player-center p { margin-top: 11px; color: rgba(255,255,255,.66); font-size: 11px; }
.player-bottom { padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(8,20,17,.44); backdrop-filter: blur(14px); }
.now-playing { display: flex; align-items: center; justify-content: space-between; }
.now-playing-copy { display: flex; flex-direction: column; gap: 3px; }
.now-playing strong { font-size: 12px; }
.now-playing span { color: rgba(255,255,255,.58); font-size: 9px; }
.visual-toggle-player { min-height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); font-size: 9px; }
.play-mode-badge { padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.66); font-size: 8px; }
.player-controls { display: grid; grid-template-columns: 42px 1fr 1fr 68px; gap: 7px; align-items: center; margin-top: 12px; }
.player-controls .volume-slider { accent-color: #d4bb82; }
.player-tool { min-height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #fff; background: rgba(255,255,255,.08); font-size: 9px; }
.share-video { min-height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #fff; background: rgba(255,255,255,.08); font-size: 10px; }
.player-credit { margin-top: 9px; color: rgba(255,255,255,.45); font-size: 8px; text-align: center; }

.player-adjust-sheet { max-height: 92%; }
.player-adjust-scroll { min-height: 0; margin-top: 15px; padding-right: 2px; overflow-y: auto; overscroll-behavior: contain; }
.player-adjust-painting {
  display: grid;
  width: 100%;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin-bottom: 17px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  text-align: left;
  background: rgba(255,255,255,.48);
}
.player-adjust-painting .art-thumb { height: 62px; border-radius: 10px; }
.player-adjust-painting strong { display: block; overflow: hidden; font-family: "Songti SC", STSong, serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.player-adjust-painting small { display: block; margin-top: 5px; color: #7f8a83; font-size: 9px; }
.player-adjust-painting em { padding-right: 5px; color: var(--jade); font-size: 10px; font-style: normal; }
.player-adjust-slots { margin-bottom: 12px; }
.player-adjust-done { flex: 0 0 auto; margin-top: 13px; }
.exit-player-sheet { max-height: none; }
.exit-player-actions { display: grid; gap: 9px; margin-top: 20px; }

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 30px);
  max-width: min(86vw, 420px);
  padding: 10px 15px;
  border-radius: 999px;
  color: #f8f3e8;
  background: rgba(15,34,28,.92);
  box-shadow: 0 8px 25px rgba(0,0,0,.22);
  font-size: 11px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 540px) {
  .home { padding-left: 24px; padding-right: 24px; }
  .preset-grid, .collection-grid { gap: 16px; }
  .art-thumb { height: 190px; }
  .preset-body, .collection-body { padding: 15px; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .painting-option .art-thumb { height: 112px; }
  .editor { grid-template-columns: minmax(0, 58%) 42%; grid-template-rows: 1fr; }
  .painting-stage { height: 100%; }
  .editor-panel { padding-top: calc(var(--safe-top) + var(--host-nav-offset) + 74px); }
  .editor-footer { left: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ===== V2 原画保真：缩略图只呈现真实原画文件 ===== */
.art-thumb.real-art-thumb {
  position: relative;
  background: #1a201d;
}
.art-thumb-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  transform: none;
}
.art-thumb.real-art-thumb .thumb-wash {
  z-index: 2;
  opacity: .08;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(12,20,17,.16));
  animation: none;
}
.missing-art-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(244,240,230,.68);
  font-size: 12px;
  letter-spacing: .08em;
}
.preset-number {
  z-index: 4;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}