/* Automatic screen appearance. SVG attributes remain the light print/export
   source. Never invert equipment colours, photographs or the 3D rendering. */
@media screen {
  :root[data-appearance='dark'] {
    color-scheme: dark;
    --paper: #151d21;
    --paper-panel: #202b30;
    --paper-line: #435158;
    --ink: #e1e9eb;
    --muted: #aebdc2;
    --line: #435158;
    --green: #78c6d0;
    --mint: #2b454d;
    --sage: #2b454d;
    --peach: #504436;
    --blue: #293f4a;
    --white: #202b30;
    --red: #ff958c;
    --amber: #f4b960;
    --control-surface: #182227;
    --control-hover: #30434b;
    --control-primary-hover: #287985;
    --control-danger: #ff958c;
    --control-danger-border: #875149;
    --control-danger-hover: #432c29;
    --night-input: #182227;
    --night-hover: #30434b;
    --night-plan: #202a2f;
    background: var(--paper);
    color: var(--ink);
  }
  :where(html[data-appearance='dark']) body {
    color: var(--ink);
    background-color: var(--paper);
    background-image:
      linear-gradient(#afcad00a 1px, transparent 1px),
      linear-gradient(90deg, #afcad00a 1px, transparent 1px);
  }
  :where(html[data-appearance='dark'])
    body
    :is(.app-bar, .top, header:not(.demo-top), .preview-bar),
  :where(html[data-appearance='dark']) body:has(#scene) > nav,
  :where(html[data-appearance='dark']) body:has(#scene) > footer {
    background: var(--paper-panel);
    border-color: var(--line);
    color: var(--ink);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .auth,
      .card,
      .detail,
      .empty,
      .account-grid section,
      .course-list,
      .popover,
      dialog:not(.pwa-preview),
      .pwa-dialog,
      .topic,
      .article,
      .feature,
      .demo-card,
      .history-demo,
      .example-card,
      .examples-section,
      .product-shot,
      .quick-demos a,
      .search,
      .legal-layout main
    ) {
    background: var(--paper-panel);
    color: var(--ink);
    border-color: var(--line);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .card-content,
      .example-bottom,
      .history-preview,
      .visual,
      .player,
      .details,
      .where,
      .save-block,
      .smart,
      .example-image,
      #legal-toc
    ) {
    background: var(--paper-panel);
    color: var(--ink);
    border-color: var(--line);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      p,
      small,
      .beta,
      .eyebrow,
      .fine,
      .metric-label,
      .field,
      .label,
      .heading small,
      .ends,
      #visit,
      .example-caption,
      .guest-caption,
      .history-policy,
      .history-list button small,
      .topic small,
      .back,
      #search-results,
      .feature-foot
    ) {
    color: var(--muted);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      h1,
      h2,
      h3,
      strong,
      .title-input,
      .plan-category,
      .language-picker,
      .stock-badge,
      .product-help a,
      .rules-setting > a,
      .cloud-dialog a,
      .example-open,
      .topic .num
    ) {
    color: var(--ink);
  }
  :where(html[data-appearance='dark']) body a:hover,
  :where(html[data-appearance='dark'])
    body
    :is(.text-link, .legal-layout a, .legal-layout h1 + p, .history-saved, .on-badge) {
    color: var(--green);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      input,
      select,
      textarea,
      .settings-trigger,
      .category-chip,
      .size-chip,
      .search,
      button:not(:where(.tool, .icon-button, .primary)),
      .button.secondary
    ) {
    color: var(--ink);
    border-color: var(--line);
    background-color: var(--night-input);
  }
  :where(html[data-appearance='dark'])
    body
    :where(.top, .dashboard, .auth, .cloud-dialog, .history-list, .history-controls)
    button:not(:where(.card, .primary, .link)) {
    background: var(--night-input);
    color: var(--ink);
    border-color: var(--line);
  }
  :where(html[data-appearance='dark'])
    body
    :is(button, .button, .header .login):hover:not(:disabled),
  :where(html[data-appearance='dark']) body #rotate-view:hover,
  :where(html[data-appearance='dark']) body #contents a:hover {
    background: var(--night-hover);
    color: var(--ink);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .primary,
      .button.primary,
      .dashboard .primary,
      .auth .primary,
      .popover .primary,
      dialog .primary,
      .shot-action,
      .segmented [aria-pressed='true']
    ) {
    background: #236e79 !important;
    color: #fff !important;
    border-color: #4a9da9 !important;
  }
  :where(html[data-appearance='dark']) body .app-bar .button.primary:not(.export-trigger) {
    background: transparent !important;
    color: var(--ink) !important;
  }
  :where(html[data-appearance='dark']) body .app-bar #new-course,
  :where(html[data-appearance='dark']) body .app-bar .button.export-trigger,
  :where(html[data-appearance='dark']) body .workspace #construction-footer #manual-link {
    background: #3c535c !important;
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 1px #6a8a95;
  }
  :where(html[data-appearance='dark']) body .app-bar #new-course:is(:hover, :focus-visible),
  :where(html[data-appearance='dark'])
    body
    .app-bar
    .button.export-trigger:is(:hover, :focus-visible),
  :where(html[data-appearance='dark'])
    body
    .workspace
    #construction-footer
    #manual-link:is(:hover, :focus-visible) {
    background: #49636d !important;
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .category-options button[aria-pressed='true'],
      .size-options label:has(input:checked),
      .course-list tr.selected,
      .dashboard .view-toggle .active,
      #contents a[aria-current='page']
    ) {
    background: var(--sage) !important;
    color: var(--ink);
    border-color: #78c6d0;
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .app-bar .button,
      .app-bar .icon-button,
      .app-bar .zoom button,
      .app-bar .dimensions-trigger,
      #save-state,
      .chevron
    ) {
    color: var(--ink);
  }
  :where(html[data-appearance='dark']) body :is(input, select, textarea):focus-visible,
  :where(html[data-appearance='dark']) body :is(button, a):focus-visible {
    outline-color: #8ed8e0;
  }
  :where(html[data-appearance='dark']) body input::placeholder,
  :where(html[data-appearance='dark']) body textarea::placeholder {
    color: #96a7ad;
    opacity: 1;
  }
  :where(html[data-appearance='dark']) body .language-picker option {
    color: var(--ink);
    background: var(--paper-panel);
  }
  :where(html[data-appearance='dark']) body .language-picker:is(:hover, :focus-within) {
    background: var(--night-hover);
    border-color: var(--green);
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .course-list th,
      .course-list td,
      .steps li,
      .product-footer,
      .footer,
      footer,
      .header,
      .product-help
    ) {
    border-color: var(--line);
  }
  :where(html[data-appearance='dark']) body .course-list th {
    color: var(--muted);
  }
  :where(html[data-appearance='dark']) body dialog::backdrop {
    background: #03090db3;
  }
  :where(html[data-appearance='dark']) body :is(.issue, #cloud-error, .notice, #notice) {
    background: #432c29;
    color: var(--red);
    border-color: #875149;
  }
  :where(html[data-appearance='dark'])
    body
    :is(.issue-popover p, .course-metric.fail strong, .error, #plan-editor-error) {
    color: var(--red);
  }
  :where(html[data-appearance='dark'])
    body
    :is(.issue.orange, .issue-popover p.recommendation, .course-metric.recommendation strong) {
    color: var(--amber);
    background: transparent;
  }
  :where(html[data-appearance='dark'])
    body
    :is(.course-metric.pending strong, .course-metric.pending .metric-status) {
    color: var(--muted);
  }
  :where(html[data-appearance='dark']) body .metric-status {
    background: transparent;
    color: #7ed4b0;
  }
  :where(html[data-appearance='dark']) body .course-metric.fail .metric-status {
    background: transparent;
    color: var(--red);
  }
  :where(html[data-appearance='dark']) body .course-metric.recommendation .metric-status {
    background: transparent;
    color: var(--amber);
  }
  :where(html[data-appearance='dark']) body .course-tools .validation-trigger {
    color: #7ed4b0;
  }
  :where(html[data-appearance='dark']) body .course-tools .validation-trigger.has-issues {
    color: var(--red);
  }
  :where(html[data-appearance='dark'])
    body
    .course-tools
    .validation-trigger.has-recommendations:not(.has-issues) {
    color: var(--amber);
  }
  :where(html[data-appearance='dark']) body #close-course {
    color: var(--red);
  }
  :where(html[data-appearance='dark']) body :is(#loading, #view-caption, #hint) {
    background: var(--paper-panel);
    color: var(--ink);
  }
  :where(html[data-appearance='dark']) body .canvas-wrap {
    background: var(--night-plan);
    border-color: var(--line);
    box-shadow: 0 2px 12px #0004;
  }
  :where(html[data-appearance='dark']) body .canvas-wrap .canvas-top input.title-input {
    color: var(--ink);
    background: transparent;
  }
  :where(html[data-appearance='dark']) body .canvas-wrap .note-inline-editor {
    background: var(--night-plan);
    color: var(--ink);
    border-color: var(--ink);
  }
  :where(html[data-appearance='dark']) body .workspace[data-edge-stock] .course-tools .tool {
    background: transparent;
    color: var(--ink);
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .tool:is(:hover, :focus-visible):not(:disabled) {
    background: transparent;
    box-shadow: inset 0 0 0 1px #95bac3;
  }
  :where(html[data-appearance='dark']) body .workspace[data-edge-stock] .course-tools .delete-tool {
    color: var(--ink);
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .delete-tool:disabled {
    color: #71838a;
    background: transparent;
  }
  :where(html[data-appearance='dark']) body .workspace .course-tools #dynamic {
    color: #86c5cf;
    background: transparent;
  }
  :where(html[data-appearance='dark']) .smart-icon {
    --smart-accent: #86c5cf;
    --smart-edge: #a6d8df;
    --smart-pale: #2b454d;
    --smart-node: #202a2f;
    --smart-on: #132a31;
  }
  :where(html[data-appearance='dark']) body img:is(.plan-brand, .plan-footer-brand),
  :where(html[data-appearance='dark']) body .brand img,
  :where(html[data-appearance='dark']) body header > a > img[src$='brand.svg'],
  :where(html[data-appearance='dark']) body .footer > img[src$='brand.svg'] {
    content: url('brand-night.svg');
  }
  /* Change only authored paint attributes, never hit areas or geometry. */
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    [fill='#ffffff'],
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    [fill='#fff'],
  :where(html[data-appearance='dark'])
    :is(#course, .motion-view, .history-sheet)
    :is(rect, circle)[fill='white'] {
    fill: var(--night-plan);
  }
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    :is([stroke='#111111'], [stroke='#111'], [stroke='#222'], [stroke='#333'], [stroke='#333333']) {
    stroke: #dce6e9;
  }
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    :is([fill='#111111'], [fill='#111'], [fill='#222'], [fill='#333'], [fill='#333333']) {
    fill: #e1e9eb;
  }
  :where(html[data-appearance='dark']) #course :is([stroke='white'], [stroke='#ffffff']) {
    stroke: var(--night-plan);
  }
  :where(html[data-appearance='dark'])
    #course
    :is([fill='#777777'], [fill='#7c8781'], [fill='#555555'], [fill='#888888']) {
    fill: #aabcc3;
  }
  :where(html[data-appearance='dark'])
    #course
    :is([stroke='#777777'], [stroke='#888888'], [stroke='#84958c']) {
    stroke: #93a6ae;
  }
  :where(html[data-appearance='dark']) #course #grid-pattern path {
    stroke: #51626a;
  }
  :where(html[data-appearance='dark']) #course .grid-label {
    fill: #51626a;
  }
  :where(html[data-appearance='dark']) #course .dog-path:not([stroke='#c8665e']) {
    stroke: #b5c4ca;
  }
  :where(html[data-appearance='dark']) #course .plan-footer-brand text,
  :where(html[data-appearance='dark']) #plan-brand text,
  :where(html[data-appearance='dark']) #course .plan-footer-brand .brand-wordmark,
  :where(html[data-appearance='dark']) #plan-brand .brand-wordmark {
    fill: var(--ink);
  }
  :where(html[data-appearance='dark']) #course [stroke='#c8665e'],
  :where(html[data-appearance='dark']) #course [stroke='#bc4038'] {
    stroke: var(--red);
  }
  :where(html[data-appearance='dark']) #course [fill='#c8665e'],
  :where(html[data-appearance='dark']) #course [fill='#bc4038'] {
    fill: var(--red);
  }
  :where(html[data-appearance='dark']) #course [data-status-symbol='warning'] {
    color: var(--red);
  }
  :where(html[data-appearance='dark'])
    #course
    :is(.rotation-controls, .path-controls)
    [stroke='#237985'] {
    stroke: #78c6d0;
  }
  :where(html[data-appearance='dark'])
    #course
    :is(.rotation-controls, .path-controls)
    [fill='#237985'] {
    fill: #78c6d0;
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .validation-trigger {
    color: #7ed4b0;
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .validation-trigger[data-validation-status='info'] {
    color: #85bef0;
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .validation-trigger.has-recommendations {
    color: var(--amber);
  }
  :where(html[data-appearance='dark'])
    body
    .workspace[data-edge-stock]
    .course-tools
    .validation-trigger.has-issues {
    color: var(--red);
  }
  :where(html[data-appearance='dark']) #course .judge-marker circle {
    fill: #3b4b53;
    stroke: #aabcc3;
  }
  :where(html[data-appearance='dark'])
    body
    :is(.rules-contact, .history-sheet, .demo-top, .example-image > span) {
    background: var(--paper-panel);
    color: var(--ink);
    border-color: var(--line);
  }
  :where(html[data-appearance='dark']) body .history-sheet-head img {
    content: url('brand-night.svg');
  }
  :where(html[data-appearance='dark']) body .thumb {
    background: var(--night-plan);
  }
  :where(html[data-appearance='dark']) .thumb [fill='white'],
  :where(html[data-appearance='dark']) .thumb [fill='#fff'],
  :where(html[data-appearance='dark']) .thumb [fill='#ffffff'] {
    fill: var(--night-plan);
  }
  :where(html[data-appearance='dark']) .thumb [stroke='#222'],
  :where(html[data-appearance='dark']) .thumb [stroke='#333'] {
    stroke: #dce6e9;
  }
  :where(html[data-appearance='dark']) .thumb [stroke='#111'] {
    stroke: #dce6e9;
  }
  :where(html[data-appearance='dark']) .thumb [fill='#111'] {
    fill: #e1e9eb;
  }
  :where(html[data-appearance='dark']) .thumb [stroke='#68796e'] {
    stroke: #b5c4ca;
  }
  :where(html[data-appearance='dark']) #course .plan-footer-brand [stroke='white'] {
    stroke: white;
  }
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    [stroke='#41652f'] {
    stroke: #a1cf77;
  }
  :where(html[data-appearance='dark'])
    :is(#course, .course-tools, .motion-view, .history-sheet, .obstacle-symbol)
    [stroke='#24566f'] {
    stroke: #70a8c3;
  }
  :where(html[data-appearance='dark']) body .motion-view,
  :where(html[data-appearance='dark']) body .history-sheet > svg {
    background: var(--night-plan);
  }
  :where(html[data-appearance='dark'])
    :is(.motion-view, .history-sheet)
    :is([stroke='#deded8'], [stroke='#dedede'], [stroke='#c5c5c5']) {
    stroke: #51626a;
  }
  :where(html[data-appearance='dark']) :is(.motion-view, .history-sheet) [stroke='#888'] {
    stroke: #93a6ae;
  }
  :where(html[data-appearance='dark'])
    :is(.motion-view, .history-sheet)
    :is([fill='#293b40'], [fill='#263c35'], [fill='#29463e']) {
    fill: #e1e9eb;
  }
  :where(html[data-appearance='dark'])
    :is(.motion-view, .history-sheet)
    :is([stroke='#293b40'], [stroke='#263c35'], [stroke='#29463e']) {
    stroke: #dce6e9;
  }
  :where(html[data-appearance='dark']) .motion-view :is([stroke='#e1e5dc'], [stroke='#e3e9df']) {
    stroke: #51626a;
  }
  :where(html[data-appearance='dark']) .motion-view [stroke='#888888'] {
    stroke: #93a6ae;
  }
  :where(html[data-appearance='dark']) .motion-view :is([fill='#b65c3b'], [fill='#8b432c']) {
    fill: #f0b29c;
  }
  :where(html[data-appearance='dark']) body .rule-status.warning {
    color: var(--red);
  }
  :where(html[data-appearance='dark']) body .rule-status :is(p, strong) {
    color: inherit;
  }
  :where(html[data-appearance='dark'])
    body
    :is(
      .preview-section,
      .video-frame,
      .screenshot-link,
      .offline-screen,
      .practical-features .offline-feature
    ) {
    background: var(--paper-panel);
    border-color: var(--line);
  }
  :where(html[data-appearance='dark']) body .offline-screen {
    left: 44.7916667%;
    top: 24.90234375%;
    width: 38.1510417%;
    height: 32.51953125%;
    clip-path: polygon(1.706485% 0.600601%, 98.464164% 0, 100% 100%, 0 98.198198%);
  }
  /* Provider artwork keeps its approved white Google button. */
  :where(html[data-appearance='dark']) body .auth button.google-sign-in,
  :where(html[data-appearance='dark']) body button.google-sign-in {
    background: #fff;
    color: #1f1f1f;
    border-color: #747775;
  }
  :where(html[data-appearance='dark']) body .auth button.google-sign-in:hover,
  :where(html[data-appearance='dark']) body button.google-sign-in:hover {
    background: #f2f2f2;
    color: #1f1f1f;
  }
}