/* Underlit project space. Shared homepage typography and material palette.
   All ambient light is static CSS; work surfaces never tilt or scroll independently. */
/* Manrope, Copyright 2018 The Manrope Project Authors.
   SIL Open Font License 1.1: /assets/manrope-OFL.txt */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/manrope-latin.woff2') format('woff2');
}
:root {
  --page: #060b14;
  --panel: #0b1423;
  --panel2: #101a2b;
  --line: #26364e;
  --text: #edf3ff;
  --muted: #a0b0c8;
  --accent: #abbaff;
  --font: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font: 15px/1.65 var(--font);
  scrollbar-width: thin;
  scrollbar-color: #627899 transparent;
}
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; background: var(--page); }
::selection { background: #bac7ff; color: #111b36; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.045em; }
h1 { font-size: clamp(31px, 3.5vw, 46px); line-height: 1.15; }
.brand { font-size: 38px; font-weight: 750; letter-spacing: -.075em; line-height: 1.15; }
.brand span { color: #abbaff; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .17em; color: #acbce0; }
.platform-shell { grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  background: #080f1b;
  padding: 34px 20px 25px;
  border-right-color: #a9c4ff1c;
  box-shadow: inset -1px 0 0 #01040a;
}
.brand-caption { margin-top: 13px; margin-bottom: 40px; font-size: 9px; letter-spacing: .17em; color: #8e9fbd; }
.nav-label { color: #7286a5; margin-bottom: 13px; }
.side-nav { gap: 7px; }
.side-nav button { min-height: 46px; border-radius: 8px; font-size: 12px; color: #a0b0c8; }
.side-nav button:hover { background: #abc0ff08; border-color: #a9c4ff1a; color: #edf3ff; }
.side-nav button[aria-current=page] {
  color: #e6ecff;
  background: #abbaff0c;
  border-color: #b9caff33;
  box-shadow: inset 2px 0 0 #abbaff, inset 0 1px 0 #eff5ff08;
}
.nav-symbol { color: #a7b8df; font-size: 17px; }
.profile { font-size: 12px; }
.avatar, .client-avatar { border-radius: 10px; background: #a1b7ff0b; border: 1px solid #b7caff35; color: #d7e0ff; }
.sidebar-note { color: #8293ae; font-size: 10px; line-height: 1.8; }
.sidebar-bottom { padding-inline: 10px; border-top-color: #a9c4ff20; }
.main-column {
  background: radial-gradient(ellipse 650px 420px at 97% 10%, #677ad00c, transparent 74%),
    radial-gradient(ellipse 650px 580px at 22% 75%, #4c83b008, transparent 73%), var(--page);
}
.topbar { min-height: 83px; padding: 19px 42px; background: #060b14; border-bottom-color: #b1c5ff25; position: relative; }
.topbar::after { content: ''; position: absolute; bottom: -1px; left: 0; width: min(75%, 700px); height: 1px; background: linear-gradient(90deg, #adc4ff66, transparent); box-shadow: 0 1px 12px #97b3ff15; pointer-events: none; }
.breadcrumbs { color: #8da1c1; font-size: 11px; }
.topbar-actions { gap: 9px; }
.prototype-banner { background: #0a1220; border-bottom-color: #b1c5ff12; padding-inline: 42px; font-size: 10px; color: #94a8ca; }
.prototype-banner strong { color: #b6c5e2; }
.prototype-banner>span:last-child { color: #8a9ebb; }
.live-dot { background: #b6c8ff; box-shadow: 0 0 9px #a6c0ff5e; }
#workspace { padding: 42px 42px 52px; }
.page-heading { margin-bottom: 31px; align-items: flex-start; }
.page-heading .eyebrow { margin-bottom: 15px; }
.page-heading p:not(.eyebrow) { margin-top: 16px; color: #a0b0c8; font-size: 13px; line-height: 1.85; max-width: 610px; }
.button {
  min-height: 42px; padding: 10px 16px; border-radius: 6px;
  background: #101b2d; border-color: #adc4f533; color: #dce7fb;
  font-size: 12px; font-weight: 600;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.button:hover { border-color: #adc4f56b; background: #17243a; box-shadow: inset 0 1px 0 #e8f0ff0c; }
.button.primary { background: #abbaff; color: #101a34; border-color: #abbaff; box-shadow: 0 6px 20px -13px #a2b9ff9c, inset 0 1px 0 #ffffff26; }
.button.primary:hover { background: #c0ccff; border-color: #c0ccff; box-shadow: 0 0 22px -8px #a6bdff7d; }
.button.ghost { color: #a6b6cf; border-color: #9ab2df28; background: #abc0ff03; }
.button.ghost:hover { color: #e6edff; border-color: #a6bdff60; background: #abc0ff09; }
.button.success { color: #b0e4ce; background: #75bfa00a; border-color: #85ccb13b; }
.button.small { min-height: 34px; padding: 7px 12px; font-size: 11px; }
input, textarea, select { background: #070e1a; border-color: #a6bded2e; border-radius: 6px; color: #edf3ff; transition: border-color .18s ease, box-shadow .18s ease; }
input:hover, textarea:hover, select:hover { border-color: #a9c0ee55; }
input:focus, textarea:focus, select:focus { border-color: #a9bfffaa; box-shadow: 0 0 0 3px #a9bfff0c; }
input::placeholder, textarea::placeholder { color: #7e92b0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #c4d3ff; outline-offset: 4px;
}
.metric, .panel { border-color: #a9c4ff2b; background: #0b1423; box-shadow: inset 0 1px 0 #eff5ff06, 0 24px 42px -35px #01040ad1; }
.metric { padding: 24px; border-radius: 10px; position: relative; overflow: hidden; }
.metric::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0 100%, #9ab1ff07, transparent 75%); pointer-events: none; }
.metric p { font-size: 11px; color: #a0b0c8; }
.metric strong { font-size: 39px; color: #c0ccff; font-weight: 550; margin-top: 15px; }
.metric small { color: #8b9fbe; font-size: 10px; line-height: 1.7; }
.metrics { gap: 16px; margin-bottom: 31px; }
.panel { border-radius: 11px; }
.panel-head, .panel-body { padding: 25px; }
.panel-head { border-bottom-color: #adc4ff1c; }
.panel-head h2 { font-size: 17px; }
.focus-project { padding: 25px; border-bottom-color: #adc4ff18; }
.focus-project h3 { font-size: 16px; letter-spacing: -.04em; }
.focus-project p { font-size: 12px; color: #a0b0c8; }
.focus-project .button-row { margin-top: 19px; }
.client-avatar.lavender { color: #cad3ff; background: #a1b7ff0b; }
.inline-meta { color: #93a6c7; }
.badge { padding: 4px 8px; border-radius: 5px; font-size: 10px; }
.badge.review { background: #abbaff09; border-color: #abbaff33; color: #c6d2ff; }
.badge.good { background: #88d9b209; }
.quiet-note { color: #94a5c0; }
.workflow-list li { border-bottom-color: #adc4ff18; padding-bottom: 24px; margin-bottom: 24px; }
.workflow-list li:before { color: #b5c5ff; border-color: #a1baff38; background: #a9beff07; }
.workflow-list strong { color: #d7e2f6; font-size: 12px; }
.workflow-list span { color: #91a4c4; font-size: 11px; }
.project-summary-line { color: #9aaccc; }
.project-summary-line code { color: #8295b5; }
.detail-top { padding: 27px; }
.detail-top h2 { font-size: 23px; line-height: 1.4; }
.detail-top p { color: #91a4c4; }
.tabs { padding-inline: 27px; gap: 20px; border-bottom-color: #adc4ff22; scrollbar-width: thin; scrollbar-color: #566e94 transparent; }
.tabs button { font-size: 12px; padding: 15px 5px; border-radius: 5px 5px 0 0; }
.tabs button:focus-visible { outline-offset: -2px; }
.tabs button:hover { color: #d8e4ff; }
.tabs button[aria-selected=true] { color: #c6d2ff; border-bottom-color: #b4c3ff; text-shadow: 0 0 14px #acc4ff26; }
.detail-body { padding: 27px; }
.stack-form label, .field-label { color: #bdcbe2; font-size: 12px; }
.stack-form textarea, .message-form textarea { font-size: 13px; line-height: 1.8; }
.message, .version-card, .task-card { border-color: #adc4ff26; background: #08111f; border-radius: 9px; }
.message p { color: #d5e0f5; font-size: 13px; }
.message-head { color: #94a6c5; flex-wrap: wrap; gap: 5px 14px; }
.message-head strong, .profile > div { min-width: 0; overflow-wrap: anywhere; }
.website-files { border-color: #adc4ff26; }
.version-card { padding: 20px; }
.version-info h3 { font-size: 14px; }
.version-marker { background: #a9beff07; border-color: #b1c4ff38; color: #c0ceff; }
.version-info p, .task-card p { color: #94a6c5; }
.task-card { padding: 21px; }
.task-card h3 { font-size: 14px; }
.empty-state { color: #94a8c8; padding-block: 39px; }
th { background: #08111e; color: #91a5c6; font-size: 11px; }
td { border-top-color: #adc4ff1c; color: #d0dcf0; padding-block: 21px; font-size: 12px; }
.table-wrap { scrollbar-width: thin; scrollbar-color: #566e94 transparent; }
.payment-card, .payment-composer, .payment-metrics>div { border-color: #adc4ff2d; background: #08111f; }
.payment-composer { background: #abbaff04; }
.payment-totals { border-block-color: #adc4ff24; }
.payment-totals strong { color: #dbe5ff; font-size: 26px; overflow-wrap: anywhere; }
.payment-totals>div:last-child strong { color: #b4c3ff; }
.payment-card .quiet-note, .payment-intro .quiet-note { color: #9aacca; }
.image-drop { border-color: #a8c0f044; background: #07101d; }
.image-drop:focus-within { background: #0c192a; border-color: #b6caff; }
.brief-images legend { color: #cfdbef; font-size: 13px; }
.brief-images>.quiet-note { color: #94a8c8; }
.brief-image-card { border-color: #a6c0f03d; background: #0c1728; }
.brief-image-card img { background: #060d18; }
.image-status { color: #b1c3e7; }
.workspace-footer { border-top-color: #a9c4ff1a; color: #8a9dbb; padding: 22px 42px; }
.workspace-footer span { color: #7d90ae; }
dialog { border-color: #a9c4ff50; background: #080f1b; border-radius: 12px; box-shadow: 0 35px 100px #0009, inset 0 1px 0 #eff5ff0b; }
dialog::backdrop { background: #01040be8; }
.dialog-head { padding: 23px 25px; border-bottom-color: #adc4ff26; }
.dialog-head h2 { font-size: 19px; }
.dialog-close { background: #101b2d; border-color: #adc4ff3b; color: #cddaff; }
.preview-stage { background: #060b14; }
.preview-viewport { border-color: #adc4ff40; background: #0a1424; border-radius: 8px; box-shadow: 0 20px 40px -28px #000; }
.preview-sidebar { border-left-color: #adc4ff24; }
.toast { background: #102039; border-color: #b1c9ff65; color: #edf3ff; box-shadow: 0 18px 50px #0008, inset 0 1px 0 #eff5ff0c; }

/* Authentication lives in the same material world as the homepage. */
.auth-page { background: radial-gradient(ellipse 900px 650px at 5% 65%, #405b9614, transparent 72%), radial-gradient(ellipse 750px 550px at 95% 5%, #5964a412, transparent 74%), #060b14; }
.auth-shell { position: relative; width: min(1160px, calc(100% - 96px)); margin-inline: auto; padding: 36px 0 30px; }
.auth-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; margin-bottom: 50px; border-bottom: 1px solid #a9c4ff26; }
.auth-header .brand { padding: 0; font-size: 42px; }
.auth-home { color: #a0b3d2; font-size: 11px; padding-block: 10px; transition: color .18s ease, text-shadow .18s ease; }
.auth-home:hover { color: #e0e9ff; text-shadow: 0 0 15px #a1bbff55; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .9fr); align-items: center; gap: clamp(45px, 7vw, 100px); }
.auth-story { position: relative; isolation: isolate; min-width: 0; padding-block: 20px; }
.auth-story>.eyebrow { color: #a8bade; margin-bottom: 24px; }
.auth-story-title { font-size: clamp(49px, 5.5vw, 75px); line-height: 1.07; letter-spacing: -.07em; font-weight: 650; }
.auth-story-title span { display: block; color: #b4bfff; }
.auth-story-title br { display: none; }
.auth-story-copy { color: #a0b0c8; font-size: 14px; line-height: 1.9; max-width: 355px; margin-top: 25px; }
.auth-water-art { position: relative; height: 250px; max-width: 380px; margin: 12px 0 3px 0; background: url('/assets/underlit-water-lens-640.webp') center/contain no-repeat; transform: rotate(-17deg); pointer-events: none; }
.auth-water-art::before { content: ''; position: absolute; z-index: -1; inset: -45px -70px; background: radial-gradient(ellipse at 48% 50%, #6f91ee15, transparent 67%); }
.auth-water-art::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 31%; left: -2%; bottom: 8%; border: 1px solid #b0c4ff25; border-radius: 50%; transform: rotate(5deg); }
.auth-story-notes { display: flex; align-items: center; flex-wrap: wrap; column-gap: 22px; row-gap: 10px; padding-top: 19px; border-top: 1px solid #adc4ff25; max-width: 395px; font-size: 9px; letter-spacing: .07em; color: #8fa4c6; }
.auth-story-notes span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #b1c3ff; box-shadow: 0 0 8px #a7c2ff44; vertical-align: 2px; margin-right: 8px; }
.auth-card {
  position: relative; padding: 32px 31px; border: 1px solid #a6c1f345;
  border-radius: 13px; background: #0a1423;
  box-shadow: inset 0 1px 0 #e8f0ff11, 0 35px 65px -35px #000c, 6px 8px 0 -3px #010611, 7px 9px 0 -3px #7893c425;
  min-width: 0;
}
.auth-card>h1, .auth-card>h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.055em; }
.auth-intro { font-size: 12px; line-height: 1.85; color: #9bafcf; margin-top: 11px; }
.auth-notice { margin: 18px 0; padding: 10px 12px; border-color: #a4baff25; border-radius: 7px; background: #a4baff05; color: #a0b4d3; font-size: 11px; line-height: 1.6; }
.auth-card > form label { color: #bdcde7; }
.auth-card > form label input { min-height: 45px; border-color: #a4baff38; }
.auth-card > form label small { color: #8fa5c7; }
.auth-card > form { margin-top: 19px; }
.auth-card > form > .button { min-height: 45px; margin-top: 6px; }
.auth-links { color: #91a6c8; line-height: 1.8; font-size: 11px; }
.auth-links a { color: #c4d1ff; border-color: #abbaff4d; }
.auth-links a:hover { color: #e0e8ff; border-color: #d3dfff; }
.auth-foot { color: #8a9fbe; font-size: 10px; margin-top: 42px; text-align: center; }
.auth-shell>.auth-card { max-width: 520px; margin: 60px auto 0; }
.auth-shell>.brand { font-size: 42px; }
#managed-auth { min-width: 0; }
#managed-auth .cl-rootBox, #managed-auth .cl-cardBox { width: 100%; max-width: 100%; }
#managed-auth .cl-card { background: transparent; box-shadow: none; border: 0; margin: 0; padding: 0; width: 100%; gap: 16px; }
#managed-auth .cl-cardBox { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
#managed-auth .cl-card:is(.cl-signIn-start, .cl-signUp-start) .cl-header { display: none; }
#managed-auth .cl-headerTitle { color: #e8efff; font-family: var(--font); font-size: 20px; letter-spacing: -.04em; line-height: 1.4; }
#managed-auth .cl-headerSubtitle { color: #a0b4d3; font-family: var(--font); font-size: 12px; line-height: 1.65; }
#managed-auth .cl-form { margin: 0; gap: 16px; }
#managed-auth .cl-formFieldLabel { color: #bdcde7; font-family: var(--font); font-size: 12px; font-weight: 650; }
#managed-auth .cl-formFieldInput { background: #070e1a; color: #edf3ff; border: 1px solid #a6bded38; box-shadow: none; border-radius: 8px; min-height: 46px; font-family: var(--font); font-size: 14px; }
#managed-auth .cl-formFieldInput:focus, #managed-auth .cl-formFieldInput:focus-visible {
  border-color: #b9caff;
  outline: 2px solid #b9caff;
  outline-offset: -2px;
  box-shadow: none !important;
}
#managed-auth .cl-formButtonPrimary { background: #abbaff; color: #101a34; border: 1px solid #abbaff; min-height: 46px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 700; box-shadow: inset 0 1px 0 #ffffff26, 0 8px 20px -15px #a2b9ff99; }
#managed-auth .cl-formButtonPrimary:hover { background: #c0ccff; border-color: #c0ccff; }
#managed-auth .cl-footer { background: transparent; background-image: none; margin: 0; padding: 10px 0 0; border-radius: 0; }
#managed-auth .cl-footerAction { padding: 10px 0; flex-wrap: wrap; justify-content: center; }
#managed-auth .cl-footerActionLink { color: #c4d1ff; font-size: 12px; }
#managed-auth .cl-footerActionText { color: #a0b4d3; font-size: 12px; }
#managed-auth:has(.cl-footerActionLink) + .auth-links { display: none; }
#managed-auth .cl-dividerLine { background: #adc4ff25; }
#managed-auth .cl-dividerText { color: #859bbf; font-size: 10px; }

@media (max-width: 1200px) {
  .platform-shell { grid-template-columns: 208px minmax(0, 1fr); }
  .sidebar { padding-inline: 15px; }
  .topbar, #workspace { padding-inline: 29px; }
  .prototype-banner, .workspace-footer { padding-inline: 29px; }
  .metric { padding: 21px; }
  .auth-shell { width: calc(100% - 64px); }
  .auth-layout { gap: 45px; grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr); }
  .auth-story-title { font-size: 58px; }
  .auth-water-art { height: 240px; }
}
@media (max-width: 900px) {
  .auth-shell { width: min(520px, calc(100% - 48px)); padding-top: 27px; }
  .auth-header { margin-bottom: 31px; padding-bottom: 22px; }
  .auth-layout { grid-template-columns: 1fr; gap: 30px; }
  .auth-story { padding: 0; padding-right: 180px; overflow: clip; }
  .auth-story>.eyebrow { margin-bottom: 14px; }
  .auth-story-title { font-size: 46px; max-width: 420px; }
  .auth-story-copy { font-size: 12px; margin-top: 17px; max-width: 375px; }
  .auth-water-art { position: absolute; right: -25px; top: 12px; width: 190px; height: 210px; opacity: .85; z-index: -1; }
  .auth-story-notes { margin-top: 24px; font-size: 8px; column-gap: 15px; padding-top: 15px; }
  .auth-card { width: 100%; max-width: 520px; justify-self: center; padding: 29px; }
  .auth-foot { margin-top: 32px; }
  .preview-sidebar { border-top-color: #adc4ff24; }
}
@media (max-width: 700px) {
  :root { font-size: 15px; }
  .platform-shell { display: block; }
  .sidebar { height: auto; padding: 22px 21px 0; border-right: 0; background: #080f1b; }
  .brand { font-size: 34px; padding: 0; }
  .brand-caption { font-size: 8px; margin-left: 15px; margin-bottom: 0; }
  .side-nav { margin-top: 20px; padding-bottom: 15px; gap: 6px; display: flex; flex-wrap: wrap; overflow: visible; }
  .side-nav button { flex: 1 1 calc(33.333% - 6px); min-width: 0; min-height: 38px; font-size: 11px; padding: 8px; justify-content: center; gap: 7px; }
  .side-nav .nav-symbol { width: 14px; font-size: 14px; }
  .topbar { padding: 15px 22px; min-height: 67px; flex-wrap: wrap; gap: 8px 14px; }
  .topbar-actions { flex-wrap: wrap; }
  .topbar-actions .button { min-height: 34px; padding-inline: 9px; font-size: 10px; }
  .prototype-banner { padding: 11px 22px; }
  #workspace { padding: 30px 22px 38px; }
  .page-heading { margin-bottom: 26px; }
  h1 { font-size: 32px; }
  .page-heading .eyebrow { margin-bottom: 12px; font-size: 9px; }
  .page-heading p:not(.eyebrow) { font-size: 12px; margin-top: 13px; }
  .metrics { gap: 11px; }
  .metric { padding: 18px; }
  .metric strong { font-size: 31px; }
  .metric p, .metric small { font-size: 10px; }
  .panel-head, .panel-body, .detail-body, .focus-project { padding: 20px; }
  .focus-project h3 { font-size: 14px; }
  .detail-top { padding: 20px; }
  .detail-top h2 { font-size: 20px; }
  .tabs { padding-inline: 20px; gap: 24px; }
  .tabs button { font-size: 11px; }
  .message-list { max-height: none; overflow: visible; padding-right: 0; }
  .button { min-height: 42px; }
  .stack-form input, .stack-form textarea, .stack-form select { font-size: 16px; }
  .payment-totals strong { font-size: 23px; }
  .workspace-footer { padding-inline: 22px; }
  .auth-shell { width: min(520px, calc(100% - 40px)); padding-top: 23px; }
  .auth-header { margin-bottom: 29px; padding-bottom: 21px; }
  .auth-header .brand { font-size: 37px; }
  .auth-home { font-size: 10px; }
  .auth-story { padding-right: 0; }
  .auth-story-title { font-size: clamp(36px, 9.8vw, 47px); }
  .auth-story-copy { font-size: 12px; max-width: min(335px, calc(100% - 25px)); }
  .auth-water-art { width: 120px; height: 150px; top: 0; right: -22px; opacity: .2; }
  .auth-story-notes { display: none; }
  .auth-story-notes span::before { margin-right: 6px; width: 3px; height: 3px; }
  .auth-layout { gap: 27px; }
  .auth-card { padding: 25px 23px; border-radius: 10px; }
  .auth-card>h1, .auth-card>h2 { font-size: 26px; }
  .auth-intro { font-size: 12px; }
  .auth-card input { font-size: 16px; }
  #managed-auth .cl-formFieldInput { font-size: 16px; }
  .auth-shell>.auth-card { margin-top: 35px; }
}
@media (max-width: 540px) {
  .payment-totals { grid-template-columns: 1fr; gap: 0; padding-block: 4px; }
  .payment-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 9px; }
  .payment-totals > div + div { border-top: 1px solid #adc4ff24; }
  .payment-totals small { font-size: 11px; }
  .payment-totals strong { margin-top: 0; font-size: 18px; min-width: 0; text-align: right; }
}
@media (max-width: 380px) {
  .auth-story { padding-right: 35px; }
  .auth-story-title { font-size: 35px; }
  .auth-water-art { width: 110px; right: -18px; opacity: .23; }
  .auth-story-notes { column-gap: 10px; font-size: 7px; }
  .auth-home { max-width: 95px; text-align: right; }
  #workspace { padding-inline: 17px; }
  .topbar, .prototype-banner { padding-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .main-column, .auth-page { background: Canvas; }
  .auth-card, .sidebar, .topbar, .metric, .panel, .payment-card, .payment-composer, .message, .version-card, .task-card, .website-files { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .auth-water-art, .metric::after, .topbar::after { display: none; }
  .auth-story-title span, .metric strong { color: CanvasText; }
  .button.primary, .side-nav button[aria-current=page] { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; }
}
