:root {
  color-scheme: light;
  --ink: #111210;
  --paper: #f5f4ef;
  --surface: #fff;
  --soft: #ebeae4;
  --line: rgba(17,18,16,.09);
  --subtle: #777872;
  --green: #5bcf68;
  --gold: #a98955;
  --danger: #b74d57;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #d9d8d2; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #d9d8d2; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.viewer-open, body.dialog-open, body.theme-experience-open, body.style-album-open { overflow: hidden; }
body.has-selection .works { padding-bottom: 10rem; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.app-shell { width: min(100%, 48rem); min-height: 100vh; margin: 0 auto; overflow: clip; background: var(--paper); box-shadow: 0 0 80px rgba(0,0,0,.12); }

.mini-header { position: sticky; z-index: 20; top: 0; display: flex; height: 4.2rem; align-items: center; justify-content: space-between; padding: max(.55rem, env(safe-area-inset-top)) 1rem .55rem; border-bottom: 1px solid rgba(17,18,16,.05); background: rgba(245,244,239,.86); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
.mini-brand { display: inline-flex; align-items: center; gap: .62rem; }
.mini-brand > span:last-child { display: grid; }
.mini-brand strong { font-size: .88rem; letter-spacing: .08em; }
.mini-brand small { margin-top: .12rem; color: var(--subtle); font-size: .48rem; letter-spacing: .19em; }
.brand-seal { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; }
.header-work-link { display: flex; align-items: center; gap: .45rem; padding: .48rem .68rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.62); font-size: .62rem; }
.header-work-link b { display: grid; min-width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 999px; color: white; background: var(--ink); font-family: Georgia, serif; font-size: .58rem; }

.campaign { position: relative; height: min(145vw,41rem); min-height: 31rem; overflow: hidden; background: #11120f; }
.campaign-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; }
.campaign-track::-webkit-scrollbar { display: none; }
.campaign-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.campaign-slide { position: relative; width: 100%; height: 100%; flex: 0 0 100%; overflow: hidden; background: #171813; scroll-snap-align: start; scroll-snap-stop: always; }
.campaign-slide > a { position: absolute; inset: 0; display: block; color: white; }
.campaign-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; transform: scale(1.002); transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .2s ease; }
.campaign-slide[data-theme="city-street"] img { object-position: center 42%; }
.campaign-slide[data-theme="forest"] img { object-position: center 38%; }
.campaign-slide[data-theme="retro-hk"] img { object-position: center 42%; }
.campaign-slide[data-theme="business-boss"] img { object-position: center 38%; }
.campaign-slide[data-theme="boxing"] img { object-position: center 38%; }
.campaign-slide[data-theme="cyberpunk"] img { object-position: center 36%; }
.campaign-slide[data-theme="moto"] img { object-position: center 42%; }
.campaign-slide[data-theme="city-night"] img { object-position: center 40%; }
.campaign-slide[data-theme="wuxia-outdoor"] img { object-position: center 38%; }
.campaign-slide-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.02) 24%,rgba(0,0,0,.13) 48%,rgba(0,0,0,.9) 100%), linear-gradient(90deg,rgba(0,0,0,.18),transparent 62%); }
.campaign-slide-copy { position: absolute; z-index: 2; right: 1.35rem; bottom: 6.75rem; left: 1.35rem; display: grid; justify-items: center; color: white; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.campaign-slide-title { max-width: 100%; margin-top: .22rem; font-family: "HanziPen SC","STKaiti","Kaiti SC","KaiTi","Songti SC",serif; font-size: clamp(3.25rem,16vw,5.9rem); font-weight: 400; letter-spacing: -.09em; line-height: .96; white-space: nowrap; transform: rotate(-1.6deg); text-wrap: nowrap; }
.campaign-slide-copy > span { margin-top: .35rem; font-family: Georgia,"Songti SC",serif; font-size: clamp(1.05rem,4.8vw,1.45rem); letter-spacing: .04em; }
.campaign-slide-copy > em { margin-top: .45rem; color: rgba(255,255,255,.72); font-size: .62rem; font-style: normal; letter-spacing: .08em; }
.campaign-slide-copy > b { display: inline-flex; align-items: center; gap: .5rem; margin-top: .72rem; padding: .4rem .66rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: rgba(255,255,255,.9); background: rgba(12,13,11,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .5rem; font-weight: 600; letter-spacing: .08em; }
.campaign-slide-copy > b i { font-family: Georgia,serif; font-size: .68rem; font-style: normal; font-weight: 400; }
.campaign-slide:active img { filter: brightness(.9); transform: scale(1.02); }
.campaign-code { position: absolute; z-index: 2; right: 1rem; top: 1rem; color: rgba(255,255,255,.72); font-family: Georgia, serif; font-size: .5rem; letter-spacing: .14em; writing-mode: vertical-rl; }
.campaign-progress { position: absolute; z-index: 4; right: 2.2rem; bottom: 4.7rem; left: 2.2rem; display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: .12rem; pointer-events: auto; }
.campaign-progress button { position: relative; height: 1.05rem; padding: 0; overflow: hidden; border: 0; background: transparent; }
.campaign-progress button::before { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(255,255,255,.3); content: ""; transform: translateY(-50%); }
.campaign-progress button::after { position: absolute; top: 50%; bottom: auto; left: 0; width: 100%; height: 2px; background: white; content: ""; transform: translate(-105%,-50%); transition: transform .28s ease; }
.campaign-progress button[aria-current="true"]::after { transform: translate(0,-50%); }
.campaign-progress button:focus-visible { outline: 1px solid rgba(255,255,255,.72); outline-offset: 1px; border-radius: .2rem; }
.campaign-counter { position: absolute; z-index: 4; right: 1.15rem; bottom: 5.72rem; display: flex; align-items: baseline; gap: .28rem; margin: 0; color: rgba(255,255,255,.62); font-family: Georgia,"Times New Roman",serif; font-size: .47rem; letter-spacing: .11em; pointer-events: none; }
.campaign-counter strong { color: white; font-size: .88rem; font-weight: 400; letter-spacing: .04em; }

.quick-panel { position: relative; z-index: 5; display: grid; width: calc(100% - 1.5rem); grid-template-columns: repeat(4,1fr); margin: -3.6rem auto 0; overflow: hidden; border: 1px solid rgba(17,18,16,.07); border-radius: 1.35rem; background: rgba(255,255,255,.94); box-shadow: 0 18px 55px rgba(27,26,21,.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.quick-panel > * { display: grid; min-width: 0; padding: .9rem .2rem .82rem; place-items: center; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: center; }
.quick-panel > *:last-child { border-right: 0; }
.quick-panel > *:active { background: var(--soft); }
.quick-icon { display: grid; width: 2.15rem; height: 2.15rem; margin-bottom: .5rem; place-items: center; border-radius: .72rem; color: white; background: var(--ink); font-family: Georgia, serif; font-size: 1rem; }
.quick-panel strong { font-size: .66rem; }
.quick-panel small { margin-top: .15rem; overflow: hidden; color: var(--subtle); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }

.story-strip { margin: 2.7rem 1rem 0; padding: 1.2rem 0 1.45rem; border-block: 1px solid var(--line); }
.story-strip div { display: grid; gap: .55rem; }
.story-strip span, .section-title p, .promise-kicker { color: var(--gold); font-size: .52rem; font-weight: 700; letter-spacing: .2em; }
.story-strip strong { font-family: Georgia, "Songti SC", serif; font-size: 1.12rem; font-weight: 400; }
.story-strip > p { max-width: 31rem; margin: .75rem 0 0; color: var(--subtle); font-size: .68rem; line-height: 1.75; }

.style-section, .works { padding: 4.6rem 0 4rem; scroll-margin-top: 3.8rem; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0 1rem; }
.section-title p { margin: 0 0 .5rem; }
.section-title h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(2rem, 8vw, 3.3rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.section-title > a, .section-title > span { flex: 0 0 auto; color: var(--subtle); font-size: .6rem; line-height: 1.6; text-align: right; }
.style-explorer[hidden], .style-album[hidden] { display: none; }
.style-explorer { padding-inline: 1rem; }
.style-explorer-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; scroll-margin-top: calc(4.2rem + 1.25rem); }
.style-explorer-heading p { margin: 0 0 .5rem; color: var(--gold); font-size: .52rem; font-weight: 720; letter-spacing: .2em; }
.style-explorer-heading h2 { margin: 0; font-family: Georgia,"Songti SC",serif; font-size: clamp(2rem,8vw,3.3rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.style-explorer-heading > span { max-width: 8rem; flex: 0 0 auto; color: var(--subtle); font-size: .58rem; line-height: 1.65; text-align: right; }
.style-featured-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1.65rem; }
.style-featured-heading strong { font-family: Georgia,"Songti SC",serif; font-size: .9rem; font-weight: 500; letter-spacing: -.01em; }
.style-featured-heading span { color: var(--subtle); font-size: .52rem; }
.style-featured { display: flex; gap: .45rem; margin: .65rem -1rem 0; padding: 0 1rem .35rem; overflow-x: auto; scrollbar-width: none; }
.style-featured::-webkit-scrollbar,.style-scene-tabs::-webkit-scrollbar,.style-family-tabs::-webkit-scrollbar { display: none; }
.style-featured-button { display: flex; min-width: max-content; min-height: 2.75rem; align-items: center; gap: .48rem; padding: .42rem .7rem .42rem .46rem; border: 1px solid rgba(17,18,16,.09); border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px rgba(255,255,255,.9); touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease; }
.style-featured-button > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-family: Georgia,serif; font-size: .52rem; }
.style-featured-button strong { font-size: .6rem; font-weight: 680; }
.style-selector-level { display: grid; gap: .52rem; margin-top: 1.05rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.style-selector-level > span { color: var(--subtle); font-size: .5rem; font-weight: 700; letter-spacing: .09em; }
.style-scene-tabs,.style-family-tabs { display: flex; gap: .42rem; margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scrollbar-width: none; }
.style-filter-tab { min-width: max-content; min-height: 2.75rem; padding: .58rem .86rem; border: 1px solid var(--line); border-radius: 999px; color: #565650; background: rgba(255,255,255,.68); font-size: .62rem; font-weight: 650; touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s ease, background-color .18s ease, border-color .18s ease; }
.style-filter-tab[aria-selected="true"] { color: white; border-color: var(--ink); background: var(--ink); }
.style-featured-button.is-pressing,.style-filter-tab.is-pressing { filter: brightness(.94); transform: scale(.97); }
.style-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: 1.15rem; }
.portrait-style-card { position: relative; min-width: 0; aspect-ratio: 2/3; overflow: hidden; border: 1px solid rgba(17,18,16,.1); border-radius: .9rem; background: #fff; box-shadow: 0 10px 28px rgba(26,25,21,.075); }
.portrait-style-card-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; color: var(--ink); background: #fff; text-align: left; touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease, box-shadow .18s ease; }
.portrait-style-card-open.is-pressing { filter: brightness(.91); transform: scale(.985); }
.portrait-style-card-image { position: relative; display: block; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg,#e7e3da,#d8d3c8); }
.portrait-style-card-image::after { position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.24) 48%,transparent 72%); content: ""; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.portrait-style-card-image.is-loading::after { opacity: 1; }
.portrait-style-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .18s ease, transform .18s ease; }
.portrait-style-card-image.is-loading img { opacity: 0; }
.portrait-style-card-open.is-pressing .portrait-style-card-image img { transform: scale(1.015); }
.portrait-style-card-image img[hidden] { display: none; }
.portrait-style-card-fallback { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .38rem; padding: .8rem; color: #5c574e; background: #ded9cf; text-align: center; }
.portrait-style-card-fallback[hidden] { display: none; }
.portrait-style-card-fallback b { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid rgba(89,82,70,.42); border-radius: 50%; font-family: Georgia,serif; font-size: .72rem; font-weight: 500; letter-spacing: .08em; }
.portrait-style-card-fallback span { font-size: .6875rem; line-height: 1.5; }
.portrait-style-scene { position: absolute; z-index: 2; top: .5rem; left: .5rem; padding: .26rem .48rem; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; color: white; background: rgba(12,13,11,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .625rem; font-weight: 680; letter-spacing: .04em; }
.portrait-style-copy { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: calc(100% / 9); min-height: 0; align-items: center; padding: 0 .4rem; overflow: hidden; background: #fff; }
.portrait-style-copy strong { max-width: 43%; flex: 0 1 auto; overflow: hidden; font-family: Georgia,"Songti SC",serif; font-size: .75rem; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.portrait-style-copy i { width: 1px; height: .72rem; flex: 0 0 auto; margin-inline: 4px; background: rgba(17,18,16,.2); }
.portrait-style-copy small { min-width: 0; flex: 1; overflow: hidden; color: #66645e; font-size: .6875rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.style-featured-button:focus-visible,.style-filter-tab:focus-visible,.portrait-style-card-open:focus-visible { outline: 2px solid #8b6a36; outline-offset: -3px; }
.portrait-style-card-open:focus-visible { box-shadow: inset 0 0 0 3px #f3dfb8; }
.style-explorer-legacy-link { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding: .65rem .8rem; border-block: 1px solid var(--line); color: #5d5c56; font-size: .63rem; font-weight: 650; transition: color .18s ease, background-color .18s ease; }
.style-explorer-legacy-link:active { color: var(--ink); background: rgba(255,255,255,.5); }
.style-album { position: fixed; z-index: 44; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; border: 0; overscroll-behavior: contain; color: var(--ink); background: #f3f1eb; animation: style-album-in .2s cubic-bezier(.2,.8,.2,1); }
.style-album::backdrop { background: transparent; }
.style-album-panel { width: 100%; min-height: 100svh; margin: 0 auto; background: #f5f4ef; }
.style-album-header { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: 2.75rem minmax(0,1fr) auto; align-items: start; gap: .8rem; padding: max(.85rem,env(safe-area-inset-top)) 1rem .9rem; background: rgba(245,244,239,.9); box-shadow: 0 1px rgba(17,18,16,.08); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.style-album-close { display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 1px solid rgba(17,18,16,.14); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.7); font-family: Georgia,serif; font-size: 1.65rem; line-height: 1; touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease; }
.style-album-close.is-pressing { background: #e7e3da; transform: scale(.94); }
.style-album-heading { min-width: 0; }
.style-album-heading p { margin: .05rem 0 .26rem; color: var(--gold); font-size: .5rem; font-weight: 720; letter-spacing: .12em; }
.style-album-heading h2 { margin: 0; overflow: hidden; font-family: Georgia,"Songti SC",serif; font-size: clamp(1.5rem,6vw,2.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.style-album-heading > span { display: -webkit-box; margin-top: .35rem; overflow: hidden; color: var(--subtle); font-size: .62rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.style-album-count { align-self: center; color: rgba(17,18,16,.22); font-family: Georgia,"Times New Roman",serif; font-size: 1.35rem; letter-spacing: .03em; }
.style-album-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .72rem; padding: 1rem 1rem max(5.4rem,calc(1.5rem + env(safe-area-inset-bottom))); }
.pose-card { min-width: 0; align-self: start; overflow: hidden; border: 1px solid rgba(17,18,16,.1); border-radius: 1rem; background: #fff; box-shadow: 0 10px 26px rgba(26,25,21,.07); }
.pose-card.is-lead { grid-column: span 2; }
.pose-open { position: relative; display: block; width: 100%; min-height: 44px; padding: 0; overflow: hidden; border: 0; color: #fff; background: #d9d5cb; text-align: left; touch-action: manipulation; transition: filter .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.pose-open.is-pressing { filter: brightness(.9); transform: scale(.985); }
.pose-image { position: relative; display: block; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg,#e7e3da,#d8d3c8); }
.pose-image::after { position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 72%); content: ""; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.pose-image.is-loading::after { opacity: 1; }
.pose-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .18s ease, transform .18s ease; }
.pose-image.is-loading img { opacity: 0; }
.pose-open.is-pressing .pose-image img { transform: scale(1.012); }
.pose-image img[hidden] { display: none; }
.pose-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: .7rem; color: #625e55; background: #ddd8ce; font-size: .64rem; text-align: center; }
.pose-image-fallback[hidden] { display: none; }
.pose-number { position: absolute; top: .55rem; left: .55rem; padding: .3rem .45rem; border: 1px solid rgba(255,255,255,.44); border-radius: 999px; background: rgba(12,13,11,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: Georgia,serif; font-size: .58rem; letter-spacing: .08em; }
.pose-label { position: absolute; right: 0; bottom: 0; left: 0; padding: 1.55rem .65rem .58rem; overflow: hidden; background: linear-gradient(transparent,rgba(8,9,7,.78)); font-size: .65rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pose-choice { display: block; width: 100%; min-height: 44px; padding: .62rem .45rem; border: 0; border-top: 1px solid rgba(17,18,16,.08); color: #55534c; background: #fff; font-size: .64rem; font-weight: 680; touch-action: manipulation; transition: color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.pose-choice.is-pressing { color: var(--ink); background: #f0ede6; transform: scale(.98); }
.style-album-close:focus-visible,.pose-open:focus-visible,.pose-choice:focus-visible { outline: 2px solid #8b6a36; outline-offset: -3px; }
.style-rail { display: flex; gap: .75rem; margin-top: 1.5rem; padding: 0 1rem .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.style-rail::-webkit-scrollbar { display: none; }
.style-card { position: relative; width: min(72vw, 18rem); flex: 0 0 auto; aspect-ratio: 3/4.3; padding: 0; overflow: hidden; border: 0; border-radius: 1.1rem; color: white; background: #222; scroll-snap-align: start; text-align: left; box-shadow: 0 14px 32px rgba(20,20,16,.14); }
.style-card::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.88)); content: ""; }
.style-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.style-card:active img { transform: scale(1.035); }
.style-card > span { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; display: grid; }
.style-card small { color: rgba(255,255,255,.57); font-size: .48rem; letter-spacing: .15em; }
.style-card strong { margin-top: .42rem; font-family: Georgia, "Songti SC", serif; font-size: 1.48rem; font-weight: 400; }
.style-card em { margin-top: .24rem; color: rgba(255,255,255,.7); font-size: .62rem; font-style: normal; }
.theme-directory { display: grid; gap: .8rem; margin: 1.15rem 1rem 0; }
.theme-group { overflow: hidden; border: 1px solid var(--line); border-radius: 1.15rem; background: rgba(255,255,255,.58); }
.theme-group header { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem .8rem; border-bottom: 1px solid var(--line); }
.theme-group header > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: var(--ink); font-family: Georgia,serif; font-size: .62rem; }
.theme-group header > div { display: grid; gap: .12rem; }
.theme-group header strong { font-family: Georgia,"Songti SC",serif; font-size: 1rem; font-weight: 400; }
.theme-group header small { color: var(--subtle); font-size: .46rem; letter-spacing: .14em; }
.theme-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: .45rem; }
.theme-shortcuts button { min-width: 0; padding: .66rem .2rem; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; font-size: .6rem; white-space: nowrap; }
.theme-shortcuts button:nth-child(3n) { border-right: 0; }
.theme-shortcuts button:active { color: white; border-color: var(--ink); background: var(--ink); transform: scale(.97); }

.fit-guide { display: grid; grid-template-columns: 1.05fr .95fr; margin: 0 1rem; overflow: hidden; border-radius: 1.15rem; color: white; background: #11120f; }
.fit-copy { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; }
.fit-copy > p { margin: 0 0 .5rem; color: var(--green); font-size: .55rem; font-weight: 700; }
.fit-copy h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(1.35rem, 5vw, 2.2rem); font-weight: 400; line-height: 1.14; }
.fit-copy > span { margin-top: .75rem; color: rgba(255,255,255,.58); font-size: .58rem; line-height: 1.7; }
.fit-photo { min-height: 15rem; }
.fit-photo img { width: 100%; height: 100%; object-fit: cover; }

.works { padding-top: 1rem; }
.legacy-gallery-disclosure > summary { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 1rem; padding: .85rem 0; border-block: 1px solid var(--line); cursor: pointer; list-style: none; }
.legacy-gallery-disclosure > summary::-webkit-details-marker { display: none; }
.legacy-gallery-disclosure > summary > span { display: grid; gap: .22rem; }
.legacy-gallery-disclosure > summary small { color: var(--gold); font-family: Georgia,serif; font-size: .48rem; letter-spacing: .15em; }
.legacy-gallery-disclosure > summary strong { font-family: Georgia,"Songti SC",serif; font-size: 1rem; font-weight: 500; }
.legacy-gallery-disclosure > summary > b { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.64); font-family: Georgia,serif; font-size: 1.2rem; font-weight: 400; transition: transform .18s ease; }
.legacy-gallery-disclosure[open] > summary > b { transform: rotate(45deg); }
.legacy-gallery-content { padding-top: 3.25rem; }
.works-title { margin-bottom: 1.35rem; }
.theme-package { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); width: calc(100% - 2rem); max-width: 30rem; margin: 0 auto 1.15rem; overflow: hidden; border: 1px solid rgba(17,18,16,.1); border-radius: 1.2rem; background: rgba(255,255,255,.74); box-shadow: 0 16px 38px rgba(30,29,25,.07); }
.theme-package[hidden] { display: none; }
.theme-package-heading { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: 1rem; border-right: 1px solid var(--line); }
.theme-package-heading small { overflow: hidden; color: var(--subtle); font-size: .5rem; font-weight: 650; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.theme-package-price { margin-top: .7rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem,9vw,2.75rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
.theme-package-facts { display: grid; margin: 0; padding: .35rem 1rem; list-style: none; }
.theme-package-facts li { display: flex; align-items: center; gap: .45rem; min-height: 2rem; border-bottom: 1px solid var(--line); font-size: .61rem; font-weight: 600; white-space: nowrap; }
.theme-package-facts li:last-child { border-bottom: 0; }
.theme-package-facts li::before { width: .3rem; height: .3rem; flex: 0 0 auto; border-radius: 50%; background: var(--green); content: ""; }
.filter-bar { position: sticky; z-index: 12; top: 4.1rem; display: grid; gap: .52rem; margin-bottom: .8rem; padding: .58rem .75rem .66rem; overflow: hidden; border-block: 1px solid var(--line); background: rgba(245,244,239,.93); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.filter-level { display: grid; grid-template-columns: 2rem minmax(0,1fr); align-items: center; gap: .38rem; }
.filter-level > span { color: var(--subtle); font-size: .5rem; font-weight: 700; letter-spacing: .08em; }
.filters { display: flex; gap: .38rem; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.scene-filter-button, .theme-filter-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); }
.scene-filter-button { min-height: 2.2rem; padding: .55rem .76rem; }
.theme-filter-button { min-height: 1.8rem; padding: .38rem .62rem; }
.scene-filter-button strong { font-size: .68rem; }
.theme-filter-button strong { font-size: .58rem; font-weight: 600; }
.scene-filter-button span, .theme-filter-button span { color: var(--subtle); font-family: Georgia,serif; font-size: .5rem; }
.scene-filter-button[aria-pressed="true"], .theme-filter-button[aria-pressed="true"] { color: white; border-color: var(--ink); background: var(--ink); }
.scene-filter-button[aria-pressed="true"] span, .theme-filter-button[aria-pressed="true"] span { color: rgba(255,255,255,.55); }
.gallery-status { display: flex; justify-content: space-between; padding: 0 .8rem .7rem; color: var(--subtle); font-size: .56rem; letter-spacing: .05em; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .2rem; padding: 0 .2rem; }
.gallery-card { position: relative; min-width: 0; overflow: hidden; background: #dddcd7; }
.photo-button { position: relative; display: block; width: 100%; aspect-ratio: 3/4; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: zoom-in; }
.photo-button::after { position: absolute; inset: 65% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.5)); content: ""; opacity: .7; }
.photo-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .48s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.photo-button img[data-loading="true"] { opacity: 0; }
.photo-button:active img { transform: scale(1.035); }
.photo-theme { position: absolute; z-index: 2; bottom: .28rem; left: .32rem; max-width: calc(100% - 3.6rem); overflow: hidden; color: rgba(255,255,255,.92); font-size: .47rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.photo-code { position: absolute; z-index: 2; right: .32rem; bottom: .28rem; color: rgba(255,255,255,.9); font-family: Georgia, serif; font-size: .47rem; letter-spacing: .1em; }
.like-button { position: absolute; z-index: 4; top: .3rem; right: .3rem; display: grid; width: 1.85rem; height: 1.85rem; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; background: rgba(17,17,15,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .92rem; transition: transform .14s ease, background .14s ease; }
.like-button:active { transform: scale(.84); }
.like-button[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); }
.load-area { display: flex; justify-content: center; padding: 2.2rem 1rem 0; }
.load-more { display: grid; width: min(100%,20rem); gap: .18rem; padding: .88rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: transparent; text-align: center; }
.load-more:active { color: white; background: var(--ink); transform: scale(.98); }
.load-more span { font-size: .7rem; font-weight: 650; }
.load-more small { color: var(--subtle); font-size: .55rem; }
.load-more[hidden] { display: none; }

.prep { padding: 4.8rem 0 5rem; scroll-margin-top: 4rem; color: white; background: #10110f; }
.prep .section-title { width: min(calc(100% - 2rem), 30rem); justify-content: center; margin: 0 auto; padding: 0; text-align: center; }
.prep .section-title > div { display: grid; justify-items: center; }
.prep .section-title h2 { max-width: 10em; margin-inline: auto; }
.section-title.inverse p { color: var(--green); }
.prep-steps { width: min(calc(100% - 2rem), 30rem); margin: 2.4rem auto 0; padding: 0; border-top: 1px solid rgba(255,255,255,.13); list-style: none; }
.prep-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.prep-steps li > span { color: var(--green); font-family: Georgia, serif; font-size: .72rem; }
.prep-steps div { display: grid; gap: .4rem; }
.prep-steps strong { font-family: Georgia, "Songti SC", serif; font-size: 1.05rem; font-weight: 400; }
.prep-steps p { margin: 0; color: rgba(255,255,255,.52); font-size: .64rem; line-height: 1.7; }

.promise { padding: 2.5rem 1rem 2.25rem; text-align: center; }
.promise-kicker { margin: 0 0 .8rem; }
.promise h2 { max-width: 11em; margin: 0 auto; font-family: Georgia, "Songti SC", serif; font-size: clamp(2.05rem,8vw,3.4rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.1; }
.promise-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 2.2rem; border-block: 1px solid var(--line); }
.promise-grid div { display: grid; gap: .25rem; padding: 1.2rem .25rem; border-right: 1px solid var(--line); }
.promise-grid div:last-child { border-right: 0; }
.promise-grid b { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 400; }
.promise-grid span { color: var(--subtle); font-size: .5rem; }
.promise > a { display: flex; width: 100%; max-width: 25rem; min-height: 4rem; align-items: center; justify-content: space-between; margin: 2.25rem auto 0; padding: .9rem 1.35rem; border-radius: 999px; color: white; background: linear-gradient(135deg,#121310,#080907); box-shadow: 0 14px 30px rgba(17,18,16,.15), inset 0 1px rgba(255,255,255,.09); font-size: .78rem; font-weight: 700; letter-spacing: .01em; transition: transform .14s ease, box-shadow .14s ease; }
.promise > a span { font-family: "SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif; font-size: 1.05rem; font-weight: 500; }
.promise > a:active { box-shadow: 0 7px 16px rgba(17,18,16,.13), inset 0 1px rgba(255,255,255,.08); transform: scale(.985); }

.page-footer { --footer-left-column: clamp(8.1rem,37.45vw,9.36rem); --footer-qr-column: 8.15rem; display: grid; gap: .55rem; padding: 1rem 1rem calc(4.6rem + env(safe-area-inset-bottom)); color: white; background: #10110f; text-align: left; }
.footer-identity { display: flex; width: 100%; min-width: 0; align-items: flex-start; padding: 0; }
.footer-brand { display: grid; width: 100%; grid-template-columns: calc(1px + .42rem + 1.05rem + .32rem) minmax(0,1fr) calc(.32rem + 1.45rem + .42rem + 1px); align-items: center; justify-self: start; gap: 0; }
.footer-brand > span:last-child { min-width: 0; grid-template-columns: max-content; justify-content: end; justify-self: stretch; text-align: right; text-align-last: right; }
.footer-brand .brand-seal { border-color: rgba(255,255,255,.65); }
.footer-brand small, .wechat-contact-details { color: rgba(255,255,255,.42); }
.footer-brand .brand-seal { width: 1.75rem; height: 1.75rem; font-size: .88rem; }
.footer-brand strong { min-width: 0; font-size: .78rem; letter-spacing: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; }
.footer-brand small { font-size: .43rem; letter-spacing: .12em; white-space: nowrap; }
.wechat-contact-card { position: relative; display: grid; width: min(100%,36rem); min-width: 0; grid-template-columns: minmax(0,1fr) var(--footer-left-column) minmax(0,1fr) var(--footer-qr-column) minmax(0,1fr); align-items: stretch; overflow: hidden; margin-inline: auto; padding-block: .7rem; border: 1px solid rgba(197,165,105,.28); border-radius: 1.05rem; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 16px 38px rgba(0,0,0,.22); isolation: isolate; }
.wechat-contact-card::before { position: absolute; z-index: -1; top: -5rem; left: -4rem; width: 13rem; height: 13rem; border-radius: 50%; background: radial-gradient(circle,rgba(169,137,85,.15),transparent 68%); content: ""; }
.wechat-contact-left { --contact-flow-gap: .55rem; display: grid; min-width: 0; grid-column: 2; grid-template-rows: repeat(4,auto); align-content: center; align-items: start; justify-items: start; padding-block: .12rem .08rem; }
.wechat-contact-title { width: 100%; max-width: none; font-family: Georgia,"Songti SC",serif; font-size: clamp(.69rem,3.2vw,.8rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; }
.contact-action-stack { display: grid; width: 100%; overflow: hidden; margin-top: var(--contact-flow-gap); border: 1px solid rgba(255,255,255,.18); border-radius: .82rem; color: white; background: #0d0e0c; box-shadow: 0 8px 20px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.1); }
.wechat-contact-link { display: grid; width: 100%; min-width: 0; grid-template-columns: 1.05rem minmax(0,1fr) 1.45rem; align-items: center; gap: .32rem; margin: 0; padding: .32rem .42rem; border-radius: 0; color: white; background: transparent; font-size: .48rem; font-weight: 720; box-shadow: none; }
.wechat-contact-link i { display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; color: white; background: #23a849; font-size: .39rem; font-style: normal; letter-spacing: .04em; }
.wechat-logo { display: block; width: .78rem; height: .78rem; fill: currentColor; }
.wechat-logo circle { fill: #23a849; }
.wechat-contact-link > span { overflow: hidden; letter-spacing: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; text-overflow: ellipsis; white-space: nowrap; }
.wechat-contact-link b { justify-self: end; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 400; line-height: 1; }
.phone-contact-link { display: grid; width: 100%; min-width: 0; min-height: 1.35rem; grid-template-columns: 1.05rem minmax(0,1fr) 1.45rem; align-items: center; gap: .32rem; margin: 0; padding: .25rem .42rem; border: 0; border-radius: 0; color: white; background: transparent; box-shadow: inset 0 1px rgba(255,255,255,.11); }
.phone-contact-icon { display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; color: #5bdc78; background: rgba(52,199,89,.16); }
.phone-contact-icon svg { width: .5rem; height: .5rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.phone-contact-number { min-width: 0; font-size: .49rem; font-variant-numeric: tabular-nums; font-weight: 620; letter-spacing: 0; text-align: justify; text-align-last: justify; text-justify: inter-character; white-space: nowrap; }
.phone-contact-link small { justify-self: end; color: rgba(255,255,255,.58); font-size: .36rem; letter-spacing: .04em; white-space: nowrap; }
.wechat-contact-link, .phone-contact-link, .wechat-contact-right { transition: transform .12s ease, opacity .12s ease; }
.wechat-contact-link:active, .phone-contact-link:active { opacity: .68; transform: none; }
.wechat-contact-right:active { opacity: .82; transform: scale(.97); }
.wechat-contact-left .footer-identity { align-self: start; margin-top: var(--contact-flow-gap); }
.wechat-contact-details { margin-top: .4rem; margin-left: calc(.42rem + 1px); font-size: .46rem; letter-spacing: .06em; line-height: 1.5; }
.wechat-contact-right { display: grid; min-width: 0; grid-column: 4; align-items: center; }
.wechat-qr-frame { display: grid; min-width: 0; gap: .24rem; padding: .3rem; border: 1px solid rgba(255,255,255,.7); border-radius: .8rem; color: #6f6d66; background: #f7f6f1; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.wechat-qr-frame img { width: 100%; height: auto; aspect-ratio: 1; border-radius: .42rem; background: white; -webkit-touch-callout: default; }
.wechat-qr-frame small { font-size: .39rem; font-weight: 650; letter-spacing: .08em; text-align: center; }
.footer-signature { display: grid; width: min(calc(100% - 2px),calc(36rem - 2px)); grid-template-columns: minmax(0,1fr) var(--footer-left-column) minmax(0,1fr) var(--footer-qr-column) minmax(0,1fr); align-items: center; margin: 0 auto .55rem; color: rgba(255,255,255,.38); font-size: .43rem; letter-spacing: .08em; white-space: nowrap; }
.footer-signature > span { grid-column: 2; margin-left: calc(.42rem + 1px); }
.footer-signature > small { grid-column: 4; justify-self: center; }
.footer-signature small { font-size: inherit; letter-spacing: .1em; }

.theme-experience { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; }
.theme-experience:focus { outline: 0; }
.theme-experience::backdrop { background: rgba(8,9,7,.58); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
.theme-experience-shell { position: fixed; z-index: 2; right: .38rem; bottom: max(.38rem,env(safe-area-inset-bottom)); left: .38rem; display: block; width: min(calc(100% - .76rem),32rem); max-height: min(92svh,50rem); margin: 0 auto; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255,255,255,.18); border-radius: 1.72rem; color: var(--ink); background: linear-gradient(180deg,#fbfaf7 0%,#f1eee6 100%); box-shadow: 0 30px 100px rgba(0,0,0,.46); overscroll-behavior: contain; will-change: transform; }
.theme-experience-shell.is-dragging { cursor: grabbing; }
.theme-experience-drag { position: absolute; z-index: 6; top: 0; right: 3.7rem; left: 3.7rem; display: grid; height: 2.25rem; padding: 0; place-items: start center; border: 0; background: transparent; touch-action: none; cursor: grab; transform: translateY(var(--theme-sheet-scroll,0)); }
.theme-experience-drag span { width: 2.65rem; height: .28rem; margin-top: .55rem; border-radius: 99px; background: rgba(255,255,255,.58); box-shadow: 0 1px 5px rgba(0,0,0,.14); }
.theme-experience-close { position: absolute; z-index: 8; top: .72rem; right: .72rem; display: grid; width: 2.45rem; height: 2.45rem; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(12,13,11,.34); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); font-size: 1.35rem; font-weight: 200; line-height: 1; transform: translateY(var(--theme-sheet-scroll,0)); transition: transform .14s ease, background .14s ease; }
.theme-experience-close:active { background: rgba(12,13,11,.62); transform: translateY(var(--theme-sheet-scroll,0)) scale(.88); }
.theme-experience-visual { position: relative; height: clamp(17rem,42svh,23rem); overflow: hidden; color: white; background: #171813; }
.theme-experience-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; user-select: none; -webkit-user-drag: none; }
.theme-experience-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.02) 28%,rgba(0,0,0,.1) 52%,rgba(0,0,0,.88) 100%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 68%); }
.theme-experience-hero-copy { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.15rem; left: 1.25rem; display: grid; justify-items: center; text-align: center; text-shadow: 0 3px 22px rgba(0,0,0,.55); }
.theme-experience-hero-copy p { margin: 0; color: rgba(255,255,255,.65); font-family: Georgia,"Times New Roman",serif; font-size: .48rem; font-weight: 650; letter-spacing: .24em; }
.theme-experience-hero-copy h2 { max-width: 100%; margin: .15rem 0 0; font-family: "HanziPen SC","STKaiti","Kaiti SC","KaiTi","Songti SC",serif; font-size: clamp(3.15rem,15vw,5.25rem); font-weight: 400; letter-spacing: -.09em; line-height: .94; white-space: nowrap; transform: rotate(-1.2deg); }
.theme-experience-hero-copy strong { margin-top: .24rem; font-family: Georgia,"Songti SC",serif; font-size: 1.02rem; font-weight: 400; letter-spacing: .06em; }
.theme-experience-content { padding: 1.05rem 1rem max(1.05rem,env(safe-area-inset-bottom)); }
.theme-experience-summary { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .62rem .8rem; }
.theme-experience-summary > div { display: grid; gap: .2rem; }
.theme-experience-summary small { color: var(--gold); font-size: .46rem; font-weight: 750; letter-spacing: .2em; }
.theme-experience-summary strong { font-family: Georgia,"Songti SC",serif; font-size: 1.28rem; font-weight: 400; }
.theme-experience-summary p { grid-column: 1/-1; margin: 0; color: #5f5e58; font-size: .64rem; line-height: 1.65; }
.theme-experience-summary > span { grid-row: 1; grid-column: 2; color: var(--subtle); font-size: .52rem; white-space: nowrap; }
.theme-experience-package { display: grid; min-height: 6.15rem; grid-template-columns: .82fr 1.18fr .98fr; margin-top: .9rem; overflow: hidden; border: 1px solid rgba(17,18,16,.1); border-radius: 1.12rem; background: rgba(255,255,255,.76); box-shadow: 0 16px 34px rgba(25,24,20,.07), inset 0 1px rgba(255,255,255,.82); }
.theme-experience-price-block { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: .82rem .65rem .76rem; border-right: 1px solid var(--line); }
.theme-experience-package small { color: var(--subtle); font-size: .48rem; }
.theme-experience-price-block strong { margin-top: .52rem; font-family: Didot,"Bodoni 72","Bodoni 72 Smallcaps",Georgia,serif; font-size: clamp(2.42rem,10.9vw,2.92rem); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1,"tnum" 1; font-weight: 400; letter-spacing: -.055em; line-height: .8; white-space: nowrap; transform: translateY(-.24rem); }
.theme-experience-price-block strong span { position: relative; top: -.08em; margin-right: .07em; font-family: Didot,"Bodoni 72",Georgia,serif; font-size: .4em; font-weight: 400; letter-spacing: -.02em; vertical-align: .66em; }
.theme-experience-facts { display: grid; margin: 0; padding: .25rem .75rem; list-style: none; }
.theme-experience-facts li { display: flex; min-height: 1.72rem; align-items: center; gap: .4rem; border-bottom: 1px solid var(--line); font-size: .56rem; font-weight: 650; white-space: nowrap; }
.theme-experience-facts li:last-child { border-bottom: 0; }
.theme-experience-facts li::before { width: .28rem; height: .28rem; flex: 0 0 auto; border-radius: 50%; background: var(--green); content: ""; }
.theme-experience-booking { position: relative; display: grid; min-width: 0; min-height: 100%; grid-column: 3; align-content: center; overflow: hidden; padding: .82rem .7rem; border-left: 1px solid rgba(255,255,255,.09); color: white; background: radial-gradient(circle at 100% 0,rgba(205,173,108,.28),transparent 56%),linear-gradient(145deg,#171914 0%,#080a08 76%); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 1px 0 rgba(255,255,255,.025); isolation: isolate; touch-action: manipulation; transition: filter .12s ease, transform .12s ease; }
.theme-experience-booking::before { position: absolute; top: .62rem; right: .7rem; left: .7rem; height: 1px; z-index: -1; background: linear-gradient(90deg,#c9a967,transparent); content: ""; opacity: .64; transform-origin: left; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.theme-experience-booking-copy { position: relative; display: grid; gap: .28rem; padding-top: .18rem; }
.theme-experience-booking small { color: #cbb078; font-size: .42rem; font-weight: 700; letter-spacing: .16em; }
.theme-experience-booking strong { font-family: "Songti SC","STSong",Georgia,serif; font-size: .9rem; font-weight: 500; letter-spacing: .05em; line-height: 1.08; white-space: nowrap; }
.theme-experience-booking-tail { position: absolute; right: .56rem; bottom: .5rem; display: block; }
.theme-experience-fingerprint { position: relative; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(215,185,127,.52); border-radius: 50%; color: #e1c88f; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.08); transition: color .12s ease, background .12s ease, transform .12s ease; }
.theme-experience-fingerprint::after { position: absolute; inset: -.32rem; border: 1px solid rgba(225,200,143,.48); border-radius: 50%; content: ""; opacity: 0; transform: scale(.68); }
.theme-experience-fingerprint svg { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.theme-experience-booking:hover::before { transform: scaleX(.55); }
.theme-experience-booking:active { filter: brightness(1.12); transform: scale(.985); }
.theme-experience-booking.is-pressing .theme-experience-fingerprint { color: white; background: rgba(215,185,127,.2); transform: scale(.9); }
.theme-experience-booking.is-pressing .theme-experience-fingerprint::after { animation: fingerprint-touch .36s ease-out; }
.theme-experience-preview-heading { display: flex; align-items: end; justify-content: space-between; margin: 1rem .08rem .55rem; }
.theme-experience-preview-heading strong { font-family: Georgia,"Songti SC",serif; font-size: .9rem; font-weight: 400; }
.theme-experience-preview-heading span { color: var(--subtle); font-size: .48rem; }
.theme-experience-previews { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .38rem; }
.theme-experience-previews[data-count="1"] { grid-template-columns: minmax(0,1fr); }
.theme-experience-previews[data-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.theme-experience-previews button { position: relative; aspect-ratio: 3/4; padding: 0; overflow: hidden; border: 0; border-radius: .82rem; background: #d7d5ce; box-shadow: 0 8px 20px rgba(25,24,20,.09); transition: transform .16s ease, filter .16s ease; }
.theme-experience-previews img { width: 100%; height: 100%; object-fit: cover; }
.theme-experience-previews button::after { position: absolute; inset: 65% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.54)); content: ""; }
.theme-experience-previews span { position: absolute; z-index: 2; right: .38rem; bottom: .34rem; color: white; font-family: Georgia,serif; font-size: .45rem; letter-spacing: .08em; }
.theme-experience-previews button:active { filter: brightness(.88); transform: scale(.96); }
.theme-experience-selection { display: flex; width: 100%; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding: .72rem .85rem; border: 1px solid rgba(162,127,72,.3); border-radius: 1rem; color: #191915; background: linear-gradient(135deg,rgba(199,168,112,.18),rgba(255,255,255,.8)); box-shadow: inset 0 1px rgba(255,255,255,.65); text-align: left; transition: transform .15s ease, background .15s ease; }
.theme-experience-selection[hidden] { display: none; }
.theme-experience-selection > span { display: grid; }
.theme-experience-selection small { margin-bottom: .12rem; color: #91703d; font-family: Georgia,serif; font-size: .43rem; letter-spacing: .16em; }
.theme-experience-selection strong { font-size: .7rem; }
.theme-experience-selection strong b { font: inherit; }
.theme-experience-selection em { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; font-size: .59rem; font-style: normal; font-weight: 650; }
.theme-experience-selection i { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: white; background: var(--ink); font-family: Georgia,serif; font-size: .7rem; font-style: normal; font-weight: 400; }
.theme-experience-selection:active { background: rgba(199,168,112,.24); transform: scale(.98); }
.theme-experience-view { display: flex; width: 100%; min-height: 3.35rem; align-items: center; justify-content: space-between; margin-top: .9rem; padding: .8rem 1rem; border: 0; border-radius: 1rem; color: white; background: var(--ink); box-shadow: 0 13px 30px rgba(17,18,16,.2); font-size: .72rem; font-weight: 720; transition: transform .15s ease, box-shadow .15s ease; }
.theme-experience-view b { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-family: Georgia,serif; font-size: .82rem; font-weight: 400; }
.theme-experience-view:active { box-shadow: 0 5px 14px rgba(17,18,16,.16); transform: scale(.98); }
.theme-experience-contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: .55rem; }
.theme-experience-contact-card { display: grid; min-width: 0; min-height: 3.5rem; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .52rem; padding: .55rem .55rem .55rem .76rem; border: 1px solid rgba(17,18,16,.09); border-radius: 1rem; background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,246,241,.76)); box-shadow: 0 8px 22px rgba(28,27,23,.065), inset 0 1px rgba(255,255,255,.9); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); touch-action: manipulation; transition: transform .14s cubic-bezier(.2,.8,.2,1), filter .14s ease, box-shadow .14s ease; }
.theme-experience-contact-icon { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .66rem; color: white; box-shadow: inset 0 1px rgba(255,255,255,.25), 0 5px 12px rgba(28,27,23,.1); }
.theme-experience-contact-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.theme-experience-contact-icon svg { width: 1.18rem; height: 1.18rem; fill: currentColor; }
.theme-experience-contact-card.is-wechat .theme-experience-contact-icon { overflow: hidden; background: transparent; }
.theme-experience-contact-card.is-phone .theme-experience-contact-icon { background: linear-gradient(145deg,#35362f,#11120f); }
.theme-experience-contact-copy { display: grid; min-width: 0; gap: .12rem; }
.theme-experience-contact-copy strong { overflow: hidden; font-size: .6rem; font-weight: 720; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.theme-experience-contact-copy small { color: var(--subtle); font-size: .43rem; letter-spacing: .02em; }
.theme-experience-contact-card > b { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid rgba(17,18,16,.1); border-radius: 50%; color: #6c6b65; background: rgba(255,255,255,.66); font-family: "SF Pro Display","Helvetica Neue",system-ui,sans-serif; font-size: 1rem; font-weight: 300; line-height: 1; }
.theme-experience-contact-card:active { filter: brightness(.98); box-shadow: 0 3px 10px rgba(28,27,23,.05), inset 0 1px rgba(255,255,255,.9); transform: scale(.975); }
.theme-experience-contact-card:focus-visible,.theme-experience-booking:focus-visible { outline: 2px solid rgba(162,127,72,.72); outline-offset: 2px; }

.viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; color: white; background: #090a08; }
.viewer::backdrop { background: #090a08; }
.viewer-shell { display: grid; height: 100svh; grid-template-rows: auto 1fr auto; }
.viewer-top, .viewer-bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: max(.9rem,env(safe-area-inset-top)) 1rem .8rem; }
.viewer-top > span { color: rgba(255,255,255,.58); font-size: .6rem; letter-spacing: .15em; }
.icon-button { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: white; background: rgba(255,255,255,.06); font-size: 1.5rem; font-weight: 200; }
.viewer-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; touch-action: pan-y; cursor: zoom-out; }
.viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer-stage img[data-loading="true"] { opacity: 0; }
.viewer-loader { position: absolute; color: rgba(255,255,255,.38); font-size: .62rem; letter-spacing: .14em; }
.viewer-loader[hidden] { display: none; }
.viewer-arrow { position: absolute; z-index: 2; top: 50%; display: none; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(0,0,0,.35); font-family: Georgia,serif; font-size: 1.9rem; transform: translateY(-50%); }
.viewer-prev { left: 1rem; } .viewer-next { right: 1rem; }
.viewer-bottom { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: .65rem; padding: .85rem 1rem max(1rem,env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); }
.viewer-bottom > div:first-child { display: grid; min-width: 0; align-content: center; }
.viewer-bottom strong { font-family: Georgia,serif; font-size: .9rem; letter-spacing: .1em; }
.viewer-bottom span { color: rgba(255,255,255,.4); font-size: .6rem; }
.viewer-actions { display: grid; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; }
.viewer-bottom button { min-width: 0; min-height: 44px; padding: .65rem .55rem; border: 0; border-radius: 999px; color: var(--ink); background: white; font-size: .65rem; font-weight: 700; line-height: 1.25; }
.viewer-bottom button:focus-visible { outline: 2px solid #d4b477; outline-offset: 2px; }
.viewer-bottom #viewer-pose-choice { color: #fff; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.1); }
.viewer-bottom button.is-selected { color: white; background: var(--danger); }

.selection-bar { position: fixed; z-index: 31; right: .65rem; bottom: calc(4.65rem + env(safe-area-inset-bottom)); left: .65rem; display: flex; width: min(calc(100% - 1.3rem), 46.7rem); min-height: 4.5rem; align-items: center; gap: .72rem; margin: 0 auto; padding: .5rem .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1.25rem; color: white; background: rgba(17,18,16,.93); box-shadow: 0 18px 48px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); text-align: left; animation: selection-in .3s cubic-bezier(.2,.8,.2,1); }
.selection-bar[hidden] { display: none; }
.selection-bar:active { transform: scale(.985); }
.selection-bar-count { display: grid; width: 3.35rem; height: 3.35rem; flex: 0 0 auto; place-content: center; border-radius: .95rem; color: var(--ink); background: white; text-align: center; }
.selection-bar-count strong { font-family: Georgia,serif; font-size: 1.12rem; line-height: 1; }
.selection-bar-count small { margin-top: .2rem; color: var(--subtle); font-size: .5rem; }
.selection-bar-copy { display: grid; flex: 1; }
.selection-bar-copy small { color: rgba(255,255,255,.5); font-size: .52rem; }
.selection-bar-copy strong { margin-top: .13rem; font-size: .78rem; }
.selection-bar-arrow { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-size: .8rem; }

.selection-sheet { width: min(calc(100% - .75rem),31rem); max-width: none; max-height: 86svh; margin: auto auto .35rem; padding: 0; overflow: hidden; border: 0; border-radius: 1.5rem; color: var(--ink); background: var(--surface); box-shadow: 0 24px 90px rgba(0,0,0,.34); }
.selection-sheet::backdrop { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.selection-sheet[open] { animation: sheet-in .34s cubic-bezier(.2,.8,.2,1); }
.selection-shell { max-height: 86svh; padding: .55rem .9rem max(1.1rem,env(safe-area-inset-bottom)); overflow-y: auto; background: linear-gradient(180deg,#fbfaf7,#f4f1e9); overscroll-behavior: contain; }
.sheet-handle { width: 2.5rem; height: .28rem; margin: 0 auto 1rem; border-radius: 99px; background: rgba(23,23,20,.18); }
.selection-head { position: sticky; z-index: 8; top: -.6rem; display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .6rem 0 .8rem; background: rgba(250,249,245,.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.eyebrow { margin: 0 0 .55rem; color: var(--gold); font-size: .55rem; font-weight: 700; letter-spacing: .22em; }
.selection-head h2 { margin: 0; font-family: Georgia,"Songti SC",serif; font-size: clamp(1.8rem,7vw,2.8rem); font-weight: 400; letter-spacing: -.04em; }
.sheet-head-actions { display: flex; gap: .42rem; }
.settings-toggle, .sheet-close { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid rgba(23,23,20,.08); border-radius: 50%; color: var(--ink); background: #ebe8e1; }
.settings-toggle svg { width: 1.08rem; height: 1.08rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.settings-toggle[aria-expanded="true"] { color: white; border-color: var(--ink); background: var(--ink); }
.sheet-close { border: 0; font-size: 1.4rem; }
.brief-settings { margin: .25rem 0 1.15rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1.15rem; background: rgba(235,232,224,.75); animation: settings-in .24s cubic-bezier(.2,.8,.2,1); }
.brief-settings[hidden] { display: none; }
.settings-heading { display: flex; align-items: start; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.settings-heading > div { display: grid; }
.settings-heading strong { font-size: .8rem; }
.settings-heading span { color: var(--subtle); font-size: .56rem; }
.settings-badge { padding: .3rem .5rem; border-radius: 99px; color: #77613e!important; background: rgba(162,127,72,.13); }
.settings-field { display: grid; gap: .38rem; margin-top: .72rem; }
.settings-field > span, .focus-settings legend { color: #4f4e49; font-size: .64rem; font-weight: 650; }
.settings-field small { color: var(--subtle); font-weight: 400; }
.settings-field input, .settings-field textarea { width: 100%; padding: .72rem .78rem; border: 1px solid var(--line); border-radius: .72rem; outline: 0; background: rgba(255,255,255,.8); font: inherit; font-size: .74rem; resize: none; }
.settings-field input:focus, .settings-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91,207,104,.13); }
.focus-settings { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; border: 0; }
.focus-settings legend { width: 100%; margin-bottom: .28rem; }
.focus-settings label { position: relative; }
.focus-settings input { position: absolute; opacity: 0; }
.focus-settings span { display: block; padding: .53rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: #5c5a54; background: rgba(255,255,255,.62); font-size: .62rem; }
.focus-settings input:checked + span { color: white; border-color: var(--ink); background: var(--ink); }
.settings-done { width: 100%; margin-top: .9rem; padding: .72rem; border: 0; border-radius: .72rem; color: white; background: var(--ink); font-size: .7rem; font-weight: 700; }
.selection-card-wrap { position: relative; display: grid; width: min(100%,21.5rem); aspect-ratio: 3/4; margin: .75rem auto .7rem; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #dedbd3; box-shadow: 0 20px 46px rgba(30,27,20,.16); -webkit-user-select: none; user-select: none; }
.selection-card-wrap img { width: 100%; height: 100%; object-fit: contain; -webkit-touch-callout: default; -webkit-user-select: none; user-select: none; }
.selection-card-wrap > span { position: absolute; color: var(--subtle); font-size: .65rem; }
.selection-card-wrap > span[hidden] { display: none; }
.selection-edit-hint { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .78rem .1rem .5rem; color: var(--subtle); }
.selection-edit-hint span { font-size: .53rem; }
.selection-edit-hint strong { flex: 0 0 auto; color: #6d5633; font-size: .56rem; }
.selected-list { display: flex; gap: .62rem; margin: .4rem -.1rem .9rem; padding: .2rem .1rem; overflow-x: auto; scrollbar-width: none; }
.selected-list::-webkit-scrollbar { display: none; }
.selected-chip { position: relative; width: 4.45rem; flex: 0 0 auto; }
.selected-chip-select { position: relative; display: block; width: 4.45rem; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: .72rem; background: transparent; transition: transform .14s ease, border-color .14s ease; }
.selected-chip-select:active { transform: scale(.94); }
.selected-chip-select img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.selected-chip-select em { position: absolute; right: .25rem; bottom: .25rem; padding: .2rem .35rem; border-radius: 999px; color: #171714; background: #c5a36a; font-size: .45rem; font-style: normal; font-weight: 750; }
.selected-chip.is-primary .selected-chip-select { border-color: #b99459; box-shadow: 0 0 0 3px rgba(185,148,89,.14); }
.selected-chip-label { display: block; margin-top: .28rem; overflow: hidden; font-size: .5rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.selected-chip-remove { position: absolute; z-index: 2; top: -.38rem; right: -.38rem; display: grid; width: 1.35rem; height: 1.35rem; padding: 0; place-items: center; border: 2px solid var(--surface); border-radius: 50%; color: white; background: var(--ink); font-size: .7rem; }
.selection-text-details { margin: .9rem 0; border: 1px solid var(--line); border-radius: .9rem; background: rgba(255,255,255,.55); }
.selection-text-details summary { padding: .82rem .9rem; color: #54534e; font-size: .66rem; font-weight: 650; cursor: pointer; list-style: none; }
.selection-text-details summary::-webkit-details-marker { display: none; }
.selection-text-details summary::after { float: right; color: var(--subtle); content: "＋"; }
.selection-text-details[open] summary::after { content: "−"; }
.selection-summary { margin: 0; padding: 0 .9rem .9rem; color: #66645e; font-size: .66rem; line-height: 1.75; white-space: pre-line; }
.selection-actions button { display: grid; width: 100%; min-height: 3.45rem; padding: .8rem; place-items: center; border-radius: .95rem; font-size: .76rem; font-weight: 700; }
.copy-request { border: 0; color: white; background: var(--ink); box-shadow: 0 12px 28px rgba(17,17,15,.18); }
.copy-request:active { transform: scale(.985); }
.copy-request.is-success { color: #2f5d46; background: #dcece2; box-shadow: none; }
.copy-request:disabled { opacity: 1; }
.selection-contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: .55rem; }
.selection-contact-actions a { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: .5rem; padding: .72rem .78rem; border: 1px solid var(--ink); border-radius: .95rem; color: white; background: var(--ink); transition: transform .14s ease, opacity .14s ease; }
.selection-contact-actions a + a { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.72); }
.selection-contact-actions span { display: grid; min-width: 0; }
.selection-contact-actions small { margin-bottom: .13rem; color: rgba(255,255,255,.5); font-size: .48rem; }
.selection-contact-actions a + a small { color: var(--subtle); }
.selection-contact-actions strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.selection-contact-actions b { flex: 0 0 auto; font-family: Georgia,serif; font-size: .78rem; font-weight: 400; }
.selection-contact-actions a:active { opacity: .82; transform: scale(.975); }
.longpress-guide { display: flex; width: min(100%,21.5rem); align-items: center; justify-content: center; gap: .65rem; margin: 0 auto; padding: .68rem .8rem; border-radius: .82rem; color: #58564f; background: rgba(162,127,72,.1); text-align: center; -webkit-user-select: none; user-select: none; }
.longpress-guide > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(162,127,72,.28); border-radius: 50%; color: var(--gold); }
.longpress-guide > div { display: grid; justify-items: center; }
.longpress-guide strong { font-size: .66rem; }
.longpress-guide small { margin-top: .1rem; color: var(--subtle); font-size: .54rem; }
.selection-tip { margin: .72rem .2rem; color: var(--subtle); font-size: .56rem; line-height: 1.65; }
.clear-selection { width: 100%; padding: .7rem; border: 0; color: #9a3c45; background: transparent; font-size: .66rem; }

@media (max-width: 360px) {
  .selection-contact-actions { grid-template-columns: 1fr; }
}

.tab-bar { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; width: min(100%,48rem); height: calc(4.15rem + env(safe-area-inset-bottom)); grid-template-columns: repeat(5,1fr); margin: 0 auto; padding: .35rem .25rem env(safe-area-inset-bottom); border-top: 1px solid rgba(17,18,16,.09); background: rgba(250,250,247,.94); box-shadow: 0 -8px 32px rgba(20,20,16,.08); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
.tab-item { display: grid; min-width: 0; padding: .25rem; place-items: center; border: 0; color: #95958f; background: transparent; }
.tab-item > span { position: relative; font-family: Georgia,serif; font-size: 1.08rem; line-height: 1; }
.tab-item small { margin-top: .22rem; font-size: .49rem; }
.tab-item.is-active { color: var(--ink); }
.tab-item.is-active > span::after { position: absolute; right: -.28rem; bottom: -.2rem; width: .38rem; height: .38rem; border: 2px solid white; border-radius: 50%; background: var(--green); content: ""; }
#nav-favorite-count { position: absolute; top: -.5rem; right: -.8rem; display: grid; min-width: 1rem; height: 1rem; padding: 0 .2rem; place-items: center; border: 2px solid white; border-radius: 999px; color: white; background: var(--danger); font-family: -apple-system,"PingFang SC",sans-serif; font-size: .45rem; }
#nav-favorite-count[hidden] { display: none; }
.toast { position: fixed; z-index: 100; bottom: calc(9.2rem + env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: calc(100% - 2rem); padding: .72rem 1rem; border-radius: 999px; color: white; background: rgba(17,18,16,.93); box-shadow: 0 12px 40px rgba(0,0,0,.22); font-size: .68rem; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,1rem); transition: .22s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.noscript { margin: 0; padding: 1rem; color: white; background: #9c2f26; text-align: center; }

@media (min-width: 700px) {
  .campaign { height: 41rem; }
  .quick-panel { width: calc(100% - 3rem); }
  .style-explorer { padding-inline: 1.5rem; }
  .style-featured,.style-scene-tabs,.style-family-tabs { margin-inline: -1.5rem; padding-inline: 1.5rem; }
  .style-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
  .style-album { display: grid; padding: 1rem; place-items: center; background: rgba(17,18,16,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .style-album-panel { width: min(70rem,100%); min-height: 0; max-height: calc(100svh - 2rem); overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 1.35rem; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
  .style-album-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; padding: 1.25rem; }
  .pose-card.is-lead { grid-column: auto; }
  .style-card { width: 18rem; }
  .theme-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-grid { gap: .45rem; padding: 0 1rem; }
  .page-footer { padding-inline: 2rem; }
  .viewer-arrow { display: grid; }
}
@media (min-width: 900px) {
  .app-shell { margin-block: 1rem; border-radius: 1.5rem; }
  .tab-bar { bottom: 1rem; border: 1px solid rgba(17,18,16,.09); border-radius: 1.3rem 1.3rem 0 0; }
  .selection-bar { bottom: 5.7rem; }
  .theme-experience-shell { bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { html,.campaign-track { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } .portrait-style-card-open.is-pressing,.portrait-style-card-open.is-pressing .portrait-style-card-image img { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .mini-header,.filter-bar,.tab-bar,.selection-bar,.style-featured-button,.style-filter-tab,.style-album-header { background: #f7f6f2; -webkit-backdrop-filter: none; backdrop-filter: none; } .selection-bar { color: white; background: #111210; } .portrait-style-scene,.like-button,.pose-number { background: #292a26; -webkit-backdrop-filter: none; backdrop-filter: none; } .style-album { background: #22231f; -webkit-backdrop-filter: none; backdrop-filter: none; } .theme-experience::backdrop { background: rgba(8,9,7,.82); -webkit-backdrop-filter: none; backdrop-filter: none; } .theme-experience-close { background: rgba(12,13,11,.74); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .style-featured-button,.style-filter-tab,.portrait-style-card,.pose-card,.legacy-gallery-disclosure > summary > b { border-color: #111210; } .portrait-style-scene,.like-button,.pose-number { color: #fff; border: 2px solid #fff; background: #111210; -webkit-backdrop-filter: none; backdrop-filter: none; forced-color-adjust: none; } .like-button { transition: transform .14s ease; } .gallery-grid .like-button[aria-pressed="true"] { border-color: #fff; background: var(--danger); } .portrait-style-card-fallback,.pose-image-fallback { color: #111210; background: #f2eee5; } .style-featured-button:focus-visible,.style-filter-tab:focus-visible,.portrait-style-card-open:focus-visible,.style-album-close:focus-visible,.pose-open:focus-visible,.pose-choice:focus-visible,.like-button:focus-visible { outline-color: #111210; outline-width: 3px; } }
@keyframes style-album-in { from { opacity: .65; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes selection-in { from { opacity: 0; transform: translateY(1.2rem) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sheet-in { from { opacity: .5; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes settings-in { from { opacity: 0; transform: translateY(-.5rem) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fingerprint-touch { 0% { opacity: .72; transform: scale(.68); } 100% { opacity: 0; transform: scale(1.28); } }