/* GenX Nerd Life: cozy-modern dark mode. Colors come from site.yaml (injected as CSS variables). */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--bg:#060914;--surface:#0d1324;--surface2:#141b31;--text:#eaf0ff;--muted:#9ba7c7;--c1:#4f8bff;--c2:#2dd4bf;--c3:#34d399;--c4:#9d7bff;--vine:#34d399;--amber:#fbbf24;--r:18px;
  --rgb:conic-gradient(from var(--a),var(--c1),var(--c2),var(--c3),var(--c4),var(--c1))}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;
  background-image:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--c2) 8%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 30%,color-mix(in srgb,var(--c1) 5%,transparent),transparent 60%),radial-gradient(800px 500px at 50% 110%,color-mix(in srgb,var(--c3) 5%,transparent),transparent 60%);background-attachment:fixed}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.15;margin:.2em 0 .45em;letter-spacing:-.01em}
a{color:var(--c3)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--c3);outline-offset:3px}
.muted{color:var(--muted)}.tiny{font-size:.82rem;color:var(--muted)}
.sr{position:absolute;left:-9999px}
.wrap{max-width:1100px;margin:0 auto;padding:2.2rem 1.2rem}.narrow{max-width:760px}
.eyebrow{font-family:"Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--c3);margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c4);box-shadow:0 0 10px var(--c4);display:inline-block}
.grad{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 14s linear infinite}
@keyframes flow{to{background-position:300% 0}}
.mockbar{background:#1a1406;color:#fde68a;text-align:center;font-size:.82rem;padding:.42rem .8rem;border-bottom:1px solid color-mix(in srgb,var(--amber) 20%,transparent)}

/* ---------- RGB glow edges (LED-strip style) ---------- */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rgb);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:spin 12s linear infinite;pointer-events:none;z-index:1}
.glow::after{content:"";position:absolute;inset:8px;border-radius:inherit;background:var(--rgb);filter:blur(22px);opacity:.14;z-index:-1;animation:spin 12s linear infinite;pointer-events:none}
.glow:hover::before{opacity:.95}.glow:hover::after{opacity:.3}
@keyframes spin{to{--a:360deg}}

/* ---------- Panels: flat surface, thin 1px edge ---------- */
.panel,.card{background-color:var(--surface);background-image:linear-gradient(180deg,#ffffff08,transparent 40%);
  box-shadow:0 12px 30px #0008}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.7rem 1.2rem}
.ledstrip{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));background-size:200% 100%;animation:flow 10s linear infinite;box-shadow:0 0 12px color-mix(in srgb,var(--c2) 53%,transparent)}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.2rem;color:var(--text);text-decoration:none}
.logo b{color:var(--c1);text-shadow:0 0 14px color-mix(in srgb,var(--c1) 47%,transparent)}
.mark{width:38px;height:26px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c1) 53%,transparent))}
.menu{background:var(--surface);border:1px solid #ffffff22;color:var(--text);font-size:1.15rem;border-radius:10px;padding:.2rem .65rem;cursor:pointer}
.site-head nav{display:none;width:100%;flex-direction:column;padding-top:.6rem}
.nav-open .site-head nav{display:flex}
.site-head nav a{color:var(--text);text-decoration:none;padding:.6rem .2rem;border-bottom:1px solid #ffffff10;font-weight:500}
.nav-ico{margin-right:.55rem}
.site-head nav a.on{color:var(--c3)}
@media(min-width:860px){.menu{display:none}.site-head nav{display:flex!important;flex-direction:row;width:auto;padding:0;gap:1.4rem}.site-head nav a{border:0;padding:.2rem 0}.nav-ico{display:none}.site-head nav a.on{text-shadow:0 0 12px var(--c3)}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:3.5rem 1.2rem 3rem;border-bottom:1px solid #ffffff0d}
.hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:grid;gap:1.5rem;align-items:center}
@media(min-width:880px){.hero-inner{grid-template-columns:1.1fr 1fr}}
.hero h1{font-size:clamp(2.7rem,10vw,5.2rem);font-weight:700;margin:.3rem 0 .6rem}
.tagline{font-size:clamp(1.08rem,3.4vw,1.35rem);max-width:540px;color:#d9d4ea;margin:0 0 1.5rem}
.cta{display:flex;gap:.7rem;flex-wrap:wrap}
.btn{display:inline-block;background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#fff;text-decoration:none;font-weight:600;padding:.8rem 1.35rem;border-radius:12px;box-shadow:0 0 0 1px #ffffff22 inset,0 8px 24px color-mix(in srgb,var(--c1) 25%,transparent);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #ffffff33 inset,0 10px 30px color-mix(in srgb,var(--c2) 40%,transparent)}
.btn.ghost{background:var(--surface2);box-shadow:0 0 0 1px color-mix(in srgb,var(--c3) 33%,transparent) inset}
.btn.small{padding:.5rem .9rem;font-size:.9rem}
.social{display:flex;gap:.6rem;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem .85rem;border-radius:999px;background:var(--surface2);color:var(--text);text-decoration:none;font-weight:500;font-size:.9rem;border:1px solid #ffffff1a}
.social a:hover{border-color:var(--c3);box-shadow:0 0 12px color-mix(in srgb,var(--c3) 27%,transparent)}
.social svg{width:18px;height:18px}
.hero-social{margin-top:1.3rem}
.hero-art{position:relative;min-height:260px;display:grid;place-items:center}
.hero-dragon{width:100%;max-width:470px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c1) 67%,transparent)) drop-shadow(0 0 18px color-mix(in srgb,var(--c2) 40%,transparent));animation:float 7s ease-in-out infinite}
.halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c2) 20%,transparent),color-mix(in srgb,var(--c3) 8%,transparent) 45%,transparent 70%);filter:blur(10px)}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-10px)}}
.vine{position:absolute;width:110px;opacity:.5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--vine) 53%,transparent));pointer-events:none;z-index:1}
.vine .leaf{fill:color-mix(in srgb,var(--vine) 10%,transparent)}
.vine-l{left:-18px;top:0}.vine-r{right:-14px;top:30px;transform:scaleX(-1)}
.small-vine{width:80px;opacity:.38}
/* sparks + fireworks */
.sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;animation:twinkle 6s ease-in-out infinite}
@keyframes twinkle{20%{opacity:.9}40%{opacity:.1}60%{opacity:.7}100%{opacity:0}}
.burst{position:absolute;width:90px;height:90px;margin:-45px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(var(--c) 0 3deg,transparent 3deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 32%,#000 48%,transparent 50%);mask:radial-gradient(circle,transparent 30%,#000 32%,#000 48%,transparent 50%);
  animation:burst 7s ease-out infinite}
@keyframes burst{0%{transform:scale(.2);opacity:0}6%{opacity:.85}22%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;padding-top:2rem;padding-bottom:0}
@media(min-width:860px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.3rem .6rem;border-radius:var(--r);text-decoration:none;color:var(--text)}
.pillar .emo{font-size:2rem;filter:drop-shadow(0 0 8px #ffffff33)}.pillar b{font-family:"Space Grotesk",sans-serif;font-size:1.2rem}.pillar small{color:var(--muted)}
.section-title{font-size:clamp(1.6rem,5vw,2rem);display:flex;align-items:center;gap:.55rem}
.section-title svg{width:26px;height:26px;color:var(--c1)}

/* ---------- Cards ---------- */
.cards{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s;display:block}
a.card:hover{transform:translateY(-4px)}
.card.soon{opacity:.8}
.card-art{height:150px;display:grid;place-items:center;font-size:3.3rem;position:relative;border-bottom:1px solid #ffffff12}
.card-art span{filter:drop-shadow(0 0 14px #ffffff55)}
.card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 80%,transparent),transparent 60%)}
.card-body{padding:1rem 1.15rem 1.3rem}.card-body h3{font-size:1.32rem;margin-top:.55rem}
.tag{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .55rem;border-radius:6px;background:#ffffff12;color:#e5e1f0;margin-right:.35rem}
.tag.sample{background:color-mix(in srgb,var(--amber) 13%,transparent);color:#fcd34d}
.verdict{display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .75rem;border-radius:8px;color:var(--bg)}
.verdict.big{font-size:1.05rem}
.v-play{background:var(--c1);box-shadow:0 0 14px color-mix(in srgb,var(--c1) 47%,transparent)}.v-read{background:var(--c2);box-shadow:0 0 14px color-mix(in srgb,var(--c2) 47%,transparent)}.v-skip{background:#8b8799}
.art-dragon{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c1) 33%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-dragon2,.art-mech{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c3) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-wing{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c2) 33%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-wing2{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--amber) 20%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-space{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c3) 33%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-cozy{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--vine) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-gear{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c3) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-gear2{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c2) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-gear3{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--vine) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-cocktail{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--c1) 33%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-cocktail2{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--amber) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}
.art-home{background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--vine) 27%,transparent),transparent 60%),linear-gradient(160deg,var(--surface),var(--surface2))}

/* ---------- Scents: rain drops + tire smoke ---------- */
.scent{position:relative;display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:#d6d1e6;margin:.2rem 0 .8rem;padding:.45rem .7rem;border-radius:10px;background:#ffffff08;border:1px solid #ffffff10;overflow:hidden}
.scent b{color:var(--text)}
.rain,.smoke{position:relative;flex:0 0 22px;height:22px}
.rain i{position:absolute;top:-6px;width:2px;height:7px;border-radius:2px;background:linear-gradient(var(--c3),transparent);animation:drop 1.6s linear infinite;opacity:.8}
.rain i:nth-child(1){left:3px}.rain i:nth-child(2){left:10px;animation-delay:.5s}.rain i:nth-child(3){left:17px;animation-delay:1s}.rain i:nth-child(4){left:24px;animation-delay:.3s}.rain i:nth-child(5){left:31px;animation-delay:.8s}
@keyframes drop{to{transform:translateY(28px);opacity:0}}
.smoke i{position:absolute;bottom:0;left:6px;width:10px;height:10px;border-radius:50%;background:#c9cbd366;filter:blur(2px);animation:puff 2.4s ease-out infinite}
.smoke i:nth-child(2){left:2px;animation-delay:.8s}.smoke i:nth-child(3){left:11px;animation-delay:1.6s}
@keyframes puff{0%{transform:translateY(4px) scale(.5);opacity:0}30%{opacity:.8}100%{transform:translateY(-16px) scale(1.5);opacity:0}}
.flag{flex:0 0 18px;height:12px;border-radius:2px;background:repeating-conic-gradient(#eee 0 25%,#111 0 50%) 0 0/6px 6px;box-shadow:0 0 6px #fff3}
.scent-box{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.4rem;border-radius:var(--r);overflow:hidden}
.scent-box .rain.big{position:absolute;inset:0 auto 0 0;width:100%;height:100%;flex:none;opacity:.35}
.scent-box .rain.big i{height:12px;top:-12px;animation-duration:2.2s}
.scent-box .rain.big i:nth-child(1){left:8%}.scent-box .rain.big i:nth-child(2){left:28%}.scent-box .rain.big i:nth-child(3){left:52%}.scent-box .rain.big i:nth-child(4){left:71%}.scent-box .rain.big i:nth-child(5){left:90%}
.scent-box .rain.big i{animation-name:dropbig}
@keyframes dropbig{to{transform:translateY(140px);opacity:0}}
.scent-icon{font-size:2.2rem;position:relative}
.scent-big{margin:0;font-size:1.08rem;position:relative}
.scents{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:620px){.scents{grid-template-columns:1fr 1fr}}
.scent-card{border-radius:var(--r);padding:1.2rem 1.3rem;overflow:hidden;position:relative}
.scent-card b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.2rem;margin-top:.3rem}
.scent-card .rain.big,.scent-card .smoke.big{position:absolute;right:18px;top:16px;width:40px;height:40px}
.scent-card .smoke.big i{width:16px;height:16px}
.scent-card .flag{position:absolute;right:20px;bottom:18px;width:26px;height:16px;background-size:8px 8px}

/* ---------- Social feeds ---------- */
.feed-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.ig-grid{list-style:none;padding:0;margin:1rem 0 .6rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}
@media(min-width:860px){.ig-grid{grid-template-columns:repeat(6,1fr)}#ig-feed[data-count="9"] .ig-grid{grid-template-columns:repeat(5,1fr)}}
.ig-tile a{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);border:1px solid #ffffff14;transition:transform .2s,box-shadow .2s}
.ig-tile a:hover{transform:scale(1.03);box-shadow:0 0 18px color-mix(in srgb,var(--c1) 33%,transparent)}
.ig-tile .emo{font-size:2.2rem;filter:drop-shadow(0 0 10px #ffffff55)}
.ig-label{position:absolute;left:.45rem;bottom:.35rem;font-size:.72rem;font-weight:600;text-shadow:0 1px 4px #000}
.ig-sample{position:absolute;right:.35rem;top:.35rem;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .35rem;border-radius:5px;background:var(--amber);color:#1a1406}
.t-cocktail a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c1) 40%,transparent),var(--surface) 70%)}.t-cocktail2 a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--amber) 33%,transparent),var(--surface) 70%)}.t-cocktail3 a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c2) 33%,transparent),var(--surface) 70%)}
.t-flower a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c2) 33%,transparent),var(--surface) 70%)}.t-flower2 a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c1) 33%,transparent),var(--surface) 70%)}
.t-food a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--amber) 33%,transparent),var(--surface) 70%)}.t-food2 a{background:radial-gradient(circle at 50% 60%,#fde68a44,var(--surface) 70%)}
.t-plant a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--vine) 33%,transparent),var(--surface) 70%)}.t-fire a{background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c3) 33%,transparent),var(--surface) 70%)}
.feed-note{font-size:.86rem;color:#fcd34d;margin:.2rem 0 0}
.x-wrap{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:860px){.x-wrap{grid-template-columns:1.4fr 1fr}.x-wrap.no-timeline{grid-template-columns:1fr}}
.x-feed{border-radius:var(--r);background:var(--surface);padding:.6rem;min-height:140px;display:grid;place-items:center}
.x-feed .twitter-timeline{color:var(--muted)}
.x-feed.failed{display:none}
.x-fallback{border-radius:var(--r);background:var(--surface);padding:1.5rem}
.x-ico svg{width:34px;height:34px;color:var(--text);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c3) 53%,transparent))}

/* ---------- Pairing, rubric ---------- */
.rubric{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:720px){.rubric{grid-template-columns:repeat(3,1fr)}}
.rubric>div{border-radius:var(--r);padding:1.2rem 1.25rem}

/* ---------- Signup ---------- */
.signup{padding:2.5rem 1.2rem 3.5rem}
.signup-inner{max-width:640px;margin:0 auto;text-align:center;border-radius:22px;padding:2rem 1.4rem}
.signup h2{font-size:1.9rem}
.signup form{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0 .6rem}
@media(min-width:560px){.signup form{flex-direction:row}}
.signup input{flex:1;padding:.85rem 1rem;border-radius:12px;border:1px solid #ffffff22;background:var(--bg);color:var(--text);font-size:1rem}
.signup button{background:linear-gradient(135deg,var(--c3),var(--c4));color:var(--bg);border:0;font-weight:700;padding:.85rem 1.3rem;border-radius:12px;font-size:1rem;cursor:pointer;box-shadow:0 0 18px color-mix(in srgb,var(--c3) 33%,transparent)}
.thanks{font-size:1.1rem}

/* ---------- Section hero ---------- */
.sec-hero{position:relative;overflow:hidden;padding:2.6rem 0 1.4rem;border-bottom:1px solid #ffffff0d}
.sec-hero .wrap{position:relative;z-index:2;padding-top:0;padding-bottom:0}
.sec-hero h1{font-size:clamp(2.2rem,8vw,3.4rem)}.sec-hero p{max-width:640px;font-size:1.08rem;color:#d9d4ea}
.s-play{background:radial-gradient(700px 300px at 20% 0,color-mix(in srgb,var(--c1) 15%,transparent),transparent 70%)}
.s-read{background:radial-gradient(700px 300px at 20% 0,color-mix(in srgb,var(--c2) 18%,transparent),transparent 70%)}
.s-gear{background:radial-gradient(700px 300px at 20% 0,color-mix(in srgb,var(--c3) 15%,transparent),transparent 70%)}
.s-life{background:radial-gradient(700px 300px at 20% 0,color-mix(in srgb,var(--vine) 15%,transparent),transparent 70%)}
.s-about{background:radial-gradient(700px 300px at 20% 0,color-mix(in srgb,var(--c1) 12%,transparent),transparent 70%),radial-gradient(600px 300px at 90% 20%,color-mix(in srgb,var(--c3) 10%,transparent),transparent 70%)}

/* ---------- Review ---------- */
.rev-hero{position:relative;height:200px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid #ffffff12}
.big-emo{font-size:5rem;filter:drop-shadow(0 0 22px #ffffff55);position:relative;z-index:2}
.review h1{font-size:clamp(2.2rem,8vw,3.2rem)}.review h2{font-size:1.4rem;margin-top:1.9rem}
.sample-note{background:color-mix(in srgb,var(--amber) 8%,transparent);border:1px solid color-mix(in srgb,var(--amber) 25%,transparent);border-left:4px solid var(--amber);padding:.8rem 1rem;border-radius:10px;margin-bottom:1.2rem;font-size:.95rem;color:#fde68a}
.back{font-weight:600;text-decoration:none}
.verdict-banner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-radius:var(--r);margin:1rem 0}
.verdict-banner .eyebrow{margin:0}
.loved,.bugged{list-style:none;padding-left:0}.loved li,.bugged li{display:flex;gap:.6rem;align-items:flex-start;margin:.35rem 0}
.review li{margin:.45rem 0}
.also{border-radius:var(--r);padding:.4rem 1.3rem 1rem;margin-top:1.9rem}
.also ul{list-style:none;padding:0}.also li{padding:.45rem 0;border-bottom:1px dashed #ffffff18}
.share{margin:2rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-weight:600}

/* ---------- About ---------- */
.about p{font-size:1.08rem}
.avatars{display:flex;gap:1rem;margin-bottom:1.2rem}
.avatar{width:120px;height:120px;display:grid;place-items:center;border-radius:24px;background:var(--surface);padding:12px}
.avatar svg{width:100%;height:100%;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c1) 53%,transparent))}
.sig{font-family:"Space Grotesk",sans-serif;font-size:1.6rem!important;font-weight:700}

/* ---------- Footer ---------- */
.site-foot{position:relative;overflow:hidden;background:#08080c;border-top:1px solid #ffffff10;padding:2.2rem 1.2rem 1rem}
.foot-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}
.foot-inner p{max-width:420px}
.foot-vine{right:-10px;top:-20px;left:auto;transform:scaleX(-1);opacity:.3}
.site-foot .tiny{text-align:center;margin-top:1.5rem;position:relative;z-index:2}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sparks i{opacity:.5}.burst{display:none}
}
.scent .scent-ico{font-size:1rem}
.scent .rain,.scent .smoke{position:absolute;left:4px;top:0;opacity:.7}
.scent .flag{display:none}
/* header social icons (icons only) */
.head-social{display:none}
@media(min-width:860px){.head-social{display:flex;gap:.35rem;margin-left:1rem}.head-social a{padding:.4rem;border-radius:10px}.head-social a span{position:absolute;left:-9999px}}
.nav-open .head-social{display:flex;width:100%;padding:.6rem 0}

/* =========== v4 edits: constellation, space, title font, icons, square corners =========== */
:root{--r:0px}
/* Square corners everywhere (round dots/stars/sparks stay round) */
.panel,.card,.btn,.menu,.pillar,.tag,.verdict,.social a,.ig-tile a,.ig-sample,.scent,.scent-box,.scent-card,.x-feed,.x-fallback,.rubric>div,
.signup-inner,.signup input,.signup button,.sample-note,.verdict-banner,.also,.avatar,.flag,.head-social a,.glow,.glow::before,.glow::after,.font-opt,input,button,textarea,select{border-radius:0!important}
.glow::before{padding:1px}
.glow::after{inset:2px;filter:blur(14px);opacity:.12}
.btn{box-shadow:0 0 0 1px #ffffff2a inset,0 0 16px color-mix(in srgb,var(--btn-glow) 45%,transparent)}
.social a,.menu,.signup input{border-width:1px}

/* Title font + one-line RGB title */
.title-font{font-family:var(--title-font),"Space Grotesk",sans-serif;font-weight:var(--title-weight)}
.site-title{white-space:nowrap;line-height:1.05;letter-spacing:.01em;margin:.3rem 0 .7rem;font-size:clamp(1.55rem,7.4vw,3.55rem)}
.site-title .grad{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c2) 33%,transparent));animation:flow 9s linear infinite}
@media(min-width:880px){.hero-inner{grid-template-columns:1.35fr 1fr}.site-title{font-size:clamp(2rem,4.2vw,3.55rem)}}
.logo .title-font{font-size:.98rem;letter-spacing:.02em}
.logo .title-font b{font-weight:inherit}

/* Space: starfield + orbits */
.starfield{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.starfield i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.55;box-shadow:0 0 4px #fff8;animation:star 5s ease-in-out infinite}
@keyframes star{0%,100%{opacity:.25}50%{opacity:.9}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 75% 40%,color-mix(in srgb,var(--c2) 8%,transparent),transparent 60%),radial-gradient(ellipse at 15% 80%,color-mix(in srgb,var(--c3) 5%,transparent),transparent 55%)}
.halo{opacity:.7}
.hero-dragon{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c1) 47%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--c2) 33%,transparent))}
.dragon .c-lines polyline{stroke-width:.7;opacity:.6;stroke-dasharray:1;animation:linedraw 2.6s ease-out both}
.dragon .c-lines .faint{opacity:.32}
@keyframes linedraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.dragon .st{fill:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px var(--c3));animation:twinkle-star 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dragon .st.eye{fill:var(--c1);filter:drop-shadow(0 0 3px var(--c1)) drop-shadow(0 0 6px var(--c1))}
@keyframes twinkle-star{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.45;transform:scale(.7)}55%{opacity:1;transform:scale(1.25)}}
.orbits ellipse{fill:none;stroke:var(--c2);stroke-width:.4;opacity:.28;stroke-dasharray:2 3}
.orbits .sat{fill:var(--c3);filter:drop-shadow(0 0 3px var(--c3))}
.avatar{position:relative;overflow:hidden;background:var(--bg)}
.avatar svg{filter:none}

/* Vines grow in */
.vine{opacity:.72;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--vine) 67%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--vine) 33%,transparent));width:120px}
.small-vine{opacity:.55;width:86px}
.foot-vine{opacity:.42}
@keyframes grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes leafin{from{fill-opacity:0}to{fill-opacity:1}}

/* Section line icons: glow + occasional shimmer */
.ico{display:inline-grid;place-items:center;line-height:0;vertical-align:middle}
.ico svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--c2) 60%,transparent));animation:ico-shimmer 9s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes ico-shimmer{0%,86%,100%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--c2) 60%,transparent))}90%{filter:drop-shadow(0 0 4px var(--c1)) drop-shadow(0 0 9px var(--c1)) brightness(1.5)}94%{filter:drop-shadow(0 0 4px var(--c3)) drop-shadow(0 0 9px var(--c3)) brightness(1.5)}}
.pillar-ico{width:46px;height:46px;margin-bottom:.45rem}
.nav-ico{width:20px;height:20px;margin-right:.6rem}
.tag-ico{width:13px;height:13px;margin:-2px .35rem 0 0}
.h1-ico{width:.95em;height:.95em;margin:-.1em .15em 0 0}
.emoji-ico{line-height:1}

/* Font preview page */
.fonts{display:grid;gap:1.1rem;padding-top:1rem;padding-bottom:2.5rem}
.font-opt{padding:1.1rem 1.3rem;overflow:hidden}
.font-opt .font-sample{font-size:clamp(1.4rem,6.6vw,3.2rem);margin:.4rem 0}
.font-opt.chosen{outline:1px solid var(--c3);box-shadow:0 0 18px color-mix(in srgb,var(--c3) 27%,transparent)}
.font-opt.excluded{opacity:.85}

/* Reduced motion: everything static and fully drawn */
@media (prefers-reduced-motion: reduce){
  .dragon .c-lines polyline{stroke-dashoffset:0!important;animation:none!important}
  .orbits .sat{display:none}
  .starfield i,.dragon .st,.ico svg,.site-title .grad{animation:none!important}
}

/* =========== v5 samples: nebula dragon, growing vines, line icons, no pink =========== */
.samplebar{background:color-mix(in srgb,var(--c3) 10%,var(--bg));color:var(--text);text-align:center;font-size:.8rem;padding:.4rem .8rem;border-bottom:1px solid color-mix(in srgb,var(--c3) 30%,transparent)}
.samplebar b{color:var(--accent)}
.eyebrow{color:var(--accent)}
.logo b{color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--glow) 45%,transparent)}
.dot{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.btn{color:#0b0d14;font-weight:700;text-shadow:none}
.btn.ghost{color:var(--text);box-shadow:0 0 0 1px color-mix(in srgb,var(--c2) 45%,transparent) inset,0 0 12px color-mix(in srgb,var(--glow) 18%,transparent)}
.signup button{background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#0b0d14;box-shadow:0 0 18px color-mix(in srgb,var(--btn-glow) 45%,transparent)}
.v-play{background:var(--c1);box-shadow:0 0 14px color-mix(in srgb,var(--c1) 50%,transparent)}
.v-read{background:var(--c2);box-shadow:0 0 14px color-mix(in srgb,var(--c2) 50%,transparent)}
.v-skip{background:var(--muted)}
.card:hover,.pillar:hover{box-shadow:0 0 22px color-mix(in srgb,var(--glow) 22%,transparent)}
.site-foot{background:color-mix(in srgb,var(--bg) 80%,#000)}
.site-title .grad{background-image:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));filter:drop-shadow(0 0 12px color-mix(in srgb,var(--glow) 30%,transparent))}

/* Title: one line, sized from the font's measured width ratio (--title-r) */
.site-title,.hero h1.site-title{font-size:min(calc((100vw - 48px) / var(--title-r, 9)), 4rem)}
@media(min-width:880px){.site-title,.hero h1.site-title{font-size:min(calc((100vw - 64px) * .56 / var(--title-r, 9)), calc(640px / var(--title-r, 9)), 4rem)}}
.font-opt .font-sample{font-size:min(calc((100vw - 110px) / var(--title-r, 9)), 3.2rem)}

/* Nebula dragon */
.hero-dragon{max-width:520px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--neb2) 60%,transparent)) drop-shadow(0 0 28px color-mix(in srgb,var(--neb3) 35%,transparent));animation:float 9s ease-in-out infinite}
.halo{background:radial-gradient(circle,color-mix(in srgb,var(--neb2) 22%,transparent),color-mix(in srgb,var(--neb3) 8%,transparent) 45%,transparent 70%)}
.neb-dragon .drift{animation:neb-drift 18s ease-in-out infinite alternate}
.neb-dragon .drift2{animation:neb-drift2 12s ease-in-out infinite alternate}
.neb-dragon .ns{animation:twinkle-ns 5s ease-in-out infinite}
.neb-dragon .eye-glow{animation:eye 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes neb-drift{0%{transform:translate(0,0)}50%{transform:translate(-18px,10px)}100%{transform:translate(14px,-8px)}}
@keyframes neb-drift2{0%{transform:translate(0,0);opacity:.9}100%{transform:translate(22px,6px);opacity:.6}}
@keyframes twinkle-ns{0%,100%{opacity:.95}50%{opacity:.3}}
@keyframes eye{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
.avatar .neb-dragon{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--neb2) 60%,transparent))}
.mark{width:46px;height:36px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--neb2) 70%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--neb3) 35%,transparent))}

/* Vines: visible on both sides, drawn in by site.js */
.vine .stem,.vine .leaf{animation:none!important}
.vine .leaf{fill:color-mix(in srgb,var(--vine) 16%,transparent)}
.vine .tendril{opacity:.8}
.js .vine:not(.ready){visibility:hidden}
.vine{z-index:1;opacity:.9;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--vine) 80%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--vine) 40%,transparent))}
.hero .vine{top:0;width:clamp(64px,9.5vw,132px);height:auto}
.hero .vine-l{left:0}.hero .vine-r{right:0;left:auto;transform:scaleX(-1)}
@media(max-width:879px){.hero .vine-r{top:30%}.hero .vine{opacity:.8}}
.sec-hero .small-vine{top:0;width:clamp(48px,6vw,80px);opacity:.75}
.sec-hero .vine-l{left:0}.sec-hero .vine-r{right:0;left:auto;transform:scaleX(-1)}
.foot-vine{width:90px;opacity:.5}

/* Icons everywhere */
.ico-dragon svg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--neb2) 70%,transparent));animation:none}
.art-ico{width:64px;height:64px}.card-art .art-ico svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 35%,transparent))}
.big-emo{width:110px;height:110px;display:inline-grid}
.ig-tile .emo{width:46px;height:46px}
.scent-icon{width:42px;height:42px;flex:0 0 42px}
.scent .scent-ico{width:18px;height:18px;flex:0 0 18px;position:relative;z-index:1}
.inline-ico{width:1.05em;height:1.05em;margin:-.15em .1em 0}
.li-ico{width:16px;height:16px;flex:0 0 16px;margin-top:.25rem}
.menu{display:inline-grid;place-items:center;padding:.35rem .5rem}.menu-ico{width:22px;height:22px}
@media(min-width:860px){.menu{display:none}}
.menu-ico svg{animation:none}
.sig .inline-ico{width:1.1em;height:1.1em}

@media (prefers-reduced-motion: reduce){
  .neb-dragon .drift,.neb-dragon .drift2,.neb-dragon .ns,.neb-dragon .eye-glow,.hero-dragon{animation:none!important}
}
.card-art .art-ico.ico-dragon{width:110px;height:90px}.big-emo.ico-dragon{width:200px;height:150px}

/* =========== Starlight v2: aurora title, orange "light up" on interaction, gold starlight cursor, painted dragon =========== */
:root{--ember:#ff9a3c;--ember-2:#ffc27a;--gold:#ffd36b;
  --aurora:linear-gradient(90deg,var(--aurora1,#4f8bff),var(--aurora2,#22d3ee),var(--aurora3,#34d399),var(--aurora4,#2dd4bf),var(--aurora5,#8b7bff),var(--aurora1,#4f8bff))}
/* Cool at rest: blue / violet with white glow */
.glow::before{opacity:.42}
.card:hover,.pillar:hover{box-shadow:none}

/* ---- Aurora title (one line, slow blue > teal > green shimmer) ---- */
.site-title.aurora-title{letter-spacing:.005em;line-height:1.15;padding:.05em 0}
.aurora-title .grad{background-image:var(--aurora)!important;background-size:220% 100%!important;animation:aurora-flow 18s ease-in-out infinite alternate!important;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--aurora2,#22d3ee) 55%,transparent)) drop-shadow(0 0 18px color-mix(in srgb,var(--aurora3,#34d399) 35%,transparent))}
.aurora-title{animation:aurora-glow 9s ease-in-out infinite}
@keyframes aurora-flow{0%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes aurora-glow{0%,100%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--aurora1,#4f8bff) 35%,transparent))}
  33%{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--aurora2,#22d3ee) 40%,transparent))}
  66%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--aurora3,#34d399) 40%,transparent))}}
.eyebrow{letter-spacing:.14em}
.hero .eyebrow{text-transform:none;letter-spacing:.08em;font-size:.95rem;color:#dfe6ff;text-shadow:0 0 12px #ffffff55}

/* ---- Painted cosmic dragon (alpha picture, edges feathered so it melts into the night) ---- */
.hero-art{min-height:300px}
.dragon-wrap{position:relative;width:100%;max-width:560px;animation:float 9s ease-in-out infinite}
.hero-dragon{display:block;width:100%;height:auto;max-width:none;animation:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c3) 22%,transparent)) drop-shadow(0 0 30px color-mix(in srgb,var(--aurora2,#22d3ee) 18%,transparent))}
.hero-dragon{animation:starlight 8s ease-in-out infinite}
@keyframes starlight{0%,100%{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c3) 18%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--aurora2,#22d3ee) 14%,transparent))}50%{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c3) 34%,transparent)) drop-shadow(0 0 36px color-mix(in srgb,var(--aurora3,#34d399) 22%,transparent))}}
.halo{background:radial-gradient(circle,color-mix(in srgb,var(--aurora2,#22d3ee) 14%,transparent),color-mix(in srgb,var(--c4) 10%,transparent) 45%,transparent 70%)}
.mark{width:52px;height:40px;object-fit:contain;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--aurora2,#22d3ee) 50%,transparent))}
.ico-dragon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--aurora2,#22d3ee) 40%,transparent))}
.av-dragon{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.dragon-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:1rem}
.dragon-opt{display:flex;flex-direction:column;gap:.4rem;padding:.9rem;color:var(--text);text-decoration:none;position:relative}
.dragon-opt img{width:100%;aspect-ratio:4/3;object-fit:contain}
.dragon-opt small{color:var(--muted)}
.dragon-opt.chosen,.font-opt.chosen{outline:1px solid color-mix(in srgb,var(--c3) 60%,transparent)}
.font-num{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;padding:0 .3em;border:1px solid color-mix(in srgb,var(--c1) 60%,transparent);color:var(--text);font-weight:700;letter-spacing:0;box-shadow:0 0 10px color-mix(in srgb,var(--c1) 30%,transparent)}
.dragon-opt .font-num{position:absolute;left:.9rem;top:.9rem;z-index:2;background:var(--bg)}
.font-opt .font-sample{line-height:1.25;padding:.1em 0}
.try{margin-left:.4rem;white-space:nowrap}

/* ---- Buttons: cool at rest ---- */
.btn,.signup button{background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#0b0d14;box-shadow:0 0 0 1px #ffffff33 inset,0 0 14px color-mix(in srgb,var(--glow) 28%,transparent)}
.btn.ghost{background:var(--surface2);color:var(--text)}

/* ---- Orange "light up" glow on hover / keyboard focus / click ---- */
/* The trick: re-point the cool color slots to orange inside the hovered thing, so its glowing
   edge, icon gradient and icon glow all turn warm together. */
:is(.card,.pillar,.panel.glow,.dragon-opt,.font-opt,.x-fallback):is(:hover,:focus-visible,:focus-within,:active),
:is(.site-head nav a,.social a,.ig-tile a,.logo,.back,.try,.menu):is(:hover,:focus-visible,:active){
  --c1:var(--ember);--c2:#ffb35c;--c3:var(--ember-2);--c4:#ff8a1f;--glow:var(--ember);
  --rgb:conic-gradient(from var(--a),var(--ember),var(--ember-2),#ffe2b8,var(--ember),var(--ember))}
:is(.card,.pillar,.dragon-opt,.font-opt):is(:hover,:focus-visible,:focus-within,:active){box-shadow:0 0 0 1px color-mix(in srgb,var(--ember) 55%,transparent),0 0 26px color-mix(in srgb,var(--ember) 32%,transparent),0 12px 30px #0008}
.glow:is(:hover,:focus-visible,:focus-within,:active)::before{opacity:1}
.glow:is(:hover,:focus-visible,:focus-within,:active)::after{opacity:.2}
:is(.card,.pillar,.dragon-opt):is(:hover,:focus-visible,:active) .ico svg{filter:drop-shadow(0 0 4px var(--ember)) drop-shadow(0 0 10px color-mix(in srgb,var(--ember) 60%,transparent)) brightness(1.15);animation:none}
.pillar:is(:hover,:focus-visible,:active) b{color:#ffe2c2;text-shadow:0 0 12px var(--ember)}
.site-head nav a{transition:color .15s,text-shadow .15s}
.site-head nav a:is(:hover,:focus-visible,:active){color:#ffd3a3;text-shadow:0 0 10px var(--ember),0 0 22px color-mix(in srgb,var(--ember) 50%,transparent)}
.site-head nav a.on{color:var(--c3);text-shadow:0 0 12px #ffffff88}
.site-head nav a.on:is(:hover,:focus-visible){color:#ffd3a3;text-shadow:0 0 10px var(--ember)}
.social a{transition:border-color .15s,box-shadow .15s,color .15s}
.social a:is(:hover,:focus-visible,:active){border-color:var(--ember);color:#ffe2c2;box-shadow:0 0 14px color-mix(in srgb,var(--ember) 45%,transparent)}
.ig-tile a:is(:hover,:focus-visible,:active){box-shadow:0 0 0 1px var(--ember),0 0 20px color-mix(in srgb,var(--ember) 45%,transparent)}
.btn,.signup button{transition:transform .15s,box-shadow .15s,background .15s}
:is(.btn,.signup button):is(:hover,:focus-visible){background:linear-gradient(135deg,var(--ember),var(--ember-2));color:#1a0d02;transform:translateY(-2px);
  box-shadow:0 0 0 1px #ffffff44 inset,0 0 18px color-mix(in srgb,var(--ember) 70%,transparent),0 0 40px color-mix(in srgb,var(--ember) 35%,transparent)}
:is(.btn,.signup button):active{transform:translateY(0);box-shadow:0 0 0 1px #fff6 inset,0 0 26px var(--ember),0 0 60px color-mix(in srgb,var(--ember) 50%,transparent)}
a:not(.btn):not(.card):not(.pillar):not(.logo):not(.dragon-opt){transition:color .15s,text-shadow .15s}
main a:not(.btn):not(.card):not(.pillar):not(.dragon-opt):is(:hover,:focus-visible){color:#ffc27a;text-shadow:0 0 10px color-mix(in srgb,var(--ember) 70%,transparent)}
.logo:is(:hover,:focus-visible) b{color:#ffd3a3;text-shadow:0 0 14px var(--ember)}
.logo:is(:hover,:focus-visible) .mark{filter:drop-shadow(0 0 6px var(--ember))}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.signup input:focus{border-color:var(--ember);box-shadow:0 0 14px color-mix(in srgb,var(--ember) 35%,transparent);outline:none}

/* ---- Golden starlight cursor (mouse only; site.js turns it on) ---- */
html.gold-cursor,html.gold-cursor body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fffbe8'/%3E%3Cstop offset='.5' stop-color='%23ffd36b'/%3E%3Cstop offset='1' stop-color='%23e0a12e'/%3E%3C/radialGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23ffd36b' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd36b' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14.0' cy='14.0' r='14.0' fill='url(%23h)'/%3E%3Cpath d='M14.00 2.00 L16.26 11.74 L26.00 14.00 L16.26 16.26 L14.00 26.00 L11.74 16.26 L2.00 14.00 L11.74 11.74Z' fill='url(%23g)' stroke='%235a3a00' stroke-width='.7' stroke-linejoin='round'/%3E%3Ccircle cx='14.0' cy='14.0' r='1.4' fill='%23fff'/%3E%3C/svg%3E") 14 14,auto}
html.gold-cursor :is(a,button,label,summary,[role=button],select){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff6e0'/%3E%3Cstop offset='.5' stop-color='%23ffb347'/%3E%3Cstop offset='1' stop-color='%23ff8a1f'/%3E%3C/radialGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23ffb347' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffb347' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='16.0' cy='16.0' r='16.0' fill='url(%23h)'/%3E%3Cpath d='M16.00 2.00 L18.69 13.31 L30.00 16.00 L18.69 18.69 L16.00 30.00 L13.31 18.69 L2.00 16.00 L13.31 13.31Z' fill='url(%23g)' stroke='%235a3a00' stroke-width='.7' stroke-linejoin='round'/%3E%3Ccircle cx='16.0' cy='16.0' r='1.4' fill='%23fff'/%3E%3C/svg%3E") 16 16,pointer}
html.gold-cursor :is(input,textarea){cursor:text}
#sparkle{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999;display:none}
html.gold-cursor #sparkle{display:block}

@media (prefers-reduced-motion: reduce){
  .aurora-title,.aurora-title .grad,.dragon-wrap,.hero-dragon{animation:none!important}
  #sparkle{display:none!important}
}

.font-opt .font-sample{font-size:min(calc((100vw - 110px) / var(--title-r, 9)), 4.4rem)}

/* =========== Starlight v2b: moving aurora title, dragon playing with the title, glowing Sign me up =========== */
/* Title: the aurora colors sweep across the letters (like the earlier RGB shift) */
.aurora-title .grad{background-size:300% 100%!important;animation:flow 6s linear infinite!important}
.font-opt .aurora-title .grad{animation-duration:7s!important}

/* Title + dragon live together; sizes are in "em" of the title so she scales with it */
.hero-inner{grid-template-columns:1fr}
@media(min-width:880px){.hero-inner{grid-template-columns:1.35fr 1fr}.hero{padding-top:10rem;padding-bottom:3.5rem}}
.title-wrap{position:relative;display:inline-block;width:max-content;max-width:100%;
  font-size:min(calc((100vw - 48px) / var(--title-r, 9)), 4rem);margin:.3rem 0 .7rem}
@media(min-width:880px){.title-wrap{font-size:min(calc((100vw - 64px) * .56 / var(--title-r, 9)), calc(640px / var(--title-r, 9)), 4rem)}}
.title-wrap .site-title,.hero .title-wrap h1.site-title{font-size:1em!important;margin:0;position:relative;z-index:2}
.hd{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;
  width:8.2em;left:calc(100% - 2.05em);top:-2.8em;transform-origin:22% 55%;
  -webkit-mask-image:none!important;mask-image:none!important;
  animation:hd-in 3.2s cubic-bezier(.33,.08,.22,1) both,hd-idle 6s ease-in-out 3.2s infinite}
.hd-back{z-index:1;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c3) 22%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--aurora2,#22d3ee) 18%,transparent))}
/* her head and neck come out in front of the letters; wings and body stay behind them */
.hd-front{z-index:3;filter:none;clip-path:inset(42% 75% 34% 8%)}
html.alt-dragon .hd-front{display:none}
@keyframes hd-in{
  0%{transform:translate(85%,-75%) scale(.3) rotate(-16deg);opacity:0}
  12%{opacity:1}
  45%{transform:translate(-62%,12%) scale(.7) rotate(7deg)}
  72%{transform:translate(-12%,-22%) scale(.93) rotate(-5deg)}
  100%{transform:none;opacity:1}}
@keyframes hd-idle{0%,100%{transform:none}50%{transform:translateY(-2.5%) rotate(-1.2deg) scale(1.012)}}
/* starlight dust where she passes over the title */
.dust{position:absolute;left:0;right:0;top:-15%;bottom:-15%;z-index:4;pointer-events:none}
.dust i,.dust b{position:absolute;width:var(--sz,4px);height:var(--sz,4px);border-radius:50%;background:#fff6d8;opacity:0;
  box-shadow:0 0 6px #ffd36b,0 0 12px color-mix(in srgb,#ffffff 70%,transparent)}
.dust i{animation:dust 1.9s ease-out var(--dl) both}
.dust b{--sz:3px;animation:twinkle 4.5s ease-in-out var(--dl) infinite}
@keyframes dust{0%{opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:translateY(16px) scale(.3)}}
/* phones / narrow: she flies just above the title, tail dipping behind the letters */
@media(max-width:879px){
  .title-wrap{margin-top:5.4em}
  .hd{width:8em;left:calc(100% - 8.1em);top:-4.5em;transform-origin:50% 55%}
}

/* "Sign me up" glows warm orange at rest (gentle pulse), even brighter on hover */
.signup button{background:linear-gradient(135deg,var(--ember),var(--ember-2));color:#1a0d02;font-weight:800;letter-spacing:.02em;
  box-shadow:0 0 0 1px #ffe2b8 inset,0 0 16px color-mix(in srgb,var(--ember) 75%,transparent),0 0 38px color-mix(in srgb,var(--ember) 40%,transparent);
  animation:ember-pulse 2.8s ease-in-out infinite}
.signup button:is(:hover,:focus-visible){background:linear-gradient(135deg,#ffb35c,#ffe2b0);color:#1a0d02;transform:translateY(-2px);
  box-shadow:0 0 0 1px #fff inset,0 0 22px var(--ember),0 0 54px color-mix(in srgb,var(--ember) 65%,transparent),0 0 90px color-mix(in srgb,var(--ember) 30%,transparent);animation:none}
.signup button:active{transform:translateY(0);box-shadow:0 0 0 1px #fff inset,0 0 30px var(--ember),0 0 70px var(--ember)}
@keyframes ember-pulse{0%,100%{box-shadow:0 0 0 1px #ffe2b8 inset,0 0 14px color-mix(in srgb,var(--ember) 70%,transparent),0 0 32px color-mix(in srgb,var(--ember) 35%,transparent)}
  50%{box-shadow:0 0 0 1px #ffe2b8 inset,0 0 20px color-mix(in srgb,var(--ember) 90%,transparent),0 0 50px color-mix(in srgb,var(--ember) 50%,transparent)}}

@media (prefers-reduced-motion: reduce){
  .hd,.aurora-title .grad,.signup button{animation:none!important}
  .dust{display:none}
}

/* Only the big hero title uses the fantasy font; the logo text stays Sora like Sample C */
.logo .title-font{font-family:var(--logo-font,'Sora'),"Space Grotesk",sans-serif;font-weight:var(--logo-weight,800)}

/* ===== v2c: living wings (video loop on black, screen-blended so the black disappears) ===== */
/* hero-inner must not be its own stacking context, or "screen" would blend against nothing */
.hero-inner{z-index:auto}
.sparks{z-index:0}
.hd{z-index:1;height:auto;aspect-ratio:16/9;mix-blend-mode:screen;
  width:9.135em;left:calc(100% - 2.657em);top:-2.857em;transform-origin:24% 55%;
  /* feather the frame edges so no hard rectangle ever shows */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent)!important;
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent)!important;
  mask-composite:intersect}
.hd>img,.hd>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;background:#000;border:0}
.hd-flap{transition:opacity .9s ease}
.hd-breath{opacity:0;transition:opacity .9s ease}
.perched .hd-breath{opacity:1}
.perched .hd-flap{opacity:0}
.js .hd-wait .hd,.js .hd-wait .dust i{animation-play-state:paused}
html.alt-dragon .hd-vid{display:none}
html.alt-dragon .hd>img{object-fit:contain;background:none}
@media(max-width:879px){
  .hd{width:8.912em;left:calc(100% - 8.692em);top:-4.556em;transform-origin:50% 55%}
}
@media (prefers-reduced-motion: reduce){
  .hd-vid{display:none!important}
}

/* Pleiades / Seven Sisters: faint, far away, upper left */
.pleiades{position:absolute;z-index:0;pointer-events:none;left:13%;top:5.2rem;width:150px;height:auto;opacity:.6;overflow:visible;
  filter:drop-shadow(0 0 2px #cfe2ff) drop-shadow(0 0 7px #8fb8ff)}
.pl-star{fill:#eef5ff;transform-box:fill-box;transform-origin:center;animation:pl-tw 5s ease-in-out infinite}
@keyframes pl-tw{0%,100%{opacity:.95}50%{opacity:.5}}
@media(max-width:879px){.pleiades{left:auto;right:7%;top:1.1rem;width:84px;opacity:.5}}
@media (prefers-reduced-motion: reduce){.pl-star{animation:none}}
/* v2c tune: crisper sisters, and the old corner burst steps aside so it doesn't sit on them */
.pleiades{width:165px;top:4.6rem;filter:drop-shadow(0 0 1.5px #dbe8ff) drop-shadow(0 0 5px #7fa9ff99)}
.sparks .burst:first-of-type{left:5%!important;top:64%!important}
@media(max-width:879px){.pleiades{width:88px;top:.7rem}}
.pleiades{opacity:.7}
@media(max-width:879px){.pleiades{opacity:.55}}
.pleiades{top:3.7rem}
.pl-star{fill:#e4eeff}

/* ===== Final: golden dragon, Sample C eyebrow, stronger title + Sign me up, palettes ===== */
/* tagline back to Sample C's capitalised eyebrow (Space Grotesk, uppercase, .16em, .76rem, accent color) */
.hero .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--accent);text-shadow:none}
/* title: a touch more glow + a fine dark edge so it reads clearly over the dragon and stars */
.hero .aurora-title .grad{filter:drop-shadow(0 0 1px #000c) drop-shadow(0 0 7px color-mix(in srgb,var(--aurora2,#22d3ee) 70%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--aurora3,#34d399) 45%,transparent))}
/* Sign me up: a little bigger and warmer at rest (hover stays the bright orange) */
.signup button{padding:.95rem 1.7rem;font-size:1.06rem}
.signup-inner{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 28%,transparent),0 0 40px color-mix(in srgb,var(--ember) 12%,transparent)}
/* golden dragon in the nav: soft gold halo */
.logo .mark{filter:drop-shadow(0 0 5px rgba(255,211,107,.45))}

/* /colors sample sheet */
.pal-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;padding-bottom:3rem}
@media(min-width:900px){.pal-grid{grid-template-columns:1fr 1fr}}
.pal-card{--aurora:linear-gradient(90deg,var(--aurora1),var(--aurora2),var(--aurora3),var(--aurora4),var(--aurora5),var(--aurora1));
  padding:1rem 1rem 1.1rem;background:var(--surface);color:var(--text)}
.pal-card.chosen{box-shadow:0 0 0 1px var(--gold),0 0 26px color-mix(in srgb,var(--gold) 30%,transparent)}
.pal-label{margin-bottom:.7rem}
.pal-hero{position:relative;overflow:hidden;background:var(--bg);padding:2.6rem 1.1rem 1.2rem;border:1px solid #ffffff12;min-height:250px}
.pal-hero .starfield{z-index:0}
.pal-hero>*:not(.starfield):not(.pal-dragon){position:relative;z-index:2}
.pal-dragon{position:absolute;z-index:1;right:2%;top:4%;width:42%;max-width:none;pointer-events:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 30%,transparent))}
.pal-hero .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--accent);margin-top:4.2rem}
.pal-title{font-size:clamp(1.55rem,3.1vw,2.35rem)!important;margin:.15rem 0 1rem!important;white-space:nowrap}
.pal-title .grad{filter:drop-shadow(0 0 1px #000c) drop-shadow(0 0 7px color-mix(in srgb,var(--aurora2) 70%,transparent)) drop-shadow(0 0 20px color-mix(in srgb,var(--aurora3) 40%,transparent))}
.pal-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch}
.pal-signup{padding:0!important;display:flex;align-items:center}
.pal-tile{padding:.7rem 1rem!important;min-width:150px;flex:1;max-width:220px;background:var(--surface2)}
.pal-note{margin:.8rem 0 .2rem;font-size:.92rem}
.pal-sw{display:inline-flex;gap:3px;margin-right:.6rem;vertical-align:middle}
.pal-sw i{width:14px;height:14px;display:inline-block;border:1px solid #ffffff30}
.pal-try{margin:.3rem 0 0}
@media(max-width:520px){.pal-dragon{width:70%;right:-10%}.pal-tile{max-width:none}}
@media(max-width:879px){.pleiades{top:.7rem}}
@media(min-width:880px){.pleiades{top:3.2rem}}

/* ===== Violet Ocean update: she hovers in place (no drop-in), title shimmers on her downstroke ===== */
/* the wing loop is 4s; downstroke runs ~0.4s-1.3s, so the title glow peaks at ~30% of each beat.
   site.js locks these animations to the video's clock so they stay in step. */
.hd{animation:hd-hover 4s ease-in-out infinite!important}
@keyframes hd-hover{0%,100%{transform:translateY(0)}12%{transform:translateY(.6%)}42%{transform:translateY(-2.4%)}72%{transform:translateY(-.8%)}}
.hd-breath{display:none!important}
.hd-flap{opacity:1!important}
.dust i{display:none}
.hero .aurora-title{animation:wing-shimmer 4s ease-in-out infinite!important}
@keyframes wing-shimmer{
  0%,12%,68%,100%{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--aurora1) 32%,transparent)) drop-shadow(0 0 2px color-mix(in srgb,var(--aurora2) 0%,transparent)) brightness(1)}
  30%{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--aurora2) 70%,transparent)) drop-shadow(0 0 44px color-mix(in srgb,var(--aurora3) 42%,transparent)) brightness(1.32)}
  42%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--aurora2) 50%,transparent)) drop-shadow(0 0 30px color-mix(in srgb,var(--aurora3) 25%,transparent)) brightness(1.15)}}
/* colour sweep: one full pass every two wingbeats (8s), phase-locked to the loop */
.hero .aurora-title .grad{animation:flow 8s linear infinite!important}

/* "Sign me up": the palette's own bright accent (not orange), gentle pulse, brighter on hover */
.signup button,.signup button:is(:hover,:focus-visible,:active){background:linear-gradient(135deg,var(--sign1,var(--btn1)),var(--sign2,var(--btn2)));color:var(--sign-text,#fff)}
.signup button{font-weight:800;letter-spacing:.02em;border:0;
  box-shadow:0 0 0 1px #ffffff59 inset,0 0 16px color-mix(in srgb,var(--sign-glow) 80%,transparent),0 0 40px color-mix(in srgb,var(--sign-glow) 45%,transparent);
  animation:sign-pulse 2.8s ease-in-out infinite}
.signup button:is(:hover,:focus-visible){filter:brightness(1.2) saturate(1.15);transform:translateY(-2px);animation:none;
  box-shadow:0 0 0 1px #fff inset,0 0 24px var(--sign-glow),0 0 60px color-mix(in srgb,var(--sign-glow) 70%,transparent),0 0 100px color-mix(in srgb,var(--sign-glow) 35%,transparent)}
.signup button:active{transform:translateY(0);filter:brightness(1.3);box-shadow:0 0 0 1px #fff inset,0 0 30px var(--sign-glow),0 0 70px var(--sign-glow)}
@keyframes sign-pulse{0%,100%{box-shadow:0 0 0 1px #ffffff59 inset,0 0 14px color-mix(in srgb,var(--sign-glow) 75%,transparent),0 0 34px color-mix(in srgb,var(--sign-glow) 40%,transparent)}
  50%{box-shadow:0 0 0 1px #ffffff80 inset,0 0 22px color-mix(in srgb,var(--sign-glow) 95%,transparent),0 0 56px color-mix(in srgb,var(--sign-glow) 55%,transparent)}}
.signup-inner{box-shadow:0 0 0 1px color-mix(in srgb,var(--sign-glow) 35%,transparent),0 0 40px color-mix(in srgb,var(--sign-glow) 14%,transparent)}
.pal-new{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;font-size:.66rem;letter-spacing:.12em;background:var(--gold);color:#1a1200;font-weight:700}
@media (prefers-reduced-motion: reduce){.hd,.hero .aurora-title,.hero .aurora-title .grad,.signup button{animation:none!important}}
/* make Sign me up clearly the brightest thing at rest */
.signup button{box-shadow:0 0 0 1px #ffffff66 inset,0 0 22px color-mix(in srgb,var(--sign-glow) 90%,transparent),0 0 52px color-mix(in srgb,var(--sign-glow) 55%,transparent)}
@keyframes sign-pulse{0%,100%{box-shadow:0 0 0 1px #ffffff66 inset,0 0 18px color-mix(in srgb,var(--sign-glow) 85%,transparent),0 0 44px color-mix(in srgb,var(--sign-glow) 50%,transparent)}
  50%{box-shadow:0 0 0 1px #ffffff99 inset,0 0 30px var(--sign-glow),0 0 74px color-mix(in srgb,var(--sign-glow) 65%,transparent)}}

/* ===== White starlight shimmer on each wing downstroke (brings back the swoop-era sparkle) ===== */
/* In the old drop-in, a trail of warm-white dust sparkles popped along the title from right to left
   as she flew past (0.85s-1.6s). Now they replay softly on every downstroke, with a white glint
   sweeping through the letters. Times are within the 4s wing loop; site.js keeps them in step. */
.dust i{display:block;animation:dust-beat 4s ease-out calc(var(--dl) - .45s) infinite both!important}
@keyframes dust-beat{0%{opacity:0;transform:scale(.2)}7%{opacity:.95;transform:scale(1.25)}
  40%{opacity:0;transform:translateY(14px) scale(.3)}100%{opacity:0;transform:translateY(14px) scale(.3)}}
.title-wrap .site-title .glint{position:absolute;inset:0;padding:inherit;white-space:nowrap;pointer-events:none;color:transparent;
  background:linear-gradient(100deg,transparent 0 42%,#ffffff55 46%,#fff 50%,#ffffff55 54%,transparent 58% 100%) no-repeat;
  background-size:250% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;
  animation:glint-sweep 4s ease-in-out infinite;opacity:.9}
/* sweeps right to left (her direction), starting as the wings begin to fall */
@keyframes glint-sweep{0%,11%{background-position:120% 0;opacity:0}15%{opacity:.9}36%{background-position:-20% 0;opacity:.9}40%,100%{background-position:-20% 0;opacity:0}}
@media (prefers-reduced-motion: reduce){.title-wrap .site-title .glint,.dust{display:none!important}}

/* signup box: its hover glow uses the palette's Sign me up color, not orange (only this box) */
.signup-inner.glow:is(:hover,:focus-visible,:focus-within,:active){--c1:var(--sign1);--c2:var(--sign2);--c3:var(--sign-glow);--c4:var(--sign2);--glow:var(--sign-glow);
  --rgb:conic-gradient(from var(--a),var(--sign1),var(--sign2),var(--sign-glow),var(--sign1));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sign-glow) 60%,transparent),0 0 34px color-mix(in srgb,var(--sign-glow) 30%,transparent)}
.signup input:focus{border-color:var(--sign-glow);box-shadow:0 0 14px color-mix(in srgb,var(--sign-glow) 40%,transparent)}
.title-wrap .site-title .glint{background-image:linear-gradient(100deg,transparent 0 43%,#ffffff40 46.5%,#fffffff2 50%,#ffffff40 53.5%,transparent 57% 100%)}
@keyframes glint-sweep{0%,11%{background-position:120% 0;opacity:0}15%{opacity:.82}36%{background-position:-20% 0;opacity:.82}40%,100%{background-position:-20% 0;opacity:0}}
.title-wrap .site-title .glint{background-image:linear-gradient(100deg,transparent 0 41%,#ffffff66 45.5%,#fff 49%,#fff 51%,#ffffff66 54.5%,transparent 59% 100%)}
@keyframes glint-sweep{0%,11%{background-position:120% 0;opacity:0}15%{opacity:1}36%{background-position:-20% 0;opacity:1}40%,100%{background-position:-20% 0;opacity:0}}
.dust i{width:calc(var(--sz,4px) * 1.25);height:calc(var(--sz,4px) * 1.25);background:#fff;box-shadow:0 0 6px #fff,0 0 12px #fff6d8,0 0 18px rgba(255,211,107,.6)}
/* glint travels right to left, from her toward the start of the title, like the old sparkle trail */
@keyframes glint-sweep{0%,11%{background-position:-20% 0;opacity:0}15%{opacity:1}36%{background-position:120% 0;opacity:1}40%,100%{background-position:120% 0;opacity:0}}
/* Kelley: no white light sweeping through the letters; keep only the sparkle shimmer */
.title-wrap .site-title .glint{display:none!important}

/* ===== Title styles (site.yaml title_style; preview with ?title=N; all shown on /title) ===== */
:root{--foil:linear-gradient(180deg,#fff0bf 0%,#ffd56f 20%,#efae3c 40%,#b5731a 53%,#d4922a 63%,#ffd36c 84%,#fff0bf 100%);
  --gold-line:#f0b84a;--gold-deep:#8a5410}
.tv-layer,.tv-flourish{display:none}
.title-wrap .site-title .tv-layer{position:absolute;inset:0;padding:inherit;white-space:nowrap;pointer-events:none;color:transparent;
  background:var(--foil);-webkit-background-clip:text;background-clip:text}
.tv-flourish{width:100%;height:.36em;margin:.06em 0 0;filter:drop-shadow(0 0 6px #f0b84a66)}
/* gold glow pulse on the wingbeat for gold-heavy styles (no white flare, so gold stays rich) */
@keyframes wing-shimmer-gold{
  0%,12%,68%,100%{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--aurora1) 34%,transparent)) brightness(1)}
  30%{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--aurora2) 66%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--aurora3) 38%,transparent)) brightness(1.08)}
  42%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--aurora2) 48%,transparent)) drop-shadow(0 0 28px color-mix(in srgb,var(--aurora3) 22%,transparent)) brightness(1.04)}}
.tv2 .aurora-title,.tv3 .aurora-title,.tv4 .aurora-title,.tv5 .aurora-title,.tv6 .aurora-title,.tv7 .aurora-title,.tv8 .aurora-title{animation:wing-shimmer-gold 4s ease-in-out infinite!important}
/* 2: thin gold outline */
/* deeper antique-gold outline, no gold glow (a gold halo washed it toward yellow on iPhone) */
.tv2 .aurora-title .grad{-webkit-text-stroke:.02em #a8761f;
  filter:drop-shadow(0 0 1px #000c) drop-shadow(0 0 6px rgba(99,102,241,.55))!important}
/* 3: gold inner edge (a gold copy of the title, eroded so only its inner rim shows) */
.tv3 .site-title .tv-layer{display:block;filter:url(#tv-bevel) drop-shadow(0 0 .5px #3a2200)}
/* 4: solid gold, aurora glow behind */
.tv4 .aurora-title .grad{background-image:var(--foil)!important;background-size:100% 100%!important;animation:none!important;
  filter:drop-shadow(0 .02em 0 #4a2a00) drop-shadow(0 0 8px color-mix(in srgb,var(--aurora2) 75%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--aurora3) 55%,transparent))!important}
/* 5: gold "GenX" */
.tv5 .aurora-title .tw-1,.tv8 .aurora-title .cap{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .02em 0 #4a2a00)}
/* 6: gold wave every other wingbeat (8s): rolls in from the right, holds, fades back to the aurora */
.tv6 .site-title .tv-layer{display:block;filter:drop-shadow(0 .02em 0 #4a2a00);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 32.8%,#000 33.8% 66.2%,transparent 67.2% 100%);mask-image:linear-gradient(90deg,transparent 0 32.8%,#000 33.8% 66.2%,transparent 67.2% 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0% 0;mask-position:0% 0;
  animation:gold-wave 8s ease-in-out infinite}
/* the gold band rolls in from her side (right), holds, then rolls on out to the left; crisp edges so gold and aurora don't mix */
@keyframes gold-wave{0%,38%{-webkit-mask-position:0% 0;mask-position:0% 0}
  54%,74%{-webkit-mask-position:50% 0;mask-position:50% 0}
  90%,100%{-webkit-mask-position:100% 0;mask-position:100% 0}}
/* 7: gold drop edge + star flourish */
.tv7 .aurora-title .grad{filter:drop-shadow(0 .045em 0 #dfa23a) drop-shadow(0 .075em 0 #7a4a0c) drop-shadow(0 .1em .06em #000a) drop-shadow(0 0 14px color-mix(in srgb,var(--aurora2) 45%,transparent))!important}
.tv7 .tv-flourish{display:block}
/* 8: gold capitals (shares the rule with 5 above) */
/* 9: Kelley's pick: antique-gold outline on every letter + metallic gold flowing through the GenX aurora.
   GenX gets the SAME moving gradient as the title (same colours, size and speed, measured in title widths --tw),
   but every second pass carries a band of metallic gold (antique gold, rich gold, one small soft highlight,
   bronze) as extra colour stops. All stops are plain sRGB hex, precomputed (.tools/gold9.py) so iPhone Safari
   and Chrome draw the identical smooth blend (no oklab/oklch/color-mix for browsers to interpret differently).
   A vertical metal shade (soft highlight on top, bronze below) fades in only while GenX is gold (--g-hi/--g-lo).
   No gold glow and no brightness boost on the title, so the gold never washes out to yellow. */
@property --g-hi{syntax:'<color>';inherits:false;initial-value:rgba(255,232,160,0)}
@property --g-lo{syntax:'<color>';inherits:false;initial-value:rgba(70,40,0,0)}
@keyframes wing-shimmer-9{
  0%,12%,68%,100%{filter:drop-shadow(0 0 12px rgba(124,58,237,.34))}
  30%{filter:drop-shadow(0 0 22px rgba(99,102,241,.62)) drop-shadow(0 0 40px rgba(14,165,233,.34))}
  42%{filter:drop-shadow(0 0 18px rgba(99,102,241,.45)) drop-shadow(0 0 28px rgba(14,165,233,.2))}}
.tv2 .aurora-title,.tv9 .aurora-title{animation:wing-shimmer-9 4s ease-in-out infinite!important}
.tv9 .aurora-title .grad{-webkit-text-stroke:.02em #a8761f;
  filter:drop-shadow(0 0 1px #000c) drop-shadow(0 0 6px rgba(99,102,241,.55))!important}
.tv9 .aurora-title .tw-1{--tw:9.1em;-webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(180deg,var(--g-hi) 0%,rgba(255,232,160,0) 40%,rgba(70,40,0,0) 52%,var(--g-lo) 100%),
    linear-gradient(90deg,var(--aurora1) 0.00%,var(--aurora2) 10.00%,var(--aurora3) 20.00%,var(--aurora4) 30.00%,var(--aurora5) 40.00%,var(--aurora1) 50.00%,#724cef 54.00%,#22d3ee 57.50%,#53cbd8 58.12%,#6dc2c3 58.75%,#80b9ad 59.38%,#8fb097 60.00%,#9ca680 60.62%,#a79c68 61.25%,#b0914d 61.88%,#b8862b 62.50%,#d4a640 65.50%,#e0b552 69.00%,#f3d27a 70.80%,#e0b552 72.60%,#d4a640 76.00%,#b8862b 79.50%,#a8781f 82.00%,#b8862b 84.60%,#b09145 85.27%,#a79c59 85.95%,#9da66c 86.62%,#91af7d 87.30%,#82b98e 87.97%,#70c29f 88.65%,#57cbaf 89.33%,#2dd4bf 90.00%,var(--aurora1) 100.00%);
  background-size:100% 100%,calc(var(--tw) * 6) 100%;background-repeat:no-repeat,repeat-x;background-position:0 0,0 0;
  filter:drop-shadow(0 .015em 0 rgba(40,22,0,.7));animation:gold-flow 8s linear infinite,gold-shade 8s linear infinite}
@keyframes gold-flow{to{background-position:0 0,calc(var(--tw) * -6) 0}}
@keyframes gold-shade{0%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 2%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 4%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 6%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 8%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 10%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 12%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 14%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 16%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 18%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 20%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 22%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 24%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 26%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 28%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 30%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 32%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 34%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 36%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 38%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 40%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 42%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 44%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 46%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 48%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 50%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 52%{--g-hi:rgba(255,232,160,0.001);--g-lo:rgba(70,40,0,0.001)} 54%{--g-hi:rgba(255,232,160,0.020);--g-lo:rgba(70,40,0,0.042)} 56%{--g-hi:rgba(255,232,160,0.066);--g-lo:rgba(70,40,0,0.138)} 58%{--g-hi:rgba(255,232,160,0.131);--g-lo:rgba(70,40,0,0.274)} 60%{--g-hi:rgba(255,232,160,0.178);--g-lo:rgba(70,40,0,0.374)} 62%{--g-hi:rgba(255,232,160,0.199);--g-lo:rgba(70,40,0,0.418)} 64%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 66%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 68%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 70%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 72%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 74%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 76%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 78%{--g-hi:rgba(255,232,160,0.200);--g-lo:rgba(70,40,0,0.420)} 80%{--g-hi:rgba(255,232,160,0.194);--g-lo:rgba(70,40,0,0.408)} 82%{--g-hi:rgba(255,232,160,0.165);--g-lo:rgba(70,40,0,0.347)} 84%{--g-hi:rgba(255,232,160,0.112);--g-lo:rgba(70,40,0,0.235)} 86%{--g-hi:rgba(255,232,160,0.051);--g-lo:rgba(70,40,0,0.107)} 88%{--g-hi:rgba(255,232,160,0.013);--g-lo:rgba(70,40,0,0.028)} 90%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 92%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 94%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 96%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 98%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)} 100%{--g-hi:rgba(255,232,160,0.000);--g-lo:rgba(70,40,0,0.000)}}
@media (prefers-reduced-motion: reduce){
  .title-wrap .aurora-title,.title-wrap .aurora-title .grad,.title-wrap .site-title .tv-layer{animation:none!important}
  .tv6 .site-title .tv-layer{display:none!important}
  .tv9 .aurora-title .tw-1{background-position:0 0,calc(var(--tw) * -4.2375) 0!important;--g-hi:rgba(255,232,160,.2);--g-lo:rgba(70,40,0,.42)}}
/* /title page */
.tv-grid{display:grid;gap:1.4rem;padding:2rem 0 3rem}
.tv-card{padding:1.1rem 1.3rem 1.2rem;overflow:hidden}
.tv-stage.hero{padding:3.2rem 1.6rem 2.6rem!important;border:1px solid #ffffff12;border-radius:12px;margin:.6rem 0 .8rem;background:var(--bg)}
.tv-stage .title-wrap{margin:0!important}
/* Desktop: lift her (and give the hero the same extra top room) so her head and eye clear "LIFE" without moving closer to the nav */
@media(min-width:880px){.hero:not(.tv-stage) .hd{top:-3.457em;left:calc(100% - 2.107em)}.hero:not(.tv-stage){padding-top:12.4rem}}

/* ===== Teal preview: Kelley's exact teal #043E5C (site.yaml teal; ?teal=N on any page; all shown on /teal) =====
   Opt-in only: nothing here applies unless <html> (or a /teal mockup) has class teal1..teal5.
   Every tint is the same hue as #043E5C (200deg), as explicit sRGB hex so Safari and Chrome match.
   #043E5C deep  ·  #032E44 deeper  ·  #022436 deepest  ·  #07699C line/edge  ·  #9DDBFB pale (link text) */
:is(.teal1,.teal2,.teal3,.teal4,.teal5){--teal:#043E5C;--teal-d:#032E44;--teal-dd:#022436;--teal-line:#07699C;--teal-pale:#9DDBFB}

/* 1 + 5: heading underlines, section dividers, tags */
:is(.teal1,.teal5) .section-title{padding-bottom:.5rem;background:linear-gradient(90deg,#07699C 0,#043E5C 38%,#043E5C00 78%) left bottom/100% 3px no-repeat}
.teal1 :is(main>section,.tl-sec)+:is(main>section,.tl-sec){border-top:1px solid;border-image:linear-gradient(90deg,#043E5C00,#043E5C 18%,#07699C 50%,#043E5C 82%,#043E5C00) 1}
.teal1 .hero{border-bottom:1px solid #043E5C}
.teal1 .card-art{border-bottom:2px solid #043E5C}
:is(.teal1,.teal3) .tag:not(.sample){background:#043E5C;color:#E8F6FE;box-shadow:0 0 0 1px #07699C inset}
:is(.teal1,.teal4,.teal5) :is(.site-foot,.tl-foot){border-top:2px solid #07699C}

/* 2 (+5 for the four tiles): deep teal behind the tiles, cards and panels */
:is(.teal2,.teal5) .pillar{background-color:#043E5C;background-image:linear-gradient(180deg,#ffffff08,#043E5C00 40%)}
:is(.teal2,.teal5) .pillar:not(:hover):not(:focus-visible)::after,.teal2 :is(.card,.panel:not(.pal-card)):not(:hover):not(:focus-within)::after{opacity:.05}   /* keep the resting color true to #043E5C */
.teal2 :is(.card,.panel:not(.pillar):not(.pal-card)){background-color:#032E44;background-image:linear-gradient(180deg,#043E5C,#032E44 55%)}
.teal2 .card-art::after{background:linear-gradient(0deg,#032E44cc,transparent 60%)}
.teal2 .scent{background:#022436;border-color:#07699C66}
.teal2 .pillars~section .muted,.teal2 :is(.card,.panel) .muted,:is(.teal2,.teal5) .pillar small{color:#B5CFE0}   /* 7.9:1 on #043E5C */

/* 3 (+5 for buttons): teal secondary buttons and pale-teal links (hover/press still glows orange) */
:is(.teal3,.teal5) :is(.btn.ghost,.btn.small,.x-fallback .btn):not(:hover):not(:focus-visible):not(:active){background:#043E5C;color:#F1F4FF;
  box-shadow:0 0 0 1px #07699C inset,0 0 14px #043E5Caa}
.teal3 main a:not(.btn):not(.card):not(.pillar):not(.dragon-opt):not(:hover):not(:focus-visible){color:#9DDBFB;text-decoration-color:#07699C;text-decoration-thickness:2px;text-underline-offset:3px}
.teal3 .hero-social a:not(:hover){border-color:#07699C}

/* 4 + 5: Violet Ocean background melting into #043E5C toward the bottom, teal footer */
html:is(.teal4,.teal5) body{background-image:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--c2) 8%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 30%,color-mix(in srgb,var(--c1) 5%,transparent),transparent 60%),
  linear-gradient(180deg,#06081800 0,#06081800 22%,#0A1240 46%,#06234F 70%,#043E5C 100%);background-attachment:fixed,fixed,scroll}
.tl-stage:is(.teal4,.teal5){background:linear-gradient(180deg,#060818 0,#060818 18%,#0A1240 46%,#06234F 70%,#043E5C 100%)}
:is(.teal4,.teal5) :is(.site-foot,.tl-foot){background:#043E5C}
:is(.teal4,.teal5) :is(.site-foot,.tl-foot) :is(.muted,.tiny){color:#C3D7E6}   /* 7.4:1 on #043E5C */
:is(.teal4,.teal5) .site-head{background:color-mix(in srgb,#060818 90%,transparent)}

/* /teal page */
.tl-chip{display:inline-block;width:.9em;height:.9em;vertical-align:-.05em;background:#043E5C;box-shadow:0 0 0 2px #07699C,0 0 18px #043E5C}
.tl-stage{background:#060818;border:1px solid #ffffff12;padding:1rem 1rem 0;margin:.2rem 0 .4rem;overflow:hidden}
.tl-stage .tl-sec{padding:.9rem 0}
.tl-stage .pillars{padding:0;gap:.55rem;grid-template-columns:repeat(4,1fr)}
.tl-stage .pillar{padding:.7rem .3rem}.tl-stage .pillar-ico{width:30px;height:30px}.tl-stage .pillar b{font-size:.95rem}.tl-stage .pillar small{font-size:.68rem;line-height:1.3}
.tl-stage .section-title{font-size:1.25rem;margin:0 0 .7rem}
.tl-row{display:grid;grid-template-columns:1.2fr 1fr;gap:.7rem}.tl-row .card-body{padding:.8rem .9rem}.tl-row .card-body h3{font-size:1.05rem}.tl-row .muted{font-size:.8rem;margin:.2rem 0 .5rem}
.tl-panel{padding:.9rem;font-size:.85rem}.tl-panel .eyebrow{font-size:.65rem}
.tl-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0}.tl-btns .btn{padding:.5rem .9rem;font-size:.85rem}
.tl-sign{padding:0}.tl-sign .signup-inner{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 1rem;max-width:none;text-align:left}
.tl-sign button{padding:.6rem 1.1rem!important;font-size:.9rem!important;white-space:nowrap}
.tl-foot{display:flex;justify-content:space-between;align-items:center;margin:0 -1rem;padding:.8rem 1rem!important;font-family:var(--logo-font),sans-serif;font-weight:800}
.tl-foot .tiny{font-family:Inter,sans-serif;font-weight:400;margin:0}
@media(max-width:520px){.tl-stage .pillars{grid-template-columns:repeat(2,1fr)}.tl-row{grid-template-columns:1fr}}