:root {
  color-scheme: dark;
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", ui-sans-serif, sans-serif;
  background: #0e0d12;
  color: #f7f3f5;
  --ink: #f7f3f5;
  --muted: #aaa0a9;
  --faint: #706974;
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .18);
  --panel: rgba(29, 25, 32, .76);
  --panel-solid: #1d1920;
  --rose: #efa1b7;
  --rose-deep: #b96a83;
  --cream: #fff1dc;
  --green: #a6d7c1;
}

.moment-social-meta { display: flex; gap: 14px; margin-top: 9px; color: var(--faint); font-size: 8px; }.moment-comments { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }.social-reply-button { padding: 0; background: transparent; color: var(--rose); font-size: 8px; }.moment-comment-form, .instagram-compose { display: grid; gap: 7px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 7px; }.moment-comment-form, .instagram-compose > div { display: flex; gap: 6px; }.moment-comment-form input, .instagram-compose textarea, .instagram-compose select { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px 7px; background: rgba(0, 0, 0, .14); color: var(--ink); font-size: 9px; }.moment-comment-form button, .instagram-compose button { width: 30px; border-radius: 7px; background: var(--rose); color: #34202b; }.instagram-compose { margin: 10px 11px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .04); }.instagram-compose textarea { resize: vertical; width: 100%; }.instagram-compose select { flex: 1; }.instagram-compose button { width: auto; padding: 6px 12px; font-size: 9px; }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #312331 0, transparent 33%), radial-gradient(circle at 100% 90%, #241c2c 0, transparent 28%), #0e0d12; }
button, input, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:active { transform: translateY(1px); }
#app, .site-frame { min-height: 100vh; }
.site-frame { width: min(1420px, calc(100% - 64px)); margin: auto; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 100px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; font-size: 18px; font-weight: 800; letter-spacing: -.06em; }
.wordmark-dot, .status-light { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 16px rgba(239, 161, 183, .8); }
.surface-link { position: relative; display: grid; justify-items: start; gap: 4px; min-width: 86px; padding: 18px 15px; background: transparent; color: var(--faint); text-align: left; }
.surface-link span { font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.surface-link small { font-size: 10px; color: var(--faint); }
.surface-link::after { position: absolute; right: 15px; bottom: -1px; left: 15px; height: 2px; background: transparent; content: ""; }
.surface-link:hover, .surface-link.is-active { color: var(--rose); }
.surface-link.is-active::after { background: var(--rose); }
.header-status { display: flex; align-items: center; gap: 9px; color: var(--faint); font-size: 10px; letter-spacing: .11em; white-space: nowrap; }
.surface-root { flex: 1; padding-bottom: 94px; }
.site-footer { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr minmax(300px, 360px) 1fr; align-items: center; width: min(1420px, calc(100% - 64px)); min-height: 70px; margin: 0 auto; padding: 8px 0; border-top: 1px solid var(--line); background: rgba(14, 13, 18, .86); backdrop-filter: blur(18px); color: var(--faint); font-size: 10px; letter-spacing: .1em; }
.site-footer > span:last-child { text-align: right; }
.bottom-navigation { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; height: 100%; }
.bottom-navigation .surface-link { min-width: 0; padding: 12px 10px; justify-items: center; text-align: center; }
.bottom-navigation .surface-link::after { right: 10px; bottom: 0; left: 10px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--rose); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
em { color: var(--rose); font-style: normal; }

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 34px 20px; }
.auth-card { width: min(100%, 480px); padding: 42px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(39, 31, 41, .94), rgba(23, 20, 26, .98)); box-shadow: 0 30px 100px rgba(0, 0, 0, .28); }
.auth-card h1 { margin: 0; font-size: clamp(38px, 7vw, 64px); letter-spacing: -.08em; line-height: .98; }
.auth-copy { max-width: 360px; margin: 26px 0 32px; color: var(--muted); line-height: 1.8; }
.auth-form { display: grid; gap: 18px; }
.auth-form label { display: grid; gap: 8px; color: var(--muted); font-size: 11px; }
.auth-form input { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line-strong); outline: 0; background: transparent; color: var(--ink); }
.auth-form input:focus { border-bottom-color: var(--rose); }
.auth-form button { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 15px 0; border-bottom: 1px solid var(--rose); background: transparent; color: var(--rose); font-size: 13px; text-align: left; }
.auth-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; color: var(--muted); font-size: 11px; }
.auth-switch button, .text-action { padding: 0; background: transparent; color: var(--rose); font-size: 11px; }
.auth-note { display: block; margin-top: 30px; color: var(--faint); font-size: 10px; line-height: 1.7; }
.auth-message { margin: 18px 0 0; padding: 10px 12px; border-left: 2px solid var(--rose); color: var(--rose); font-size: 11px; line-height: 1.6; }
.auth-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.auth-loading p { margin: 0; font-size: 12px; }

.story-page { padding: 76px 0 100px; }
.story-intro-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 54px; }
.story-intro-row h1, .story-setup-copy h1 { max-width: 720px; margin: 0; font-size: clamp(42px, 6vw, 80px); line-height: .98; letter-spacing: -.08em; }
.story-world-note { display: grid; grid-template-columns: 8px auto; align-items: center; gap: 0 10px; min-width: 220px; padding-bottom: 8px; color: var(--muted); font-size: 11px; }
.story-world-note small { grid-column: 2; margin-top: 7px; color: var(--faint); }
.story-overview-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 45px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.story-overview-item { display: grid; gap: 8px; min-width: 0; padding: 20px 22px 20px 0; }
.story-overview-item + .story-overview-item { padding-left: 22px; border-left: 1px solid var(--line); }
.story-overview-item strong { font-size: 14px; font-weight: 700; }
.story-overview-item small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 82px); align-items: start; }
.story-rail { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.rail-block { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rail-label, .actions-heading span, .story-reader-top, .story-summary span, .settings-section-heading .section-status, .settings-save-id span { color: var(--faint); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.rail-block strong { font-size: 14px; font-weight: 700; }
.rail-block small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.rail-quote { margin-top: 40px; padding-left: 14px; border-left: 2px solid var(--rose-deep); }
.rail-quote span { color: var(--rose); font-size: 9px; letter-spacing: .15em; }
.rail-quote p { margin: 12px 0 0; color: var(--cream); font-size: 12px; line-height: 1.75; }
.story-reader { min-height: 560px; padding: 0 0 26px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.story-history { display: grid; gap: 30px; min-width: 0; }
.story-entry { padding: 0 0 30px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.story-entry.is-current { border-top-color: rgba(239, 161, 183, .5); }
.story-masthead { padding: 34px 0 54px; }
.story-location { margin: 0 0 18px; color: var(--rose); font-size: 12px; }
.story-title { max-width: 760px; margin: 0; font-size: clamp(44px, 6vw, 82px); letter-spacing: -.08em; line-height: .98; }
.story-entry .story-summary { margin-top: 48px; }
.story-entry-choices { margin-top: 34px; padding-top: 17px; border-top: 1px solid var(--line); }
.story-choices-label { display: block; margin-bottom: 5px; color: var(--faint); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.story-selected-action { display: grid; gap: 7px; margin: 28px 0 0; padding: 11px 12px; border-left: 2px solid var(--green); background: rgba(166, 215, 193, .07); }
.story-selected-action span { color: var(--green); font-size: 9px; letter-spacing: .16em; }
.story-selected-action strong { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.6; }
.story-choice:disabled { cursor: default; opacity: .52; }
.story-choice.is-selected { color: var(--green); }
.story-choice.is-selected b { color: var(--green); }
.story-actions-copy { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.story-reader-top { display: flex; justify-content: space-between; gap: 16px; padding: 19px 0 0; }
.story-rule { display: block; width: 68px; height: 1px; margin-top: 26px; background: var(--rose); }
.story-body { color: #e5dfe4; font-size: 16px; line-height: 2.05; }
.story-summary { display: grid; gap: 9px; margin-top: 80px; padding-top: 18px; border-top: 1px solid var(--line); }
.story-summary strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.story-actions { position: sticky; top: 28px; padding-top: 3px; }
.actions-heading { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); }
.actions-heading small { color: var(--muted); font-size: 11px; }
.choice-list { display: grid; }
.story-choice { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 10px; min-height: 76px; padding: 14px 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; transition: color .2s ease, padding .2s ease; }
.story-choice span { color: var(--faint); font-size: 10px; }
.story-choice strong { font-size: 13px; font-weight: 500; line-height: 1.6; }
.story-choice b { color: var(--faint); font-size: 18px; font-weight: 400; }
.story-choice:hover, .story-choice.is-selected { padding-left: 8px; color: var(--rose); }
.story-choice:hover b, .story-choice.is-selected b { color: var(--rose); }
.free-action { margin-top: 40px; }
.free-action label { display: block; margin-bottom: 12px; color: var(--faint); font-size: 11px; line-height: 1.5; }
.free-action-row { display: flex; gap: 8px; border-bottom: 1px solid var(--line-strong); }
.free-action input, .setup-card input, .setup-card select { width: 100%; border: 0; outline: 0; padding: 11px 0; background: transparent; color: var(--ink); }
.free-action input::placeholder, .setup-card input::placeholder { color: var(--faint); }
.free-action button { padding: 0 3px 0 14px; background: transparent; color: var(--rose); font-size: 20px; }
.story-notice { margin-top: 18px; padding: 10px 12px; border-left: 2px solid var(--green); background: rgba(166, 215, 193, .07); color: var(--green); font-size: 11px; line-height: 1.6; }.story-notice.story-error { border-left-color: #ffb5b5; background: rgba(255, 120, 120, .08); color: #ffb5b5; }
.legacy-import { width: min(100%, 680px); margin: 0 auto 24px; padding: 16px 18px; border: 1px solid rgba(166, 215, 193, .3); background: rgba(166, 215, 193, .06); }
.legacy-import strong { display: block; margin-bottom: 7px; color: var(--green); font-size: 13px; }
.legacy-import p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.story-setup-page { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 440px); align-items: center; gap: 11vw; min-height: 650px; }
.story-setup-copy { max-width: 640px; }
.story-setup-copy > p:not(.eyebrow) { max-width: 450px; margin: 30px 0 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.setup-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.setup-tags span, .status-dot, .live-pill { border: 1px solid rgba(239, 161, 183, .3); border-radius: 999px; padding: 7px 11px; color: var(--rose); font-size: 10px; }
.setup-card { padding: 26px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(39, 31, 41, .92), rgba(23, 20, 26, .96)); box-shadow: 0 30px 80px rgba(0, 0, 0, .24); }
.card-heading, .character-preview, .settings-section-heading, .setting-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.05em; }
.setup-card label { display: grid; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.setup-card label input, .setup-card label select { border-bottom: 1px solid var(--line); }
.setup-card label select { appearance: none; }
.character-preview { justify-content: flex-start; margin: 25px 0 22px; padding: 13px; background: rgba(255, 255, 255, .05); }
.character-preview span, .character-preview small, .chat-profile small { display: block; color: var(--muted); font-size: 10px; }
.character-preview strong, .chat-profile strong { display: block; margin: 4px 0; font-size: 13px; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; font-weight: 800; }
.avatar-shinyu { color: #3b2830; background: linear-gradient(140deg, #fff0d6, #e9a5b7); }
.primary-button { width: 100%; border-radius: 2px; padding: 14px 18px; background: var(--rose); color: #321e29; font-weight: 800; transition: filter .2s ease, transform .2s ease; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.primary-button span { float: right; font-size: 19px; line-height: 15px; }
.form-footnote { margin: 13px 0 0; color: var(--faint); font-size: 10px; text-align: center; }

.story-setup-page { display: block; min-height: 0; padding: 52px 0 104px; }
.setup-wizard { width: min(100%, 900px); margin: 0 auto; }
.setup-topline { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 2px 18px; border-bottom: 1px solid var(--line-strong); }
.setup-step-label { margin: 0 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.setup-world-badge { display: inline-flex; border: 1px solid rgba(239, 161, 183, .32); border-radius: 999px; padding: 6px 10px; color: var(--rose); font-size: 10px; letter-spacing: .1em; }
.setup-return { color: var(--muted); font-size: 11px; }
.setup-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 2px 0; }
.setup-progress-bar { height: 5px; background: var(--line); }
.setup-progress-bar.is-complete { background: var(--rose); }
.setup-wizard-card { margin-top: 34px; padding: 34px; }
.setup-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.setup-card-heading h1 { max-width: 700px; margin: 0; font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: -.07em; }
.setup-step { padding-top: 30px; }
.setup-step-heading { display: flex; align-items: start; gap: 18px; margin-bottom: 28px; }
.setup-step-heading > span { color: var(--rose); font-size: 12px; letter-spacing: .12em; }
.setup-step-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.05em; }
.setup-step-heading p:not(.eyebrow) { max-width: 580px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.setup-step-heading .eyebrow { margin-bottom: 9px; }
.setup-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.setup-card label, .setup-textarea-label { color: var(--muted); }
.setup-card input, .setup-card select, .setup-card textarea { width: 100%; border: 1px solid var(--line-strong); outline: 0; padding: 15px; background: rgba(255, 255, 255, .02); color: var(--ink); font-size: 14px; }
.setup-card input:focus, .setup-card select:focus, .setup-card textarea:focus { border-color: var(--rose); }
.setup-card textarea { resize: vertical; line-height: 1.65; }
.setup-fieldset, .setup-textarea-label, .setup-inline-fieldset { margin: 24px 0 0; }
.setup-fieldset { border: 0; padding: 0; }
.setup-fieldset legend, .setup-legend-row span, .setup-textarea-label { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 700; }
.setup-fieldset > small, .setup-legend-row small { color: var(--faint); font-size: 10px; }
.setup-choice-row, .setup-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.setup-choice-grid { grid-template-columns: repeat(2, 1fr); }
.setup-choice { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.setup-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.setup-choice span { display: block; border: 1px solid var(--line-strong); padding: 13px 14px; color: var(--muted); font-size: 12px; text-align: center; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.setup-choice:has(input:checked) span { border-color: var(--rose); background: rgba(239, 161, 183, .13); color: var(--rose); }
.setup-fieldset + .setup-textarea-label { margin-top: 24px; }
.setup-legend-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.setup-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--muted); font-size: 11px; }
.setup-chip:hover, .setup-chip.is-selected { border-color: var(--rose); background: rgba(239, 161, 183, .12); color: var(--rose); }
.setup-chip.is-selected::before { content: "• "; color: var(--green); }
.compact-chips { gap: 6px; }
.compact-chips .setup-chip { padding: 6px 9px; font-size: 10px; }
.setup-inline-fieldset { min-width: 0; }
.shinyu-preset { display: flex; align-items: center; gap: 15px; width: 100%; margin: 28px 0 22px; border: 1px solid var(--line-strong); padding: 17px; background: rgba(255, 255, 255, .025); color: var(--ink); text-align: left; }
.shinyu-preset:hover, .shinyu-preset.is-selected { border-color: var(--rose); background: rgba(239, 161, 183, .1); }
.target-avatar { width: 48px; height: 48px; }
.target-profile-copy { flex: 1; }
.target-profile-copy span, .target-profile-copy strong, .target-profile-copy small { display: block; }
.target-profile-copy span, .target-profile-copy small { color: var(--muted); font-size: 10px; }
.target-profile-copy strong { margin: 4px 0; font-size: 16px; }
.shinyu-preset b { color: var(--rose); font-size: 11px; font-weight: 600; }
.target-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.target-facts div { display: grid; gap: 7px; min-height: 72px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px; }
.target-facts span { color: var(--faint); font-size: 10px; }
.target-facts strong { color: var(--cream); font-size: 11px; font-weight: 500; }
.setup-note, .relationship-preview { margin-top: 24px; border-left: 2px solid var(--rose-deep); padding: 13px 15px; background: rgba(239, 161, 183, .05); }
.setup-note span, .relationship-preview span { color: var(--rose); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.setup-note p, .relationship-preview p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.relationship-preview strong { display: block; margin-top: 8px; color: var(--cream); font-size: 15px; }
.scale-choice-grid .setup-choice span { padding: 16px; font-size: 13px; }
.setup-navigation { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.setup-back-button { min-width: 130px; border: 1px solid var(--line-strong); padding: 12px 16px; background: transparent; color: var(--muted); }
.setup-back-button:not(:disabled):hover { border-color: var(--rose); color: var(--rose); }
.setup-back-button:disabled { cursor: not-allowed; opacity: .35; }
.setup-next-button { width: auto; min-width: 190px; }

.phone-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; min-height: 760px; padding: 42px 3vw 70px; }
.surface-context { display: flex; align-items: end; justify-content: space-between; gap: 28px; width: 100%; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.surface-context .eyebrow { margin-bottom: 9px; }
.surface-context-copy { margin: 0; color: var(--muted); font-size: 14px; }
.phone-page-intro { align-self: center; }
.phone-page-intro > p:not(.eyebrow) { max-width: 420px; margin: 29px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.phone-page-meta { display: flex; gap: 12px; margin-top: 44px; color: var(--faint); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.phone-context .phone-page-meta { margin-top: 0; }
.phone-page-meta span + span { padding-left: 12px; border-left: 1px solid var(--line); }
.phone-stage { position: relative; display: grid; place-items: center; min-height: 670px; }
.ambient { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(3px); opacity: .26; pointer-events: none; }
.ambient-one { top: 10%; left: 12%; background: #9a5979; }
.ambient-two { right: 8%; bottom: 8%; background: #69547d; }
.phone-device { position: relative; z-index: 1; width: min(100%, 450px); aspect-ratio: .505; padding: 10px; border-radius: 50px; background: #27242b; box-shadow: 28px 34px 80px rgba(0, 0, 0, .48), -10px -10px 28px rgba(255, 255, 255, .03); }
.phone-frame { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); border-radius: 38px; background: #18151c; }
.phone-camera { position: absolute; z-index: 3; top: 7px; left: 50%; display: flex; gap: 7px; width: 82px; height: 23px; align-items: center; justify-content: center; border-radius: 20px; background: #0a090d; transform: translateX(-50%); }
.phone-camera i { width: 7px; height: 7px; border-radius: 50%; background: #25222a; box-shadow: inset 0 0 0 2px #121117; }
.phone-statusbar { display: flex; justify-content: space-between; padding: 15px 19px 8px; background: #19161d; color: #c5bec7; font-size: 9px; }
.phone-screen { display: flex; flex: 1; min-height: 0; flex-direction: column; background: linear-gradient(180deg, #241c29, #151219); }
.phone-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: rgba(25, 22, 30, .95); }
.phone-screen-header button, .app-inner-heading button { padding: 0; background: transparent; color: var(--muted); font-size: 15px; }
.phone-screen-header span { color: var(--ink); font-size: 12px; font-weight: 700; }
.phone-screen-header .phone-back { min-width: 64px; color: var(--cream); text-align: left; }
.phone-screen-header .phone-set { min-width: 30px; text-align: right; }
.phone-home-indicator { width: 75px; height: 4px; margin: 8px auto 7px; border-radius: 10px; background: #eee8ef; opacity: .7; }
.screen-scroll { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #574a5d transparent; }
.screen-scroll::-webkit-scrollbar { width: 4px; }.screen-scroll::-webkit-scrollbar-thumb { border-radius: 20px; background: #574a5d; }
.phone-home { display: flex; height: 100%; flex-direction: column; padding: 21px 18px 15px; }
.phone-wallpaper-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: 18px; }
.phone-overline { margin: 0 0 7px; color: var(--rose); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.phone-wallpaper-top h2 { margin: 0; font-size: 22px; letter-spacing: -.07em; }.phone-wallpaper-top p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }.weather-mark { display: grid; justify-items: end; gap: 3px; color: var(--cream); font-size: 21px; }.weather-mark small { color: var(--muted); font-size: 9px; }
.phone-feature { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px; border: 1px solid rgba(239, 161, 183, .24); border-radius: 17px; background: linear-gradient(135deg, rgba(112, 61, 81, .6), rgba(44, 31, 51, .82)); text-align: left; }.phone-feature > div:nth-child(2) { flex: 1; }.phone-feature span, .phone-feature strong, .phone-feature small { display: block; }.phone-feature span { color: var(--rose); font-size: 8px; letter-spacing: .1em; }.phone-feature strong { margin: 4px 0; font-size: 11px; }.phone-feature small { color: var(--muted); font-size: 9px; }.phone-feature b { color: var(--rose); font-size: 18px; }
.phone-section-title { display: flex; justify-content: space-between; margin: 21px 0 9px; color: var(--cream); font-size: 9px; letter-spacing: .14em; }
.phone-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.phone-app-tile { min-height: 70px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .055); text-align: left; transition: transform .2s ease, background .2s ease; }.phone-app-tile:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }.phone-app-tile span { display: block; margin-bottom: 9px; color: var(--rose); font-size: 18px; }.phone-app-tile strong { display: block; font-size: 11px; }.phone-app-tile small, .phone-dock button small { display: none; }.app-moments span { color: #c8b9ff; }.app-weibo span { color: #f2c36d; }.app-album span { color: #93d8cc; }.app-calendar span { color: #b9b6ff; }
.phone-quote { margin-top: 11px; padding: 12px; border-radius: 14px; background: rgba(255, 242, 215, .08); }.phone-quote span { color: var(--faint); font-size: 8px; letter-spacing: .1em; }.phone-quote p { margin: 7px 0 0; color: var(--cream); font-size: 10px; line-height: 1.6; }
.phone-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); }.phone-dock button { display: grid; justify-items: center; padding: 3px; background: transparent; color: var(--faint); }.phone-dock button span { font-size: 18px; line-height: 18px; }.phone-dock button.is-active, .phone-dock button:hover { color: var(--rose); }
.phone-app-screen { display: flex; flex: 1; min-height: 0; flex-direction: column; }.app-inner-heading { display: flex; align-items: center; gap: 10px; padding: 14px 17px 10px; }.app-inner-heading > button:last-child { margin-left: auto; }.chat-profile { display: flex; align-items: center; gap: 9px; }.chat-profile .avatar { width: 31px; height: 31px; font-size: 11px; }.chat-profile strong { margin: 0; font-size: 11px; }.chat-profile small { font-size: 8px; }.simple-heading { justify-content: space-between; }.simple-heading > div { flex: 1; }.simple-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.06em; }.simple-heading .phone-overline { margin-bottom: 3px; }.chat-meta { display: flex; justify-content: space-between; padding: 0 17px 11px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 8px; }.messages-list { flex: 1; overflow-y: auto; padding: 16px 15px; }.empty-chat { display: grid; align-content: center; justify-items: center; height: 100%; min-height: 230px; color: var(--muted); text-align: center; }.empty-symbol { color: var(--rose); font-size: 31px; }.empty-chat p { margin: 12px 0 3px; color: var(--ink); font-size: 12px; }.empty-chat small { color: var(--faint); font-size: 9px; }.message-row { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 11px; }.message-row.is-user { flex-direction: row-reverse; }.message-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; color: #3b2830; background: var(--cream); font-size: 8px; font-weight: 800; }.is-user .message-avatar { color: #342942; background: #cdb9ff; }.message-bubble { max-width: 78%; padding: 9px 11px; border-radius: 13px 13px 13px 3px; background: rgba(255, 255, 255, .085); color: #eee8f2; font-size: 11px; line-height: 1.65; }.is-user .message-bubble { border-radius: 13px 13px 3px 13px; background: var(--rose); color: #34202b; }.composer { display: flex; gap: 7px; padding: 9px 13px 11px; border-top: 1px solid var(--line); background: rgba(25, 22, 33, .92); }.composer input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; outline: 0; padding: 8px 10px; background: rgba(0, 0, 0, .16); color: var(--ink); font-size: 10px; }.composer input:focus { border-color: var(--rose); }.composer button { width: 34px; border-radius: 11px; background: var(--rose); color: #34202b; font-weight: 800; }.composer button:disabled { opacity: .5; }.typing { display: flex; gap: 3px; padding: 11px; }.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--rose); animation: pulse 1s infinite alternate; }.typing i:nth-child(2) { animation-delay: .18s; }.typing i:nth-child(3) { animation-delay: .36s; } @keyframes pulse { to { opacity: .2; transform: translateY(-2px); } }.inline-error { margin: 0 13px 7px; padding: 8px 9px; border-radius: 9px; background: rgba(255, 120, 120, .12); color: #ffb5b5; font-size: 9px; }
.composer-wrap { position: relative; flex: 0 0 auto; border-top: 1px solid var(--line); background: rgba(25, 22, 33, .96); }.composer-wrap .composer { border-top: 0; }.new-chat-message { display: block; width: fit-content; max-width: calc(100% - 26px); margin: 8px auto 0; border: 1px solid rgba(239, 161, 183, .42); border-radius: 999px; padding: 6px 10px; background: rgba(112, 61, 81, .34); color: var(--cream); font-size: 8px; }.new-chat-message:hover { border-color: var(--rose); color: var(--rose); }.chat-plus-button { flex: 0 0 31px; width: 31px !important; border: 1px solid var(--line); border-radius: 10px !important; background: transparent !important; color: var(--cream) !important; font-size: 18px; line-height: 1; }.chat-plus-button:hover { border-color: var(--rose); color: var(--rose) !important; }.chat-tools { display: flex; gap: 7px; padding: 9px 13px 2px; border-bottom: 1px solid var(--line); }.chat-tool { display: inline-flex; width: auto !important; min-width: 0; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .05) !important; color: var(--cream) !important; font-size: 9px; }.chat-tool:hover { border-color: var(--rose); }.chat-tool span { color: var(--rose); font-size: 14px; }.chat-tools input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.chat-pending-image { display: flex; align-items: center; gap: 8px; padding: 8px 13px 0; color: var(--muted); font-size: 9px; }.chat-pending-image img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }.chat-pending-image span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chat-pending-image button { flex: 0 0 auto; margin-left: auto; padding: 0 4px; background: transparent; color: var(--muted); font-size: 16px; }.message-attachment { display: grid; gap: 5px; max-width: 190px; }.message-attachment img { display: block; width: min(100%, 190px); max-height: 210px; border-radius: 9px; object-fit: cover; }.message-attachment small { color: inherit; font-size: 8px; opacity: .72; }.message-bubble > p { margin: 7px 0 0; }.transfer-card, .red-packet-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 7px; align-items: center; min-width: 132px; }.payment-card-icon { display: grid; grid-row: span 2; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .22); font-size: 14px; }.transfer-card strong, .red-packet-card strong { font-size: 12px; line-height: 1.2; }.transfer-card small, .red-packet-card small { overflow: hidden; color: inherit; font-size: 8px; opacity: .72; text-overflow: ellipsis; white-space: nowrap; }.red-packet-card .payment-card-icon { background: #d56f78; color: #fff1df; }.payment-composer { display: grid; gap: 8px; margin: 0 13px 8px; padding: 11px; border: 1px solid rgba(239, 161, 183, .28); border-radius: 12px; background: rgba(112, 61, 81, .18); }.payment-composer-heading { display: flex; align-items: center; justify-content: space-between; color: var(--cream); font-size: 10px; }.payment-composer-heading button { padding: 0 3px; background: transparent; color: var(--muted); font-size: 16px; }.payment-composer label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; }.payment-composer input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: rgba(0, 0, 0, .16); color: var(--ink); font-size: 10px; }.payment-submit { min-height: 30px; border-radius: 8px; background: var(--rose); color: #34202b; font-size: 9px; font-weight: 800; }
.app-page { padding: 8px 16px 20px; }.trend-card, .feed-card, .calendar-card, .empty-app, .album-empty { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .055); }.trend-card span { color: #f2c36d; font-size: 8px; }.trend-card strong { display: block; margin: 9px 0 6px; font-size: 13px; }.trend-card p, .trend-card small, .feed-card p, .empty-app p, .empty-app small, .album-empty p, .album-empty small { color: var(--muted); font-size: 10px; line-height: 1.7; }.feed-card { margin-top: 10px; }.feed-line { display: flex; align-items: center; gap: 9px; }.feed-line strong, .feed-line small { display: block; }.feed-line strong { font-size: 10px; }.feed-line small { margin-top: 3px; color: var(--muted); font-size: 8px; }.feed-card p { margin: 13px 0 0; }.empty-app, .album-empty { display: grid; justify-items: center; align-content: center; min-height: 330px; margin: 20px 0; text-align: center; }.empty-app h3, .album-empty h3 { margin: 12px 0 0; font-size: 13px; }.empty-app p, .album-empty p { max-width: 220px; margin: 7px 0; }.album-grid-preview { display: grid; grid-template-columns: repeat(3, 42px); gap: 5px; }.album-grid-preview span { display: grid; place-items: center; height: 42px; border-radius: 10px; background: linear-gradient(135deg, rgba(239, 161, 183, .18), rgba(205, 185, 255, .15)); color: var(--rose); font-size: 17px; }.date-badge { color: var(--cream); font-size: 10px; text-align: center; line-height: 1.05; }.date-badge small { font-size: 8px; }.calendar-month { padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.calendar-note { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--line); }.calendar-note:last-child { border: 0; }.calendar-note span { color: var(--rose); font-size: 8px; }.calendar-note strong { font-size: 11px; }.calendar-note small { color: var(--muted); font-size: 9px; }.muted-note span { color: var(--faint); }
.music-screen { position: relative; display: flex; min-height: 0; overflow: hidden; flex-direction: column; }.music-heading { flex: 0 0 auto; }.music-live-dot { color: var(--green); font-size: 8px; letter-spacing: .1em; }.music-scroll { display: flex; min-height: 0; flex: 1; overflow: hidden; flex-direction: column; padding: 9px 16px 20px; }.music-thread-art { position: relative; }.music-relationship-thread { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 344px; overflow: visible; pointer-events: none; }.music-relationship-thread path { fill: none; stroke: rgba(239, 161, 183, .58); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgba(8, 6, 12, .3)); }.music-avatars, .music-vinyl-stage { position: relative; z-index: 2; }.music-avatars { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0 3px; }.music-person { display: grid; justify-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.music-person .avatar { width: 42px; height: 42px; }.music-connection { color: var(--rose); font-size: 19px; }.avatar-image { overflow: hidden; }.avatar-image img { display: block; width: 100%; height: 100%; object-fit: cover; }.avatar-player { color: #342942; background: #cdb9ff; }.music-bubble-area { display: grid; min-height: 58px; place-items: center; margin: 10px 0 6px; text-align: center; }.music-bubble-area > small { color: var(--faint); font-size: 8px; }.music-bubble { position: relative; max-width: 230px; border: 1px solid rgba(239, 161, 183, .4); border-radius: 14px 14px 14px 3px; padding: 9px 11px; background: rgba(112, 61, 81, .48); color: var(--cream); font-size: 10px; line-height: 1.5; animation: musicBubbleIn .25s ease-out; }.music-bubble::before { position: absolute; bottom: 1px; left: -5px; width: 8px; height: 8px; background: rgba(112, 61, 81, .48); content: ""; transform: skewY(-35deg); }.music-artwork { display: grid; width: 136px; height: 136px; place-items: center; margin: 4px auto 12px; border-radius: 17px; background: linear-gradient(145deg, #71506a, #26243f 55%, #c6939e); box-shadow: 0 12px 25px rgba(0, 0, 0, .25); color: rgba(255, 241, 223, .78); font-size: 49px; }.music-song-title { display: grid; gap: 4px; text-align: center; }.music-song-title strong { color: var(--cream); font-size: 14px; }.music-song-title span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.music-progress-row { display: grid; grid-template-columns: 30px 1fr 30px; gap: 7px; align-items: center; margin-top: 15px; color: var(--faint); font-size: 8px; }.music-progress-row input { width: 100%; accent-color: var(--rose); }.music-controls { display: flex; align-items: center; justify-content: center; gap: 23px; padding: 10px 0 15px; }.music-controls button { padding: 3px; background: transparent; color: var(--cream); font-size: 17px; }.music-controls .music-play { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: var(--rose); color: #34202b; font-size: 14px; }.music-upload { display: grid; justify-items: center; gap: 4px; border: 1px dashed rgba(239, 161, 183, .35); padding: 11px; color: var(--muted); cursor: pointer; text-align: center; }.music-upload:hover { border-color: var(--rose); color: var(--cream); }.music-upload span { color: var(--rose); font-size: 17px; }.music-upload strong { font-size: 10px; }.music-upload small { color: var(--faint); font-size: 8px; }.music-upload input, .avatar-setting-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }.music-details { display: grid; gap: 6px; margin-top: 10px; }.music-details label { display: grid; grid-template-columns: 32px 1fr; gap: 5px; align-items: center; color: var(--muted); font-size: 8px; }.music-details input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: rgba(0, 0, 0, .16); color: var(--ink); font-size: 9px; }.music-details button { margin-top: 2px; border-radius: 7px; padding: 7px; background: rgba(239, 161, 183, .18); color: var(--rose); font-size: 9px; }.music-events { display: grid; gap: 5px; margin-top: 12px; }.music-event { display: flex; align-items: start; gap: 5px; }.music-event > span { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--muted); font-size: 7px; }.music-event p { margin: 0; padding: 5px 7px; border-radius: 8px 8px 8px 2px; background: rgba(255, 255, 255, .06); color: var(--muted); font-size: 8px; line-height: 1.45; }.music-event.is-user { flex-direction: row-reverse; }.music-event.is-user p { border-radius: 8px 8px 2px 8px; background: rgba(239, 161, 183, .2); color: var(--cream); }.music-chat-form { display: flex; gap: 5px; margin-top: 10px; }.music-chat-form input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; background: rgba(0, 0, 0, .16); color: var(--ink); font-size: 9px; }.music-chat-form button { width: 27px; border-radius: 8px; background: var(--rose); color: #34202b; }.music-note, .music-inline-error { display: block; margin-top: 8px; color: var(--faint); font-size: 8px; line-height: 1.5; }.music-inline-error { color: #ffb5b5; }.music-feature { margin-top: 10px; }.avatar-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.avatar-setting-card { display: grid; justify-items: center; gap: 6px; border: 1px solid var(--line); padding: 11px 7px; cursor: pointer; text-align: center; }.avatar-setting-card:hover { border-color: var(--rose); }.avatar-setting-card .avatar { width: 42px; height: 42px; }.avatar-setting-card strong { color: var(--ink); font-size: 10px; }.avatar-setting-card small { color: var(--muted); font-size: 8px; }
@keyframes musicBubbleIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes musicDirectoryFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes musicDirectorySheetIn { from { opacity: .4; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

.surface-empty { display: grid; justify-items: center; align-content: center; min-height: 650px; padding: 30px; text-align: center; }.empty-glyph { color: var(--rose); font-size: 54px; }.surface-empty h1 { margin: 0; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.08em; }.surface-empty p:not(.eyebrow) { max-width: 380px; margin: 20px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.8; }.compact-button { width: auto; min-width: 145px; }

.settings-page { padding: 76px 0 100px; }.settings-hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-bottom: 55px; border-bottom: 1px solid var(--line-strong); }.settings-hero p:not(.eyebrow) { max-width: 440px; margin: 27px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.settings-save-id { display: grid; gap: 8px; min-width: 130px; padding-bottom: 3px; }.settings-save-id strong { color: var(--rose); font-size: 13px; letter-spacing: .12em; }.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 25px; }.settings-column { display: grid; align-content: start; gap: 24px; }.settings-section { padding: 25px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); }.settings-section-heading { align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.settings-section-heading > div { display: flex; align-items: baseline; gap: 13px; }.settings-section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.04em; }.section-index { color: var(--rose); font-size: 10px; letter-spacing: .12em; }.section-status { padding-top: 3px; }.settings-section > p { margin: 18px 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.story-library-list { display: grid; gap: 8px; }.story-library-card { display: grid; gap: 6px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; }.story-library-card span { color: var(--rose); font-size: 9px; letter-spacing: .12em; }.story-library-card strong { color: var(--ink); font-size: 14px; font-weight: 600; }.story-library-card small { color: var(--faint); font-size: 10px; }.story-library-card:hover strong, .story-library-card.is-active strong { color: var(--rose); }.story-library-empty { color: var(--faint); }.story-library .text-action { margin-top: 18px; }.upload-dropzone { display: grid; justify-items: center; gap: 7px; min-height: 150px; margin-top: 20px; padding: 24px; border: 1px dashed rgba(239, 161, 183, .38); background: rgba(239, 161, 183, .045); text-align: center; cursor: pointer; }.upload-dropzone:hover { border-color: var(--rose); background: rgba(239, 161, 183, .08); }.upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-icon { color: var(--rose); font-size: 30px; font-weight: 300; }.upload-dropzone strong { font-size: 13px; }.upload-dropzone small { color: var(--faint); font-size: 10px; }.photo-library { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.photo-chip { max-width: 100%; overflow: hidden; border: 1px solid rgba(166, 215, 193, .24); border-radius: 999px; padding: 6px 9px; color: var(--green); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.photo-empty-text { color: var(--faint); font-size: 10px; }.setting-lines { display: grid; }.setting-lines > div { padding: 14px 0; border-bottom: 1px solid var(--line); }.setting-lines > div:last-child { border: 0; }.setting-lines span { color: var(--muted); font-size: 11px; }.setting-lines strong { max-width: 65%; color: var(--ink); font-size: 11px; font-weight: 500; text-align: right; }.text-action, .danger-action { padding: 0; background: transparent; color: var(--rose); font-size: 11px; }.scale-track { padding-top: 21px; }.scale-labels { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: 10px; }.scale-track input { width: 100%; accent-color: var(--rose); }.scale-track p { margin: 11px 0 0; color: var(--faint); font-size: 10px; }.api-ready { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 9px; }.api-ready i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.danger-action { display: block; margin: 32px auto 0; color: #e58b9c; }
.music-library-list { display: grid; gap: 8px; margin: 14px 0; }.music-library-item { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 9px 0; }.music-library-item > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: rgba(239, 161, 183, .14); color: var(--rose); }.music-library-item div { min-width: 0; }.music-library-item strong, .music-library-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.music-library-item strong { color: var(--ink); font-size: 11px; }.music-library-item small, .music-library-empty { color: var(--faint); font-size: 10px; line-height: 1.6; }.music-bulk-dropzone { min-height: 118px; }
.settings-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; padding: 21px 0 0; border-top: 1px solid var(--line-strong); }.settings-save-bar > div { min-width: 0; }.settings-save-bar p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }.settings-save-button { width: auto; min-width: 190px; flex: 0 0 auto; }.settings-save-button span { margin-left: 28px; }
.photo-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.photo-library-card { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }.photo-library-preview { display: grid; width: 54px; height: 54px; place-items: center; overflow: hidden; background: rgba(239, 161, 183, .09); color: var(--rose); }.photo-library-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }.photo-library-copy { min-width: 0; }.photo-library-copy strong, .photo-library-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.photo-library-copy strong { color: var(--ink); font-size: 10px; }.photo-library-copy small { margin-top: 5px; color: var(--faint); font-size: 8px; }.photo-remove-button { align-self: start; padding: 0; background: transparent; color: var(--faint); font-size: 16px; }.photo-remove-button:hover { color: #e58b9c; }.album-empty.has-photos { align-content: start; justify-items: stretch; text-align: left; }.album-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; }.album-photo { min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .05); }.album-photo img, .album-photo > span { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }.album-photo > span { display: grid; place-items: center; background: rgba(239, 161, 183, .1); color: var(--rose); font-size: 22px; }.album-photo figcaption { overflow: hidden; padding: 6px 7px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.moments-form { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .045); }.moments-form textarea { width: 100%; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; line-height: 1.6; }.moments-form textarea::placeholder { color: var(--faint); }.moments-form-footer, .moment-post-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.moments-form-footer small, .moment-post-heading small { color: var(--faint); font-size: 8px; }.moments-form-footer button { min-width: 50px; border-radius: 7px; padding: 7px 10px; background: var(--rose); color: #34202b; font-size: 9px; font-weight: 800; }.phone-inline-notice { margin: 0 0 10px; color: var(--green); font-size: 9px; }.moments-feed { display: grid; gap: 9px; }.moment-post { padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .045); }.moment-post-heading { justify-content: start; }.moment-post-heading .avatar { width: 28px; height: 28px; flex: 0 0 auto; font-size: 10px; }.moment-post-heading strong, .moment-post-heading small { display: block; }.moment-post-heading strong { color: var(--ink); font-size: 10px; }.moment-post p { margin: 10px 0 0; color: var(--cream); font-size: 10px; line-height: 1.7; }.moments-empty { display: grid; justify-items: center; min-height: 240px; align-content: center; padding: 18px; text-align: center; }.moments-empty h3 { margin: 10px 0 0; font-size: 12px; }.moments-empty p { max-width: 200px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }

@media (max-width: 980px) { .site-frame { width: min(100% - 38px, 760px); }.story-layout { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 28px; }.story-actions { position: static; }.phone-page { grid-template-columns: minmax(0, 1fr); gap: 22px; }.settings-layout { gap: 16px; } }
@media (max-width: 700px) { .site-frame { width: min(100% - 30px, 540px); }.site-header { min-height: 83px; gap: 10px; }.header-status { display: none; }.site-footer { grid-template-columns: 1fr; width: calc(100% - 30px); min-height: 62px; }.site-footer > span { display: none; }.bottom-navigation { width: 100%; }.bottom-navigation .surface-link { padding: 10px 8px; }.bottom-navigation .surface-link small { display: none; }.story-page, .settings-page { padding: 47px 0 65px; }.story-intro-row, .settings-hero { display: block; margin-bottom: 38px; }.surface-context { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 18px; }.story-world-note { margin-top: 28px; }.story-masthead { padding: 20px 0 38px; }.story-title { font-size: clamp(40px, 13vw, 62px); }.story-overview-row { grid-template-columns: repeat(3, 1fr); margin-bottom: 30px; }.story-overview-item { padding: 15px 9px 15px 0; }.story-overview-item + .story-overview-item { padding-left: 9px; }.story-overview-item strong { font-size: 11px; }.story-overview-item small { font-size: 9px; }.story-layout { display: flex; flex-direction: column; gap: 30px; }.story-reader, .story-actions { width: 100%; }.story-reader { min-height: 0; }.story-summary { margin-top: 45px; }.story-actions { padding-top: 5px; }.story-setup-page { display: block; min-height: 0; }.story-setup-copy { padding: 25px 0 38px; }.setup-card { padding: 21px; }.phone-page { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 48px 0 65px; }.phone-page-intro { width: 100%; }.phone-page-meta { margin-top: 25px; }.phone-stage { width: 100%; min-height: 0; }.phone-device { width: min(100%, 430px); }.settings-hero p:not(.eyebrow) { margin-top: 22px; }.settings-save-id { margin-top: 26px; }.settings-layout { display: block; padding-top: 0; }.settings-column + .settings-column { margin-top: 16px; }.settings-section { margin-top: 16px; padding: 20px; }.settings-section-heading { gap: 8px; }.settings-section-heading h2 { font-size: 15px; }.settings-section-heading .section-status { text-align: right; } }

.kakao-chat-list { display: grid; gap: 1px; padding: 0 11px 18px; }
.kakao-chat-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 63px; padding: 8px 7px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: transparent; color: var(--ink); text-align: left; }
.kakao-chat-item:hover { background: rgba(255, 255, 255, .055); }
.kakao-chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: rgba(239, 161, 183, .13); }
.kakao-chat-avatar .social-avatar { width: 38px; height: 38px; }
.kakao-chat-copy { min-width: 0; }
.kakao-chat-copy strong, .kakao-chat-copy p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kakao-chat-copy strong { font-size: 11px; }
.kakao-chat-copy p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.kakao-chat-meta { display: grid; justify-items: end; gap: 5px; color: var(--faint); font-size: 8px; }
.kakao-chat-meta b { display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--rose); color: #34202b; font-size: 8px; }
.kakao-contact-lock { margin: 2px 14px 13px; padding: 11px 12px; border: 1px solid rgba(239, 161, 183, .2); border-radius: 11px; background: rgba(239, 161, 183, .06); }
.kakao-contact-lock strong { display: block; color: var(--cream); font-size: 10px; }
.kakao-contact-lock p { margin: 6px 0 7px; color: var(--muted); font-size: 9px; line-height: 1.7; }
.kakao-contact-lock .text-action { padding: 0; color: var(--rose); font-size: 9px; }
.kakao-status { color: #9ddac3; font-size: 8px; }
.social-avatar { width: 31px; height: 31px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; }
.social-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.npc-avatar { display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .28); color: #271f2b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.npc-avatar-teammate-blue { background: #a8c8e8; }.npc-avatar-teammate-green { background: #a9d5c1; }.npc-avatar-teammate-lilac { background: #c5b5e6; }.npc-avatar-teammate-yellow { background: #ead89f; }.npc-avatar-teammate-coral { background: #e9aaa1; }
.npc-avatar-staff-rose { background: #e9b0c2; }.npc-avatar-staff-olive { background: #c4cf9f; }.npc-avatar-friend-sky { background: #a7cfe1; }.npc-avatar-family-peach { background: #efc5a3; }.npc-avatar-family-mint { background: #acd8ca; }
.instagram-tabs, .weverse-group-tabs { display: flex; gap: 5px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
.instagram-tabs button, .weverse-group-tabs button { flex: 1; padding: 7px 5px; border-radius: 7px; background: rgba(255, 255, 255, .045); color: var(--muted); font-size: 9px; }
.instagram-tabs button.is-active, .weverse-group-tabs button.is-active { background: var(--rose); color: #34202b; font-weight: 800; }
.instagram-stories { display: flex; flex: 0 0 auto; gap: 11px; overflow-x: auto; padding: 12px 14px 10px; }
.instagram-story { display: grid; flex: 0 0 47px; justify-items: center; gap: 4px; padding: 0; background: transparent; color: var(--muted); }
.instagram-story-ring { display: grid; width: 39px; height: 39px; padding: 2px; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #f4c46e, #efa1b7, #a69bff); }
.instagram-story-ring .social-avatar { width: 35px; height: 35px; border: 2px solid #211923; }
.instagram-story small { overflow: hidden; width: 47px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.instagram-feed, .weverse-feed { display: grid; gap: 11px; padding: 0 11px 18px; }
.instagram-post, .weverse-post { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .035); }
.instagram-post .feed-line, .weverse-post .feed-line { padding: 10px 11px 8px; }
.feed-more { margin-left: auto; padding: 0 3px; background: transparent; color: var(--faint); }
.instagram-media { position: relative; display: grid; min-height: 198px; aspect-ratio: 1 / .88; place-items: center; overflow: hidden; background: #29202d; }
.instagram-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.social-image-placeholder { display: grid; gap: 8px; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 35% 25%, rgba(239, 161, 183, .25), transparent 38%), #2b2230; color: var(--rose); }
.social-image-placeholder span { font-size: 46px; font-weight: 700; }
.social-image-placeholder small { color: var(--muted); font-size: 9px; }
.instagram-next-image { position: absolute; top: 50%; right: 9px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .4); color: white; transform: translateY(-50%); }
.instagram-image-count { position: absolute; right: 9px; bottom: 8px; padding: 3px 6px; border-radius: 8px; background: rgba(0, 0, 0, .45); color: white; font-size: 8px; }
.instagram-actions, .weverse-actions { display: flex; align-items: center; gap: 14px; padding: 9px 11px 3px; color: var(--muted); font-size: 9px; }
.instagram-actions button, .weverse-actions button { padding: 0; background: transparent; color: inherit; font-size: 16px; }
.instagram-actions button:first-child { color: var(--rose); }
.instagram-actions .save-action { margin-left: auto; }
.instagram-like-count { display: block; padding: 0 11px; color: var(--cream); font-size: 9px; }
.instagram-caption, .weverse-post > p { margin: 7px 11px 0; color: var(--cream); font-size: 10px; line-height: 1.65; }
.instagram-caption strong { margin-right: 4px; }
.instagram-comments, .weverse-comments { display: grid; gap: 4px; padding: 7px 11px 0; color: var(--muted); font-size: 9px; }
.instagram-comments p, .weverse-comments p { margin: 0; }
.weverse-comments .is-artist { color: var(--rose); }
.artist-badge { margin-left: 3px; padding: 2px 4px; border-radius: 4px; background: rgba(239, 161, 183, .18); color: var(--rose); font-size: 7px; font-style: normal; }
.weverse-group-tabs { overflow-x: auto; }
.weverse-group-tabs button { position: relative; flex: 0 0 auto; min-width: 72px; }
.weverse-group-tabs b { margin-left: 4px; color: #34202b; }
.weverse-image-grid, .moment-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 9px 11px 0; overflow: hidden; border-radius: 8px; }
.weverse-image-grid img, .moment-image-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.instagram-comment-form, .weverse-comment-form { display: flex; gap: 6px; margin: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 7px; }
.instagram-comment-form input, .weverse-comment-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; }
.instagram-comment-form button, .weverse-comment-form button { width: 24px; border-radius: 6px; background: transparent; color: var(--rose); font-weight: 800; }
.social-muted { align-self: center; color: var(--faint); font-size: 9px; }
.instagram-screen { position: relative; }
.instagram-compose-trigger { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 1px solid rgba(239, 161, 183, .4); border-radius: 8px; padding: 7px 9px; background: rgba(239, 161, 183, .12); color: var(--rose); font-size: 9px; }
.instagram-compose-trigger span { font-size: 13px; line-height: 9px; }
.instagram-compose-dialog { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; padding: 18px 14px; }
.instagram-compose-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 12, .74); }
.instagram-compose-panel { position: relative; z-index: 1; display: grid; gap: 12px; width: min(100%, 330px); max-height: 90%; overflow: auto; padding: 15px; border: 1px solid rgba(239, 161, 183, .35); border-radius: 15px; background: #211b28; box-shadow: 0 18px 42px rgba(0, 0, 0, .42); }
.instagram-compose-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.instagram-compose-heading h3 { margin: 3px 0 0; color: var(--cream); font-size: 17px; }
.instagram-compose-close { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--cream); font-size: 18px; }
.instagram-compose-panel .instagram-compose { display: grid; gap: 10px; margin: 0; border: 0; padding: 0; }
.instagram-compose textarea { width: 100%; min-height: 108px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: 0; padding: 10px; background: rgba(0, 0, 0, .16); color: var(--ink); font-size: 10px; line-height: 1.6; }
.instagram-compose textarea:focus, .instagram-compose select:focus { border-color: var(--rose); }
.instagram-compose-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.instagram-upload-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 1px dashed rgba(239, 161, 183, .35); border-radius: 8px; color: var(--rose); cursor: pointer; font-size: 10px; }
.instagram-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.instagram-compose select { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; padding: 8px; background: rgba(0, 0, 0, .16); color: var(--cream); font-size: 9px; }
.instagram-compose-preview { display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(166, 215, 193, .24); border-radius: 8px; color: var(--muted); }
.instagram-compose-preview img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; }
.instagram-compose-preview > div { display: grid; min-width: 0; gap: 4px; }
.instagram-compose-preview strong { overflow: hidden; color: var(--cream); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.instagram-compose-preview button { justify-self: start; padding: 0; background: transparent; color: var(--rose); font-size: 8px; }
.instagram-compose-actions { display: flex; justify-content: end; gap: 7px; padding-top: 2px; }
.instagram-compose-actions button { min-width: 62px; border-radius: 8px; padding: 8px 10px; font-size: 9px; }
.instagram-compose-cancel { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.instagram-compose-submit { background: var(--rose); color: #34202b; font-weight: 800; }
.moment-pending-image { position: relative; width: 74px; height: 74px; overflow: hidden; border-radius: 7px; }
.moment-pending-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moment-pending-image button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: white; }
.moment-visibility { display: grid; gap: 3px; color: var(--faint); font-size: 8px; }
.moment-visibility select { border: 0; outline: 0; background: transparent; color: var(--cream); font-size: 9px; }
.moment-image-button { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .06); color: var(--rose); cursor: pointer; font-size: 14px; }
.moment-image-button input { display: none; }
@media (max-width: 700px) { .story-setup-page { padding: 35px 0 88px; }.setup-topline { align-items: flex-start; flex-direction: column; gap: 14px; }.setup-return { display: none; }.setup-progress { gap: 5px; }.setup-wizard-card { margin-top: 24px; padding: 20px; }.setup-card-heading { gap: 12px; padding-bottom: 22px; }.setup-card-heading h1 { font-size: 35px; }.setup-step-heading { gap: 12px; }.setup-step-heading h2 { font-size: 20px; }.setup-field-grid, .setup-choice-row, .setup-choice-grid, .target-facts { grid-template-columns: 1fr; }.setup-choice-row { gap: 7px; }.setup-choice span { padding: 11px; }.target-facts { display: grid; grid-template-columns: repeat(2, 1fr); }.setup-navigation { position: sticky; bottom: 63px; z-index: 4; margin-left: -20px; margin-right: -20px; padding: 14px 20px 0; background: rgba(23, 20, 26, .94); }.setup-next-button { min-width: 0; }.setup-back-button { min-width: 100px; } }
@media (max-width: 700px) { .settings-save-bar { align-items: stretch; flex-direction: column; gap: 16px; }.settings-save-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 700px) { .photo-library { grid-template-columns: 1fr; } }

.proactive-feature { border-color: rgba(166, 215, 193, .24); }.proactive-feature > b { color: var(--green); }.relationship-mood { display: grid; gap: 5px; padding: 15px 0; border-bottom: 1px solid var(--line); }.relationship-mood span, .relationship-mood small { color: var(--muted); font-size: 10px; }.relationship-mood strong { color: var(--rose); font-size: 18px; }.relationship-metrics { display: grid; gap: 12px; padding-top: 16px; }.relationship-metric { display: grid; gap: 6px; }.relationship-metric > div { display: flex; justify-content: space-between; gap: 12px; }.relationship-metric span { color: var(--muted); font-size: 10px; }.relationship-metric strong { color: var(--cream); font-size: 10px; }.relationship-metric progress { width: 100%; height: 5px; accent-color: var(--rose); }.photo-library-copy { display: grid; gap: 5px; }.photo-metadata-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }.photo-metadata-controls select { min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 3px 4px; background: rgba(0, 0, 0, .18); color: var(--muted); font-size: 8px; }.photo-toggle { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 8px; }.photo-toggle input { accent-color: var(--rose); }.weibo-trends, .weibo-feed { display: grid; gap: 10px; }.weibo-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--faint); font-size: 8px; }.weibo-actions button { padding: 0; background: transparent; color: var(--rose); font-size: 9px; }.weibo-comments { display: grid; gap: 4px; margin-top: 10px; padding: 8px; border-left: 1px solid rgba(239, 161, 183, .24); }.weibo-comments p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.weibo-comments strong { color: var(--cream); }.weibo-comment-form { display: flex; gap: 5px; margin-top: 10px; }.weibo-comment-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px 7px; background: rgba(0, 0, 0, .14); color: var(--ink); font-size: 8px; }.weibo-comment-form button { width: 25px; border-radius: 7px; background: var(--rose); color: #34202b; }.calendar-event { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.calendar-event > div { display: grid; gap: 5px; min-width: 0; }.calendar-event span { color: var(--rose); font-size: 8px; }.calendar-event strong { color: var(--ink); font-size: 11px; }.calendar-event small { color: var(--muted); font-size: 8px; line-height: 1.5; }.calendar-event time { flex: 0 0 auto; color: var(--cream); font-size: 9px; }.calendar-event-form { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .04); }.calendar-form-heading { display: flex; justify-content: space-between; gap: 8px; }.calendar-form-heading strong { font-size: 10px; }.calendar-form-heading small { color: var(--faint); font-size: 8px; }.calendar-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.calendar-event-form label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }.calendar-event-form input, .calendar-event-form select { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; padding: 6px 7px; background: rgba(0, 0, 0, .14); color: var(--ink); font-size: 9px; }.calendar-event-form button { margin-top: 3px; border-radius: 7px; padding: 8px; background: var(--rose); color: #34202b; font-size: 9px; font-weight: 800; }

.message-avatar.avatar { width: 23px; height: 23px; font-size: 8px; }.message-avatar.avatar-image { overflow: hidden; }.message-avatar.avatar-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-avatars { align-items: start; }.music-bubble-slot { display: grid; width: 118px; min-height: 69px; align-content: start; justify-items: center; }.music-bubble { width: 100%; box-sizing: border-box; max-width: 118px; padding: 8px 9px; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }.music-bubble-user { border-radius: 12px 12px 3px 12px; background: rgba(205, 185, 255, .28); color: #f4eefe; }.music-bubble-user::before { right: -4px; bottom: 1px; left: auto; background: rgba(205, 185, 255, .28); transform: skewY(35deg); }.music-bubble-assistant { border-radius: 12px 12px 12px 3px; background: rgba(112, 61, 81, .58); }.music-bubble-assistant::before { background: rgba(112, 61, 81, .58); }.music-vinyl-stage { display: grid; min-height: 202px; place-items: center; margin: -10px auto 6px; }.music-vinyl { display: grid; width: 196px; height: 196px; place-items: center; border-radius: 50%; filter: drop-shadow(0 17px 19px rgba(0, 0, 0, .34)); transform: translateY(-8px); }.music-vinyl-record { position: relative; display: grid; width: 196px; height: 196px; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle at center, #0b0a0e 0 3px, #19161d 4px 5px, #08070a 6px 8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 21px rgba(255, 255, 255, .025); }.music-vinyl-record::after { position: absolute; top: 15px; right: 28px; width: 42px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .16); content: ""; filter: blur(4px); transform: rotate(-28deg); }.music-vinyl-label { position: relative; z-index: 1; display: grid; width: 88px; height: 88px; place-items: center; overflow: hidden; border: 3px solid #0b0a0e; border-radius: 50%; background: #3d2d4c; }.music-vinyl-label img { display: block; width: 100%; height: 100%; object-fit: cover; }.music-vinyl-hole { position: absolute; z-index: 2; width: 8px; height: 8px; border: 2px solid #e8d9d1; border-radius: 50%; background: #0b0a0e; }.music-vinyl.is-spinning .music-vinyl-record { animation: musicVinylSpin 8s linear infinite; transform-origin: center; will-change: transform; }.music-upload[hidden], .music-inline-error[hidden] { display: none; }.music-inline-error { min-height: 0; }
.music-avatars { display: grid; gap: 5px; justify-items: center; }
.music-avatar-row, .music-bubble-row { display: grid; grid-template-columns: 118px 19px 118px; gap: 8px; width: 100%; justify-content: center; }
.music-avatar-row { align-items: start; }
.music-avatar-person { display: grid; justify-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.music-avatar-row .music-avatar-person:first-child > * { position: relative; transform: translateX(56px); }
.music-avatar-row .music-avatar-person:last-child > * { position: relative; transform: translateX(-56px); }
.music-avatar-row .music-connection { align-self: start; }
.music-bubble-row { align-items: start; }
.music-bubble-spacer { min-height: 69px; }
.music-relationship-thread path { stroke: url(#music-thread-fade); }
@keyframes musicVinylSpin { to { transform: rotate(360deg); } }
.calendar-event.relationship-moment { margin-left: -5px; margin-right: -5px; padding: 13px 5px; border-left: 2px solid var(--rose); background: rgba(239, 161, 183, .055); }.relationship-evidence { color: var(--cream) !important; }.calendar-replay-button { justify-self: start; margin-top: 3px; padding: 0; background: transparent; color: var(--rose); font-size: 9px; }.calendar-replay-button span { margin-left: 4px; color: var(--cream); }.story-replay-note { display: grid; gap: 7px; margin: 18px 0 0; padding: 11px 12px; border-left: 2px solid var(--rose); color: var(--muted); font-size: 10px; line-height: 1.6; }.story-replay-note .text-action { justify-self: start; }
.contact-exchange-lock { display: grid; justify-items: center; gap: 8px; min-height: 220px; align-content: center; margin: 18px 0; padding: 18px; border: 1px solid rgba(239, 161, 183, .22); background: rgba(255, 255, 255, .035); text-align: center; }.contact-exchange-lock .empty-symbol { margin: 0; color: var(--rose); font-size: 27px; }.contact-exchange-lock strong { color: var(--cream); font-size: 13px; }.contact-exchange-lock p, .contact-exchange-lock small { max-width: 250px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }.contact-exchange-lock small { color: var(--faint); }
.album-photo-button { display: block; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; }.album-photo-button:hover { outline: 1px solid rgba(239, 161, 183, .68); }.album-lightbox { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 18px; }.album-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 12, .82); }.album-lightbox-panel { position: relative; z-index: 1; display: grid; gap: 12px; width: min(100%, 320px); max-height: 92%; overflow: auto; padding: 12px; border: 1px solid rgba(239, 161, 183, .38); border-radius: 15px; background: #211b28; box-shadow: 0 18px 40px rgba(0, 0, 0, .42); }.album-lightbox-panel > img, .album-lightbox-panel > span { display: block; width: 100%; max-height: 56vh; object-fit: contain; }.album-lightbox-panel > span { display: grid; min-height: 180px; place-items: center; background: rgba(239, 161, 183, .1); color: var(--rose); font-size: 32px; }.album-lightbox-close { position: absolute; top: 7px; right: 9px; z-index: 2; width: 27px; height: 27px; border-radius: 50%; background: rgba(16, 13, 20, .72); color: var(--cream); font-size: 18px; }.album-lightbox-info { display: grid; gap: 4px; }.album-lightbox-info strong { color: var(--ink); font-size: 11px; }.album-lightbox-info small { color: var(--muted); font-size: 9px; }.album-lightbox-info .danger-action { margin: 8px 0 0; justify-self: start; font-size: 9px; }
.character-remark-editor { display: grid; gap: 7px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }.character-remark-editor label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }.character-remark-editor input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; background: rgba(0, 0, 0, .14); color: var(--ink); font-size: 10px; }.character-remark-editor small { color: var(--faint); font-size: 8px; line-height: 1.5; }

/* The supplied SVG owns the record artwork; this layer only controls its responsive stage and motion. */
.music-vinyl-stage { min-height: 238px; margin: -24px auto 2px; }
.music-vinyl { width: min(72vw, 250px); height: auto; aspect-ratio: 1; transform: translateY(-13px); }
.music-vinyl-svg { display: block; width: 100%; height: 100%; aspect-ratio: 1; background: transparent; transform-origin: center center; transform-box: fill-box; transition: transform 720ms cubic-bezier(.2, .8, .3, 1); will-change: transform; }
.music-vinyl-stage { min-height: 252px; margin: -18px auto 0; }
.music-vinyl { transform: translateY(6px); }
.music-track-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin: 4px 2px 0; }
.music-track-heading .music-song-title { min-width: 0; flex: 1; text-align: left; }
.music-chat-trigger { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(239, 161, 183, .45); border-radius: 50%; background: transparent; color: var(--rose); font-size: 16px; }
.music-chat-trigger:hover { border-color: var(--rose); background: rgba(239, 161, 183, .12); }
.music-chat-trigger:disabled { border-color: var(--line); color: var(--faint); cursor: not-allowed; }
.music-progress-row { margin-top: 18px; }
.music-controls { gap: 18px; padding: 12px 0 16px; }
.music-controls .music-playback-mode, .music-controls .music-directory-toggle { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border-radius: 50%; color: var(--muted); font-size: 15px; }
.music-controls .music-playback-mode:hover, .music-controls .music-directory-toggle:hover { background: rgba(255, 255, 255, .08); color: var(--cream); }
.music-controls .music-play { width: 43px; height: 43px; }
.music-chat-form { align-items: center; margin: 10px 0 0; }
.music-chat-form input { min-height: 35px; font-size: 16px; line-height: 1.2; -webkit-text-size-adjust: 100%; }
.music-chat-form button { display: grid; height: 35px; place-items: center; }
.music-directory-overlay { position: absolute; z-index: 12; inset: 0; display: flex; align-items: flex-end; justify-content: center; animation: musicDirectoryFadeIn .2s ease-out; }
.music-directory-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(8, 6, 12, .58); }
.music-directory { position: relative; z-index: 1; display: grid; gap: 9px; width: 100%; height: min(52%, 330px); max-height: 52%; box-sizing: border-box; margin: 0; padding: 13px 16px max(14px, env(safe-area-inset-bottom)); border: 1px solid rgba(239, 161, 183, .35); border-bottom: 0; border-radius: 19px 19px 0 0; background: #211b28; box-shadow: 0 -16px 35px rgba(0, 0, 0, .35); animation: musicDirectorySheetIn .28s cubic-bezier(.2, .8, .3, 1); }
.music-directory-heading { display: flex; align-items: center; justify-content: space-between; color: var(--cream); font-size: 10px; }
.music-directory-heading button { padding: 0 4px; background: transparent; color: var(--muted); font-size: 18px; }
.music-directory-list { display: grid; min-height: 0; gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #574a5d transparent; }
.music-directory-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 6px; background: transparent; color: var(--muted); text-align: left; }
.music-directory-item:hover, .music-directory-item.is-active { background: rgba(239, 161, 183, .1); color: var(--cream); }
.music-directory-item > span { color: var(--faint); font-size: 8px; }
.music-directory-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.music-directory-item small { overflow: hidden; max-width: 72px; color: var(--faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.music-directory-empty { margin: 0; padding: 9px 6px; color: var(--faint); font-size: 8px; }
.relationship-stage-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; margin-top: 16px; }
.relationship-stage { display: grid; gap: 5px; min-width: 0; padding: 7px 3px; border-top: 2px solid var(--line); color: var(--faint); text-align: center; }
.relationship-stage span { font-size: 7px; }
.relationship-stage strong { overflow-wrap: anywhere; font-size: 8px; font-weight: 500; }
.relationship-stage.is-active { border-color: rgba(239, 161, 183, .45); color: var(--muted); }
.relationship-stage.is-current { border-color: var(--rose); color: var(--rose); }
.relationship-rule { margin: 11px 0 0; color: var(--faint); font-size: 9px; line-height: 1.6; }
.music-chat-trigger.is-locked { border-color: rgba(239, 161, 183, .24); color: var(--muted); }
.music-inline-error { white-space: normal; }
.music-chat-form-hidden { position: fixed; z-index: -1; top: 0; left: -10000px; display: block; width: 1px; height: 1px; overflow: hidden; opacity: .01; pointer-events: none; }
.music-chat-form-hidden input { width: 1px; height: 1px; min-height: 1px; padding: 0; border: 0; font-size: 16px; }
.music-chat-form-hidden button { display: none; }