*{box-sizing:border-box}
:root{--paper:#f3f6fc;--text:#202e43;--muted:#586475;--accent:#145cff;--soft:#edf2ff;--border:#dbe3ef;--card:#fffdfb;--glow:#145cff18}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 12%,var(--glow),transparent 30%),linear-gradient(135deg,var(--paper),#fff);color:var(--text);font-family:system-ui,-apple-system,sans-serif}
body.dowebo{--paper:#f3f6fc;--text:#202e43;--muted:#586475;--accent:#145cff;--soft:#edf2ff;--border:#dbe3ef;--card:#fffdfb;--glow:#145cff18}
body.playnest{--paper:#f7f1ec;--text:#25323f;--muted:#6d5e55;--accent:#e98770;--soft:#fff1e9;--border:#ecd8cb;--card:#fffdf9;--glow:#e9877024}
body.fairly{--paper:#f4f0fa;--text:#352d49;--muted:#62586f;--accent:#514477;--soft:#eee8f5;--border:#d7cce7;--card:#fffdfb;--glow:#5144771e}
body.pulse{--paper:#eef4ff;--text:#163564;--muted:#52647c;--accent:#2457a6;--soft:#e4efff;--border:#cdddf5;--card:#fffdfb;--glow:#2457a61c}
body.vault,body.dav{--paper:#eef3f6;--text:#263747;--muted:#5c6b75;--accent:#3b5366;--soft:#e3ebef;--border:#cad8df;--card:#fffdfb;--glow:#3b53661e}
body.mayday{--paper:#f4f6ef;--text:#25372f;--muted:#536458;--accent:#37654f;--soft:#e9efe8;--border:#cbd9cd;--card:#fffdfb;--glow:#37654f20}
body.tempo{--paper:#f5efe3;--text:#3f3528;--muted:#6b5d48;--accent:#325e50;--soft:#ede6d8;--border:#ddd2bd;--card:#fffdf8;--glow:#325e501f}
main{width:min(580px,100%);margin:0 auto;padding:48px 20px}
.brand{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;color:var(--text);margin-bottom:26px}
.brand strong{font-size:27px;font-weight:820;letter-spacing:-.04em}
.brand span{font-size:12px;font-weight:650;color:var(--muted);text-align:right}
.card{background:color-mix(in srgb,var(--card) 92%,white);border:1px solid var(--border);border-radius:24px;padding:38px;box-shadow:0 24px 70px color-mix(in srgb,var(--text) 10%,transparent)}
.eyebrow{font-size:12px;color:var(--accent);font-weight:780;text-transform:uppercase;letter-spacing:1px;margin:0 0 16px}
h1{font-size:38px;line-height:1.12;letter-spacing:-1.5px;margin:0 0 18px}
.intro{color:var(--muted);line-height:1.65;margin-bottom:26px}
form{display:grid;gap:12px}
label{font-size:14px;font-weight:680;margin-top:5px}
input{width:100%;min-width:0;border:1px solid color-mix(in srgb,var(--border) 80%,#9aa5b1);border-radius:10px;padding:14px;font:inherit;color:inherit;background:white}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:3px}
.help{text-align:right;font-size:13px;margin:0 0 12px}
button{border:1px solid var(--accent);border-radius:11px;background:var(--accent);color:white;padding:15px;font:inherit;font-weight:700;cursor:pointer}
button:hover{filter:brightness(.95)}
button span{margin-left:12px}
.note{background:var(--soft);border:1px solid color-mix(in srgb,var(--border) 72%,white);padding:15px;border-radius:11px;color:var(--muted);font-size:13px;line-height:1.6;margin:23px 0}
.signup{font-size:14px;line-height:1.6;margin:0}
.error{background:#fff1f1;border:1px solid #edbebe;color:#9f2727;padding:14px;border-radius:10px;line-height:1.5}
.notice{background:var(--soft);padding:15px;border-radius:11px}
.services{display:grid;gap:15px;margin-bottom:24px}
.services a{display:grid;gap:8px;padding:20px;border:1px solid var(--border);border-radius:14px;text-decoration:none;background:var(--soft)}
.services strong{display:flex;justify-content:space-between}
.services a>span{color:var(--muted);font-size:13px}
.secondary{background:white;color:var(--accent)}
footer{display:grid;gap:15px;text-align:center;font-size:12px;color:var(--muted);margin-top:25px}
@media(max-width:480px){main{padding:28px 16px}.card{padding:25px 22px}h1{font-size:31px}.brand strong{font-size:23px}.brand span{font-size:11px}}

.session-settings{margin:2rem 0;padding-top:1.5rem;border-top:1px solid #d9dfdc}.session-settings input[type=range]{width:100%;padding:0;accent-color:#23665d}.duration-choices{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem}.session-settings output{font-weight:700}.session-settings #session-duration-help{font-size:.9rem;line-height:1.5}

/* Newscloud and its hub share the validated newscloud SSO client.
   "Atelier" direction of the public newscloud.fr pages (www public/corporate/public.css):
   paper ground, sage green, ink and hairlines, no gradient. */
body.newscloud{--paper:#f6f8f7;--text:#222b32;--muted:#4f5d63;--accent:#316b57;--soft:#e7f0e9;--border:#e2e7e5;--card:#fff;--ink-strong:#1f2a2f;--green-text:#25553e;--green-hover:#245440;--field:#cfd8d4;--chip:#eef2ef;--tint:#eef5f0;--soft-line:#d3e3d8;color-scheme:light;background:var(--paper);font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.newscloud main{width:min(560px,100%);padding-top:56px}
.newscloud a{color:var(--green-text)}
.newscloud a:hover{color:var(--green-hover)}
.newscloud .brand{flex-wrap:wrap;gap:8px 16px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.newscloud .brand,.newscloud .brand:hover{color:var(--text)}
.newscloud .newscloud-wordmark{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.newscloud .nc-mark{display:inline-grid;place-items:center;width:30px;height:30px;padding-bottom:6px;border-radius:8px;background:#242a31;color:#f8f7f4;font:italic 31px/1 Georgia,serif;letter-spacing:0}
.newscloud .brand>span{font-size:13px;font-weight:500}
.newscloud .card{background:var(--card);border-color:var(--border);border-radius:16px;padding:32px;box-shadow:none}
.newscloud h1,.newscloud h2{color:var(--ink-strong);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.newscloud h1{margin:0 0 14px;font-size:clamp(26px,6vw,32px)}
.newscloud .session-settings h2{margin:0 0 8px;font-size:19px}
.newscloud .eyebrow{margin:0 0 12px;font-size:11px;font-weight:650;letter-spacing:1.4px;line-height:1.5;color:#56645d}
.newscloud .intro{margin:0 0 24px;line-height:1.65}
.newscloud label{font-size:13px;font-weight:600;margin-top:4px}
.newscloud input:not([type=range]){min-height:44px;padding:9px 12px;border-color:var(--field);border-radius:9px;background:#fff;color:var(--text)}
.newscloud input:focus{border-color:var(--accent)}
.newscloud button{min-height:48px;padding:0 22px;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:10px;font-size:15px;font-weight:600;transition:background .15s,border-color .15s}
.newscloud button:hover{background:var(--green-hover);border-color:var(--green-hover);filter:none}
.newscloud .secondary,.newscloud .button-link{background:#fff;border-color:var(--field);color:var(--text);border-radius:10px;font-weight:600}
.newscloud .secondary:hover,.newscloud .button-link:hover{background:var(--chip);border-color:#b9c6c0;color:var(--text)}
.newscloud :is(a,button,input,summary):focus-visible{outline:3px solid #619782;outline-offset:3px}
.newscloud .note{background:var(--tint);border-color:var(--soft-line);border-radius:10px;color:#3d4a44}
.newscloud .notice{background:var(--soft);border:1px solid var(--soft-line);border-radius:10px;color:#1d3a2e}
.newscloud .error{background:#fbefec;border-color:#efd0c8;color:#7a3124;font-size:14px}
.newscloud .services{gap:10px}
.newscloud .services a{padding:16px 18px;border-radius:12px;background:#fff;color:var(--text)}
.newscloud .services a:hover{background:var(--tint);border-color:var(--soft-line);color:var(--text)}
.newscloud .services strong{color:var(--ink-strong)}
@media(max-width:480px){.newscloud main{padding-top:24px}.newscloud .card{padding:24px 20px}.newscloud .brand>span{text-align:left}.newscloud .newscloud-wordmark{font-size:20px}}

/* Virtana, from virtana.fr (virtana public/virtana/app.css): warm paper, plum buttons, gold accents,
   Bricolage Grotesque for the wordmark and headline (OFL, public/fonts). */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:500 800;font-display:swap}
body.virtana{--paper:#f8f6f1;--text:#2b2133;--muted:#625a69;--accent:#392d46;--soft:#efe9f3;--border:#e3dce4;--card:#fffefa;--gold:#eab24c;--gold-ink:#8a5a00;--field:#968b9f;--display:"Bricolage Grotesque",Inter,system-ui,sans-serif;color-scheme:light;background:var(--paper);font:15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.virtana a{color:var(--gold-ink)}
.virtana .brand{flex-wrap:wrap;gap:8px 16px}
.virtana .brand,.virtana .brand:hover{color:var(--text);text-decoration:none}
.virtana .virtana-wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-1.2px;line-height:1}
.virtana .virtana-wordmark svg{flex:none;width:36px;height:36px}
.virtana .virtana-name,.virtana .logo-dot{font-size:inherit;font-weight:inherit;color:inherit;text-align:inherit}
.virtana .logo-dot{color:var(--gold-ink)}
.virtana .brand>span{font-size:13px;font-weight:500}
.virtana .card{background:var(--card);border-radius:20px;padding:36px;box-shadow:0 18px 50px #3025390f}
.virtana h1,.virtana h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.virtana h1{margin:0 0 16px;font-size:clamp(30px,7vw,40px)}
.virtana .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:1.6px;color:var(--muted)}
.virtana .eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.virtana label{font-size:14px;font-weight:500}
.virtana input:not([type=range]){min-height:46px;padding:10px 14px;border-color:var(--field);border-radius:10px;background:#fff;color:var(--text)}
.virtana input:focus{border-color:var(--accent)}
.virtana button{min-height:52px;padding:0 26px;border-radius:12px;color:#f8f6f1;font-weight:600;transition:background .2s,border-color .2s}
.virtana button:hover{background:var(--text);border-color:var(--text);filter:none}
.virtana button span{color:var(--gold)}
.virtana .secondary{background:#fff;border-color:var(--border);color:var(--text)}
.virtana .secondary:hover{background:var(--soft);border-color:var(--text)}
.virtana :is(a,button,input,summary):focus-visible{outline:3px solid #b17c1e;outline-offset:3px}
.virtana .note{background:var(--soft);border-color:var(--border);border-radius:10px}
@media(max-width:480px){.virtana .card{padding:25px 22px}.virtana .brand>span{text-align:left}.virtana .virtana-wordmark{font-size:24px}.virtana .virtana-wordmark svg{width:32px;height:32px}}

/* Two-factor authentication. The hidden attribute must win over form{display:grid}. */
[hidden]{display:none!important}
.button-link{display:inline-block;margin-top:.5rem;padding:12px 16px;border:1px solid var(--accent);border-radius:11px;font-weight:700;text-decoration:none}
.security-status{font-size:15px;margin:0 0 18px}
.security-block{margin:26px 0;padding-top:20px;border-top:1px solid var(--border)}
.security-block h2,.recovery-codes h2{font-size:19px;margin:0 0 8px}
.security-block p{color:var(--muted);line-height:1.6;margin:0 0 14px}
.passkeys{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.passkeys li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--soft)}
.passkeys li>span{display:grid;gap:4px;min-width:0}
.passkeys small{color:var(--muted);font-size:12px}
.passkeys form{display:block}
.passkeys button{padding:9px 12px;min-height:0}
.passkey-status{font-size:13px;color:var(--muted);margin:0}
.recovery-codes{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:18px;margin:0 0 22px}
.recovery-codes p{line-height:1.6;margin:0 0 12px}
.codes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.codes code,.secret code{font:600 15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.secret{overflow-wrap:anywhere}
.qr{margin:0 0 20px;display:grid;justify-items:center;gap:8px}
.qr svg{display:block;width:208px;height:208px;border-radius:12px;background:#fff}
.qr figcaption{font-size:12px;color:var(--muted)}
details.recovery{margin:22px 0 14px}
details.recovery summary{cursor:pointer;font-weight:680;color:var(--accent)}
details.recovery form{margin-top:12px}
.danger{background:#b42318;border-color:#b42318;color:#fff}
.newscloud .danger{background:#a03d2c;border-color:#a03d2c;color:#fff}
.newscloud .danger:hover{background:#8a3b2e;border-color:#8a3b2e}
.back{margin:22px 0 0;font-size:14px}
@media(max-width:480px){.codes{grid-template-columns:1fr}.passkeys li{flex-wrap:wrap}}
.skip{position:absolute;left:-10000px;top:12px;z-index:10;padding:12px 16px;border-radius:10px;background:var(--text);color:#fff;font-weight:700;text-decoration:none}.skip:focus{left:12px}