@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');
:root{color-scheme:light dark;--bg:light-dark(#fff,#19181c);--ink:light-dark(#242329,#f6f5f8);--muted:light-dark(#5f5c65,#c5c1cd);--soft:light-dark(#f6f5f7,#242228);--line:light-dark(#dedbe2,#48444f);--input:light-dark(#837d8d,#a29aaf);--accent:light-dark(#655078,#d8bfef);--primary:light-dark(#242329,#f1edf6);--primary-ink:light-dark(#fff,#242329);--error:light-dark(#a02027,#ffc5c8);font-size:100%}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:400 1.5rem/1.5 'Atkinson Hyperlegible Next',system-ui,sans-serif}header{padding:24px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.brand{font:500 1.5rem/1.3 'IBM Plex Sans',system-ui,sans-serif;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}main{max-width:760px;margin:auto;padding:48px 32px 64px;overflow-wrap:anywhere}h1,h2{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:500;line-height:1.2}h1{font-size:2.5rem;letter-spacing:-.02em;margin:0 0 16px}h2{font-size:1.5rem;margin:36px 0 16px}p{margin:0 0 24px}.help,.quiet,small{font-size:1.25rem;color:var(--muted)}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit;max-width:100%;color:inherit}button{cursor:pointer;min-height:60px;min-width:44px;padding:12px 20px;border:1px solid var(--input);border-radius:6px;background:var(--bg);white-space:normal;overflow-wrap:anywhere}button.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:500}.quiet{min-height:48px;border:0;padding:10px 0;background:transparent;color:var(--accent);text-decoration:underline}button:disabled{opacity:.6;cursor:wait}label{display:block;margin-bottom:8px}input,select{display:block;width:100%;min-width:0;min-height:64px;border:1px solid var(--input);border-radius:6px;padding:12px 16px;background:var(--bg)}input::placeholder{color:var(--muted);opacity:1}.field{margin-bottom:24px}form{margin-top:28px}.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}:is(button,input,select,a):focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.error{color:var(--error);margin:20px 0}.notice{background:var(--soft);padding:16px 20px;border-radius:6px;font-size:1.25rem;margin:24px 0}.row{padding:20px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.row>div{min-width:0;flex:1}.row strong{font-weight:500;display:block}.row small{display:block}.row select{width:auto;min-width:145px}.row .actions{margin:0}.summary{margin:24px 0}.summary div{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}dt{color:var(--muted);font-size:1.25rem}dd{margin:0}.skip{position:absolute;left:16px;top:0;transform:translateY(-120%);padding:12px;background:var(--bg);z-index:2}.skip:focus{top:12px;transform:none}#development{font:400 1rem/1.5 system-ui,sans-serif;padding:12px 32px;background:var(--soft);border-bottom:1px solid var(--line)}#account{display:flex;gap:20px;align-items:center;flex-wrap:wrap}#account button{font-size:1.25rem}#main:focus{outline:none}code{font:inherit;overflow-wrap:anywhere}.member-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.delivery a{overflow-wrap:anywhere}.delivery{font-size:1.125rem}
@media(max-width:600px){header{padding:20px}main{padding:32px 20px 48px}h1{font-size:2rem}.actions>button.primary{width:100%}.summary div{grid-template-columns:1fr;gap:4px}.row{align-items:flex-start}.member-controls{width:100%}#development{padding:12px 20px}}

/* A small account menu; organization administration has its own Settings page. */
.brand{min-width:0;max-width:100%}.brand>svg{flex-shrink:0}.brand span{min-width:0;overflow-wrap:anywhere}
#account{position:relative;min-width:0;max-width:100%;margin-left:auto}
#profile-menu{min-width:0;max-width:100%}
#profile-menu summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:60px;padding:8px 12px;text-align:left;border-radius:6px;max-width:18rem}
#profile-menu summary::-webkit-details-marker{display:none}
.profile-label{min-width:0}
#profile-menu summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-chevron{display:block;align-self:center}
#profile-menu[open] .profile-chevron{transform:rotate(180deg)}
#profile-menu summary:hover,#profile-menu[open] summary{background:var(--soft)}
#profile-menu summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.profile-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:3;width:min(380px,calc(100vw - 40px));max-height:min(70dvh,calc(100dvh - 100% - 64px));overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0002;padding:12px;scroll-padding:12px}
.profile-identity{padding:8px 12px 20px;border-bottom:1px solid var(--line)}
.profile-identity strong,.profile-identity small{display:block}
.profile-identity strong{font-weight:500}
.menu-label{font-size:1.25rem;color:var(--muted);margin:16px 12px 8px}
#account .organization-choice{display:block;text-align:left;width:100%;padding:12px;margin:4px 0;border-color:transparent;min-height:64px}
.organization-choice strong,.organization-choice small{display:block}
.organization-choice strong{font-weight:500}
#account .organization-choice[aria-current]{border-color:var(--input);background:var(--soft)}
.organization-choice:hover{background:var(--soft)}
.profile-panel nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.profile-panel nav a,.profile-panel nav button{display:flex;align-items:center;min-height:48px;text-align:left;padding:10px 12px;font-size:1.25rem;border-radius:6px}
.profile-panel nav a:hover,.profile-panel nav button:hover{background:var(--soft)}
.back-link{display:inline-flex;align-items:center;min-height:48px;font-size:1.25rem;margin-bottom:20px}
.settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:4px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;min-height:96px}
.settings-row strong{color:var(--ink);font-weight:500}
.settings-row>span:not(.row-arrow){color:var(--muted);font-size:1.25rem;grid-column:1}
.settings-row .row-arrow{grid-column:2;grid-row:1/3;align-self:center}
.settings-row:hover strong{text-decoration:underline;text-underline-offset:4px}
.settings-note{margin-top:28px}
@media(max-width:600px){header{gap:12px}.brand{font-size:1.25rem;gap:8px}.brand>svg{width:32px;height:32px}#profile-menu summary{font-size:1.25rem;max-width:7rem;padding-inline:8px;gap:8px}#profile-menu summary small{font-size:1rem}}

/* One setup shell: explicit progress above the task, with a compact phone view. */
.setup-header{margin-bottom:36px;container:setup / inline-size}.setup-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:1.25rem;color:var(--muted);margin-bottom:16px}.setup-heading strong{font-size:1.5rem;color:var(--ink);font-weight:500}
.setup-progress ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-size:1.25rem;color:var(--muted)}
.setup-progress li{border-top:4px solid var(--line);padding-top:8px}.setup-progress li[aria-current],.setup-progress li.passed{border-color:var(--accent)}.setup-progress li[aria-current]{color:var(--ink);font-weight:500}
.setup-progress li>a,.setup-progress li>span{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:48px;padding:4px 0;text-decoration:none;color:inherit}.setup-progress a:hover .step-label{text-decoration:underline;text-underline-offset:4px}.step-number{flex-shrink:0;font-variant-numeric:tabular-nums;line-height:1.4}.step-label{line-height:1.35}.setup-context{font-size:1.25rem;color:var(--muted);margin:16px 0 0}
.setup-actions{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}.setup-actions>.primary{margin-left:auto}.setup-actions>.back-link{margin:0;min-width:44px}.setup-finished{color:var(--accent);font-size:1.5rem;margin-bottom:24px}.setup-result{border-block:1px solid var(--line);padding:24px 0;margin:28px 0}.setup-result h2{margin:0 0 12px}.setup-result p{margin:8px 0 0}
#main h1:focus{outline:none}
.skill-options{border:0;padding:0;margin:0;min-width:0}.skill-options legend{font-size:1.25rem;color:var(--muted);margin-bottom:8px}.skill-option{display:flex;align-items:flex-start;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);cursor:pointer;margin:0;min-height:64px}.skill-option input{width:24px;height:24px;min-height:24px;flex-shrink:0;margin:6px 0 0;accent-color:var(--accent);padding:0}.skill-option strong,.skill-option small{display:block}.skill-option strong{font-weight:500}.skill-option small{margin-top:8px}.skill-option:has(input:checked){color:var(--accent)}.skill-option:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:4px}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:12px 20px;border:1px solid var(--input);border-radius:6px;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}.button-link.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.empty-state{padding:32px 0;color:var(--muted);font-size:1.25rem}.catalog-search{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin-top:28px}.catalog-search .field{margin:0 0 24px}
.catalog-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:96px}.catalog-row strong,.catalog-row small{display:block}.catalog-row strong{font-weight:500}.catalog-row small{margin-top:4px}.catalog-row>span:last-child{color:var(--accent)}.catalog-row:hover strong{text-decoration:underline;text-underline-offset:4px}
.provider-mark,.organization-symbol{display:flex;align-items:center;justify-content:center;background:var(--soft);border:1px solid var(--line);border-radius:8px;min-height:48px;font-size:1.25rem;color:var(--ink);overflow-wrap:anywhere}.organization-symbol{width:64px;min-height:64px}
textarea{font:inherit;color:inherit;width:100%;min-height:120px;max-width:100%;border:1px solid var(--input);border-radius:6px;padding:12px 16px;background:var(--bg);resize:vertical}textarea::placeholder{color:var(--muted);opacity:1}textarea:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:600px){.setup-progress .step-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.setup-progress li>a,.setup-progress li>span{justify-content:center;align-items:center}.setup-header{margin-bottom:28px}.setup-actions>.primary{width:100%;order:1}.setup-actions>.back-link,.setup-actions>.quiet{order:2}.setup-heading>span{width:100%}.catalog-search{grid-template-columns:1fr;gap:0}.catalog-row{gap:12px;grid-template-columns:44px minmax(0,1fr) auto}.actions>.button-link.primary{width:100%}}

/* Keep the step navigation compact when enlarged type needs more space. */
@container setup (max-width:38rem){.setup-progress .step-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.setup-progress li>a,.setup-progress li>span{justify-content:center;align-items:center}}

/* Keep the native select interaction, with a legible, consistently inset chevron. */
:root{--select-chevron:url("/chevron-light.svg")}
select:not([multiple]):not([size]){appearance:none;background-image:var(--select-chevron);background-repeat:no-repeat;background-position:right 20px center;background-size:min(1rem,24px) min(.625rem,15px);padding-inline-end:56px;cursor:pointer}
@media(prefers-color-scheme:dark){:root{--select-chevron:url("/chevron-dark.svg")}}
@media(forced-colors:active){select:not([multiple]):not([size]){appearance:auto;background-image:none;padding-inline-end:16px}}

.connection-endpoint{overflow-wrap:anywhere}
#development{overflow-wrap:anywhere}
@media(max-width:600px){.connection-setup{grid-template-columns:44px minmax(0,1fr)}.connection-setup>button{grid-column:2;justify-self:start}}

.author-messages { display: grid; gap: 24px; margin-block: 24px; }
.author-message { min-width: 0; }
.author-message.user { justify-self: end; max-width: 90%; background: var(--soft); border-radius: 8px; padding: 16px 20px; }
.author-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 8px 0; }
.author-message strong { font-size: 1.25rem; }
.author-review { margin-block: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.author-review summary { cursor: pointer; font-weight: 600; min-height: 48px; }
.skill-chat { padding-top: 28px; }
.skill-chat .author-messages { min-height: 160px; align-content: start; }
.author-composer { display: grid; gap: 12px; margin-top: 20px; }
.author-composer label { margin: 0; font-size: 1.25rem; color: var(--muted); }
.author-composer textarea { margin: 0; }
.author-composer button { justify-self: end; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.device-code { font-size: 2rem; font-weight: 600; letter-spacing: .08em; overflow-wrap: anywhere; }
#subscription-flow { margin-block: 32px; border-top: 1px solid var(--line); padding-top: 24px; }

@media(max-width:600px){.subscription-row{display:grid;grid-template-columns:minmax(0,1fr)}.subscription-actions{width:100%}}