:root{color-scheme:dark;--bg:#282a36;--panel:#383a49;--panel-2:#44475a;--line:#686b80;--text:#f8f8f2;--muted:#d6d6df;--accent:#50fa7b;--blue:#bd93f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 3% 0%,rgba(189,147,249,.15),transparent 34rem),var(--bg);color:var(--text);font:400 16px/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[data-privacy-lang="de"] .en,html[data-privacy-lang="en"] .de{display:none!important}
a{color:var(--blue)}button,select,input{font:inherit}
button{cursor:pointer}
.skip-link{position:absolute;z-index:20;left:12px;top:-80px;background:#fff;color:#111;padding:8px 12px}.skip-link:focus{top:10px}
.demo-header{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1370px;margin:auto;padding:25px 34px;border-bottom:1px solid var(--line)}
.demo-brand{display:inline-flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-weight:850;font-size:1.1rem}.demo-brand img{display:block;width:40px;height:40px;object-fit:contain;flex:none}.demo-header-links{display:flex;gap:20px}.demo-header-links a{text-decoration:none;font-weight:700;font-size:.9rem}
.demo-shell{max-width:1370px;margin:0 auto;padding:66px 34px 80px}.demo-kicker,.panel-eyebrow{color:var(--accent);font-size:.72rem;letter-spacing:.12em;font-weight:850}.demo-kicker{display:flex;gap:10px;align-items:center}.demo-spark{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}
h1{max-width:850px;margin:16px 0 14px;font-size:clamp(2.5rem,5.2vw,4.7rem);letter-spacing:-.055em;line-height:1.06}.demo-lede{max-width:830px;margin:0 0 24px;color:var(--muted);font-size:1.12rem}
.demo-warning{display:flex;gap:14px;align-items:baseline;max-width:1000px;padding:15px 18px;border:1px solid #547c70;border-radius:14px;background:rgba(97,174,146,.13);color:#d9f4e8}.demo-warning strong{white-space:nowrap}
.demo-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:38px 0 22px}.demo-tabs a{display:inline-flex;align-items:center;min-height:42px;padding:8px 17px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--panel);text-decoration:none;font-weight:750;font-size:.86rem}.demo-tabs a[aria-current="page"]{border-color:var(--accent);color:#112018;background:var(--accent)}
.demo-grid{display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);gap:20px;align-items:start}.demo-profiles,.demo-stage{border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 20px 50px rgba(0,0,0,.12)}.demo-profiles{padding:24px;position:sticky;top:18px}.demo-profiles h2{font-size:1.25rem;margin:4px 0 18px;letter-spacing:-.03em}.demo-profile{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.demo-profile>span:nth-child(2){min-width:0}.demo-profile strong,.post-byline strong{display:block;font-size:.9rem}.demo-profile small,.post-byline small{display:block;color:var(--muted);font-size:.72rem;overflow-wrap:anywhere}.avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:39px;height:39px;border-radius:14px;color:#132022;font-weight:850}.avatar.mint{background:#a8dbc5}.avatar.lilac{background:#c5bafa}.avatar.peach{background:#f5c5a8}.profile-tag{margin-left:auto;padding:3px 6px;border-radius:8px;background:var(--panel-2);font-size:.63rem;color:var(--muted)}.profile-caption{color:var(--muted);font-size:.76rem;margin:16px 0 0}.profile-caption code{font-size:.75rem}
.demo-stage{padding:26px}.stage-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:20px}.stage-heading h2{margin:5px 0 0;font-size:1.7rem;letter-spacing:-.035em}.stage-pill{padding:5px 10px;border-radius:999px;background:#2f394b;color:#bed5ff;white-space:nowrap;font-size:.72rem;font-weight:800}.stage-intro{color:var(--muted);margin:-5px 0 18px}.demo-composer,.demo-post,.demo-settings-group,.demo-task-tray,.demo-federation,.demo-event{border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}.demo-composer,.demo-post,.demo-settings-group,.demo-task-tray,.demo-federation{padding:19px}.post-byline{display:flex;align-items:center;gap:10px}.sample-draft{margin:19px 0;color:var(--muted)}.composer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.composer-actions label{font-weight:800;font-size:.8rem}.composer-actions select{max-width:240px;min-height:42px;border:1px solid #66808b;border-radius:10px;background:#17202a;color:var(--text);padding:7px 10px}.composer-actions button,.calendar-toolbar button{min-height:42px;border:1px solid #a8d9c7;border-radius:10px;padding:8px 13px;background:var(--accent);color:#112018;font-weight:800}.demo-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:14px 18px;border:1px solid #567066;border-radius:13px;color:#d7eadf;background:#183027}.demo-flow strong{color:#fff}.demo-post{margin-top:12px}.demo-post p{margin:13px 0 0;color:var(--muted)}
.demo-settings-group{margin:15px 0}.demo-settings-group h3,.demo-task-tray h3{font-size:1.05rem;margin:0 0 11px}.demo-switch{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}.demo-switch strong{display:block;font-size:.88rem}.demo-switch small{display:block;color:var(--muted);font-size:.75rem}.demo-switch input{width:20px;height:20px;accent-color:#81d4b4;flex:0 0 auto}.demo-caveat{color:var(--muted);font-size:.82rem}.calendar-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.calendar-toolbar button+button{background:#29394a;color:var(--text);border-color:#60758c}.demo-event{display:flex;gap:18px;padding:20px;margin:0 0 15px}.event-date{align-self:flex-start;display:grid;place-items:center;min-width:66px;padding:7px 9px;border-radius:11px;background:#334559}.event-date strong{font-size:1.45rem;line-height:1}.event-date span{font-size:.7rem;letter-spacing:.15em}.event-type,.task-pill{font-size:.7rem;color:#b9d0ff}.demo-event h3{font-size:1.25rem;margin:2px 0}.demo-event p{margin:2px 0 9px;color:var(--muted);font-size:.85rem}.event-people{display:flex}.event-people .avatar{width:28px;height:28px;border-radius:50%;border:2px solid var(--panel-2);margin-right:-7px;font-size:.7rem}.demo-task-tray{margin-bottom:15px}.demo-task-tray p,.demo-federation p{color:var(--muted);font-size:.83rem;margin-bottom:0}.task-line{display:flex;gap:10px;align-items:center}.task-dot{width:11px;height:11px;border:2px solid var(--accent);border-radius:3px}.task-pill{margin-left:auto}.demo-federation summary{cursor:pointer;font-weight:800}.demo-federation[open] summary{margin-bottom:12px}.demo-status{margin:18px 0 0;padding:11px 14px;border-radius:10px;background:#132f2b;color:#c5f3e3;font-size:.82rem}.demo-end{display:flex;align-items:center;gap:20px;justify-content:space-between;max-width:1000px;margin-top:30px;color:var(--muted)}.demo-end p{margin:0}.demo-end a{white-space:nowrap;font-weight:800}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #adf0d3;outline-offset:3px}
@media(max-width:850px){.demo-grid{grid-template-columns:1fr}.demo-profiles{position:static}.demo-shell{padding-top:42px}.demo-profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px}.demo-profiles .panel-eyebrow,.demo-profiles h2,.demo-profiles .profile-caption{grid-column:1/-1}.demo-profile{min-width:0}.profile-tag{display:none}}
@media(max-width:620px){.demo-header{padding:17px 18px}.demo-header-links{gap:11px}.demo-header-links a{font-size:.75rem}.demo-shell{padding:38px 16px 120px}.demo-warning{display:block}.demo-warning strong{display:block;margin-bottom:4px}.demo-profiles{display:block}.demo-stage{padding:16px}.stage-heading{align-items:flex-start}.stage-heading h2{font-size:1.35rem}.stage-pill{font-size:.64rem}.demo-end{display:block}.demo-end a{display:inline-block;margin-top:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The public guide follows this page's fixed Dracula palette, including on light OS themes. */
html[data-theme="dracula"] .privacy-guide-panel{background:#383a49;color:#f8f8f2;border-color:#bd93f9}
html[data-theme="dracula"] .privacy-guide-header{background:#383a49}
html[data-theme="dracula"] .privacy-guide-panel h2{color:#f8f8f2}
html[data-theme="dracula"] .privacy-guide-badge{color:#ff79c6}
html[data-theme="dracula"] .privacy-guide-progress,html[data-theme="dracula"] .privacy-guide-description{color:#d6d6df}
html[data-theme="dracula"] .privacy-guide-exit{color:#f8f8f2;border-color:#85879b}
html[data-theme="dracula"] .privacy-guide-actions button{background:#44475a;color:#f8f8f2;border-color:#85879b}
html[data-theme="dracula"] .privacy-guide-actions .privacy-guide-next{background:#bd93f9;color:#282a36;border-color:#bd93f9}