.auth-card .oauth-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; margin:0 0 2px; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-strong); color:var(--text); font-size:15px; font-weight:650; text-decoration:none; }
.auth-card .oauth-button:active { background:#2a302d; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:16px 0 14px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-switch { margin:18px 0 0; color:var(--muted); }
.auth-switch a { color: var(--accent); font-weight:700; margin-left:6px; }
.field-hint { margin:-6px 0 10px; color:var(--muted); font-size:13px; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_assets/fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "AIPLUSONE Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_assets/fonts/DejaVuSansMono.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/_assets/fonts/Inter-Light.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_assets/fonts/Inter-Regular.ttf") format("truetype"); }
:root {
  color-scheme: dark;
  --bg: var(--cp-bg);
  --surface: var(--cp-panel);
  --surface-strong: #242827;
  --border: #303633;
  --text: var(--cp-text);
  --muted: var(--cp-muted);
  --accent: var(--cp-mint);
  --accent-strong: #8af2c6;
  --accent-deep: #4fc596;
  --blue: #5b8def;
  --blue-strong: #8ab4ff;
  --amber: #e0b25a;
  --font-display: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
body:has(> .site-footer) { display: flex; flex-direction: column; min-height: 100dvh; }
body > .site-footer { margin-top: auto; }
a { color: inherit; }
h1, h2, h3, .price { font-family: var(--font-display); }
h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }

.auth-layout { min-height: calc(100vh - var(--cp-header-height)); display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(100%, 420px); padding: 32px 32px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 80px #0008; }
.auth-card .eyebrow { margin-bottom: 8px; font-size: 11px; }
.auth-card h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.auth-card .lede { margin: 8px 0 22px; font-size: 14.5px; line-height: 1.55; }
.auth-card label { font-size: 13px; }
.auth-card input { padding: 11px 13px; font-size: 15px; }
.auth-card .auth-form { gap: 14px; }
.auth-form .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.auth-form .actions button { min-width: 140px; padding: 11px 18px; }
.auth-form .actions .text-link { margin: 0; font-size: 14px; font-weight: 600; }
.auth-card .auth-switch { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; }
.auth-card .auth-switch a { margin-left: 4px; }
.auth-card .privacy-note { margin-top: 16px; font-size: 11.5px; line-height: 1.5; opacity: .8; }
.auth-card .field-hint { margin: -8px 0 0; font-size: 12.5px; }
.auth-card .notice { margin: 0 0 16px; }
.login-layout { min-height: min(calc(100svh - var(--cp-header-height)), 960px); }
/* Login, sign-up and contact sit on the page background inside a hairline border. */
.login-card { width: min(100%, 400px); padding: 32px 32px 28px; border: 1px solid #272929; border-radius: 12px; background: transparent; box-shadow: none; }
.login-card h1 { font-size: 24px; }
.login-card .lede { margin: 8px 0 20px; font-size: 14px; }
.login-card h1, .login-card .lede { text-align: center; }
.login-card .lede.auth-legal { margin: 10px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-card .oauth-button { margin: 0; height: 42px; padding: 0 14px; border-radius: 10px; border-color: #292d2e; background: #232627; font-size: 14px; font-weight: 500; }
.login-card .oauth-button:active { background:#2a2d30; }
.login-card .oauth-g { width: 18px; height: 18px; }
.login-card .auth-divider { margin: 18px 0; color: #8a9096; font-size: 11px; letter-spacing: .1em; }
.login-card .auth-divider::before, .login-card .auth-divider::after { background: #2c2f33; }
.login-card .auth-form { gap: 16px; }
.login-card label { gap: 6px; color: #9fa9a5; font-size: 13px; font-weight: 400; }
.login-card input { height: 42px; padding: 0 13px; border-color: #292d2e; border-radius: 10px; background: #232627; font-size: 15px; font-weight: 400; }
.login-card input::placeholder { color: #75817c; }
.login-card input:focus { outline: 2px solid #93cbb466; outline-offset: 2px; border-color: var(--accent); }
.login-card .auth-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.login-card .auth-password-control { position: relative; }
.login-card .auth-password-control input { padding-right: 44px; }
.login-card .auth-password-toggle { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #94a29b; transform: translateY(-50%); }
.login-card .auth-password-toggle svg { width: 18px; height: 18px; }
.login-card .auth-password-toggle[aria-pressed="false"] .auth-eye-slash { display: none; }
.login-card .auth-password-toggle:hover { color: #c6d4cc; background: #ffffff06; }
.login-card .auth-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card .status:empty { display: none; }
.login-card .actions { display: block; margin: 4px 0 0; }
.login-card .actions button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid #4e987f80; border-radius: 10px; background: linear-gradient(110deg,#429879 0%,#2d7762 52%,#296d5b 100%); box-shadow: inset 0 1px 0 #b1ebcd30; color: #e0ede6; font-size: 15px; font-weight: 500; }
.login-card .actions button>span[aria-hidden] { font-size: 18px; line-height: 1; }
.login-card .actions button:disabled { opacity: .85; cursor: not-allowed; transform: none; }
.login-card .actions button:disabled:hover { filter: none; }
.login-card .auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; padding: 0; border: 0; color: #929e97; font-size: 14px; font-weight: 400; line-height: 1.6; text-align: center; text-decoration: none; }
.login-card [data-auth-switch-label] { color: var(--accent); font-weight: 500; }
.login-card .auth-switch:hover [data-auth-switch-label] { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.login-card .auth-forgot { margin: 0; color: var(--accent); font-size: 13px; font-weight: 400; text-decoration: none; }
.login-card .auth-forgot:hover { color: var(--accent-strong); }
.login-card .auth-forgot[hidden] { display: none; }
.login-card .auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.login-card .auth-legal a:hover { color: var(--text); }
/* Keep the auth refinement scoped: contact shares the compact card base. */
.login-card[data-auth-card] { padding-bottom: 20px; border-color: #202226; color: #cfd2d6; }
.login-card[data-auth-card] h1, .login-card[data-auth-card] .lede { text-align: center; }
.login-card[data-auth-card] h1 { font-weight: 500; }
.login-card[data-auth-card] .lede.auth-legal, .login-card[data-auth-card] label { color: #a1a5ac; font-weight: 300; }
.login-card[data-auth-card] .oauth-button, .login-card[data-auth-card] input { border-color: #191b1e; background: #242629; color: #cfd2d6; }
.login-card[data-auth-card] input { border: 0; font-weight: 300; }
.login-card[data-auth-card] .oauth-button { font-weight: 400; }
.login-card[data-auth-card] .oauth-button:hover { background: #2b2e32; }
.login-card[data-auth-card] .oauth-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.login-card[data-auth-card] input:focus { outline: none; box-shadow: none; background: #1e2023; }
.login-card[data-auth-card] .auth-divider { gap: 12px; color: #9da2aa; font-size: 12px; letter-spacing: 0; text-transform: none; }
.login-card[data-auth-card] .auth-divider::before, .login-card[data-auth-card] .auth-divider::after { background: #30343a; }
.login-card[data-auth-card] .auth-forgot, .login-card[data-auth-card] .auth-password-toggle { color: #a1a5ac; }
.login-card[data-auth-card] .auth-forgot { font-weight: 300; }
.login-card[data-auth-card] .auth-forgot:hover { color: #d5d8de; text-decoration: underline; text-underline-offset: 3px; }
.login-card[data-auth-card] .auth-legal a:hover, .login-card[data-auth-card] .auth-password-toggle:hover { color: #d5d8de; }
.login-card[data-auth-card] .actions button { border-color: #2d6854; background: #347c63; box-shadow: none; font-weight: 400; }
.login-card[data-auth-card] .auth-switch { margin-top: 24px; color: #a1a5ac; font-weight: 300; }
.login-card[data-auth-card] [data-auth-switch-label] { font-weight: 400; }
.contact-card { position: relative; }
.contact-card h1 { padding-inline: 24px; }
.contact-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); font-size: 24px; text-decoration: none; }
.contact-close:hover { background: #ffffff08; color: var(--text); }
.contact-close:focus-visible, .contact-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-card .auth-form { gap: 16px; }
.contact-card textarea { width: 100%; min-height: 104px; resize: vertical; padding: 10px 13px; border: 1px solid #292d2e; border-radius: 10px; background: #232627; color: var(--text); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; }
.contact-card textarea::placeholder { color: #75817c; }
.contact-card textarea:focus { outline: 2px solid #93cbb466; outline-offset: 2px; border-color: var(--accent); }
.contact-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.contact-card .auth-divider { margin: 18px 0 12px; letter-spacing: 0; }
.contact-email { display: block; width: fit-content; max-width: 100%; margin-inline: auto; color: var(--accent); font-size: 14px; text-align: center; text-underline-offset: 4px; overflow-wrap: anywhere; }
.workspace-heading { font-size: clamp(26px, 4vw, 34px); }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; letter-spacing: -.03em; }
h2 { margin: 0 0 8px; font-size: 18px; }
.lede { margin: 16px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.auth-form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 650; }
input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; background: #151617; color: var(--text); font: inherit; }
input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* A design document's buttons (flow badges, section tabs) keep the live renderer's own look. */
button:not(.cp-button):not(:where(.saved-design-doc *)), .button-link { display: inline-block; border: 1px solid #438366; border-radius: 8px; padding: 11px 16px; background: linear-gradient(180deg,#2e7258,var(--cp-green)); color: #e1ece5; font: inherit; font-weight: 550; line-height: 1.3; text-decoration: none; cursor: pointer; transition: background .15s; }
.button-link:active, button:not(:where(.saved-design-doc *)):active { transform: translateY(1px); }
@media (hover:hover) and (pointer:fine) { button:not(.cp-button):not(:where(.saved-design-doc *)):hover, .button-link:hover { filter:brightness(1.08); } }
button:not(.cp-button):not(:where(.saved-design-doc *)):active,.button-link:active { background:#245e48; }
button:disabled { cursor: wait; opacity: .65; }
button.secondary, .button-link.secondary { border-color:#343a38; background:linear-gradient(180deg,#242827,#1e2221); color:#d3dfd8; }
button.secondary:active, .button-link.secondary:active { background:#2a302d; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-button { display: block; width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; background: var(--surface-strong); color: var(--text); font-weight: 750; text-align: center; text-decoration: none; }
.oauth-button:active { background:#2a302d; }
.compact { padding: 8px 12px; }
.status { min-height: 22px; margin: 0; color: var(--accent-strong); font-size: 14px; line-height: 1.5; }
.privacy-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.text-link { display: inline-block; margin-top: 18px; color: var(--accent-strong); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* A shared desktop under a single clip plane keeps the two views registered. */
.privacy-demo { text-align: center; scroll-margin-top: 120px; }
.privacy-demo .eyebrow { color: #a69ade; }
.privacy-demo h2 { max-width: none; font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.035em; }
.privacy-demo .section-lede { margin: 18px auto 0; max-width: 640px; }
.veil-stage { --veil-position: 72%; position: relative; max-width: 900px; margin: 48px auto 0; border: 2px solid #66696d; border-radius: 12px; box-shadow: 0 26px 90px #0007, 0 0 100px #9895ba0b; overflow: hidden; isolation: isolate; }
.veil-desktop { position: relative; aspect-ratio: 1.6; overflow: hidden; text-align: left; font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif; container-type: inline-size; background: radial-gradient(ellipse at 90% 115%, #64bc60 0%, transparent 54%), radial-gradient(ellipse at 4% 85%, #225629 0%, transparent 45%), linear-gradient(28deg, #173849 13%, #3558a3 14%, #46447c 43%, #706aa2 44%, #477fc4 70%, #5e94cb); }
.veil-menubar { height: 4.5%; padding: 0 1.5%; display: flex; align-items: center; justify-content: space-between; background: #17243f35; color: #fff; font-size: 1cqw; }
.veil-menubar > span { display: flex; align-items: center; gap: 1.1cqw; }
.veil-menubar .icon { width: 1.2cqw; height: 1.2cqw; }
.veil-editor { position: absolute; left: 3%; top: 19%; width: 79%; height: 76%; background: #1d2024; border: 1px solid #7776; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 25px #0008; }
.veil-titlebar { display: flex; align-items: center; justify-content: space-between; height: 3cqw; padding: 0 1.2cqw; background: #292c30; color: #a9acb2; font-size: 1cqw; }
.veil-lights { display: flex; gap: .45cqw; }
.veil-lights i { width: .75cqw; height: .75cqw; border-radius: 50%; background: #ff625a; }
.veil-lights i:nth-child(2) { background: #ffbd44; }
.veil-lights i:nth-child(3) { background: #00c84e; }
.veil-editor-body { display: flex; height: calc(100% - 5cqw); }
.veil-editor-body aside { width: 23%; flex-shrink: 0; padding: 1.5cqw; background: #202327; color: #a6abb3; font-size: 1.1cqw; }
.veil-editor-body aside > * { display: block; margin-bottom: 1.2cqw; }
.veil-editor-body aside small { font-size: .85cqw; letter-spacing: .1em; }
.veil-editor-body aside b { font-size: .95cqw; }
.veil-editor-body aside span { padding-left: 1cqw; }
.veil-editor-body aside span:first-of-type { color: #a8ddc5; }
.veil-source { min-width: 0; flex: 1; overflow: hidden; }
.veil-file { width: 15cqw; padding: .8cqw 1.2cqw; border-top: 1px solid #8ad7b1; font-size: 1.1cqw; color: #cdd1d7; }
.veil-file span { float: right; }
.veil-source .code { padding: 1cqw; font-size: 1.12cqw; line-height: 1.75; }
.veil-source .code-line { gap: 1cqw; }
.veil-source .ln { width: 2cqw; min-width: 2cqw; }
.veil-statusbar { height: 2cqw; padding: 0 1cqw; display: flex; align-items: center; justify-content: space-between; font-size: .85cqw; background: #2c343d; color: #bec5cf; }
.veil-app, .veil-cover { position: absolute; left: 46%; top: 30%; width: 50%; height: 60%; border: 2px solid #a5acb8; border-radius: 9px; overflow: hidden; box-shadow: 0 12px 30px #0007; }
.veil-app { background: #131819; color: #e8ecea; }
.veil-app .veil-titlebar { background: #24292b; }
.veil-app .veil-titlebar b { color: #a8dfc5; font-family: monospace; font-weight: 500; font-size: 1.25cqw; }
.veil-app-nav { display: flex; gap: 2.8cqw; padding: 1.1cqw 2cqw; border-bottom: 1px solid #ffffff15; font-size: 1.1cqw; color: #939e9b; }
.veil-app-nav b { color: #a6e3c8; font-weight: 500; }
.veil-app-content { padding: 1.4cqw 2.4cqw; font-size: 1.2cqw; line-height: 1.4; }
.veil-session { font-size: .85cqw; letter-spacing: .12em; color: #95bbaa; }
.veil-app-content h3 { font-size: 2.2cqw; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin: 1.1cqw 0; }
.veil-app-content p { font-size: 1.2cqw; line-height: 1.6; color: #a7b3b0; margin: 0; max-width: 35cqw; }
.veil-answer { margin-top: 1.4cqw; padding: 1.2cqw; border-left: 2px solid #80caa8; background: #a8d6bd08; }
.veil-answer small { display: block; font-size: .8cqw; color: #82948c; margin-bottom: .6cqw; letter-spacing: .12em; }
.veil-answer code { display: block; font-size: 1.1cqw; line-height: 1.65; color: #b0d3c5; }
.veil-complexity { display: flex; gap: 3cqw; margin-top: .8cqw; font-size: 1cqw; color: #8b9791; }
.veil-complexity b { margin-left: .6cqw; color: #b1cbbd; }
.veil-covered { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--veil-position)) 0 0); }
.veil-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; color: #e0e3e7; background: linear-gradient(115deg, #7a7d83, #535c68); }
.veil-cover-mark { font-size: 3cqw; line-height: 1; }
.veil-cover strong { font-size: 1.25cqw; font-weight: 500; }
.veil-cover > span:last-child { font-size: 1cqw; color: #c5c9d1; }
.veil-divider { position: absolute; top: 0; bottom: 0; left: var(--veil-position); width: 1px; background: #ffffff80; box-shadow: 0 0 20px #0003; }
.veil-divider span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cdd5da80; border-radius: 50%; background: #252c32c9; color: #fff; font-size: 13px; }
.veil-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.veil-stage:focus-within { outline: 3px solid #a4e6c5; outline-offset: 6px; }
.veil-captions { display: flex; justify-content: space-between; max-width: 900px; margin: 18px auto 0; color: #b2b7bb; font-size: 12px; }
.veil-captions i { display: inline-block; width: 6px; height: 6px; margin: 0 7px; border-radius: 50%; background: #a29cbe; vertical-align: middle; }
.veil-captions > span:last-child i { background: #92dcb6; }
.veil-instructions { margin: 26px 0 0; color: #939c9e; font-size: 12px; }
@media (max-width: 600px) { .veil-stage { margin-top: 30px; border-radius: 7px; } .veil-divider span { width: 26px; height: 26px; font-size: 11px; } .veil-instructions { max-width: 260px; margin: 24px auto 0; line-height: 1.7; } }

.app-frame { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.side-nav { position: sticky; top: var(--cp-header-height); min-height: calc(100vh - var(--cp-header-height)); max-height: calc(100vh - var(--cp-header-height)); overflow-y: auto; box-sizing: border-box; padding: 22px 14px 32px; border-right: 1px solid #1a1d1f; }
.side-group { margin: 22px 0 6px; padding: 0 12px; color: var(--text); font-size: 14px; font-weight: 700; }
.side-group:first-child { margin-top: 0; }
/* The Admin heading is not a link; the accent colour sets it apart from the entries. */
.side-group-admin { color: var(--accent); }
.side-nav a { display: block; padding: 9px 12px; border-radius: 8px; color: #b8bdc1; font-size: 15px; text-decoration: none; }
.side-nav a:hover { color: var(--text); background: var(--surface); }
.side-nav a[aria-current="page"] { color: var(--text); background: var(--surface-strong); }
.app-main { min-width: 0; }
/* Compact workspaces use the shared header dropdown. */
@media (max-width: 960px) {
  .app-frame { grid-template-columns:minmax(0,1fr); }
  .side-nav { display:none; }
}
.mark { width: 24px; height: 24px; flex: none; }
nav { display: flex; gap: 4px; }
nav a { padding: 8px 12px; border-radius: 8px; color: #b8bdc1; font-size: 16px; font-weight: 400; text-decoration: none; }
nav a:hover { color: var(--accent); }
/* The page you are on reads green, with no box around it. */
nav a[aria-current="page"] { background: transparent; color: var(--accent); }
.public-layout { width: min(1140px, calc(100% - 40px)); margin: 0 auto; padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 8vw, 96px); }
/* The pages linked from the header start the same distance below it as Pricing does (pricing.css). */
body:is([data-page="about"], [data-page="product"], [data-page="verification"]) .public-layout { padding-top: 36px; }
@media (max-width: 600px) { body:is([data-page="about"], [data-page="product"], [data-page="verification"]) .public-layout { padding-top: 24px; } }
/* Product leads with the landing hero, which brings its own top spacing and shell width. */
body[data-page="product"] .public-layout { padding-top: 0; }
#cp-one.product-hero { padding-bottom: 40px; }
#cp-one.product-hero .cp-shell { width: 100%; }
body[data-page="verification"] .public-layout { max-width: 1120px; }
.verification-intro { max-width: 790px; margin-bottom: 56px; }
.verification-intro h1 { font-size: clamp(29px, 3.8vw, 44px); line-height: 1.14; font-weight: 500; color: var(--cp-text); }
.verification-intro .lede { margin-bottom: 0; }
.verification-reviewer { max-width: 790px; margin-bottom: 48px; padding-left: 24px; border-left: 2px solid var(--accent); }
.verification-reviewer h2 { font-size: 22px; line-height: 1.3; }
.verification-reviewer > p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 16px 0 0; }
.verification-reviewer > p.verification-reviewer-scope { font-size: 12px; }
.verification-library-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.verification-library-heading h2 { font-size: 16px; }
.verification-library-heading > span { font-size: 13px; color: var(--muted); }
.verification-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.verification-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.verification-status { padding: 6px 10px; color: var(--accent); border: 1px solid #315b48; border-radius: 999px; background: #193027; }
.verification-copy h2 { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
.verification-description { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 16px 0 24px; }
.verification-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 0 0 24px; padding: 20px 0; border-block: 1px solid var(--border); }
.verification-stats div { display: flex; flex-direction: column-reverse; gap: 5px; }
.verification-stats dt { font-size: 12px; color: var(--muted); }
.verification-stats dd { margin: 0; font: 700 32px/1.1 var(--font-display); color: var(--accent); }
.verification-scope { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 24px; }
.verification-actions .button-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; padding: 12px 16px; }
.verification-filetype { font-size: 10px; opacity: .7; }
.verification-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.verification-figure { margin: 0; align-self: center; min-width: 0; }
.verification-figure a { display: block; border: 1px solid #39413e; border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.verification-figure a:hover { border-color: var(--accent); }
.verification-figure img { display: block; width: 100%; height: auto; }
.verification-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.verification-figure figcaption span { color: var(--accent); }
.verification-actions .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) {
  .verification-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .verification-figure { width: min(100%, 420px); justify-self: center; }
  .verification-intro { margin-bottom: 36px; }
}
@media (max-width: 420px) {
  .verification-actions { flex-direction: column; }
  .verification-actions .button-link { justify-content: center; }
}
body[data-page="landing"] .public-layout { padding-top: clamp(28px, 4vw, 56px); }
.hero { max-width: 720px; }
.hero .actions { align-items: center; margin-top: 28px; }
.story-closing .cp-button { text-decoration: none; }
.story-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; padding: 40px 0; border-top: 1px solid var(--border); }
.story-section h2, .story-closing h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; font-weight: 500; letter-spacing: -.025em; }
.story-copy p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 550; }
.story-copy h3:first-child { margin-top: 0; }
.story-closing { padding: 32px; border: 1px solid #30443a; border-radius: 14px; background: #13201a; }
.story-closing > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.6; }
.story-closing .actions { margin-top: 24px; }
@media (max-width: 700px) {
  .story-section { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 0; }
  .story-closing { padding: 24px; }
}
.inline-link { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.landing-hero { position: relative; max-width: none; padding-top: 0; text-align: center; }
.landing-hero .eyebrow { margin-bottom: 22px; font-size: 13px; font-weight: 500; letter-spacing: .2em; }
.landing-hero h1 { max-width: 960px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, ui-sans-serif, sans-serif; font-size: clamp(44px, 7.2vw, 78px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; color: #f3f4f5; text-wrap: balance; }
.landing-hero .h1-tail { display: block; color: #8fe0b8; }
.landing-hero .lede { max-width: 780px; margin: 26px auto 0; color: #aeb4ba; font-weight: 400; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; text-wrap: pretty; }
.landing-hero .actions { justify-content: center; gap: 20px; margin-top: 34px; }
.landing-hero .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 206px; height: 48px; padding: 0 22px; border-radius: 14px; font-size: 17px; text-align: center; }
.landing-hero .secondary { border-color: #2a2f33; }
.icon { width: 18px; height: 18px; flex: none; }
.mode-bar { position: relative; display: inline-flex; gap: 4px; margin: clamp(40px, 5.5vw, 60px) auto 0; padding: 6px; border: 1px solid #262b2f; border-radius: 999px; background: #121415; }
.mode-bar input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.mode-bar label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; border: 1px solid transparent; border-radius: 999px; color: #c3c9cf; font-size: 15px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.mode-bar label + input + label::before { content: ""; position: absolute; left: -2px; top: 25%; height: 50%; width: 1px; background: #2a2f33; }
.mode-bar label .icon { width: 17px; height: 17px; color: var(--accent); }
.mode-bar label:hover { color: var(--text); }
.mode-bar input:checked + label { border-color: var(--accent-deep); background: #6ee0ae14; color: #f3f4f5; box-shadow: 0 0 22px #6ee0ae30; }
.mode-bar input:checked + label::before, .mode-bar input:checked + label + input + label::before { display: none; }
.mode-bar input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-strong); font-size: 12px; color: var(--muted); }
.mock-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3e42; }
.mock-title { margin-left: 8px; font-weight: 700; color: var(--text); }
.mock-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--accent); font-weight: 700; }
.mock-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #6ee0ae33; }
.demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) 44px minmax(0, 1fr); margin: clamp(36px, 5vw, 52px) auto 0; scroll-margin-top: 96px; text-align: left; }
.demo::after { content: ""; position: absolute; left: 50%; top: calc(100% - 60px); width: 150%; height: 180px; z-index: -1; transform: translateX(-50%); border-top: 1px solid #6ee0ae80; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(ellipse 45% 100% at 50% 0%, #6ee0ae42, transparent 70%); pointer-events: none; }
.demo-top { display: contents; }
.demo-top > * { align-self: start; }
.monitor { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* The monitor: a grey bezel around a green-black screen. The bar and the
   screen are siblings, so each rounds its own outer corners inside the bezel. */
.monitor-frame { width: 100%; padding: 8px; border: 1px solid #3a403e; border-radius: 22px; background: linear-gradient(180deg, #282d2c, #1d2221); box-shadow: 0 30px 80px #000a, inset 0 1px 0 #ffffff12; }
.monitor-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border: 1px solid #1d2622; border-bottom: 0; border-radius: 12px 12px 0 0; background: #0f1412; font-size: 12.5px; color: #8d9a93; }
.monitor-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3a413e; }
.monitor-bar .dot:nth-child(1) { background: #ff5f57; } .monitor-bar .dot:nth-child(2) { background: #febc2e; } .monitor-bar .dot:nth-child(3) { background: #28c840; }
.monitor-live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--accent); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #6ee0ae2e, 0 0 10px #6ee0ae99; }
.monitor-screen { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 300px; border: 1px solid #1d2622; border-top: 0; border-radius: 0 0 12px 12px; background: #0b0e0d; overflow: hidden; }
.prompt-pane { padding: 16px 16px 14px; border-right: 1px solid #1d2622; background: #0d1210; }
.prompt-name { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #e6ede9; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.prompt-name .icon { width: 15px; height: 15px; color: #c9d3cd; }
.prompt-title { margin: 0 0 12px; color: #e8ede9; font-size: 14.5px; font-weight: 500; line-height: 1.42; }
.prompt-lines { margin: 0; padding: 0; list-style: none; counter-reset: prompt; color: #8d9a93; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.9; }
.prompt-lines li { counter-increment: prompt; display: flex; gap: 8px; }
.prompt-lines li::before { content: counter(prompt); flex: none; width: 10px; color: #4f5b55; }
.editor-pane { min-width: 0; }
.file-tabs { display: flex; border-bottom: 1px solid #1d2622; background: #0d1210; color: #8d9a93; font-family: var(--font-mono); font-size: 12px; }
.file-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-right: 1px solid #1d2622; }
.file-tab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.file-tab.current { color: #e6ede9; background: #0b0e0d; box-shadow: inset 0 2px 0 var(--blue); }
.file-tab.current::before { background: var(--blue); }
.code { margin: 0; padding: 14px; list-style: none; color: #dbe4de; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; }
.code-line { display: flex; gap: 12px; }
.code-line code { flex: 1; min-width: 0; overflow: hidden; white-space: pre; text-overflow: ellipsis; font: inherit; }
.ln { flex: none; width: 18px; text-align: right; color: #4f5b55; font-size: 11px; }
/* Periwinkle keywords, blue calls, mint types, amber numbers, italic grey comments. */
.code .k { color: #9aa6f5; } .code .f { color: #7ab0ff; } .code .t { color: var(--accent); } .code .b { color: #dbe4de; } .code .n { color: #f0b35a; } .code .s { color: #f0b35a; } .code .c { color: #6b7873; font-style: italic; }
.code-line.add { margin: 0 -14px; padding: 0 14px; background: #6ee0ae1a; box-shadow: inset 3px 0 0 var(--accent); }
.code-line.add .ln { color: var(--accent); }
.beam { position: absolute; left: 0; right: 0; top: -12px; height: 3px; border-radius: 2px; background: var(--accent-strong); box-shadow: 0 0 10px 2px #6ee0aecc, 0 0 30px 8px #6ee0ae55; opacity: 0; pointer-events: none; }
/* A thin neck down into a flat base, not a trapezoid. */
.monitor-stand { width: 38px; height: 30px; background: linear-gradient(180deg, #2b302f, #1d2221); }
.monitor::after { content: ""; width: 240px; height: 10px; border-radius: 4px 4px 10px 10px; background: #23282a; box-shadow: 0 6px 18px #000a; }
/* Dashed connectors, a mint pulse riding them. */
/* Dashed connectors sit UNDER the cards (z-index 0 against their 1), so the
   square that rides them slides fully behind a card at either end. */
.transfer { position: relative; z-index: 0; height: 0; margin-top: 160px; border-top: 1px dashed #56645d; }
.transfer-pulse { position: absolute; top: -5px; left: -10px; width: 10px; height: 10px; border-radius: 2px; background: var(--accent-strong); box-shadow: 0 0 10px 2px #6ee0ae88; opacity: 0; }
.transfer-down { grid-column: 3; justify-self: center; width: 0; height: 40px; margin-top: 0; border-top: 0; border-left: 1px dashed #56645d; }
.transfer-down .transfer-pulse { top: -10px; left: -5px; }
/* Persistent context: green-black card on a faint dot grid, mint accents. */
.memory { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #3a5546; border-radius: 20px; background: radial-gradient(circle at 1px 1px, #6ee0ae1c 1px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(180deg, #0e1512, #0a100d); box-shadow: 0 0 0 1px #6ee0ae14, 0 24px 60px #0007; }
.memory-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; border-bottom: 1px solid #1f2c25; color: #e6ede9; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.memory-title { display: inline-flex; align-items: center; gap: 10px; }
.memory-title .icon { width: 18px; height: 18px; color: var(--accent); }
/* Two counts stacked in one cell: the resting count shows until the new
   sources arrive, then the full count. Without motion only the full count shows. */
.memory-count { display: inline-grid; color: var(--accent); font-size: 11.5px; font-weight: 500; text-align: right; }
.memory-count > span { grid-area: 1 / 1; }
.memory-count .count-resting { opacity: 0; }
.statement { padding: 14px 16px 6px; border: 1px solid #2c4437; border-radius: 14px; background: #0f1714; }
.statement-title { margin: 0 0 4px; color: #e2e9e4; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.statement-rows { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: fact; }
.statement-rows li { display: grid; grid-template-columns: 20px 112px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #1e2b25; color: #98a49d; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; }
/* A check box per task: mint for the one already known, grey for the new ones. */
.statement-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #33403a; border-radius: 5px; background: #1a2320; color: #7d8a83; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.statement-check::before { content: "\2713"; }
.statement-check.done { border-color: #3f7a58; background: #1d3a2c; color: #9fe6c0; }
.statement-file { color: #8fe0b8; font-family: var(--font-mono); font-size: 11.5px; }
.mem-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.mem-card { position: relative; display: block; padding: 20px 14px 14px; border: 1px solid #2c4437; border-radius: 12px; background: #0f1714; color: #a2ada6; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; }
.mem-file { position: absolute; top: -11px; left: 12px; padding: 3px 9px; border-radius: 7px; background: #8fe0b8; color: #0d1a13; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.mem-text { color: #a2ada6; }
.app { position: relative; z-index: 1; grid-column: 1 / -1; border: 1px solid #6ee0ae36; border-radius: 16px; background: linear-gradient(180deg, #111514, #0e1110); box-shadow: 0 0 0 1px #6ee0ae0a, 0 0 24px #6ee0ae14, 0 30px 80px #000a; overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #1f2a25; color: var(--muted); font-size: 13px; }
.app-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-family: var(--font-display); font-weight: 700; }
.app-brand img { display: block; width: auto; height: 28px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: #161a18; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.file-select { color: var(--text); font-size: 11px; letter-spacing: 0; }
.file-count { color: var(--accent); }
.caret { margin-top: -4px; color: var(--muted); font-size: 13px; line-height: 1; }
.app-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 14px 0; list-style: none; }
.app-tab { padding: 10px 12px; border: 1px solid #1f2a25; border-radius: 10px; background: #0d100f; color: #6f7a75; font-size: 12.5px; }
.tab-index { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; }
.app-tab.current { border-color: var(--accent-deep); background: #6ee0ae12; color: var(--text); box-shadow: 0 0 18px #6ee0ae22; }
.app-tab.current .tab-index { color: var(--accent); }
.approach { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; margin: 12px 14px 0; padding: 10px 14px; border-left: 3px solid var(--amber); border-radius: 4px 10px 10px 4px; background: #14171a; }
.approach-label { color: var(--amber); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.approach p { margin: 0; color: #d5dade; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; }
.impl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 14px 0; padding-top: 12px; border-top: 1px solid #1f2a25; }
.impl-title { color: var(--text); font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.impl-title::before { content: "</>"; margin-right: 8px; color: var(--accent); font-family: var(--font-mono); }
.impl-meta { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.impl { display: grid; gap: 10px; padding: 12px 14px 0; }
.region { position: relative; border: 1px solid #262a2d; border-radius: 10px; background: #0d100f; }
.region::before { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: 10px; pointer-events: none; }
.region .code { padding: 8px 12px; }
.region-badge { position: absolute; top: 10px; right: 12px; padding: 4px 9px; border-radius: 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.region-change::before { border-color: #e0b25a99; box-shadow: 0 0 22px #e0b25a1a; }
.region-change .region-badge { background: var(--amber); color: #2a1e08; }
.region-add::before { border-color: #6ee0ae99; box-shadow: 0 0 22px #6ee0ae1f; }
.region-add .region-badge { background: var(--accent); color: #102017; }
.kept { display: flex; align-items: center; gap: 12px; margin: 12px 14px 14px; padding: 10px 14px; border: 1px solid #1f2a25; border-radius: 10px; background: #0d100f; color: var(--muted); font-size: 12.5px; }
.kept-label { flex: none; color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; max-width: 1060px; margin: clamp(56px, 7vw, 84px) auto 0; padding: 0; list-style: none; text-align: left; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: clamp(72px, 10vw, 120px) 0 0; padding: 0; list-style: none; text-align: center; }
.pillars li { display: grid; justify-items: center; gap: 6px; padding: 0 12px; }
.pillar-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border: 1px solid #243029; border-radius: 16px; background: linear-gradient(180deg, #171c19, #111412); color: var(--accent); box-shadow: 0 10px 30px #0006, inset 0 1px 0 #ffffff0a; }
.pillar-icon .icon { width: 24px; height: 24px; }
.pillars h3 { margin: 0; font-size: 17px; }
.pillars p { margin: 0; max-width: 240px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.process li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.process li + li::before { content: "›"; position: absolute; top: 2px; left: -20px; color: #3d4a44; font-size: 22px; line-height: 1; }
.process-index { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--accent-deep); border-radius: 50%; color: var(--accent); font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.process h3 { margin: 5px 0 4px; font-size: 15px; }
.process p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.editor-mock { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: #131415; overflow: hidden; text-align: left; }
.editor-mock { box-shadow: 0 30px 90px #0009; }
.ed-lines { margin: 0; padding: 12px 12px 10px; list-style: none; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.ed-line { position: relative; display: flex; gap: 12px; align-items: center; margin: 2px 0; padding: 2px 8px 2px 6px; border: 1px solid transparent; border-radius: 5px; }
.ed-line code { flex: 1; min-width: 0; overflow: hidden; white-space: pre; text-overflow: ellipsis; color: #d5dade; }
.ed-num { width: 18px; flex: none; text-align: right; color: #5c6470; font-size: 11px; }
.ed-line.tracked { border-color: #6ee0aeaa; background: #6ee0ae0d; }
.ed-line.uncertain { border-color: #e0a15acc; background: #e0a15a12; }
.ed-line.uncertain code { color: #f2cf9a; }
.ed-line.unseen { border: 1px dashed #3a3f45; min-height: 23px; }
.ed-line.unseen code { color: transparent; }
.ed-status { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-strong); color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; }
.ed-warn { color: #e0a15a; }
.band { margin-top: clamp(72px, 10vw, 128px); }
.band h2 { margin: 0; max-width: 820px; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.band-memory { position: relative; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); border: 1px solid #6ee0ae33; border-radius: 24px; background: linear-gradient(180deg, #6ee0ae0f, transparent 60%), var(--surface); }
.band-memory .feature-grid { margin-top: 28px; }
.section-lede { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: event; }
.tl-event { position: relative; padding: 18px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.tl-event::before { content: ""; position: absolute; top: -13px; left: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.tl-event time { display: block; margin-bottom: 8px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.tl-event h3 { font-size: 15px; }
.tl-event p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.timeline::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: -8px; background: linear-gradient(90deg, var(--accent), var(--border)); }
.context-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: 8px; }
.context-copy h3 { margin-top: 30px; font-size: 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 26px; height: 14px; border-radius: 4px; border: 1px solid #6ee0aeaa; background: #6ee0ae0d; }
.swatch.uncertain { border-color: #e0a15acc; background: #e0a15a12; }
.swatch.unseen { border: 1px dashed #3a3f45; background: transparent; }
.switching { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.switching li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.switching strong { color: var(--text); }
.switching span { color: var(--muted); }
.context-note { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1.6; }
.compare-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.compare thead th { border-top: 0; padding-top: 18px; padding-bottom: 14px; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.compare thead .compare-us { color: var(--accent); }
.compare tbody th { width: 150px; color: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.compare td { color: var(--muted); }
.compare td:last-child { color: var(--text); background: #6ee0ae08; box-shadow: inset 3px 0 0 var(--accent); }
.compare-note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 36px; }
.feature { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s, transform .15s; }
.feature:hover { background:var(--surface-strong); }
#download-title { font-size:clamp(24px,6vw,36px); letter-spacing:-.03em; }
body[data-page="download"] .notice { border-left:1px solid var(--border); }
.feature h2 { font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 24px 24px 24px 64px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.step-index { position: absolute; top: 22px; left: 22px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #102017; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.workspace { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--surface-strong), var(--surface)); }
.workspace .plan-list { margin-top: 12px; gap: 8px; font-size: 14px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 36px; }
.trust-item { padding: 22px 22px 22px 26px; border-left: 3px solid var(--accent); border-radius: 4px 14px 14px 4px; background: var(--surface); }
.trust-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.free-line { margin: 16px 0 0; color: var(--accent-strong); font-size: 17px; font-weight: 700; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }
.pricing-grid .panel { margin-top: 0; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px; }
.plan-card h3 { font-size: 22px; }
.plan-card .price { font-size: clamp(32px, 3vw, 44px); line-height: 1.15; }
.plan-card .price small { display: block; margin: 6px 0 0; white-space: nowrap; line-height: 1.3; }
.plan-card .plan-badge { position: static; align-self: flex-start; margin-bottom: 12px; }
.plan-description { min-height: 3.3em; }
.plan-card .plan-list { flex: 1; align-content: start; }
.plan-card .button-link { display: block; margin-top: 26px; text-align: center; }
.featured-plan { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-badge { position: absolute; top: 18px; right: 18px; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: #102017; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pack-card { position: relative; display: flex; flex-direction: column; padding: 24px; }
.pack-card .plan-list { flex: 1; }
.pack-card .button-link { display: block; margin-top: 20px; text-align: center; }
.pack-heading { margin: 40px 0 0; font-size: 22px; }
.price-note { display: block; margin-top: 8px; color: var(--muted); font-family: var(--font-body, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.plan-best-for { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.price { margin: 18px 0 0; font-size: clamp(36px, 6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.panel .price { color: var(--text); }
.price small { margin-left: 4px; color: var(--muted); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.pricing-note { max-width: 720px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.plan-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.plan-list li { display: flex; gap: 12px; align-items: baseline; color: var(--muted); line-height: 1.55; }
.plan-list li::before { content: "•"; color: var(--accent); font-weight: 800; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq details:first-of-type { margin-top: 28px; }
.faq summary { padding: 18px 36px 18px 0; position: relative; cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent-strong); }
.faq details p { margin: 0 0 20px; max-width: 720px; color: var(--muted); line-height: 1.65; }
.closing { padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px); border: 1px solid var(--border); border-radius: 24px; background: radial-gradient(ellipse 70% 80% at 50% 100%, #6ee0ae1a, transparent 70%), var(--surface); text-align: center; }
.closing h2, .closing .section-lede { margin-left: auto; margin-right: auto; }
.closing .actions { justify-content: center; margin-top: 26px; }
.closing .secondary, .landing-hero .secondary { border-color: #4a5055; }
.closing .secondary { background: var(--surface-strong); }
.closing .button-link { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 50px; padding: 0 24px; font-size: 16px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px #6ee0ae33; } 50% { box-shadow: 0 0 0 6px #6ee0ae11; } }
  .ed-line { animation: line-in .5s both; animation-delay: calc(var(--i, 0) * 120ms); }
  .ed-line[data-line="1"] { --i: 1; } .ed-line[data-line="2"] { --i: 2; } .ed-line[data-line="3"] { --i: 3; } .ed-line[data-line="4"] { --i: 4; }
  .ed-line[data-line="5"] { --i: 5; } .ed-line[data-line="6"] { --i: 6; } .ed-line[data-line="7"] { --i: 7; } .ed-line[data-line="8"] { --i: 8; }
  .ed-line[data-line="9"] { --i: 9; } .ed-line[data-line="10"] { --i: 10; } .ed-line[data-line="11"] { --i: 11; } .ed-line[data-line="12"] { --i: 12; }
  .ed-line[data-line="13"] { --i: 13; } .ed-line[data-line="14"] { --i: 14; } .ed-line[data-line="15"] { --i: 15; } .ed-line[data-line="16"] { --i: 16; }
  .tl-event { animation: rise .6s both; animation-delay: calc(var(--i, 0) * 140ms); }
  .tl-event[data-index="1"] { --i: 1; } .tl-event[data-index="2"] { --i: 2; } .tl-event[data-index="3"] { --i: 3; } .tl-event[data-index="4"] { --i: 4; }
  @keyframes scan { 0% { top: -12px; opacity: 0; } 3.3% { top: -12px; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 50% { top: calc(100% + 24px); opacity: 1; } 52.5% { top: calc(100% + 24px); opacity: 0; } 100% { top: calc(100% + 24px); opacity: 0; } }
  @keyframes transfer { 0% { opacity: 1; left: -10px; } 49.99% { opacity: 1; left: 100%; } 50%, 100% { opacity: 0; left: 100%; } }
  @keyframes transfer-down { 0%, 49.99% { opacity: 0; top: -10px; } 50% { opacity: 1; top: -10px; } 100% { opacity: 1; top: 100%; } }
  @keyframes count-resting { 0%, 55% { opacity: 1; } 56%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
  @keyframes count-all { 0%, 55% { opacity: 0; } 56%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
  @keyframes blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px #6ee0ae33, 0 0 10px #6ee0aeaa; } 50% { opacity: .3; box-shadow: 0 0 0 0 #6ee0ae00, 0 0 0 #6ee0ae00; } }
  @keyframes memory-glow { 0%, 49% { border-color: #3a5546; box-shadow: 0 0 0 1px #6ee0ae14, 0 24px 60px #0007; } 56%, 93.5% { border-color: var(--accent-deep); box-shadow: 0 0 0 1px #6ee0ae55, 0 0 48px #6ee0ae33, 0 24px 60px #0007; } 100% { border-color: #3a5546; box-shadow: 0 0 0 1px #6ee0ae14, 0 24px 60px #0007; } }
  @keyframes mem-card-1 { 0%, 50% { opacity: 0; transform: translateY(14px) scale(.97); } 56.1% { opacity: 1; transform: translateY(-2px) scale(1.01); } 57.8%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(14px) scale(.97); } }
  @keyframes mem-card-2 { 0%, 52.2% { opacity: 0; transform: translateY(14px) scale(.97); } 58.3% { opacity: 1; transform: translateY(-2px) scale(1.01); } 60%, 93.5% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(14px) scale(.97); } }
  @keyframes app-glow { 0%, 58% { border-color: #6ee0ae36; box-shadow: 0 0 0 1px #6ee0ae0a, 0 0 24px #6ee0ae14, 0 30px 80px #000a; } 66%, 95% { border-color: #6ee0ae80; box-shadow: 0 0 0 1px #6ee0ae2a, 0 0 40px #6ee0ae30, 0 0 70px #6ee0ae14, 0 30px 80px #000a; } 100% { border-color: #6ee0ae36; box-shadow: 0 0 0 1px #6ee0ae0a, 0 0 24px #6ee0ae14, 0 30px 80px #000a; } }
  @keyframes region-in { 0%, 60% { opacity: 0; } 70%, 93.5% { opacity: 1; } 98%, 100% { opacity: 0; } }
  @keyframes tabs-dim { 0%, 60% { opacity: 1; } 74%, 93.5% { opacity: .4; } 100% { opacity: 1; } }
  .beam { animation: scan 9s linear infinite both; }
  /* One 4 s linear cycle for both connectors: the square crosses the first
     line, vanishes under the card, and the next appears on the second line. */
  .transfer-pulse { animation: transfer 4s linear infinite both; }
  .transfer-down .transfer-pulse { animation-name: transfer-down; }
  .memory-count .count-resting { animation: count-resting 9s steps(1, end) infinite both; }
  .memory-count .count-all { animation: count-all 9s steps(1, end) infinite both; }
  .statement-row[data-index="1"] { animation: mem-card-1 9s cubic-bezier(.2, .7, .2, 1) infinite both; }
  .statement-row[data-index="2"] { animation: mem-card-2 9s cubic-bezier(.2, .7, .2, 1) infinite both; }
  .live-dot { animation: blink 2s ease-in-out infinite; }
  .memory { animation: memory-glow 9s ease-in-out infinite both; }
  .mem-card[data-index="1"] { animation: mem-card-1 9s cubic-bezier(.2, .7, .2, 1) infinite both; }
  .mem-card[data-index="2"] { animation: mem-card-2 9s cubic-bezier(.2, .7, .2, 1) infinite both; }
  .app { animation: app-glow 9s ease-in-out infinite both; }
  .region::before, .region-badge { animation: region-in 9s ease-in-out infinite both; }
  .app-tab:not(.current) { animation: tabs-dim 9s ease-in-out infinite both; }
  .mock-live::before { animation: pulse 2s infinite; }
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand .mark { width: 18px; height: 18px; }
.legal { max-width: 720px; }
.legal p { margin: 18px 0 0; color: var(--muted); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Section headings group with the text they introduce, not the text above. */
.legal h2 { margin: 44px 0 0; line-height: 1.35; }
.legal h1 + h2, .legal h2 + h2 { margin-top: 12px; }
.legal h2 + p, .legal h2 + ul { margin-top: 10px; }
.notice { margin: 0 0 22px; padding: 13px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.5; }
.notice.warning { border-left-color: #e0a15a; }
.checksum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }
.site-footer { width: min(1140px, calc(100% - 40px)); margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 28px 0 32px; color: var(--muted); font-size: 13px; }
.page-layout { min-width: 0; padding: 14px clamp(16px, 2vw, 32px) 64px; }
.page-layout > .status { margin: 0 0 4px; font-size: 13px; }
.page-copy { max-width: none; }
.panel { margin-top: 32px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.panel p { margin: 0; color: var(--muted); line-height: 1.65; }
.danger-zone { border-color: #654747; }
.billing-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.panel .token-balance { margin: 12px 0 4px; color: var(--text); font-family: var(--font-display); font-size: clamp(32px, 5vw, 42px); font-weight: 500; letter-spacing: -.02em; }
.panel .token-notice { margin: 8px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.panel .token-notice[data-level="critical"], .panel .token-notice[data-level="empty"] { border-color: var(--accent); color: var(--text); font-weight: 700; }
.token-details, .token-activity { display: grid; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; color: var(--muted); }
.activity-heading { margin: 18px 0 0; font-size: 16px; }
.deletion-confirmation { margin: 20px 0 14px; }
.danger-zone strong { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.empty-state { border-style: dashed; }
[hidden] { display: none !important; }
.history-shell { margin-top: 34px; }
.history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.history-heading p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.privacy-chip { flex: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.history-list { display: grid; gap: 12px; margin-top: 18px; }
.history-item { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.history-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; }
.history-item-copy { min-width: 0; }
.history-item-title { overflow: hidden; margin: 0; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-transform: capitalize; }
.history-actions { display: flex; flex: none; gap: 8px; }
button.danger { border-color: #765050; background: transparent; color: #f1b1b1; }
.danger:hover, .danger[data-confirming="true"] { border-color: #c66; background: #512e2e; color: #fff; }
.solution-region { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.solution-list { display: grid; gap: 12px; padding-top: 18px; }
.solution-card { padding: 18px; border-radius: 10px; background: #17191a; }
.solution-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.solution-heading h3 { margin: 0; font-size: 16px; }
.solution-version { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.solution-output { max-height: 440px; overflow: auto; margin: 14px 0 0; border-top: 1px solid var(--border); padding-top: 14px; color: #dfe4e7; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.solution-empty { margin: 18px 0 0; color: var(--muted); }
.solution-more, .load-more { margin-top: 16px; }
.history-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 18px; }
.history-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.history-search { flex: 1 1 260px; }
.history-controls input, .history-controls select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.history-created { color: var(--text); }
.history-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.history-page { color: var(--muted); font-size: 13px; }
@media (max-width: 880px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .transfer-down, .app { grid-column: 1; }
  .monitor-stand, .monitor::after { display: none; }
  .transfer { width: 0; height: 36px; margin: 0 auto; border-top: 0; border-left: 1px dashed #56645d; }
  .transfer-pulse { display: none; }
  .transfer-down { justify-self: auto; }
}
@media (max-width: 640px) {
  .auth-card { padding: 28px 22px; }
  body:has(> .login-layout) { min-height: 100svh; }
  .login-layout { padding: 12px 16px; }
  .login-card { padding: 22px 18px 20px; }
  .login-card[data-auth-card] { padding-bottom: 14px; }
  .login-card h1 { font-size: 22px; }
  .login-card .lede.auth-legal { margin: 8px 0 16px; }
  .login-card .auth-divider { margin: 14px 0; }
  .login-card .auth-form { gap: 14px; }
  .login-card input, .login-card .actions button { height: 42px; font-size: 16px; }
  .login-card .auth-field-heading { gap: 8px; }
  .login-card .actions { margin-top: 0; }
  .login-card .auth-switch { margin-top: 16px; }
  .login-card[data-auth-card] .auth-switch { margin-top: 20px; }
  .contact-card textarea { min-height: 96px; font-size: 16px; }
  .monitor-screen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .prompt-pane { border-right: 0; border-bottom: 1px solid #1d2622; }
  .landing-hero .actions, .closing .actions { flex-direction: column; align-items: stretch; }
  .landing-hero .button-link, .closing .button-link { text-align: center; }
  .mode-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; border-radius: 18px; }
  .mode-bar label { gap: 6px; padding: 8px 11px; font-size: 13px; }
  .mode-bar label::before { display: none; }
  .app-tabs { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .app-tab { flex: none; }
  .approach { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .impl-meta { margin-left: 0; }
  .region { display: flex; flex-direction: column; }
  .region-badge { position: static; order: -1; align-self: flex-start; margin: 10px 12px 0; }
  .kept { align-items: flex-start; flex-direction: column; gap: 6px; }
  .process { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .process li + li::before { display: none; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .timeline::before { display: none; }
  .tl-event::before { display: none; }
  .context-grid { grid-template-columns: minmax(0, 1fr); }
  .switching li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 6px 0 12px; border-top: 1px solid var(--border); }
  .compare tbody th { padding: 12px 16px 4px; border-top: 0; }
  .compare td { padding: 6px 16px; border-top: 0; }
  .compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .compare td:last-child { box-shadow: none; background: transparent; }
  .compare td:last-child::before { color: var(--accent); }
  .plan-badge { position: static; display: inline-block; margin-bottom: 10px; align-self: flex-start; }
  .plan-description { min-height: 0; }
  .history-heading, .history-summary { align-items: stretch; flex-direction: column; }
  .history-actions { flex-wrap: wrap; }
  .history-actions button { flex: 1; }
}
.workspace-heading { font-weight:550; letter-spacing:-.04em; }
/* Account pages share the landing palette and a restrained content hierarchy. */
body:is([data-page="account"],[data-page="usage"],[data-page="billing"]) .page-copy { max-width:1060px; margin:0 auto; }
.account-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.account-overview .panel { min-width:0; }
.panel h2 { margin:0 0 16px; font-size:20px; font-weight:550; letter-spacing:-.025em; }
.panel > .button-link,.panel > button { margin-top:18px; }
.panel .detail-note { margin-top:16px; font-size:13px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.section-heading .text-link { font-size:14px; }
.status-pill { padding:3px 9px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px; }
.panel .plan-summary { font-size:22px; color:var(--text); margin-bottom:8px; }
.token-activity li { padding:10px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; font-size:14px; }
.billing-contact { color:var(--muted); overflow-wrap:anywhere; }
.usage-chart { max-height:280px; overflow-y:auto; margin-top:16px; }
.usage-day { display:grid; grid-template-columns:100px minmax(60px,1fr) 50px; align-items:center; gap:16px; padding:6px 0; font-size:13px; }
.usage-day meter { width:100%; height:16px; accent-color:var(--accent); }
.usage-day strong { text-align:right; font-weight:500; }
.unavailable-setting { display:flex; gap:10px; align-items:center; margin-top:16px; color:var(--muted); font-size:14px; }
.unavailable-setting input { width:auto; margin:0; }
@media (max-width:700px) { .account-overview { grid-template-columns:minmax(0,1fr); gap:0; } .panel { padding:20px; margin-top:20px; } .billing-actions { align-items:stretch; flex-direction:column; } .billing-actions select { width:100%; } }

        /* ---- interactive design document (the SD view) --------------------
           The same document the PNG renderer draws, as real DOM: the section
           containers collapse, and the architecture diagram's flow badges
           toggle. Built at the image's own 2000px geometry and scaled to the
           viewport, so nothing is re-proportioned — every px below comes from
           design.py through interactive_design.css_tokens().

           .saved-design is what scrolls and what the fixed top bar clears; .saved-design-doc is
           the scaled 2000px canvas. The host's height is set in JS, because a
           transform does not change layout size. */
        .saved-design {
            display: none;
            position: relative;
            overflow: hidden;
            /* Both paddings are rewritten by sdChrome() from the MEASURED top
               bar and stream window — the two viewers have different bar
               geometry and the stream is only sometimes on screen. These are
               the pre-measurement fallbacks: enough to clear a ~43px bar. */
            padding-top: calc(51px + env(safe-area-inset-top));
            padding-bottom: 0;
            /* The page fill lives HERE, not on .saved-design-doc: that element is
               `transform: scale()`d to fit the viewport, so a gradient on it
               would scale with the content and land differently on every
               screen. --canvas-grad is optional (a coding document ships one,
               a design document does not) and falls back to the flat base. */
            background: var(--canvas-grad, var(--canvas-bg, #0a0807));
        }
        .saved-design-doc {
            position: relative;
            box-sizing: border-box;
            width: var(--document-width, 2000px);
            transform-origin: top left;
            transform: scale(var(--fit, 1));
            /* Transparent so the host's fill shows through — see above. */
            background: transparent;
            /* No synthetic weights or slants: PIL never fakes them, and the
               server measured every wrap against the real face. */
            font-synthesis: none;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: antialiased;
        }
        /* Every text run is placed absolutely at the y the PNG renderer
           computed, with the line already wrapped server-side — `pre` so the
           browser cannot introduce a break of its own. line-height is the
           font's ascent+descent (NOT the +4 leading), which zeroes the
           half-leading and puts the baseline exactly where PIL's draw.text
           puts it. */
        .sdl {
            position: absolute;
            white-space: pre;
        }
        .sdl.w, .sdw { text-shadow: 1px 0 0 currentColor; }
        .sdbox { position: absolute; box-sizing: border-box; }
        .sddot { position: absolute; border-radius: 50%; }
        /* Goal and Guarantees keep their measured stacked geometry, but the
           outer problem-framing card is now their only visible container. */
        .sdguar, .sdgoal {
            position: absolute;
            box-sizing: border-box;
            background: none;
            border: 0;
        }
        /* Pro/con row marker. A square, not the PNG's +/- glyph — this view
           deliberately diverges there. */
        .sdsq { position: absolute; border-radius: 1px; }
        /* Section container. Collapsing swaps its height for the header's and
           hides the body; nothing inside is re-laid-out. The border width is
           --sd-bw, set by fitDesign(): the doc is a scaled 2000px canvas, so a
           plain 1px border renders sub-pixel after the transform and vanishes
           on phone/iPad — the var compensates by the scale.
           Its surface, border color and radius deliberately match arceus's
           analysis `.card`, so every system-design section shares that one
           container grammar. */
        .sdcard {
            position: absolute;
            box-sizing: border-box;
            background: var(--surface-1);
            border: var(--sd-bw, 1px) solid var(--border-subtle);
            border-radius: var(--section-radius, 16px);
            overflow: hidden;
            /* `top` travels too: a tab switch inside SYSTEM ARCHITECTURE moves
               that card's height by ~550px, and without this the cards below
               teleport to their final y while it is still growing. (A collapse
               has always had the same seam at ~90px.) It cannot fire on first
               paint — cards are positioned inside a DocumentFragment, so there
               is no prior computed style to transition from. */
            transition: height 0.16s ease, top 0.16s ease;
        }
        /* No per-section surface overrides: goal, tradeoff, architecture and
           detail cards all use arceus's analysis-container surface above. */
        .sdcard.goalcard, .sdcard.archcard { background: var(--surface-1); }
        /* No text-shadow: this used to carry the browser twin of the PNG's 2px
           overdraw, which faked ~600 weight out of Poppins-Regular. The gold
           headers render in real Poppins-Bold now (design._load_sect_title_font
           + interactive_design's "sect" -> SolverTitle role), and a bold face
           under a smear reads as a blur. */
        .sdhead {
            position: absolute;
            left: var(--section-pad, 30px);
            color: var(--accent-gold);
            white-space: pre;
        }
        /* These are the two headings shared with arceus. At the document's
           normal 0.5-ish fit, 33 document px is arceus's 17 CSS px; use its
           Poppins-Regular face, normal weight and tracking without changing
           the server-owned header geometry. */
        .sdhead.arceushead {
            font-family: "SolverSect", system-ui, sans-serif;
            font-weight: 400;
            letter-spacing: 0.08em;
        }
        /* The problem-framing card has no header row in the image; it gets one
           only while collapsed, so there is something to read and hit. */
        .sdcard.goalcard .sdhead { display: none; }
        .sdcard.goalcard.closed .sdhead { display: block; }
        .sdcard.closed .sdbody { display: none; }
        .sdbody { position: absolute; left: 0; top: 0; right: 0; }
        /* Invisible whole-header hit band: clicking anywhere in a card's top
           portion toggles it, like the DOC view's .gsechead. Sized to the
           card's head_h by JS; header controls at z-index 2 win on top. */
        .sdhit {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        /* The SYSTEM ARCHITECTURE card's tab rail, in its BODY under the
           diagram — `.on` marks the open tab and sdCard swaps the panel below
           it. Absolute px like every other control: the doc is a scaled 2000px
           canvas, so vw units would be wrong here. Width and each pill's own
           width arrive inline from the JS packer; flex-wrap is the escape hatch
           for a label wider than the packer's estimate, because .sdcard clips
           (overflow:hidden) and a clipped tab is an unreachable tab. */
        .sdtabs {
            position: absolute;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            row-gap: 12px;
        }
        .sdtab {
            box-sizing: border-box;
            height: 46px;
            padding: 0 21px;
            background: rgba(255, 255, 255, 0.05);
            border: none;
            border-radius: 9px;
            color: #9aa1ac;
            font: 21px "JetBrains Mono", "SolverMono", ui-monospace, monospace;
            line-height: 46px;
            letter-spacing: 0.04em;
            white-space: nowrap;
            /* A mis-estimated label clips inside its own pill rather than
               spilling over the neighbour. */
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            touch-action: manipulation;
            transition: color 0.15s, background 0.15s;
        }
        /* Selection reads as the same surface, lifted: slightly brighter
           fill and brighter text — no accent color, no border. */
        .sdtab.on {
            color: #e0e4e8;
            background: rgba(255, 255, 255, 0.12);
        }
        @media (hover: hover) and (pointer: fine) {
            .sdtab:not(.on):hover {
                color: #d7dbde;
                background: rgba(255, 255, 255, 0.10);
            }
        }
        /* The open tab's content, hosted inside .sdbody. left/top:0 so sdItems
           can paint at the card's own coordinates with no offset arithmetic —
           .sdbody is itself left/top:0, and neither it nor .sdcard creates a
           stacking context.
           height:0 IS LOAD-BEARING. A transparent full-height overlay in that
           position hit-tests ABOVE the diagram, which kills every [data-node]
           hover (#sdtip) and every .sdbadge click. At height:0 the absolutely
           placed children still render and the panel's own hit box is a
           zero-area strip at the card's top edge. pointer-events:none is NOT
           the fix — it would also kill text selection in the panel. */
        .sdpanel {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 0;
        }
        /* A solid accent bar fills the top inside a flat frame — the PNG's
           four-sided top-lit gradient border is deliberately not mirrored
           here. Two padding-box layers: the bar paints over the interior
           gradient, and the radius clips its top corners for free. */
        .sdopt {
            position: absolute;
            box-sizing: border-box;
            border: 2px solid var(--opt-frame);
            border-radius: var(--card-radius, 14px);
            background:
                linear-gradient(to bottom, var(--opt-bar) 0,
                                var(--opt-bar) var(--opt-bar-h, 10px),
                                transparent var(--opt-bar-h, 10px)) padding-box,
                linear-gradient(var(--surface-option-top),
                                var(--surface-option-bot)) padding-box;
        }
        .sdopt.chosen {
            background:
                linear-gradient(to bottom, var(--opt-bar-chosen) 0,
                                var(--opt-bar-chosen) var(--opt-bar-h, 10px),
                                transparent var(--opt-bar-h, 10px)) padding-box,
                linear-gradient(var(--surface-option-top),
                                var(--surface-option-bot)) padding-box;
        }
        .sdletter {
            position: absolute;
            border-radius: 50%;
            background: var(--letter-bg);
            /* Dimmed 5% (was #fff). Unthemed, so it must be kept in step with
               the PNG's own letter glyph at design.py's _draw option block —
               they are twins, and SD desyncs from its image if only one moves. */
            color: #f2f2f2;
            text-align: center;
        }
        .sdopt.chosen .sdletter { background: var(--letter-bg-chosen); }
        /* arceus's bottom verdict box: normal mono text over the shared gray
           or green fill, with the matching solid token-colored ring. */
        .sdpill {
            position: absolute;
            box-sizing: border-box;
            background: var(--pill-bg);
            border: 2px solid var(--pill-border);
            border-radius: var(--pill-radius, 11px);
            color: var(--pill-fg);
            font-family: "SolverMono", ui-monospace, monospace;
            font-weight: 400;
            text-align: center;
        }
        .sdopt.chosen .sdpill {
            background: var(--pill-bg-chosen);
            border-color: var(--pill-border-chosen);
            color: var(--pill-fg-chosen);
        }
        /* arceus analysis coverage table, placed directly below the choice
           cards. Its rows remain explicit document-pixel geometry so adding
           the table does not introduce browser-dependent wrapping. */
        .sdcov {
            position: absolute;
            box-sizing: border-box;
        }
        .sdcovtitle {
            height: 40px;
            color: var(--accent-gold);
            font: 600 25px/40px "SolverMono", ui-monospace, monospace;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        .sdcovtable { margin-top: 14px; }
        .sdcovrow {
            box-sizing: border-box;
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr) 250px;
            border-bottom: var(--sd-bw, 1px) solid
                color-mix(in srgb, var(--border-subtle) 55%, transparent);
        }
        .sdcovrow.head {
            height: 50px;
            color: color-mix(in srgb, var(--text-goal) 78%, transparent);
            font: 600 23px/50px "SolverMono", ui-monospace, monospace;
            letter-spacing: 0.06em;
        }
        .sdcovcell {
            box-sizing: border-box;
            min-width: 0;
            padding: 14px 18px;
            color: var(--text-primary);
            font: 25px/34px "SolverSans", system-ui, sans-serif;
        }
        .sdcovrow.head .sdcovcell { padding-top: 0; padding-bottom: 0; }
        .sdcovstatus {
            color: var(--positive);
            font-family: "SolverMono", ui-monospace, monospace;
            font-weight: 700;
            text-align: center;
        }
        .sdcovkind {
            font-family: "SolverMono", ui-monospace, monospace;
        }
        .sdrec {
            background: var(--rec-bg);
            border: 2px solid var(--rec-border);
            border-radius: var(--rec-radius, 14px);
        }
        .sdcode {
            background: var(--surface-code);
            border: 1px solid var(--border-code);
            border-radius: var(--code-radius, 11px);
        }
        /* DATA MODEL table sub-containers use arceus's lighter schema-card
           surface, separating each table from the outer analysis-card fill. */
        .sdcode.sdschema { background: var(--surface-code); }
        /* The APIS `[Component]` header, as its own diagram box. Only the
           border WIDTH and style live here — the border color, the gradient
           fill and the radius all ride on the payload (the node's accent ramp),
           because a hex in a .sd* rule body is what the no-hex scan forbids.
           border-box: the overlay is positioned at an explicit width/height. */
        .sdapibox {
            box-sizing: border-box;
            border: 2px solid transparent;
        }
        /* A CRITICAL FLOWS subsection header, styled as the flow badge it
           names — enlarged. Same 9px radius and 2px ring as .sdbadge; the ring
           COLOR is set from JS (the flow's own badge color, or --flowhead-bd
           when the head resolves no flow), never here, so the .sd* no-hex scan
           stays satisfied. border-box because the strip is absolutely
           positioned at an explicit width/height. */
        .sdflowhead {
            box-sizing: border-box;
            /* Its bottom edge overlaps the body by a few document pixels. Keep
               the complete flow-colored ring in front of that neutral box. */
            z-index: 2;
            background: var(--flowhead-bg);
            border: 2px solid transparent;
            border-radius: var(--flowhead-radius, 9px);
            cursor: pointer;
        }
        .sdflowlabel { z-index: 3; cursor: pointer; }
        /* Flow color belongs to the top bar. The detail body completes the
           shape with only a quiet neutral frame on the remaining sides. */
        .sdcode.sdflowbody {
            border-top: 0;
            border-right-width: var(--sd-bw, 1px);
            border-bottom-width: var(--sd-bw, 1px);
            border-left-width: var(--sd-bw, 1px);
            border-radius: 0 0 var(--code-radius, 11px)
                              var(--code-radius, 11px);
        }
        /* One CRITICAL FLOWS container — flowhead strip plus its fences —
           grouped so a flow badge can dim it as a unit. Static and zero-height
           (every child is absolutely positioned against .sdpanel), so it adds
           no geometry. Much lighter than the diagram's 0.14: this is prose that
           should stay legible while unselected, not a line to push into the
           background. */
        .sdflowgrp { transition: opacity 0.18s ease; }
        .sdflowgrp.dim { opacity: 0.42; }
        .sddiagcard {
            background: var(--surface-1);
            border: 1px solid var(--border-code);
            border-radius: var(--code-radius, 11px);
        }
        .sdbadgebox {
            position: absolute;
            border-radius: 4px;
            background: var(--schema-badge-bg);
            color: var(--schema-badge-fg);
            text-align: center;
        }
        /* Additive, so the goal card's letter badges — which share
           .sdbadgebox and center on line-height — are untouched. Only the
           icon badges (the Notes pen) need to center an <svg>. */
        .sdbadgeicon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sdchip {
            padding: 0;
            border-radius: var(--chip-radius, 5px);
            background: var(--chip-bg);
            box-shadow: 0 0 0 1px var(--chip-border);
            color: var(--chip-fg);
        }
        /* ---- diagram + flow badges ---- */
        .sddiagram { position: absolute; }
        .sddiagram svg { display: block; }
        /* One predicate drives containers, nodes and edges alike: an element
           stays lit while any flow it belongs to is enabled, and all-enabled
           means everything is lit. */
        .archsvg [data-flows] { transition: opacity 0.18s ease; }
        .archsvg [data-flows].dim { opacity: 0.14; }
        .sdbadge {
            position: absolute;
            box-sizing: border-box;
            /* Above the whole-header .sdhit band (z-index 1), so a badge can
               never lose a tap to it. */
            z-index: 2;
            padding: 0;
            border-radius: 9px;
            border: 2px solid currentColor;
            font-family: "JetBrains Mono", "SolverMono", ui-monospace, monospace;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            /* The badges sit inside a scaled document; the tap target is
               enlarged with a transparent outset instead of by growing the
               badge, which would move it off the strip the PNG draws. */
            touch-action: manipulation;
            outline: 6px solid transparent;
            transition: opacity 0.18s ease, border-color 0.18s ease,
                background 0.15s;
        }
        /* Off dims the RING, not the label: the text holds just under the
           old hover brightness so the strip stays readable while unlit. */
        .sdbadge .sdlbl { transition: opacity 0.18s ease; }
        .sdbadge.off {
            border-color: color-mix(in srgb, currentColor 30%, transparent);
        }
        .sdbadge.off .sdlbl { opacity: 0.5; }
        .sdbadge:active { filter: brightness(1.35); }
        /* The all-flows pill leads the row in cream rather than a flow color,
           so it reads as a control over the badges and not as one of them.
           That is also why its CHECKED state sits dimmed: every flow being on
           is the default, and a fully lit pill there would read as the loudest
           thing in the strip while saying nothing. */
        .sdall { font-weight: 700; letter-spacing: 0.06em; }
        .sdall:not(.off) { opacity: 0.62; }
        /* Hover lifts any dimmed pill so it reads as reachable. Gated on a
           real pointer: iOS Safari leaves :hover stuck on the last tapped
           element, which would strand one badge brighter than the rest. */
        @media (hover: hover) and (pointer: fine) {
            .sdbadge.off:hover {
                border-color: color-mix(in srgb, currentColor 55%, transparent);
            }
            .sdbadge.off:hover .sdlbl { opacity: 0.65; }
            .sdall:not(.off):hover { opacity: 0.85; }
        }


.saved-design { display:block; width:100%; padding:0; margin-top:18px; position:relative; overflow:hidden; }
.saved-design-doc { position:relative; width:2000px; transform-origin:top left; font-synthesis:none; }
.saved-design svg { stroke:none; stroke-width:initial; fill:initial; vertical-align:initial; }
.saved-design .sddiagram > svg, .saved-design .sdbox > svg { width:100%; height:100%; max-width:none; max-height:none; }
.sd-saved-nav { position:absolute; right:0; top:0; height:46px; display:flex; align-items:center; gap:22px; }
.sd-saved-nav { color:#888; font:400 25px/1.2 'SolverSans',sans-serif; }
.sd-saved-nav > span { display:inline-flex; align-items:center; gap:10px; }
.sd-saved-nav .sd-key-chord { display:inline-flex; gap:5px; }
.sd-saved-nav kbd { display:inline-block; padding:3px 6px; border:2px solid #363636; border-radius:5px; background:#202020; color:#a8a8a8; font:400 24px/1 'SolverSans',sans-serif; }
.saved-design .sd-flow-number { position:absolute; left:-9px; top:-12px; display:grid; place-items:center; width:22px; height:22px; border:2px solid currentColor; border-radius:5px; background:#111613; font:500 16px/1 'SolverSans',sans-serif; }
.sv-detail.sv-design.sv-laptop { min-width:0; }
/* Coverage reads kind, item, check (no header row); the renderer orders the cells. */
.saved-design .sdcov.saved .sdcovrow { grid-template-columns:220px minmax(0,1fr) 72px; }
/* MAIN and RELIABILITY & SCALING text reads at the coverage item's size and weight. */
.saved-design .sdpanel:is([data-tab="MAIN"], [data-tab^="reliability" i]) .sdl { font-size:25px!important; font-weight:400; }
.saved-design .sdpanel:is([data-tab="MAIN"], [data-tab^="reliability" i]) .sdl span { text-shadow:none!important; }

.sv-detail { --sv-text:#e4e8e6; --sv-muted:#9aa29e; --sv-line:#2a2d2f; --sv-card:#141516; --sv-card-border:#24282b;
  --sv-accent:#6ee0ae; --sv-bug:#f08a8a; --sv-edge:#e6b566; color:var(--sv-text); font-size:14px; line-height:1.55; }
.sv-detail * { box-sizing:border-box; }
.sv-detail.sv-laptop { min-width:820px; }
.sv-scroll { overflow-x:auto; }
.sv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sv-head h1 { margin:8px 0 4px; color:var(--sv-text); font-size:24px; line-height:1.25; font-weight:650; letter-spacing:-.01em; }
.sv-meta { margin:0; color:var(--sv-muted); font-size:13px; }
.sv-badges { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.sv-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border:1px solid var(--sv-card-border); border-radius:999px; background:#1b1f1e; color:#c9d3ce; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.sv-badge-session { color:#9fd8ff; border-color:#27435a; background:#14212b; }
.sv-badge-snapshot { color:#e6c78c; border-color:#4a3c22; background:#211b12; }
.sv-badge-question { color:#a8e8c9; border-color:#28493a; background:#132219; }
.sv-badge-company { padding:0; color:#b8bfbc; border-color:transparent; background:transparent; text-transform:none; letter-spacing:0; }
.sv-layout-toggle { flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--sv-card-border); border-radius:8px; background:#1b1f1e; color:var(--sv-text); font:inherit; font-size:12px; cursor:pointer; }
.sv-layout-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sv-navigation { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.sv-navigation .ws-back, #desktop-solutions .sv-navigation .ds-solutions-back { margin:0; }
.sv-tabs { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--sv-card-border); border-radius:9px; background:#101313; }
.sv-tabs button { padding:7px 20px; border:0; border-radius:6px; background:transparent; color:var(--sv-muted); font-family:inherit; font-size:13px; font-weight:600; line-height:1.5; cursor:pointer; }
.sv-tabs button[aria-selected="true"] { background:#2a3430; color:#e3eee7; box-shadow:0 1px 3px #0004; }
.sv-tabs button:disabled { opacity:.45; cursor:default; }
.sv-detail button:focus-visible { outline:2px solid var(--sv-accent); outline-offset:3px; }
.sv-detail [hidden] { display:none!important; }
.sv-section { margin-top:30px; }
.sv-label { display:flex; align-items:center; gap:12px; margin:0 0 22px; color:var(--sv-muted); font:600 11px/1.5 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.sv-label::after { content:""; flex:1; height:1px; background:var(--sv-line); }
.sv-problem-text p { margin:0 0 10px; white-space:pre-wrap; }
.sv-summary { margin:0 0 16px; color:#bdc4c0; }
.sv-insight { margin:0 0 16px; font-size:15px; }
.sv-split { display:grid; grid-template-columns:45fr 55fr; gap:16px; align-items:start; }
.sv-mobile .sv-split, .sv-split.sv-single { grid-template-columns:minmax(0,1fr); }
.sv-why, .sv-steps { margin:0; padding:0; list-style:none; }
.sv-why { padding:6px 16px; border:1px solid var(--sv-card-border); border-radius:10px; background:var(--sv-card); }
.sv-why li { display:flex; gap:10px; padding:10px 0; }
.sv-why li + li { border-top:1px solid #ffffff09; }
.sv-mark { flex:none; display:inline-flex; width:17px; height:17px; margin-top:3px; color:#5f9e74; }
.sv-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.sv-mark-bug { color:#bb668c; }
.sv-mark-edge { color:#e6b566; }
.sv-mark-alternative { color:#d3b47e; }
.sv-steps { display:grid; gap:10px; counter-reset:sv-step; }
.sv-steps > li { padding:12px 16px; border:1px solid var(--sv-card-border); border-radius:10px; background:var(--sv-card); }
.sv-step-label { display:flex; align-items:center; gap:10px; margin-bottom:6px; color:#c7e9a6; font-weight:600; }
.sv-num { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:#22332c; color:var(--sv-accent); font-size:12px; font-weight:700; }
.sv-row { margin:4px 0 0 32px; font:13px/1.55 'JetBrains Mono',ui-monospace,monospace; color:#d6dbd8; }
.sv-row.sv-bullet::before { content:"• "; color:var(--sv-accent); }
.sv-chip { padding:1px 5px; border-radius:5px; background:#212121; color:#de8481; box-shadow:0 0 0 1px #373737; box-decoration-break:clone; -webkit-box-decoration-break:clone; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.92em; }
.sv-files { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.sv-files button { padding:6px 11px; border:1px solid var(--sv-card-border); border-radius:7px; background:transparent; color:var(--sv-muted); font:inherit; font-size:12px; cursor:pointer; }
.sv-files button[aria-pressed="true"] { background:#22332c; color:var(--sv-accent); border-color:#2f4a3b; }
.sv-implementation { border:1px solid #252729; border-radius:10px; overflow:hidden; background:#121212; }
.sv-implementation > .sv-label { padding:12px 16px; margin:0; background:#181818; border-bottom:1px solid #252729; color:#c9cfd8; font-family:inherit; font-size:14px; font-weight:650; line-height:1.5; letter-spacing:0; }
.sv-implementation > .sv-label::after { display:none; }
.sv-implementation .sv-files { margin:12px 16px; }
.sv-code { margin:0; padding:12px 0; overflow:auto; background:#121212; color:#bababf; font:500 13px/1.65 'SolverMono','JetBrains Mono',ui-monospace,monospace; tab-size:4; }
.sv-code > .sv-code-row { display:flex; min-width:max-content; white-space:pre; }
.sv-code-row::before { content:attr(data-n); flex:none; width:44px; margin-right:14px; padding-right:10px; text-align:right; color:#6e7781; border-right:1px solid #222726; user-select:none; }
.sv-code-source { display:block; position:relative; padding-right:16px; }
.sv-indent { position:absolute; top:0; bottom:0; width:1px; background:#2e3339; pointer-events:none; }
.sv-comment { display:inline-block; transform:skewX(-11.86deg); }
.sv-mobile .sv-code > .sv-code-row { min-width:0; }
.sv-mobile .sv-code-source { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.sv-complexities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sv-complexities.sv-single { grid-template-columns:minmax(0,1fr); }
.sv-complexity { min-width:0; padding:16px; border:1px solid #252729; border-radius:10px; background:linear-gradient(180deg,#131415,#0f1011); }
.sv-complexity h2 { margin:0 0 12px; color:#c9cfd8; font-size:14px; text-transform:uppercase; }
.sv-runtime { margin:0; font-size:18px; color:#d3d6d4; overflow-wrap:anywhere; white-space:pre-wrap; }
.sv-complexity ul { margin:8px 0 0; padding-left:17px; color:var(--sv-muted); }
.sv-complexity li { overflow-wrap:anywhere; }
.sv-tests { display:grid; gap:24px; }
.sv-test { min-width:0; }
.sv-test h3 { margin:0 0 10px; color:#b6d887; font-size:16px; font-weight:600; }
.sv-test > .sv-code { padding:12px 14px; border:1px solid #30383d; border-radius:9px; background:#181a1b; }
.sv-test .sv-code-row::before { display:none; }
.sv-test-io { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:10px 0 0; }
.sv-test-cell { min-width:0; padding:12px 14px; border:1px solid #282d31; border-radius:8px; background:#101215; }
.sv-test-cell.sv-expected { border-left:4px solid #4b7d33; }
.sv-test dt { margin:0 0 6px; color:#969da3; font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.sv-test dd { margin:0; color:#d6dbd8; font:13px/1.6 'SolverMono','JetBrains Mono',ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.sv-tests-section > .sv-label { padding:12px 16px; margin:0 0 18px; border:1px solid #252729; border-radius:9px; background:linear-gradient(180deg,#131415,#0f1011); color:#c9cfd8; letter-spacing:0; font-family:inherit; font-size:14px; font-weight:650; line-height:1.5; }
.sv-tests-section > .sv-label::after { display:none; }
/* Saved answers use the live session's hierarchy inside the Mac shell. */
#desktop-solutions .sv-detail.sv-laptop { min-width:0; }
#desktop-solutions .sv-detail h1 { color:#d0d2d2; font:650 20px/1.3 var(--ds-sans); }
#desktop-solutions .sv-section { margin-top:18px; }
#desktop-solutions .sv-approach > .sv-label { display:none; }
#desktop-solutions .sv-split { border:1px solid #252729; border-radius:10px; padding:16px; background:linear-gradient(180deg,#131415,#0f1011); }
#desktop-solutions .sv-why { border:0; border-radius:0; padding:0 16px 0 0; background:none; }
#desktop-solutions .sv-steps { border-left:1px solid #343a3f; padding-left:16px; }
#desktop-solutions .sv-steps > li { padding:0 0 12px; border:0; border-bottom:1px solid #343a3f; border-radius:0; background:none; }
#desktop-solutions .sv-steps > li:last-child { border-bottom:0; padding-bottom:0; }
#desktop-solutions .sv-step-label { color:#dfb774; font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; }
#desktop-solutions .sv-num { background:#dfb774; color:#29251d; border-radius:4px; min-width:18px; height:18px; padding:0 4px; }
#desktop-solutions .sv-chip { background:#212121; color:#de8481; }
#desktop-solutions .sv-tests-section { border:1px solid #252729; border-radius:10px; padding:0 16px 16px; }
#desktop-solutions .sv-tests-section > .sv-label { margin:0 -16px 16px; border:0; border-bottom:1px solid #252729; border-radius:9px 9px 0 0; }
.sv-plain p { margin:0 0 10px; white-space:pre-wrap; }
.sv-empty { color:var(--sv-muted); }
.sv-list { display:grid; gap:10px; }
.sv-item { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:1px solid #24282b; border-radius:10px; background:#141516; color:#e4e8e6; text-align:left; text-decoration:none; font:inherit; cursor:pointer; }
.sv-item:hover { background:#191b1d; }
.sv-item-copy { flex:1; min-width:0; }
.sv-item-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.sv-item-copy small { display:block; margin-top:3px; color:#9aa29e; font-size:12px; }
.sv-item .sv-badges { flex:none; align-self:stretch; justify-content:space-between; min-height:42px; }
.sv-version { color:#b8bfbc; font-size:12px; }
.sv-heading-copy { display:flex; align-items:center; gap:14px; min-width:0; }
.sv-type-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:10px; color:#a5d8c1; background:#203c30; }
.sv-type-icon.sv-type-design { color:#aac9ed; background:#233747; }
.sv-type-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px) { .sv-item { flex-wrap:wrap; } .sv-item .sv-badges { margin-left:auto; } .sv-head { flex-wrap:wrap; } }

/* The Mac app's tokens, read by the Mac screens re-scoped below. */
body.customer-workspace { --ds-text:#edf0ef; --ds-muted:#aeb8bd; --ds-subtle:#96a8b1; --ds-accent:#82dfb6; --ds-input:#242727;
  --ds-hover:#303635; --ds-quiet-surface:#191b1a; --ds-hairline:#222225; --ds-quiet-border:#222225; --ds-tint:#203e30;
  --ds-sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --ds-mono:'JetBrains Mono',ui-monospace,monospace; }
.customer-workspace .ws-back { display:inline-block; margin:0; color:var(--muted); font-size:13px; text-decoration:none; }
.customer-workspace .ws-back:hover { color:var(--text); }
.customer-workspace .sv-badge-dot { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.75; }
.customer-workspace .sv-heading-copy { align-items:flex-start; }
.customer-workspace .sv-head h1 { margin-top:2px; }
.customer-workspace .sv-problem-part + .sv-problem-part { margin-top:30px; }
.customer-workspace .sv-problem-card { padding:16px 18px; border:1px solid #2a2d2f; border-radius:10px; background:#181a1b;
  color:var(--text); font:400 14px/1.7 'JetBrains Mono',ui-monospace,monospace; }
.customer-workspace .sv-problem-card p { margin:0 0 12px; color:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.customer-workspace .sv-problem-card p:last-child { margin-bottom:0; }
.customer-workspace .sv-tests-section { padding:0 16px 16px; border:1px solid #252729; border-radius:10px; background:#121212; }
.customer-workspace .sv-tests-section > .sv-label { margin:0 -16px 16px; border:0; border-bottom:1px solid #252729; border-radius:9px 9px 0 0; }
@media (max-width:600px) { .customer-workspace .sv-problem-card { padding:14px; font-size:13px; } }
/* Problem / Solution: the Mac app's segmented switch (shell_ui DESKTOP_SEGMENTED_CSS). */
.customer-workspace .sv-detail .sv-tabs { display:inline-flex; align-items:center; max-width:100%; gap:0; padding:3px; border:0; border-radius:7px;
  background:var(--ds-quiet-surface); box-shadow:none; }
.customer-workspace .sv-detail .sv-tabs > button { flex:1 0 auto; min-width:0; min-height:0; margin:0; padding:7px 14px; border:0; border-radius:5px;
  background:transparent; color:var(--ds-muted); box-shadow:none; font:500 11px/1.2 var(--ds-sans); text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.customer-workspace .sv-detail .sv-tabs > button[aria-selected="true"] { background:#293b30; color:#c9e9cd; box-shadow:none; }
.customer-workspace .sv-detail .sv-tabs > button:disabled { opacity:.55; cursor:default; }
/* A design's section tabs wear the Mac app's palette over the renderer's geometry. */
.customer-workspace .saved-design .sdtabs > .sdtab { background:var(--ds-quiet-surface); color:var(--ds-muted); box-shadow:none; }
.customer-workspace .saved-design .sdtabs > .sdtab.on { background:#293b30; color:#c9e9cd; }

  .customer-workspace .ws-collection { --sl-line: var(--ds-quiet-border); --sl-ctl: #232728; --sl-ctl-line: #303635; --sl-ctl-line-hover: #3a4140; --sl-ink-2: #c4cdcf; --sl-ink-4: #8b959a;
    --sl-neutral-bg: #25292a; --sl-neutral-ink: #b9c2c1; --sl-mint-bg: #1d3329; --sl-mint-ink: #9fdcbd; --sl-blue-bg: #1f2f40; --sl-blue-ink: #a9cbf3;
    --sl-plum-bg: #2d2534; --sl-plum-ink: #d3b7e4; --sl-rose-bg: #352128; --sl-rose-ink: #f0a9bd; --sl-list-fill: #141516; }
  .customer-workspace .ws-collection .ds-page-head { margin-bottom: 24px; }
  .customer-workspace .ws-collection .ds-page-head h1 { font-weight: 600; }
  .customer-workspace .ws-collection .ds-page-head .lede { font: 400 13px/1.5 var(--ds-sans); }
  /* Search and sort, as on the Session Log: the search a step darker than other inputs, the
     control hairline inset, mint on focus; the order menu is the shell's pill + listbox. */
  .customer-workspace .ws-collection .ds-solutions-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
  .customer-workspace .ws-collection .ds-solutions-search { position: relative; display: flex; flex: 1; min-width: 0; }
  .customer-workspace .ws-collection .ds-solutions-search svg { position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; color: var(--ds-subtle); pointer-events: none; }
  #ws-solutions-query { width: 100%; min-width: 0; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 13px 0 42px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 8px; background: #1b1e1f; box-shadow: inset 0 0 0 1px var(--sl-ctl-line); color: var(--ds-text); font: 400 13px/1.3 var(--ds-sans); }
  #ws-solutions-query::placeholder { color: var(--ds-subtle); font-weight: 400; }
  #ws-solutions-query:focus { outline: 0; background: #191c1d; box-shadow: inset 0 0 0 1px #3f7a62; }
  #ws-solutions-query:focus::placeholder { color: transparent; }
  .customer-workspace .ws-collection .ds-sort { position: relative; flex: none; }
  #ws-solutions-sort { display: flex; align-items: center; gap: 18px; min-height: 40px; margin: 0; padding: 0 13px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--sl-ctl-line); background: var(--ds-input); color: #c3cbcc; cursor: pointer; font: 400 13px/1.3 var(--ds-sans); }
  #ws-solutions-sort .echev { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--ds-subtle); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #ws-solutions-sort:hover, #ws-solutions-sort[aria-expanded="true"] { background: var(--ds-hover); color: var(--ds-text); }
  #ws-solutions-sortpanel { position: absolute; top: calc(100% + 5px); right: 0; z-index: 10003; min-width: 100%; padding: 4px 0; box-sizing: border-box; border: 1px solid #303633; border-radius: 8px; background: #181a1b; box-shadow: 0 14px 40px #0007; color: var(--ds-text); font: 400 13px/1.4 var(--ds-sans); }
  #ws-solutions-sortpanel[hidden] { display: none !important; }
  #ws-solutions-sortpanel .ds-option { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
  #ws-solutions-sortpanel .ds-option:hover, #ws-solutions-sortpanel .ds-option:focus-visible { background: var(--ds-hover); outline: 0; }
  #ws-solutions-sortpanel .ds-option.active { color: var(--ds-accent); }
  /* Source chips on the left, type chips on the right, with counts: 28px pills, each lit chip in the
     tone of what it turns on. The chips say which sources and types are on. */
  .customer-workspace .ws-collection .ds-solutions-chips { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
  .customer-workspace .ws-collection .ds-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .customer-workspace .ws-collection .ds-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; height: 28px; margin: 0; padding: 0 11px; border: 0; border-radius: 999px; background: var(--sl-ctl); color: #9aa5a7; font: 500 12px/1 var(--ds-sans); cursor: pointer; white-space: nowrap; }
  .customer-workspace .ws-collection .ds-filter:not(.active):hover { background: #2a2f2e; color: var(--sl-ink-2); }
  .customer-workspace .ws-collection .ds-filter [data-count] { opacity: .7; font-variant-numeric: tabular-nums; }
  .customer-workspace .ws-collection .ds-filter.active[data-source="all"] { background: var(--sl-ctl-line); color: var(--ds-text); }
  .customer-workspace .ws-collection .ds-filter.active[data-source="session"], .customer-workspace .ws-collection .ds-filter.active[data-type="coding"] { background: var(--sl-mint-bg); color: var(--sl-mint-ink); }
  .customer-workspace .ws-collection .ds-filter.active[data-source="question"] { background: var(--sl-plum-bg); color: var(--sl-plum-ink); }
  .customer-workspace .ws-collection .ds-filter.active[data-source="snapshot"] { background: var(--sl-rose-bg); color: var(--sl-rose-ink); }
  .customer-workspace .ws-collection .ds-filter.active[data-type="system_design"] { background: var(--sl-blue-bg); color: var(--sl-blue-ink); }
  .customer-workspace .ws-collection .ds-solutions-status { min-height: 18px; margin: 0 0 8px; color: var(--ds-muted); font: 400 13px/1.4 var(--ds-sans); }
  .customer-workspace .ws-collection .ds-solutions-status:empty { display: none; }
  /* One list container, one row height (58px, the Session Log's), ten rows a page. */
  .customer-workspace .ws-collection .ds-solution-list { display: block; gap: 0; background: var(--sl-list-fill); border: 1px solid var(--sl-line); border-radius: 12px; overflow: hidden; }
  .customer-workspace .ws-collection .ds-solution-list:empty { display: none; }
  .customer-workspace .ws-collection .ds-solution { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 15px; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 58px; height: 58px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
  .customer-workspace .ws-collection .ds-solution + .ds-solution { border-top: 1px solid rgba(255, 255, 255, .05); }
  .customer-workspace .ws-collection .ds-solution:hover { background: var(--ds-quiet-surface); }
  .customer-workspace .ws-collection .ds-solution:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
  /* Where the answer came from: a round tile in the source's hue (a square tile is a session's type). */
  .customer-workspace .ws-collection .ds-source-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sl-neutral-bg); color: var(--sl-neutral-ink); }
  .customer-workspace .ws-collection .ds-source-tile svg { width: 15px; height: 15px; }
  .customer-workspace .ws-collection .ds-source-tile.session { background: var(--sl-mint-bg); color: var(--sl-mint-ink); }
  .customer-workspace .ws-collection .ds-source-tile.snapshot { background: var(--sl-rose-bg); color: var(--sl-rose-ink); }
  .customer-workspace .ws-collection .ds-source-tile.question { background: var(--sl-plum-bg); color: var(--sl-plum-ink); }
  .customer-workspace .ws-collection .ds-solution-body { min-width: 0; }
  .customer-workspace .ws-collection .ds-solution-title { display: block; margin: 0 0 3px; color: var(--ds-text); font: 500 14px/18px var(--ds-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The source badge (its company after a middle dot), then the type badge: 11px, 6px corners. */
  .customer-workspace .ws-collection .ds-solution-badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; }
  .customer-workspace .ws-collection .ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 0; border-radius: 6px; background: var(--sl-neutral-bg); color: var(--sl-neutral-ink); font: 500 11px/16px var(--ds-sans); letter-spacing: .01em; white-space: nowrap; }
  .customer-workspace .ws-collection .ds-badge.session, .customer-workspace .ws-collection .ds-badge.coding { background: var(--sl-mint-bg); color: var(--sl-mint-ink); }
  .customer-workspace .ws-collection .ds-badge.snapshot { background: var(--sl-rose-bg); color: var(--sl-rose-ink); }
  .customer-workspace .ws-collection .ds-badge.question { background: var(--sl-plum-bg); color: var(--sl-plum-ink); }
  .customer-workspace .ws-collection .ds-badge.system_design { background: var(--sl-blue-bg); color: var(--sl-blue-ink); }
  .customer-workspace .ws-collection .ds-solution-when { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--sl-ink-4); font: 400 12px/1.4 var(--ds-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .customer-workspace .ws-collection .ds-solution-date { color: var(--sl-ink-2); font: 500 12px/1.4 var(--ds-sans); letter-spacing: .02em; }
  .customer-workspace .ws-collection .ds-chev { width: 15px; height: 15px; color: var(--sl-ink-4); }
  /* The pager row under the list: page buttons in the middle, the range at the right. */
  .customer-workspace .ws-collection .ds-solutions-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 16px 0 0; }
  .customer-workspace .ws-collection .ds-solutions-pager[hidden] { display: none; }
  .customer-workspace .ws-collection .ds-pages { display: flex; align-items: center; gap: 10px; grid-column: 2; }
  .customer-workspace .ws-collection [data-solutions-page] { padding: 0; color: var(--ds-muted); font: 400 12px/1.4 var(--ds-sans); }
  .customer-workspace .ws-collection .ds-solutions-range { grid-column: 3; justify-self: end; color: var(--ds-muted); font: 400 12px/1.4 var(--ds-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .customer-workspace .ws-collection .ds-pagebtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; min-width: 30px; height: 30px; min-height: 30px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: #202425; color: #b9c2c1; box-shadow: none; cursor: pointer; transition: background .12s, color .12s; }
  .customer-workspace .ws-collection .ds-pagebtn:hover:not(:disabled) { background: #2c3132; color: #e6eae8; }
  .customer-workspace .ws-collection .ds-pagebtn:disabled { background: #171a1b; color: #4f5659; opacity: 1; cursor: default; }
  .customer-workspace .ws-collection .ds-pagebtn svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
  .customer-workspace .ws-collection .ds-solutions-empty { padding: 24px; border: 1px solid var(--sl-line); border-radius: 12px; color: var(--ds-muted); }
  .customer-workspace .ws-collection .ds-solutions-empty h2 { margin: 0 0 6px; color: var(--ds-text); font: 600 15px/1.4 var(--ds-sans); }
  .customer-workspace .ws-collection .ds-card.empty { padding: 22px 18px; color: var(--ds-muted); text-align: center; }
  @media (max-width: 760px) { .customer-workspace .ws-collection .ds-solutions-chips { flex-wrap: wrap; } }
  .customer-workspace .ws-collection .ds-solutions-back { margin-bottom: 18px; }
  .customer-workspace .ws-collection .sv-detail { font-family: var(--ds-sans); }


  /* Carbon History: ten compact rows, one neutral palette, no date groups. */
  .customer-workspace .ws-history { color: var(--ds-text); font: 13px/1.45 var(--ds-sans); }
  .customer-workspace .ws-history .ds-archive-tools { display: flex; align-items: center; gap: 10px; }
  .customer-workspace .ws-history .ds-archive-search { position: relative; display: flex; flex: 1; min-width: 0; }
  .customer-workspace .ws-history .ds-archive-search svg { position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; color: var(--ds-subtle); pointer-events: none; }
  /* The search field a step darker than the other inputs, the control hairline inset; focus turns it mint. */
  #ws-history-query { width: 100%; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 13px 0 42px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 8px; background: #1b1e1f; box-shadow: inset 0 0 0 1px #303635; color: var(--ds-text); font: 400 13px/1.3 var(--ds-sans); }
  #ws-history-query::placeholder { color: var(--ds-subtle); font-weight: 400; }
  #ws-history-query:focus { outline: 0; background: #191c1d; box-shadow: inset 0 0 0 1px #3f7a62; }
  #ws-history-query:focus::placeholder { color: transparent; }
  .customer-workspace .ws-history .ds-sort { position: relative; flex: none; }
  #ws-history-sort { display: flex; align-items: center; gap: 18px; min-height: 40px; margin: 0; padding: 0 13px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px #303635; background: var(--ds-input); color: #c3cbcc; cursor: pointer; font: 400 13px/1.3 var(--ds-sans); }
  #ws-history-sort .echev { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--ds-subtle); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #ws-history-sort:hover, #ws-history-sort[aria-expanded="true"] { background: var(--ds-hover); color: var(--ds-text); }
  #ws-history-sortpanel { position: absolute; top: calc(100% + 5px); right: 0; z-index: 10003; min-width: 100%; padding: 4px; box-sizing: border-box; border: 0; border-radius: 8px; background: var(--ds-input); box-shadow: 0 14px 40px #0007; color: var(--ds-text); font: 400 13px/1.4 var(--ds-sans); }
  #ws-history-sortpanel[hidden] { display: none !important; }
  #ws-history-sortpanel .ds-option { width: 100%; padding: 9px 12px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
  #ws-history-sortpanel .ds-option:hover { background: var(--ds-hover); }
  #ws-history-sortpanel .ds-option.active { color: var(--ds-accent); }
  .customer-workspace .ws-history .ds-archive-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
  .customer-workspace .ws-history .ds-archive-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
  /* Chips: 28px pills; an unselected chip is still readable. The chips say which kinds are on:
     All on means Coding and Design on too, each lit in its own tone (mint, blue). */
  .customer-workspace .ws-history .ds-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; height: 28px; margin: 0; padding: 0 11px; border: 0; border-radius: 999px; background: #232728; color: #9aa5a7; font: 500 12px/1 var(--ds-sans); cursor: pointer; white-space: nowrap; }
  .customer-workspace .ws-history .ds-filter:not(.active):hover { background: #2a2f2e; color: #c4cdcf; }
  .customer-workspace .ws-history .ds-filter [data-count] { opacity: .7; font-variant-numeric: tabular-nums; }
  .customer-workspace .ws-history .ds-filter.active[data-type="all"] { background: #303635; color: var(--ds-text); }
  .customer-workspace .ws-history .ds-filter.active[data-type="coding"] { background: #1d3329; color: #9fdcbd; }
  .customer-workspace .ws-history .ds-filter.active[data-type="system_design"] { background: #1f2f40; color: #a9cbf3; }
  .customer-workspace .ws-history button:disabled { opacity: .45; cursor: default; }
  #ws-history-status { margin-top: 12px; color: var(--ds-muted); }
  #ws-history-status:empty { display: none; }
  #ws-history-list { margin-top: 12px; }
  /* One list container, one row height (58px, the Solutions page's), ten rows a page. A log is a
     timeline: the session tiles sit on one rail. */
  #ws-history-list:has(.ds-session) { overflow: hidden; background: #141516; border: 1px solid var(--ds-quiet-border); border-radius: 12px; }
  #ws-history-list .ds-session { border-radius: 0; }
  #ws-history-list .ds-session + .ds-session { border-top: 1px solid rgba(255, 255, 255, .05); }
  .customer-workspace .ws-history .ds-session { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; box-sizing: border-box; min-height: 58px; height: 58px; padding: 0 12px; margin: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; transition: background .12s; }
  .customer-workspace .ws-history .ds-session:hover { background: var(--ds-quiet-surface); }
  .customer-workspace .ws-history .ds-session::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: #262b2b; }
  .customer-workspace .ws-history .ds-session:first-child::before { top: 50%; }
  .customer-workspace .ws-history .ds-session:last-child::before { bottom: 50%; }
  /* Type tile: tinted fill, no outline. Mint is coding, blue is system design, rose is Code Review. */
  .customer-workspace .ws-history .ds-sessionicon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; box-sizing: border-box; border: 0; background: #1d3329; color: #9fdcbd; }
  .customer-workspace .ws-history .ds-sessionicon.system_design { background: #1f2f40; color: #a9cbf3; }
  .customer-workspace .ws-history .ds-sessionicon.code_review { background: #3a2630; color: #e7a5b9; }
  .customer-workspace .ws-history .ds-sessionicon svg { width: 17px; height: 17px; }
  .customer-workspace .ws-history .ds-session-body { min-width: 0; }
  .customer-workspace .ws-history .ds-session-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 3px; }
  .customer-workspace .ws-history .ds-session-titlerow[hidden] { display: none !important; }
  .customer-workspace .ws-history .ds-session-title { min-width: 0; margin: 0; color: var(--ds-text); font: 500 14px/18px var(--ds-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-workspace .ws-history .ds-rename { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ds-muted); cursor: pointer; opacity: 0; }
  .customer-workspace .ws-history .ds-session:hover .ds-rename, .customer-workspace .ws-history .ds-session:focus-within .ds-rename { opacity: 1; }
  .customer-workspace .ws-history .ds-rename:hover { background: var(--ds-hover); color: var(--ds-text); }
  .customer-workspace .ws-history .ds-rename svg { width: 13px; height: 13px; }
  .customer-workspace .ws-history .ds-session-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .customer-workspace .ws-history .ds-solvebadge { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: var(--ds-subtle); background: transparent; font: 400 11px/15px var(--ds-sans); white-space: nowrap; }
  .customer-workspace .ws-history .ds-solvebadge.live { color: var(--ds-accent); }
  /* The newest solve's model and the solve count: 11px badges with 6px corners, no border; the
     count carries the solution spark before its number, so the badge says what it counts. */
  .customer-workspace .ws-history .ds-modelbadge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; background: #25292a; color: #b9c2c1; font: 500 11px/16px var(--ds-sans); letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .customer-workspace .ws-history .ds-countbadge { min-width: 0; text-align: center; background: #25292a; color: #b9c2c1; }
  .customer-workspace .ws-history .ds-countbadge::before { content: ""; width: 11px; height: 11px; background: currentColor; opacity: .8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.3 6.7L21 12l-6.7 2.3L12 21l-2.3-6.7L3 12l6.7-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.3 6.7L21 12l-6.7 2.3L12 21l-2.3-6.7L3 12l6.7-2.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* The title leads the row; the date is metadata, not an accent. */
  .customer-workspace .ws-history .ds-session-when { display: block; color: #8b959a; font: 400 12px/1.4 var(--ds-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .customer-workspace .ws-history .ds-session-date { color: #c4cdcf; font-weight: 500; font-size: 12px; letter-spacing: .02em; }
  .customer-workspace .ws-history .ds-session-error { margin: 6px 0 0; color: #f1b1b1; font-size: 12px; }
  .customer-workspace .ws-history .ds-chev { width: 15px; height: 15px; color: #8b959a; }
  .customer-workspace .ws-history .ds-rename-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
  .customer-workspace .ws-history .ds-rename-field { flex: 1; min-width: 0; box-sizing: border-box; min-height: 30px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px #3f7a62; color: var(--ds-text); background: var(--ds-input); font: 400 13px/1.3 var(--ds-sans); }
  .customer-workspace .ws-history .ds-rename-count { flex: none; color: var(--ds-muted); font: 400 11px/1.2 var(--ds-mono); }
  .customer-workspace .ws-history .ds-rename-count.over { color: #f1b1b1; }
  .customer-workspace .ws-history .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; border: 0; color: var(--ds-subtle); }
  .customer-workspace .ws-history .pager[hidden] { display: none; }
  #ws-history-range { flex: none; align-self: center; margin-left: auto; color: var(--ds-muted); text-align: right; font: 400 12px/1.4 var(--ds-sans); font-variant-numeric: tabular-nums; }
  .customer-workspace .ws-history .ds-pages, #ws-history-pages { display: flex; align-items: center; gap: 10px; }
  #ws-history-pages { padding: 0; color: var(--ds-muted); font: 400 12px/1.4 var(--ds-sans); }
  /* Each arrow is a triangle in a rounded box: slate when it can be used, darker when it cannot. */
  .customer-workspace .ws-history .ds-pagebtn, .customer-workspace .ws-history .ds-pagenum { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; min-width: 30px; height: 30px; min-height: 30px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: #202425; color: #b9c2c1; font: 500 11px/1 var(--ds-sans); box-shadow: none; cursor: pointer; transition: background .12s, color .12s; }
  .customer-workspace .ws-history .ds-pagebtn:not(:disabled):hover, .customer-workspace .ws-history .ds-pagenum:not([aria-current]):hover { background: #2c3132; color: #e6eae8; }
  .customer-workspace .ws-history .ds-pagebtn:disabled { opacity: 1; background: #171a1b; color: #4f5659; cursor: default; }
  .customer-workspace .ws-history .ds-pagenum[aria-current="page"] { background: var(--ds-tint); color: var(--ds-accent); cursor: default; }
  .customer-workspace .ws-history .ds-pagebtn svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
  .customer-workspace .ws-history .ds-pagegap { min-width: 20px; text-align: center; }
  .customer-workspace .ws-history :is(button, input, .ds-session):focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
  .customer-workspace .ws-history #ws-history-query:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px #3f7a62; }
  .customer-workspace .ws-history .ds-card.empty { background: var(--ds-quiet-surface); border: 0; border-radius: 12px; box-shadow: none; margin: 0; padding: 22px 18px; color: var(--ds-muted); text-align: center; }
  @media (max-width: 560px) {
    .customer-workspace .ws-history .ds-session { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
    .customer-workspace .ws-history .ds-session-when { grid-column: 2; grid-row: 2; align-items: flex-start; }
  }
  /* Saved result text; the review screen's legacy cards wear the same. */


  .customer-workspace .ws-shortcuts .ds-shortcut-intro { margin: -10px 0 24px; color: var(--ds-muted); font: 400 13px/1.6 var(--ds-sans); }
  .customer-workspace .ws-shortcuts [role="tabpanel"][hidden] { display: none; }
  .customer-workspace .ws-shortcuts .ds-shortcut-group + .ds-shortcut-group { margin-top: 26px; }
  .customer-workspace .ws-shortcuts h2 { margin: 0 0 10px; color: var(--ds-accent); font: 650 13px/17px var(--ds-sans); letter-spacing: .06em; text-transform: uppercase; }
  .customer-workspace .ws-shortcuts dl { background: #141516; margin: 0; padding: 0 18px; border: 1px solid var(--ds-quiet-border); border-radius: 10px; }
  .customer-workspace .ws-shortcuts .ds-shortcut-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 0; }
  .customer-workspace .ws-shortcuts .ds-shortcut-row + .ds-shortcut-row { border-top: 1px solid var(--ds-hairline); }
  .customer-workspace .ws-shortcuts dt { min-width: 0; color: var(--ds-text); font: 600 13px/1.3 var(--ds-sans); }
  .customer-workspace .ws-shortcuts dt small { display: block; margin-top: 4px; color: var(--ds-muted); font: 400 13px/1.5 var(--ds-sans); }
  .customer-workspace .ws-shortcuts dd { display: flex; flex: none; align-items: center; gap: 7px; margin: 0; color: var(--ds-subtle); }
  .customer-workspace .ws-shortcuts .ds-key-chord { display: inline-flex; gap: 3px; }
  .customer-workspace .ws-shortcuts kbd { min-width: 25px; box-sizing: border-box; text-align: center; padding: 4px 6px; border: 1px solid #454b47; border-bottom-width: 2px; border-radius: 5px; background: var(--ds-quiet-surface); color: var(--ds-text); font: 500 13px/1.2 var(--ds-sans); white-space: nowrap; }
  .customer-workspace .ws-shortcuts .ds-key-stack { display: grid; justify-items: center; gap: 5px; }
  .customer-workspace .ws-shortcuts .ds-key-summary { display: inline-flex; }
  .customer-workspace .ws-shortcuts .ds-key-detail kbd { min-width: 17px; padding: 2px 3px; border-radius: 3px; border-bottom-width: 1px; color: var(--ds-muted); font-size: 9px; }
  .customer-workspace .ws-shortcuts .ds-key-detail .ds-key-chord { gap: 2px; }
  .customer-workspace .ws-shortcuts .ds-shortcut-preview { width: 420px; max-width: 100%; box-sizing: border-box; margin-top: 14px; overflow: hidden; border: 1px solid #202321; border-radius: 7px; background: #101111; color: #aebbb4; font: 400 10px/1.4 var(--ds-sans); }
  .customer-workspace .ws-shortcuts .ds-preview-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; background: #191a19; border-bottom: 1px solid #2a302c; }
  .customer-workspace .ws-shortcuts .ds-preview-bar strong { color: #c9cfd8; font: 9px "SolverTitle", var(--ds-sans); }
  .customer-workspace .ws-shortcuts .ds-preview-impl-icon { color: #57d2a0; font: 10px "SolverMono", monospace; }
  .customer-workspace .ws-shortcuts .ds-preview-language { margin-left: auto; padding: 1px 5px; border-radius: 10px; background: #252725; border: 1px solid #353935; color: #a9b0ab; font-size: 8px; }
  .customer-workspace .ws-shortcuts .ds-preview-picker { display: flex; gap: 18px; padding: 3px 6px; background: #101412; border: 1px solid #303632; border-radius: 4px; font-size: 8px; }
  .customer-workspace .ws-shortcuts .ds-preview-code { padding: 7px 10px 9px; font: 8px/16px "SolverMono", ui-monospace, monospace; }
  .customer-workspace .ws-shortcuts .ds-preview-code > div { display: flex; white-space: pre; }
  .customer-workspace .ws-shortcuts .ds-preview-code code { font: inherit; }
  .customer-workspace .ws-shortcuts .ds-preview-line-number { flex: none; width: 15px; margin-right: 9px; border-right: 1px solid #2a302c; color: #606c65; }
  .customer-workspace .ws-shortcuts .ds-preview-code-bottom { height: 68px; mask-image: linear-gradient(#000 15%, transparent 100%); -webkit-mask-image: linear-gradient(#000 15%, transparent 100%); }
  .customer-workspace .ws-shortcuts .ds-preview-step-context { position: relative; height: 143px; }
  .customer-workspace .ws-shortcuts .ds-preview-code-both { position: absolute; inset: 0; padding-top: 8px; opacity: .6; mask-image: linear-gradient(transparent, #000 25%, #000 60%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 60%, transparent); }
  .customer-workspace .ws-shortcuts .ds-preview-step-tip { position: absolute; top: 15px; right: 12px; width: 230px; max-width: calc(100% - 40px); box-sizing: border-box; padding: 10px; border: 1px solid #426453; border-radius: 7px; background: linear-gradient(#182822, #10181a); box-shadow: 0 -3px 14px #284b3533, inset 0 8px 16px #29473530; }
  .customer-workspace .ws-shortcuts .ds-preview-step-tip strong { display: flex; align-items: center; gap: 6px; color: #c7d8cc; font: 9px "SolverSans", var(--ds-sans); }
  .customer-workspace .ws-shortcuts .ds-preview-step-tip p { margin: 8px 0 0; color: #b3bdb6; font: 9px/1.5 "SolverMono", monospace; }
  .customer-workspace .ws-shortcuts .ds-preview-step-tip b, .customer-workspace .ws-shortcuts .ds-preview-step-badge b { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; color: #14231b; background: #9bd2b9; font: 500 9px var(--ds-sans); }
  .customer-workspace .ws-shortcuts .ds-preview-change { position: absolute; top: 92px; left: 28px; right: 10px; padding: 10px 8px 7px; border: 1px solid #294333; border-left: 2px solid #618969; border-radius: 5px; background: #14251a80; }
  .customer-workspace .ws-shortcuts .ds-preview-change > code { color: #c8c7ca; font: 8px/1.5 "SolverMono", monospace; }
  .customer-workspace .ws-shortcuts .ds-preview-change > code span { color: #72b9ca; }
  .customer-workspace .ws-shortcuts .ds-preview-step-badge { display: inline-flex; align-items: center; gap: 5px; position: absolute; top: -11px; right: 7px; padding: 2px 6px 2px 2px; border: 1px solid #43604b; border-radius: 5px; background: #1a2a20; color: #b7d0bc; font-size: 9px; }
  .customer-workspace .ws-shortcuts .ds-preview-tabs { position: static; gap: 5px; padding: 0 10px; }
  .customer-workspace .ws-shortcuts .ds-preview-tabs .sdtab { height: 22px; line-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 8px; pointer-events: none; }
  .customer-workspace .ws-shortcuts .ds-preview-design-title { padding: 10px 10px 8px; color: #e3e9e6; letter-spacing: .08em; font: 10px "SolverSect", var(--ds-sans); }
  .customer-workspace .ws-shortcuts .ds-preview-design-copy { padding: 8px 10px 14px; color: #babfbc; font: 9px/1.6 "SolverSans", var(--ds-sans); mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); }
  .customer-workspace .ws-shortcuts .ds-preview-design-copy span { color: #8ebce8; }
  .customer-workspace .ws-shortcuts .ds-preview-flow-strip { display: flex; flex-wrap: wrap; gap: 9px 6px; padding: 13px 10px 5px; }
  .customer-workspace .ws-shortcuts .ds-preview-flow { position: relative; padding: 4px 6px; border: 1px solid currentColor; border-radius: 4px; background: #0a0807; font: 8px/1 "SolverMono", monospace; white-space: nowrap; }
  .customer-workspace .ws-shortcuts .ds-preview-flow.off { opacity: .35; }
  .customer-workspace .ws-shortcuts .ds-preview-diagram { padding: 0 6px; }
  .customer-workspace .ws-shortcuts .ds-preview-diagram svg { display: block; width: 100%; height: auto; max-height: 175px; }
  .customer-workspace .ws-shortcuts .ds-flow-key{ position: absolute; left: -5px; top: -7px; z-index: 3; display: grid; place-items: center; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 3px; color: inherit; background: #111613; font: 500 7px/1 var(--ds-sans); pointer-events: none; }
  .customer-workspace .ws-shortcuts .ds-shortcut-footnote { margin: 20px 0 0; color: var(--ds-muted); font: 400 12px/1.7 var(--ds-sans); }
  @media (max-width: 600px) { .customer-workspace .ws-shortcuts .ds-shortcut-row { flex-wrap: wrap; gap: 12px; } .customer-workspace .ws-shortcuts dt { width: 100%; } }

/* Website rows are links; a session with no saved answer opens nothing. */
.customer-workspace :is(.ws-collection .ds-solution, .ws-history .ds-session) { color:var(--ds-text); text-decoration:none; }
.customer-workspace .ws-history .ds-session.is-empty { cursor:default; }
/* Keyboard tabs: the Mac app's segmented switch (shell_ui DESKTOP_SEGMENTED_CSS). */
.customer-workspace .ws-shortcuts .ds-shortcut-tabs { display:inline-flex; align-items:center; max-width:100%; gap:0; margin-bottom:24px; padding:3px;
  border:0; border-radius:7px; background:var(--ds-quiet-surface); }
.customer-workspace .ws-shortcuts .ds-shortcut-tabs > button { flex:1 0 auto; min-width:0; min-height:0; margin:0; padding:7px 14px; border:0; border-radius:5px;
  background:transparent; color:var(--ds-muted); font:500 11px/1.2 var(--ds-sans); text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.customer-workspace .ws-shortcuts .ds-shortcut-tabs > button[aria-selected="true"] { background:#293b30; color:#c9e9cd; }
.customer-workspace .ws-shortcuts .ds-shortcut-tabs > button:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
/* Language menus: the Mac app's Settings button and listbox (shell_ui .ds-select). */
.customer-workspace .ws-settings .ds-picker { position:relative; flex:none; }
.customer-workspace .ws-settings .ds-select { display:flex; align-items:center; gap:8px; box-sizing:border-box; width:144px; max-width:100%; min-height:34px;
  margin:0; padding:8px 12px; color:var(--ds-text); background:var(--ds-input); border:0; border-radius:7px; text-align:left; cursor:pointer; font:400 12px/18px var(--ds-sans); }
.customer-workspace .ws-settings .ds-select span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-workspace .ws-settings .ds-select .chev { flex:none; margin-left:auto; color:var(--ds-subtle); font-size:9px; }
.customer-workspace .ws-settings .ds-select:not(:disabled):hover, .customer-workspace .ws-settings .ds-select[aria-expanded="true"] { background:var(--ds-hover); }
.customer-workspace .ws-settings .ds-picker [role="listbox"] { position:absolute; top:calc(100% + 5px); left:0; z-index:30; width:100%; max-height:280px; padding:0;
  box-sizing:border-box; overflow-y:auto; scrollbar-width:none; border:0; border-radius:8px; background:var(--ds-input); box-shadow:0 14px 40px rgba(0,0,0,.45); }
.customer-workspace .ws-settings .ds-picker [role="listbox"][hidden] { display:none; }
.customer-workspace .ws-settings .ds-picker .ds-option { display:block; width:100%; min-height:0; margin:0; padding:10px 15px; border:0; border-radius:0; background:transparent;
  color:var(--ds-text); text-align:left; white-space:nowrap; font:400 12px/1.3 var(--ds-sans); cursor:pointer; }
.customer-workspace .ws-settings .ds-picker .ds-option:is(:hover, :focus-visible) { background:var(--ds-hover); outline:0; }
.customer-workspace .ws-settings .ds-picker .ds-option.active { color:var(--ds-accent); }
/* The Question Bank pager under a table (discovery_ui .dq-pagination). */
.customer-workspace .ws-pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; color:var(--ds-muted); font:400 12px/1.4 var(--ds-sans); }
.customer-workspace .ws-pager[hidden] { display:none; }
.customer-workspace .ws-pager .ds-pagebtn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; min-width:30px; height:30px; min-height:30px;
  margin:0; padding:0; border:0; border-radius:7px; background:#202425; color:#b9c2c1; box-shadow:none; cursor:pointer; }
.customer-workspace .ws-pager .ds-pagebtn:hover:not(:disabled) { background:#2c3132; color:#e6eae8; }
.customer-workspace .ws-pager .ds-pagebtn:disabled { background:#171a1b; color:#4f5659; opacity:1; cursor:default; }
.customer-workspace .ws-pager .ds-pagebtn svg { width:12px; height:12px; fill:currentColor; stroke:none; }