:root {
  --ink: #f7f0eb;
  --muted: #b9acb9;
  --wine: #d95b78;
  --rose: #f2a4a9;
  --cream: #f8e0c9;
  --deep: #100c15;
  --panel: rgba(35, 25, 40, .72);
  --line: rgba(255,255,255,.11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 15% -10%, #43243d 0, transparent 38%), linear-gradient(145deg, #100c15 20%, #18101e 70%, #0d0a12); font-family: "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
button { font: inherit; }
.noise { position: fixed; inset: 0; opacity: .09; pointer-events: none; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.orb { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; opacity: .25; }
.orb-one { width: 500px; height: 500px; right: -280px; top: 20%; background: #923d67; }
.orb-two { width: 300px; height: 300px; left: -200px; bottom: -50px; background: #e99879; }
.topbar { position: relative; z-index: 10; width: min(1180px, calc(100% - 36px)); height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-family: Georgia, serif; font-size: 20px; }
.brand i { color: var(--rose); font-size: 13px; margin: 0 4px; }
nav { display: flex; gap: 5px; }
.nav-link, .icon-button { color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: .25s ease; }
.nav-link { padding: 10px 14px; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.icon-button { width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 50%; }
.icon-button.active { color: var(--rose); box-shadow: 0 0 20px rgba(242,164,169,.25); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.studio-button { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding: 9px 13px; color: var(--ink); background: rgba(255,255,255,.04); cursor: pointer; }
.studio-button span { color: var(--rose); }
main { position: relative; z-index: 6; width: min(1180px, calc(100% - 36px)); margin: auto; padding: 34px 0 70px; }
.view { display: none; animation: reveal .55s ease both; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero { min-height: 530px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; }
.eyebrow, .card-label { color: var(--rose); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font: 600 clamp(57px, 7vw, 92px)/.93 Georgia, serif; letter-spacing: -.055em; }
h1 em { color: var(--rose); }
.hero-text { max-width: 500px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; }
.primary-button { border: 0; color: #25121e; font-weight: 700; background: linear-gradient(135deg, #f6c0b6, #e47b91); padding: 14px 18px; border-radius: 8px; cursor: pointer; box-shadow: 0 12px 30px rgba(217,91,120,.16); transition: .25s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(217,91,120,.28); }
.primary-button span { margin-left: 15px; }
.text-button { color: var(--ink); border: 0; border-bottom: 1px solid var(--rose); padding: 8px 0; background: transparent; cursor: pointer; }
.hero-art { position: relative; min-height: 450px; }
.moon { position: absolute; width: 290px; height: 290px; border-radius: 50%; top: 40px; right: 80px; background: radial-gradient(circle at 35% 30%, #fff3dc, #d7a6a0 46%, #8f536e 72%); box-shadow: 0 0 70px rgba(237,171,161,.22), inset -20px -15px 40px rgba(44,18,42,.3); }
.bird { position: absolute; top: 190px; width: 90px; height: 42px; border-radius: 90% 10% 50% 50%; background: #1a111c; transform-origin: center; animation: float 4s ease-in-out infinite; }
.bird:before { content: ""; position: absolute; width: 58px; height: 36px; top: -25px; border-radius: 100% 0; background: #241727; transform: rotate(-25deg); }
.bird span { position: absolute; width: 9px; height: 9px; right: 13px; top: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 10px var(--rose); }
.bird-left { right: 245px; transform: rotate(-5deg); }
.bird-right { right: 95px; transform: scaleX(-1) rotate(-5deg); animation-delay: -.8s; }
@keyframes float { 50% { margin-top: -9px; } }
.constellation b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: twinkle 2s infinite alternate; }
.constellation b:nth-child(1) { top: 40px; left: 40px; }.constellation b:nth-child(2) { top: 110px; right: 15px; }.constellation b:nth-child(3) { top: 280px; left: 80px; }.constellation b:nth-child(4) { top: 370px; right: 80px; }.constellation b:nth-child(5) { top: 20px; right: 170px; }
@keyframes twinkle { to { opacity: .2; transform: scale(.5); } }
.love-note { position: absolute; right: 0; bottom: 25px; width: 255px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(30,19,32,.75); backdrop-filter: blur(15px); transform: rotate(-3deg); }
.love-note small { display: block; color: var(--rose); font-size: 10px; margin-bottom: 7px; }.love-note strong { font: 600 19px/1.25 Georgia, serif; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 14px; }
.card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); backdrop-filter: blur(18px); padding: 23px; }
.counter-card { display: flex; justify-content: space-between; }.counter-card h2 { margin: 16px 0 2px; font: 600 31px Georgia, serif; }.counter-card p:last-child, .next-card p { color: var(--muted); font-size: 12px; }
.mini-hearts { display: grid; color: var(--rose); opacity: .65; }.mini-hearts i:nth-child(2) { margin-left: -15px; }.mini-hearts i:nth-child(3) { margin-left: -30px; }
.prompt-card { position: relative; }.prompt-card h3 { max-width: 90%; margin: 17px 0 0; font: 600 19px/1.4 Georgia, serif; }.round-button { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--rose); background: transparent; cursor: pointer; }
.next-card { display: flex; align-items: center; gap: 17px; }.next-card h3 { margin-bottom: 4px; font-size: 14px; }.date-badge { min-width: 55px; height: 64px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-content: center; text-align: center; }.date-badge b { font: 600 23px Georgia, serif; }.date-badge span { color: var(--rose); font-size: 9px; letter-spacing: .15em; }
.venting-entry { width: 100%; display: flex; align-items: center; gap: 15px; margin-top: 14px; padding: 17px 20px; border: 1px solid rgba(242,164,169,.25); border-radius: 14px; color: var(--ink); text-align: left; background: linear-gradient(90deg, rgba(242,164,169,.12), var(--panel)); cursor: pointer; transition: .25s; }.venting-entry:hover { transform: translateY(-2px); border-color: var(--rose); }.venting-entry-icon { width: 43px; height: 43px; display: grid; place-content: center; flex: 0 0 auto; border-radius: 50%; color: #291722; background: linear-gradient(135deg, var(--cream), var(--rose)); font-weight: 800; font-size: 11px; }.venting-entry span:nth-child(2) { display: grid; gap: 3px; }.venting-entry small { color: var(--muted); }.venting-entry strong { font: 600 18px Georgia, serif; }.venting-entry b { margin-left: auto; color: var(--rose); font-size: 20px; }
.mobile-nav { display: none; }
.section-heading { min-height: 145px; display: flex; align-items: center; justify-content: space-between; }.section-heading h2, .activity-machine h2, .talk-intro h2 { margin: 8px 0 0; font: 600 clamp(36px,5vw,60px)/1 Georgia, serif; letter-spacing: -.04em; }
.timeline { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; }.memory-card { border-top: 1px solid var(--line); padding-top: 16px; }.memory-photo { height: 270px; border-radius: 10px; display: flex; align-items: end; overflow: hidden; margin-bottom: 20px; background-size: cover; transition: .35s; }.memory-card:hover .memory-photo { transform: translateY(-5px); }.memory-photo span { margin: 13px; padding: 7px 9px; border-radius: 5px; font-size: 10px; background: rgba(20,12,20,.75); }.photo-one { background: radial-gradient(circle at 65% 30%, #f9c5af, transparent 15%), linear-gradient(140deg, #381c3d, #b45672 50%, #edb08e); }.photo-two { background: linear-gradient(175deg, #4e304b 10%, #d06e75 65%, #efb872); }.photo-three { background: linear-gradient(25deg, #25162e, #5c466d 55%, #dfa5a8); }.memory-date { color: var(--rose); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.memory-card h3 { font: 600 21px Georgia, serif; }.memory-card>p:last-child { color: var(--muted); font-size: 13px; line-height: 1.6; }
.activity-layout, .talk-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }.activity-machine { min-height: 490px; border-radius: 16px; padding: 45px; background: radial-gradient(circle at 85% 15%, rgba(244,171,163,.18), transparent 30%), linear-gradient(145deg, #51263e, #241427 70%); border: 1px solid rgba(255,255,255,.13); }.activity-machine h2 { max-width: 500px; margin: 25px 0 14px; }.activity-machine>p:not(.card-label) { color: var(--muted); line-height: 1.65; max-width: 550px; }.activity-icon { float: right; width: 65px; height: 65px; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--rose); font-size: 25px; }.tags { display: flex; gap: 8px; margin: 25px 0 40px; }.tags span, .private-badge { color: var(--rose); background: rgba(239,151,162,.1); border: 1px solid rgba(239,151,162,.2); padding: 7px 10px; border-radius: 20px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.side-stack { display: grid; gap: 18px; }.schedule-card h3, .dare-card h3 { font: 600 23px/1.3 Georgia, serif; }.schedule-row { display: grid; grid-template-columns: 55px 1fr 55px; align-items: center; gap: 10px; margin: 17px 0; font-size: 10px; color: var(--muted); }.availability { height: 6px; border-radius: 10px; background: rgba(255,255,255,.07); overflow: hidden; }.availability i { display: block; margin-left: 42%; width: 46%; height: 100%; border-radius: inherit; background: var(--rose); }.availability.second i { margin-left: 55%; width: 40%; }.match-result { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 15px; border-radius: 9px; background: rgba(239,151,162,.08); }.match-result i { color: var(--rose); }.match-result span { display: grid; font-size: 11px; }.match-result small { color: var(--muted); margin-top: 3px; }.dare-card h3 { margin: 25px 0 30px; }.pill-button { border: 1px solid var(--line); border-radius: 20px; padding: 7px 12px; color: var(--muted); background: transparent; margin-right: 5px; cursor: pointer; }.pill-button.active { color: #2a1722; background: var(--rose); border-color: var(--rose); }
.talk-layout { align-items: stretch; }.talk-intro { padding: 35px 35px 35px 0; }.quote-mark { color: var(--rose); font: 600 70px/1 Georgia, serif; }.talk-intro h2 { font-size: clamp(35px,4vw,52px); }.talk-intro p { max-width: 510px; color: var(--muted); line-height: 1.65; }.talk-steps { display: flex; align-items: center; margin-top: 40px; }.talk-steps span { width: 29px; height: 29px; display: grid; place-content: center; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 10px; }.talk-steps span.active { color: #22131d; background: var(--rose); }.talk-steps i { width: 50px; height: 1px; background: var(--line); }
.statement-card { border: 1px solid var(--line); border-radius: 16px; padding: 28px; background: var(--panel); }.person-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 25px; border-radius: 8px; background: rgba(0,0,0,.18); }.person-switch button { border: 0; border-radius: 6px; padding: 10px; color: var(--muted); background: transparent; cursor: pointer; }.person-switch button.active { color: var(--ink); background: rgba(255,255,255,.08); }.statement-card label { display: block; margin-bottom: 12px; font: 600 19px Georgia, serif; }.statement-card textarea { width: 100%; min-height: 230px; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 15px; color: var(--ink); background: rgba(0,0,0,.18); outline: none; font: 13px/1.6 "Segoe UI", Arial, sans-serif; }.statement-card textarea:focus { border-color: rgba(242,164,169,.5); }.input-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }.input-footer span, .privacy-line { color: var(--muted); font-size: 10px; }.privacy-line { text-align: center; margin-top: 22px; }
.venting-layout { display: grid; grid-template-columns: 1fr 170px 1fr; gap: 15px; align-items: center; }.vent-side { position: relative; min-height: 440px; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }.vent-person { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.vent-person h3 { margin: 3px 0 0; font: 600 20px Georgia, serif; }.person-avatar { width: 43px; height: 43px; display: grid; place-content: center; border-radius: 50%; color: #2a1722; background: linear-gradient(135deg, var(--cream), var(--rose)); font: 700 17px Georgia, serif; }.submission-status { margin-left: auto; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.vent-prompt { margin: 20px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }.vent-side textarea { width: 100%; min-height: 230px; resize: none; border: 1px solid var(--line); border-radius: 9px; padding: 13px; color: var(--ink); background: rgba(0,0,0,.15); outline: none; font: 12px/1.6 "Segoe UI", Arial, sans-serif; }.vent-side textarea:focus { border-color: var(--rose); }.vent-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }.vent-footer>span { color: var(--muted); font-size: 9px; }.vent-footer .primary-button { padding: 11px 13px; font-size: 10px; }
.room-connect { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }.room-connect h3 { margin: 4px 0; font: 600 18px Georgia, serif; }.room-connect p:last-child { margin: 0; color: var(--muted); font-size: 9px; }.room-fields { display: flex; gap: 12px; align-items: center; }.room-fields .primary-button { padding: 11px 13px; }.room-fields .text-button { font-size: 9px; }
.auth-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; padding: 18px; background: radial-gradient(circle at 50% 20%, rgba(144,65,102,.42), transparent 34%), rgba(10,7,13,.97); backdrop-filter: blur(25px); }.auth-gate.hidden { display: none; }.auth-card { width: min(430px, calc(100vw - 36px)); padding: 34px; border: 1px solid var(--line); border-radius: 18px; text-align: center; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.35); }.auth-mark { margin-bottom: 25px; font: 600 25px Georgia, serif; }.auth-mark span { color: var(--rose); font-size: 14px; }.auth-card h2 { margin: 8px 0; font: 600 31px Georgia, serif; }.auth-copy { color: var(--muted); font-size: 11px; }.auth-card form { display: grid; gap: 10px; margin-top: 25px; }.auth-card form.hidden { display: none; }.auth-card input { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(0,0,0,.2); outline: none; }.auth-card input:focus { border-color: var(--rose); }.auth-card .primary-button { width: 100%; }.auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.auth-error { min-height: 16px; margin: 15px 0 0; color: var(--rose); font-size: 10px; }
.submitted-cover { position: absolute; inset: 85px 0 0; display: grid; place-content: center; justify-items: center; padding: 25px; text-align: center; background: var(--panel); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: .3s; }.vent-side.submitted .submitted-cover { opacity: 1; visibility: visible; }.submitted-cover>span { width: 48px; height: 48px; display: grid; place-content: center; border: 1px solid var(--rose); border-radius: 50%; color: var(--rose); }.submitted-cover h3 { margin: 17px 0 6px; font: 600 21px Georgia, serif; }.submitted-cover p { color: var(--muted); font-size: 11px; }
.judge-core { text-align: center; }.judge-orbit { width: 83px; height: 83px; display: grid; place-content: center; margin: 0 auto 18px; border: 1px solid var(--line); border-radius: 50%; animation: judgePulse 3s ease-in-out infinite; }.judge-orbit span { width: 54px; height: 54px; display: grid; place-content: center; border-radius: 50%; color: #2a1722; background: linear-gradient(135deg, var(--cream), var(--rose)); font: 700 16px Georgia, serif; }.judge-core h3 { margin: 8px 0; font: 600 16px/1.3 Georgia, serif; }.judge-core>p:last-of-type { color: var(--muted); font-size: 9px; line-height: 1.5; }.judge-progress { height: 3px; overflow: hidden; margin: 17px auto 0; border-radius: 4px; background: var(--line); }.judge-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--rose); transition: width .5s; }@keyframes judgePulse { 50% { box-shadow: 0 0 35px rgba(242,164,169,.2); transform: scale(1.04); } }
.judge-mode { display: inline-block; margin-top: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }.judge-mode.real { color: var(--rose); border-color: rgba(242,164,169,.3); }
.verdict-panel { display: none; margin-top: 25px; padding: 32px; border: 1px solid rgba(242,164,169,.25); border-radius: 16px; background: radial-gradient(circle at 85% 5%, rgba(242,164,169,.12), transparent 25%), var(--panel); animation: reveal .6s ease both; }.verdict-panel.visible { display: block; }.verdict-top, .verdict-actions { display: flex; justify-content: space-between; align-items: center; }.verdict-top h2 { margin: 7px 0 0; font: 600 34px Georgia, serif; }.verdict-badge { padding: 8px 11px; border: 1px solid rgba(242,164,169,.25); border-radius: 20px; color: var(--rose); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.verdict-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 30px 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.verdict-grid>div+div { border-left: 1px solid var(--line); padding-left: 25px; }.verdict-number { color: var(--rose); font-size: 9px; letter-spacing: .15em; }.verdict-grid h3 { margin: 12px 0 7px; font: 600 17px Georgia, serif; }.verdict-grid p { color: var(--muted); font-size: 11px; line-height: 1.6; }.next-step { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; padding: 18px; border-radius: 10px; background: rgba(242,164,169,.08); }.next-step>span { color: var(--rose); font-size: 23px; }.next-step h3 { margin: 5px 0 0; font: 600 17px Georgia, serif; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #2a1a2c; transition: .3s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.studio-panel { position: fixed; z-index: 31; top: 0; right: 0; width: min(430px, 100%); height: 100vh; border-left: 1px solid var(--line); color: var(--ink); background: rgba(20,14,24,.97); backdrop-filter: blur(25px); transform: translateX(105%); transition: transform .35s ease; box-shadow: -25px 0 60px rgba(0,0,0,.25); }
.studio-panel.open { transform: translateX(0); }.studio-backdrop { position: fixed; z-index: 30; inset: 0; opacity: 0; visibility: hidden; background: rgba(5,3,7,.55); backdrop-filter: blur(3px); transition: .3s; }.studio-backdrop.open { opacity: 1; visibility: visible; }
.studio-head { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 20px 25px; border-bottom: 1px solid var(--line); }.studio-head h2 { margin: 3px 0 0; font: 600 27px Georgia, serif; }.studio-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; font-size: 21px; cursor: pointer; }
.studio-scroll { height: calc(100vh - 92px); overflow-y: auto; padding: 7px 25px 35px; }.studio-section { padding: 23px 0; border-bottom: 1px solid var(--line); }.studio-label { display: flex; justify-content: space-between; margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.studio-label b { color: var(--rose); }
.name-grid { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 7px; color: var(--rose); text-align: center; }.name-grid input { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.04); outline: none; }.name-grid input:focus { border-color: var(--rose); }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.theme-choice { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 7px; color: var(--ink); text-align: left; background: rgba(255,255,255,.025); cursor: pointer; transition: .25s; }.theme-choice.active { border-color: var(--rose); background: rgba(255,255,255,.07); }.theme-choice i { display: block; height: 58px; margin-bottom: 9px; border-radius: 5px; background: linear-gradient(145deg, #160e1b, #633149); }.theme-choice[data-theme="rose"] i { background: linear-gradient(145deg, #fff1e8, #df8b8f); }.theme-choice[data-theme="ocean"] i { background: linear-gradient(145deg, #071a28, #27758a); }.theme-choice span, .theme-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.theme-choice span { font-size: 10px; font-weight: 700; }.theme-choice small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.setting-row { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; padding: 10px 0; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }.setting-row span, .setting-row small { display: block; }.setting-row b { font-size: 12px; }.setting-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }.setting-row i { position: relative; width: 35px; height: 19px; border-radius: 20px; background: rgba(255,255,255,.12); transition: .25s; }.setting-row i:after { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; border-radius: 50%; background: var(--muted); transition: .25s; }.setting-row.active i { background: var(--rose); }.setting-row.active i:after { left: 19px; background: #fff; }
.motion-range { width: 100%; accent-color: var(--rose); }.range-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.studio-save { width: 100%; margin-top: 25px; }
.love-particles { position: fixed; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }.love-particle { position: absolute; bottom: -25px; color: var(--rose); opacity: 0; font-size: 12px; animation: riseLove 9s linear infinite; }@keyframes riseLove { 10% { opacity: .3; } 80% { opacity: .15; } 100% { opacity: 0; transform: translateY(-105vh) rotate(35deg); } }
body.no-stars .constellation, body.no-hearts .love-particles { display: none; }body.motion-still *, body.motion-still *:before, body.motion-still *:after { animation-duration: 0s !important; transition-duration: 0s !important; }body.motion-playful .bird { animation-duration: 2.2s; }.motion-playful .moon { animation: moonPulse 4s ease-in-out infinite; }@keyframes moonPulse { 50% { transform: scale(1.035); box-shadow: 0 0 95px rgba(237,171,161,.35), inset -20px -15px 40px rgba(44,18,42,.3); } }
body[data-theme="rose"] { --ink: #442b35; --muted: #876d75; --rose: #b94f67; --panel: rgba(255,250,245,.68); --line: rgba(92,48,63,.13); background: radial-gradient(circle at 15% 0, #ffd6d5, transparent 40%), linear-gradient(145deg, #fff9f1, #efd1ca); }body[data-theme="rose"] .moon { background: radial-gradient(circle at 35% 30%, #fff8e9, #edb0a8 55%, #c96678); }body[data-theme="rose"] .bird { background: #6d3947; }body[data-theme="rose"] .bird:before { background: #89505e; }body[data-theme="rose"] .studio-panel { background: rgba(255,246,241,.98); }body[data-theme="rose"] .activity-machine { background: linear-gradient(145deg, #f7c8c1, #d98591); }body[data-theme="rose"] .toast { background: #fff1e9; }
body[data-theme="ocean"] { --ink: #edfaff; --muted: #9ebac4; --rose: #70d5d8; --panel: rgba(12,37,48,.72); --line: rgba(196,242,245,.12); background: radial-gradient(circle at 15% -10%, #174b5a 0, transparent 38%), linear-gradient(145deg, #07141d, #0a2733 70%, #061118); }body[data-theme="ocean"] .moon { background: radial-gradient(circle at 35% 30%, #efffff, #8bcbd2 55%, #33677d); }body[data-theme="ocean"] .studio-panel { background: rgba(6,24,32,.98); }body[data-theme="ocean"] .activity-machine { background: radial-gradient(circle at 85% 15%, rgba(112,213,216,.18), transparent 30%), linear-gradient(145deg, #164f5c, #0b2632 70%); }body[data-theme="ocean"] .toast { background: #0c2c38; }
@media (max-width: 850px) {
  .topbar>nav { display: none; }.mobile-nav { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: rgba(20,14,24,.94); backdrop-filter: blur(20px); box-shadow: 0 10px 35px rgba(0,0,0,.3); }.mobile-link { display: grid; justify-items: center; gap: 3px; border: 0; border-radius: 10px; padding: 7px 2px; color: var(--muted); background: transparent; font-size: 8px; cursor: pointer; }.mobile-link span { font-size: 13px; }.mobile-link.active, .mobile-link.vent-mobile { color: var(--rose); }.mobile-link.vent-mobile { background: rgba(242,164,169,.1); }.mobile-link.vent-mobile span { width: 25px; height: 25px; display: grid; place-content: center; margin-top: -19px; border: 2px solid #251827; border-radius: 50%; color: #281720; background: var(--rose); font-size: 8px; font-weight: 800; }main { padding-bottom: 115px; }.hero { grid-template-columns: 1fr; padding-top: 45px; }.hero-art { min-height: 390px; }.moon { right: 50%; transform: translateX(50%); width: 250px; height: 250px; }.bird-left { right: 52%; }.bird-right { right: 20%; }.love-note { right: 5%; }.dashboard-grid, .timeline, .activity-layout, .talk-layout, .verdict-grid { grid-template-columns: 1fr; }.room-connect { align-items: stretch; flex-direction: column; }.room-fields { grid-template-columns: 1fr 1fr; }.room-fields .primary-button { grid-column: 1 / -1; }.venting-layout { grid-template-columns: 1fr; }.judge-core { padding: 25px; }.verdict-grid>div+div { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }.section-heading { gap: 20px; }.timeline { gap: 40px; }.memory-photo { height: 230px; }.activity-machine { padding: 28px; }.talk-intro { padding-right: 0; }
}
@media (max-width: 520px) {
  .studio-button { width: 39px; height: 39px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }.studio-button span { font-size: 15px; }
  main, .topbar { width: min(100% - 24px, 1180px); }.hero { min-height: auto; }.hero-copy h1 { font-size: 53px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }.hero-art { min-height: 350px; }.moon { width: 210px; height: 210px; }.bird { top: 160px; transform: scale(.8); }.bird-left { right: 49%; }.bird-right { right: 7%; transform: scaleX(-1) scale(.8); }.love-note { bottom: 10px; }.section-heading { padding: 25px 0; min-height: auto; align-items: flex-start; flex-direction: column; }.section-heading h2 { font-size: 41px; }.private-badge { font-size: 8px; }.activity-machine { min-height: auto; }.activity-machine h2 { font-size: 40px; }.statement-card { padding: 18px; }
}