:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #050714; color: #f7f5ff; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; overflow: hidden; position: relative; background: radial-gradient(ellipse at 55% 75%, #161345 0%, #0a0d25 42%, #050714 80%); }
#sky { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
.app-shell.map-mode #sky { cursor: grab; }.app-shell.map-mode #sky.dragging { cursor: grabbing; }
.topbar, .sky-copy, .sky-footer { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(24px, 6vw, 84px); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { color: #f6dca7; font-size: 28px; text-shadow: 0 0 20px #ffd875; }
h1, h2, p { margin: 0; }
h1 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.eyebrow { color: #a9afd6; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.primary-button, .secondary-button, .text-button, .icon-button, .mood { border: 0; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.primary-button { border-radius: 999px; background: #f5e2b1; color: #222038; font-size: 14px; font-weight: 700; padding: 12px 18px; box-shadow: 0 8px 24px #0a061c66; }
.primary-button span { margin-left: 8px; font-size: 17px; }
.primary-button:hover { background: #fff0c9; transform: translateY(-2px); box-shadow: 0 11px 28px #0a061c99; }
.sky-copy { max-width: 550px; margin: clamp(80px, 16vh, 180px) 0 0 clamp(24px, 12vw, 180px); pointer-events: none; }
.sky-copy .eyebrow { margin-bottom: 17px; }
.sky-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 68px); font-weight: 400; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.sky-copy p:last-child { color: #bac0df; font-size: 16px; line-height: 1.6; margin-top: 20px; max-width: 390px; }
.sky-footer { bottom: 0; display: flex; align-items: center; gap: 22px; padding: 24px clamp(24px, 6vw, 84px) 30px; color: #b7bddb; font-size: 13px; }
.sky-footer .quote { margin-left: auto; }
.quote { color: #777da8; font-family: Georgia, serif; font-style: italic; }
.panel { position: fixed; right: clamp(18px, 6vw, 84px); top: 50%; z-index: 3; width: min(610px, calc(100vw - 36px)); transform: translate(0, -45%) scale(.97); opacity: 0; pointer-events: none; border: 1px solid #ffffff21; border-radius: 22px; background: linear-gradient(145deg, #1d2146f5, #0e1129f5); box-shadow: 0 28px 80px #000a; backdrop-filter: blur(18px); padding: 28px; transition: opacity .25s ease, transform .25s ease; }
.panel.open { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1); }
.panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.panel-heading h2 { margin-top: 6px; font-family: Georgia, serif; font-size: 29px; font-weight: 400; letter-spacing: -.02em; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; color: #d8dcf6; background: #ffffff0d; border-radius: 50%; font-size: 25px; line-height: 1; }
.icon-button:hover { background: #ffffff22; }
label { display: block; margin-bottom: 11px; color: #e9eaff; font-size: 14px; font-weight: 600; }
textarea { width: 100%; min-height: 220px; resize: vertical; border: 1px solid #ffffff20; outline: none; border-radius: 13px; background: #06091b8a; color: #f7f5ff; font-size: 15px; line-height: 1.65; padding: 15px; }
textarea:focus { border-color: #eecf8b9c; box-shadow: 0 0 0 3px #eecf8b1a; }
textarea::placeholder { color: #8990b4; }
.title-input, select, input:not([type="file"]) { width: 100%; border: 1px solid #ffffff20; border-radius: 10px; outline: none; background: #06091b8a; color: #f7f5ff; font-size: 14px; padding: 12px 13px; }
.title-input { margin-bottom: 10px; }
.entry-date-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 11px; color: #cfd4ef; font-size: 12px; }.entry-date-row .secondary-button { padding: 7px 11px; font-size: 12px; }.entry-date-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.memory-media-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }.drawing-wrap { margin-top: 12px; }.drawing-wrap canvas { display: block; width: 100%; height: 180px; border: 1px solid #ffffff20; border-radius: 12px; background: #090c20; touch-action: none; }.memory-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.memory-tag { border: 1px solid #c9d6ff3b; border-radius: 999px; color: #cdd8ff; font-size: 11px; padding: 5px 9px; }.memory-media { display: grid; gap: 10px; margin-top: 15px; }.memory-media img { max-width: 100%; max-height: 260px; object-fit: cover; border: 1px solid #ffffff1c; border-radius: 12px; }.memory-media audio { width: 100%; }
.lock-screen.unlocking::before { display: none; }.flight-trail { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.flight-trail path { fill: none; stroke: #e6ecff; stroke-width: 2.3; stroke-linecap: round; filter: drop-shadow(0 0 4px #9db6ff) drop-shadow(0 0 13px #728be3); opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }.lock-screen.unlocking .flight-trail path { animation: curved-flight-trail 1.48s 1.34s cubic-bezier(.18,.72,.24,1) forwards; }.lock-screen.unlocking .brand-mark { animation-name: shooting-star-curved; }@keyframes shooting-star-curved { 0% { transform: translate(0,0) scale(1); opacity:1; text-shadow:0 0 20px #ffd875; } 9% { transform: translate(11px,-7px) scale(1.07); } 18% { transform: translate(-14px,8px) scale(1.12); } 29% { transform: translate(9px,13px) scale(1.08); } 43% { transform: translate(-45vw,34vh) scale(.82); opacity:1; } 53% { transform: translate(-44vw,34vh) scale(1.22); text-shadow:0 0 30px #fff6c8,0 0 54px #a9bdff; } 68% { transform: translate(-11vw,14vh) scale(.88); } 84% { transform: translate(27vw,-20vh) scale(.57); } 100% { transform: translate(57vw,-54vh) scale(.28); opacity:0; text-shadow:0 0 46px #fff; } }@keyframes curved-flight-trail { 0% { stroke-dashoffset:1; opacity:0; } 8% { opacity:.55; } 80% { stroke-dashoffset:.05; opacity:1; } 100% { stroke-dashoffset:0; opacity:1; } }
.title-input:focus, select:focus, input:not([type="file"]):focus { border-color: #eecf8b9c; box-shadow: 0 0 0 3px #eecf8b1a; }
.constellation-field { margin-top: 16px; color: #e3e5fa; font-size: 13px; }
.constellation-field select { display: block; margin-top: 8px; }
.small-text { font-size: 12px; padding-left: 0; }
.form-footer { margin-top: 19px; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { color: #e3e5fa; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
legend span { color: #8d94bb; font-weight: 400; }
.mood-options { display: flex; flex-wrap: wrap; gap: 7px; }
.mood { border: 1px solid #ffffff1a; border-radius: 999px; background: #ffffff0b; color: #cbd0ec; font-size: 12px; padding: 8px 11px; }
.mood:hover, .mood.selected { background: #eee1bf20; border-color: #f2d99885; color: #fff1cd; }
.save-actions, .memory-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 23px; }
.secondary-button { border-radius: 999px; background: #ffffff0d; color: #e8eaff; padding: 11px 16px; font-size: 13px; font-weight: 600; }
.secondary-button:hover { background: #ffffff20; }
.memory-text { max-height: 380px; overflow: auto; white-space: pre-wrap; color: #eff0ff; font-size: 16px; line-height: 1.7; }
.text-button { margin-right: auto; padding: 8px; background: transparent; color: #a9afd6; font-size: 13px; }
.text-button:hover { color: #fff; }
.danger:hover { color: #f1a6ad; }
.map-controls { position: fixed; z-index: 2; top: 95px; left: clamp(18px, 6vw, 84px); width: min(280px, calc(100vw - 36px)); border: 1px solid #ffffff1a; border-radius: 18px; background: #10142edb; box-shadow: 0 18px 55px #0008; padding: 19px; opacity: 0; pointer-events: none; transform: translateX(-12px); transition: opacity .25s, transform .25s; backdrop-filter: blur(12px); }
.map-controls.open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.map-controls > div { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.map-controls h2 { font-family: Georgia, serif; font-size: 25px; font-weight: 400; margin-top: 4px; }
.map-controls label { color: #bfc5e5; font-size: 11px; margin-top: 12px; }
.map-controls .media-filter { display: flex; align-items: center; gap: 8px; cursor: pointer; line-height: 1.3; }.map-controls .media-filter input { accent-color: #f3dc9c; }
.map-controls label input, .map-controls label select { display: block; margin-top: 6px; }
.full-button { display: block; width: 100%; margin-top: 17px; }
.map-constellations { margin-top: 18px; border-top: 1px solid #ffffff14; padding-top: 14px; }.map-constellations .eyebrow { margin-bottom: 8px; }.constellation-list { display: grid; gap: 5px; max-height: 150px; overflow: auto; }.constellation-map-item { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 8px; background: transparent; color: #cbd0eb; padding: 7px 6px; text-align: left; font-size: 12px; }.constellation-map-item:hover, .constellation-map-item.active { background: #ffffff12; color: #ffedbf; }.constellation-map-item span { color: #8d94ba; font-size: 10px; }
.zoom-controls { position: fixed; z-index: 3; right: clamp(18px, 6vw, 84px); bottom: 35px; display: flex; align-items: center; overflow: hidden; border: 1px solid #ffffff22; border-radius: 13px; background: #111530dc; box-shadow: 0 10px 35px #0008; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s, transform .25s; backdrop-filter: blur(12px); }.zoom-controls.open { opacity: 1; pointer-events: auto; transform: translateY(0); }.zoom-controls button { width: 37px; height: 37px; border: 0; background: transparent; color: #e9ebff; font-size: 21px; }.zoom-controls button:hover { background: #ffffff16; }.zoom-controls span { min-width: 48px; color: #b7bddb; font-size: 11px; text-align: center; }.zoom-controls .reset-view { width: auto; border-left: 1px solid #ffffff19; font-size: 11px; padding: 0 12px; }
.app-shell.map-mode .sky-copy, .app-shell.map-mode .sky-footer { opacity: 0; pointer-events: none; transition: opacity .2s; }
.app-shell.map-mode .topbar { opacity: .26; }
.app-shell.map-mode .topbar .top-actions .primary-button { display: none; }
.constellation-description, .tools-copy { color: #bbc1df; font-size: 14px; line-height: 1.6; }
.constellation-entries { display: grid; gap: 8px; margin-top: 20px; max-height: 270px; overflow: auto; }
.constellation-entry { width: 100%; border: 1px solid #ffffff12; border-radius: 11px; background: #ffffff08; color: #edf0ff; text-align: left; padding: 11px 12px; }
.constellation-entry:hover { background: #ffffff16; }
.constellation-entry strong, .constellation-entry span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.constellation-entry strong { font-size: 13px; font-weight: 600; }.constellation-entry span { color: #aeb4d4; font-size: 11px; margin-top: 4px; }
.tools-panel { max-width: 470px; }.tool-list { display: grid; gap: 9px; margin-top: 22px; }.tool-list .secondary-button { text-align: left; }.import-button input { display: none; }
.mood-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 19px; }.mood-stat { border: 1px solid #ffffff18; border-radius: 999px; color: #d9def6; font-size: 11px; padding: 7px 10px; }.timeline-entries { display: grid; gap: 8px; max-height: 390px; overflow: auto; }.timeline-month { color: #8f96bd; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin: 13px 0 2px; }.timeline-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff08; color: #e9ecff; padding: 11px; text-align: left; }.timeline-item:hover { background: #ffffff15; }.timeline-item strong { display: block; font-size: 13px; }.timeline-item span { color: #9ea5ca; font-size: 11px; }.timeline-item .restore { align-self: center; border: 0; border-radius: 999px; background: #f2dfad; color: #29263d; font-size: 11px; font-weight: 700; padding: 7px 9px; }
.mini-panel { max-width: 430px; }.mini-panel form { display: grid; gap: 11px; }.mini-panel label { margin: 0; }.short-area { min-height: 94px; }.mini-panel .primary-button { justify-self: end; margin-top: 9px; }
.lock-screen { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 25%, #1a1851, #050714 68%); opacity: 0; pointer-events: none; transition: opacity .3s; overflow: hidden; }.lock-screen.open { opacity: 1; pointer-events: auto; }.lock-card { position: relative; z-index: 3; width: min(360px, 100%); text-align: center; }.lock-card .brand-mark { position: relative; display: block; font-size: 42px; margin-bottom: 16px; }.lock-card h2 { font-family: Georgia, serif; font-size: 31px; font-weight: 400; margin: 10px 0; }.lock-card > p:not(.eyebrow) { color: #aeb5d6; font-size: 14px; line-height: 1.5; }.lock-card form { display: grid; gap: 10px; margin-top: 25px; }.lock-card .primary-button { width: 100%; }.unlock-error { color: #ffb3bb !important; min-height: 18px; margin-top: 10px; }.lock-screen.unlocking { animation: lock-reveal 3.05s ease forwards; pointer-events: none; }.lock-screen.unlocking::before { content: ''; position: absolute; z-index: 2; left: -14vw; bottom: 5vh; width: 160vw; height: 3px; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, #d9e6ff 17%, #fff8d6 35%, #d9e6ff 54%, transparent 100%); box-shadow: 0 0 12px #e4edff, 0 0 38px #9caeff, 0 0 72px #6d82df; transform: rotate(-36deg) scaleX(.01); transform-origin: left center; animation: shooting-trail 1.5s 1.35s cubic-bezier(.17,.75,.19,1) forwards; }.lock-screen.unlocking .brand-mark { animation: shooting-star 2.65s cubic-bezier(.2,.7,.2,1) forwards; }.lock-screen.unlocking .brand-mark::after { content:''; position:absolute; z-index:-1; left:-92px; top:52%; width:88px; height:2px; border-radius:999px; background:linear-gradient(90deg,transparent,#9db6ff 55%,#fff1c7); box-shadow:0 0 8px #b8c9ff; transform-origin:right center; animation:early-star-tail 1.42s ease-out forwards; }.lock-screen.unlocking .lock-card > :not(.brand-mark) { animation: lock-copy-away .45s .45s ease forwards; }@keyframes shooting-star { 0% { transform: translate(0,0) scale(1); opacity:1; text-shadow:0 0 20px #ffd875; } 9% { transform: translate(11px,-7px) scale(1.07); } 18% { transform: translate(-14px,8px) scale(1.12); } 29% { transform: translate(9px,13px) scale(1.08); } 43% { transform: translate(-48vw,39vh) scale(.82); opacity:1; } 53% { transform: translate(-47vw,38vh) scale(1.22); text-shadow:0 0 30px #fff6c8,0 0 54px #a9bdff; } 100% { transform: translate(58vw,-54vh) scale(.28); opacity:0; text-shadow:0 0 46px #fff; } }@keyframes early-star-tail { 0% { opacity:0; transform:scaleX(.12) rotate(-8deg); } 14% { opacity:.55; transform:scaleX(.55) rotate(7deg); } 38% { opacity:.42; transform:scaleX(.85) rotate(-5deg); } 68% { opacity:.24; transform:scaleX(1) rotate(11deg); } 100% { opacity:0; transform:scaleX(.55) rotate(0); } }@keyframes shooting-trail { 0% { transform: rotate(-36deg) scaleX(.01); opacity:0; } 13% { opacity:.15; } 53% { transform: rotate(-36deg) scaleX(.62); opacity:1; } 84% { transform: rotate(-36deg) scaleX(1.08); opacity:1; } 100% { transform: rotate(-36deg) scaleX(1.16); opacity:1; } }@keyframes lock-copy-away { to { opacity:0; transform:translateY(12px); } }@keyframes lock-reveal { 0%,90% { opacity:1; } 100% { opacity:0; } }
.toast { position: fixed; z-index: 5; left: 50%; bottom: 40px; transform: translate(-50%, 25px); border: 1px solid #ffe8ad45; border-radius: 999px; background: #26213bf2; color: #ffedc2; opacity: 0; padding: 12px 19px; box-shadow: 0 12px 30px #0008; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.lock-screen.flight-running { background: transparent; animation: none; transition: none; pointer-events: auto; }
.lock-screen:not(.open) { display: none; transition: none; }
.lock-screen.flight-running .lock-card { visibility: hidden; }
.lock-screen.flight-running::before, .lock-screen.flight-running::after,
.lock-screen.flight-running .flight-trail { display: none; }
.unlock-flight-canvas { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.lock-card .brand-mark { width: 80px; height: 64px; margin: 0 auto 16px; font-size: 0; text-shadow: none; }
.lock-card .brand-mark canvas { display: block; width: 80px; height: 64px; }
@media (max-width: 650px) { .topbar { padding: 21px 20px; } .topbar .primary-button { font-size: 0; padding: 12px 14px; } .topbar .primary-button span { font-size: 19px; margin: 0; } .top-actions .secondary-button { font-size: 12px; padding: 10px 12px; } .sky-copy { margin: 115px 24px 0; } .sky-footer { padding: 20px 24px 28px; } .quote { display: none; } .panel { padding: 21px; } .save-actions { flex-wrap: wrap; } .map-controls { top: 76px; } }