@font-face{font-family:Source Sans;src:url('/fonts/source-sans-3.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Source Sans;src:url('/fonts/source-sans-3-semibold.woff2') format('woff2');font-weight:600 800;font-display:swap}

/* Tokens. Light is the default palette; dark redefines the semantic values below. */
:root{--ink:#20372c;--muted:#5c6b63;--green:#225640;--green-hover:#173e2d;--ground:#eff2ed;--paper:#fff;--line:#d7ded7;--tint:#e4ede4;--danger:#9b3028;--control-border:#b8c5bb;--hover-border:#a9b8ab;--placeholder:#718077;--primary-bg:#225640;--primary-hover:#173e2d;--primary-ink:#fff;--note:#f4f7f1;--soft:#f6f8f4;--error-bg:#fbefec;--nav-selected:#dfe8de;--switch-track:#d2d9d2;--switch-thumb:#fff;--notice-bg:#20372c;--notice-ink:#fff;--focus:#55845c;--live:#3d8a4e;--shadow:#14271c;--line-strong:#c9d3ca;--backdrop:#14271c55;--float-shadow:#14271c26;--danger-bg:#fbf4f3;
--radius:9px;--radius-field:7px;--rail:240px;--rail-compact:64px;
--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.16,1,.3,1);--fast:.14s;--base:.22s;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--font-sprig:Source Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color-scheme:light;font-family:var(--font-sprig);color:var(--ink);background:var(--ground);font-size:16px;line-height:1.5;font-synthesis:none;-webkit-font-smoothing:antialiased;accent-color:var(--green);caret-color:var(--green);scrollbar-color:var(--control-border) transparent}
:root[data-theme=dark]{color-scheme:dark;--ink:#e4ede6;--muted:#a4b5a9;--green:#9dcca8;--green-hover:#bee1c5;--ground:#111913;--paper:#1c2821;--line:#34473b;--tint:#2b4033;--danger:#f0a59b;--control-border:#586f5f;--hover-border:#718c79;--placeholder:#94a79a;--primary-bg:#98c9a5;--primary-hover:#b2dbbe;--primary-ink:#12271a;--note:#203026;--soft:#203026;--error-bg:#392720;--nav-selected:#2b4033;--switch-track:#586f5f;--switch-thumb:#14271c;--notice-bg:#d9e8dd;--notice-ink:#14271c;--focus:#86b892;--live:#6fc783;--line-strong:#4a6353;--backdrop:#0a120d99;--float-shadow:#00000080;--danger-bg:#392720}
:root[data-font=system]{font-family:var(--font-system)}
::selection{background:var(--tint);color:var(--ink)}

/* Base */
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);padding:9px 16px;font-weight:600;font-size:15px;min-height:40px;transition:background var(--fast),border-color var(--fast),color var(--fast),transform .1s var(--ease-out),box-shadow var(--fast)}
button:hover{background:var(--ground);border-color:var(--hover-border)}button:active:not(:disabled){background:var(--tint);transform:scale(.98)}button:disabled{opacity:.5;cursor:default}
.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink)}.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.primary:active:not(:disabled){background:var(--primary-hover)}
.danger{color:var(--danger)}.danger:hover{background:var(--danger-bg)}.quiet{background:transparent;border-color:transparent}.small{padding:6px 12px;font-size:14px;min-height:34px}
.icon-button{width:36px;height:36px;min-height:36px;padding:0;display:inline-grid;place-items:center;border-color:transparent;background:transparent;border-radius:8px;color:var(--muted);flex-shrink:0}.icon-button:hover{background:var(--tint);border-color:transparent;color:var(--ink)}.icon-button[aria-current=page]{color:var(--green);background:var(--nav-selected)}
@media(pointer:coarse){button{min-height:44px}.small{min-height:40px}.icon-button{width:40px;height:40px;min-height:40px}}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--fast)}a:hover{color:var(--green-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}h1:focus-visible,h2:focus-visible{outline:none;box-shadow:-14px 0 0 -11px var(--focus)}
h1,h2,h3,p{margin:0}h1{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.6px;text-wrap:balance}h2{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.2px}h3{font-size:16px;font-weight:600;line-height:1.4}p{color:var(--muted)}small,.caption{font-size:14px;color:var(--muted)}strong{font-weight:600}
svg{width:20px;height:20px;flex-shrink:0;vertical-align:middle}hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.skip{position:fixed;left:10px;top:-100px;background:var(--paper);padding:10px;z-index:10}.skip:focus{top:10px}.loading{padding:10vw}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[hidden]{display:none!important}

/* Shell: a sticky rail beside a white workspace. The rail can collapse to icons. */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh;transition:grid-template-columns var(--base) var(--ease-out)}
:root[data-rail=collapsed] .shell{grid-template-columns:var(--rail-compact) minmax(0,1fr)}
.rail{position:sticky;top:0;height:100dvh;align-self:start;display:flex;flex-direction:column;gap:16px;padding:16px 14px 14px;border-right:1px solid var(--line);overflow:hidden auto;view-transition-name:rail}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:36px}
.brand{display:flex;align-items:center;gap:10px;color:var(--green);font-size:23px;font-weight:600;letter-spacing:-.5px;min-width:0;padding-left:2px}.brand img{width:32px;height:32px;flex-shrink:0}.brand-name{white-space:nowrap}
.rail-toggle svg{transition:transform var(--base) var(--ease-out)}
.switcher-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 5px 2px}
.switcher-field{position:relative}.switcher-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1;display:flex}
.switcher .select-trigger{min-height:40px;padding:6px 10px 6px 40px;font-size:14px;font-weight:600;border-radius:8px;gap:8px}.switcher .select-trigger:hover{background:var(--tint)}
.switcher.other .select-trigger{background:var(--tint);border-color:var(--green);color:var(--green)}.switcher.other .initials{background:var(--green);color:var(--primary-ink)}
.initials{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--tint);color:var(--green);font-size:11px;font-weight:700;letter-spacing:.3px;line-height:1;flex-shrink:0;font-family:var(--font-sprig)}.initials.medium{width:28px;height:28px;font-size:12px;border-radius:7px}.initials.large{width:36px;height:36px;font-size:14px;border-radius:9px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;border-color:transparent;font-size:15px;font-weight:500;padding:0 10px;min-height:40px;border-radius:8px;white-space:nowrap;overflow:hidden}
.nav button svg{color:var(--muted);transition:color var(--fast)}.nav button:hover{background:var(--tint)}.nav button:hover svg{color:var(--ink)}
.nav button[aria-current=page]{background:var(--nav-selected);color:var(--green);font-weight:600}.nav button[aria-current=page] svg{color:var(--green)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.running{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--muted);background:transparent;border-color:transparent;padding:0 10px;min-height:34px;border-radius:8px;width:100%;text-align:left;white-space:nowrap}.running:hover{background:var(--tint);color:var(--ink)}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--live);flex-shrink:0}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--live);opacity:0;animation:pulse 2.6s var(--ease-out) infinite}
@keyframes pulse{0%{transform:scale(.35);opacity:.8}60%,100%{transform:scale(1.2);opacity:0}}
.identity{border-top:1px solid var(--line);margin:4px -14px -14px;padding:8px 8px 8px}
.account-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;border-color:transparent;background:transparent;border-radius:8px;text-align:left;font-weight:600}.account-trigger:hover,.account-trigger[aria-expanded=true]{background:var(--tint);border-color:transparent}
.who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}.who strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-trigger>svg:last-child{width:16px;height:16px;color:var(--muted)}
.menu{position:fixed;inset:auto;margin:0;padding:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 12px 40px var(--float-shadow);width:252px;transform-origin:bottom left;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}
@starting-style{.menu:popover-open{opacity:0;transform:translateY(6px) scale(.98)}}
.menu-head{display:flex;flex-direction:column;padding:8px 10px 10px;line-height:1.3}.menu-head strong{font-size:14px;overflow-wrap:anywhere}.menu-head span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.menu-row{display:flex;flex-direction:column;gap:6px;padding:6px 10px 10px;border-top:1px solid var(--line)}.menu-row>span{font-size:12px;font-weight:600;color:var(--muted)}.menu-row .segmented{display:flex}.menu-row .segmented label{flex:1;padding:0 6px;font-size:13px}
.menu [role=menuitem]{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;border-color:transparent;font-size:14px;font-weight:500;padding:0 10px;min-height:36px;border-radius:6px}.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:var(--tint);outline:none}.menu [role=menuitem] svg{width:18px;height:18px;color:var(--muted)}
.menu hr{margin:6px -6px;border-top-color:var(--line)}
/* Collapsed rail: a desktop preference; mobile always retains labeled tabs. */
@media(min-width:701px){
:root[data-rail=collapsed] .rail{padding-inline:12px}
:root[data-rail=collapsed] .rail-top{flex-direction:column;gap:8px}
:root[data-rail=collapsed] .brand{padding:0}:root[data-rail=collapsed] .brand-name,:root[data-rail=collapsed] .nav-label,:root[data-rail=collapsed] .who,:root[data-rail=collapsed] .running-label,:root[data-rail=collapsed] .switcher-label{display:none}
:root[data-rail=collapsed] .rail-toggle svg{transform:scaleX(-1)}
:root[data-rail=collapsed] .nav button{justify-content:center;padding:0}
:root[data-rail=collapsed] .switcher .select-trigger{padding:0;justify-content:center;min-height:40px}:root[data-rail=collapsed] .switcher .select-trigger>*{display:none}:root[data-rail=collapsed] .switcher-icon{left:50%;transform:translate(-50%,-50%)}
:root[data-rail=collapsed] .running{justify-content:center;padding:0}
:root[data-rail=collapsed] .identity{margin-inline:-12px;padding:8px 6px}:root[data-rail=collapsed] .account-trigger{justify-content:center;padding:6px 0}:root[data-rail=collapsed] .account-trigger>svg:last-child{display:none}

}

/* Workspace */
.workspace{background:var(--paper);min-width:0}
.content{padding:40px 44px 72px;max-width:1120px;margin:auto;view-transition-name:content}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.page-head p{margin-top:8px;max-width:560px;font-size:16px}.page-head button{flex-shrink:0;margin-top:2px}
.eyebrow{color:var(--muted);font-size:14px;display:block;margin-bottom:10px}
.section-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 0 12px;gap:12px}.section-label span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.source-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.source-icon{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--green);transition:background var(--base),color var(--base)}
.source-meta h3{overflow-wrap:anywhere}.source-meta p{font-size:14px;margin-top:2px;overflow-wrap:anywhere}.source-meta .switches{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.switch{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;min-height:30px}
.switch input[type=checkbox]{appearance:none;width:34px;height:20px;min-height:20px;background:var(--switch-track);position:relative;border:0;border-radius:12px;padding:0;margin:0;flex-shrink:0;cursor:pointer;transition:background var(--base)}
.switch input:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--switch-thumb);box-shadow:0 1px 2px #14271c33;transition:transform .28s var(--ease-spring)}
.switch input:checked{background:var(--green)}.switch input:checked:before{transform:translateX(14px)}.switch input:disabled{opacity:.5;cursor:default}.switch:has(input:disabled){color:var(--muted);cursor:default}
.source-actions{display:flex;align-items:center;gap:2px}.source-actions .move{padding:0;width:34px;min-height:34px}@media(pointer:coarse){.source-actions .move{width:40px;min-height:40px}}
.source-row.paused .source-icon{color:var(--muted);background:var(--ground)}
.footnote{display:flex;gap:10px;margin-top:22px;font-size:14px;color:var(--muted);max-width:none;align-items:start}.footnote svg{margin-top:2px;width:17px;height:17px}
.empty{padding:52px 24px;text-align:center;background:var(--soft);border-radius:12px;margin-top:22px}.empty .source-icon{margin:0 auto 16px;width:52px;height:52px;background:var(--paper)}.empty h2{margin-bottom:8px}.empty p{max-width:420px;margin:0 auto}
.steps{margin:32px 0 0;padding:0;list-style:none;display:grid;gap:26px}.step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px}
.step{position:relative}.step:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:-22px;width:1px;background:var(--line)}.step-number{border:1px solid var(--control-border);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;color:var(--green);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--paper);position:relative}.step p{margin:4px 0 12px}
.ui-path{font-family:var(--font-mono);font-size:13px;background:var(--note);border-radius:4px;padding:2px 6px;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}.mono,input.mono{font-family:var(--font-mono);font-size:14px}
.narrow{max-width:680px}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}.field label{font-weight:600;font-size:14px}
input,select,textarea{border:1px solid var(--control-border);background:var(--paper);color:var(--ink);padding:9px 12px;border-radius:var(--radius-field);min-height:42px;width:100%;font-weight:400;transition:border-color var(--fast),box-shadow var(--fast)}
input:hover,textarea:hover{border-color:var(--hover-border)}input:focus-visible,textarea:focus-visible,.select-trigger:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--tint)}
input::placeholder{color:var(--placeholder)}.reveal-field{position:relative}.reveal-field input{padding-right:46px}.reveal-field .reveal{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;min-height:34px}input[type=checkbox]{width:18px;min-height:18px;accent-color:var(--green)}
.check{display:flex;align-items:start;gap:10px;margin:10px 0 20px;cursor:pointer}.check input{margin-top:3px;flex-shrink:0}.check span{font-size:15px}
.check input[type=checkbox]{appearance:none;width:20px;height:20px;min-height:20px;border:1px solid var(--placeholder);border-radius:5px;padding:0;display:grid;place-content:center;cursor:pointer;transition:background var(--fast),border-color var(--fast)}
.check input:checked{background:var(--green);border-color:var(--green)}.check input:checked::before{content:"";width:5px;height:10px;border:solid var(--primary-ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.help{font-size:14px;color:var(--muted);line-height:1.5}
.error{color:var(--danger);background:var(--error-bg);border-radius:var(--radius-field);padding:10px 14px;margin-bottom:18px;font-size:14px}.error:empty{display:none}
.person-row,.session-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.person{display:flex;gap:15px;align-items:center}.person p,.session-row p{font-size:14px}
.tag{display:inline-flex;padding:1px 7px;background:var(--ground);color:var(--muted);font-size:12px;font-weight:600;border-radius:4px;margin-left:8px;vertical-align:middle;line-height:1.5}
.subsection{margin-top:44px}.inline-note{padding:16px 18px;background:var(--note);border-radius:10px;font-size:14px;margin:22px 0}.inline-note strong{color:var(--ink)}
.address{overflow-wrap:anywhere;font-family:var(--font-mono);font-size:13.5px}.session-row .caption{margin-top:4px}

/* Preferences page */
.pref{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.pref .segmented{display:flex}.pref .segmented label{flex:1}.pref p{font-size:14px;margin-top:2px;max-width:440px}
.segmented{display:inline-flex;background:var(--ground);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.segmented label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;color:var(--muted);transition:color var(--fast),background var(--fast),box-shadow var(--fast);white-space:nowrap}
.segmented input[type=radio]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer;border:0}
.segmented label svg{width:15px;height:15px;margin-right:6px;flex-shrink:0}.segmented label:has(input:checked){background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #14271c1f,inset 0 0 0 1px var(--line)}:root[data-theme=dark] .segmented label:has(input:checked){background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-strong)}.segmented label:hover{color:var(--ink)}
.segmented label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}

/* Sign-in and setup */
.auth{max-width:440px;margin:8vh auto;padding:36px;background:var(--paper);border:1px solid var(--line);border-radius:16px}.auth .brand{margin-bottom:36px}.auth h1{font-size:28px}.auth .intro{margin:8px 0 26px;font-size:16px}.auth .primary{width:100%;margin-top:4px;min-height:44px}.auth .caption{margin-top:22px}
.auth-note{margin:30px 0 0;border-top:1px solid var(--line);padding-top:20px;font-size:14px}.auth-note p+p{margin-top:8px}

/* Dialogs, listboxes, and notices float above the workspace with authored entrances. Exits are instant: an element still transitioning out of the top layer cannot be reopened or focused reliably. */
dialog{border:1px solid var(--line-strong);border-radius:16px;background:var(--paper);color:var(--ink);padding:28px;width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 24px 80px var(--float-shadow);opacity:1;transform:none;transition:opacity .18s var(--ease-out),transform .24s var(--ease-out)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px);opacity:1;transition:opacity .24s var(--ease-out)}
@starting-style{dialog[open]{opacity:0;transform:translateY(10px) scale(.97)}dialog[open]::backdrop{opacity:0}}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.dialog-head button{padding:5px 10px}.dialog-intro{margin-bottom:22px;font-size:15px}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}.dialog-actions .danger{margin-right:auto;padding-left:10px}
#notice{position:fixed;bottom:26px;left:50%;transform:translate(-50%,0);background:var(--notice-bg);color:var(--notice-ink);border-radius:9px;padding:12px 18px;box-shadow:0 8px 28px #14271c2e;max-width:calc(100% - 32px);z-index:20;font-size:14px;font-weight:500;transition:opacity .2s var(--ease-out),transform .28s var(--ease-out),display .28s allow-discrete}
#notice:empty{display:none;opacity:0;transform:translate(-50%,12px)}@starting-style{#notice:not(:empty){opacity:0;transform:translate(-50%,12px)}}
.select-control{position:relative;min-width:0}.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;border:1px solid var(--control-border);border-radius:var(--radius-field);padding:9px 12px;min-height:42px;font-weight:400;transition:border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.select-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger>svg{width:16px;height:16px;color:var(--muted);transition:transform var(--base) var(--ease-out)}.select-trigger:not(.appearance-trigger)[aria-expanded=true]>svg:last-child{transform:rotate(180deg)}
.select-options{position:fixed;inset:auto;margin:0;padding:5px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 32px var(--float-shadow);overflow-y:auto;overscroll-behavior:contain;font-size:15px;transform-origin:top;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}
@starting-style{.select-options:popover-open{opacity:0;transform:translateY(-4px) scale(.98)}}
.select-option{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:8px 12px;border-radius:6px;cursor:pointer;overflow-wrap:anywhere}.select-option.active{background:var(--tint);color:var(--green)}
.select-option[aria-selected=true]{font-weight:600}.select-option[aria-selected=true]::after{content:"";width:6px;height:11px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 4px;flex-shrink:0}

/* Page transitions: the workspace content rises in; the rail stays put. */
::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-group(rail){animation:none}
::view-transition-old(content){animation:fade-out .1s var(--ease-out) both}::view-transition-new(content){animation:fade-in .26s var(--ease-out) both,rise .26s var(--ease-out) both}
@keyframes fade-in{from{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes rise{from{transform:translateY(10px)}}

/* Diagnostics and details */
.diagnostic{margin-top:20px}.diagnostic-row{padding:12px 0;border-top:1px solid var(--line);font-size:15px}.diagnostic-row p{font-size:14px}.success{color:var(--green)}
details{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center;gap:8px}summary::marker{content:""}summary::before{content:"";width:6px;height:6px;border:solid var(--muted);border-width:0 1.6px 1.6px 0;transform:rotate(-45deg);margin:0 6px 0 2px;transition:transform var(--base) var(--ease-out)}details[open]>summary::before{transform:rotate(45deg)}details p{font-size:15px;margin-bottom:14px}
.link-result{margin-top:18px}.link-result input{font-size:14px}
.check-help{margin-top:12px}.check-result{font-size:14px;margin-top:14px;padding:11px 14px;background:var(--ground);border-radius:var(--radius-field)}.check-result:empty{display:none}.check-result.success{background:var(--tint)}.check-result.failure{background:var(--error-bg);color:var(--danger)}
.guide-link{margin:10px 0 22px}.guide-link a{display:inline-flex;align-items:center;gap:8px}.guide-link .help{display:block;margin-top:5px}

/* Hosting guide (embedded and standalone) */
.hosting-guide{max-width:800px;margin:auto;padding:40px 28px 80px}.hosting-guide .brand{margin:32px 0}.hosting-guide h1{margin-bottom:14px}.hosting-guide h2{margin:36px 0 12px;scroll-margin-top:160px}.hosting-guide h3{margin:24px 0 8px}
.hosting-guide p,.hosting-guide ul,.hosting-guide ol{margin-bottom:16px}.hosting-guide li+li{margin-top:8px}
.hosting-guide nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:28px 0;border-block:1px solid var(--line);padding:16px 0}
.hosting-guide pre{overflow:auto;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-field);font-size:14px}.hosting-guide code{overflow-wrap:anywhere}.hosting-guide .intro{font-size:17px}
.hosting-guide table{border-collapse:collapse;width:100%;font-size:15px}.hosting-guide th,.hosting-guide td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:10px 12px 10px 0;overflow-wrap:anywhere}
.hosting-guide.guide-embedded{padding:0;max-width:800px;margin:0}.hosting-guide [data-guide-section]{display:flow-root}.hosting-guide [data-guide-section][hidden]{display:none}.hosting-guide .eyebrow{margin-bottom:10px}
.hosting-guide .guide-tools{position:sticky;top:0;z-index:3;background:var(--paper);padding:16px 0 12px;margin:24px 0 0;border-bottom:1px solid var(--line)}.hosting-guide:not(.guide-embedded) .guide-tools{background:var(--ground)}
.hosting-guide .guide-tools::before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;background:inherit;pointer-events:none}
.guide-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.7fr);gap:16px}.guide-controls label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.guide-search-row{display:flex;gap:8px}.guide-search-row input{min-width:0}.guide-search-row button{flex-shrink:0}.guide-controls select{font-size:15px}
.hosting-guide .guide-results{margin:8px 0 0;font-size:14px;min-height:21px}.hosting-guide .guide-empty{margin-top:24px}.guide-tools [hidden]{display:none}.hosting-guide .guide-fallback a{min-height:44px;display:inline-flex;align-items:center}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;padding:9px 16px;transition:background var(--fast),border-color var(--fast)}
.button-link.small{padding:6px 12px;font-size:14px;min-height:34px}.button-link:hover{background:var(--ground);border-color:var(--hover-border);color:var(--ink)}.button-link:active{background:var(--tint)}
.guide-downloads{margin-bottom:16px}.guide-downloads>button,.guide-downloads>.button-link{min-width:96px}

/* Breakpoints */
@media(min-width:1440px){.content{padding:52px 56px 80px}.page-head{margin-bottom:38px}}
@media(max-width:1000px){:root{--rail:208px}.rail{padding:14px 10px 12px}.content{padding:32px}.source-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100px}.page-head{gap:18px}h1{font-size:28px}.pref{grid-template-columns:1fr;gap:12px;align-items:start}}
@media(max-width:700px){
.shell{display:block}
.rail{position:sticky;top:0;z-index:5;height:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"top switch foot" "nav nav nav";align-items:center;gap:6px 10px;padding:8px 16px 0;border-right:0;border-bottom:1px solid var(--line);overflow:visible;background:var(--ground)}
.rail-top{grid-area:top;min-height:40px}.rail-toggle{display:none}.brand{font-size:21px;gap:8px}.brand img{width:28px;height:28px}
.switcher{grid-area:switch;min-width:0;justify-self:end;max-width:100%}.switcher-label{display:none}.switcher .select-trigger{min-height:36px;font-size:13px;padding:4px 8px 4px 34px;gap:6px;max-width:100%}.switcher-icon{left:6px}.switcher-icon .initials{width:22px;height:22px;font-size:10px}
.rail-foot{grid-area:foot;flex-direction:row;align-items:center;margin:0;gap:2px}.running{padding:0;justify-content:center;min-height:40px;width:28px}.running-label{display:none}
.identity{border:0;margin:0;padding:0}.account-trigger{width:40px;min-height:40px;padding:0;justify-content:center;gap:0}.account-trigger .who,.account-trigger>svg:last-child{display:none}
.nav{grid-area:nav;flex-direction:row;gap:0;margin:0 -16px;padding:0 8px 0 8px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}.nav::-webkit-scrollbar{display:none}.nav button{flex:0 0 auto;width:auto;min-width:64px;padding:8px 8px 9px;justify-content:center;flex-direction:column;gap:4px;font-size:12px;font-weight:500;border-radius:8px 8px 0 0;min-height:0}.nav button svg{width:20px;height:20px}.nav button:last-child{margin-right:20px}
.step .actions button{flex:1 1 auto}
.content{padding:26px 20px 48px}.page-head{margin-bottom:24px;display:block}.page-head h1{font-size:28px}.page-head p{font-size:15px;margin-top:8px}.page-head button{margin-top:18px}
.source-row{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:20px 0}.source-icon{width:36px;height:36px;border-radius:9px}.source-actions{grid-column:2;max-width:none;justify-content:flex-start;margin-top:1px;gap:6px}.source-meta .switches{gap:16px;margin-top:10px}
.form-grid{display:block}.person-row{gap:10px}.person{gap:10px}.person-row .actions{gap:2px;justify-content:flex-end}.person-row .actions button{font-size:14px;padding:7px 9px}
.empty{padding:35px 18px}.auth{margin:0;padding:28px 20px 40px;border:0;border-radius:0;min-height:100dvh}.auth .brand{margin-bottom:32px}.session-row{align-items:start}.step{gap:13px}
.dialog-actions{flex-wrap:wrap}dialog{padding:22px}.tag{margin-left:4px}
.pref{grid-template-columns:1fr;gap:12px;align-items:start}.desktop-only{display:none}.segmented{display:flex}.segmented label{flex:1}
.hosting-guide{padding:28px 20px 60px}.guide-controls{grid-template-columns:minmax(0,1fr);gap:10px}.hosting-guide .guide-tools{padding-top:10px}.guide-controls label{margin-bottom:4px}.hosting-guide h2{scroll-margin-top:240px}.hosting-guide .guide-results{margin-top:6px}
}

/* Motion respects the device setting and the in-app preference. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
:root[data-motion=reduced] *,:root[data-motion=reduced] *::before,:root[data-motion=reduced] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
@media(forced-colors:active){.select-option.active{outline:2px solid Highlight;outline-offset:-2px}.check input[type=checkbox]{appearance:auto}.segmented label:has(input:checked){outline:2px solid Highlight}}