:root {
  color-scheme: dark;
  --cream: #f6eee0;
  --muted: rgba(246, 238, 224, .66);
  --brass: #d7bd82;
  --brass-bright: #f2dfaf;
  --glass: rgba(24, 19, 14, .68);
  --line: rgba(239, 217, 170, .24);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--cream); background: #100d0a; }

.home-shell { isolation: isolate; position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: linear-gradient(160deg, #4b3421, #14100c); }
.room-layer, .room-grade { position: absolute; z-index: -3; inset: 0; }
.home-idle-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; }
.home-idle-video.is-active { opacity: 1; }
.home-video-bridge { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; pointer-events: none; }
.home-video-bridge.is-visible { opacity: 1; }
.home-video-bridge.is-visible.is-releasing { opacity: 0; transition: opacity .16s ease-out; }
.room-layer { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .home-video-bridge.is-visible.is-releasing { transition: none; } }
.room-fallback .room-layer { background: radial-gradient(circle at 50% 34%, #7b5530, #21160f 62%, #0d0b09); }
.room-fallback .home-idle-video { display: none; }
.room-grade { z-index: -2; background: linear-gradient(180deg, rgba(10,7,4,.38), transparent 25%, rgba(12,8,5,.04) 55%, rgba(8,6,4,.82) 100%), radial-gradient(circle at 50% 55%, transparent 35%, rgba(7,5,3,.34) 100%); pointer-events: none; }

.home-shell > :not(.room-layer):not(.room-grade):not(.departure-toast) { transition: opacity .8s ease, visibility 0s linear .8s; }
.home-shell.is-departing > :not(.room-layer):not(.room-grade):not(.departure-toast) { opacity: 0; visibility: hidden; pointer-events: none; }
.departure-toast { position: absolute; z-index: 20; left: 50%; bottom: max(99px, calc(env(safe-area-inset-bottom) + 92px)); width: max-content; max-width: calc(100% - 48px); padding: 11px 17px; border: 1px solid rgba(246,224,181,.36); border-radius: 18px 18px 18px 5px; background: rgba(24,19,14,.9); color: var(--cream); box-shadow: 0 12px 34px rgba(0,0,0,.4); backdrop-filter: blur(12px); transform: translateX(-50%); font: 13px/1.5 "Songti SC",Georgia,serif; animation: bubble-in .28s ease both; }

.home-header { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 17px 0; }
.character-meta { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(15,12,9,.45); backdrop-filter: blur(12px); box-shadow: 0 8px 25px rgba(0,0,0,.15); }
.character-switcher { display: grid; place-items: center; width: 25px; height: 30px; margin: -3px 0 -3px -5px; padding: 0; border: 0; border-right: 1px solid rgba(239,217,170,.2); background: transparent; color: var(--brass-bright); cursor: pointer; }
.character-switcher svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.character-meta strong, .character-meta small { display: block; }
.character-meta strong { font-family: "Songti SC", Georgia, serif; font-size: 15px; letter-spacing: .08em; }
.character-meta small { margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #c2d691; box-shadow: 0 0 10px rgba(194,214,145,.8); }
.header-actions { display: flex; align-items: center; gap: 7px; }
.intimacy-button { position: relative; display: grid; grid-template-columns: 23px auto; gap: 7px; align-items: center; min-height: 48px; min-width: 82px; padding: 7px 12px 7px 10px; border: 0; border-radius: 15px; background: rgba(15,12,9,.52); backdrop-filter: blur(12px); cursor: pointer; text-align: left; }
.intimacy-button svg { width: 22px; fill: rgba(211,153,117,.84); stroke: rgba(255,224,196,.78); stroke-width: 1.1; }
.intimacy-button small, .intimacy-button b { display: block; }
.intimacy-button small { color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.intimacy-button b { margin-top: 2px; color: var(--brass-bright); font-size: 14px; }
.intimacy-button i { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.1); }
.intimacy-button i::after { content: ""; display: block; width: 58%; height: 100%; background: var(--brass); }
.settings-button { display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(15,12,9,.52); color: var(--brass-bright); backdrop-filter: blur(12px); cursor: pointer; }
.settings-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.scene-stage { position: absolute; z-index: 1; inset: 76px 54px 112px; pointer-events: none; }
.character-figure { display: none; }
.character-glow { display: none; }
.character-video-loading { position: absolute; z-index: 3; top: -4%; right: 8%; bottom: -3%; left: 8%; display: grid; place-items: center; opacity: 0; overflow: hidden; pointer-events: none; backdrop-filter: blur(16px) saturate(.78); -webkit-backdrop-filter: blur(16px) saturate(.78); mask-image: radial-gradient(ellipse 48% 52% at 50% 43%, #000 48%, rgba(0,0,0,.86) 65%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 48% 52% at 50% 43%, #000 48%, rgba(0,0,0,.86) 65%, transparent 100%); transition: opacity .2s ease; }
.character-video-loading::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 42% 48% at 50% 43%, rgba(30,20,17,.16), rgba(24,16,14,.26) 68%, transparent 100%); }
.character-video-loading span { position: relative; z-index: 1; margin-top: 18%; padding: 7px 11px; border-radius: 999px; background: rgba(24,17,17,.56); color: rgba(255,249,247,.78); font-size: 8px; letter-spacing: .16em; opacity: 0; transition: opacity .2s ease .12s; }
#home-app.is-character-video-loading .character-video-loading { opacity: 1; }
#home-app.is-character-video-loading .character-video-loading span { opacity: 1; }
.character-fallback { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); display: grid; gap: 5px; min-width: 180px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); text-align: center; }
.character-fallback span { color: var(--muted); font-size: 11px; }
.character-response { position: absolute; z-index: 5; top: 20%; left: 50%; width: min(78vw, 290px); margin: 0; transform: translateX(-50%); padding: 12px 14px; border: 1px solid rgba(246,224,181,.36); border-radius: 15px 15px 15px 4px; background: rgba(24,19,14,.84); box-shadow: 0 10px 30px rgba(0,0,0,.28); backdrop-filter: blur(12px); color: var(--cream); font-family: "Songti SC", Georgia, serif; font-size: 13px; line-height: 1.6; text-align: center; animation: bubble-in .28s ease both; }
.scene-stage.is-reacting .character-figure { animation: react .48s ease; }
.cheek-blush { position: absolute; z-index: 4; left: var(--blush-left, 50%); top: var(--blush-top, 27%); display: flex; justify-content: space-between; width: var(--blush-width, 76px); opacity: 0; transform: translateX(-50%) scale(.72); transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
#home-app[data-character="cheng"] { --blush-left: 50%; --blush-top: 6%; --blush-width: 72px; }
#home-app[data-character="yan"] { --blush-left: 50%; --blush-top: 10%; --blush-width: 70px; }
#home-app[data-character="wen"] { --blush-left: 50%; --blush-top: 3%; --blush-width: 72px; }
.cheek-blush i { width: 24px; height: 13px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,81,112,.9), rgba(255,96,126,.52) 48%, transparent 72%); filter: blur(.4px); box-shadow: 0 0 15px rgba(255,83,119,.44); }
.scene-stage.is-blushing .cheek-blush { opacity: 1; transform: translateX(-50%) scale(1); animation: blush-pulse 1.8s ease-in-out infinite; }

.conversation-shortcuts { position: absolute; z-index: 5; right: 15px; bottom: 13%; left: 15px; display: flex; justify-content: space-between; pointer-events: auto; }
.conversation-shortcuts button { display: grid; place-items: center; gap: 4px; width: 48px; min-height: 52px; padding: 6px 4px; border: 0; border-radius: 18px; background: rgba(25,17,18,.62); color: #fff8f4; box-shadow: 0 10px 28px rgba(15,8,10,.3); backdrop-filter: blur(12px); cursor: pointer; pointer-events: auto; }
.conversation-shortcuts svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.conversation-shortcuts span { font-size: 8px; letter-spacing: .08em; }
.voice-call { position: absolute; z-index: 10; inset: 0; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; padding: max(116px,calc(env(safe-area-inset-top) + 90px)) 24px max(42px,calc(env(safe-area-inset-bottom) + 26px)); background: linear-gradient(180deg,rgba(18,10,14,.4),rgba(13,8,11,.1) 42%,rgba(13,8,11,.78)); color: #fff9f7; text-align: center; }
.voice-call-copy { align-self: start; text-shadow: 0 2px 16px rgba(0,0,0,.7); }.voice-call-copy small { color: #e5c9d0; font-size: 7px; letter-spacing: .18em; }.voice-call-copy h2 { margin: 10px 0 3px; font: 500 27px "Songti SC",Georgia,serif; }.voice-call-copy p { margin: 0; color: rgba(255,249,247,.72); font-size: 9px; }.voice-call-copy time { display: block; margin-top: 9px; font: 13px Georgia,serif; letter-spacing: .12em; }
.voice-call-wave { display: flex; align-items: center; gap: 5px; height: 42px; }.voice-call-wave i { width: 3px; height: 12px; border-radius: 4px; background: #f2d9df; animation: voice-wave 1.1s ease-in-out infinite alternate; box-shadow: 0 0 10px rgba(242,217,223,.45); }.voice-call-wave i:nth-child(2),.voice-call-wave i:nth-child(4){animation-delay:-.55s;height:22px}.voice-call-wave i:nth-child(3){animation-delay:-.28s;height:32px}
#voice-call-end { display: grid; place-items: center; gap: 6px; width: 68px; height: 68px; margin-top: 20px; border: 0; border-radius: 50%; background: #b94f59; color: white; box-shadow: 0 12px 35px rgba(90,24,34,.45); cursor: pointer; }#voice-call-end svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}#voice-call-end span{font-size:8px}
.home-shell.is-voice-calling > :not(.room-layer):not(.room-grade):not(.voice-call) { opacity: 0; visibility: hidden; pointer-events: none; }.home-shell.is-voice-calling .room-grade { background: linear-gradient(180deg,rgba(15,8,12,.58),transparent 46%,rgba(12,7,10,.72)); }
@keyframes voice-wave { to { transform: scaleY(.42); opacity: .5; } }

.action-rail, .archive-rail { position: absolute; z-index: 3; top: 22%; display: grid; gap: 8px; }
.action-rail { left: 12px; gap: 4px; }
.archive-rail { right: 12px; }
.rail-button, .archive-button { width: 58px; min-height: 62px; padding: 5px 3px; border: 1px solid var(--line); border-radius: 17px; background: rgba(20,16,12,.53); box-shadow: 0 8px 25px rgba(0,0,0,.2); backdrop-filter: blur(12px); cursor: pointer; color: rgba(255,250,240,.8); }
.rail-button { display: grid; place-items: center; gap: 3px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; font-size: 9px; }
.icon-disc { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, rgba(229,204,151,.22), rgba(118,85,45,.1)); }
.rail-button svg, .archive-button svg, .coordinate-button svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-button svg { width: 21px; height: 21px; color: var(--brass-bright); }
.room-action { color: #ff88aa; }
.room-action .icon-disc { background: radial-gradient(circle, rgba(255,111,151,.24), rgba(255,92,136,.07) 66%, transparent 70%); }
.room-action svg { color: #ff7ea5; filter: drop-shadow(0 0 7px rgba(255,92,136,.45)); }
.rail-button:disabled { opacity: .55; cursor: wait; }
.archive-button { display: grid; place-items: center; gap: 3px; min-height: 55px; color: rgba(255,250,240,.76); font-size: 8px; line-height: 1.2; }
.archive-button svg { width: 23px; height: 23px; color: var(--brass); }

.coordinate-button { position: absolute; z-index: 4; left: 15px; right: 15px; bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px)); display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; min-height: 70px; padding: 10px 13px; border: 1px solid rgba(239,217,170,.38); border-radius: 19px; background: linear-gradient(125deg, rgba(40,30,21,.9), rgba(19,16,13,.82)); box-shadow: 0 15px 40px rgba(0,0,0,.38); backdrop-filter: blur(16px); cursor: pointer; text-align: left; }
.coordinate-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: var(--brass); background: rgba(215,189,130,.08); }
.coordinate-icon svg { width: 22px; }
.coordinate-copy small, .coordinate-copy strong { display: block; }
.coordinate-copy small { color: var(--brass); font-size: 8px; letter-spacing: .16em; }
.coordinate-copy strong { margin-top: 5px; font-family: "Songti SC", Georgia, serif; font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.coordinate-lock { display: grid; justify-items: center; gap: 3px; color: rgba(255,255,255,.52); }
.coordinate-lock svg { width: 16px; }
.coordinate-lock small { font-size: 8px; white-space: nowrap; }

.sheet-backdrop { position: absolute; z-index: 7; inset: 0; background: rgba(6,4,3,.58); backdrop-filter: blur(5px); animation: fade .22s ease both; }
.home-sheet { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; max-height: min(68svh, 580px); overflow-y: auto; padding: 10px 22px max(25px, calc(env(safe-area-inset-bottom) + 16px)); border: 1px solid rgba(239,217,170,.2); border-bottom: 0; border-radius: 27px 27px 0 0; background: rgba(24,19,15,.97); box-shadow: 0 -25px 70px rgba(0,0,0,.5); animation: sheet-up .32s cubic-bezier(.2,.8,.2,1) both; }
.sheet-handle { width: 35px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(255,255,255,.18); }
.sheet-close { position: absolute; top: 17px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 22px; cursor: pointer; }
.sheet-eyebrow { margin: 10px 0 8px; color: var(--brass); font-size: 9px; letter-spacing: .18em; }
.home-sheet h2 { margin: 0; font-family: "Songti SC", Georgia, serif; font-size: 27px; font-weight: 500; }
.sheet-description { margin: 10px 48px 19px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.sheet-content { display: grid; gap: 9px; }
.archive-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 59px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); }
.archive-item small, .archive-item strong { display: block; }
.archive-item small { margin-bottom: 4px; color: var(--brass); font-size: 8px; letter-spacing: .08em; }
.archive-item strong { font-size: 12px; font-weight: 500; }
.archive-item i { color: rgba(255,255,255,.35); font-style: normal; }
.plan-calendar { margin-bottom: 9px; padding: 14px 12px 11px; border: 1px solid rgba(215,189,130,.18); border-radius: 18px; background: linear-gradient(145deg, rgba(215,189,130,.09), rgba(255,255,255,.025)); }
.calendar-heading, .schedule-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calendar-heading { margin-bottom: 12px; }
.calendar-heading strong, .schedule-heading strong { font-size: 11px; font-weight: 600; }
.calendar-heading small, .schedule-heading small { color: var(--muted); font-size: 8px; }
.plan-calendar ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.calendar-day { position: relative; display: grid; place-items: center; gap: 4px; min-width: 0; padding: 6px 1px 8px; border: 1px solid transparent; border-radius: 12px; color: rgba(255,250,240,.66); }
.calendar-day small { font-size: 7px; }
.calendar-day strong { font-family: Georgia, serif; font-size: 13px; font-weight: 500; }
.calendar-day i { position: absolute; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; background: transparent; }
.calendar-day.is-past { color: rgba(255,255,255,.25); }
.calendar-day.is-today { border-color: rgba(255,194,117,.65); background: #d98349; color: #fff8ed; box-shadow: 0 6px 18px rgba(217,131,73,.28); }
.calendar-day.is-today small { font-size: 6px; }
.calendar-day.is-planned { border-color: rgba(215,189,130,.42); color: var(--brass-bright); }
.calendar-day.has-plan i { background: var(--brass-bright); box-shadow: 0 0 7px var(--brass); }
.schedule-heading { margin: 14px 2px 8px; }
.plan-list { display: grid; gap: 8px; }
.plan-item { display: grid; grid-template-columns: 44px 1fr 51px; align-items: center; gap: 10px; min-height: 76px; padding: 9px 10px 9px 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 16px; background: rgba(255,255,255,.04); }
.plan-item time { color: var(--brass-bright); font-family: Georgia, serif; font-size: 13px; }
.plan-copy { min-width: 0; }
.plan-copy > span, .plan-copy strong, .plan-copy small { display: block; }
.plan-owner-mark { display: flex !important; align-items: center; gap: 4px; width: max-content; margin-bottom: 3px; font-size: 7px; letter-spacing: .06em; }
.plan-owner-mark svg { width: 18px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.plan-owner-user { border-color: rgba(197,132,146,.2); background: linear-gradient(110deg,rgba(166,92,111,.1),rgba(255,255,255,.035)); }
.plan-owner-user .plan-owner-mark { color: #dc9ba7; }
.plan-owner-user .plan-owner-self { fill: currentColor; }
.plan-owner-character { border-color: rgba(198,160,101,.22); background: linear-gradient(110deg,rgba(151,116,64,.12),rgba(255,255,255,.03)); }
.plan-owner-character .plan-owner-mark { color: #d2ad72; }
.plan-owner-character .plan-owner-other { fill: currentColor; }
.plan-owner-joint { border-color: rgba(143,100,104,.28); background: linear-gradient(110deg,rgba(143,100,104,.14),rgba(255,255,255,.04)); }
.plan-owner-joint .plan-owner-mark { color: #9b6870; }
.plan-owner-joint :is(.plan-owner-self,.plan-owner-other) { fill: currentColor; }
.plan-status { margin-bottom: 3px; color: #c99060; font-size: 7px; letter-spacing: .06em; }
.plan-copy strong { font-size: 13px; font-weight: 550; }
.plan-copy small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.plan-item.is-complete { opacity: .56; background: rgba(255,255,255,.025); }
.plan-item.is-complete .plan-status { color: #9bbca4; }
.plan-item.is-complete time, .plan-item.is-complete strong { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.plan-sticker { display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid rgba(215,189,130,.22); border-radius: 16px 19px 15px 20px; background: radial-gradient(circle at 35% 25%, rgba(255,224,165,.22), rgba(215,132,73,.08) 55%, transparent 70%); color: var(--brass-bright); transform-origin: 50% 85%; animation: sticker-float 2.8s ease-in-out infinite; }
.plan-sticker svg { width: 36px; height: 36px; overflow: visible; fill: rgba(217,151,91,.14); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sticker-book { animation-name: sticker-wiggle; }
.sticker-meal svg path:nth-child(2) { animation: steam 1.8s ease-in-out infinite; }
.sticker-paw { animation-name: paw-bounce; animation-duration: 1.9s; }
.sticker-star { animation-name: star-glow; animation-duration: 2.2s; }
.sticker-moon { animation-duration: 3.5s; }
.plan-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(104,72,78,.1); }
.plan-actions button { min-height: 29px; padding: 0 10px; border: 1px solid rgba(104,72,78,.2); border-radius: 13px; background: rgba(255,255,255,.62); color: #68484e; font: 8px inherit; cursor: pointer; }
.plan-actions button[data-plan-action="confirm"],.plan-actions button[data-plan-action="complete"] { border-color: transparent; background: #8f6468; color: #fff9f7; }
.plan-actions button[data-plan-action="delete"] { color: #9a514e; }
.plan-actions button:disabled { cursor: wait; opacity: .55; }
.future-plan-section { margin-top: 16px; }
.future-plan-empty,.future-data-status { margin: 0; padding: 15px; border: 1px dashed rgba(104,72,78,.18); border-radius: 16px; color: #75696d; font-size: 9px; line-height: 1.6; text-align: center; }
.future-data-status:empty { display: none; }
.future-data-status.is-error { color: #9a514e; }
.future-data-status button { margin-left: 7px; padding: 5px 9px; border: 1px solid rgba(104,72,78,.25); border-radius: 11px; background: transparent; color: #68484e; font: inherit; cursor: pointer; }
.coordinate-preview { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: radial-gradient(circle at 90% 10%, rgba(215,189,130,.16), transparent 38%), rgba(255,255,255,.035); }
.coordinate-preview b { color: var(--brass-bright); font-family: Georgia, serif; font-size: 19px; letter-spacing: .08em; }
.coordinate-preview p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.intimacy-card { display: grid; grid-template-columns: 72px 1fr; gap: 15px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.035); }
.intimacy-ring { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(var(--brass) 0 58%, rgba(255,255,255,.1) 58%); }
.intimacy-ring::before { content: "23"; display: grid; place-items: center; width: 59px; height: 59px; border-radius: 50%; background: #211a14; font-family: Georgia, serif; font-size: 21px; }
.intimacy-card strong { display: block; margin-bottom: 5px; }
.intimacy-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.intimacy-summary { display: grid; grid-template-columns: minmax(92px, .7fr) 1.5fr; align-items: stretch; overflow: hidden; border: 1px solid rgba(216,196,192,.2); border-radius: 19px; background: linear-gradient(145deg, rgba(180,118,133,.13), rgba(255,255,255,.025)); }
.intimacy-overview { display: grid; place-content: center; min-height: 112px; padding: 14px; border-right: 1px solid rgba(216,196,192,.16); text-align: center; }
.intimacy-overview > span { display: block; color: var(--w37-rose-soft); font-size: 25px; line-height: 1; }
.intimacy-overview strong { display: block; margin: 5px 0 2px; color: var(--cream); font: 30px Georgia, serif; }
.intimacy-overview b { color: var(--w37-rose-soft); font: 500 13px "Songti SC", Georgia, serif; }
.intimacy-maintenance { display: flex; flex-wrap: wrap; align-content: center; gap: 3px 8px; padding: 15px; color: var(--muted); font-size: 9px; line-height: 1.65; }
.intimacy-maintenance strong { color: var(--cream); }
.intimacy-maintenance span { color: var(--muted); }
.intimacy-maintenance p { flex-basis: 100%; margin: 4px 0 0; }
.intimacy-gift-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; color: var(--muted); font-size: 9px; }
.intimacy-gift-heading b { color: var(--brass-bright); font-weight: 500; }
.intimacy-gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intimacy-gift { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; min-height: 55px; padding: 9px; border: 1px solid rgba(216,196,192,.2); border-radius: 15px; background: rgba(255,255,255,.035); color: var(--cream); text-align: left; cursor: pointer; }
.intimacy-gift.is-selected { border-color: var(--w37-rose-soft); background: rgba(180,118,133,.17); box-shadow: 0 0 0 2px rgba(180,118,133,.08); }
.intimacy-gift > span { font-size: 20px; }
.intimacy-gift small, .intimacy-gift b { display: block; }
.intimacy-gift small { color: var(--muted); font-size: 8px; }
.intimacy-gift b { margin-top: 3px; color: var(--brass-bright); font-size: 9px; }
.intimacy-gift-confirm { min-height: 43px; border: 0; border-radius: 14px; background: linear-gradient(100deg, var(--w37-rose-deep), var(--w37-rose)); color: #fff; font-weight: 650; cursor: pointer; }
.intimacy-gift-confirm:disabled { opacity: .45; cursor: default; }
.intimacy-result { padding: 21px 15px; border: 1px solid rgba(216,196,192,.22); border-radius: 18px; background: rgba(180,118,133,.12); text-align: center; }
.intimacy-result span { font-size: 31px; }
.intimacy-result strong { display: block; margin: 8px 0 5px; font: 500 16px "Songti SC", Georgia, serif; }
.intimacy-result p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.intimacy-result b { color: var(--brass-bright); }

.story-actions { position: absolute; z-index: 4; left: 15px; right: 15px; bottom: max(17px, calc(env(safe-area-inset-bottom) + 10px)); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(105px, .55fr); gap: 8px; }
.story-actions .coordinate-button { position: static; min-width: 0; grid-template-columns: 38px 1fr; }
.escape-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 70px; padding: 9px 8px; border: 1px solid rgba(153,205,205,.3); border-radius: 19px; background: linear-gradient(135deg, rgba(30,62,64,.9), rgba(15,28,30,.86)); box-shadow: 0 15px 40px rgba(0,0,0,.38); backdrop-filter: blur(16px); cursor: pointer; text-align: center; }
.escape-button span, .escape-button small, .escape-button strong { display: block; }
.escape-button span { color: #a9d2cf; font-size: 20px; line-height: 1; }
.escape-button small { margin: 5px 0 3px; color: #9fc7c4; font-size: 7px; letter-spacing: .1em; }
.escape-button strong { font-family: "Songti SC", Georgia, serif; font-size: 12px; font-weight: 500; white-space: nowrap; }
.escape-run-icon { width: 27px; height: 27px; fill: none; stroke: #a9d2cf; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(169,210,207,.3)); }

/* Soft jewelry visual layer: preserve the existing responsive layout and behavior. */
.story-actions .w37-action { min-width: 0; min-height: 72px; grid-template-columns: 42px minmax(0,1fr) auto; padding: 9px 11px; }
.story-actions .w37-action--soft { grid-template-columns: 38px minmax(0,1fr); gap: 6px; }
.story-actions .w37-action--soft .w37-action__icon { width: 38px; height: 38px; }
.story-actions .w37-action--soft .w37-action__copy { text-align: center; }
.story-actions .w37-action--soft .w37-action__copy small { font-size: 6px; }
.story-actions .w37-action--soft .w37-action__copy strong { font-size: 11px; white-space: nowrap; }
.story-actions .escape-run-icon { width: 27px; height: 27px; stroke: currentColor; filter: none; }
.action-rail .w37-quick-action { width: 58px; min-height: 62px; border: 0; background: transparent; box-shadow: none; }
.action-rail .w37-quick-action .icon-disc { background: linear-gradient(145deg, rgba(143,100,104,.32), rgba(255,249,247,.08)); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 20px rgba(28,17,22,.2); }
.action-rail .rail-button:not(.room-action) { color: #e7d6d3; }
.action-rail .rail-button:not(.room-action) svg { color: #e7d6d3; filter: none; }
.archive-button { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.archive-button svg { width: 32px; height: 32px; padding: 5px; border-radius: 50%; color: #e7d6d3; background: linear-gradient(145deg, rgba(143,100,104,.32), rgba(255,249,247,.08)); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 20px rgba(28,17,22,.2); }
.character-meta,.intimacy-button,.settings-button { border-color: rgba(216,196,192,.26); background: rgba(38,27,32,.58); }
.home-sheet,.settings-page,.my-characters,.secret-archive { --brass: var(--w37-rose-soft); --brass-bright: var(--w37-oat); }

.my-characters { position: absolute; z-index: 12; inset: 0; overflow-y: auto; padding: max(23px, env(safe-area-inset-top)) 20px max(30px, calc(env(safe-area-inset-bottom) + 18px)); background: radial-gradient(circle at 50% 4%, #49301f, #17110d 48%, #090706 100%); animation: characters-in .34s cubic-bezier(.2,.8,.2,1) both; }
.characters-header { display: flex; align-items: center; gap: 14px; }
.characters-back { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--brass-bright); font: 29px/1 Georgia; cursor: pointer; }
.characters-header small { color: var(--brass); font-size: 7px; letter-spacing: .16em; }
.characters-header h1 { margin: 4px 0 0; font: 500 27px/1.1 "Songti SC", Georgia, serif; }
.characters-lead { margin: 23px 0 15px; color: var(--muted); font-size: 11px; }
.bound-character-list { display: grid; gap: 10px; }
.bound-character-item { display: grid; min-width: 0; }
.bound-character { display: grid; grid-template-columns: 72px 1fr 24px; gap: 13px; align-items: center; min-height: 100px; padding: 8px 13px 8px 7px; overflow: hidden; border: 1px solid rgba(239,217,170,.3); border-radius: 21px; background: linear-gradient(120deg, rgba(215,189,130,.14), rgba(255,255,255,.035)); cursor: pointer; text-align: left; }
.bound-character img { align-self: end; width: 74px; height: 92px; object-fit: contain; object-position: center bottom; }
.bound-character span > * { display: block; }
.bound-character small { color: #a9d6aa; font-size: 8px; letter-spacing: .1em; }
.bound-character strong { margin: 6px 0; font: 500 19px "Songti SC", Georgia, serif; }
.bound-character i { color: var(--muted); font-size: 8px; font-style: normal; }
.bound-character b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #bad695; color: #17200f; font-size: 12px; }
.bound-character.is-selected { border-color: rgba(239,211,151,.72); box-shadow: 0 0 0 3px rgba(215,189,130,.08), inset 0 1px rgba(255,255,255,.08); }
.bound-character.is-selected:not(.is-current) b { background: var(--brass-bright); }
.bound-character.is-offline { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); opacity: .52; cursor: default; filter: saturate(.45); }
.bound-character.is-offline small { color: rgba(246,238,224,.48); }.bound-character.is-offline b { width: 8px; height: 8px; justify-self: center; background: rgba(255,255,255,.28); }
.binding-detail { margin-top: 7px; padding: 19px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px 14px 22px 22px; background: rgba(11,9,7,.58); animation: binding-detail-in .26s cubic-bezier(.2,.8,.2,1) both; }
.bound-character-item.is-expanded .bound-character { border-radius: 21px 21px 14px 14px; }
.bound-character-item.is-expanded .binding-detail { display: block; }
.binding-detail > p { margin: 0; color: var(--brass); font-size: 8px; letter-spacing: .16em; }
.binding-detail h2 { margin: 7px 0 17px; font: 500 23px "Songti SC", Georgia, serif; }
.binding-role { margin: -11px 0 16px; color: var(--muted); font-size: 9px; }
.binding-detail dl { margin: 0; }
.binding-detail dl div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; }
.binding-detail dt { color: var(--muted); }
.binding-detail dd { margin: 0; }
.binding-detail dd i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #bcd691; box-shadow: 0 0 8px #bcd691; }
.binding-actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: center; margin-top: 13px; }
.unbind-support { width: auto; min-height: 38px; padding: 0 10px; border: 1px solid rgba(240,168,144,.14); border-radius: 12px; background: transparent; color: rgba(230,180,164,.56); font-size: 8px; cursor: pointer; }
.character-switch-confirm { min-height: 42px; padding: 0 14px; border: 0; border-radius: 13px; background: linear-gradient(110deg,#a15f70,#c48f91); color: #fff9f5; font-size: 10px; font-weight: 650; cursor: pointer; box-shadow: 0 9px 22px rgba(70,34,43,.2); }
.character-switch-confirm:disabled { background: rgba(255,255,255,.07); color: var(--muted); cursor: default; box-shadow: none; }
.characters-empty { margin: 19px 0 0; color: rgba(246,238,224,.35); font-size: 9px; text-align: center; }
@keyframes binding-detail-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.settings-page { position: absolute; z-index: 14; inset: 0; overflow-y: auto; padding: max(22px, env(safe-area-inset-top)) 18px max(42px, calc(env(safe-area-inset-bottom) + 22px)); background: radial-gradient(circle at 15% 0, #503521, #1b130e 31%, #0a0807 78%); animation: characters-in .34s cubic-bezier(.2,.8,.2,1) both; }
.settings-header { display: flex; align-items: center; gap: 14px; }
.settings-header small { color: var(--brass); font-size: 7px; letter-spacing: .16em; }
.settings-header h1 { margin: 4px 0 0; font: 500 28px "Songti SC", Georgia, serif; }
.settings-tabs { position: sticky; z-index: 3; top: -22px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 20px -2px 0; padding: 8px 2px; background: linear-gradient(#1a120ef5 78%, transparent); backdrop-filter: blur(10px); }
.settings-tab { position: relative; min-height: 44px; padding: 0 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); color: rgba(246,238,224,.45); font-size: 10px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.settings-tab span { margin-right: 6px; color: rgba(215,189,130,.4); font: 8px Georgia; }
.settings-tab::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 2px; background: var(--brass-bright); opacity: 0; transform: scaleX(.3); transition: opacity .2s, transform .2s; }
.settings-tab.is-active { border-color: rgba(215,189,130,.23); background: linear-gradient(120deg, rgba(215,189,130,.13), rgba(255,255,255,.025)); color: var(--cream); }
.settings-tab.is-active span { color: var(--brass); }.settings-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.settings-panel[hidden] { display: none; }
.identity-settings, .account-settings { margin-top: 18px; animation: fade .24s ease both; }
.settings-section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 13px; }
.settings-section-heading p { margin: 0 0 5px; color: var(--brass); font-size: 7px; letter-spacing: .17em; }
.settings-section-heading h2 { margin: 0; font: 500 22px "Songti SC", Georgia, serif; }
.settings-section-heading > span { padding: 5px 8px; border: 1px solid rgba(189,213,163,.18); border-radius: 14px; color: #bcd6a5; font-size: 7px; }
.identity-card { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid rgba(222,190,127,.26); border-radius: 22px; background: linear-gradient(135deg, rgba(215,189,130,.16), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.identity-avatar { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,226,165,.45); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #d69a68, #70472e 52%, #211710); color: #fff2d9; font: 26px Georgia; }
.identity-avatar::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(215,189,130,.18); border-radius: 50%; }
.identity-avatar i { position: absolute; right: -2px; bottom: 2px; width: 13px; height: 13px; border: 3px solid #2a1c13; border-radius: 50%; background: #a7d894; box-shadow: 0 0 8px rgba(167,216,148,.5); }
.identity-copy small, .identity-copy strong { display: block; }
.identity-copy small { color: var(--brass); font-size: 7px; letter-spacing: .1em; }
.identity-copy strong { margin: 5px 0; font: 500 14px "Songti SC", Georgia, serif; }
.identity-copy p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.identity-bond-summary { margin-top: 14px; }
.identity-bond-heading, .identity-bond-values { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.identity-bond-heading > span:last-child, .identity-bond-values { color: var(--muted); font-size: 7px; }
.bond-level-badge { padding: 5px 8px; border: 1px solid rgba(239,211,151,.28); border-radius: 12px; background: rgba(215,189,130,.1); color: var(--brass-bright); font-size: 7px; letter-spacing: .05em; }
.identity-current-title { margin-top: 10px; }
.identity-current-title small { color: var(--muted); letter-spacing: 0; }
.identity-current-title b { display: block; margin-top: 3px; font: 500 12px "Songti SC", Georgia, serif; }
.identity-bond-summary .level-track { margin: 9px 0 5px; }
.identity-bond-summary .level-track i { width: 35%; background: linear-gradient(90deg, var(--w37-rose-deep), var(--brass-bright)); }
.identity-bond-summary > em { display: block; margin-top: 8px; color: rgba(226,236,229,.52); font-size: 7px; font-style: normal; }
.profile-field { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; margin-top: 9px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.075); border-radius: 16px; background: rgba(255,255,255,.035); }
.profile-field > span { font-size: 10px; }
.profile-field small { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.profile-field input, .profile-field textarea { width: 100%; padding: 9px 10px; border: 1px solid rgba(215,189,130,.15); border-radius: 11px; outline: 0; background: rgba(5,4,3,.42); color: var(--cream); font: 10px/1.5 inherit; resize: none; }
.profile-field input:focus, .profile-field textarea:focus { border-color: rgba(239,211,151,.55); box-shadow: 0 0 0 3px rgba(215,189,130,.07); }
.profile-about { align-items: start; }
.anchor-level { display: grid; grid-template-columns: 73px 1fr; gap: 14px; align-items: center; margin-top: 9px; padding: 15px; border: 1px solid rgba(174,201,204,.14); border-radius: 19px; background: linear-gradient(120deg, rgba(52,91,95,.23), rgba(255,255,255,.025)); }
.level-orbit { display: grid; place-items: center; align-content: center; width: 68px; height: 68px; border: 1px solid rgba(174,215,215,.4); border-radius: 50%; box-shadow: inset 0 0 20px rgba(87,156,159,.16), 0 0 16px rgba(98,178,179,.08); }
.level-orbit span { color: #a9cecc; font-size: 7px; letter-spacing: .1em; }.level-orbit strong { font: 24px Georgia; }
.level-copy small, .level-copy strong, .level-copy em { display: block; }
.level-copy small { color: #9fc6c4; font-size: 7px; letter-spacing: .08em; }.level-copy strong { margin: 4px 0; font-size: 12px; }.level-copy p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.level-track { height: 4px; margin: 10px 0 5px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.09); }.level-track i { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, #75b7b1, var(--brass-bright)); }
.level-copy em { color: rgba(226,236,229,.5); font-size: 7px; font-style: normal; text-align: right; }
.save-profile { width: 100%; min-height: 46px; margin-top: 10px; border: 0; border-radius: 15px; background: linear-gradient(100deg, #a75f39, #d99b58); color: #fff8e9; font-weight: 650; cursor: pointer; }
.account-settings { padding-top: 5px; }
.settings-group { overflow: hidden; margin-bottom: 11px; border: 1px solid rgba(255,255,255,.075); border-radius: 19px; background: rgba(255,255,255,.035); }
.settings-row { position: relative; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 13px; border: 0; border-bottom: 1px solid rgba(255,255,255,.065); background: transparent; color: var(--cream); text-align: left; cursor: pointer; }
.settings-row:last-child { border-bottom: 0; }.settings-row > span:nth-child(2) > * { display: block; }.settings-row strong { font-size: 10px; font-weight: 520; }.settings-row small { margin-top: 4px; color: var(--muted); font-size: 7px; }.settings-row > i:not(.permission-switch) { color: rgba(255,255,255,.28); font: 22px Georgia; font-style: normal; }
.settings-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(215,189,130,.09); color: var(--brass-bright); font: 13px Georgia; }
.permission-summary { cursor: default; }.permission-row { min-height: 52px; padding-left: 20px; }.permission-row > span:first-child { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.22); }.permission-row.is-on > span:first-child { background: #abd59a; box-shadow: 0 0 7px #abd59a; }
.permission-switch { position: relative; width: 35px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.12); transition: background .2s; }.permission-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #a29a8e; transition: transform .2s, background .2s; }.permission-row.is-on .permission-switch { background: rgba(143,190,136,.52); }.permission-row.is-on .permission-switch::after { transform: translateX(15px); background: #dff0cf; }
.account-danger-zone { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }.account-danger-zone button { min-height: 40px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 9px; cursor: pointer; }.account-danger-zone button:last-child { border-color: rgba(220,127,108,.13); color: rgba(224,143,125,.62); }
.settings-footnote { margin: 16px 0 0; color: rgba(246,238,224,.32); font-size: 7px; text-align: center; }
.settings-toast { position: fixed; z-index: 18; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 42px); padding: 10px 15px; border: 1px solid rgba(215,189,130,.2); border-radius: 20px; background: rgba(12,9,7,.92); color: var(--brass-bright); font-size: 9px; transform: translateX(-50%); box-shadow: 0 10px 35px rgba(0,0,0,.45); }

.vlog-action { color: #e7d6d3; }.vlog-action .icon-disc { color: #e7d6d3; background: linear-gradient(145deg, rgba(143,100,104,.32), rgba(255,249,247,.08)); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 20px rgba(28,17,22,.2); }.vlog-action svg { filter: none; }
.vlog-page { position: absolute; z-index: 15; inset: 0; overflow: hidden; background: radial-gradient(circle at 88% 3%, #51354f, #251618 28%, #0b0808 74%); animation: characters-in .34s cubic-bezier(.2,.8,.2,1) both; }
.vlog-header { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: max(20px, env(safe-area-inset-top)) 18px 12px; background: linear-gradient(#160e10f2 76%, transparent); backdrop-filter: blur(12px); }
.vlog-header small { color: #cf9fd8; font-size: 7px; letter-spacing: .14em; }.vlog-header h1 { margin: 4px 0 0; font: 500 24px "Songti SC", Georgia, serif; }
.diamond-balance { align-self: center; padding: 8px 10px; border: 1px solid rgba(218,187,255,.17); border-radius: 18px; background: rgba(255,255,255,.045); color: #e0c9ff; font: 9px Georgia; }
.vlog-scroll { position: absolute; top: max(82px, calc(env(safe-area-inset-top) + 70px)); right: 0; bottom: 78px; left: 0; display: grid; grid-template-rows: minmax(0,1.5fr) minmax(0,1.05fr) minmax(0,.8fr); gap: 10px; overflow: hidden; padding: 10px 16px; }
.vlog-preview { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 0; overflow: hidden; border: 1px solid rgba(215,189,130,.18); border-radius: 24px; background: rgba(255,255,255,.035); }
.vlog-preview-art { position: relative; height: auto; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(209,155,115,.32), transparent 39%), linear-gradient(145deg,#4b2930,#171013 65%); }
.vlog-preview-art::before { content: ''; position: absolute; inset: 0; opacity: .28; background: linear-gradient(90deg,transparent 49.6%,#fff3 50%,transparent 50.4%),linear-gradient(transparent 49.6%,#fff3 50%,transparent 50.4%); background-size: 33.33% 33.33%; }
.vlog-preview-art::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; }
.vlog-preview-art img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform-origin: 50% 24%; animation: vlog-breathe 11s ease-in-out infinite; will-change: transform; filter: saturate(.94) contrast(1.03); }
@keyframes vlog-breathe { 0%,100% { transform: scale(1.06) translate3d(0,-2%,0); } 45%,55% { transform: scale(1.12) translate3d(0,4%,0); } }
.vlog-rec { position: absolute; z-index: 2; top: 25px; left: 26px; color: rgba(255,248,241,.72); font-size: 7px; letter-spacing: .1em; }.vlog-rec i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #e8796f; box-shadow: 0 0 7px #e8796f; }
.vlog-preview-art > strong { position: absolute; z-index: 2; right: 26px; bottom: 24px; color: #f0d7c9; font: 7px Georgia; letter-spacing: .12em; }
.vlog-preview > p { margin: 0; padding: 10px 14px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.vlog-block { display: flex; min-height: 0; flex-direction: column; margin: 0; padding: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 19px; background: rgba(255,255,255,.032); }
.vlog-block-title { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }.vlog-block-title > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(210,169,222,.22); border-radius: 50%; color: #d7aedf; font: 8px Georgia; }.vlog-block-title small { color: #bd8dc8; font-size: 6px; letter-spacing: .14em; }.vlog-block-title h2 { margin: 2px 0 0; font: 500 14px "Songti SC", Georgia, serif; }
.vlog-prompt { position: relative; display: block; flex: 1; min-height: 0; }.vlog-prompt textarea { display: block; width: 100%; height: 100%; min-height: 0; padding: 8px 11px 18px; border: 1px solid rgba(215,189,130,.14); border-radius: 14px; outline: 0; background: rgba(4,3,3,.38); color: var(--cream); font: 9px/1.45 inherit; resize: none; }.vlog-prompt textarea:focus { border-color: rgba(218,187,255,.4); box-shadow: 0 0 0 3px rgba(183,133,203,.07); }.vlog-prompt > small { position: absolute; right: 10px; bottom: 5px; color: rgba(246,238,224,.33); font-size: 7px; }
.vlog-presets { display: flex; gap: 6px; margin-top: 7px; overflow-x: auto; }.vlog-presets button { flex: 0 0 auto; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(143,100,104,.28); border-radius: 16px; background: rgba(255,252,250,.82); color: #5f454c; font-size: 9px; font-weight: 650; cursor: pointer; }.vlog-presets button.is-selected { border-color: #8f6468; background: #8f6468; color: #fff9f7; }
.vlog-source-grid { display: grid; grid-template-columns: repeat(3,1fr); flex: 1; min-height: 0; gap: 7px; }.vlog-source { min-height: 0; padding: 7px 5px; border: 1px solid rgba(143,100,104,.25); border-radius: 14px; background: rgba(255,252,250,.78); color: #62575b; cursor: pointer; }.vlog-source > * { display: block; }.vlog-source > span { margin-bottom: 4px; color: #8f6468; font-size: 17px; }.vlog-source strong { color: #352e31; font-size: 11px; }.vlog-source small { margin-top: 3px; color: #6f6367; font-size: 8px; line-height: 1.3; }.vlog-source.is-selected { border-color: #8f6468; background: #eadcda; box-shadow: inset 0 0 0 1px rgba(143,100,104,.08); }
.coordinate-button.is-locked { cursor: not-allowed; }
.vlog-footer { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; padding: 11px 16px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid rgba(215,189,130,.15); background: linear-gradient(180deg,rgba(18,11,13,.9),#0d090af7); backdrop-filter: blur(16px); }.vlog-footer button { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px 0 19px; border: 0; border-radius: 15px; background: linear-gradient(105deg,#a15a74,#d19a61); color: #fff8ef; font-weight: 650; text-align: left; cursor: pointer; }.vlog-footer button > span { font-size: 13px; }.vlog-footer button > strong { color: #fff1bd; font-size: 9px; white-space: nowrap; }.vlog-footer button i { font: 18px Georgia; font-style: normal; }
.vlog-toast { position: fixed; z-index: 8; left: 50%; bottom: max(88px,calc(env(safe-area-inset-bottom) + 76px)); width: max-content; max-width: calc(100% - 38px); padding: 11px 15px; border: 1px solid rgba(218,187,255,.2); border-radius: 18px; background: rgba(24,14,19,.95); color: #eed9f3; font-size: 8px; line-height: 1.5; text-align: center; transform: translateX(-50%); box-shadow: 0 12px 34px rgba(0,0,0,.45); }

.secret-archive,.about-him-page,.future-page { position: absolute; z-index: 13; inset: 0; overflow-y: auto; scroll-behavior: smooth; padding: max(22px, env(safe-area-inset-top)) 18px max(42px, calc(env(safe-area-inset-bottom) + 22px)); background: radial-gradient(circle at 75% 0,#483020,#16100d 35%,#090706 76%); animation: characters-in .34s cubic-bezier(.2,.8,.2,1) both; }
.relationship-story-page { position: absolute; z-index: 16; inset: 0; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; padding: max(27px,calc(env(safe-area-inset-top) + 16px)) 17px max(48px,calc(env(safe-area-inset-bottom) + 28px)); background: radial-gradient(circle at 18% 8%,rgba(143,100,104,.34),transparent 28%),radial-gradient(circle at 88% 52%,rgba(73,99,111,.19),transparent 32%),linear-gradient(180deg,#1d1416 0,#100b0c 43%,#080607 100%); color:#f7ede8; animation:characters-in .34s cubic-bezier(.2,.8,.2,1) both; }
.relationship-story-page[hidden],.relationship-media-viewer[hidden],.relationship-branch-detail[hidden],.relationship-video-controls[hidden],.relationship-media-stage>[hidden] { display:none; }
.relationship-story-page::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(circle,rgba(244,215,191,.6) 0 1px,transparent 1.5px); background-size:53px 53px; mask-image:linear-gradient(#000,transparent 75%); }
.relationship-story-header { position:relative; z-index:1; display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:start; padding-bottom:22px; border-bottom:1px solid rgba(225,189,172,.15); }
.relationship-story-back { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(231,202,192,.22); border-radius:50%; background:rgba(255,255,255,.045); color:#fff5f0; font:30px/1 Georgia; cursor:pointer; }
.relationship-story-header small { color:#cb9fa4; font-size:7px; letter-spacing:.2em; }.relationship-story-header h1 { margin:4px 0 3px; font:500 26px "Songti SC",Georgia,serif; }.relationship-story-header p { margin:0; color:rgba(247,237,232,.48); font-size:8px; }.relationship-story-progress { color:rgba(247,237,232,.45); font-size:7px; line-height:1.5; text-align:right; }.relationship-story-progress strong { color:#e1b6b1; font:14px Georgia; }
.relationship-story-legend { position:relative; z-index:1; display:flex; gap:13px; margin:17px 0 7px; padding-left:50px; color:rgba(247,237,232,.5); font-size:7px; }.relationship-story-legend span { display:flex; align-items:center; gap:5px; }.relationship-story-legend i { width:7px; height:7px; border:1px solid rgba(235,219,211,.34); border-radius:50%; background:#21191b; }.relationship-story-legend i.is-chosen { border-color:#d7a4a8; background:#b77981; box-shadow:0 0 8px rgba(183,121,129,.7); }.relationship-story-legend i.is-current { border-color:#c0a46c; background:#d5bb7d; }
.relationship-timeline { position:relative; z-index:1; padding:15px 0 6px; }.relationship-timeline::before { content:''; position:absolute; top:20px; bottom:30px; left:19px; width:1px; background:linear-gradient(transparent,rgba(188,139,143,.58) 5%,rgba(188,139,143,.2) 94%,transparent); }
.relationship-chapter { position:relative; padding:0 0 58px 50px; }.relationship-chapter-marker { position:absolute; z-index:2; top:0; left:0; display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(208,166,162,.32); border-radius:14px; background:linear-gradient(145deg,#352328,#181114); color:#c98f97; font:12px Georgia; transform:rotate(45deg); box-shadow:0 8px 24px rgba(0,0,0,.32); }.relationship-chapter-marker span { transform:rotate(-45deg); }.relationship-chapter.is-current .relationship-chapter-marker { border-color:rgba(218,190,125,.62); color:#ead295; box-shadow:0 0 22px rgba(205,167,91,.18); }
.relationship-chapter-copy { min-height:58px; padding:2px 0 13px; }.relationship-chapter-copy small { color:#ad797f; font-size:7px; letter-spacing:.13em; }.relationship-chapter-copy h2 { margin:4px 0 5px; font:500 20px "Songti SC",Georgia,serif; }.relationship-chapter-copy p { margin:0; color:rgba(247,237,232,.57); font-size:9px; line-height:1.65; }.relationship-chapter-copy b { display:inline-block; margin-top:11px; padding:6px 9px; border:1px solid rgba(213,187,125,.24); border-radius:12px; color:#d5bb7d; font-size:7px; letter-spacing:.09em; }
.relationship-branches { display:grid; gap:9px; }.relationship-branch { overflow:hidden; border:1px solid rgba(235,219,211,.12); border-radius:17px; background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); transition:border-color .22s,background .22s,transform .22s; }.relationship-branch.is-unselected { opacity:.68; }.relationship-branch.is-selected { border-color:rgba(195,132,140,.48); background:linear-gradient(135deg,rgba(143,79,91,.34),rgba(70,43,50,.2)); }.relationship-branch.is-expanded { opacity:1; transform:translateX(-3px); box-shadow:0 15px 34px rgba(0,0,0,.24); }
.relationship-branch-node { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; width:100%; min-height:61px; padding:10px 12px; border:0; background:transparent; color:#f7ede8; text-align:left; cursor:pointer; }.relationship-branch-index { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(235,219,211,.18); border-radius:50%; color:rgba(247,237,232,.5); font:10px Georgia; }.relationship-branch.is-selected .relationship-branch-index { border-color:#c68d94; background:#9b626a; color:white; }.relationship-branch-node span:nth-child(2) { display:grid; gap:4px; }.relationship-branch-node small { color:rgba(247,237,232,.35); font-size:6px; letter-spacing:.09em; }.relationship-branch.is-selected small { color:#d9a8ad; }.relationship-branch-node strong { font:500 11px/1.45 "Songti SC",Georgia,serif; }.relationship-branch-node>i { color:rgba(247,237,232,.35); font:16px Georgia; font-style:normal; }
.relationship-branch-detail { padding:0 12px 13px 50px; animation:secret-panel-in .24s ease both; }.relationship-branch-detail>p { margin:0 0 10px; color:rgba(247,237,232,.61); font-size:9px; line-height:1.7; }.relationship-media-card { position:relative; display:grid; grid-template-columns:52px 1fr; grid-template-rows:1fr 1fr; gap:1px 9px; align-items:center; width:100%; min-height:58px; padding:7px; overflow:hidden; border:1px solid rgba(228,194,182,.2); border-radius:12px; background:rgba(7,5,6,.36); color:#f7ede8; text-align:left; cursor:pointer; }.relationship-media-card img { grid-row:1/3; width:52px; height:44px; border-radius:8px; object-fit:cover; opacity:.82; }.relationship-media-card>span { position:absolute; left:23px; top:20px; color:white; text-shadow:0 2px 5px #000; }.relationship-media-card strong { align-self:end; font-size:8px; }.relationship-media-card small { align-self:start; color:rgba(247,237,232,.38); font-size:7px; }.relationship-media-card.is-locked { grid-template-columns:30px 1fr; padding:10px; cursor:not-allowed; }.relationship-media-card.is-locked>span { position:static; grid-row:1/3; display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(235,219,211,.16); border-radius:50%; color:rgba(247,237,232,.32); }
.relationship-path { position:absolute; left:18px; bottom:11px; display:grid; gap:7px; }.relationship-path i { width:4px; height:4px; border-radius:50%; background:rgba(192,132,139,.4); }.relationship-path i:nth-child(2) { opacity:.65; }.relationship-path i:nth-child(3) { opacity:.35; }
.relationship-media-viewer { position:fixed; z-index:30; inset:0; display:grid; grid-template-rows:auto 1fr auto; padding:max(24px,env(safe-area-inset-top)) 16px max(20px,calc(env(safe-area-inset-bottom) + 12px)); background:rgba(7,4,6,.96); backdrop-filter:blur(18px); }.relationship-media-viewer>header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; }.relationship-media-viewer header small { color:#b77d84; font-size:7px; letter-spacing:.18em; }.relationship-media-viewer h2 { margin:3px 0 0; font:500 20px "Songti SC",Georgia,serif; }.relationship-media-viewer header button { width:40px; height:40px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.05); color:white; font-size:23px; cursor:pointer; }
.relationship-media-stage { display:grid; place-items:center; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:#050404; }.relationship-media-stage img,.relationship-media-stage video { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }.relationship-media-stage p { max-width:220px; color:rgba(247,237,232,.58); font-size:10px; line-height:1.7; text-align:center; }
.relationship-video-controls { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; padding-top:13px; }.relationship-video-controls button { min-height:34px; padding:0 11px; border:1px solid rgba(232,204,194,.18); border-radius:13px; background:rgba(255,255,255,.055); color:#f8eeea; font:8px inherit; cursor:pointer; }.relationship-video-controls input { width:100%; accent-color:#b77981; }
.about-him-page,.future-page { padding-top: max(48px, calc(env(safe-area-inset-top) + 22px)); }
.future-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 24px; }
.future-lead { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.future-add { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid rgba(143,100,104,.26); border-radius: 18px; background: rgba(143,100,104,.12); color: var(--brass-bright); font-size: 9px; font-weight: 650; cursor: pointer; }
.future-content { padding-bottom: 20px; }
.future-editor { margin: 13px 0 20px; padding: 16px; border: 1px solid rgba(104,72,78,.16); border-radius: 20px; background: rgba(255,252,250,.76); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 30px rgba(75,48,57,.07); }
.future-editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.future-editor-heading div { display: grid; gap: 3px; }.future-editor-heading small { color: var(--brass); font-size: 7px; letter-spacing: .14em; }.future-editor-heading strong { color: #352e31; font-size: 12px; }.future-editor-heading > span { color: #75696d; font-size: 7px; }
.future-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.future-editor-fields--type { margin-bottom: 9px; }.future-editor label { display: grid; gap: 6px; color: #68484e; font-size: 8px; font-weight: 650; }.future-editor :is(input,select) { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid rgba(104,72,78,.2); border-radius: 12px; outline: 0; background: rgba(255,255,255,.78); color: #352e31; font-size: 10px; }.future-editor :is(input,select):focus { border-color: rgba(143,100,104,.55); box-shadow: 0 0 0 3px rgba(143,100,104,.1); }.future-editor :is(input,select):disabled { opacity: .45; }.future-note-field { margin-top: 9px; }
.future-plan-feedback { min-height: 15px; margin: 7px 0 0; color: #9a514e; font-size: 8px; }.future-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }.future-editor-actions button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(104,72,78,.2); border-radius: 14px; background: rgba(255,255,255,.65); color: #68484e; font-size: 9px; cursor: pointer; }.future-editor-actions #future-plan-save { border-color: transparent; background: linear-gradient(135deg,#68484e,#8f6468); color: #fff9f7; }
.secret-header { display: flex; align-items: center; gap: 14px; }
.secret-header small { color: var(--brass); font-size: 7px; letter-spacing: .16em; }
.secret-header h1 { margin: 4px 0 0; font: 500 28px "Songti SC",Georgia,serif; }
.secret-jumps { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: repeat(4,1fr); margin: 21px 0 6px; padding: 2px; overflow: visible; border: 1px solid rgba(215,189,130,.22); border-radius: 14px; background: rgba(18,13,10,.92); box-shadow: 0 8px 24px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.secret-jumps button { min-width: 0; padding: 8px 1px; border: 0; border-right: 1px solid rgba(215,189,130,.12); border-radius: 11px; background: transparent; color: var(--muted); font-size: 7px; font-family: inherit; line-height: 1.2; white-space: nowrap; letter-spacing: -.02em; cursor: pointer; }.secret-jumps button:last-child { border-right: 0; }.secret-jumps button.is-active { background: linear-gradient(135deg,rgba(215,189,130,.22),rgba(215,189,130,.1)); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(215,189,130,.28),0 3px 10px rgba(0,0,0,.2); }
.secret-section { padding: 27px 0 5px; border-bottom: 1px solid rgba(255,255,255,.08); animation: secret-panel-in .28s ease both; }.secret-section[hidden] { display: none; }
.secret-kicker { margin: 0 0 7px; color: var(--brass); font-size: 7px; letter-spacing: .18em; }
.secret-section h2 { margin: 0 0 14px; font: 500 23px "Songti SC",Georgia,serif; }
.portrait-card { position: relative; padding: 19px; overflow: hidden; border: 1px solid rgba(215,189,130,.23); border-radius: 22px; background: linear-gradient(135deg,rgba(215,189,130,.12),rgba(255,255,255,.025)); }
.portrait-mark { position: absolute; top: -13px; right: 13px; color: rgba(215,189,130,.13); font: 90px Georgia; }
.portrait-card > p { position: relative; margin: 0; font: 15px/1.9 "Songti SC",Georgia,serif; }
.memory-inline-retry { margin-left: 6px; padding: 4px 8px; border: 1px solid rgba(215,189,130,.28); border-radius: 10px; background: transparent; color: var(--brass-bright); font-size: 9px; font-family: inherit; cursor: pointer; }
.portrait-card > small { display: block; margin-top: 14px; color: var(--muted); font-size: 8px; }.portrait-actions { display: flex; justify-content: flex-end; margin-top: 9px; }
.trait-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.trait-tags i { padding: 6px 9px; border-radius: 15px; background: rgba(215,189,130,.1); color: var(--brass-bright); font-size: 8px; font-style: normal; }
.portrait-details { display: grid; gap: 9px; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(215,189,130,.12); }.portrait-details section { display: grid; gap: 5px; }.portrait-details section > strong { color: var(--brass); font-size: 8px; letter-spacing: .08em; }.portrait-details section > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; font-size: 9px; line-height: 1.55; }.portrait-details span { color: var(--muted); }.portrait-details p { margin: 0; color: rgba(246,238,224,.74); font-size: 9px; line-height: 1.55; }
.thought-list { display: grid; gap: 8px; }.thought-list article { padding: 13px 14px; border-left: 2px solid rgba(215,189,130,.5); border-radius: 0 14px 14px 0; background: rgba(255,255,255,.035); }.thought-list time { color: var(--brass); font-size: 8px; }.thought-list p { margin: 6px 0 0; color: rgba(246,238,224,.78); font-size: 11px; line-height: 1.65; }
.my-secrets-heading { display: grid; gap: 13px; }.my-secrets-heading h2 { margin-bottom: 10px; }.my-secrets-heading .secret-note { margin-bottom: 0; }
.my-secret-add { justify-self: start; padding: 9px 13px; border: 1px solid rgba(215,189,130,.28); border-radius: 18px; background: linear-gradient(135deg,rgba(215,189,130,.17),rgba(255,255,255,.035)); color: var(--brass-bright); font: 9px inherit; cursor: pointer; }
.my-secret-editor { margin: 16px 0 13px; padding: 15px; border: 1px solid rgba(215,189,130,.2); border-radius: 18px; background: rgba(255,255,255,.045); }.my-secret-editor[hidden] { display: none; }.my-secret-editor label { display: block; margin-bottom: 8px; color: var(--brass-bright); font-size: 9px; }.my-secret-editor textarea { display: block; width: 100%; min-height: 112px; padding: 12px; border: 1px solid rgba(215,189,130,.16); border-radius: 13px; outline: 0; background: rgba(5,4,3,.42); color: var(--cream); font: 11px/1.75 inherit; resize: vertical; }.my-secret-editor textarea:focus { border-color: rgba(215,189,130,.46); box-shadow: 0 0 0 3px rgba(215,189,130,.07); }.my-secret-editor > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }.my-secret-editor button { padding: 8px 13px; border: 1px solid rgba(215,189,130,.18); border-radius: 15px; background: transparent; color: var(--muted); font: 9px inherit; cursor: pointer; }.my-secret-editor #my-secret-save { border-color: rgba(215,189,130,.34); background: rgba(215,189,130,.14); color: var(--cream); }
.my-secret-feedback { min-height: 13px; margin: 7px 1px 0; color: #e8aa91; font-size: 8px; }
.my-secret-list { display: grid; gap: 10px; margin-top: 16px; }.my-secret-card { position: relative; padding: 15px 15px 12px; border: 1px solid rgba(215,189,130,.14); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.052),rgba(215,189,130,.035)); box-shadow: 0 10px 28px rgba(0,0,0,.13); }.my-secret-card time { color: var(--brass); font: 8px Georgia,serif; }.my-secret-card > p { margin: 9px 0 12px; color: rgba(246,238,224,.84); font: 12px/1.8 "Songti SC",Georgia,serif; white-space: pre-wrap; }.my-secret-card > div { display: flex; justify-content: flex-end; gap: 7px; }.my-secret-card [data-my-secret-delete] { color: #d79c8a; }
.daily-list { position: relative; display: grid; gap: 3px; margin-top: 12px; }.daily-list::before { content: ''; position: absolute; top: 25px; bottom: 25px; left: 57px; width: 1px; background: linear-gradient(transparent,rgba(215,189,130,.35) 12%,rgba(215,189,130,.22) 88%,transparent); }.daily-list article { position: relative; display: grid; grid-template-columns: 45px 13px 1fr; gap: 8px; align-items: start; padding: 12px 0; }.daily-list time { display: grid; gap: 3px; color: var(--muted); font-style: normal; text-align: right; }.daily-list time small { color: var(--brass); font-size: 7px; }.daily-list time strong { color: rgba(246,238,224,.46); font: 7px Georgia,serif; }.daily-list article > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 4px; border: 2px solid #211711; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 1px rgba(215,189,130,.38),0 0 9px rgba(215,189,130,.2); }.daily-list article > div { padding: 0 12px 11px; border-bottom: 1px solid rgba(255,255,255,.055); }.daily-list article:last-child > div { border-bottom: 0; }.daily-list article span { color: var(--cream); font-size: 10px; font-weight: 650; }.daily-list article p { margin: 6px 0 0; color: rgba(246,238,224,.67); font-size: 9px; line-height: 1.65; }
.secret-note,.history-limit { margin: -7px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.bond-list { display: grid; gap: 9px; }.bond-event { display: grid; grid-template-columns: 68px 1fr; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.035); }.bond-event time { color: var(--brass); font: 9px Georgia; }.bond-event strong { font-size: 11px; }.bond-event p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.bond-event > span { grid-column: 2; display: flex; gap: 7px; }.bond-event button,.my-secret-card button,.portrait-edit { padding: 5px 10px; border: 1px solid rgba(215,189,130,.18); border-radius: 12px; background: transparent; color: var(--muted); font-size: 8px; font-family: inherit; cursor: pointer; }.bond-event button:last-child { color: #d79c8a; }
.bond-filters { display: grid; gap: 8px; margin-top: 14px; }.bond-filters .more-history { margin-top: 0; }
.memory-source { display: block; margin-top: 7px; color: var(--brass); font-size: 7px; letter-spacing: .04em; }
.bond-editor { margin: 12px 0; padding: 14px; border: 1px solid rgba(215,189,130,.2); border-radius: 16px; background: rgba(255,255,255,.045); }.bond-editor[hidden] { display:none; }.bond-editor label { display:block; margin-bottom:7px; color:var(--brass-bright); font-size:9px; }.bond-editor input { width:100%; min-height:38px; padding:0 10px; border:1px solid rgba(215,189,130,.2); border-radius:11px; background:rgba(5,4,3,.35); color:var(--cream); font:10px inherit; outline:0; }.bond-editor-feedback { min-height:13px; margin:7px 0 0; color:#e8aa91; font-size:8px; }.bond-editor > div { display:flex; justify-content:flex-end; gap:8px; margin-top:9px; }.bond-editor button { padding:7px 12px; border:1px solid rgba(215,189,130,.2); border-radius:13px; background:transparent; color:var(--muted); font:9px inherit; cursor:pointer; }.bond-editor #bond-edit-save { background:rgba(215,189,130,.14); color:var(--cream); }
.message-preview { display: grid; gap: 9px; }.message { max-width: 86%; padding: 11px 13px; border-radius: 15px; background: rgba(255,255,255,.06); }.message.mine { justify-self: end; background: rgba(215,189,130,.13); }.message small { color: var(--brass); font-size: 7px; }.message p { margin: 5px 0 0; font-size: 10px; line-height: 1.55; }.more-history { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; padding: 13px; border: 1px solid rgba(215,189,130,.2); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--cream); font-size: 10px; cursor: pointer; }.more-history span { color: var(--muted); font-size: 8px; }.more-history select { max-width: 72%; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: right; }
.history-events { display: grid; gap: 9px; margin-top: 16px; }
.history-stream { display: grid; gap: 9px; margin-top: 16px; }
.memory-archive-status { padding: 15px; border: 1px dashed rgba(215,189,130,.2); border-radius: 15px; color: var(--muted); font-size: 9px; line-height: 1.6; }.memory-archive-status.is-error { color: #d79c8a; }.memory-archive-status button { margin-left: 6px; padding: 4px 8px; border: 1px solid rgba(215,189,130,.24); border-radius: 10px; background: transparent; color: var(--brass-bright); font: inherit; cursor: pointer; }
.history-event { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; width: 88%; padding: 11px 13px; border: 1px solid transparent; border-radius: 15px; }
.history-event.mine { justify-self: end; }.history-event.cheng { justify-self: start; }
.history-event-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; font-size: 13px; font-weight: 700; letter-spacing: -3px; }
.history-event small { color: #75696d; font-size: 7px; }.history-event small b { font-weight: 700; }.history-event p { margin: 5px 0 0; color: #352e31; font-size: 10px; line-height: 1.55; }
.history-event--touch { border-color: rgba(143,100,104,.18); background: rgba(233,211,211,.6); }.history-event--touch .history-event-icon { background: rgba(143,100,104,.13); color: #80565e; }
.history-event--care { border-color: rgba(181,129,91,.18); background: rgba(247,231,214,.72); }.history-event--care .history-event-icon { background: rgba(181,129,91,.13); color: #8d6048; }
.history-event--voice { border-color: rgba(119,103,135,.18); background: rgba(231,226,237,.72); }.history-event--voice .history-event-icon { background: rgba(119,103,135,.12); color: #695c78; }

button:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
.about-him-tabs { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin: 21px 0 6px; padding: 3px; border: 1px solid rgba(215,189,130,.22); border-radius: 16px; background: rgba(18,13,10,.92); box-shadow: 0 8px 24px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.about-him-tabs button { min-height: 38px; padding: 8px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.about-him-tabs button.is-active { background: linear-gradient(135deg,rgba(215,189,130,.22),rgba(215,189,130,.1)); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(215,189,130,.28); }
.about-him-panel { padding: 27px 0 5px; animation: secret-panel-in .28s ease both; }
.about-him-panel h2 { margin: 0 0 14px; font: 500 25px "Songti SC",Georgia,serif; }
.about-profile-card { padding: 17px; border: 1px solid rgba(215,189,130,.2); border-radius: 22px; background: rgba(255,255,255,.04); }
.about-profile-card dl { display: grid; margin: 0; }
.about-profile-card dl > div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.about-profile-card dl > div:last-child { border-bottom: 0; }
.about-profile-card dt { color: var(--brass); font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.about-profile-card dd { margin: 0; color: rgba(246,238,224,.78); font-size: 10px; line-height: 1.75; }
@keyframes breathe { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-3px) scale(1.004); } }
@keyframes react { 0%,100% { transform: translateX(-50%) translateY(0); } 45% { transform: translateX(-50%) translateY(-7px) scale(1.01); } }
@keyframes secret-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bubble-in { from { opacity: 0; transform: translateX(-50%) translateY(7px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes sticker-float { 0%,100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes sticker-wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes paw-bounce { 0%,100% { transform: translateY(2px) scale(.96); } 45% { transform: translateY(-4px) scale(1.04); } }
@keyframes star-glow { 0%,100% { transform: scale(.94) rotate(-3deg); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.06) rotate(3deg); filter: drop-shadow(0 0 7px rgba(244,208,135,.65)); } }
@keyframes steam { 0%,100% { transform: translateY(1px); opacity: .45; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes blush-pulse { 0%,100% { filter: saturate(.9); } 50% { filter: saturate(1.25) brightness(1.08); } }
@keyframes characters-in { from { opacity: 0; transform: translateX(-6%); } }

@media (min-width: 560px) {
  body { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 15%, #44311f, #0c0907 70%); }
  .home-shell { width: min(430px, calc(100vw - 48px)); min-height: min(860px, calc(100svh - 48px)); height: min(860px, calc(100svh - 48px)); border: 1px solid rgba(255,255,255,.12); border-radius: 34px; box-shadow: 0 35px 100px rgba(0,0,0,.64); }
}

@media (max-height: 700px) {
  .action-rail, .archive-rail { top: 22%; gap: 8px; }
  .rail-button, .archive-button { min-height: 55px; }
  .character-figure { height: 88svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vlog-preview-art img { animation: none; transform: scale(1.06); }
}