/* The two faces this site is set in, served from this site.
They came from Google Fonts over an @import until now, which made Google the one third
party every reader met without asking for anything -- on every page, signed in or not,
before they had agreed to a thing. Nothing else here reaches off-site at all, so it was
the whole of the exposure and it is now gone.
Both are variable fonts: one file covers every weight, which is why there are four files
rather than sixteen. Google's own stylesheet lists a face per weight pointing at the same
URL, and the four copies it implies are byte-identical -- checked, not assumed.
The unicode ranges are Google's, kept so a browser still downloads latin-ext only when a
page actually contains one of those characters. Readers type their own words into this
site, and a name with an accent in it should not fall back to Arial.
Both faces are under the SIL Open Font License 1.1; see dist/fonts/NOTICE.md. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/syne-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/syne-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{--ink:#152424;--paper:#f6f4ed;--white:#fffefa;--lime:#d8f06c;--blue:#314deb;--coral:#fa6d50;--line:#c9cfc5;--muted:#53615a;--sans:'DM Sans',Arial,sans-serif;--serif:'DM Serif Display',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.wrap{width:min(1240px,calc(100% - 48px));margin:auto}.skip{position:absolute;left:-9999px;top:8px;background:var(--lime);padding:10px;z-index:100}.skip:focus{left:8px}.micro{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}.eyebrow:before{content:'';display:block;width:22px;height:2px;background:currentColor}.serif{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.045em}h1,h2,h3,p{margin-top:0}h1{font-family:var(--serif);font-size:clamp(3.9rem,7.2vw,7.7rem);font-weight:600;letter-spacing:-.018em;line-height:1.04;margin-bottom:28px}h2{font-family:var(--serif);font-size:clamp(2.7rem,5vw,5.3rem);font-weight:600;letter-spacing:-.018em;line-height:1.08;margin-bottom:20px}h3{font-family:var(--serif);font-size:1.7rem;line-height:1.12;letter-spacing:-.012em;margin-bottom:12px}p{color:var(--muted)}.lead{font-size:clamp(1.12rem,1.8vw,1.35rem);line-height:1.55;max-width:54ch}.site-header{position:sticky;top:0;z-index:30;background:rgba(246,244,237,.95);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{height:82px;display:flex;align-items:center;gap:34px}.brand{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:-.075em;text-decoration:none;white-space:nowrap}.brand span{color:var(--blue)}.brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-left:2px;vertical-align:top;margin-top:9px}.nav{display:flex;align-items:center;gap:24px;margin-left:auto}.nav-group{position:relative}.nav-group summary{list-style:none;cursor:pointer;font-size:.89rem;font-weight:700;white-space:nowrap}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:after{content:"⌄";margin-left:6px;color:var(--blue)}.nav-menu{position:absolute;top:calc(100% + 18px);left:-16px;display:grid;gap:4px;min-width:190px;padding:12px;background:var(--white);border:1px solid var(--line);box-shadow:8px 8px 0 var(--ink)}.nav-menu a{padding:8px 4px}.nav-group[open] summary,.nav a:hover,.nav a[aria-current=page]{color:var(--blue)}.nav a{text-decoration:none;font-size:.89rem;font-weight:700;white-space:nowrap}.nav a:hover,.nav a[aria-current=page]{color:var(--blue)}.header-cta{margin-left:8px}.menu-toggle{display:none;border:0;background:transparent;padding:8px;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:12px 23px;border:1.5px solid var(--ink);border-radius:0;background:var(--lime);color:var(--ink);font-weight:700;text-decoration:none;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}.btn-dark{background:var(--ink);color:white}.btn-light{background:var(--white)}.btn-ghost{background:transparent}.arrow{font-size:1.2em;line-height:1}.section{padding:110px 0}.section-tight{padding:70px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:36px}.section-head p{max-width:47ch}.section-head h2{max-width:14ch;margin-bottom:0}.rule{border-top:1px solid var(--line)}.hero{padding:74px 0 88px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:6vw}.hero h1 em{color:var(--blue);font-style:normal}.hero-copy .lead{margin-bottom:30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-note{display:flex;align-items:center;gap:12px;margin-top:45px;color:var(--muted);font-size:.9rem}.hero-note b{color:var(--ink)}.hero-art{position:relative}.hero-photo{aspect-ratio:4/4.5;object-fit:cover;background:#d4dcd0;width:100%;border-radius:48% 48% 4px 4px}.hero-art .sticker{position:absolute;right:-18px;bottom:20px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);width:144px;height:144px;border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:1.1rem;font-weight:700;line-height:1.05;transform:rotate(14deg);box-shadow:7px 7px 0 var(--ink)}.hero-art .photo-label{position:absolute;left:-25px;top:50px;background:var(--white);padding:11px 14px;border:1px solid var(--ink);font-size:.76rem;font-weight:700;transform:rotate(-6deg)}.hero-art .photo-placeholder{aspect-ratio:4/4.5;background:radial-gradient(circle at 58% 38%,#f0c8a1 0 12%,transparent 12.5%),linear-gradient(145deg,#9cb4b0,#375d66 54%,#1f4045);border-radius:48% 48% 4px 4px}.ticker{background:var(--ink);color:var(--lime);overflow:hidden;white-space:nowrap;padding:15px 0;font-size:.83rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.ticker-inner{display:inline-block;animation:marquee 26s linear infinite}.ticker span{margin:0 24px}.ticker b{color:var(--coral)}@keyframes marquee{to{transform:translateX(-50%)}}.course-player{margin-top:28px;padding:24px;background:var(--paper);border:1px solid var(--line)}.course-progress{display:flex;align-items:center;gap:14px;font-size:.82rem;font-weight:700}.course-progress-track{height:7px;flex:1;background:var(--line);overflow:hidden}.course-progress-track i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s}.course-player h3{font-size:2rem;margin-top:28px}.course-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.course-actions .btn{min-height:44px;padding:10px 16px}.course-complete{display:inline-block;margin-top:12px;padding:8px 12px;background:var(--lime);font-weight:700}.onboarding-options{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.onboarding-option{display:flex;flex-direction:column;gap:12px;min-height:245px;padding:24px;border:1px solid var(--line);background:var(--white);text-decoration:none;transition:transform .2s,background .2s}.onboarding-option strong{font-family:var(--serif);font-size:1.55rem;line-height:1.05;color:var(--ink)}.onboarding-option span:not(.micro):not(.text-link){color:var(--muted);font-size:.94rem;line-height:1.45}.onboarding-option .text-link{margin-top:auto}.onboarding-option:hover{transform:translateY(-5px);background:var(--lime)}.intro-band{background:var(--lime);padding:34px 0}.intro-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:25px}.intro-band p{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.15;color:var(--ink);margin:0;max-width:35ch}.pillars{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--white)}.pillar{padding:34px;min-height:270px;border-right:1px solid var(--line)}.pillar:last-child{border-right:0}.pillar-num{color:var(--blue);font-size:.82rem;font-weight:700;margin-bottom:40px}.pillar h3{font-size:2.4rem}.pillar p{margin-bottom:0}.text-link{font-weight:700;text-underline-offset:5px;text-decoration-thickness:1.5px}.text-link:hover{color:var(--blue)}
@media(max-width:1000px){.header-inner{height:70px}.menu-toggle{display:block;margin-left:auto}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:20px 24px 30px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:8px}.nav.open{display:flex}.nav a{padding:9px 0}.header-cta{display:none}.hero-grid{gap:35px}}@media(max-width:700px){.onboarding-options{grid-template-columns:1fr 1fr}.onboarding-option{min-height:210px}.wrap{width:min(100% - 32px,1240px)}.hero{padding:55px 0}.hero-grid{display:block}.hero h1{font-size:clamp(3.4rem,14vw,5.2rem)}.hero-art{margin:45px 15px 0}.hero-photo,.hero-art .photo-placeholder{aspect-ratio:1.25}.hero-art .sticker{width:105px;height:105px;font-size:.86rem}.hero-art .photo-label{left:-12px}.section{padding:75px 0}.section-head{display:block}.pillars{grid-template-columns:1fr}.pillar{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.pillar:last-child{border-bottom:0}.pillar-num{margin-bottom:20px}.intro-band .wrap{display:block}.intro-band .btn{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.footer{background:var(--ink);color:var(--white);padding:75px 0 22px}.footer p{color:#b9c5bc}.footer .brand span{color:var(--lime)}.footer-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:38px;padding-bottom:70px}.footer-top>div:not(:first-child){display:flex;flex-direction:column;gap:10px}.footer-top b{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--lime);margin-bottom:7px}.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #52605a;padding-top:18px;display:flex;justify-content:space-between;color:#b9c5bc;font-size:.83rem}.page-hero{padding:85px 0 75px;background:var(--lime)}.page-hero.blue{background:var(--blue);color:#fff}.page-hero.blue p{color:#e6eaff}.page-hero.coral{background:var(--coral)}.page-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:end}.page-hero h1{font-size:clamp(3.7rem,6.6vw,7rem);margin:16px 0 0}.page-hero p{font-size:1.25rem;color:var(--ink);max-width:41ch;margin-bottom:0}.page-index{font-family:var(--serif);font-size:clamp(6rem,16vw,15rem);line-height:.7;letter-spacing:-.08em;opacity:.12;text-align:right}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--white);border:1px solid var(--line);padding:28px;min-height:220px;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink)}.card p:last-child{margin-bottom:0}.card-icon{font-size:2rem;line-height:1;margin-bottom:32px;display:block}.card .micro{color:var(--blue)}.card .text-link{display:inline-block;margin-top:12px}.dark-section{background:var(--ink);color:var(--white)}.dark-section p{color:#c6d0c8}.dark-section .eyebrow{color:var(--lime)}.dark-section .card{color:var(--ink)}.dark-section .card p{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.quote{font-family:var(--serif);font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:1.23;letter-spacing:-.035em;color:var(--ink)}.quote-card{background:var(--white);padding:30px;border-left:5px solid var(--blue)}.quote-card .micro{color:var(--blue)}.quote-card p{margin-bottom:0}.badge{display:inline-block;padding:4px 10px;border:1px solid currentColor;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.tag{display:inline-block;border:1px solid var(--line);padding:5px 9px;font-size:.75rem;font-weight:700}.feature-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0;border-top:1px solid var(--line);text-decoration:none}.feature-link:last-child{border-bottom:1px solid var(--line)}.feature-link strong{font-family:var(--serif);font-size:1.65rem;letter-spacing:-.03em}.feature-link small{color:var(--muted)}.feature-link:hover{color:var(--blue)}.cta-panel{background:var(--lime);padding:clamp(35px,6vw,80px);display:flex;align-items:end;justify-content:space-between;gap:30px}.cta-panel h2{max-width:13ch;margin:15px 0 0}.number-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.number-strip div{padding:24px;border-right:1px solid var(--line)}.number-strip div:last-child{border-right:0}.number-strip b{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--blue)}.number-strip span{display:block;color:var(--muted);font-size:.85rem;margin-top:8px}.steps{counter-reset:step}.step{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--line)}.step:before{counter-increment:step;content:'0' counter(step);font-family:var(--serif);font-size:2.8rem;color:var(--blue);line-height:1}.step p{max-width:62ch}.timeline{border-left:2px solid var(--blue);padding-left:25px}.timeline-item{position:relative;padding:0 0 28px}.timeline-item:before{content:'';position:absolute;width:11px;height:11px;background:var(--blue);border:3px solid var(--paper);border-radius:50%;left:-32px;top:4px}.timeline-item b{color:var(--blue)}.glossary button{width:100%;height:100%;text-align:left;background:var(--white);border:1px solid var(--line);padding:25px;min-height:175px;color:var(--ink)}.glossary button:hover,.glossary button[aria-pressed=true]{background:var(--lime)}.glossary b{display:block;font-family:var(--serif);font-size:1.5rem;margin-bottom:12px}.glossary span{display:block;color:var(--muted)}.quiz-box{background:var(--white);border:1px solid var(--ink);padding:clamp(25px,5vw,55px);max-width:800px;margin:auto}.quiz-option{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);padding:14px 17px;margin:10px 0}.quiz-option:hover,.quiz-option.selected{border-color:var(--blue);background:#e9edff}.quiz-feedback{padding:15px;background:var(--lime);margin:18px 0}.dossier{border-top:1px solid var(--line)}.dossier:last-child{border-bottom:1px solid var(--line)}.dossier summary{list-style:none;display:grid;grid-template-columns:80px 1fr 25px;align-items:center;gap:20px;padding:25px 0;cursor:pointer}.dossier summary::-webkit-details-marker{display:none}.dossier summary b{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.15}.dossier summary .micro{color:var(--blue)}.dossier[open] summary .plus{transform:rotate(45deg)}.dossier-body{padding:0 40px 30px 100px;max-width:850px}.dossier-body p{font-size:1.06rem}.source{font-size:.82rem;color:var(--muted)}.source a{color:var(--blue)}.filters{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:10px;margin:30px 0}.filters input,.filters select,.field{background:var(--white);border:1px solid var(--line);padding:13px 14px;width:100%;color:var(--ink);min-height:50px}.filters label{font-size:.8rem;font-weight:700}.tool-card{display:flex;flex-direction:column}.tool-card .tag-row{margin-top:auto}.tool-card h3{margin-top:15px}.tool-card a{margin-top:10px}.tool-mark{width:48px;height:48px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.4rem;background:var(--lime);border:1px solid var(--ink)}.course-card{display:flex;flex-direction:column}.course-card .price{font-family:var(--serif);font-size:2.7rem;color:var(--ink);line-height:1}.course-card .btn{margin-top:auto}.course-card ul{padding-left:18px;color:var(--muted)}.form{display:grid;gap:14px}.form label{font-size:.88rem;font-weight:700}.form input,.form textarea{margin-top:5px}.form textarea{min-height:135px}.notice{padding:18px;background:#eaf0f1;border-left:4px solid var(--blue);font-size:.9rem;color:var(--ink)}.article{max-width:760px;margin:auto}.article h2{font-size:2.4rem;margin-top:45px}.article p,.article li{font-size:1.08rem}.article ol,.article ul{padding-left:25px}.prose{max-width:800px}.prose h2{font-size:2.5rem;margin-top:45px}.prose p,.prose li{font-size:1.04rem}.prose a{color:var(--blue)}.hidden{display:none!important}.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(2,1fr)}.footer-top{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.page-hero{padding:65px 0}.page-hero .wrap{display:block}.page-index{display:none}.grid-2,.grid-3,.grid-4,.split{grid-template-columns:1fr}.cta-panel{display:block}.cta-panel .btn{margin-top:25px}.number-strip{grid-template-columns:repeat(2,1fr)}.number-strip div:nth-child(2){border-right:0}.number-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}.filters{grid-template-columns:1fr}.dossier summary{grid-template-columns:50px 1fr 20px;gap:8px}.dossier-body{padding-left:58px}.footer-top{grid-template-columns:1fr 1fr;gap:30px}.footer-top>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.hero-actions .btn{width:100%}}
.card{background:transparent;border:0;border-top:1px solid var(--line);padding:28px 0;min-height:0;transition:color .25s,transform .25s}.card:hover{transform:none;box-shadow:none;color:var(--blue)}.card:hover p{color:var(--muted)}.card:hover .text-link{text-decoration-thickness:2px}.grid-3>.card:nth-child(2){transform:translateY(18px)}.grid-3>.card:nth-child(2):hover{transform:translateY(18px)}.dark-section .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);padding:28px;color:var(--white)}.dark-section .card:hover{background:rgba(255,255,255,.1);color:var(--lime)}.quote-card{transition:transform .25s,background .25s}.quote-card:hover{transform:translateY(-4px);background:#fbfaf3}.btn:hover{transform:translateY(-2px);box-shadow:none}.pillar{transition:background .25s}.pillar:hover{background:#f1f4d5}.feature-link:hover{color:var(--blue)}
.filters{grid-template-columns:1.6fr repeat(4,1fr)}.hero-copy{animation:hero-rise .7s both}.hero-art{animation:hero-rise .9s .12s both}@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){.filters{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.filters{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.hero-copy,.hero-art{animation:none}}
@media(max-width:1180px){.menu-toggle{display:block;margin-left:auto}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:20px 24px 30px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:8px}.nav.open{display:flex}.nav a{padding:9px 0}.header-cta{display:none}}.dark-section .number-strip{background:#263b38;border-color:#56675d}.dark-section .number-strip div{border-color:#56675d}.dark-section .number-strip b{color:var(--lime)}.dark-section .number-strip span{color:#c6d0c8}
.page-hero h1{letter-spacing:0;line-height:1.06}
.copy-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.copy-feedback{font-size:.82rem;color:var(--muted);min-height:1.3em}.article-meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}.article-card-meta{font-size:.76rem;color:var(--muted);margin:8px 0 16px}.filter-clear{align-self:end;min-height:44px;padding:10px 14px;background:transparent;font-size:.85rem}.filter-clear:hover{background:var(--lime)}.quiz-next-step{margin:20px 0;padding:16px;background:var(--lime);color:var(--ink)}.safety-note{margin-top:26px;color:var(--ink);font-size:.92rem}.safety-note strong{color:var(--ink)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.nav-group summary{border-radius:2px}.nav-group summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.tool-guidance{display:grid;gap:4px;margin:14px 0;font-size:.78rem;color:var(--muted)}.tool-guidance span:first-child{color:var(--ink);font-weight:700}.related-reading{margin-top:32px;padding:24px;background:var(--paper);border-top:1px solid var(--line)}.related-reading h3{margin:10px 0 16px}.related-links{display:flex;gap:14px;flex-wrap:wrap}.related-links a{font-weight:700;text-underline-offset:4px}
.contact-fallback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-top:2px}.copy-contact-email{border:0;padding:0;background:transparent;color:var(--blue);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.copy-contact-email:hover{color:var(--ink)}
/* COSMOS REDESIGN — a deliberately cinematic, friendly AI universe */
:root{--ink:#f7f7ff;--paper:#07091b;--white:#10152d;--lime:#d9ff6f;--blue:#6f7cff;--coral:#ff8068;--aqua:#5ff1da;--violet:#b88cff;--line:rgba(190,202,255,.18);--muted:#acb5d3;--sans:'Space Grotesk',Arial,sans-serif;--serif:'Syne',Arial,sans-serif}
html{background:#050715}body{background:radial-gradient(circle at 70% 12%,rgba(95,77,255,.16),transparent 30%),#07091b;color:var(--ink);overflow-x:clip}
/* clip rather than hidden, and the difference is the sticky header. Setting overflow-x:hidden
on an element makes the other axis compute to auto, so body became a scroll container 6000px
tall and the header pinned to the top of that instead of to the viewport. overflow-x:clip
stops the sideways scroll without creating a scroller, so position:sticky works again. */body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,#7edbff 0 1px,transparent 1.5px);background-size:117px 113px,173px 151px;z-index:-1}p{color:var(--muted)}h1,h2,h3,.brand{font-family:var(--serif)}h1,h2{letter-spacing:-.045em}h3{letter-spacing:-.025em}.wrap{width:min(1320px,calc(100% - 64px))}.section{padding:clamp(90px,10vw,150px) 0}.eyebrow,.micro{color:var(--aqua)}.eyebrow:before{background:linear-gradient(90deg,var(--aqua),var(--violet));height:1px}.skip{background:var(--lime);color:#071019;border-radius:0 0 12px 0}
.site-header{background:rgba(7,9,27,.78);border-color:var(--line);backdrop-filter:blur(22px) saturate(150%)}.header-inner{height:86px}.brand{font-size:1.65rem;letter-spacing:-.06em}.brand span{color:var(--aqua)}.brand i{background:var(--coral);box-shadow:0 0 16px var(--coral)}.brand-orbit{color:var(--lime);font-size:.8em;margin-right:8px;display:inline-block;animation:brandSpin 9s linear infinite}.nav{gap:20px}.nav>a,.nav-group summary{font-size:.82rem;color:#dfe4fa}.nav a:hover,.nav a[aria-current=page],.nav-group[open] summary{color:var(--lime)}.nav-group summary:after{color:var(--aqua)}.nav-menu{background:#11162f;border:1px solid rgba(150,169,255,.3);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:14px}.menu-toggle{color:var(--ink);border-color:var(--line);border-radius:99px;background:rgba(255,255,255,.04)}
.btn{border:1px solid rgba(201,214,255,.28);border-radius:99px;background:rgba(255,255,255,.07);color:#fff;padding:14px 22px;box-shadow:none;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}.btn:hover{transform:translateY(-3px);border-color:var(--aqua);background:rgba(95,241,218,.1);box-shadow:0 12px 36px rgba(0,0,0,.22)}.btn-primary,.btn-dark{background:var(--lime);border-color:var(--lime);color:#071019}.btn-primary:hover,.btn-dark:hover{background:#efffb2;border-color:#efffb2;color:#071019;box-shadow:0 0 36px rgba(217,255,111,.22)}.btn-glass,.btn-light{background:rgba(255,255,255,.06);color:#fff}.text-link{color:var(--aqua)}.text-link:hover{color:var(--lime)}
.cosmic-hero{position:relative;min-height:760px;padding:clamp(90px,9vw,150px) 0 100px;overflow:hidden;border-bottom:1px solid var(--line)}.cosmic-hero:before{content:'';position:absolute;width:640px;height:640px;border:1px solid rgba(111,124,255,.2);border-radius:50%;right:-150px;top:-260px;box-shadow:0 0 0 110px rgba(111,124,255,.035),0 0 0 220px rgba(111,124,255,.02)}.cosmic-grid{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;gap:40px;align-items:center}.cosmic-hero h1{font-size:clamp(4.6rem,7.8vw,8.5rem);line-height:.9;margin:24px 0 30px;max-width:10ch}.cosmic-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--aqua),#90a2ff 50%,var(--violet));-webkit-background-clip:text;background-clip:text}.cosmic-hero .lead{font-size:clamp(1.1rem,1.5vw,1.35rem);max-width:48ch;color:#c4cbea}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-note{border:1px solid var(--line);border-radius:14px;background:rgba(10,14,42,.65);padding:14px 17px;color:#bfc7e3;max-width:570px;margin-top:30px}.pulse{width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 7px rgba(217,255,111,.1),0 0 18px var(--lime);flex:0 0 auto}.cosmic-art{position:relative;margin-right:-9vw}.cosmic-art img{width:100%;min-height:590px;object-fit:cover;object-position:center;border-radius:44% 10% 42% 12%;mask-image:linear-gradient(to bottom,#000 85%,transparent);filter:saturate(1.05) contrast(1.03);box-shadow:0 30px 100px rgba(45,45,170,.22)}.cosmic-caption{position:absolute;right:9%;bottom:5%;padding:11px 14px;background:#0c102b;border:1px solid var(--line);border-radius:99px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}.orbit-label{position:absolute;padding:8px 12px;border:1px solid rgba(95,241,218,.35);border-radius:99px;background:rgba(5,8,28,.75);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--aqua);backdrop-filter:blur(12px)}.orbit-one{left:6%;top:17%;animation:float 4.5s ease-in-out infinite}.orbit-two{right:3%;top:28%;color:var(--lime);animation:float 5s 1s ease-in-out infinite}
.signal-ribbon{overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--blue),#5a38aa);color:#fff;padding:17px 0}.signal-track{width:max-content;font-size:.73rem;font-weight:700;letter-spacing:.16em;animation:signalMove 28s linear infinite}.signal-track b{color:var(--lime);padding:0 24px}
.section-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);margin-bottom:22px}.asym-head{display:grid;grid-template-columns:1.45fr .55fr;gap:6vw;align-items:end}.asym-head h2{font-size:clamp(3.4rem,6vw,6.7rem);max-width:12ch}.crew-grid{display:grid;grid-template-columns:1.05fr .95fr 1.05fr;gap:18px;margin-top:65px}.crew-card{position:relative;display:grid;grid-template-columns:90px 1fr;gap:22px;padding:28px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));overflow:hidden;min-height:300px}.crew-card:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;right:-90px;bottom:-90px;background:var(--glow);filter:blur(45px);opacity:.45}.crew-card:nth-child(2){transform:translateY(34px)}.crew-lime{--glow:var(--lime)}.crew-coral{--glow:var(--coral)}.crew-blue{--glow:var(--blue)}.bot-face{width:80px;height:68px;border-radius:28px 28px 34px 34px;background:#080b20;border:2px solid rgba(255,255,255,.32);display:grid;place-items:center;box-shadow:inset 0 0 20px rgba(95,241,218,.18),0 0 30px rgba(95,241,218,.08)}.bot-face span{font-family:monospace;color:var(--aqua);font-size:1.3rem}.crew-card h3{font-size:1.65rem;margin:12px 0}.crew-card a{color:var(--lime);font-weight:700}.crew-card p{font-size:.95rem}
.mission-deck{background:linear-gradient(180deg,#090d24,#0e1330)}.mission-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:14px}.mission-card{position:relative;min-height:300px;padding:30px;border:1px solid var(--line);border-radius:26px;text-decoration:none;background:rgba(255,255,255,.035);overflow:hidden;transition:transform .3s,background .3s}.mission-card:nth-child(2),.mission-card:nth-child(5){transform:translateY(24px)}.mission-card:hover{transform:translateY(-6px);background:rgba(111,124,255,.12)}.mission-card:nth-child(2):hover,.mission-card:nth-child(5):hover{transform:translateY(18px)}.mission-no{position:absolute;right:22px;top:18px;font-family:var(--serif);font-size:4.6rem;color:rgba(255,255,255,.05)}.mission-icon{font-size:2.4rem;color:var(--lime)}.mission-card h3{margin-top:55px;font-size:2rem}.mission-card .text-link{display:block;margin-top:25px}
.depth-section{position:relative;background:#e9e7ff;color:#10142b}.depth-section p{color:#4f5875}.depth-section .eyebrow{color:#4a45ce}.depth-section .eyebrow:before{background:#4a45ce}.depth-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px}.depth-intro h2{grid-column:1;grid-row:1/span 2;max-width:10ch;font-size:clamp(3.8rem,6vw,7rem)}.depth-intro p{grid-column:2;grid-row:2;align-self:end;max-width:42ch}.depth-bot{grid-column:2;grid-row:1;justify-self:center;align-self:end;width:clamp(150px,16vw,230px);height:auto}@media(max-width:820px){.depth-intro{grid-template-columns:1fr}.depth-intro h2{grid-row:auto}.depth-intro p{grid-column:1;grid-row:auto}.depth-bot{grid-column:1;grid-row:auto;justify-self:start;width:clamp(110px,28vw,150px)}}.depth-orbits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:75px;border-top:1px solid #b8b9d3}.depth-orbits article{padding:30px 34px 10px;border-right:1px solid #b8b9d3}.depth-orbits article:last-child{border:0}.depth-orbits article>span{font-family:var(--serif);font-size:3.5rem;color:#5b58de}.depth-orbits h3{font-size:1.6rem;margin-top:34px}
.player-preview{overflow:hidden}.player-marquee{display:flex;gap:14px;margin:45px 0 35px;width:max-content}.player-marquee article{width:230px;padding:24px;border-radius:24px;background:linear-gradient(145deg,#151b3d,#0d1128);border:1px solid var(--line)}.player-marquee article:nth-child(even){transform:translateY(24px)}.player-glyph{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,var(--aqua),var(--blue));color:#071019;font-family:var(--serif);font-weight:800;font-size:1.45rem;box-shadow:0 0 34px rgba(95,241,218,.16)}.player-marquee h3{margin:30px 0 8px}.proof-section{padding-top:30px}.number-strip{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.035)}.number-strip div{border-color:var(--line)}.number-strip b{color:var(--lime);font-family:var(--serif);font-size:3.8rem}.number-strip span{color:var(--muted)}.proof-quote{padding:80px 0 10px;text-align:center}.proof-quote p{font-family:var(--serif);font-size:clamp(2.1rem,4vw,4.8rem);max-width:18ch;margin:0 auto 20px;color:#fff;line-height:1}.proof-quote span{color:var(--aqua)}
.advanced-tease{background:radial-gradient(circle at 80% 40%,rgba(184,140,255,.15),transparent 35%),#0c1029}.terminal-card{border:1px solid rgba(95,241,218,.28);border-radius:20px;background:#050817;box-shadow:0 25px 80px rgba(0,0,0,.35);overflow:hidden}.terminal-top{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.68rem;letter-spacing:.12em;color:var(--muted)}.terminal-top span{width:9px;height:9px;border-radius:50%;background:var(--coral)}.terminal-top span:nth-child(2){background:var(--lime)}.terminal-top span:nth-child(3){background:var(--aqua)}.terminal-top b{margin-left:auto}.terminal-card code{display:block;padding:34px;color:#bde8e3;line-height:2;font-size:.9rem;white-space:normal}.terminal-card code em{color:#7c86ac}.final-launch{text-align:center;padding:150px 0;background:radial-gradient(circle at center,rgba(111,124,255,.2),transparent 48%)}.final-launch h2{font-size:clamp(4rem,8vw,9rem);line-height:.86;margin:24px auto;max-width:11ch}.final-launch p{max-width:620px;margin:0 auto 30px;font-size:1.18rem}
.page-hero{position:relative;background:radial-gradient(circle at 70% 10%,rgba(111,124,255,.25),transparent 35%),#0b0f29;color:#fff;border-bottom:1px solid var(--line);overflow:hidden}.page-hero:after{content:'';position:absolute;width:480px;height:480px;border:1px solid rgba(95,241,218,.15);border-radius:50%;right:-100px;bottom:-320px;box-shadow:0 0 0 80px rgba(95,241,218,.025),0 0 0 160px rgba(95,241,218,.015)}.page-hero.blue,.page-hero.coral{background:radial-gradient(circle at 75% 20%,rgba(184,140,255,.27),transparent 35%),#0b0f29}.page-hero p{color:#c8d0ec}.page-index{color:var(--aqua);opacity:.18}.section.rule{border-top:1px solid var(--line)}.card{background:transparent;color:#fff;border-color:var(--line)}.card p{color:var(--muted)}.card:hover{color:var(--aqua)}.card:hover p{color:var(--muted)}.quote-card{background:linear-gradient(145deg,#141936,#0d1128);border-left-color:var(--aqua);border-radius:0 24px 24px 0}.quote,.quote-card h3{color:#fff}.quote-card:hover{background:#141a3b}.dark-section{background:#0e132e;color:var(--ink)}.dark-section p{color:#c8d0ec}.dark-section .card{background:rgba(255,255,255,.035);border-color:var(--line);border-radius:22px}.cta-panel{background:linear-gradient(120deg,var(--blue),#6933a9);border-radius:32px;color:#fff}.cta-panel .eyebrow,.cta-panel p{color:#fff}.glossary button{background:#111631;border-color:var(--line);color:#fff;border-radius:18px}.glossary button:hover,.glossary button[aria-pressed=true]{background:#1a2450}.glossary span{color:var(--muted)}.quiz-box{background:#111631;border-color:var(--line);border-radius:24px}.quiz-option{background:#090d24;border-color:var(--line);color:#fff;border-radius:12px}.quiz-option:hover,.quiz-option.selected{background:#19224b;border-color:var(--aqua)}.quiz-feedback,.quiz-next-step{background:rgba(95,241,218,.12);color:#fff;border-left:3px solid var(--aqua)}.dossier{border-color:var(--line)}.dossier summary .micro{color:var(--aqua)}.notice{background:rgba(95,241,218,.09);border-left-color:var(--aqua);color:#dce8ef}.filters input,.filters select,.field{background:#10152d;color:#fff;border-color:var(--line);border-radius:12px}.filters input::placeholder,.field::placeholder{color:#7f89a9}.tool-mark{border:0;border-radius:16px;background:linear-gradient(145deg,var(--aqua),var(--blue));color:#06101a}.tag{border-color:var(--line);border-radius:99px}.course-player{background:#0c112a;border-color:var(--line);border-radius:24px}.course-progress-track{background:#222948}.course-progress-track i{background:linear-gradient(90deg,var(--aqua),var(--violet))}.course-complete{background:var(--lime);color:#071019}.prose a,.source a{color:var(--aqua)}
.advanced-layer{background:radial-gradient(circle at 0 0,rgba(95,241,218,.11),transparent 30%),#0c1029}.advanced-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.advanced-grid article{padding:32px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.035)}.advanced-grid article>span{font-size:.68rem;letter-spacing:.14em;color:var(--lime)}.advanced-grid h3{font-size:1.7rem;margin-top:40px}
.players-hero{background:radial-gradient(circle at 70% 20%,rgba(95,241,218,.18),transparent 30%),radial-gradient(circle at 30% 80%,rgba(184,140,255,.17),transparent 35%),#080b20}.players-intro{padding-bottom:60px}.player-directory{padding-top:50px}.player-directory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.player-profile{position:relative;padding:34px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));overflow:hidden}.player-profile:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-110px;top:-110px;background:hsl(calc(var(--player-index) * 43 + 170) 80% 65% / .18);filter:blur(30px)}.player-profile-top{display:flex;align-items:center;justify-content:space-between}.player-profile h3{font-size:2.6rem;margin:30px 0 4px}.player-label{color:var(--lime);font-weight:700}.player-profile dl{display:grid;gap:0;margin:28px 0}.player-profile dl>div{padding:18px 0;border-top:1px solid var(--line)}.player-profile dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--aqua);font-weight:700}.player-profile dd{margin:5px 0 0;color:var(--muted)}.player-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.comparison-section{background:#e9e7ff;color:#10142b}.comparison-section p{color:#4e5772}.comparison-section .eyebrow{color:#504bd5}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#bcbdd5;border:1px solid #bcbdd5}.comparison-grid article{padding:30px;background:#e9e7ff}.comparison-grid span{font-size:.68rem;letter-spacing:.13em;color:#504bd5;font-weight:700}.comparison-grid h3{font-size:1.5rem;margin-top:32px}.advanced-player-lab{background:radial-gradient(circle at 18% 45%,rgba(217,255,111,.08),transparent 28%),#090c22}
.footer{background:#030511;border-top:1px solid var(--line);color:#f7f7ff}.footer-signal{display:flex;align-items:center;gap:11px;padding-bottom:28px;margin-bottom:55px;border-bottom:1px solid var(--line);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#aeb8d6}.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px var(--lime)}.footer p{color:#aeb8d6}.footer a{color:#dfe4fa}.footer a:hover{color:var(--aqua);text-decoration:none}.footer .brand{color:#f7f7ff}.footer .brand span{color:var(--aqua)}.footer-top b{color:var(--lime)}.footer-bottom{border-color:var(--line);color:#9da8c9}
.reveal{transform:translateY(24px);transition:opacity .7s,transform .7s}.reveal.visible{transform:none}.contact-fallback{color:var(--muted)}.copy-contact-email{color:var(--aqua)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes signalMove{to{transform:translateX(-50%)}}@keyframes brandSpin{to{transform:rotate(360deg)}}
.cosmic-grid{grid-template-columns:1.08fr .92fr;gap:clamp(24px,3vw,44px)}.cosmic-hero h1{font-size:clamp(4.4rem,6.25vw,7.5rem);max-width:14ch;line-height:.92}.cosmic-hero h1 span{display:inline-block;white-space:nowrap}.page-hero .wrap{grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,80px)}.page-hero h1{font-size:clamp(3.8rem,5.4vw,6.4rem);line-height:1;max-width:12ch}
@media(max-width:1180px){.nav{background:#090d24}.cosmic-grid{grid-template-columns:1fr}.cosmic-art{margin:10px -8vw 0 20vw}.cosmic-art img{min-height:480px}.cosmic-hero h1{max-width:14ch}.crew-grid{grid-template-columns:1fr}.crew-card:nth-child(2){transform:none}.mission-grid{grid-template-columns:1fr 1fr}.mission-card:nth-child(2),.mission-card:nth-child(5){transform:none}.player-directory-grid{grid-template-columns:1fr}}
@media(max-width:760px){.wrap{width:min(100% - 32px,1320px)}.section{padding:80px 0}.cosmic-hero{padding-top:70px;min-height:0}.cosmic-hero h1{font-size:clamp(3.5rem,15vw,5.5rem)}.cosmic-grid,.asym-head,.depth-intro{display:block}.cosmic-art{margin:45px -38% 0 -8%}.cosmic-art img{min-height:390px;border-radius:38% 10% 32% 12%}.orbit-label{display:none}.hero-actions .btn{width:100%}.crew-card{grid-template-columns:1fr}.mission-grid,.depth-orbits,.advanced-grid,.comparison-grid{grid-template-columns:1fr}.mission-card{min-height:240px}.depth-intro h2{font-size:3.6rem}.depth-orbits article{border-right:0;border-bottom:1px solid #b8b9d3}.player-marquee{display:grid;width:auto}.player-marquee article{width:100%}.player-marquee article:nth-child(even){transform:none}.number-strip{grid-template-columns:1fr 1fr}.player-profile{padding:24px}.player-profile h3{font-size:2.2rem}.page-hero h1{font-size:clamp(3.2rem,14vw,5rem)}.footer-top{grid-template-columns:1fr}.footer-top>div:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.brand-orbit,.orbit-label,.signal-track{animation:none}}
@media(max-width:1320px) and (min-width:1001px){.header-inner{height:70px}.menu-toggle{display:block;margin-left:auto;color:#fff}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:#090d24;padding:20px 24px 30px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:8px}.nav.open{display:flex}.nav a{padding:9px 0}.nav-menu{position:static;margin-top:8px;box-shadow:none}.header-cta{display:none}}
/* ROBOT POLISH — small companions, quiet motion and reassuring wit */
.hero-buddy{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:15px;margin-top:28px;padding:14px 16px;border:1px solid rgba(95,241,218,.22);border-radius:18px;background:linear-gradient(135deg,rgba(95,241,218,.08),rgba(184,140,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.hero-buddy b{display:block;color:var(--lime);font-size:.67rem;letter-spacing:.12em}.robot-aside b{color:var(--lime);font-size:.67rem;letter-spacing:.12em}
.robot-aside .item-label{margin:0}.hero-buddy small{display:block;color:#c2cbe6;line-height:1.45;margin-top:3px}.mini-bot{position:relative;width:62px;height:52px;border:1px solid rgba(155,238,255,.48);border-radius:22px 22px 27px 27px;background:radial-gradient(circle at 50% 42%,rgba(95,241,218,.16),transparent 62%),#090d22;display:grid;place-items:center;box-shadow:inset 0 0 18px rgba(95,241,218,.13),0 8px 24px rgba(0,0,0,.2);animation:botBob 5s ease-in-out infinite}.mini-bot:before,.mini-bot:after{content:'';position:absolute;top:20px;width:5px;height:12px;border:1px solid rgba(155,238,255,.35);background:#10172f}.mini-bot:before{left:-6px;border-radius:5px 0 0 5px}.mini-bot:after{right:-6px;border-radius:0 5px 5px 0}.mini-bot i{position:absolute;width:1px;height:11px;background:rgba(155,238,255,.55);top:-10px;left:50%}.mini-bot i:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--coral);left:-2.5px;top:-4px;box-shadow:0 0 10px var(--coral);animation:antennaPulse 2.6s ease-in-out infinite}.mini-bot span{font-family:monospace;color:var(--aqua);font-size:1rem;letter-spacing:.02em;text-shadow:0 0 12px rgba(95,241,218,.55)}
.page-hero .hero-buddy{max-width:450px}.page-hero .page-index{animation:indexBreathe 8s ease-in-out infinite}.robot-aside{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:20px;max-width:720px;margin:42px 0 0 auto;padding:20px 24px;border:1px solid rgba(217,255,111,.24);border-radius:22px;background:linear-gradient(120deg,rgba(217,255,111,.07),rgba(95,241,218,.035))}.robot-aside p{margin:4px 0 0;color:#d1d8ef}.footer-bot{display:flex;align-items:center;gap:15px;width:max-content;max-width:100%;margin:-16px 0 30px auto;color:#aeb8d6}.footer-bot .mini-bot{transform:scale(.82);transform-origin:right center}.footer-bot small{font-size:.74rem;letter-spacing:.05em}.cosmic-art img{animation:heroFloat 9s ease-in-out infinite}.mission-card .mission-icon,.player-glyph,.bot-face{transition:transform .35s ease,box-shadow .35s ease}.mission-card:hover .mission-icon{transform:translateY(-4px) rotate(-5deg)}.player-profile:hover .player-glyph{transform:translateY(-3px) rotate(4deg);box-shadow:0 0 42px rgba(95,241,218,.24)}.crew-card:hover .bot-face{transform:translateY(-4px);box-shadow:inset 0 0 20px rgba(95,241,218,.23),0 12px 35px rgba(95,241,218,.1)}
@keyframes botBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes antennaPulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.008)}}@keyframes indexBreathe{0%,100%{opacity:.1;transform:translateY(0)}50%{opacity:.17;transform:translateY(-5px)}}
@media(max-width:760px){.hero-buddy{grid-template-columns:58px 1fr}.mini-bot{width:54px;height:47px}.robot-aside{grid-template-columns:58px 1fr;padding:18px}.footer-bot{margin-right:auto}}
@media(prefers-reduced-motion:reduce){.mini-bot,.mini-bot i:after,.cosmic-art img,.page-hero .page-index{animation:none}.mission-card .mission-icon,.player-glyph,.bot-face{transition:none}}
.dark-section .card,.dark-section .card h3,.dark-section .card .card-icon{color:#f7f7ff}.dark-section .card:hover,.dark-section .card:hover h3,.dark-section .card:hover .card-icon{color:var(--aqua)}
/* INLINE CARD TITLES */
.grid-3>.card:nth-child(2),.grid-3>.card:nth-child(2):hover{transform:none}.card:has(> .card-icon){display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:17px;align-items:center}.card:has(> .card-icon)>:not(.card-icon):not(h3){grid-column:1/-1}.card:has(> .card-icon)>.card-icon{grid-column:1;grid-row:1;margin:0;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(95,241,218,.17),rgba(111,124,255,.18));border:1px solid rgba(95,241,218,.2);color:var(--aqua);font-size:1.45rem}.card:has(> .card-icon)>h3{grid-column:2;grid-row:1;margin:0}.mission-title-row,.player-title-row,.tool-title-row{display:flex;align-items:center;gap:15px;min-width:0}.mission-title-row{margin:28px 0 15px}.mission-title-row .mission-icon{margin:0;flex:0 0 auto}.mission-title-row h3,.player-title-row h3,.tool-title-row h3{margin:0}.player-title-row{margin-bottom:18px}.player-marquee .player-title-row h3{margin:0}.player-profile-top{justify-content:flex-start;align-items:center;gap:16px}.player-profile-top>div{min-width:0}.player-profile-top h3{margin:3px 0 0;font-size:2.25rem}
/* TOOL FINDER / SPECTACULAR EDITION */
.tools-universe{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 7%,rgba(95,241,218,.08),transparent 25%),radial-gradient(circle at 8% 45%,rgba(184,140,255,.09),transparent 28%)}.tools-universe:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(142,157,225,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(142,157,225,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 55%)}.tools-universe>.wrap{position:relative}.tools-heading{margin-bottom:34px}.directory-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:26px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035);overflow:hidden}.directory-stats div{display:flex;align-items:baseline;gap:10px;padding:17px 22px;border-right:1px solid var(--line)}.directory-stats div:last-child{border-right:0}.directory-stats b{font-family:var(--serif);font-size:1.8rem;color:var(--lime)}.directory-stats span{color:#aeb8d6;font-size:.79rem;text-transform:uppercase;letter-spacing:.08em}.filter-console{position:relative;margin-bottom:30px;padding:0 24px 24px;border:1px solid rgba(133,151,230,.28);border-radius:28px;background:linear-gradient(145deg,rgba(19,25,57,.94),rgba(10,14,38,.94));box-shadow:0 28px 80px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}.filter-console:after{content:'';position:absolute;width:240px;height:240px;border-radius:50%;right:-100px;top:-150px;background:var(--aqua);filter:blur(95px);opacity:.08;pointer-events:none}.filter-console-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;margin:0 -24px 22px;padding:12px 24px;border-bottom:1px solid var(--line);color:#8e99ba;font-size:.68rem;letter-spacing:.12em}.filter-console-top span:first-child{color:var(--aqua)}.filter-console-top i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}.quick-filters{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.quick-filter{border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.035);color:#cbd3ed;padding:8px 13px;font-size:.76rem;font-weight:700;transition:background .2s,color .2s,border-color .2s,transform .2s}.quick-filter:hover{transform:translateY(-2px);border-color:rgba(95,241,218,.42)}.quick-filter.active{background:var(--lime);border-color:var(--lime);color:#071019}.filter-console .filters{position:relative;z-index:1;display:grid;grid-template-columns:2fr repeat(5,1fr);gap:12px;margin:0}.filter-console .filters>div{min-width:0}.filter-console .filters label{display:block;margin-bottom:6px;color:#aeb8d6;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}.filter-console .filters input,.filter-console .filters select{height:56px;background:#0a0e25;border-color:rgba(151,169,245,.2)}.filter-console .filters input:focus,.filter-console .filters select:focus{border-color:var(--aqua);outline:2px solid rgba(95,241,218,.16);outline-offset:2px}.filter-console .filter-clear{grid-column:6;min-height:46px;margin-top:1px}.tool-results-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0 20px}.tool-results-bar>p{font-family:var(--serif);font-size:1.15rem;color:#dbe2fa;margin:0}.results-buddy{display:flex;align-items:center;gap:10px;color:#cbd3ed;font-size:.77rem;line-height:1.35}.results-buddy .mini-bot{transform:scale(.7);margin:-8px}.results-buddy small{color:#8792b4}.tools-universe #tool-grid{align-items:stretch;gap:18px}.tool-card{position:relative;display:flex!important;flex-direction:column;min-height:530px;height:100%;padding:28px!important;border:1px solid rgba(143,160,235,.2)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(21,27,60,.96),rgba(9,13,35,.98))!important;overflow:hidden;isolation:isolate;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease!important}.tool-card:before{content:'';position:absolute;width:210px;height:210px;border-radius:50%;left:-100px;top:-130px;background:hsl(var(--tool-hue) 90% 65%);filter:blur(75px);opacity:.12;z-index:-1}.tool-card:hover{transform:translateY(-7px)!important;border-color:rgba(95,241,218,.42)!important;box-shadow:0 25px 60px rgba(0,0,0,.25),0 0 0 1px rgba(95,241,218,.06)!important}.tool-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.tool-title-row{align-items:center}.tool-title-row .micro{display:block;margin-bottom:4px;color:#8794bb}.tool-title-row h3{font-size:1.7rem;color:#fff;line-height:1.05}.tool-card .tool-mark{flex:0 0 auto;width:58px;height:58px;margin:0;border-radius:19px;background:linear-gradient(145deg,var(--aqua),var(--blue));box-shadow:0 10px 30px rgba(95,241,218,.14);font-family:var(--serif);font-size:1.45rem}.verified-seal{flex:0 0 auto;padding:5px 8px;border:1px solid rgba(217,255,111,.3);border-radius:99px;color:var(--lime);font-size:.58rem;font-weight:800;letter-spacing:.1em}.tool-card-copy{min-height:3.2em;margin:25px 0 20px;font-size:1rem;color:#bdc6e2}.listing-checks{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}.listing-checks span{padding:5px 8px;border-radius:7px;background:rgba(95,241,218,.07);color:#9ecbc6;font-size:.66rem}.listing-checks span:before{content:'✓';margin-right:5px;color:var(--aqua)}.tool-card .tool-guidance{display:grid;gap:9px;margin:0;padding:18px 0;border-top:1px solid var(--line);font-size:.76rem;color:#9ea9c9}.tool-card .tool-guidance span{display:flex;justify-content:space-between;gap:15px}.tool-card .tool-guidance b{color:#e6eaff;font-weight:600}.tool-card-footer{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}.tool-card-footer .tag-row{margin:0}.tool-card-footer .tag{font-size:.65rem}.tool-visit{min-height:44px;padding:10px 15px;white-space:nowrap;background:rgba(95,241,218,.08);border-color:rgba(95,241,218,.26);color:var(--aqua)}.tool-visit:hover{background:var(--aqua);border-color:var(--aqua);color:#071019}.tool-empty{display:flex;align-items:center;gap:18px;margin-top:20px;padding:25px;border:1px solid var(--line);border-radius:22px;background:#10152d}.tool-empty h3,.tool-empty p{margin:0}.tool-empty p{color:var(--muted)}
@media(max-width:1180px){.filter-console .filters{grid-template-columns:repeat(3,1fr)}.filter-console .filter-search{grid-column:span 2}.filter-console .filter-clear{grid-column:auto}.tools-universe #tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.directory-stats{grid-template-columns:1fr}.directory-stats div{border-right:0;border-bottom:1px solid var(--line)}.directory-stats div:last-child{border-bottom:0}.filter-console{padding:0 16px 18px}.filter-console-top{margin:0 -16px 18px;padding:12px 16px;display:block}.filter-console-top span:last-child{display:block;margin-top:5px}.filter-console .filters{grid-template-columns:1fr}.filter-console .filter-search,.filter-console .filter-clear{grid-column:auto}.tool-results-bar{align-items:flex-start;flex-direction:column}.tools-universe #tool-grid{grid-template-columns:1fr}.tool-card{min-height:0}.tool-card-head{display:block}.verified-seal{display:inline-block;margin-top:14px}.tool-card-footer{align-items:stretch;flex-direction:column}.tool-visit{width:100%}}
.filter-console .filter-clear{grid-column:1;grid-row:2}@media(max-width:1180px){.filter-console .filter-clear{grid-column:auto;grid-row:auto}}
/* TOOL CARDS / TWO-SIDED FIELD NOTES */
.flip-instruction{display:flex;align-items:center;gap:10px;margin:-2px 0 22px;color:#8995b7;font-size:.78rem}.flip-instruction span{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(95,241,218,.28);border-radius:50%;color:var(--aqua);font-size:1rem}.tool-card{min-height:600px!important;padding:0!important;border:0!important;border-radius:27px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;perspective:1300px;isolation:auto}.tool-card:before{display:none}.tool-card:hover{transform:none!important;border-color:transparent!important;box-shadow:none!important}.tool-card-inner{position:relative;width:100%;height:100%;min-height:600px;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.2,.75,.2,1)}.tool-card.is-flipped .tool-card-inner{transform:rotateY(180deg)}.tool-card-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:28px;border:1px solid rgba(143,160,235,.2);border-radius:26px;background:linear-gradient(145deg,rgba(21,27,60,.98),rgba(9,13,35,.99));box-shadow:0 18px 45px rgba(0,0,0,.16);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:border-color .28s ease,box-shadow .28s ease}.tool-card-face:before{content:'';position:absolute;width:220px;height:220px;border-radius:50%;left:-105px;top:-135px;background:hsl(var(--tool-hue) 90% 65%);filter:blur(78px);opacity:.13;pointer-events:none}.tool-card:hover .tool-card-face{border-color:rgba(95,241,218,.42);box-shadow:0 25px 60px rgba(0,0,0,.25),0 0 0 1px rgba(95,241,218,.06)}.tool-card-back{transform:rotateY(180deg);background:linear-gradient(145deg,rgba(14,31,53,.99),rgba(9,13,35,.99))}.card-flip-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;border-radius:26px;background:transparent;cursor:pointer}.card-flip-hit:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.tool-card-front>*:not(.card-flip-hit),.tool-card-back>*{position:relative;z-index:2}.tool-card-front a,.tool-card-back a,.tool-card-back button{position:relative;z-index:3}.tool-card-actions{display:flex;align-items:center;gap:9px}.flip-cue{color:var(--aqua);font-size:.76rem;font-weight:800;white-space:nowrap}.tool-back-section{margin-top:22px}.tool-back-section h4{margin:0 0 10px;color:var(--lime);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase}.tool-back-section ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.tool-back-section li{position:relative;padding-left:19px;color:#d3daf0;font-size:.82rem;line-height:1.38}.tool-back-section li:before{content:'✦';position:absolute;left:0;top:1px;color:var(--aqua);font-size:.65rem}.tool-back-section.uses{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.tool-watch{margin-top:19px;padding:13px 14px;border:1px solid rgba(255,126,109,.2);border-radius:13px;background:rgba(255,126,109,.055)}.tool-watch b{color:var(--coral);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase}
.tool-watch .item-label{margin:0 0 5px}.tool-watch p{margin:0;color:#b9c2dd;font-size:.74rem;line-height:1.4}.tool-back-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:17px}.flip-back{padding:9px 0;border:0;background:transparent;color:var(--aqua);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.flip-back:hover{text-decoration:underline}.tool-back-footer .tool-visit{width:auto}.tool-card.is-flipped .tool-card-front{pointer-events:none}.tool-card:not(.is-flipped) .tool-card-back{pointer-events:none}
@media(max-width:760px){.flip-instruction{align-items:flex-start}.tool-card,.tool-card-inner{min-height:625px!important}.tool-card-face{padding:23px}.tool-card-front .tool-card-head,.tool-card-back .tool-card-head{display:flex}.tool-card-front .verified-seal,.tool-card-back .verified-seal{margin-top:0}.tool-card-footer{align-items:flex-end}.tool-card-actions{width:auto}.tool-card-actions .tool-visit{width:auto}.tool-back-footer{align-items:stretch;flex-direction:column}.tool-back-footer .tool-visit{width:100%}}
@media(prefers-reduced-motion:reduce){.tool-card-inner{transition:none}}
/* Render-safe flip: swap faces at the midpoint of a short turn. */
.tool-card{perspective:none}.tool-card-inner,.tool-card.is-flipped .tool-card-inner{transform:none;transform-style:flat;transition:none}.tool-card-face{backface-visibility:visible;-webkit-backface-visibility:visible}.tool-card-back{display:none;transform:none}.tool-card.is-flipped .tool-card-front{display:none}.tool-card.is-flipped .tool-card-back{display:flex;animation:tool-face-in .42s cubic-bezier(.2,.75,.2,1)}.tool-card:not(.is-flipped) .tool-card-front{animation:tool-face-in .42s cubic-bezier(.2,.75,.2,1)}
@keyframes tool-face-in{0%{opacity:0;transform:rotateY(82deg) scale(.97)}100%{opacity:1;transform:rotateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.tool-card.is-flipped .tool-card-back,.tool-card:not(.is-flipped) .tool-card-front{animation:none}}
/* Keep the editorial heading on three deliberate rows at desktop widths. */
.asym-head .curiosity-heading{max-width:none;font-size:clamp(2.8rem,4.5vw,5.9rem);line-height:1.04;letter-spacing:-.055em}
.curiosity-heading span{display:block;white-space:nowrap}
@media(max-width:760px){.asym-head .curiosity-heading{font-size:clamp(2.35rem,8.4vw,4.2rem)}.curiosity-heading span{white-space:normal}}
.lesson-action,.lesson-check{margin-top:18px;padding:17px 19px;border:1px solid var(--line);border-radius:15px;background:rgba(95,241,218,.055)}
.lesson-check{background:rgba(184,140,255,.065)}
.lesson-action strong,.lesson-check strong{color:var(--aqua);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.lesson-action p,.lesson-check p{margin:7px 0 0}
.reveal{opacity:1}
.page-hero h1{max-width:none}
.tool-card-front .card-flip-hit{z-index:4}
.tool-card-front a,.tool-card-back a,.tool-card-back button{z-index:5}
.bot-avatar{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;background:#090d22;box-shadow:0 0 0 1px rgba(155,238,255,.32),0 10px 26px rgba(0,0,0,.35);animation:botBob 5s ease-in-out infinite}
.hero-buddy .bot-avatar{width:60px;height:60px}
.results-buddy .bot-avatar{width:44px;height:44px;animation:none}
.footer-bot .bot-avatar{width:56px;height:56px}
.tool-empty .bot-avatar{width:64px;height:64px;flex:0 0 auto}
.bot-beep{box-shadow:0 0 0 1px rgba(255,129,113,.4),0 10px 26px rgba(0,0,0,.35)}
.bot-pixel{box-shadow:0 0 0 1px rgba(216,255,104,.4),0 10px 26px rgba(0,0,0,.35)}
.bot-orbit{box-shadow:0 0 0 1px rgba(149,134,255,.45),0 10px 26px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.bot-avatar{animation:none}}
@media (max-width:620px){.hero-buddy .bot-avatar{width:54px;height:54px}}
.course-guide-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.course-guide-row .bot-avatar{width:44px;height:44px;animation:none}
/* The real logo, from the brand kit. The old wordmark was set in type with a star glyph. */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand img{display:block;height:34px;width:auto}
.footer .brand img{height:30px}
@media(max-width:700px){.brand img{height:28px}}
/* ---- navigation, brought up to the standard of the logo ---- */
/* It was bare text with no hover, no current state and a grey glass button, which read as
unfinished next to the brand mark. Pills, a proper active state, and the brand purple on
the one button that matters. */
.site-header .nav a,
.site-header .nav summary { border-radius: 999px; color: #c6cfee; padding: .55rem .85rem; transition: background .2s ease, color .2s ease; }
.site-header .nav a:hover,
.site-header .nav summary:hover { background: rgba(255,255,255,.07); color: #fff; }
.site-header .nav a[aria-current="page"] { background: rgba(91,76,240,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(146,132,255,.45); }
.site-header .nav-group summary { cursor: pointer; list-style: none; }
.site-header .nav-group summary::-webkit-details-marker { display: none; }
.site-header .nav { gap: 4px; }
.site-header .nav-signin { margin-left: .4rem; box-shadow: inset 0 0 0 1px rgba(201,214,255,.3); }
.site-header .nav-signin:hover { box-shadow: inset 0 0 0 1px rgba(201,214,255,.6); }
.site-header .header-cta { background: #5B4CF0; border: 0; color: #fff; font-weight: 700; margin-left: .9rem; box-shadow: 0 10px 26px rgba(91,76,240,.4); }
.site-header .header-cta:hover { background: #6d5eff; transform: translateY(-1px); }
.site-header .header-cta .arrow { opacity: .9; }
@media (max-width: 1040px) {
.site-header .nav a, .site-header .nav summary { padding: .5rem .6rem; }
.site-header .header-cta { margin-left: .4rem; }
}
/* ---- hero art ---- */
/* The picture is used exactly as supplied: 16:9, nothing added, nothing mirrored. The frame
matches that ratio so object-fit has nothing to crop, and the art earns its size by being
wide and bleeding off the right edge rather than by being squeezed into a tall box.
The blob corners are eased so the mask trims sky and floor instead of DOT and ORBIT. */
.cosmic-hero .cosmic-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); align-items: center; }
.cosmic-hero .hero-copy h1 { font-size: clamp(2.5rem, 4.9vw, 5.4rem); overflow-wrap: break-word; }
.cosmic-hero .cosmic-grid { column-gap: clamp(1.5rem, 3vw, 3.5rem); }
.cosmic-hero .cosmic-art { align-self: center; margin: 0 -14vw 0 0; }
.cosmic-hero .cosmic-art img { width: 100%; aspect-ratio: 1.777; height: auto; min-height: 0; object-fit: cover; object-position: center; border-radius: 15% 5% 13% 6%; }
@media (max-width: 1100px) {
.cosmic-hero .cosmic-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.cosmic-hero .cosmic-art { margin-right: -9vw; }
}
@media (max-width: 900px) {
.cosmic-hero .cosmic-grid { grid-template-columns: 1fr; }
.cosmic-hero .cosmic-art { margin: 20px -6vw 0 -6vw; }
.cosmic-hero .cosmic-art img { border-radius: 10% 4% 9% 5%; }
}
/* ---- navigation, brought up to the standard of the logo ---- */
/* It was bare text with no hover, no current state and a grey glass button, which read as
unfinished next to the brand mark. Pills, a proper active state, and the brand purple on
the one button that matters. */
.site-header .nav a,
.site-header .nav summary { border-radius: 999px; color: #c6cfee; padding: .55rem .85rem; transition: background .2s ease, color .2s ease; }
.site-header .nav a:hover,
.site-header .nav summary:hover { background: rgba(255,255,255,.07); color: #fff; }
.site-header .nav a[aria-current="page"] { background: rgba(91,76,240,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(146,132,255,.45); }
.site-header .nav-group summary { cursor: pointer; list-style: none; }
.site-header .nav-group summary::-webkit-details-marker { display: none; }
.site-header .nav { gap: 4px; }
.site-header .nav-signin { margin-left: .4rem; box-shadow: inset 0 0 0 1px rgba(201,214,255,.3); }
.site-header .nav-signin:hover { box-shadow: inset 0 0 0 1px rgba(201,214,255,.6); }
.site-header .header-cta { background: #5B4CF0; border: 0; color: #fff; font-weight: 700; margin-left: .9rem; box-shadow: 0 10px 26px rgba(91,76,240,.4); }
.site-header .header-cta:hover { background: #6d5eff; transform: translateY(-1px); }
.site-header .header-cta .arrow { opacity: .9; }
@media (max-width: 1040px) {
.site-header .nav a, .site-header .nav summary { padding: .5rem .6rem; }
.site-header .header-cta { margin-left: .4rem; }
}
/* ---- the promise ribbon ---- */
/* It held one copy of the text and animated to -50%, so it slid half its own width and left
the rest of the strip empty. Two identical runs make the loop seamless. The rest is craft:
a gradient with a moving sheen, hairlines top and bottom, and the text dissolving at both
ends instead of being chopped off mid-letter. */
.signal-ribbon { position: relative; overflow: hidden; padding: 0; border: 0;
background: linear-gradient(100deg, #3f2fd4 0%, #5B4CF0 34%, #6f5bff 52%, #4a34c8 74%, #3b2bbf 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.35), 0 18px 44px -28px rgba(91,76,240,.9); }
.signal-ribbon::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%);
background-size: 260% 100%; animation: signalSheen 7s ease-in-out infinite; }
.signal-ribbon::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 220% at 50% 120%, rgba(217,255,111,.18), transparent 60%); mix-blend-mode: screen; }
.signal-track { display: flex; width: max-content; padding: 15px 0; animation: signalLoop 46s linear infinite; will-change: transform;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.signal-run { display: flex; align-items: center; flex: none; }
.signal-run span { color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.signal-track b { color: var(--lime); padding: 0 clamp(18px, 2.6vw, 40px); font-size: .72rem; line-height: 1;
text-shadow: 0 0 12px rgba(217,255,111,.65); }
.signal-ribbon:hover .signal-track { animation-play-state: paused; }
@keyframes signalSheen { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
.signal-track { animation: none; }
.signal-ribbon::before { animation: none; background: none; }
}
@keyframes signalLoop { to { transform: translateX(-25%); } }
/* The footer gained a Learn column when the platform did. Keep it readable on the way down. */
@media (max-width: 1180px) { .footer-top { grid-template-columns: 1fr repeat(2, 1fr); } }
/* A heading may not leave its box because one word is long. "Spotify recommendations" was
overflowing its card by 87px on desktop and pushing the whole page into 13px of sideways
scroll on a phone: the word is unbreakable, and nothing told it otherwise. */
h1,h2,h3,h4{overflow-wrap:break-word}
/* The compact icon cards share the heading's row with a 54px icon, leaving it 181px at the
desktop layout, which is the narrowest it gets. Measured on the element itself rather than a
probe copy, "recommendations" is 181px at 1.15rem -- exactly the cell, so it broke as
"recommendation / s" -- and 165px at 1.05rem, which leaves 16px in hand. The wrap rule above
stays as the guarantee for whatever longer word somebody adds later. */
.card:has(> .card-icon)>h3{font-size:1.05rem;overflow-wrap:break-word;hyphens:auto}
/* Let the browser even up the lines it chooses for itself. "No jargon. No doom.
Good reads."
was breaking as "No jargon. No / doom.", stranding a word, because the first line is wider
than its column at display size. Balancing turns that into a line per sentence. Headings with
their own
or spans are unaffected: measured across the homepage hero and section
headings, every authored break stays exactly where it was put. */
h1,h2,h3{text-wrap:balance}
/* Copying a prompt is only half an instruction: it needs somewhere to go. */
.copy-where{margin:14px 0 0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.copy-where a{color:var(--aqua)}
/* The footer's bottom bar carries three things now: who owns the site, the legal pages, and the
line about judgement. Privacy and Terms moved down here from a column of their own, because a
reader looking for them looks at the bottom of a page rather than in a list of features. */
.footer-bottom{gap:14px 28px;flex-wrap:wrap;align-items:baseline}
.footer-legal{color:#b9c5bc}
.footer-small{display:flex;gap:18px;margin-right:auto}
.footer-small a{color:#b9c5bc;text-decoration:none;font-size:.83rem}
.footer-small a:hover{color:var(--lime);text-decoration:underline}
@media(max-width:700px){.footer-small{margin-right:0}}
/* ── The mega-menu ─────────────────────────────────────────────────────────────
"Put it to work" had grown to twenty-four links in one column, which on a laptop
ran off the bottom of the screen. A list that long is not a menu, it is an index
nobody asked for.
So each panel is now a grid of named groups. It is still a , so it works
with no JavaScript and the keyboard gets it for free; the script that closes the
others is an improvement on top rather than the thing holding it up.
The panel is positioned against the header's inner row rather than against its own
summary, so every panel is the same width and lines up with the page beneath it.
Anchoring a 1100px panel to a summary two-thirds of the way across the bar sends it
off the left edge of the screen. */
.site-header .header-inner { position: relative; }
/* Static, or the panel would anchor to the summary instead of the header row. */
.site-header .nav-group { position: static; }
.site-header .nav-menu.mega {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
display: grid;
gap: 8px 30px;
padding: 26px 28px;
/* A flat colour rather than the gradient this started as. A background image of any kind,
gradient included, puts every piece of text over it beyond what the contrast audit can work
out: fifty words in here went from judged to unknowable, silently, in the check whose whole
job is catching text nobody can read. A menu is not worth that. */
background: #121835;
border: 1px solid rgba(150, 169, 255, .26);
border-radius: 20px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
min-width: 0;
}
.site-header .nav-menu.mega-three { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .95fr); }
.site-header .nav-menu.mega-four { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(0, .9fr) minmax(0, .9fr); }
.site-header .mega-col { min-width: 0; }
/* Two groups stacked in one column, so the four columns end up about the same height. */
.site-header .mega-col.mega-stack { display: grid; align-content: start; gap: 22px; }
.site-header .mega-label {
color: var(--aqua);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(150, 169, 255, .16);
text-transform: uppercase;
}
.site-header .mega-col ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* Scoped to the list links. Unscoped, this also caught the note card's link, which turned it
into a grid container and put its arrow on a row of its own. */
.site-header .nav-menu.mega li a {
display: grid;
gap: 2px;
border-radius: 10px;
padding: 7px 10px;
margin: 0 -10px;
white-space: normal;
text-decoration: none;
transition: background .18s ease, color .18s ease;
}
.site-header .nav-menu.mega a b { color: #eef1ff; font-size: .88rem; font-weight: 700; line-height: 1.35; }
.site-header .nav-menu.mega a span { color: #9aa5c9; font-size: .78rem; font-weight: 400; line-height: 1.45; }
.site-header .nav-menu.mega li a:hover,
.site-header .nav-menu.mega li a:focus-visible { background: rgba(95, 241, 218, .1); }
.site-header .nav-menu.mega a:hover b,
.site-header .nav-menu.mega a:focus-visible b { color: var(--lime); }
.site-header .nav-menu.mega a:hover span,
.site-header .nav-menu.mega a:focus-visible span { color: #c2cbe6; }
/* The page you are on, marked in the menu rather than left for you to work out. */
.site-header .nav-menu.mega li a[aria-current=page] { background: rgba(217, 255, 111, .1); }
.site-header .nav-menu.mega a[aria-current=page] b { color: var(--lime); }
/* The last column of the shorter panels: a sentence rather than another list, because
three links and a lot of air reads like something is missing. */
.site-header .mega-note {
align-content: start;
background: rgba(190, 202, 255, .05);
border: 1px solid rgba(150, 169, 255, .16);
border-radius: 14px;
display: grid;
gap: 8px;
padding: 16px 18px;
}
.site-header .mega-note-title { color: var(--lime); font-size: .82rem; font-weight: 700; margin: 0; }
.site-header .mega-note p { color: #9aa5c9; font-size: .78rem; line-height: 1.5; margin: 0; }
/* The arrow is glued to the last word with a non-breaking space in the markup, because on its
own line it reads as a bullet nobody meant to add. */
.site-header .mega-note-link {
color: var(--aqua);
font-size: .8rem;
font-weight: 700;
margin-top: 2px;
text-decoration: none;
white-space: normal;
}
.site-header .mega-note-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Open one and the others shut, which the script does; this is the look of the open one. */
.site-header .nav-group[open] > summary { background: rgba(255, 255, 255, .09); color: #fff; }
.site-header .nav-group[open] > summary:after { transform: rotate(180deg); }
.site-header .nav-group summary:after { display: inline-block; transition: transform .18s ease; }
/* In the drawer the panel is part of the page rather than floating over it, so it loses
the shadow, the border and the columns and becomes what it always was underneath. */
@media (max-width: 1320px) {
.site-header .nav-menu.mega {
position: static;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 10px;
padding: 16px 14px;
border-radius: 14px;
box-shadow: none;
}
.site-header .mega-col.mega-stack { gap: 18px; }
.site-header .nav-menu.mega li a { margin: 0; padding: 8px 10px; }
/* In a drawer the twenty-four-link panel is a lot of thumb. The group labels are what makes
it findable; the descriptions are a desktop luxury and they double its length, so they go.
The two short panels keep theirs, because there the sentence is most of the value. */
.site-header .nav-menu.mega-four a span { display: none; }
.site-header .nav-menu.mega-four li a { padding: 7px 10px; }
}
@media (min-width: 1321px) and (max-width: 1460px) {
.site-header .nav-menu.mega { gap: 8px 22px; padding: 22px 22px; }
.site-header .nav-menu.mega a span { font-size: .75rem; }
}
/* The press kit shows the real logo now, not a placeholder somebody set in Georgia. */
.press-kit .press-mark{display:flex;align-items:center;justify-content:center;margin:0 0 20px;padding:26px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(190,202,255,.05)}
.press-kit .press-mark img{width:100%;max-width:280px;height:auto}
.press-kit .press-downloads{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 14px}
.press-kit .press-downloads .btn{flex:1 1 12rem;justify-content:center;text-align:center}
.press-kit .source{margin:0}
/* The page a reader gets when the address is not a page. Served from two renderers -- a React
component for the App Router and an HTML string for the [...legacy] route handler -- which is
why the styling lives in the one stylesheet both halves already load. Before this, one of
those two was nine bytes of text/plain. */
/* Every element here carries its own class rather than being styled by tag name. This block is
in the shared stylesheet so both renderers of the page look the same, which means it is also
reaching into a React component -- and a container class that styles bare h1, a, li and span
is exactly what made the glossary's filter pills 552x175. src/lib/styles/css-collisions.test.ts
catches that, and caught this. */
.not-found-page{padding:72px 0 96px}
.not-found-heading{margin:10px 0 0;max-width:18ch}
.not-found-lede{margin:16px 0 0;max-width:62ch;color:var(--muted);font-size:1.06rem;line-height:1.6}
.not-found-links{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.not-found-item{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--line);border-radius:14px}
.not-found-link{font-weight:700;text-decoration:none}
.not-found-link:hover,.not-found-link:focus-visible{text-decoration:underline}
.not-found-detail{color:var(--muted);font-size:.93rem;line-height:1.5}
.not-found-retired{margin:26px 0 0;max-width:62ch;color:var(--muted);line-height:1.6}
@media (max-width:760px){.not-found-page{padding:48px 0 64px}}
/* The page a reader gets when something threw. Same rule as the 404 block above: every element
carries its own class, because this stylesheet is on the React pages too and a container
class that styles bare h1, button, li and span is how the glossary's filter pills became
552x175. error-page-bare is the global-error variant, which renders without the site header
and so has to make its own top margin. */
.error-page{padding:72px 0 96px}
.error-page-bare{padding:56px 0 80px}
.error-heading{margin:10px 0 0;max-width:20ch}
.error-lede{margin:16px 0 0;max-width:62ch;color:var(--muted);font-size:1.06rem;line-height:1.6}
.error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:26px 0 0}
.error-reference{margin:18px 0 0;color:var(--muted);font-size:.93rem;line-height:1.6}
.error-digest{padding:2px 7px;border:1px solid var(--line);border-radius:7px;font-size:.9em}
.error-links{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.error-item{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--line);border-radius:14px}
.error-link{font-weight:700;text-decoration:none}
.error-link:hover,.error-link:focus-visible{text-decoration:underline}
.error-detail{color:var(--muted);font-size:.93rem;line-height:1.5}
@media (max-width:760px){.error-page{padding:48px 0 64px}}