.connected-body { background: radial-gradient(ellipse at 25% 0%,#19253a 0,transparent 48%),#0b1323; }
.relay-header { max-width:1240px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line); }
.relay-brand { display:flex;align-items:center;gap:11px;text-decoration:none;font-size:17px;letter-spacing:2.6px;color:var(--gold-light); }
.relay-brand small { display:block;font-size:8px;letter-spacing:1.7px;color:var(--muted);margin-top:2px; }
.relay-header-end { display:flex;align-items:center;gap:16px; }
.relay-preview { border:1px solid #f5bd7e38;border-radius:40px;padding:6px 12px;font-size:11px;color:#e5c59f; }
.relay-account { width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center; }
.relay-shell { width:min(1050px,100%);padding:45px 32px 100px;margin:auto; }
.relay-welcome-shell { width:min(1220px,100%);padding-top:55px; }
.relay-intro { margin:14px 0 30px; }
.relay-intro .eyebrow { color:var(--gold);font-size:10px;letter-spacing:2px;margin-bottom:13px; }
.relay-intro h1 { font-size:clamp(30px,4vw,46px);line-height:1.17;outline:none; }
.relay-intro>p:last-child:not(.eyebrow) { margin-top:16px;max-width:620px;line-height:1.7; }
.relay-footer { display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted);margin-top:50px;padding-top:24px;border-top:1px solid var(--line); }
.relay-footer a { text-underline-offset:4px; }
.relay-nav { position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);display:flex;z-index:5;border:1px solid #344154;border-bottom:0;border-radius:20px 20px 0 0;padding:8px 20px max(10px,env(safe-area-inset-bottom));background:#111d30f5;backdrop-filter:blur(20px);box-shadow:0 -6px 35px #0002; }
.relay-nav button { display:flex;align-items:center;justify-content:center;gap:9px;position:relative;width:50%;min-height:44px;color:var(--muted);font-size:13px;border-radius:12px; }
.relay-nav button[aria-current] { color:var(--gold-light);background:#f5bd7e0d; }
.relay-unread { width:6px;height:6px;border-radius:50%;background:var(--gold); }
.relay-secondary { display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 16px;border:1px solid #ffffff22;border-radius:12px;color:#d8dfeb;font-size:13px;line-height:1.4;text-decoration:none; }
.relay-secondary:hover { border-color:#f5bd7e66;background:#ffffff05; }
.connected-body .button-primary { min-height:50px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;line-height:1.35;text-decoration:none;max-width:100%; }
.relay-kicker { color:var(--gold);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.7px; }
.relay-welcome { display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center; }
.relay-welcome-story .relay-intro h1 { font-size:clamp(43px,5vw,66px);letter-spacing:-2px; }
.relay-welcome-story .relay-intro>p:last-child { max-width:440px;font-size:16px; }
.relay-art { position:relative;display:grid;place-items:center;isolation:isolate;min-height:320px; }
.relay-art::before { content:"";position:absolute;width:330px;height:290px;max-width:100%;background:radial-gradient(ellipse,#ffb46116,transparent 68%);z-index:-1; }
.relay-art img { width:300px;height:300px;max-width:90%;object-fit:contain;filter:drop-shadow(0 8px 28px #f7a75818);animation:relay-breathe 7s ease-in-out infinite; }
.relay-orbit { position:absolute;left:50%;top:50%;width:300px;height:150px;max-width:96%;border:1px solid #d3bb9920;border-radius:50%;transform:translate(-50%,-40%) rotate(-18deg);z-index:-1; }
.relay-art.small { min-height:180px; }
.relay-art.small img { width:185px;height:185px; }
.relay-art.small .relay-orbit { width:220px;height:110px; }
.relay-promise { display:flex;justify-content:space-between;gap:15px;padding-top:15px;border-top:1px solid var(--line);font-size:10px;color:var(--gold); }
.relay-promise strong { display:block;font-size:12px;font-weight:400;color:#c6cfda;margin-top:5px; }
.relay-auth-card { padding:34px;background:linear-gradient(155deg,#1b293c,#101b2d);border:1px solid #ffffff16;border-radius:22px;box-shadow:0 15px 80px #0002; }
.relay-auth-card h2 { margin:12px 0;font-size:29px; }
.relay-auth-card>p { font-size:13px;line-height:1.8; }
.relay-auth-card form { margin:22px 0 10px; }
.relay-auth-card label { display:block;font-size:12px;margin:17px 0 7px;color:#e2e6eb; }
.relay-auth-card input { display:block;width:100%;border:1px solid #ffffff26;border-radius:9px;min-height:48px;padding:10px 13px;background:#0b132388;color:var(--text);font-size:16px; }
.relay-auth-card input::placeholder { color:#8898ae; }
.relay-auth-card form small { font-size:11px;display:block;color:var(--muted);margin-top:8px; }
.relay-auth-card form .button-primary { width:100%;margin:22px 0 0; }
.relay-auth-card .text-button { min-height:44px;font-size:12px;color:#ddc09c; }
.relay-auth-card .relay-fineprint { margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;line-height:1.7; }
.relay-segment { display:flex;background:#0a1425;border:1px solid var(--line);border-radius:10px;padding:4px;margin-top:22px; }
.relay-segment button { flex:1;min-height:40px;border-radius:7px;font-size:12px;color:var(--muted); }
.relay-segment button[aria-pressed="true"] { background:#29364a;color:var(--gold-light); }
.relay-single { max-width:440px;margin:40px auto; }
.relay-categories { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px; }
.relay-categories button { display:flex;gap:10px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--muted);text-align:left; }
.relay-categories button .icon { color:var(--cat); }
.relay-categories button[aria-pressed="true"] { background:color-mix(in srgb,var(--cat) 9%,transparent);border-color:color-mix(in srgb,var(--cat) 45%,transparent);color:var(--text); }
.relay-receive-panel { display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffffff16;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#1b293c,#111c30); }
.relay-scene { background:radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--cat) 8%,transparent),transparent 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:16px;position:relative; }
.relay-scene::after { content:"";position:absolute;inset:20px;border:1px solid #ffffff08;border-radius:50% 50% 10px 10px;pointer-events:none; }
.relay-scene-caption { font-size:9px;letter-spacing:2.5px;color:#c0b7a8;margin-bottom:25px; }
.relay-receive-copy { padding:45px 35px;align-self:center; }
.relay-receive-copy h2 { font-size:34px;line-height:1.2;margin:16px 0; }
.relay-receive-copy>p { font-size:14px;line-height:1.8; }
.relay-receive-copy .button-primary { margin-top:25px;width:100%; }
.relay-receive-copy .relay-soft-note { font-size:11px;margin-top:18px; }
.relay-soft-note { font-size:12px;color:#b4bfce;line-height:1.8; }
.relay-start { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:26px 4px;border-bottom:1px solid var(--line); }
.relay-start h2 { font-size:22px; }
.relay-start p { font-size:12px;margin-top:7px; }
.relay-start .relay-secondary { flex-shrink:0; }
.relay-footnote { margin-top:22px;font-size:11px;line-height:1.8;color:#a9b5c7; }
.relay-centered { text-align:center;max-width:580px;margin:20px auto; }
.relay-centered .relay-intro>p { max-width:470px;margin-left:auto;margin-right:auto; }
.relay-centered>.button-primary,.relay-centered>.relay-secondary { margin:15px 7px 0; }
.relay-ritual { max-width:630px;margin:auto; }
.relay-steps { list-style:none;padding:0;display:flex;justify-content:space-between;gap:10px;margin:0 0 35px;font-size:11px;color:var(--muted); }
.relay-steps li { display:flex;align-items:center;gap:7px; }
.relay-steps li>span { display:grid;place-items:center;border:1px solid #ffffff25;width:23px;height:23px;border-radius:50%;font-size:10px; }
.relay-steps li[aria-current] { color:var(--gold-light); }
.relay-steps li[aria-current]>span { border-color:var(--gold);background:#f5bd7e18; }
.relay-turn-content { text-align:center; }
.relay-turn-content h1 { font-size:clamp(30px,4vw,40px);outline:none; }
.relay-turn-content>.relay-kicker { margin:12px 0 16px; }
.relay-turn-content>blockquote { margin:24px auto;font:26px/1.5 var(--serif);max-width:500px; }
.relay-turn-content>.button-primary { margin-top:28px;width:100%; }
.relay-turn-content>p { font-size:13px; }
.relay-turn-content .relay-soft-note { margin-top:24px; }
.relay-turn-content .relay-intro>p { margin-left:auto;margin-right:auto; }
.relay-turn-tools { display:flex;justify-content:space-between;gap:10px;margin-top:20px; }
.relay-turn-tools .relay-secondary { border:0;font-size:12px;padding-left:0;padding-right:0; }
.relay-ritual>.relay-footnote { text-align:center; }
.relay-ribbon { display:flex;gap:3px;border-radius:8px;overflow:hidden;height:22px;margin:28px 0; }
.relay-ribbon>span { flex:1;min-width:5px;position:relative; }
.relay-ribbon>span.mine::after { content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#142036;box-shadow:0 0 0 2px #fff8; }
.relay-sky-preview { position:relative;display:grid;place-items:end center;padding:23px;height:170px;border-radius:18px;background:radial-gradient(ellipse at bottom,var(--sky),#17243d 75%);margin:25px 0; }
.relay-sky-preview span { font:22px var(--serif);color:#fff;text-shadow:0 2px 6px #0009; }
.relay-swatches { display:grid;grid-template-columns:repeat(6,1fr);gap:8px; }
.relay-swatches button { display:flex;flex-direction:column;align-items:center;gap:10px;min-height:90px;border-radius:10px;padding:9px 2px;color:#c4cddb;font-size:11px; }
.relay-swatches button>span { width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#162238; }
.relay-swatches button[aria-pressed="true"] { background:#ffffff08; }
.relay-swatches button[aria-pressed="true"]>span { outline:2px solid var(--gold-light);outline-offset:4px; }
.relay-phrases { display:grid;gap:12px;margin-top:25px;text-align:left; }
.relay-phrases button { position:relative;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:18px 46px 18px 20px;min-height:72px;border:1px solid #ffffff20;border-radius:12px;font-size:15px;line-height:1.6;background:#142137; }
.relay-phrases button small { color:var(--muted);font-size:12px; }
.relay-phrases button[aria-pressed="true"] { border-color:#f5bd7e99;background:#f5bd7e0c; }
.relay-phrases button .icon { position:absolute;right:17px;top:calc(50% - 10px);color:var(--gold); }
.relay-contribution { border:1px solid #ffffff20;border-top:6px solid var(--sky);border-radius:16px;padding:34px 24px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--sky) 12%,transparent),transparent),#142137; }
.relay-color-label { color:#d6dfeb;letter-spacing:1.5px;font-size:10px; }
.relay-contribution blockquote { margin:24px 0;font:28px/1.5 var(--serif); }
.relay-contribution>p { font-size:12px; }
.relay-contribution.compact { padding:22px; }
.relay-contribution.compact blockquote { font-size:21px;margin:10px 0; }
.relay-success .relay-art { min-height:240px; }
.relay-success .relay-art img { width:240px;height:240px; }
.relay-section-line { display:flex;justify-content:space-between;align-items:center;gap:20px;margin:25px 0; }
.relay-section-line h2 { font-size:24px; }
.relay-section-line>p { font-size:13px; }
.relay-section-line button { font-size:12px; }
.relay-light-list { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.relay-light-card { text-align:left;border:1px solid #ffffff1a;border-radius:18px;background:linear-gradient(130deg,#1b293d,#111d30);padding:26px;min-width:0;transition:border-color .2s; }
.relay-light-card:hover { border-color:#f5bd7e66; }
.relay-card-top { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px; }
.relay-new { font-size:10px;color:var(--gold-light);border-radius:30px;background:#f5bd7e16;padding:4px 8px; }
.relay-light-card h2 { font-size:28px;margin-bottom:8px; }
.relay-light-card>p { font-size:12px; }
.relay-light-card blockquote { font:22px/1.5 var(--serif);margin:22px 0; }
.relay-card-wait { margin:25px 0;min-height:50px; }
.relay-own-line { display:flex;gap:10px;padding:15px 0;border-top:1px solid var(--line);align-items:flex-start; }
.relay-own-line>span { width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0; }
.relay-own-line p { font-size:12px; }
.relay-card-bottom { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#bac4d2;margin-top:10px; }
.relay-empty { border:1px dashed #ffffff22;border-radius:20px;padding:55px 24px;max-width:none; }
.relay-empty>.icon { color:var(--gold);width:36px;height:36px;margin-bottom:15px; }
.relay-empty h2 { margin-bottom:15px; }
.relay-journey-stats { display:flex;gap:22px;border:1px solid var(--line);padding:22px;border-radius:14px;margin:25px 0;font-size:12px;color:var(--muted); }
.relay-journey-stats span { flex:1; }
.relay-journey-stats strong { color:var(--gold-light);font:26px var(--serif);display:block;margin-bottom:5px; }
.relay-timeline { list-style:none;padding:0;margin:0; }
.relay-timeline li { display:flex;gap:20px;position:relative;padding:25px 20px;border-bottom:1px solid var(--line); }
.relay-timeline li.own { background:#f5bd7e06;border-radius:12px; }
.relay-timeline li>div { flex:1;min-width:0; }
.relay-timeline-dot { flex-shrink:0;width:13px;height:13px;border-radius:50%;margin-top:3px;box-shadow:0 0 0 5px #ffffff06; }
.relay-entry-top { display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:1px;color:#c4b7a6;margin-bottom:10px; }
.relay-entry-top time { color:var(--muted);letter-spacing:0;white-space:nowrap; }
.relay-timeline p { font:22px/1.5 var(--serif);color:var(--text); }
.relay-timeline small { display:block;color:var(--muted);font-size:11px;margin-top:10px; }
.relay-account-page { max-width:620px;margin:auto; }
.relay-account-card { border:1px solid var(--line);padding:26px;border-radius:16px;margin-top:20px; }
.relay-account-card h2 { margin-bottom:14px;font-size:24px; }
.relay-account-card p { font-size:13px;line-height:1.8;margin-bottom:16px; }
.relay-email { overflow-wrap:anywhere;color:var(--gold-light); }
.relay-account-card a { font-size:12px;text-underline-offset:4px; }
.relay-notice,.relay-banner { padding:16px 19px;border:1px solid #e2a58b55;background:#382823;border-radius:12px;margin-bottom:24px;color:#ffe0cc;font-size:13px;line-height:1.6; }
.relay-notice.success { background:#203632;border-color:#91c7b74d;color:#d8f4e9; }
.relay-banner { background:#1b2c43;border-color:#93b3db55;color:#dae8fc; }
.relay-status { position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);width:max-content;max-width:calc(100% - 32px);padding:13px 20px;border:1px solid #f5bd7e44;border-radius:14px;background:#28354a;box-shadow:0 8px 30px #0005;color:var(--text);font-size:13px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s; }
.relay-status.visible { opacity:1;transform:translate(-50%,0); }
@keyframes relay-breathe { 50% { transform:translateY(-6px); } }
@media (min-width:1000px) { .relay-ritual { padding:20px 0; } }
@media (max-width:800px) {
  .relay-welcome { gap:28px;grid-template-columns:1fr 1fr; }
  .relay-header { padding:20px 24px; }
  .relay-auth-card { padding:25px; }
  .relay-welcome-story .relay-intro h1 { font-size:43px; }
  .relay-receive-copy { padding:30px 25px; }
  .relay-receive-copy h2 { font-size:30px; }
  .relay-categories button { font-size:11px;padding:13px 10px;gap:7px; }
}
@media (max-width:600px) {
  .relay-header { padding:15px 20px;gap:10px; }
  .relay-brand { font-size:14px;gap:8px; }
  .relay-brand img { width:30px;height:30px; }
  .relay-brand small { font-size:6px;letter-spacing:1px; }
  .relay-header-end { gap:8px; }
  .relay-preview { font-size:9px;padding:5px 8px; }
  .relay-account { width:40px;height:40px; }
  .relay-shell { padding:25px 20px 105px; }
  .relay-welcome-shell { padding-top:16px; }
  .relay-welcome { display:flex;flex-direction:column;gap:30px; }
  .relay-welcome-story { width:100%;text-align:center; }
  .relay-welcome-story .relay-intro { margin-bottom:0; }
  .relay-welcome-story .relay-intro h1 { font-size:43px; }
  .relay-welcome-story .relay-intro>p:last-child { font-size:14px;max-width:330px;margin:15px auto 0; }
  .relay-welcome-story .relay-art { min-height:225px; }
  .relay-welcome-story .relay-art img { width:225px;height:225px; }
  .relay-welcome-story .relay-orbit { width:260px;height:130px; }
  .relay-promise { text-align:left;gap:10px; }
  .relay-promise strong { font-size:10px; }
  .relay-auth-card { width:100%;padding:25px 22px; }
  .relay-auth-card h2 { font-size:27px; }
  .relay-intro { margin-bottom:24px; }
  .relay-intro h1 { font-size:33px;letter-spacing:-1px; }
  .relay-intro>p:last-child:not(.eyebrow) { font-size:14px; }
  .relay-categories { grid-template-columns:1fr 1fr;gap:8px; }
  .relay-categories button { padding:12px;min-height:52px;font-size:12px; }
  .relay-receive-panel { grid-template-columns:1fr; }
  .relay-scene { padding:0; }
  .relay-scene .relay-art { min-height:235px; }
  .relay-scene .relay-art img { width:235px;height:235px; }
  .relay-scene-caption { margin-bottom:14px;font-size:8px; }
  .relay-scene::after { inset:16px 35px 0; }
  .relay-receive-copy { padding:25px;text-align:center; }
  .relay-receive-copy h2 { font-size:31px; }
  .relay-start { align-items:flex-start;flex-direction:column;gap:16px;margin-top:14px; }
  .relay-start h2 { font-size:23px; }
  .relay-start .relay-secondary { width:100%; }
  .relay-footer { flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:35px; }
  .relay-steps { gap:6px;margin:4px 0 28px;font-size:10px; }
  .relay-steps li { gap:5px; }
  .relay-steps li>span { width:19px;height:19px; }
  .relay-turn-content>blockquote { font-size:24px; }
  .relay-swatches { grid-template-columns:repeat(3,1fr);gap:9px; }
  .relay-swatches button { min-height:85px;font-size:12px; }
  .relay-swatches button>span { width:44px;height:44px; }
  .relay-sky-preview { height:145px; }
  .relay-contribution { padding:27px 20px; }
  .relay-contribution blockquote { font-size:25px; }
  .relay-section-line { gap:12px;align-items:flex-start; }
  .relay-section-line h2 { font-size:23px;max-width:55%; }
  .relay-section-line .relay-secondary { padding:10px;font-size:11px; }
  .relay-light-list { grid-template-columns:1fr; }
  .relay-light-card { padding:23px; }
  .relay-journey-stats { padding:17px 14px;gap:10px;font-size:10px; }
  .relay-journey-stats strong { font-size:25px; }
  .relay-timeline li { padding:22px 10px;gap:16px; }
  .relay-timeline p { font-size:21px; }
  .relay-entry-top { font-size:8px;gap:8px; }
  .relay-turn-tools .relay-secondary { font-size:11px; }
  .relay-success .relay-art { min-height:205px; }
  .relay-success .relay-art img { width:210px;height:210px; }
}
@media (max-width:350px) { .relay-shell {padding-left:15px;padding-right:15px}.relay-header {padding-left:14px;padding-right:14px}.relay-brand small {display:none}.relay-preview {font-size:8px}.relay-steps {font-size:9px}.relay-card-top {align-items:flex-start}.relay-new {font-size:9px} }
@media (prefers-reduced-motion:reduce) { .relay-art img {animation:none}.relay-status {transition:none} }

/* Evening observatory: art carries the atmosphere; controls stay precise. */
.relay-footer-link { padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;min-height:24px; }
.relay-account-actions { display:flex;gap:12px;flex-wrap:wrap; }
.relay-report-link { display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0;color:#c0cada;text-decoration:underline;text-underline-offset:4px;font-size:11px; }
.relay-report-quote { margin:22px 0;font:22px/1.5 var(--serif); }
.relay-auth-card select { width:100%;min-height:48px;border:1px solid #ffffff35;border-radius:9px;background:#0b1424;color:var(--text);padding:10px;font-size:16px; }
.relay-account-card h2:not(:first-child) { margin-top:28px; }
.connected-body .button-primary.relay-danger { background:#efb1a4;color:#251817; }
.relay-progress { position:fixed;top:0;left:0;right:0;height:2px;z-index:50;overflow:hidden;background:#26354b; }
.relay-progress::after { content:"";position:absolute;inset:0;width:40%;background:#ffd3a0;animation:relay-progress 1.4s ease-in-out infinite; }
@keyframes relay-progress { from {transform:translateX(-100%)} to {transform:translateX(350%)} }
.connected-body { background:radial-gradient(ellipse at 75% 0,#1c2b4433,transparent 55%),#0b1323; }
.relay-header { border-bottom-color:#ffffff0c; }
.relay-brand { letter-spacing:2px; }
.relay-intro h1 { letter-spacing:-1.3px; }
.relay-intro .eyebrow { letter-spacing:2.2px; }
.relay-welcome { gap:64px;align-items:start; }
.relay-welcome-story .relay-intro { margin-top:0; }
.relay-welcome-story .relay-intro h1 { font-size:clamp(44px,5.3vw,68px);line-height:1.04;letter-spacing:-2.7px; }
.relay-welcome-story .relay-intro>p:last-child { font-size:15px;line-height:1.85;max-width:400px; }
.relay-landscape { position:relative;isolation:isolate;overflow:hidden;border-radius:18px;min-height:270px;width:100%;background:#18263b; }
.relay-horizon { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; }
.relay-landscape::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b132310 40%,#0b132380);pointer-events:none;z-index:-1; }
.relay-landscape-light { position:absolute;inset:0;display:grid;place-items:center;transform:translateY(-14px); }
.relay-landscape .relay-art.small { min-height:160px; }
.relay-landscape .relay-art.small img { width:155px;height:155px;filter:drop-shadow(0 0 30px #ffc57855); }
.relay-landscape .relay-orbit { display:none; }
.relay-landscape-label { position:absolute;bottom:23px;left:12px;right:12px;text-align:center;font-size:9px;letter-spacing:2.1px;color:#f0dfd1; }
.relay-promise { margin-top:23px;padding-top:20px; }
.relay-promise>span { color:#a89984;font-size:10px; }
.relay-promise strong { font-size:11px; }
.relay-welcome-jump { display:none; }
.relay-auth-card { margin-top:15px;padding:35px;background:linear-gradient(150deg,#1c2a3dd9,#111c2de6);border-radius:20px;box-shadow:0 24px 90px #0003; }
.relay-auth-card input { border-radius:10px;background:#0b1424;min-height:52px;transition:border-color .2s; }
.relay-auth-card input:hover { border-color:#ffffff55; }
.relay-auth-card h2 { scroll-margin-top:30px; }
.connected-body .button-primary { font-weight:600;background:linear-gradient(120deg,#ffd3a0,#f1b276);color:#172032;box-shadow:0 4px 20px #e3a16912;transition:transform .18s,filter .18s; }
.connected-body .button-primary:hover:not(:disabled) { filter:brightness(1.06);transform:translateY(-1px); }
.connected-body .button-primary:active:not(:disabled) { transform:translateY(1px); }
.relay-categories { gap:12px;margin:30px 0 22px; }
.relay-categories button { min-height:58px;background:#15223866;transition:background .2s,border-color .2s; }
.relay-categories button:hover { background:#23324a; }
.relay-categories button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cat) 15%,transparent); }
.relay-receive-panel { grid-template-columns:1.05fr 1fr;background:#152136;border-radius:20px; }
.relay-scene { padding:0;min-height:375px; }
.relay-scene::after { display:none; }
.relay-scene .relay-landscape { height:100%;min-height:375px;border-radius:0; }
.relay-scene .relay-landscape .relay-art img { width:205px;height:205px; }
.relay-scene .relay-horizon { object-position:50% 50%; }
.relay-receive-copy { padding:40px 34px; }
.relay-receive-copy h2 { font-size:36px;letter-spacing:-.8px; }
.relay-start { padding:25px 22px;background:#15213655;border:1px solid #ffffff0c;border-radius:16px; }
.relay-saved-label { display:flex;align-items:center;justify-content:center;gap:6px;color:#b7cbbf;font-size:10px;letter-spacing:.4px;margin:0 0 23px; }
.relay-saved-label .icon { width:14px;height:14px; }
.relay-steps { padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#14203680; }
.relay-sky-preview { height:230px;isolation:isolate;overflow:hidden;background:#17243d;box-shadow:inset 0 0 0 1px #ffffff12; }
.relay-sky-preview::before { content:"";position:absolute;inset:0;background:url('./assets/evening-horizon.webp') center 56%/cover;z-index:-2; }
.relay-sky-preview::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,#15203600,var(--sky));mix-blend-mode:color;z-index:-1; }
.relay-sky-preview span { font:12px var(--sans);letter-spacing:1px;padding:8px 16px;border:1px solid #ffffff35;border-radius:40px;background:#101a2bd9; }
.relay-light-filters { display:flex;gap:8px;margin:-5px 0 25px; }
.relay-light-filters button { display:flex;align-items:center;gap:9px;min-height:44px;border:1px solid #ffffff16;border-radius:30px;padding:9px 15px;font-size:12px;color:#bdc7d5; }
.relay-light-filters button[aria-pressed="true"] { color:#ffe0b8;border-color:#f5bd7e60;background:#f5bd7e0c; }
.relay-light-filters button span { font-size:10px;min-width:18px;text-align:center;border-radius:12px;background:#ffffff0c; }
.relay-light-card { position:relative;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--sky) 8%,#142035),#111c2f);padding-top:32px; }
.relay-light-card::before { content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--sky),color-mix(in srgb,var(--sky) 12%,#18273c)); }
.relay-light-card:hover { transform:translateY(-2px);box-shadow:0 14px 35px #0002; }
.relay-route { position:relative;overflow:hidden;border:1px solid #ffffff1a;border-radius:18px;padding:26px;margin:24px 0;background:linear-gradient(#0b132370,#0b1323ed),url('./assets/evening-horizon.webp') center 43%/cover; }
.relay-route-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.relay-route-heading>span:last-child { display:flex;align-items:center;gap:6px;font-size:11px;color:#dfdfec; }
.relay-route h2 { font-size:29px;margin:22px 0 5px; }
.relay-route>p { color:#c6cdd8;font-size:12px; }
.relay-route-stops { list-style:none;display:grid;grid-template-columns:repeat(8,1fr);padding:0;margin:28px 0 24px; }
.relay-route-stops li { position:relative;text-align:center;font-size:9px;color:#a8b8cb;line-height:1.5; }
.relay-route-stops li::before { content:"";height:1px;position:absolute;left:0;right:0;top:15px;background:#b7cad447; }
.relay-route-stops li:first-child::before { left:50%; }
.relay-route-stops li:last-child::before { right:50%; }
.relay-route-point { width:31px;height:31px;display:grid;place-items:center;margin:0 auto 10px;position:relative; }
.relay-route-point::before { content:"";height:6px;width:6px;border-radius:50%;background:#a3b2c4;box-shadow:0 0 0 5px #142034; }
.relay-route-stops li[aria-current] { color:#ffe1bc; }
.relay-route-stops li[aria-current] .relay-route-point { color:#ffe1bc;background:#3c342f;border:1px solid #dfb781;border-radius:50%;box-shadow:0 0 20px #f5bd7e33; }
.relay-route-stops li[aria-current] .relay-route-point::before { display:none; }
.relay-route-point .icon { width:18px;height:18px; }
.relay-route .relay-route-note { font-size:10px;color:#b1bdcb; }
.relay-journey-stats { background:#13203780; }
.relay-empty { background:radial-gradient(ellipse at 50% 0,#283c5644,transparent 70%); }
@media(min-width:1000px) {
  .relay-header { padding-right:370px;position:relative; }
  .relay-header-end { position:absolute;right:40px; }
  .relay-nav { top:22px;bottom:auto;left:50%;transform:translateX(-50%);width:300px;border:1px solid #ffffff18;border-radius:14px;padding:3px;background:#142033;box-shadow:none; }
  .relay-shell { padding-top:42px; }
  .relay-status { bottom:30px; }
}
@media(max-width:800px) {
  .relay-welcome { gap:30px; }
  .relay-auth-card { padding:26px; }
  .relay-receive-copy { padding:28px; }
  .relay-receive-copy h2 { font-size:30px; }
}
@media(max-width:600px) {
  .relay-header { padding-top:max(15px,env(safe-area-inset-top)); }
  .relay-welcome-shell { padding-top:28px; }
  .relay-welcome-story .relay-intro h1 { font-size:48px;letter-spacing:-2px; }
  .relay-welcome-story .relay-intro>p:last-child { font-size:14px;max-width:330px;line-height:1.75; }
  .relay-welcome-story .relay-landscape { margin-top:26px;min-height:235px; }
  .relay-welcome-jump { display:flex;margin-top:15px; }
  .relay-welcome { gap:24px; }
  .relay-auth-card { margin-top:0; }
  .relay-receive-panel { grid-template-columns:1fr; }
  .relay-scene,.relay-scene .relay-landscape { min-height:225px; }
  .relay-scene .relay-landscape .relay-art img { width:165px;height:165px; }
  .relay-receive-copy { padding:25px; }
  .relay-receive-copy h2 { font-size:31px; }
  .relay-start { padding:23px; }
  .relay-sky-preview { height:190px; }
  .relay-steps { padding:12px 9px;gap:5px; }
  .relay-steps li { gap:4px; }
  .relay-nav { width:calc(100% - 24px);bottom:10px;border:1px solid #ffffff26;border-radius:19px;padding:7px 10px max(7px,env(safe-area-inset-bottom)); }
  .relay-route { padding:22px 18px; }
  .relay-route-stops { grid-template-columns:repeat(4,1fr);gap:18px 0; }
  .relay-route-stops li:nth-child(4)::before { right:50%; }
  .relay-route-stops li:nth-child(5)::before { left:50%; }
  .relay-light-filters button { padding:9px 13px; }
}
@media(max-width:350px) { .relay-welcome-story .relay-intro h1 {font-size:42px}.relay-steps {padding:10px 6px}.relay-route-heading .relay-kicker {font-size:8px} }
@media(prefers-reduced-motion:reduce) { .connected-body *, .connected-body *::before, .connected-body *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important} }
/* Personal writing: readable choices, persistent drafts, and explicit sharing. */
.relay-promise small { display:block; margin-top:8px; line-height:1.55; color:var(--muted,#b5c2d5); font-size:.8rem; }
.relay-writing-modes { display:grid; gap:12px; margin:24px 0; text-align:left; }
.relay-writing-modes button { display:flex; gap:14px; align-items:center; width:100%; text-align:left; padding:18px; border:1px solid #445064; border-radius:16px; color:#f4eee6; background:#142033; }
.relay-writing-modes button[aria-pressed="true"] { border-color:#edbc88; background:#263044; box-shadow:inset 0 0 0 1px #edbc88; }
.relay-writing-modes button span { flex:1; }
.relay-writing-modes small { display:block; margin-top:5px; color:#b9c6d9; line-height:1.5; }
.relay-composer { text-align:left; margin:24px 0; }
.relay-composer label { display:block; font-weight:600; font-size:1.1rem; }
.relay-composer textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:170px; padding:18px; border:1px solid #66758b; border-radius:14px; background:#101b2c; color:#fff5e9; font:inherit; font-size:16px; line-height:1.7; }
.relay-composer textarea:focus-visible { outline:2px solid #edbc88; outline-offset:3px; }
.relay-composer textarea::placeholder { color:#a7b5c9; }
.relay-composer-meta { display:flex; justify-content:space-between; gap:12px; margin-top:8px; color:#b9c6d9; font-size:.78rem; }
.relay-composer p { font-size:.85rem; color:#b9c6d9; line-height:1.6; }
.relay-contribution blockquote, .relay-turn-content blockquote, .relay-light-card blockquote { white-space:pre-wrap; overflow-wrap:anywhere; }