:root{--gold:#e9c46a;--gold2:#fff1c4;--copper:#d0803f;--ink:#f8f4ea;--dim:#bdb8c8;--void:#05040a;--glass:rgba(24,19,40,.66);--line:rgba(233,196,106,.24);--vibe:#ff5fae;--pic:#ff8a3d;--vid:#ff5a52;--quo:#b58cff;--song:#f6c945;--word:#39d6c6;--ch:#4f8cff;--wa:#25d366;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.screen{position:relative;max-width:520px;min-height:100dvh;margin:0 auto;padding:0 16px calc(32px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 95% 900px,#2c1454 0,transparent 420px),radial-gradient(circle at 0 1500px,#0d3050 0,transparent 440px),radial-gradient(circle at 90% 2500px,#3a1630 0,transparent 400px),var(--void)}
.stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;pointer-events:none}
.screen>*:not(.stars){position:relative}
.hero{margin:0 -16px;aspect-ratio:1.28;overflow:hidden;position:relative}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(5,4,10,.5),transparent 28%,transparent 48%,rgba(5,4,10,.9) 88%,var(--void))}
.hud{position:absolute;z-index:2;top:max(13px,env(safe-area-inset-top));left:16px;right:16px;display:flex;justify-content:space-between;font:400 11px 'Space Mono',monospace;letter-spacing:.1em;color:var(--gold2)}
.brand{position:absolute;z-index:2;left:16px;bottom:9px}
.logo{font:800 33px/.95 'Syne',sans-serif;margin:0;background:linear-gradient(100deg,var(--gold2),var(--gold) 40%,var(--copper) 70%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sig{font:italic 19px 'EB Garamond',serif;margin:2px 0 0}
.weave{display:block;width:calc(100% + 32px);margin:0 -16px;height:18px}
.weave.gap{margin-top:24px}
.coords{padding:14px 0 2px}
.beacon{display:flex;gap:11px;align-items:center;margin-bottom:11px}
.ping{flex:none;width:11px;height:11px;margin-left:2px;border-radius:50%;background:var(--word);box-shadow:0 0 0 0 var(--word);animation:ping 2.2s infinite}
@keyframes ping{to{box-shadow:0 0 0 12px transparent}}
.place{font:800 20px/1.1 'Syne',sans-serif}
.checked{margin-left:auto;font-size:12.5px;color:var(--dim);white-space:nowrap}
.times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.times b{display:block;font:700 14px 'Space Mono',monospace;color:var(--gold2);white-space:nowrap}
.times small{font-size:12.5px;color:var(--dim)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:15px;margin-top:14px}
.eyebrow{font:700 11px 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 9px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.eyebrow span{font-weight:400;color:var(--dim);letter-spacing:.01em;text-transform:none;font-size:11.5px}
.sect{margin-top:22px}
.me{display:flex;gap:14px;align-items:center}
.said{flex:1;min-width:0}
.said .ask{margin-bottom:9px}
.face{flex:none;width:46%;padding:2px;border-radius:16px;background:conic-gradient(var(--vibe),var(--pic),var(--song),var(--word),var(--ch),var(--quo),var(--vibe));box-shadow:0 0 26px -8px var(--gold)}
.face img{display:block;width:100%;height:auto;border-radius:14px}
.ask{font:italic 25px/1.04 'EB Garamond',serif;color:var(--gold2);margin:0}
.answer{font-size:16px;line-height:1.42;margin:0;overflow-wrap:anywhere}
.btn{border:0;border-radius:12px;font:700 15px 'DM Sans',sans-serif;min-height:46px;padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn[disabled]{opacity:.55;cursor:default}
.primary{background:linear-gradient(100deg,var(--gold2),var(--gold));color:#1a1206}
.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.wide{width:100%}
.wa{width:100%;margin-top:12px;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.75);color:#b9f7d1}
.wa svg{width:20px;height:20px;fill:var(--wa)}
.quick{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:99px;min-height:38px;padding:5px 12px;font-size:14px;cursor:pointer;text-decoration:none}
.orbit{display:block;width:calc(100% + 16px);margin:0 -8px;touch-action:manipulation}
.pl{cursor:pointer;outline:none}
.pl text{font:700 11px 'Space Mono',monospace;fill:var(--ink);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#05040a;stroke-width:3px}
.pl:focus-visible .halo{stroke:var(--gold2);stroke-width:2}
.pl.empty{opacity:.45}
.panel h3{font:800 21px/1.14 'Syne',sans-serif;margin:0 0 7px;overflow-wrap:anywhere}
.kicker{font:700 11px 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--gold));margin:0 0 7px}
.panel p,.prose{font-size:16px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.prose{white-space:pre-wrap}
.book{font-family:'EB Garamond',serif;font-size:20px;line-height:1.5}
.serif{font-family:'EB Garamond',serif;font-size:21px!important;line-height:1.27!important}
.dim{color:var(--dim);font-size:13.5px}
.meter{display:grid;grid-template-columns:64px 1fr 26px;gap:8px;align-items:center;font:11.5px 'Space Mono',monospace;margin-top:7px}
.meter i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.meter i:before{content:"";display:block;height:100%;width:var(--v);border-radius:4px;background:linear-gradient(90deg,var(--copper),var(--c));box-shadow:0 0 10px var(--c)}
.shot{display:block;width:100%;border-radius:12px;margin-bottom:9px;background:#14101f}
video.shot{max-height:70dvh}
audio{display:block;width:100%;margin:9px 0;color-scheme:dark}
.react{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.react button,.react a{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);border-radius:99px;min-height:40px;padding:5px 12px;font-size:14px;cursor:pointer;text-decoration:none}
.react button.on{border-color:var(--gold);background:rgba(233,196,106,.16)}
.ic{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.on .ic{fill:var(--gold)}
.sky{text-align:center;margin-top:24px}
.sky>svg{display:block;width:100%}
.sky .react{justify-content:center}
.map{display:block;width:calc(100% + 12px);margin:0 -6px}
.map text{font:11px 'Space Mono',monospace;fill:var(--ink);paint-order:stroke;stroke:#05040a;stroke-width:3px}
.map .now{fill:var(--word);font-weight:700}
.route{animation:drift 26s linear infinite}
@keyframes drift{to{stroke-dashoffset:-210}}
.up{display:flex;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.up:first-of-type{border-top:0;padding-top:2px}
.up:last-child{padding-bottom:0}
.day{flex:none;width:46px;text-align:center;border:1px solid var(--gold);border-radius:10px;padding:5px 0;font:700 10.500px 'Space Mono',monospace;color:var(--gold)}
.day b{display:block;font-size:18px}
.up strong{display:block;font-size:15px;line-height:1.2}
.up small{font-size:13.5px;color:var(--dim);line-height:1.3;display:block;margin-top:2px}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px}
.shelf a{text-align:center;font-size:13.5px;font-weight:500;line-height:1.2;color:var(--ink);text-decoration:none}
.shelf i{display:block;width:66px;height:66px;border-radius:50%;margin:0 auto 7px;background:radial-gradient(circle at 34% 28%,#fff 0,var(--c) 22%,color-mix(in srgb,var(--c) 45%,#05040a) 62%,#05040a 100%);box-shadow:0 0 22px -6px var(--c)}
.bye{font:italic 22px 'EB Garamond',serif;color:var(--gold2);text-align:center;margin:24px 0 0}
.top{display:flex;align-items:center;gap:8px;padding:max(14px,env(safe-area-inset-top)) 0 4px}
.top h1{font:800 20px/1.1 'Syne',sans-serif;margin:0;color:var(--gold2)}
.iconbtn{flex:none;width:44px;height:44px;margin-left:-10px;display:grid;place-items:center;background:none;border:0;cursor:pointer;text-decoration:none}
.iconbtn .ic{width:24px;height:24px}
.field{display:block;margin-top:13px}
.field>span{display:block;font-size:13.5px;color:var(--dim);margin-bottom:5px}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=datetime-local],input:not([type]),textarea,select{width:100%;min-height:46px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:16px}
textarea{min-height:110px;resize:vertical}
.code{letter-spacing:.3em;text-align:center;font:700 24px 'Space Mono',monospace!important}
.err{color:#ffb3ad;font-size:14px;margin:10px 0 0;min-height:1em}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.types button{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;min-height:46px;padding:6px 3px;font-size:13px;cursor:pointer}
.types button.on{border-color:var(--c);color:var(--c);box-shadow:0 0 14px -5px var(--c)}
.drop{display:block;border:1px dashed var(--gold);color:var(--gold);border-radius:12px;padding:20px 12px;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.who{display:grid;gap:6px;margin-top:8px}
.who label{display:flex;gap:9px;align-items:center;min-height:36px}
.who input{width:20px;height:20px;accent-color:var(--gold)}
.reply{padding:11px 0;border-top:1px solid var(--line)}
.reply:first-child{border-top:0}
.reply header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px}
.reply header b{color:var(--gold2)}
.link{background:none;border:0;color:var(--dim);font-size:13px;text-decoration:underline;cursor:pointer;min-height:32px;padding:0 2px}
.rec{display:flex;align-items:center;gap:10px;margin-top:10px;font:700 14px 'Space Mono',monospace}
.dot{width:12px;height:12px;border-radius:50%;background:var(--vid);animation:ping 1.2s infinite;color:var(--vid)}
.listrow{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.listrow:first-child{border-top:0}
.listrow b{display:block;overflow-wrap:anywhere}
.listrow>div{flex:1;min-width:0}
.pip{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c,var(--gold));box-shadow:0 0 10px var(--c,var(--gold))}
.thumb{flex:none;width:58px;height:58px;border-radius:10px;object-fit:cover;background:#14101f}
.owner{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.owner .chip{border-color:var(--gold);color:var(--gold)}
.steps{margin:10px 0 0;padding-left:22px;font-size:16px;line-height:1.5}
.steps li{margin-top:7px}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:92vw;background:#1b1530;color:var(--ink);border:1px solid var(--gold);border-radius:12px;padding:11px 15px;font-size:14.5px;box-shadow:0 8px 30px #000}
.center{text-align:center;color:var(--dim);padding:60px 0}
@media (prefers-reduced-motion:reduce){.ping,.route,.dot{animation:none}}