@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
.language-control-mobile{position:relative;display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:white;place-items:center;font-size:20px;line-height:1}.language-control-mobile select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.language-control-mobile:focus-within{outline:3px solid #8958ff40;outline-offset:2px}html[data-theme="dark"] .language-control-mobile{background:#14232e}@media(max-width:1024px){.language-control-desktop{display:none}.language-control-mobile{display:grid}}@media(max-width:480px){header{padding-inline:16px}.header-actions{gap:8px}}
.hero-description-line{display:block;margin-top:4px}
.language-control{display:flex;align-items:center}.language-control>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.language-control select{width:60px;max-width:96px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);padding:9px 0;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.language-control select:focus-visible{outline:3px solid #8958ff40;outline-offset:2px}html[dir="rtl"] .language-control select{padding-right:10px;padding-left:28px}@media(max-width:1024px){.language-control{padding:6px 4px}.language-control select{width:96px;max-width:96px;padding:11px 12px}html[dir="rtl"] .header-menu{right:auto;left:24px}}
footer a{margin-left:18px;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}footer a:hover{text-decoration:underline}footer a:focus-visible{outline:3px solid #8958ff40;outline-offset:3px;border-radius:3px}@media(max-width:760px){footer a{margin-left:0}footer a:first-of-type{margin-left:auto}}
.header-menu{display:flex;align-items:center;gap:18px}.menu-toggle{display:none;width:42px;height:42px;padding:10px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);cursor:pointer}.menu-toggle i{display:block;width:20px;height:2px;margin:4px auto;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.menu-toggle:focus-visible{outline:3px solid #8958ff40;outline-offset:2px}html[data-theme="dark"] .menu-toggle{background:#14232e;color:#edf7ff}@media(max-width:1024px){header{position:relative;z-index:20}.menu-toggle{display:block}.header-menu{position:absolute;top:64px;right:24px;display:none;width:min(320px,calc(100vw - 48px));padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 18px 50px #1019232b;align-items:stretch;flex-direction:column;gap:4px}.header-menu.is-open{display:flex}.header-menu>a{display:block;padding:12px 14px;border-radius:10px}.header-menu>a:hover{background:#8958ff12}}
.catalog-filters{display:flex;flex-wrap:wrap;gap:9px;margin:-8px 0 22px}.catalog-filters[hidden]{display:none}.catalog-filter{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;background:white;color:var(--ink);padding:9px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .16s,border-color .16s,background-color .16s}.catalog-filter:hover{border-color:#b8c4cb;transform:translateY(-1px)}.catalog-filter:focus-visible{outline:3px solid #8958ff40;outline-offset:2px}.catalog-filter span{display:grid;min-width:22px;height:22px;padding:0 6px;place-items:center;border-radius:999px;background:#eef2f4;color:#66727d;font-size:11px}.catalog-filter.is-active{background:var(--ink);border-color:var(--ink);color:white}.catalog-filter.is-active span{background:#ffffff2b;color:white}html[data-theme="dark"] .catalog-filter{background:#111f29;border-color:#2a3c49;color:#edf7ff}html[data-theme="dark"] .catalog-filter span{background:#263844;color:#c4d2dd}html[data-theme="dark"] .catalog-filter.is-active{background:#edf7ff;border-color:#edf7ff;color:#0b151d}html[data-theme="dark"] .catalog-filter.is-active span{background:#dfe8ee;color:#0b151d}@media(max-width:760px){.catalog-filters{margin-top:22px}}
.theme-logo{height:clamp(150px,30vw,293px);object-fit:contain}.theme-toggle:focus-visible{outline:3px solid #8958ff;outline-offset:2px}
html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark;--ink:#edf7ff;--muted:#9aabb9;--line:#283946;--paper:#0b151d}.header-actions{display:flex;align-items:center;gap:18px}.header-actions a{color:var(--ink);font-weight:700;text-decoration:none}.theme-toggle{position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#101923;cursor:pointer;font-size:20px}.theme-toggle span{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s,transform .2s}.theme-toggle .moon{opacity:0;transform:rotate(-30deg)}html[data-theme="dark"] .theme-toggle{background:#14232e;color:#edf7ff}html[data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(30deg)}html[data-theme="dark"] .theme-toggle .moon{opacity:1;transform:none}html .theme-logo-dark{display:none}html[data-theme="dark"] .theme-logo-light{display:none}html[data-theme="dark"] .theme-logo-dark{display:block}html[data-theme="dark"] body{background:#0b151d;color:#edf7ff}html[data-theme="dark"] header{background:#0b151d}html[data-theme="dark"] .hero{background:radial-gradient(circle at 48% 32%,#123c38 0,transparent 31%),radial-gradient(circle at 67% 24%,#251d47 0,transparent 27%),#0b151d}html[data-theme="dark"] .box-card,html[data-theme="dark"] .platforms label{background:#111f29;border-color:#2a3c49}html[data-theme="dark"] .box-card:hover{box-shadow:0 14px 34px #0008}html[data-theme="dark"] .build-note{background:#102a26;border-color:#245b4c}html[data-theme="dark"] .build-note p{color:#9aabb9}html[data-theme="dark"] .build-bar{background:linear-gradient(115deg,#12352d,#122d3b 55%,#251d42)}html[data-theme="dark"] .primary,html[data-theme="dark"] .build-bar button,html[data-theme="dark"] .close-build{background:#edf7ff;color:#0b151d}html[data-theme="dark"] .overlay-card{background:#111f29;color:#edf7ff}html[data-theme="dark"] .build-steps li.active{color:#edf7ff}html[data-theme="dark"] .progress{background:#263844}html[data-theme="dark"] .spinner{border-color:#2b3b46;border-top-color:#8958ff}html[data-theme="dark"] footer{background:#0b151d}.theme-logo{border-radius:10px}body,.box-card,.platforms label,.overlay-card,header,footer{transition:background-color .2s,color .2s,border-color .2s}@media(max-width:760px){.header-actions>a:not(.signin){display:none}}
.build-percent{display:block;margin-top:10px;color:#8958ff;font-size:22px}#build-progress-fill{animation:none;transform:none;transition:width .35s ease;width:0}
.header-actions .signin{background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;box-shadow:0 8px 20px #10192326}html[data-theme="dark"] .header-actions .signin{background:#edf7ff;color:#0b151d}
/* Icon-only nav link (GitHub). The ↗ badge in the top-right corner marks it as
   opening in a new tab; the text label only comes back inside the mobile nav,
   where a bare icon would sit unlabelled in a list of worded links. */
.icon-link{position:relative;display:inline-flex;align-items:center;gap:10px;transition:color .2s}.icon-link svg{display:block}.icon-link-label{display:none}.icon-link-arrow{position:absolute;top:-5px;right:-9px;font-size:12px;font-weight:800;line-height:1;color:var(--muted);transition:transform .2s,color .2s}.icon-link:hover,.icon-link:focus-visible{color:var(--violet)}.icon-link:hover .icon-link-arrow{color:var(--violet);transform:translate(1px,-1px)}
html[dir="rtl"] .icon-link-arrow{right:auto;left:-9px}
@media(max-width:1024px){.header-menu>a.icon-link{display:flex;gap:12px}.icon-link-label{display:inline}.icon-link-arrow{position:static;margin-left:auto}html[dir="rtl"] .icon-link-arrow{margin:0 auto 0 0}}
/* Signed-in chip and the profile dropdown it opens. Same anatomy as the app
   listing's chip (admin/ui/admin.css): one pill holding the avatar + name as
   the menu trigger and sign-out as its own icon button; the remaining account
   action ("About Ludora") lives in the panel below. */
.user-chip{position:relative}.user-chip[hidden]{display:none}
.user-chip-bar{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;border:1.5px solid var(--violet);border-radius:999px;background:#8958ff14}
.user-chip-trigger{display:flex;align-items:center;gap:8px;min-width:0;max-width:190px;padding:0;border:0;background:none;color:var(--violet);font:inherit;font-weight:800;cursor:pointer}
.user-chip-avatar{flex-shrink:0;width:28px;height:28px;border-radius:999px;object-fit:cover}.user-chip-avatar[hidden]{display:none}
.user-chip-initial{display:flex;align-items:center;justify-content:center;background:var(--violet);color:#fff;font-size:13px;line-height:1}
.user-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.user-chip-signout{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.user-chip-signout:hover{background:#d92d201a;color:#b42318}
.user-chip-trigger:focus-visible,.user-chip-signout:focus-visible{outline:3px solid #8958ff40;outline-offset:3px}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;display:flex;flex-direction:column;gap:8px;min-width:230px;max-width:min(300px,calc(100vw - 48px));padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 18px 50px #1019232b}.user-menu[hidden]{display:none}.user-menu-eyebrow{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800;color:var(--muted)}.user-menu-email{overflow-wrap:anywhere;font-size:13px;font-weight:600;user-select:text}.user-menu-action{width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-weight:700;font-size:13px;padding:9px 12px;cursor:pointer}.user-menu-action:hover{background:#8958ff12}.user-menu-action:focus-visible{outline:3px solid #8958ff40;outline-offset:2px}
html[data-theme="dark"] .user-menu{background:#111f29;border-color:#2a3c49}html[data-theme="dark"] .user-menu-action{border-color:#2a3c49;color:#edf7ff}html[data-theme="dark"] .user-chip-bar{background:#8958ff26}html[data-theme="dark"] .user-chip-signout{color:#9fb2bf}html[data-theme="dark"] .user-chip-signout:hover{background:#f9737326;color:#ff9b93}
/* Auth stays in the header bar at every width (it is not part of the collapsing
   nav), so the panel keeps hanging off the chip's right edge — it just gets
   tighter on small screens where the bar has to fit the toggles too. */
@media(max-width:760px){.header-actions .signin{padding:9px 12px;font-size:13px}.user-chip-name{display:none}.user-chip-trigger{max-width:none}}
.build-note{display:flex;gap:28px;align-items:baseline;margin-top:18px;padding:18px 20px;border:1px solid #bcebd8;border-radius:12px;background:#edfff7}.build-note strong{white-space:nowrap}.build-note p{margin:0;color:#657080;font-size:13px;line-height:1.6}.build-steps{list-style:none;margin:28px 0;padding:0;text-align:left}.build-steps li{position:relative;padding:10px 10px 10px 34px;color:#929aa4;font-size:14px;border-left:1px solid #dde3e7}.build-steps li:before{content:'';position:absolute;left:-6px;top:15px;width:10px;height:10px;border-radius:50%;background:#d7dde1}.build-steps li.complete{color:#52606d}.build-steps li.complete:before{content:'✓';display:grid;place-items:center;width:18px;height:18px;left:-10px;top:11px;color:white;background:#25bd78;font-size:11px}.build-steps li.active{color:#101923;font-weight:800}.build-steps li.active:before{background:#8958ff;box-shadow:0 0 0 5px #8958ff22}.build-steps li.failed{color:#b42318;font-weight:800}.build-steps li.failed:before{content:'!';display:grid;place-items:center;width:18px;height:18px;left:-10px;top:11px;color:white;background:#d92d20;font-size:12px}.close-build{border:0;border-radius:10px;background:#101923;color:white;font-weight:800;padding:12px 22px;margin-top:8px}
:root{--ink:#101923;--muted:#657080;--line:#dce4e8;--mint:#3df59a;--cyan:#26c7ef;--violet:#8958ff;--paper:#f7faf9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif}header{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px;border-bottom:1px solid var(--line)}header>a:last-child{color:var(--ink);font-weight:700;text-decoration:none}.brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-weight:800;font-size:21px}.brand img{width:35px}.hero{text-align:center;padding:82px 24px 92px;background:radial-gradient(circle at 50% 35%,#dffdf1 0,transparent 28%),radial-gradient(circle at 65% 25%,#eae0ff 0,transparent 25%)}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:800;color:#596576}.wordmark{display:block;width:min(380px,45vw);margin:24px auto 18px}.hero p{max-width:660px;margin:0 auto 30px;color:var(--muted);font-size:18px;line-height:1.7}.primary,.build-bar button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--ink);color:white;text-decoration:none;font-weight:800;padding:16px 24px;box-shadow:0 12px 30px #10192326}.builder{max-width:1180px;margin:auto;padding:90px 24px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.section-heading>div{display:flex;align-items:center;gap:14px}.section-heading p{max-width:430px;color:var(--muted);margin:0}.step{color:var(--violet);font-size:12px;font-weight:800;letter-spacing:.12em}h2{font-size:30px;margin:0}.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.box-card{position:relative;display:block;border:1px solid var(--line);border-radius:16px;background:white;padding:20px;cursor:pointer;transition:.2s}.box-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px #1723350d}.box-card:has(input:checked){border-color:var(--violet);box-shadow:0 0 0 2px #8958ff22}.box-card input{position:absolute;opacity:0}.box-head{display:flex;justify-content:space-between;gap:10px}.box-card h3{margin:0 0 7px;font-size:17px}.box-card p{margin:0;color:var(--muted);font-size:13px}.check{width:22px;height:22px;border:1px solid #bdc7ce;border-radius:6px;display:grid;place-items:center;color:transparent}.box-card input:checked~.box-head .check{background:var(--violet);border-color:var(--violet);color:#fff}.tag{display:inline-block;margin-top:20px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:#6d7784}.loading-card{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}.platform-section{margin-top:65px}.platform-section h2{margin:8px 0 22px}.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.platforms label{cursor:pointer}.platforms input{position:absolute;opacity:0}.platforms label>span,.platforms label>b{display:block}.platforms label{background:white;border:1px solid var(--line);padding:20px;border-radius:14px}.platforms label:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 2px #26c7ef25}.platforms span{font-size:26px;margin-bottom:12px}.build-bar{margin-top:50px;padding:24px 28px;border-radius:18px;background:linear-gradient(115deg,#e1fff2,#e9f8ff 55%,#eee7ff);display:flex;align-items:center;justify-content:space-between}.build-bar strong,.build-bar small{display:block}.build-bar small{color:var(--muted);margin-top:5px}.build-bar button{font-size:16px;gap:18px}.build-bar button:disabled{opacity:.4;cursor:not-allowed}.error{color:#b42318;text-align:center;white-space:pre-line}.build-overlay{position:fixed;z-index:10;inset:0;background:#0b111be8;backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}.build-overlay[hidden]{display:none}.overlay-card{background:white;border-radius:22px;max-width:530px;padding:45px;text-align:center}.overlay-card h2{margin:12px 0}.overlay-card>p:not(.eyebrow){color:var(--muted);line-height:1.6}.spinner{width:56px;height:56px;border-radius:50%;border:5px solid #e4e8eb;border-top-color:var(--violet);margin:0 auto 28px;animation:spin .8s linear infinite}.progress{height:5px;background:#e7ebed;border-radius:10px;overflow:hidden;margin-top:28px}.progress i{display:block;width:35%;height:100%;background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));animation:progress 1.4s ease-in-out infinite}footer{max-width:1180px;margin:auto;border-top:1px solid var(--line);padding:34px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-weight:800}footer img{width:28px}footer p{margin-left:auto;color:var(--muted);font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{from{transform:translateX(-110%)}to{transform:translateX(300%)}}@media(max-width:760px){.catalog{grid-template-columns:1fr}.section-heading{display:block}.section-heading p{margin-top:14px}.platforms{grid-template-columns:1fr}.build-bar{align-items:stretch;gap:20px;flex-direction:column}.hero{padding-top:55px}.builder{padding-top:60px}footer p{display:none}}

.wordmark{margin-top:0}

.hero-eyebrow{max-width:980px;min-height:.2em;margin:0 auto;color:var(--ink);font-size:clamp(17px,2.2vw,25px);font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:none;text-wrap:balance}
.hero-word-slot{display:inline-flex;justify-content:center;margin-inline:.28em;color:var(--violet);font-weight:800;text-transform:uppercase;vertical-align:baseline}
.hero-word{display:inline-block;will-change:opacity,transform}
.hero-word.is-leaving{animation:hero-word-out .18s ease-in both}
.hero-word.is-entering{animation:hero-word-in .38s cubic-bezier(.2,.8,.2,1) both}
.hero-eyebrow-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes hero-word-out{to{opacity:0;transform:translateY(-.45em) scale(.96)}}
@keyframes hero-word-in{from{opacity:0;transform:translateY(.55em) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:560px){.hero-eyebrow{min-height:.2em;font-size:clamp(16px,4.8vw,20px);line-height:1.55;letter-spacing:.055em}}
@media(prefers-reduced-motion:reduce){.hero-word{animation:none!important}}

.footer-brand,.footer-socials,.footer-legal{display:flex;align-items:center}.footer-brand{gap:9px}.footer-socials{gap:7px;margin-left:9px}.footer-socials a,.about-socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:#fff;text-decoration:none;transition:transform .18s ease,color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.footer-socials a:hover,.about-socials a:hover{color:var(--ink);border-color:#8958ff66;background:#f4efff;box-shadow:0 8px 20px #17233512;text-decoration:none;transform:translateY(-2px)}.footer-socials a:focus-visible,.about-socials a:focus-visible{outline:3px solid #8958ff40;outline-offset:3px}.footer-socials svg,.about-socials svg{width:17px;height:17px;fill:currentColor}.footer-site{display:inline-flex;align-items:center;gap:7px}.footer-site svg{width:16px;height:16px;fill:currentColor}.footer-legal{gap:0}.footer-legal a:first-child{margin-left:18px}html[data-theme="dark"] .footer-socials a,html[data-theme="dark"] .about-socials a{background:#111f29}html[data-theme="dark"] .footer-socials a:hover,html[data-theme="dark"] .about-socials a:hover{background:#241d3d;border-color:#8958ffaa;color:#edf7ff}@media(max-width:760px){footer{gap:14px}.footer-socials{margin-left:auto}.footer-socials a,.footer-socials a:first-of-type{margin-left:0}.footer-legal{width:100%;justify-content:flex-end}.footer-legal a:first-child{margin-left:0}}

/* Build vs apps toggle — driven by data-build on <html> (LUDORA_BUILD_ENABLED). */
html[data-build="off"] .build-only{display:none!important}
html[data-build="on"] .apps-only{display:none!important}
html[data-build="off"] .hero{padding-bottom:30px}

/* Apps showcase (shown when the build UI is hidden). */
.apps-showcase{max-width:1180px;margin:auto;padding:20px 24px 40px}
html[data-build="off"] .hero{padding-bottom:56px}
.apps-intro{max-width:560px;color:var(--muted);margin:0 0 28px;font-size:16px;line-height:1.6}
@media(min-width:1025px){.apps-intro{max-width:none;font-size:18px}}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.app-box{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.app-box:hover{transform:translateY(-2px);box-shadow:0 14px 30px #1723350d}
.app-box[hidden]{display:none}
.app-box-cat{display:inline-block;text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:var(--violet);font-weight:800}
.app-box h3{margin:8px 0 7px;font-size:18px}
.app-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.apps-cta{display:flex;width:max-content;margin:34px auto 0}
html[data-theme="dark"] .app-box{background:#111f29;border-color:#2a3c49}
html[data-theme="dark"] .app-box:hover{box-shadow:0 14px 34px #0008}

/* Legal pages (terms.html, privacy.html). Same shell as the landing page: the
   .hero band (gradients and dark theme come for free), the 1180px container with
   24px gutters used by .builder / .apps-showcase, the violet .step numbering of
   .section-heading, and the bordered card look of .box-card for the index. */
.hero-compact{padding:54px 24px 58px}
.hero-compact h1{max-width:860px;margin:14px auto 12px;font-size:clamp(29px,4.4vw,42px);line-height:1.16}
.hero-compact .legal-meta{max-width:680px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.7}
.legal-hero-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px}
.legal-hero-links a{padding-bottom:2px;border-bottom:1.5px solid #8958ff66;color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}
.legal-hero-links a:hover{border-bottom-color:var(--violet)}
.legal-nav{display:flex;align-items:center;gap:18px}
.legal-nav a{font-size:14px}
.legal-nav a:hover{text-decoration:underline}
.legal{display:grid;grid-template-columns:264px minmax(0,1fr);gap:54px;max-width:1180px;margin:auto;padding:72px 24px 30px}
.legal-toc{position:sticky;top:28px;align-self:start;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:white}
.legal-toc strong{display:block;margin-bottom:13px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:#6d7784}
.legal-toc ol{counter-reset:legal-item;margin:0;padding:0;list-style:none}
.legal-toc li{counter-increment:legal-item;display:flex;gap:10px;margin-bottom:9px}
.legal-toc li:before{content:counter(legal-item,decimal-leading-zero);padding-top:3px;color:var(--violet);font-size:11px;font-weight:800;letter-spacing:.1em}
.legal-toc a{color:var(--ink);font-size:14px;font-weight:700;line-height:1.5;text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal-body{max-width:780px}
.legal-body section{margin-top:42px;padding-top:42px;border-top:1px solid var(--line);scroll-margin-top:26px}
.legal-body section:first-child{margin-top:0;padding-top:0;border-top:0}
.legal .section-heading{margin-bottom:18px}
.legal .section-heading h2{font-size:22px}
.legal-body h3{margin:26px 0 8px;font-size:16px}
.legal-body p,.legal-body li{color:var(--muted);font-size:15px;line-height:1.75}
.legal-body strong,.legal-body a{color:var(--ink)}
.legal-body a{text-decoration:underline;text-underline-offset:2px}
.legal-body a:focus-visible,.legal-toc a:focus-visible,.legal-hero-links a:focus-visible{outline:3px solid #8958ff40;outline-offset:3px;border-radius:3px}
.legal-body ul{margin:0 0 14px;padding-left:22px}
.legal-body li{margin-bottom:8px}
.legal-body code{padding:2px 6px;border-radius:6px;background:#eef2f4;color:var(--ink);font-size:13px;word-break:break-word}
html[data-theme="dark"] .legal-toc{background:#111f29;border-color:#2a3c49}
html[data-theme="dark"] .legal-body code{background:#1b2a35}
@media(max-width:1024px){.legal{grid-template-columns:1fr;gap:32px;padding-top:46px}.legal-toc{position:static}}
@media(max-width:760px){.legal-nav{display:none}.hero-compact{padding:38px 24px 44px}.legal{padding-top:38px}.legal .section-heading{margin-bottom:14px}}

/* "About Ludora" dialog (index.html), opened from the profile dropdown. Same
   scrim and card treatment as the build overlay, so the site keeps one modal
   look. Its social buttons reuse the footer's rules — see .about-socials in the
   selector lists above — and only the layout is restated here. */
.about-overlay{position:fixed;z-index:40;inset:0;background:#0b111be8;backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}
.about-overlay[hidden]{display:none}
.about-card{width:min(430px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:32px;border-radius:22px;background:#fff;text-align:center}
.about-mark{display:block;width:min(230px,100%);margin:0 auto 16px}
.about-card h2{margin:0 0 20px;font-size:24px}
.about-rows{margin:0 0 20px;padding:0;border:1px solid var(--line);border-radius:12px;text-align:left}
.about-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 13px}
.about-row+.about-row{border-top:1px solid var(--line)}
.about-row dt{color:var(--muted);font-size:13px;font-weight:700}
/* Selectable and monospaced: these values get pasted into bug reports. */
.about-row dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;overflow-wrap:anywhere;text-align:right;user-select:all}
.about-socials-label{margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800;color:var(--muted)}
.about-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 6px}
html[data-theme="dark"] .about-card{background:#111f29;color:#edf7ff}
html[data-theme="dark"] .about-rows,html[data-theme="dark"] .about-row+.about-row{border-color:#2a3c49}

/* Optional app screenshot (screenshots/<app-id>-demo.png), added by app.js on
   the showcase cards and the builder's catalog cards. A centred thumbnail
   inside the card's own padding: `contain` so the whole capture shows rather
   than a crop of it, on a neutral plate that absorbs whatever aspect ratio the
   PNG has. Cards for apps without a screenshot keep their text-only layout.
   The thumbnail is a button — it opens the full capture in the lightbox. */
.card-shot{display:block;width:100%;margin:0 0 16px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#eef2f4;cursor:zoom-in}
.card-shot img,.card-shot video{display:block;width:100%;aspect-ratio:16/9;margin:0 auto;object-fit:contain;object-position:center;transition:transform .25s ease}
.card-shot:hover img,.card-shot:hover video{transform:scale(1.03)}
.card-shot-video{position:relative}
.card-shot-play{position:absolute;z-index:1;top:50%;left:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#070d14b3;color:#fff;font-size:20px;line-height:1;padding-left:4px;box-sizing:border-box;pointer-events:none}
.card-shot:focus-visible{outline:3px solid #8958ff40;outline-offset:2px}
html[data-theme="dark"] .card-shot{background:#16242f;border-color:#2a3c49}
@media(prefers-reduced-motion:reduce){.card-shot img,.card-shot video,.card-shot:hover img,.card-shot:hover video{transition:none;transform:none}}

/* "Open" on a card, for the apps a visitor can open right away (see the
   ludora-default-apps meta). Same pill as the one ending a card's title row on
   apps.ludora.studio — .choice-open in src/styles.css, whose mint is fixed
   across both themes — as a link, because from here it leaves the site. */
.app-box-title,.box-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.app-box-title h3,.box-title h3{margin:0}
.box-title{margin:0 0 7px}
.app-open{display:inline-flex;align-items:center;flex-shrink:0;margin:0;padding:5px 12px;border:1px solid #0f1513;border-radius:999px;background:#b9eadc;color:#0f1513;font-size:12px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .18s,color .18s,transform .1s}
.app-open:hover{background:#0f1513;color:#b9eadc;text-decoration:none}
.app-open:active{transform:scale(.96)}
.app-open:focus-visible{outline:3px solid #8958ff40;outline-offset:3px}
html[data-theme="dark"] .app-open{color:#0f1513}
html[data-theme="dark"] .app-open:hover{color:#b9eadc;border-color:#b9eadc}
@media(prefers-reduced-motion:reduce){.app-open{transition:none}.app-open:active{transform:none}}

/* Screenshot lightbox. Its scrim is opaque rather than the translucent blur the
   other overlays use: the capture is the content here, and a page showing
   through behind it would only compete with it. Dark in both themes, so the
   close button has to override .close-build's light-theme dark-on-dark. */
.shot-overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:24px;background:#070d14;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;overflow:auto}
.shot-overlay[hidden]{display:none}
.shot-card [hidden]{display:none}
.shot-card video.shot-image{width:min(1180px,92vw)}
.shot-card{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.shot-image{display:block;max-width:min(1180px,92vw);max-height:calc(100dvh - 200px);border:1px solid #1e2c38;border-radius:14px;background:#0b151d;object-fit:contain}
.shot-controls{display:flex;align-items:center;gap:18px;direction:ltr}
.shot-controls[hidden]{display:none}
.shot-controls button{min-width:44px;min-height:44px}
.shot-caption{margin:0;color:#edf7ff;font-size:15px;font-weight:800}
.shot-overlay .close-build{margin:0;background:#edf7ff;color:#0b151d}
.shot-overlay .close-build:focus-visible{outline:3px solid #8958ff;outline-offset:3px}
@media(max-width:760px){.shot-overlay{padding:16px}}

.header-auth{display:flex;align-items:center;gap:8px}
.header-auth[hidden]{display:none}
.header-auth .signin{white-space:nowrap;text-align:center}
.header-actions .signin-secondary,html[data-theme="dark"] .header-actions .signin-secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:760px){.header-auth{flex-direction:column;align-items:stretch;gap:4px}.header-actions .header-auth .signin{padding:6px 10px}}
@media(max-width:480px){.header-actions{gap:8px}header{padding-inline:12px}.header-actions .theme-toggle,.header-actions .language-control-mobile,.header-actions .menu-toggle{flex-shrink:0;width:34px}}